28358286454

Committed 29 Jun 2026 08:17AM UTC coverage: 90.127% (-0.05%) from 90.174%

Build # 28358286454

Build Type

Pull #17246

github

Committed by

web-flow

Commit Message

Merge 21687d939 into 07bdcd752

Pull Request Pull Request #17246: fix(pivot-grid): fix date format based on the localization

Coverage Stats

14921 of 17392 branches covered (85.79%)

Branch coverage included in aggregate %.

29 of 32 new or added lines in 4 files covered. (90.63%)

735 existing lines in 76 files now uncovered.

29992 of 32441 relevant lines covered (92.45%)

34632.46 hits per line

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

97.78

/projects/igniteui-angular/icon/src/icon/icon.component.ts

import { Component, ElementRef, HostBinding, Input, OnInit, OnDestroy, OnChanges, ChangeDetectorRef, booleanAttribute, inject, ChangeDetectionStrategy } from "@angular/core";
import { IgxIconService } from "./icon.service";
import type { IconReference } from "./types";
import { filter, takeUntil } from "rxjs/operators";
import { Subject } from "rxjs";
import { SafeHtml } from "@angular/platform-browser";

/**
 * Icon provides a way to include material icons to markup
 *
 * @igxModule IgxIconModule
 *
 * @igxTheme igx-icon-theme
 *
 * @igxKeywords icon, picture
 *
 * @igxGroup Display
 *
 * @remarks
 *
 * The Ignite UI Icon makes it easy for developers to include material design icons directly in their markup. The icons
 * support different icon families and can be marked as active or disabled using the `active` property. This will change the appearance
 * of the icon.
 *
 * @example
 * ```html
 * <igx-icon family="filter-icons" active="true">home</igx-icon>
 * ```
 */
@Component({
    selector: "igx-icon",
    changeDetection: ChangeDetectionStrategy.Eager,
    templateUrl: "icon.component.html",
})
export class IgxIconComponent implements OnInit, OnChanges, OnDestroy {
    public el = inject(ElementRef);
    private iconService = inject(IgxIconService);
    private ref = inject(ChangeDetectorRef);

    private _iconRef: IconReference;
    private _destroy$ = new Subject<void>();
    private _userClasses = new Set<string>();
    private _iconClasses = new Set<string>();

    @HostBinding("class")
    protected get elementClasses() {
        const icon = Array.from(this._iconClasses).join(" ");
        const user = Array.from(this._userClasses).join(" ");

        return `igx-icon ${icon} ${user}`.trim();
    }

    private addIconClass(className: string) {
        this._iconClasses.add(className);
    }

    private clearIconClasses() {
        this._iconClasses.clear();
    }

    /**
     *  An accessor that returns inactive property.
     *
     * @example
     * ```typescript
     * @ViewChild("MyIcon")
     * public icon: IgxIconComponent;
     * ngAfterViewInit() {
     *    let iconActive = this.icon.getInactive;
     * }
     * ```
     */
    @HostBinding("class.igx-icon--inactive")
    public get getInactive(): boolean {
        return !this.active;
    }

    /**
     *  The `aria-hidden` attribute of the icon.
     *  By default is set to 'true'.
     */
    @HostBinding("attr.aria-hidden")
    @Input()
    public ariaHidden = true;

    /**
     * An @Input property that sets the value of the `family`. By default it's "material".
     *
     * @example
     * ```html
     * <igx-icon family="material">settings</igx-icon>
     * ```
     */
    @Input()
    public family: string;

    /**
     *  Set the `name` of the icon.
     *
     *  @example
     * ```html
     * <igx-icon name="contains" family="filter-icons"></igx-icon>
     * ```
     */
    @Input()
    public name: string;

    /**
     * An @Input property that allows you to disable the `active` property. By default it's applied.
     *
     * @example
     * ```html
     * <igx-icon [active]="false">settings</igx-icon>
     * ```
     */
    @Input({ transform: booleanAttribute })
    public active = true;

    constructor() {
        this.family = this.iconService.defaultFamily.name;

        this.iconService.iconLoaded
            .pipe(
                filter((e) => e.name === this.name && e.family === this.family),
                takeUntil(this._destroy$),
            )
            .subscribe(() => {
                this.setIcon();
                this.ref.detectChanges()
            });
    }

    /**
     * @hidden
     * @internal
     */
    public ngOnInit() {
        this.setIcon();
    }

    /**
     * @hidden
     * @internal
     */
    public ngOnChanges() {
        this.setIcon();
    }

    /**
     * @hidden
     * @internal
     */
    public ngOnDestroy() {
        this._destroy$.next();
        this._destroy$.complete();
    }

    protected get iconRef() {
        return this._iconRef;
    }

