26023601418

Committed 18 May 2026 08:57AM UTC coverage: 4.854% (-85.3%) from 90.174%

Build # 26023601418

Build Type

Pull #17281

github

Committed by

web-flow

Commit Message

Merge e7ce7a18e into 5a85df190

Pull Request Pull Request #17281: feat: Added virtual scroll component and sample implementation

Coverage Stats

400 of 17347 branches covered (2.31%)

Branch coverage included in aggregate %.

63 of 222 new or added lines in 4 files covered. (28.38%)

27932 existing lines in 341 files now uncovered.

2022 of 32547 relevant lines covered (6.21%)

0.72 hits per line

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

28.0

/projects/igniteui-angular/stepper/src/stepper/stepper.directive.ts

import { Directive, ElementRef, HostBinding, Input, inject } from '@angular/core';
import { IgxStep, IGX_STEP_COMPONENT } from './stepper.common';
import { IgxStepperService } from './stepper.service';

/**
 * Allows a custom element to be added as an active step indicator.
 *
 * @igxModule IgxStepperModule
 * @igxTheme igx-stepper-theme
 * @igxKeywords stepper 
 * @igxGroup Layouts
 *
 * @example
 * <igx-stepper>
 *     <ng-template igxStepActiveIndicator>
 *          <igx-icon>edit</igx-icon>
 *       </ng-template>
 * </igx-stepper>
 */
@Directive({
    selector: '[igxStepActiveIndicator]',
    standalone: true
})
export class IgxStepActiveIndicatorDirective { }

/**
 * Allows a custom element to be added as a complete step indicator.
 *
 * @igxModule IgxStepperModule
 * @igxTheme igx-stepper-theme
 * @igxKeywords stepper 
 * @igxGroup Layouts
 *
 * @example
 * <igx-stepper>
 *     <ng-template igxStepCompletedIndicator>
 *          <igx-icon>check</igx-icon>
 *       </ng-template>
 * </igx-stepper>
 */
@Directive({
    selector: '[igxStepCompletedIndicator]',
    standalone: true
})
export class IgxStepCompletedIndicatorDirective { }

/**
 * Allows a custom element to be added as an invalid step indicator.
 *
 * @igxModule IgxStepperModule
 * @igxTheme igx-stepper-theme
 * @igxKeywords stepper 
 * @igxGroup Layouts
 *
 * @example
 * <igx-stepper>
 *     <ng-template igxStepInvalidIndicator>
 *          <igx-icon>error</igx-icon>
 *       </ng-template>
 * </igx-stepper>
 */
@Directive({
    selector: '[igxStepInvalidIndicator]',
    standalone: true
})
export class IgxStepInvalidIndicatorDirective { }

/**
 * Allows a custom element to be added as a step indicator.
 *
 * @igxModule IgxStepperModule
 * @igxTheme igx-stepper-theme
 * @igxKeywords stepper 
 * @igxGroup Layouts
 *
 * @example
 * <igx-stepper>
 *     <igx-step>
 *         <igx-icon igxStepIndicator>home</igx-icon>
 *     </igx-step>
 * </igx-stepper>
 */
@Directive({
    selector: '[igxStepIndicator]',
    standalone: true
})
export class IgxStepIndicatorDirective { }

/**
 * Allows a custom element to be added as a step title.
 *
 * @igxModule IgxStepperModule
 * @igxTheme igx-stepper-theme
 * @igxKeywords stepper 
 * @igxGroup Layouts
 *
 * @example
 * <igx-stepper>
 *     <igx-step>
 *         <p igxStepTitle>Home</p>
 *     </igx-step>
 * </igx-stepper>
 */
@Directive({
    selector: '[igxStepTitle]',
    standalone: true
})
export class IgxStepTitleDirective {
    @HostBinding('class.igx-stepper__step-title')
    public defaultClass = true;
}

