30820539303

Committed 03 Aug 2026 01:59PM UTC coverage: 90.157% (-0.03%) from 90.19%

Build # 30820539303

Build Type

Pull #15125

github

Committed by

web-flow

Commit Message

Merge cf62d17ef into 75c7853d3

Pull Request Pull Request #15125: refactor(*): bundle styles with components

Coverage Stats

14962 of 17433 branches covered (85.83%)

Branch coverage included in aggregate %.

30113 of 32563 relevant lines covered (92.48%)

37531.2 hits per line

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

88.89

/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-step__title')
    public defaultClass = true;

    @HostBinding('class.igx-step-header__title')
    public headerElementClass = 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-step__subtitle')
    public elementClass = true;

    @HostBinding('class.igx-step-header__subtitle')
    public headerElementClass = 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-step__title')
110	public defaultClass = true;	124✔
111
112	@HostBinding('class.igx-step-header__title')
113	public headerElementClass = true;	124✔
114	}
115
116	/**
117	* Allows a custom element to be added as a step subtitle.
118	*
119	* @igxModule IgxStepperModule
120	* @igxTheme igx-stepper-theme
121	* @igxKeywords stepper
122	* @igxGroup Layouts
123	*
124	* @example
125	* <igx-stepper>
126	* <igx-step>
127	* <p igxStepSubtitle>Home Subtitle</p>
128	* </igx-step>
129	* </igx-stepper>
130	*/
131	@Directive({
132	selector: '[igxStepSubtitle]',
133	standalone: true
134	})
135	export class IgxStepSubtitleDirective {	3✔
136	@HostBinding('class.igx-step__subtitle')
137	public elementClass = true;	120✔
138
139	@HostBinding('class.igx-step-header__subtitle')
140	public headerElementClass = true;	120✔
141	}
142
143	/**
144	* Allows a custom element to be added as a step content.
145	*
146	* @igxModule IgxStepperModule
147	* @igxTheme igx-stepper-theme
148	* @igxKeywords stepper
149	* @igxGroup Layouts
150	*
151	* @example
152	* <igx-stepper>
153	* <igx-step>
154	* <div igxStepContent>...</div>
155	* </igx-step>
156	* </igx-stepper>
157	*/
158	@Directive({
159	selector: '[igxStepContent]',
160	standalone: true
161	})
162	export class IgxStepContentDirective {	3✔
163	private step = inject<IgxStep>(IGX_STEP_COMPONENT);	153✔
164	private stepperService = inject(IgxStepperService);	153✔
165	public elementRef = inject<ElementRef<HTMLElement>>(ElementRef);	153✔
166
167	private get target(): IgxStep {
168	return this.step;	4,271✔
169	}
170
171	@HostBinding('class.igx-stepper__step-content')
172	public defaultClass = true;	153✔
173
174	@HostBinding('attr.role')
175	public role = 'tabpanel';	153✔
176
177	@HostBinding('attr.aria-labelledby')
178	public get stepId(): string {
179	return this.target.id;	2,059✔
180	}
181
182	@HostBinding('attr.id')
183	@Input()
184	public id = this.target.id.replace('step', 'content');	153✔
185
186	@HostBinding('attr.tabindex')
187	@Input()
188	public get tabIndex(): number {
189	if (this._tabIndex !== null) {	2,059!
190	return this._tabIndex;	×
191	}
192
193	return this.stepperService.activeStep === this.target ? 0 : -1;	2,059✔
194	}
195
196	public set tabIndex(val: number) {
197	this._tabIndex = val;	×
198	}
199
200	private _tabIndex = null;	153✔
201	}

IgniteUI / igniteui-angular / 30820539303

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