16053471080

Committed 03 Jul 2025 02:41PM UTC coverage: 4.981% (-86.4%) from 91.409%

Build # 16053471080

Build Type

Pull #16021

github

Committed by

web-flow

Commit Message

Merge 7c49966eb into 7e40671a1

Pull Request Pull Request #16021: fix(radio-group): dynamically added radio buttons do not initialize

Run Details

178 of 15753 branches covered (1.13%)

13 of 14 new or added lines in 2 files covered. (92.86%)

25644 existing lines in 324 files now uncovered.

1478 of 29670 relevant lines covered (4.98%)

0.51 hits per line

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

30.56

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

import {
    Component,
    Directive,
    HostBinding,
    Optional,
    Inject,
    Input,
    OnInit,
    OnChanges,
    SimpleChanges,
    booleanAttribute
} from '@angular/core';

let NEXT_ID = 0;

/**
 * IgxCardMedia is container for the card media section.
 * Use it to wrap images and videos.
 */
@Directive({
    selector: 'igx-card-media',
    standalone: true
})
export class IgxCardMediaDirective {
    /** @hidden @internal */
    @HostBinding('class.igx-card__media')
    public cssClass = 'igx-card__media';

    /**
     * Sets the `width` and `min-width` style property
     * of the media container. If not provided it will be set to `auto`.
     *
     * @example
     * ```html
     * <igx-card-media width="300px"></igx-card-media>
     * ```
     */
    @HostBinding('style.width')
    @HostBinding('style.min-width')
    @Input()
    public width = 'auto';

    /**
     * Sets the `height` style property of the media container.
     * If not provided it will be set to `auto`.
     *
     * @example
     * ```html
     * <igx-card-media height="50%"></igx-card-media>
     * ```
     */
    @HostBinding('style.height')
    @Input()
    public height = 'auto';

    /**
     * Sets the `role` attribute of the media container.
     */
    @HostBinding('attr.role')
    @Input()
    public role = 'img';
}

/**
 * IgxCardHeader is container for the card header
 */
@Component({
    selector: 'igx-card-header',
    templateUrl: 'card-header.component.html',
    standalone: true
})
export class IgxCardHeaderComponent {
    /** @hidden @internal */
    @HostBinding('class.igx-card-header')
    public cssClass = 'igx-card-header';

    /**
     * Sets the layout style of the header.
     * By default the header elements(thumbnail and title/subtitle) are aligned horizontally.
     *
     * @example
     * ```html
     * <igx-card-header [vertical]="true"></igx-card-header>
     * ```
     */
    @HostBinding('class.igx-card-header--vertical')
    @Input({ transform: booleanAttribute })
    public vertical = false;
}

/**
 * IgxCardThumbnail is container for the card thumbnail section.
 * Use it to wrap anything you want to be used as a thumbnail.
 */
@Directive({
    selector: '[igxCardThumbnail]',
    standalone: true
})
export class IgxCardThumbnailDirective { }

/**
 * igxCardHeaderTitle is used to denote the header title in a card.
 * Use it to tag text nodes.
 */
@Directive({
    selector: '[igxCardHeaderTitle]',
    standalone: true
})
export class IgxCardHeaderTitleDirective {
    /** @hidden @internal */
    @HostBinding('class.igx-card-header__title')
    public cssClass = 'igx-card__header__title';
}

/**
 * igxCardHeaderSubtitle is used to denote the header subtitle in a card.
 * Use it to tag text nodes.
 */
@Directive({
    selector: '[igxCardHeaderSubtitle]',
    standalone: true
})
export class IgxCardHeaderSubtitleDirective {
    /** @hidden @internal */
    @HostBinding('class.igx-card-header__subtitle')
    public cssClass = 'igx-card-header__subtitle';
}
/**
 * IgxCardContent is container for the card content.
 */
@Directive({

    selector: 'igx-card-content',
    standalone: true
})
export class IgxCardContentDirective {
    /** @hidden @internal */
    @HostBinding('class.igx-card-content')
    public cssClass = 'igx-card-content';
}

/**
 * IgxCardFooter is container for the card footer
 */
@Directive({

    selector: 'igx-card-footer',
    standalone: true
})
export class IgxCardFooterDirective {
    /**
     * Sets the value of the `role` attribute of the card footer.
     * By default the value is set to `footer`.
     *
     * @example
     * ```html
     * <igx-card-footer role="footer"></igx-card-footer>
     * ```
     */
    @HostBinding('attr.role')
    @Input()
    public role = 'footer';
}

