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

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';

import { mkenum } from '../core/utils';

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

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