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

9.3

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

import { NgTemplateOutlet } from '@angular/common';
import {
    Component,
    ElementRef,
    HostBinding,
    Input,
    OnInit,
    TemplateRef,
    ViewChild
} from '@angular/core';

import { mkenum, normalizeURI } from '../core/utils';
import { IgxIconComponent } from '../icon/icon.component';

let NEXT_ID = 0;
export const IgxAvatarSize = /*@__PURE__*/mkenum({
    SMALL: 'small',
    MEDIUM: 'medium',
    LARGE: 'large'
});
export type IgxAvatarSize = (typeof IgxAvatarSize)[keyof typeof IgxAvatarSize];

export const IgxAvatarType = /*@__PURE__*/mkenum({
    INITIALS: 'initials',
    IMAGE: 'image',
    ICON: 'icon',
    CUSTOM: 'custom'
});
export type IgxAvatarType = (typeof IgxAvatarType)[keyof typeof IgxAvatarType];

/**
 * Avatar provides a way to display an image, icon or initials to the user.
 *
 * @igxModule IgxAvatarModule
 *
 * @igxTheme igx-avatar-theme, igx-icon-theme
 *
 * @igxKeywords avatar, profile, picture, initials
 *
 * @igxGroup Layouts
 *
 * @remarks
 *
 * The Ignite UI Avatar provides an easy way to add an avatar icon to your application.  This icon can be an
 * image, someone's initials or a material icon from the Google Material icon set.
 *
 * @example
 * ```html
 * <igx-avatar initials="MS" shape="rounded" size="large">
 * </igx-avatar>
 * ```
 */
@Component({
    selector: 'igx-avatar',
    templateUrl: 'avatar.component.html',
    imports: [IgxIconComponent, NgTemplateOutlet]
})
export class IgxAvatarComponent implements OnInit {
    /**
     * Returns the `aria-label` attribute of the avatar.
     *
     * @example
     * ```typescript
     * let ariaLabel = this.avatar.ariaLabel;
     * ```
     *
     */
    @HostBinding('attr.aria-label')
    public ariaLabel = 'avatar';

    /**
     * Returns the `role` attribute of the avatar.
     *
     * @example
     * ```typescript
     * let avatarRole = this.avatar.role;
     * ```
     */
    @HostBinding('attr.role')
    public role = 'img';

    /**
     * Host `class.igx-avatar` binding.
     *
     * @hidden
     * @internal
     */
    @HostBinding('class.igx-avatar')
    public cssClass = 'igx-avatar';

    /**
     * Returns the type of the avatar.
     * The avatar can be:
     * - `"initials type avatar"`
     * - `"icon type avatar"`
     * - `"image type avatar"`.
     * - `"custom type avatar"`.
     *
     * @example
     * ```typescript
     * let avatarDescription = this.avatar.roleDescription;
     * ```
     */
    @HostBinding('attr.aria-roledescription')
    public roleDescription: string;

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

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

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

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

    /**
     * Sets the color of the avatar's initials or icon.
     *
     * @example
     * ```html
     * <igx-avatar color="blue"></igx-avatar>
     * ```
     * @deprecated in version 17.2.0.
     */

    @HostBinding('style.color')
    @Input()
    public color: string;

    /**
     * Sets the background color of the avatar.
     *
     * @example
     * ```html
     * <igx-avatar bgColor="yellow"></igx-avatar>
     * ```
     * @igxFriendlyName Background color
     * @deprecated in version 17.2.0.
     */

    @HostBinding('style.background')
    @Input()
    public bgColor: string;

    /**
     * Sets initials to the avatar.
     *
     * @example
     * ```html
     * <igx-avatar initials="MN"></igx-avatar>
     * ```
     */
    @Input()
    public initials: string;

    /**
     * Sets an icon to the avatar. All icons from the material icon set are supported.
     *
     * @example
     * ```html
     * <igx-avatar icon="phone"></igx-avatar>
     * ```
     */
    @Input()
    public icon: string;

    /**
     * Sets the image source of the avatar.
     *
     * @example
     * ```html
     * <igx-avatar src="images/picture.jpg"></igx-avatar>
     * ```
     * @igxFriendlyName Image URL
     */
    @Input()
    public set src(value: string) {
        this._src = normalizeURI(value);
    }

    public get src() {
        return this._src;
    }

    /** @hidden @internal */
    @ViewChild('defaultTemplate', { read: TemplateRef, static: true })
    protected defaultTemplate: TemplateRef<any>;

    /** @hidden @internal */
    @ViewChild('imageTemplate', { read: TemplateRef, static: true })
    protected imageTemplate: TemplateRef<any>;

    /** @hidden @internal */
    @ViewChild('initialsTemplate', { read: TemplateRef, static: true })
    protected initialsTemplate: TemplateRef<any>;

