13331632524

Committed 14 Feb 2025 02:51PM CUT coverage: 22.015% (-69.6%) from 91.622%

Build # 13331632524

Build Type

Pull #15372

github

Committed by

web-flow

Commit Message

Merge d52d57714 into bcb78ae0a

Pull Request Pull Request #15372: chore(*): test ci passing

Run Details

1990 of 15592 branches covered (12.76%)

431 of 964 new or added lines in 18 files covered. (44.71%)

19956 existing lines in 307 files now uncovered.

6452 of 29307 relevant lines covered (22.02%)

249.17 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

14.29

/projects/igniteui-angular/src/lib/badge/badge.component.ts

import { NgIf } from '@angular/common';
import { booleanAttribute, Component, HostBinding, Input } from '@angular/core';
import { mkenum } from '../core/utils';
import { IgxIconComponent } from '../icon/icon.component';

let NEXT_ID = 0;

/**
 * Determines the igxBadge type
 */
export const IgxBadgeType = /*@__PURE__*/mkenum({
    PRIMARY: 'primary',
    INFO: 'info',
    SUCCESS: 'success',
    WARNING: 'warning',
    ERROR: 'error'
});
export type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType];
/**
 * Badge provides visual notifications used to decorate avatars, menus, etc.
 *
 * @igxModule IgxBadgeModule
 *
 * @igxTheme igx-badge-theme
 *
 * @igxKeywords badge, icon, notification
 *
 * @igxGroup Data Entry & Display
 *
 * @remarks
 * The Ignite UI Badge is used to decorate avatars, navigation menus, or other components in the
 * application when visual notification is needed. They are usually designed as icons with a predefined
 * style to communicate information, success, warnings, or errors.
 *
 * @example
 * ```html
 * <igx-avatar>
 *   <igx-badge icon="check" type="success"></igx-badge>
 * </igx-avatar>
 */
@Component({
    selector: 'igx-badge',
    templateUrl: 'badge.component.html',
    imports: [NgIf, IgxIconComponent]
})
export class IgxBadgeComponent {

   /**
    * Sets/gets the `id` of the badge.
    *
    * @remarks
    * If not set, the `id` will have value `"igx-badge-0"`.
    *
    * @example
    * ```html
    * <igx-badge id="igx-badge-2"></igx-badge>
    * ```
    */
    @HostBinding('attr.id')
    @Input()
    public id = `igx-badge-${NEXT_ID++}`;

   /**
    * Sets/gets the type of the badge.
    *
    * @remarks
    * Allowed values are `primary`, `info`, `success`, `warning`, `error`.
    * Providing an invalid value won't display a badge.
    *
    * @example
    * ```html
    * <igx-badge type="success"></igx-badge>
    * ```
    */
    @Input()
    public type: string | IgxBadgeType = IgxBadgeType.PRIMARY;

   /**
    * Sets/gets the value to be displayed inside the badge.
    *
    * @remarks
    * If an `icon` property is already set the `icon` will be displayed.
    * If neither a `value` nor an `icon` is set the content of the badge will be empty.
    *
    * @example
    * ```html
    * <igx-badge value="11"></igx-badge>
    * ```
    */
    @Input()
    public value: string | number = '';

    /**
     * Sets/gets an icon for the badge from the material icons set.
     *
     * @remarks
     * Has priority over the `value` property.
     * If neither a `value` nor an `icon` is set the content of the badge will be empty.
     * Providing an invalid value won't display anything.
     *
     * @example
     * ```html
     * <igx-badge icon="check"></igx-badge>
     * ```
     */
    @Input()
    public icon: string;

    /**
     * The name of the icon set. Used in case the icon is from a different icon set.
     */
    @Input()
    public iconSet: string;

    /**
     * Sets/gets the role attribute value.
     *
     * @example
     * ```typescript
     * @ViewChild("MyBadge", { read: IgxBadgeComponent })
     * public badge: IgxBadgeComponent;
     *
     * badge.role = 'status';
     * ```
     */
    @HostBinding('attr.role')
    public role = 'status';

    /**
     * Sets/gets the css class to use on the badge.
     *
     * @example
     * ```typescript
     * @ViewChild("MyBadge", { read: IgxBadgeComponent })
     * public badge: IgxBadgeComponent;
     *
     * badge.cssClass = 'my-badge-class';
     * ```
     */
    @HostBinding('class.igx-badge')
    public cssClass = 'igx-badge';