    protected set iconRef(ref: IconReference) {
        this._iconRef = ref;
    }

    /**
     *  An accessor that returns the value of the family property.
     *
     * @example
     * ```typescript
     *  @ViewChild("MyIcon")
     * public icon: IgxIconComponent;
     * ngAfterViewInit() {
     *    let iconFamily = this.icon.getFamily;
     * }
     * ```
     */
    public get getFamily(): string {
        return this.iconRef.family;
    }

    /**
     *  An accessor that returns the value of the active property.
     *
     * @example
     * ```typescript
     * @ViewChild("MyIcon")
     * public icon: IgxIconComponent;
     * ngAfterViewInit() {
     *    let iconActive = this.icon.getActive;
     * }
     * ```
     */
    public get getActive(): boolean {
        return this.active;
    }

    /**
     * An accessor that returns the value of the iconName property.
     *
     * @example
     * ```typescript
     * @ViewChild("MyIcon")
     * public icon: IgxIconComponent;
     * ngAfterViewInit() {
     *    let name = this.icon.getName;
     * }
     * ```
     */
    public get getName(): string {
        return this.iconRef.name;
    }

    /**
     *  An accessor that returns the underlying SVG image as SafeHtml.
     *
     * @example
     * ```typescript
     * @ViewChild("MyIcon")
     * public icon: IgxIconComponent;
     * ngAfterViewInit() {
     *    let svg: SafeHtml = this.icon.getSvg;
     * }
     * ```
     */
    public get getSvg(): SafeHtml {
        const { name, family } = this.iconRef;

        if (this.iconService.isSvgIconCached(name, family)) {
            return this.iconService.getSvgIcon(name, family);
        }

        return null;
    }

    /**
     * @hidden
     * @internal
     */
    private setIcon() {
        this.iconRef = this.iconService.getIconRef(this.name, this.family);
        this.clearIconClasses();

        const { name, type, className } = this.iconRef;

        if (name && type === "font") {
            this.addIconClass(name);
        }

        this.addIconClass(className);
    }
}