/**
 * Allows a custom element to be added as a step subtitle.
 *
 * @igxModule IgxStepperModule
 * @igxTheme igx-stepper-theme
 * @igxKeywords stepper 
 * @igxGroup Layouts
 *
 * @example
 * <igx-stepper>
 *     <igx-step>
 *         <p igxStepSubtitle>Home Subtitle</p>
 *     </igx-step>
 * </igx-stepper>
 */
@Directive({
    selector: '[igxStepSubtitle]',
    standalone: true
})
export class IgxStepSubtitleDirective {
    @HostBinding('class.igx-stepper__step-subtitle')
    public defaultClass = true;
}

/**
 * Allows a custom element to be added as a step content.
 *
 * @igxModule IgxStepperModule
 * @igxTheme igx-stepper-theme
 * @igxKeywords stepper 
 * @igxGroup Layouts
 *
 * @example
 * <igx-stepper>
 *     <igx-step>
 *         <div igxStepContent>...</div>
 *     </igx-step>
 * </igx-stepper>
 */
@Directive({
    selector: '[igxStepContent]',
    standalone: true
})
export class IgxStepContentDirective {
    private step = inject<IgxStep>(IGX_STEP_COMPONENT);
    private stepperService = inject(IgxStepperService);
    public elementRef = inject<ElementRef<HTMLElement>>(ElementRef);

    private get target(): IgxStep {
        return this.step;
    }

    @HostBinding('class.igx-stepper__step-content')
    public defaultClass = true;

    @HostBinding('attr.role')
    public role = 'tabpanel';

    @HostBinding('attr.aria-labelledby')
    public get stepId(): string {
        return this.target.id;
    }

    @HostBinding('attr.id')
    @Input()
    public id = this.target.id.replace('step', 'content');

    @HostBinding('attr.tabindex')
    @Input()
    public get tabIndex(): number {
        if (this._tabIndex !== null) {
            return this._tabIndex;
        }

        return this.stepperService.activeStep === this.target ? 0 : -1;
    }

    public set tabIndex(val: number) {
        this._tabIndex = val;
    }

    private _tabIndex = null;
}