    /**
     * Sets a square shape to the badge, if `shape` is set to `square`.
     * By default the shape of the badge is rounded.
     *
     * @example
     * ```html
     * <igx-badge shape="square"></igx-badge>
     * ```
     */
    @Input()
    public shape: 'rounded' | 'square' = 'rounded';

    /** @hidden @internal */
    @HostBinding('class.igx-badge--square')
    public get _squareShape(): boolean {
        return this.shape === 'square';
    }

    /**
     * Sets/gets the aria-label attribute value.
     *
     * @example
     * ```typescript
     * @ViewChild("MyBadge", { read: IgxBadgeComponent })
     * public badge: IgxBadgeComponent;
     *
     * badge.label = 'badge';
     * ```
     */
    @HostBinding('attr.aria-label')
    public label = 'badge';

    /**
     * Sets/gets whether the badge is outlined.
     * Default value is `false`.
     *
     * @example
     * ```html
     * <igx-badge outlined></igx-badge>
     * ```
     */
    @Input({transform: booleanAttribute})
    @HostBinding('class.igx-badge--outlined')
    public outlined = false;

    /**
     * Defines a human-readable, accessor, author-localized description for
     * the `type` and the `icon` or `value` of the element.
     *
     * @hidden
     * @internal
     */
    @HostBinding('attr.aria-roledescription')
    public get roleDescription() {
        if (this.icon) {
            return this.type + ' type badge with icon type ' + this.icon;
        } else if (this.value || this.value === 0) {
            return this.type + ' badge type with value ' + this.value;
        }
        return this.type + ' badge type without value';
    }

    @HostBinding('class.igx-badge--info')
    public get infoClass() {
        return this.type === IgxBadgeType.INFO;
    }

    @HostBinding('class.igx-badge--success')
    public get successClass() {
        return this.type === IgxBadgeType.SUCCESS;
    }

    @HostBinding('class.igx-badge--warning')
    public get warningClass() {
        return this.type === IgxBadgeType.WARNING;
    }

    @HostBinding('class.igx-badge--error')
    public get errorClass() {
        return this.type === IgxBadgeType.ERROR;
    }
}

