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

8.7

/projects/igniteui-angular/src/lib/directives/layout/layout.directive.ts

import { Directive, HostBinding, Input, booleanAttribute } from '@angular/core';

@Directive({
    selector: '[igxLayout]',
    standalone: true
})
export class IgxLayoutDirective {
    /**
     * Sets the default flow direction of the container's children.
     *
     * Defaults to `rows`.
     *
     * ```html
     *  <div
     *   igxLayout
     *   igxLayoutDir="row">
     *    <div igxFlex>1</div>
     *    <div igxFlex>2</div>
     *    <div igxFlex>3</div>
     *  </div>
     * ```
     */
    @Input('igxLayoutDir') public dir = 'row';

    /**
     * Defines the direction flex children are placed in the flex container.
     *
     * When set to `true`, the `rows` direction goes right to left and `columns` goes bottom to top.
     *
     * ```html
     * <div
     *   igxLayout
     *   igxLayoutReverse="true">
     *    <div igxFlex>1</div>
     *    <div igxFlex>2</div>
     *    <div igxFlex>3</div>
     * </div>
     * ```
     */
    @Input({ alias: 'igxLayoutReverse', transform: booleanAttribute }) public reverse = false;

    /**
     * By default the immediate children will all try to fit onto one line.
     *
     * The default value `nowrap` sets this behavior.
     *
     * Other accepted values are `wrap` and `wrap-reverse`.
     *
     * ```html
     * <div
     *   igxLayout
     *   igxLayoutDir="row"
     *   igxLayoutWrap="wrap">
     *    <div igxFlex igxFlexGrow="0">1</div>
     *    <div igxFlex igxFlexGrow="0">2</div>
     *    <div igxFlex igxFlexGrow="0">3</div>
     * </div>
     * ```
     */
    @Input('igxLayoutWrap') public wrap = 'nowrap';

    /**
     * Defines the alignment along the main axis.
     *
     * Defaults to `flex-start` which packs the children toward the start line.
     *
     * Other possible values are `flex-end`, `center`, `space-between`, `space-around`.
     *
     * ```html
     * <div
     *   igxLayout
     *   igxLayoutDir="column"
     *   igxLayoutJustify="space-between">
     *    <div>1</div>
     *    <div>2</div>
     *    <div>3</div>
     * </div>
     * ```
     */
    @Input('igxLayoutJustify') public justify = 'flex-start';

    /**
     * Defines the default behavior for how children are laid out along the corss axis of the current line.
     *
     * Defaults to `flex-start`.
     *
     * Other possible values are `flex-end`, `center`, `baseline`, and `stretch`.
     *
     * ```html
     * <div
     *   igxLayout
     *   igxLayoutDir="column"
     *   igxLayoutItemAlign="start">
     *    <div igxFlex igxFlexGrow="0">1</div>
     *    <div igxFlex igxFlexGrow="0">2</div>
     *    <div igxFlex igxFlexGrow="0">3</div>
     * </div>
     * ```
     */
    @Input('igxLayoutItemAlign') public itemAlign = 'stretch';

    /**
     * @hidden
     */
    @HostBinding('style.display') public display = 'flex';

    /**
     * @hidden
     */
    @HostBinding('style.flex-wrap')
    public get flexwrap() {
        return this.wrap;
    }

    /**
     * @hidden
     */
    @HostBinding('style.justify-content')
    public get justifycontent() {
        return this.justify;
    }

    /**
     * @hidden
     */
    @HostBinding('style.align-items')
    public get align() {
        return this.itemAlign;
    }

    /**
     * @hidden
     */
    @HostBinding('style.flex-direction')
    public get direction() {
        if (this.reverse) {
            return (this.dir === 'row') ? 'row-reverse' : 'column-reverse';
        }
        return (this.dir === 'row') ? 'row' : 'column';
    }
}

@Directive({
    selector: '[igxFlex]',
    standalone: true
})
export class IgxFlexDirective {

    /**
     * Applies the `grow` attribute to an element that uses the directive.
     *
     * Default value is `1`.
     *
     * ```html
     * <div>
     *    <div igxFlex igxFlexGrow="0">Content1</div>
     *    <div igxFlex igxFlexGrow="1">Content2</div>
     *    <div igxFlex igxFlexGrow="0">Content3</div>
     * </div>
     * ```
     */
    @Input('igxFlexGrow') public grow = 1;