1	import { Component, ElementRef, HostBinding, Input, OnInit, OnDestroy, OnChanges, ChangeDetectorRef, booleanAttribute, inject, ChangeDetectionStrategy } from "@angular/core";
2	import { IgxIconService } from "./icon.service";
3	import type { IconReference } from "./types";
4	import { filter, takeUntil } from "rxjs/operators";
5	import { Subject } from "rxjs";
6	import { SafeHtml } from "@angular/platform-browser";
7
8	/**
9	* Icon provides a way to include material icons to markup
10	*
11	* @igxModule IgxIconModule
12	*
13	* @igxTheme igx-icon-theme
14	*
15	* @igxKeywords icon, picture
16	*
17	* @igxGroup Display
18	*
19	* @remarks
20	*
21	* The Ignite UI Icon makes it easy for developers to include material design icons directly in their markup. The icons
22	* support different icon families and can be marked as active or disabled using the `active` property. This will change the appearance
23	* of the icon.
24	*
25	* @example
26	* ```html
27	* <igx-icon family="filter-icons" active="true">home</igx-icon>
28	* ```
29	*/
30	@Component({
31	selector: "igx-icon",
32	changeDetection: ChangeDetectionStrategy.Eager,
33	templateUrl: "icon.component.html",
34	})
35	export class IgxIconComponent implements OnInit, OnChanges, OnDestroy {	3✔
36	public el = inject(ElementRef);	67,358✔
37	private iconService = inject(IgxIconService);	67,358✔
38	private ref = inject(ChangeDetectorRef);	67,358✔
39
40	private _iconRef: IconReference;
41	private _destroy$ = new Subject<void>();	67,358✔
42	private _userClasses = new Set<string>();	67,358✔
43	private _iconClasses = new Set<string>();	67,358✔
44
45	@HostBinding("class")
46	protected get elementClasses() {
47	const icon = Array.from(this._iconClasses).join(" ");	506,919✔
48	const user = Array.from(this._userClasses).join(" ");	506,919✔
49
50	return `igx-icon ${icon} ${user}`.trim();	506,919✔
51	}
52
53	private addIconClass(className: string) {
54	this._iconClasses.add(className);	134,849✔
55	}
56
57	private clearIconClasses() {
58	this._iconClasses.clear();	134,843✔
59	}
60
61	/**
62	* An accessor that returns inactive property.
63	*
64	* @example
65	* ```typescript
66	* @ViewChild("MyIcon")
67	* public icon: IgxIconComponent;
68	* ngAfterViewInit() {
69	* let iconActive = this.icon.getInactive;
70	* }
71	* ```
72	*/
73	@HostBinding("class.igx-icon--inactive")
74	public get getInactive(): boolean {
75	return !this.active;	506,919✔
76	}
77
78	/**
79	* The `aria-hidden` attribute of the icon.
80	* By default is set to 'true'.
81	*/
82	@HostBinding("attr.aria-hidden")
83	@Input()
84	public ariaHidden = true;	67,358✔
85
86	/**
87	* An @Input property that sets the value of the `family`. By default it's "material".
88	*
89	* @example
90	* ```html
91	* <igx-icon family="material">settings</igx-icon>
92	* ```
93	*/
94	@Input()
95	public family: string;
96
97	/**
98	* Set the `name` of the icon.
99	*
100	* @example
101	* ```html
102	* <igx-icon name="contains" family="filter-icons"></igx-icon>
103	* ```
104	*/
105	@Input()
106	public name: string;
107
108	/**
109	* An @Input property that allows you to disable the `active` property. By default it's applied.
110	*
111	* @example
112	* ```html
113	* <igx-icon [active]="false">settings</igx-icon>
114	* ```
115	*/
116	@Input({ transform: booleanAttribute })
117	public active = true;	67,358✔
118
119	constructor() {
120	this.family = this.iconService.defaultFamily.name;	67,358✔
121
122	this.iconService.iconLoaded	67,358✔
123	.pipe(
124	filter((e) => e.name === this.name && e.family === this.family),	74,905✔
125	takeUntil(this._destroy$),
126	)
127	.subscribe(() => {
128	this.setIcon();	3✔
129	this.ref.detectChanges()	3✔
130	});
131	}
132
133	/**
134	* @hidden
135	* @internal
136	*/
137	public ngOnInit() {
138	this.setIcon();	67,358✔
139	}
140
141	/**
142	* @hidden
143	* @internal
144	*/
145	public ngOnChanges() {
146	this.setIcon();	67,482✔
147	}
148
149	/**
150	* @hidden
151	* @internal
152	*/
153	public ngOnDestroy() {
154	this._destroy$.next();	67,200✔
155	this._destroy$.complete();	67,200✔
156	}
157
158	protected get iconRef() {
159	return this._iconRef;	1,655,537✔
160	}
161
162	protected set iconRef(ref: IconReference) {
163	this._iconRef = ref;	134,843✔
164	}
165
166	/**
167	* An accessor that returns the value of the family property.
168	*
169	* @example
170	* ```typescript
171	* @ViewChild("MyIcon")
172	* public icon: IgxIconComponent;
173	* ngAfterViewInit() {
174	* let iconFamily = this.icon.getFamily;
175	* }
176	* ```
177	*/
178	public get getFamily(): string {
179	return this.iconRef.family;	3✔
180	}
181
182	/**
183	* An accessor that returns the value of the active property.
184	*
185	* @example
186	* ```typescript
187	* @ViewChild("MyIcon")
188	* public icon: IgxIconComponent;
189	* ngAfterViewInit() {
190	* let iconActive = this.icon.getActive;
191	* }
192	* ```
193	*/
194	public get getActive(): boolean {
195	return this.active;	5✔
196	}
197
198	/**
199	* An accessor that returns the value of the iconName property.
200	*
201	* @example
202	* ```typescript
203	* @ViewChild("MyIcon")
204	* public icon: IgxIconComponent;
205	* ngAfterViewInit() {
206	* let name = this.icon.getName;
207	* }
208	* ```
209	*/
210	public get getName(): string {
211	return this.iconRef.name;	2✔
212	}
213
214	/**
215	* An accessor that returns the underlying SVG image as SafeHtml.
216	*
217	* @example
218	* ```typescript
219	* @ViewChild("MyIcon")
220	* public icon: IgxIconComponent;
221	* ngAfterViewInit() {
222	* let svg: SafeHtml = this.icon.getSvg;
223	* }
224	* ```
225	*/
226	public get getSvg(): SafeHtml {
227	const { name, family } = this.iconRef;	43,037✔
228
229	if (this.iconService.isSvgIconCached(name, family)) {	43,037✔
230	return this.iconService.getSvgIcon(name, family);	43,037✔
231	}
232
UNCOV 233	return null;	×
234	}
235
236	/**
237	* @hidden
238	* @internal
239	*/
240	private setIcon() {
241	this.iconRef = this.iconService.getIconRef(this.name, this.family);	134,843✔
242	this.clearIconClasses();	134,843✔
243
244	const { name, type, className } = this.iconRef;	134,843✔
245
246	if (name && type === "font") {	134,843✔
247	this.addIconClass(name);	6✔
248	}
249
250	this.addIconClass(className);	134,843✔
251	}
252	}

IgniteUI / igniteui-angular / 28358286454

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