1	import { Directive, ElementRef, HostBinding, Input, inject } from '@angular/core';
2	import { IgxStep, IGX_STEP_COMPONENT } from './stepper.common';
3	import { IgxStepperService } from './stepper.service';
4
5	/**
6	* Allows a custom element to be added as an active step indicator.
7	*
8	* @igxModule IgxStepperModule
9	* @igxTheme igx-stepper-theme
10	* @igxKeywords stepper
11	* @igxGroup Layouts
12	*
13	* @example
14	* <igx-stepper>
15	* <ng-template igxStepActiveIndicator>
16	* <igx-icon>edit</igx-icon>
17	* </ng-template>
18	* </igx-stepper>
19	*/
20	@Directive({
21	selector: '[igxStepActiveIndicator]',
22	standalone: true
23	})
24	export class IgxStepActiveIndicatorDirective { }	3✔
25
26	/**
27	* Allows a custom element to be added as a complete step indicator.
28	*
29	* @igxModule IgxStepperModule
30	* @igxTheme igx-stepper-theme
31	* @igxKeywords stepper
32	* @igxGroup Layouts
33	*
34	* @example
35	* <igx-stepper>
36	* <ng-template igxStepCompletedIndicator>
37	* <igx-icon>check</igx-icon>
38	* </ng-template>
39	* </igx-stepper>
40	*/
41	@Directive({
42	selector: '[igxStepCompletedIndicator]',
43	standalone: true
44	})
45	export class IgxStepCompletedIndicatorDirective { }	3✔
46
47	/**
48	* Allows a custom element to be added as an invalid step indicator.
49	*
50	* @igxModule IgxStepperModule
51	* @igxTheme igx-stepper-theme
52	* @igxKeywords stepper
53	* @igxGroup Layouts
54	*
55	* @example
56	* <igx-stepper>
57	* <ng-template igxStepInvalidIndicator>
58	* <igx-icon>error</igx-icon>
59	* </ng-template>
60	* </igx-stepper>
61	*/
62	@Directive({
63	selector: '[igxStepInvalidIndicator]',
64	standalone: true
65	})
66	export class IgxStepInvalidIndicatorDirective { }	3✔
67
68	/**
69	* Allows a custom element to be added as a step indicator.
70	*
71	* @igxModule IgxStepperModule
72	* @igxTheme igx-stepper-theme
73	* @igxKeywords stepper
74	* @igxGroup Layouts
75	*
76	* @example
77	* <igx-stepper>
78	* <igx-step>
79	* <igx-icon igxStepIndicator>home</igx-icon>
80	* </igx-step>
81	* </igx-stepper>
82	*/
83	@Directive({
84	selector: '[igxStepIndicator]',
85	standalone: true
86	})
87	export class IgxStepIndicatorDirective { }	3✔
88
89	/**
90	* Allows a custom element to be added as a step title.
91	*
92	* @igxModule IgxStepperModule
93	* @igxTheme igx-stepper-theme
94	* @igxKeywords stepper
95	* @igxGroup Layouts
96	*
97	* @example
98	* <igx-stepper>
99	* <igx-step>
100	* <p igxStepTitle>Home</p>
101	* </igx-step>
102	* </igx-stepper>
103	*/
104	@Directive({
105	selector: '[igxStepTitle]',
106	standalone: true
107	})
108	export class IgxStepTitleDirective {	3✔
109	@HostBinding('class.igx-stepper__step-title')
UNCOV 110	public defaultClass = true;	×
111	}
112
113	/**
114	* Allows a custom element to be added as a step subtitle.
115	*
116	* @igxModule IgxStepperModule
117	* @igxTheme igx-stepper-theme
118	* @igxKeywords stepper
119	* @igxGroup Layouts
120	*
121	* @example
122	* <igx-stepper>
123	* <igx-step>
124	* <p igxStepSubtitle>Home Subtitle</p>
125	* </igx-step>
126	* </igx-stepper>
127	*/
128	@Directive({
129	selector: '[igxStepSubtitle]',
130	standalone: true
131	})
132	export class IgxStepSubtitleDirective {	3✔
133	@HostBinding('class.igx-stepper__step-subtitle')
UNCOV 134	public defaultClass = true;	×
135	}
136
137	/**
138	* Allows a custom element to be added as a step content.
139	*
140	* @igxModule IgxStepperModule
141	* @igxTheme igx-stepper-theme
142	* @igxKeywords stepper
143	* @igxGroup Layouts
144	*
145	* @example
146	* <igx-stepper>
147	* <igx-step>
148	* <div igxStepContent>...</div>
149	* </igx-step>
150	* </igx-stepper>
151	*/
152	@Directive({
153	selector: '[igxStepContent]',
154	standalone: true
155	})
156	export class IgxStepContentDirective {	3✔
UNCOV 157	private step = inject<IgxStep>(IGX_STEP_COMPONENT);	×
UNCOV 158	private stepperService = inject(IgxStepperService);	×
UNCOV 159	public elementRef = inject<ElementRef<HTMLElement>>(ElementRef);	×
160
161	private get target(): IgxStep {
UNCOV 162	return this.step;	×
163	}
164
165	@HostBinding('class.igx-stepper__step-content')
UNCOV 166	public defaultClass = true;	×
167
168	@HostBinding('attr.role')
UNCOV 169	public role = 'tabpanel';	×
170
171	@HostBinding('attr.aria-labelledby')
172	public get stepId(): string {
UNCOV 173	return this.target.id;	×
174	}
175
176	@HostBinding('attr.id')
177	@Input()
UNCOV 178	public id = this.target.id.replace('step', 'content');	×
179
180	@HostBinding('attr.tabindex')
181	@Input()
182	public get tabIndex(): number {
UNCOV 183	if (this._tabIndex !== null) {	×
184	return this._tabIndex;	×
185	}
186
UNCOV 187	return this.stepperService.activeStep === this.target ? 0 : -1;	×
188	}
189
190	public set tabIndex(val: number) {
191	this._tabIndex = val;	×
192	}
193
UNCOV 194	private _tabIndex = null;	×
195	}

IgniteUI / igniteui-angular / 26023601418

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