    /**
     * Applies the `shrink` attribute to an element that uses the directive.
     *
     * Default value is `1`.
     *
     * ```html
     * <div>
     *    <div igxFlex igxFlexShrink="1">Content1</div>
     *    <div igxFlex igxFlexShrink="0">Content2</div>
     *    <div igxFlex igxFlexShrink="1">Content3</div>
     * </div>
     * ```
     */
    @Input('igxFlexShrink') public shrink = 1;

    /**
     * Applies the directive to an element.
     *
     * Possible values include `igxFlexGrow`, `igxFlexShrink`, `igxFlexOrder`, `igxFlexBasis`.
     *
     * ```html
     * <div igxFlex>Content</div>
     * ```
     */
    @Input('igxFlex') public flex = '';

    /**
     * Applies the `order` attribute to an element that uses the directive.
     *
     * Default value is `0`.
     *
     * ```html
     * <div>
     *    <div igxFlex igxFlexOrder="1">Content1</div>
     *    <div igxFlex igxFlexOrder="0">Content2</div>
     *    <div igxFlex igxFlexOrder="2">Content3</div>
     * </div>
     * ```
     */
    @Input('igxFlexOrder') public order = 0;

    /**
     * Applies the `flex-basis` attribute to an element that uses the directive.
     *
     * Default value is `auto`.
     *
     * Other possible values include `content`, `max-content`, `min-content`, `fit-content`.
     *
     * ```html
     * <div igxFlex igxFlexBasis="fit-content">Content</div>
     * ```
     */
    @Input('igxFlexBasis') public basis = 'auto';

    /**
     * @hidden
     */
    @HostBinding('style.flex')
    public get style() {
        if (this.flex) {
            return `${this.flex}`;
        }
        return `${this.grow} ${this.shrink} ${this.basis}`;
    }

    /**
     * @hidden
     */
    @HostBinding('style.order')
    public get itemorder() {
        return this.order || 0;
    }
}

