13545721611

Committed 26 Feb 2025 02:05PM UTC coverage: 91.591% (-0.03%) from 91.622%

Build # 13545721611

Build Type

Pull #15209

github

Committed by

web-flow

Commit Message

Merge 25ba2c0ab into a038a03b1

Pull Request Pull Request #15209: fix(pivot-grid): added createRow method for grid based events

Run Details

13329 of 15614 branches covered (85.37%)

0 of 18 new or added lines in 2 files covered. (0.0%)

611 existing lines in 53 files now uncovered.

26883 of 29351 relevant lines covered (91.59%)

33690.24 hits per line

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

97.37

/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";

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

IgniteUI / igniteui-angular / 13545721611

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