/**
 * Card provides a way to display organized content in appealing way.
 *
 * @igxModule IgxCardModule
 *
 * @igxTheme igx-card-theme, igx-icon-theme, igx-button-theme
 *
 * @igxKeywords card, button, avatar, icon
 *
 * @igxGroup Layouts
 *
 * @remarks
 * The Ignite UI Card serves as a container that allows custom content to be organized in an appealing way. There are
 * five sections in a card that you can use to organize your content. These are header, media, content, actions, and footer.
 *
 * @example
 * ```html
 * <igx-card>
 *   <igx-card-header>
 *     <h3 igxCardHeaderTitle>{{title}}</h3>
 *     <h5 igxCardHeaderSubtitle>{{subtitle}}</h5>
 *   </igx-card-header>
 *   <igx-card-actions>
 *       <button type="button" igxButton igxRipple>Share</button>
 *       <button type="button" igxButton igxRipple>Play Album</button>
 *   </igx-card-actions>
 * </igx-card>
 * ```
 */

@Component({
    selector: 'igx-card',
    templateUrl: 'card.component.html',
    standalone: true
})
export class IgxCardComponent {
    /**
     * Sets/gets the `id` of the card.
     * If not set, `id` will have value `"igx-card-0"`;
     *
     * @example
     * ```html
     * <igx-card id="my-first-card"></igx-card>
     * ```
     * ```typescript
     * let cardId =  this.card.id;
     * ```
     */
    @HostBinding('attr.id')
    @Input()
    public id = `igx-card-${NEXT_ID++}`;

    /**
     * Sets the `igx-card` css class to the card component.
     *
     * @hidden
     * @internal
     */
    @HostBinding('class.igx-card')
    public cssClass = 'igx-card';

    /**
     * Sets the value of the `role` attribute of the card.
     * By default the value is set to `group`.
     *
     * @example
     * ```html
     * <igx-card role="group"></igx-card>
     * ```
     */
    @HostBinding('attr.role')
    @Input()
    public role = 'group';

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

    /**
     * Sets the value of the `horizontal` attribute of the card.
     * Setting this to `true` will make the different card sections align horizontally,
     * essentially flipping the card to the side.
     *
     * @example
     * ```html
     * <igx-card [horizontal]="true"></igx-card>
     * ```
     */
    @HostBinding('class.igx-card--horizontal')
    @Input({ transform: booleanAttribute })
    public horizontal = false;
}

export const IgxCardActionsLayout = {
    START: 'start',
    JUSTIFY: 'justify'
} as const;
export type IgxCardActionsLayout = (typeof IgxCardActionsLayout)[keyof typeof IgxCardActionsLayout];

/**
 * IgxCardActions is container for the card actions.
 */
@Component({

    selector: 'igx-card-actions',
    templateUrl: 'card-actions.component.html',
    standalone: true
})
export class IgxCardActionsComponent implements OnInit, OnChanges {
    /**
     * Sets the layout style of the actions.
     * You can justify the elements slotted in the igx-card-action container
     * so that they are positioned equally from one another taking up all the
     * space available along the card actions axis.
     *
     * @example
     * ```html
     * <igx-card-actions layout="justify"></igx-card-actions>
     * ```
     */
    @HostBinding('class.igx-card-actions')
    @Input()
    public layout: IgxCardActionsLayout | string = IgxCardActionsLayout.START;

    /**
     * Sets the vertical attribute of the actions.
     * When set to `true` the actions will be layed out vertically.
     */
    @HostBinding('class.igx-card-actions--vertical')
    @Input({ transform: booleanAttribute })
    public vertical = false;

    /**
     * A getter that returns `true` when the layout has been
     * set to `justify`.
     */
    @HostBinding('class.igx-card-actions--justify')
    public get isJustifyLayout() {
        return this.layout === IgxCardActionsLayout.JUSTIFY;
    }

    private isVerticalSet = false;

    constructor(@Optional() @Inject(IgxCardComponent) public card: IgxCardComponent) { }

    /**
     * @hidden
     * @internal
     */
    public ngOnChanges(changes: SimpleChanges) {
        for (const prop in changes) {
            if (prop === 'vertical') {
                this.isVerticalSet = true;
            }
        }
    }

    /**
     * @hidden
     * @internal
     */
    public ngOnInit() {
        if (!this.isVerticalSet && this.card.horizontal) {
            this.vertical = true;
        }
    }
}