    /** @hidden @internal */
    @ViewChild('iconTemplate', { read: TemplateRef, static: true })
    protected iconTemplate: TemplateRef<any>;

    /**
     * @hidden
     * @internal
     */
    private _size: string | IgxAvatarSize;
    private _src: string;

    /**
     * Returns the size of the avatar.
     *
     * @example
     * ```typescript
     * let avatarSize = this.avatar.size;
     * ```
     */
    @Input()
    public get size(): string | IgxAvatarSize {
        return this._size || IgxAvatarSize.SMALL;
    }

    /**
     * Sets the size  of the avatar.
     * By default, the size is `"small"`. It can be set to `"medium"` or `"large"`.
     *
     * @example
     * ```html
     * <igx-avatar size="large"></igx-avatar>
     * ```
     */
    public set size(value: string | IgxAvatarSize) {
        switch (value) {
            case 'small':
            case 'medium':
            case 'large':
                this._size = value;
                break;
            default:
                this._size = 'small';
        }
    }

    /**
     * Returns the type of the avatar.
     *
     * @example
     * ```typescript
     * let avatarType = this.avatar.type;
     * ```
     */
    public get type(): IgxAvatarType {
        if (this.src) {
            return IgxAvatarType.IMAGE;
        }

        if (this.icon) {
            return IgxAvatarType.ICON;
        }

        if (this.initials) {
            return IgxAvatarType.INITIALS;
        }

        return IgxAvatarType.CUSTOM;
    }

    /** @hidden @internal */
    @HostBinding('class.igx-avatar--image')
    public get _isImageType(): boolean {
        return this.type === IgxAvatarType.IMAGE;
    }
    /** @hidden @internal */
    @HostBinding('class.igx-avatar--icon')
    public get _isIconType(): boolean {
        return this.type === IgxAvatarType.ICON;
    }
    /** @hidden @internal */
    @HostBinding('class.igx-avatar--initials')
    public get _isInitialsType(): boolean {
        return this.type === IgxAvatarType.INITIALS;
    }

    @HostBinding('style.--component-size')
    protected get componentSize() {
        if (this._size) {
            return `var(--ig-size-${this._size})`;
        }
    }

    /**
     * Returns the template of the avatar.
     *
     * @hidden
     * @internal
     */
    public get template(): TemplateRef<any> {
        switch (this.type) {
            case IgxAvatarType.IMAGE:
                return this.imageTemplate;
            case IgxAvatarType.INITIALS:
                return this.initialsTemplate;
            case IgxAvatarType.ICON:
                return this.iconTemplate;
            default:
                return this.defaultTemplate;
        }
    }

    constructor(public elementRef: ElementRef) { }

    /**
     * Returns the css url of the image.
     *
     * @hidden
     * @internal
     */
    public getSrcUrl() {
        return `url("${this.src}")`;
    }

    /** @hidden @internal */
    public ngOnInit() {
        this.roleDescription = this.getRole();
    }

    /** @hidden @internal */
    private getRole(): string {
        switch (this.type) {
            case IgxAvatarType.IMAGE:
                return 'image avatar';
            case IgxAvatarType.ICON:
                return 'icon avatar';
            case IgxAvatarType.INITIALS:
                return 'initials avatar';
            default:
                return 'custom avatar';
        }
    }
}


1	import { NgTemplateOutlet } from '@angular/common';
2	import {
3	Component,
4	ElementRef,
5	HostBinding,
6	Input,
7	OnInit,
8	TemplateRef,
9	ViewChild
10	} from '@angular/core';
11
12	import { mkenum, normalizeURI } from '../core/utils';
13	import { IgxIconComponent } from '../icon/icon.component';
14
15	let NEXT_ID = 0;	2✔
16	export const IgxAvatarSize = /@__PURE__/mkenum({	2✔
17	SMALL: 'small',
18	MEDIUM: 'medium',
19	LARGE: 'large'
20	});
21	export type IgxAvatarSize = (typeof IgxAvatarSize)[keyof typeof IgxAvatarSize];
22
23	export const IgxAvatarType = /@__PURE__/mkenum({	2✔
24	INITIALS: 'initials',
25	IMAGE: 'image',
26	ICON: 'icon',
27	CUSTOM: 'custom'
28	});
29	export type IgxAvatarType = (typeof IgxAvatarType)[keyof typeof IgxAvatarType];
30
31	/**
32	* Avatar provides a way to display an image, icon or initials to the user.
33	*
34	* @igxModule IgxAvatarModule
35	*
36	* @igxTheme igx-avatar-theme, igx-icon-theme
37	*
38	* @igxKeywords avatar, profile, picture, initials
39	*
40	* @igxGroup Layouts
41	*
42	* @remarks
43	*
44	* The Ignite UI Avatar provides an easy way to add an avatar icon to your application. This icon can be an
45	* image, someone's initials or a material icon from the Google Material icon set.
46	*
47	* @example
48	* ```html
49	* <igx-avatar initials="MS" shape="rounded" size="large">
50	* </igx-avatar>
51	* ```
52	*/
53	@Component({
54	selector: 'igx-avatar',
55	templateUrl: 'avatar.component.html',
56	imports: [IgxIconComponent, NgTemplateOutlet]
57	})
58	export class IgxAvatarComponent implements OnInit {	2✔
59	/**
60	* Returns the `aria-label` attribute of the avatar.
61	*
62	* @example
63	* ```typescript
64	* let ariaLabel = this.avatar.ariaLabel;
65	* ```
66	*
67	*/
68	@HostBinding('attr.aria-label')
UNCOV 69	public ariaLabel = 'avatar';	×
70
71	/**
72	* Returns the `role` attribute of the avatar.
73	*
74	* @example
75	* ```typescript
76	* let avatarRole = this.avatar.role;
77	* ```
78	*/
79	@HostBinding('attr.role')
UNCOV 80	public role = 'img';	×
81
82	/**
83	* Host `class.igx-avatar` binding.
84	*
85	* @hidden
86	* @internal
87	*/
88	@HostBinding('class.igx-avatar')
UNCOV 89	public cssClass = 'igx-avatar';	×
90
91	/**
92	* Returns the type of the avatar.
93	* The avatar can be:
94	* - `"initials type avatar"`
95	* - `"icon type avatar"`
96	* - `"image type avatar"`.
97	* - `"custom type avatar"`.
98	*
99	* @example
100	* ```typescript
101	* let avatarDescription = this.avatar.roleDescription;
102	* ```
103	*/
104	@HostBinding('attr.aria-roledescription')
105	public roleDescription: string;
106
107	/**
108	* Sets the `id` of the avatar. If not set, the first avatar component will have `id` = `"igx-avatar-0"`.
109	*
110	* @example
111	* ```html
112	* <igx-avatar id="my-first-avatar"></igx-avatar>
113	* ```
114	*/
115	@HostBinding('attr.id')
116	@Input()
UNCOV 117	public id = `igx-avatar-${NEXT_ID++}`;	×
118
119	/**
120	* Sets square, rounded or circular shape to the avatar.
121	* By default the shape of the avatar is square.
122	*
123	* @example
124	* ```html
125	* <igx-avatar shape="rounded"></igx-avatar>
126	* ```
127	*/
128	@Input()
UNCOV 129	public shape: 'square' \| 'rounded' \| 'circle' = 'square';	×
130
131	/** @hidden @internal */
132	@HostBinding('class.igx-avatar--rounded')
133	public get isRounded(): boolean {
UNCOV 134	return this.shape === 'rounded';	×
135	}
136
137	/** @hidden @internal */
138	@HostBinding('class.igx-avatar--circle')
139	public get isCircle(): boolean {
UNCOV 140	return this.shape === 'circle';	×
141	}
142
143	/**
144	* Sets the color of the avatar's initials or icon.
145	*
146	* @example
147	* ```html
148	* <igx-avatar color="blue"></igx-avatar>
149	* ```
150	* @deprecated in version 17.2.0.
151	*/
152
153	@HostBinding('style.color')
154	@Input()
155	public color: string;
156
157	/**
158	* Sets the background color of the avatar.
159	*
160	* @example
161	* ```html
162	* <igx-avatar bgColor="yellow"></igx-avatar>
163	* ```
164	* @igxFriendlyName Background color
165	* @deprecated in version 17.2.0.
166	*/
167
168	@HostBinding('style.background')
169	@Input()
170	public bgColor: string;
171
172	/**
173	* Sets initials to the avatar.
174	*
175	* @example
176	* ```html
177	* <igx-avatar initials="MN"></igx-avatar>
178	* ```
179	*/
180	@Input()
181	public initials: string;
182
183	/**
184	* Sets an icon to the avatar. All icons from the material icon set are supported.
185	*
186	* @example
187	* ```html
188	* <igx-avatar icon="phone"></igx-avatar>
189	* ```
190	*/
191	@Input()
192	public icon: string;
193
194	/**
195	* Sets the image source of the avatar.
196	*
197	* @example
198	* ```html
199	* <igx-avatar src="images/picture.jpg"></igx-avatar>
200	* ```
201	* @igxFriendlyName Image URL
202	*/
203	@Input()
204	public set src(value: string) {
UNCOV 205	this._src = normalizeURI(value);	×
206	}
207
208	public get src() {
UNCOV 209	return this._src;	×
210	}
211
212	/** @hidden @internal */
213	@ViewChild('defaultTemplate', { read: TemplateRef, static: true })
214	protected defaultTemplate: TemplateRef<any>;
215
216	/** @hidden @internal */
217	@ViewChild('imageTemplate', { read: TemplateRef, static: true })
218	protected imageTemplate: TemplateRef<any>;
219
220	/** @hidden @internal */
221	@ViewChild('initialsTemplate', { read: TemplateRef, static: true })
222	protected initialsTemplate: TemplateRef<any>;
223
224	/** @hidden @internal */
225	@ViewChild('iconTemplate', { read: TemplateRef, static: true })
226	protected iconTemplate: TemplateRef<any>;
227
228	/**
229	* @hidden
230	* @internal
231	*/
232	private _size: string \| IgxAvatarSize;
233	private _src: string;
234
235	/**
236	* Returns the size of the avatar.
237	*
238	* @example
239	* ```typescript
240	* let avatarSize = this.avatar.size;
241	* ```
242	*/
243	@Input()
244	public get size(): string \| IgxAvatarSize {
UNCOV 245	return this._size \|\| IgxAvatarSize.SMALL;	×
246	}
247
248	/**
249	* Sets the size of the avatar.
250	* By default, the size is `"small"`. It can be set to `"medium"` or `"large"`.
251	*
252	* @example
253	* ```html
254	* <igx-avatar size="large"></igx-avatar>
255	* ```
256	*/
257	public set size(value: string \| IgxAvatarSize) {
UNCOV 258	switch (value) {	×
259	case 'small':
260	case 'medium':
261	case 'large':
UNCOV 262	this._size = value;	×
UNCOV 263	break;	×
264	default:
UNCOV 265	this._size = 'small';	×
266	}
267	}
268
269	/**
270	* Returns the type of the avatar.
271	*
272	* @example
273	* ```typescript
274	* let avatarType = this.avatar.type;
275	* ```
276	*/
277	public get type(): IgxAvatarType {
UNCOV 278	if (this.src) {	×
UNCOV 279	return IgxAvatarType.IMAGE;	×
280	}
281
UNCOV 282	if (this.icon) {	×
UNCOV 283	return IgxAvatarType.ICON;	×
284	}
285
UNCOV 286	if (this.initials) {	×
UNCOV 287	return IgxAvatarType.INITIALS;	×
288	}
289
UNCOV 290	return IgxAvatarType.CUSTOM;	×
291	}
292
293	/** @hidden @internal */
294	@HostBinding('class.igx-avatar--image')
295	public get _isImageType(): boolean {
UNCOV 296	return this.type === IgxAvatarType.IMAGE;	×
297	}
298	/** @hidden @internal */
299	@HostBinding('class.igx-avatar--icon')
300	public get _isIconType(): boolean {
UNCOV 301	return this.type === IgxAvatarType.ICON;	×
302	}
303	/** @hidden @internal */
304	@HostBinding('class.igx-avatar--initials')
305	public get _isInitialsType(): boolean {
UNCOV 306	return this.type === IgxAvatarType.INITIALS;	×
307	}
308
309	@HostBinding('style.--component-size')
310	protected get componentSize() {
UNCOV 311	if (this._size) {	×
UNCOV 312	return `var(--ig-size-${this._size})`;	×
313	}
314	}
315
316	/**
317	* Returns the template of the avatar.
318	*
319	* @hidden
320	* @internal
321	*/
322	public get template(): TemplateRef<any> {
UNCOV 323	switch (this.type) {	×
324	case IgxAvatarType.IMAGE:
UNCOV 325	return this.imageTemplate;	×
326	case IgxAvatarType.INITIALS:
UNCOV 327	return this.initialsTemplate;	×
328	case IgxAvatarType.ICON:
UNCOV 329	return this.iconTemplate;	×
330	default:
UNCOV 331	return this.defaultTemplate;	×
332	}
333	}
334
UNCOV 335	constructor(public elementRef: ElementRef) { }	×
336
337	/**
338	* Returns the css url of the image.
339	*
340	* @hidden
341	* @internal
342	*/
343	public getSrcUrl() {
UNCOV 344	return `url("${this.src}")`;	×
345	}
346
347	/** @hidden @internal */
348	public ngOnInit() {
UNCOV 349	this.roleDescription = this.getRole();	×
350	}
351
352	/** @hidden @internal */
353	private getRole(): string {
UNCOV 354	switch (this.type) {	×
355	case IgxAvatarType.IMAGE:
UNCOV 356	return 'image avatar';	×
357	case IgxAvatarType.ICON:
UNCOV 358	return 'icon avatar';	×
359	case IgxAvatarType.INITIALS:
UNCOV 360	return 'initials avatar';	×
361	default:
UNCOV 362	return 'custom avatar';	×
363	}
364	}
365	}
366

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