1	import { Directive, HostBinding, Input, booleanAttribute } from '@angular/core';
2
3	@Directive({
4	selector: '[igxLayout]',
5	standalone: true
6	})
7	export class IgxLayoutDirective {	2✔
8	/**
9	* Sets the default flow direction of the container's children.
10	*
11	* Defaults to `rows`.
12	*
13	* ```html
14	* <div
15	* igxLayout
16	* igxLayoutDir="row">
17	* <div igxFlex>1</div>
18	* <div igxFlex>2</div>
19	* <div igxFlex>3</div>
20	* </div>
21	* ```
22	*/
UNCOV 23	@Input('igxLayoutDir') public dir = 'row';	×
24
25	/**
26	* Defines the direction flex children are placed in the flex container.
27	*
28	* When set to `true`, the `rows` direction goes right to left and `columns` goes bottom to top.
29	*
30	* ```html
31	* <div
32	* igxLayout
33	* igxLayoutReverse="true">
34	* <div igxFlex>1</div>
35	* <div igxFlex>2</div>
36	* <div igxFlex>3</div>
37	* </div>
38	* ```
39	*/
UNCOV 40	@Input({ alias: 'igxLayoutReverse', transform: booleanAttribute }) public reverse = false;	×
41
42	/**
43	* By default the immediate children will all try to fit onto one line.
44	*
45	* The default value `nowrap` sets this behavior.
46	*
47	* Other accepted values are `wrap` and `wrap-reverse`.
48	*
49	* ```html
50	* <div
51	* igxLayout
52	* igxLayoutDir="row"
53	* igxLayoutWrap="wrap">
54	* <div igxFlex igxFlexGrow="0">1</div>
55	* <div igxFlex igxFlexGrow="0">2</div>
56	* <div igxFlex igxFlexGrow="0">3</div>
57	* </div>
58	* ```
59	*/
UNCOV 60	@Input('igxLayoutWrap') public wrap = 'nowrap';	×
61
62	/**
63	* Defines the alignment along the main axis.
64	*
65	* Defaults to `flex-start` which packs the children toward the start line.
66	*
67	* Other possible values are `flex-end`, `center`, `space-between`, `space-around`.
68	*
69	* ```html
70	* <div
71	* igxLayout
72	* igxLayoutDir="column"
73	* igxLayoutJustify="space-between">
74	* <div>1</div>
75	* <div>2</div>
76	* <div>3</div>
77	* </div>
78	* ```
79	*/
UNCOV 80	@Input('igxLayoutJustify') public justify = 'flex-start';	×
81
82	/**
83	* Defines the default behavior for how children are laid out along the corss axis of the current line.
84	*
85	* Defaults to `flex-start`.
86	*
87	* Other possible values are `flex-end`, `center`, `baseline`, and `stretch`.
88	*
89	* ```html
90	* <div
91	* igxLayout
92	* igxLayoutDir="column"
93	* igxLayoutItemAlign="start">
94	* <div igxFlex igxFlexGrow="0">1</div>
95	* <div igxFlex igxFlexGrow="0">2</div>
96	* <div igxFlex igxFlexGrow="0">3</div>
97	* </div>
98	* ```
99	*/
UNCOV 100	@Input('igxLayoutItemAlign') public itemAlign = 'stretch';	×
101
102	/**
103	* @hidden
104	*/
UNCOV 105	@HostBinding('style.display') public display = 'flex';	×
106
107	/**
108	* @hidden
109	*/
110	@HostBinding('style.flex-wrap')
111	public get flexwrap() {
UNCOV 112	return this.wrap;	×
113	}
114
115	/**
116	* @hidden
117	*/
118	@HostBinding('style.justify-content')
119	public get justifycontent() {
UNCOV 120	return this.justify;	×
121	}
122
123	/**
124	* @hidden
125	*/
126	@HostBinding('style.align-items')
127	public get align() {
UNCOV 128	return this.itemAlign;	×
129	}
130
131	/**
132	* @hidden
133	*/
134	@HostBinding('style.flex-direction')
135	public get direction() {
UNCOV 136	if (this.reverse) {	×
UNCOV 137	return (this.dir === 'row') ? 'row-reverse' : 'column-reverse';	×
138	}
UNCOV 139	return (this.dir === 'row') ? 'row' : 'column';	×
140	}
141	}
142
143	@Directive({
144	selector: '[igxFlex]',
145	standalone: true
146	})
147	export class IgxFlexDirective {	2✔
148
149	/**
150	* Applies the `grow` attribute to an element that uses the directive.
151	*
152	* Default value is `1`.
153	*
154	* ```html
155	* <div>
156	* <div igxFlex igxFlexGrow="0">Content1</div>
157	* <div igxFlex igxFlexGrow="1">Content2</div>
158	* <div igxFlex igxFlexGrow="0">Content3</div>
159	* </div>
160	* ```
161	*/
UNCOV 162	@Input('igxFlexGrow') public grow = 1;	×
163
164	/**
165	* Applies the `shrink` attribute to an element that uses the directive.
166	*
167	* Default value is `1`.
168	*
169	* ```html
170	* <div>
171	* <div igxFlex igxFlexShrink="1">Content1</div>
172	* <div igxFlex igxFlexShrink="0">Content2</div>
173	* <div igxFlex igxFlexShrink="1">Content3</div>
174	* </div>
175	* ```
176	*/
UNCOV 177	@Input('igxFlexShrink') public shrink = 1;	×
178
179	/**
180	* Applies the directive to an element.
181	*
182	* Possible values include `igxFlexGrow`, `igxFlexShrink`, `igxFlexOrder`, `igxFlexBasis`.
183	*
184	* ```html
185	* <div igxFlex>Content</div>
186	* ```
187	*/
UNCOV 188	@Input('igxFlex') public flex = '';	×
189
190	/**
191	* Applies the `order` attribute to an element that uses the directive.
192	*
193	* Default value is `0`.
194	*
195	* ```html
196	* <div>
197	* <div igxFlex igxFlexOrder="1">Content1</div>
198	* <div igxFlex igxFlexOrder="0">Content2</div>
199	* <div igxFlex igxFlexOrder="2">Content3</div>
200	* </div>
201	* ```
202	*/
UNCOV 203	@Input('igxFlexOrder') public order = 0;	×
204
205	/**
206	* Applies the `flex-basis` attribute to an element that uses the directive.
207	*
208	* Default value is `auto`.
209	*
210	* Other possible values include `content`, `max-content`, `min-content`, `fit-content`.
211	*
212	* ```html
213	* <div igxFlex igxFlexBasis="fit-content">Content</div>
214	* ```
215	*/
UNCOV 216	@Input('igxFlexBasis') public basis = 'auto';	×
217
218	/**
219	* @hidden
220	*/
221	@HostBinding('style.flex')
222	public get style() {
UNCOV 223	if (this.flex) {	×
224	return `${this.flex}`;	×
225	}
UNCOV 226	return `${this.grow} ${this.shrink} ${this.basis}`;	×
227	}
228
229	/**
230	* @hidden
231	*/
232	@HostBinding('style.order')
233	public get itemorder() {
UNCOV 234	return this.order \|\| 0;	×
235	}
236	}

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