1	import {
2	Component,
3	Directive,
4	HostBinding,
5	Optional,
6	Inject,
7	Input,
8	OnInit,
9	OnChanges,
10	SimpleChanges,
11	booleanAttribute
12	} from '@angular/core';
13
14	let NEXT_ID = 0;	3✔
15
16	/**
17	* IgxCardMedia is container for the card media section.
18	* Use it to wrap images and videos.
19	*/
20	@Directive({
21	selector: 'igx-card-media',
22	standalone: true
23	})
24	export class IgxCardMediaDirective {	3✔
25	/** @hidden @internal */
26	@HostBinding('class.igx-card__media')
UNCOV 27	public cssClass = 'igx-card__media';	×
28
29	/**
30	* Sets the `width` and `min-width` style property
31	* of the media container. If not provided it will be set to `auto`.
32	*
33	* @example
34	* ```html
35	* <igx-card-media width="300px"></igx-card-media>
36	* ```
37	*/
38	@HostBinding('style.width')
39	@HostBinding('style.min-width')
40	@Input()
UNCOV 41	public width = 'auto';	×
42
43	/**
44	* Sets the `height` style property of the media container.
45	* If not provided it will be set to `auto`.
46	*
47	* @example
48	* ```html
49	* <igx-card-media height="50%"></igx-card-media>
50	* ```
51	*/
52	@HostBinding('style.height')
53	@Input()
UNCOV 54	public height = 'auto';	×
55
56	/**
57	* Sets the `role` attribute of the media container.
58	*/
59	@HostBinding('attr.role')
60	@Input()
UNCOV 61	public role = 'img';	×
62	}
63
64	/**
65	* IgxCardHeader is container for the card header
66	*/
67	@Component({
68	selector: 'igx-card-header',
69	templateUrl: 'card-header.component.html',
70	standalone: true
71	})
72	export class IgxCardHeaderComponent {	3✔
73	/** @hidden @internal */
74	@HostBinding('class.igx-card-header')
UNCOV 75	public cssClass = 'igx-card-header';	×
76
77	/**
78	* Sets the layout style of the header.
79	* By default the header elements(thumbnail and title/subtitle) are aligned horizontally.
80	*
81	* @example
82	* ```html
83	* <igx-card-header [vertical]="true"></igx-card-header>
84	* ```
85	*/
86	@HostBinding('class.igx-card-header--vertical')
87	@Input({ transform: booleanAttribute })
UNCOV 88	public vertical = false;	×
89	}
90
91	/**
92	* IgxCardThumbnail is container for the card thumbnail section.
93	* Use it to wrap anything you want to be used as a thumbnail.
94	*/
95	@Directive({
96	selector: '[igxCardThumbnail]',
97	standalone: true
98	})
99	export class IgxCardThumbnailDirective { }	3✔
100
101	/**
102	* igxCardHeaderTitle is used to denote the header title in a card.
103	* Use it to tag text nodes.
104	*/
105	@Directive({
106	selector: '[igxCardHeaderTitle]',
107	standalone: true
108	})
109	export class IgxCardHeaderTitleDirective {	3✔
110	/** @hidden @internal */
111	@HostBinding('class.igx-card-header__title')
UNCOV 112	public cssClass = 'igx-card__header__title';	×
113	}
114
115	/**
116	* igxCardHeaderSubtitle is used to denote the header subtitle in a card.
117	* Use it to tag text nodes.
118	*/
119	@Directive({
120	selector: '[igxCardHeaderSubtitle]',
121	standalone: true
122	})
123	export class IgxCardHeaderSubtitleDirective {	3✔
124	/** @hidden @internal */
125	@HostBinding('class.igx-card-header__subtitle')
UNCOV 126	public cssClass = 'igx-card-header__subtitle';	×
127	}
128	/**
129	* IgxCardContent is container for the card content.
130	*/
131	@Directive({
132
133	selector: 'igx-card-content',
134	standalone: true
135	})
136	export class IgxCardContentDirective {	3✔
137	/** @hidden @internal */
138	@HostBinding('class.igx-card-content')
UNCOV 139	public cssClass = 'igx-card-content';	×
140	}
141
142	/**
143	* IgxCardFooter is container for the card footer
144	*/
145	@Directive({
146
147	selector: 'igx-card-footer',
148	standalone: true
149	})
150	export class IgxCardFooterDirective {	3✔
151	/**
152	* Sets the value of the `role` attribute of the card footer.
153	* By default the value is set to `footer`.
154	*
155	* @example
156	* ```html
157	* <igx-card-footer role="footer"></igx-card-footer>
158	* ```
159	*/
160	@HostBinding('attr.role')
161	@Input()
162	public role = 'footer';	×
163	}
164
165	/**
166	* Card provides a way to display organized content in appealing way.
167	*
168	* @igxModule IgxCardModule
169	*
170	* @igxTheme igx-card-theme, igx-icon-theme, igx-button-theme
171	*
172	* @igxKeywords card, button, avatar, icon
173	*
174	* @igxGroup Layouts
175	*
176	* @remarks
177	* The Ignite UI Card serves as a container that allows custom content to be organized in an appealing way. There are
178	* five sections in a card that you can use to organize your content. These are header, media, content, actions, and footer.
179	*
180	* @example
181	* ```html
182	* <igx-card>
183	* <igx-card-header>
184	* <h3 igxCardHeaderTitle>{{title}}</h3>
185	* <h5 igxCardHeaderSubtitle>{{subtitle}}</h5>
186	* </igx-card-header>
187	* <igx-card-actions>
188	* <button type="button" igxButton igxRipple>Share</button>
189	* <button type="button" igxButton igxRipple>Play Album</button>
190	* </igx-card-actions>
191	* </igx-card>
192	* ```
193	*/
194
195	@Component({
196	selector: 'igx-card',
197	templateUrl: 'card.component.html',
198	standalone: true
199	})
200	export class IgxCardComponent {	3✔
201	/**
202	* Sets/gets the `id` of the card.
203	* If not set, `id` will have value `"igx-card-0"`;
204	*
205	* @example
206	* ```html
207	* <igx-card id="my-first-card"></igx-card>
208	* ```
209	* ```typescript
210	* let cardId = this.card.id;
211	* ```
212	*/
213	@HostBinding('attr.id')
214	@Input()
UNCOV 215	public id = `igx-card-${NEXT_ID++}`;	×
216
217	/**
218	* Sets the `igx-card` css class to the card component.
219	*
220	* @hidden
221	* @internal
222	*/
223	@HostBinding('class.igx-card')
UNCOV 224	public cssClass = 'igx-card';	×
225
226	/**
227	* Sets the value of the `role` attribute of the card.
228	* By default the value is set to `group`.
229	*
230	* @example
231	* ```html
232	* <igx-card role="group"></igx-card>
233	* ```
234	*/
235	@HostBinding('attr.role')
236	@Input()
UNCOV 237	public role = 'group';	×
238
239	/**
240	* Sets/gets whether the card is elevated.
241	* Default value is `false`.
242	*
243	* @example
244	* ```html
245	* <igx-card elevated></igx-card>
246	* ```
247	* ```typescript
248	* let cardElevation = this.card.elevated;
249	* ```
250	*/
251	@Input({transform: booleanAttribute})
252	@HostBinding('class.igx-card--elevated')
UNCOV 253	public elevated = false;	×
254
255	/**
256	* Sets the value of the `horizontal` attribute of the card.
257	* Setting this to `true` will make the different card sections align horizontally,
258	* essentially flipping the card to the side.
259	*
260	* @example
261	* ```html
262	* <igx-card [horizontal]="true"></igx-card>
263	* ```
264	*/
265	@HostBinding('class.igx-card--horizontal')
266	@Input({ transform: booleanAttribute })
UNCOV 267	public horizontal = false;	×
268	}
269
270	export const IgxCardActionsLayout = {	3✔
271	START: 'start',
272	JUSTIFY: 'justify'
273	} as const;
274	export type IgxCardActionsLayout = (typeof IgxCardActionsLayout)[keyof typeof IgxCardActionsLayout];
275
276	/**
277	* IgxCardActions is container for the card actions.
278	*/
279	@Component({
280
281	selector: 'igx-card-actions',
282	templateUrl: 'card-actions.component.html',
283	standalone: true
284	})
285	export class IgxCardActionsComponent implements OnInit, OnChanges {	3✔
286	/**
287	* Sets the layout style of the actions.
288	* You can justify the elements slotted in the igx-card-action container
289	* so that they are positioned equally from one another taking up all the
290	* space available along the card actions axis.
291	*
292	* @example
293	* ```html
294	* <igx-card-actions layout="justify"></igx-card-actions>
295	* ```
296	*/
297	@HostBinding('class.igx-card-actions')
298	@Input()
UNCOV 299	public layout: IgxCardActionsLayout \| string = IgxCardActionsLayout.START;	×
300
301	/**
302	* Sets the vertical attribute of the actions.
303	* When set to `true` the actions will be layed out vertically.
304	*/
305	@HostBinding('class.igx-card-actions--vertical')
306	@Input({ transform: booleanAttribute })
UNCOV 307	public vertical = false;	×
308
309	/**
310	* A getter that returns `true` when the layout has been
311	* set to `justify`.
312	*/
313	@HostBinding('class.igx-card-actions--justify')
314	public get isJustifyLayout() {
UNCOV 315	return this.layout === IgxCardActionsLayout.JUSTIFY;	×
316	}
317
UNCOV 318	private isVerticalSet = false;	×
319
UNCOV 320	constructor(@Optional() @Inject(IgxCardComponent) public card: IgxCardComponent) { }	×
321
322	/**
323	* @hidden
324	* @internal
325	*/
326	public ngOnChanges(changes: SimpleChanges) {
327	for (const prop in changes) {	×
328	if (prop === 'vertical') {	×
329	this.isVerticalSet = true;	×
330	}
331	}
332	}
333
334	/**
335	* @hidden
336	* @internal
337	*/
338	public ngOnInit() {
UNCOV 339	if (!this.isVerticalSet && this.card.horizontal) {	×
UNCOV 340	this.vertical = true;	×
341	}
342	}
343	}

IgniteUI / igniteui-angular / 16053471080

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