1	import { NgIf } from '@angular/common';
2	import { booleanAttribute, Component, HostBinding, Input } from '@angular/core';
3	import { mkenum } from '../core/utils';
4	import { IgxIconComponent } from '../icon/icon.component';
5
6	let NEXT_ID = 0;	2✔
7
8	/**
9	* Determines the igxBadge type
10	*/
11	export const IgxBadgeType = /@__PURE__/mkenum({	2✔
12	PRIMARY: 'primary',
13	INFO: 'info',
14	SUCCESS: 'success',
15	WARNING: 'warning',
16	ERROR: 'error'
17	});
18	export type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType];
19	/**
20	* Badge provides visual notifications used to decorate avatars, menus, etc.
21	*
22	* @igxModule IgxBadgeModule
23	*
24	* @igxTheme igx-badge-theme
25	*
26	* @igxKeywords badge, icon, notification
27	*
28	* @igxGroup Data Entry & Display
29	*
30	* @remarks
31	* The Ignite UI Badge is used to decorate avatars, navigation menus, or other components in the
32	* application when visual notification is needed. They are usually designed as icons with a predefined
33	* style to communicate information, success, warnings, or errors.
34	*
35	* @example
36	* ```html
37	* <igx-avatar>
38	* <igx-badge icon="check" type="success"></igx-badge>
39	* </igx-avatar>
40	*/
41	@Component({
42	selector: 'igx-badge',
43	templateUrl: 'badge.component.html',
44	imports: [NgIf, IgxIconComponent]
45	})
46	export class IgxBadgeComponent {	2✔
47
48	/**
49	* Sets/gets the `id` of the badge.
50	*
51	* @remarks
52	* If not set, the `id` will have value `"igx-badge-0"`.
53	*
54	* @example
55	* ```html
56	* <igx-badge id="igx-badge-2"></igx-badge>
57	* ```
58	*/
59	@HostBinding('attr.id')
60	@Input()
UNCOV 61	public id = `igx-badge-${NEXT_ID++}`;	×
62
63	/**
64	* Sets/gets the type of the badge.
65	*
66	* @remarks
67	* Allowed values are `primary`, `info`, `success`, `warning`, `error`.
68	* Providing an invalid value won't display a badge.
69	*
70	* @example
71	* ```html
72	* <igx-badge type="success"></igx-badge>
73	* ```
74	*/
75	@Input()
UNCOV 76	public type: string \| IgxBadgeType = IgxBadgeType.PRIMARY;	×
77
78	/**
79	* Sets/gets the value to be displayed inside the badge.
80	*
81	* @remarks
82	* If an `icon` property is already set the `icon` will be displayed.
83	* If neither a `value` nor an `icon` is set the content of the badge will be empty.
84	*
85	* @example
86	* ```html
87	* <igx-badge value="11"></igx-badge>
88	* ```
89	*/
90	@Input()
UNCOV 91	public value: string \| number = '';	×
92
93	/**
94	* Sets/gets an icon for the badge from the material icons set.
95	*
96	* @remarks
97	* Has priority over the `value` property.
98	* If neither a `value` nor an `icon` is set the content of the badge will be empty.
99	* Providing an invalid value won't display anything.
100	*
101	* @example
102	* ```html
103	* <igx-badge icon="check"></igx-badge>
104	* ```
105	*/
106	@Input()
107	public icon: string;
108
109	/**
110	* The name of the icon set. Used in case the icon is from a different icon set.
111	*/
112	@Input()
113	public iconSet: string;
114
115	/**
116	* Sets/gets the role attribute value.
117	*
118	* @example
119	* ```typescript
120	* @ViewChild("MyBadge", { read: IgxBadgeComponent })
121	* public badge: IgxBadgeComponent;
122	*
123	* badge.role = 'status';
124	* ```
125	*/
126	@HostBinding('attr.role')
UNCOV 127	public role = 'status';	×
128
129	/**
130	* Sets/gets the css class to use on the badge.
131	*
132	* @example
133	* ```typescript
134	* @ViewChild("MyBadge", { read: IgxBadgeComponent })
135	* public badge: IgxBadgeComponent;
136	*
137	* badge.cssClass = 'my-badge-class';
138	* ```
139	*/
140	@HostBinding('class.igx-badge')
UNCOV 141	public cssClass = 'igx-badge';	×
142
143	/**
144	* Sets a square shape to the badge, if `shape` is set to `square`.
145	* By default the shape of the badge is rounded.
146	*
147	* @example
148	* ```html
149	* <igx-badge shape="square"></igx-badge>
150	* ```
151	*/
152	@Input()
UNCOV 153	public shape: 'rounded' \| 'square' = 'rounded';	×
154
155	/** @hidden @internal */
156	@HostBinding('class.igx-badge--square')
157	public get _squareShape(): boolean {
UNCOV 158	return this.shape === 'square';	×
159	}
160
161	/**
162	* Sets/gets the aria-label attribute value.
163	*
164	* @example
165	* ```typescript
166	* @ViewChild("MyBadge", { read: IgxBadgeComponent })
167	* public badge: IgxBadgeComponent;
168	*
169	* badge.label = 'badge';
170	* ```
171	*/
172	@HostBinding('attr.aria-label')
UNCOV 173	public label = 'badge';	×
174
175	/**
176	* Sets/gets whether the badge is outlined.
177	* Default value is `false`.
178	*
179	* @example
180	* ```html
181	* <igx-badge outlined></igx-badge>
182	* ```
183	*/
184	@Input({transform: booleanAttribute})
185	@HostBinding('class.igx-badge--outlined')
UNCOV 186	public outlined = false;	×
187
188	/**
189	* Defines a human-readable, accessor, author-localized description for
190	* the `type` and the `icon` or `value` of the element.
191	*
192	* @hidden
193	* @internal
194	*/
195	@HostBinding('attr.aria-roledescription')
196	public get roleDescription() {
UNCOV 197	if (this.icon) {	×
UNCOV 198	return this.type + ' type badge with icon type ' + this.icon;	×
UNCOV 199	} else if (this.value \|\| this.value === 0) {	×
UNCOV 200	return this.type + ' badge type with value ' + this.value;	×
201	}
UNCOV 202	return this.type + ' badge type without value';	×
203	}
204
205	@HostBinding('class.igx-badge--info')
206	public get infoClass() {
UNCOV 207	return this.type === IgxBadgeType.INFO;	×
208	}
209
210	@HostBinding('class.igx-badge--success')
211	public get successClass() {
UNCOV 212	return this.type === IgxBadgeType.SUCCESS;	×
213	}
214
215	@HostBinding('class.igx-badge--warning')
216	public get warningClass() {
UNCOV 217	return this.type === IgxBadgeType.WARNING;	×
218	}
219
220	@HostBinding('class.igx-badge--error')
221	public get errorClass() {
UNCOV 222	return this.type === IgxBadgeType.ERROR;	×
223	}
224	}

IgniteUI / igniteui-angular / 13331632524

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous