13287444581

Committed 12 Feb 2025 02:18PM UTC coverage: 10.56% (-81.0%) from 91.606%

Build # 13287444581

Build Type

Pull #15359

github

Committed by

web-flow

Commit Message

Merge a24969adb into 32cfe83f6

Pull Request Pull Request #15359: fix(time-picker): exclude from SSR toggle events #15135

Run Details

933 of 15233 branches covered (6.12%)

3037 of 28759 relevant lines covered (10.56%)

352.42 hits per line

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

71.05

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

import {
    Component,
    ElementRef,
    HostBinding,
    Input,
    OnInit,
    OnDestroy,
    OnChanges,
    ChangeDetectorRef,
    booleanAttribute,
} 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";
import { NgIf, NgTemplateOutlet } from "@angular/common";

/**
 * 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",
    templateUrl: "icon.component.html",
})
export class IgxIconComponent implements OnInit, OnChanges, OnDestroy {
    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;
    }

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

IgniteUI / igniteui-angular / 13287444581

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