igniteui-angular 22.1.0-beta.2 → 22.1.0-beta.4

package/fesm2022/igniteui-angular-stepper.mjs

@@ -2,8 +2,9 @@ import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, Directive, HostBinding, inject, ElementRef, Input, ChangeDetectorRef, Renderer2, EventEmitter, booleanAttribute, HostListener, ContentChild, forwardRef, ViewChild, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, TemplateRef, ContentChildren, NgModule } from '@angular/core';
 import { takeUntil } from 'rxjs/operators';
 import { CarouselAnimationType, CarouselAnimationDirection, IgxCarouselComponentBase } from 'igniteui-angular/carousel';
+import * as i1 from 'igniteui-angular/directives';
+import { IgxNoTypographyDirective, IgxRippleDirective } from 'igniteui-angular/directives';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
-import { IgxRippleDirective } from 'igniteui-angular/directives';
 import { ToggleAnimationPlayer } from 'igniteui-angular/expansion-panel';
 import { PlatformUtil, isLeftToRight } from 'igniteui-angular/core';
 import { useAnimation } from '@angular/animations';
@@ -172,10 +173,10 @@ class IgxStepperService {
         }
         return this.stepper.steps.findIndex(s => s.index > this.activeStep.index && !s.optional && !s.disabled && !s.isValid);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepperService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepperService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepperService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepperService, decorators: [{
             type: Injectable
         }] });
 
@@ -195,10 +196,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * </igx-stepper>
  */
 class IgxStepActiveIndicatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepActiveIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: IgxStepActiveIndicatorDirective, isStandalone: true, selector: "[igxStepActiveIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepActiveIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxStepActiveIndicatorDirective, isStandalone: true, selector: "[igxStepActiveIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepActiveIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepActiveIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxStepActiveIndicator]',
@@ -221,10 +222,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * </igx-stepper>
  */
 class IgxStepCompletedIndicatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepCompletedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: IgxStepCompletedIndicatorDirective, isStandalone: true, selector: "[igxStepCompletedIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepCompletedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxStepCompletedIndicatorDirective, isStandalone: true, selector: "[igxStepCompletedIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepCompletedIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepCompletedIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxStepCompletedIndicator]',
@@ -247,10 +248,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * </igx-stepper>
  */
 class IgxStepInvalidIndicatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepInvalidIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: IgxStepInvalidIndicatorDirective, isStandalone: true, selector: "[igxStepInvalidIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepInvalidIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxStepInvalidIndicatorDirective, isStandalone: true, selector: "[igxStepInvalidIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepInvalidIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepInvalidIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxStepInvalidIndicator]',
@@ -273,10 +274,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * </igx-stepper>
  */
 class IgxStepIndicatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: IgxStepIndicatorDirective, isStandalone: true, selector: "[igxStepIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxStepIndicatorDirective, isStandalone: true, selector: "[igxStepIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxStepIndicator]',
@@ -303,14 +304,15 @@ class IgxStepTitleDirective {
         this.defaultClass = true;
         this.headerElementClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: IgxStepTitleDirective, isStandalone: true, selector: "[igxStepTitle]", host: { properties: { "class.igx-step__title": "this.defaultClass", "class.igx-step-header__title": "this.headerElementClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxStepTitleDirective, isStandalone: true, selector: "[igxStepTitle]", host: { properties: { "class.igx-step__title": "this.defaultClass", "class.igx-step-header__title": "this.headerElementClass" } }, hostDirectives: [{ directive: i1.IgxNoTypographyDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxStepTitle]',
-                    standalone: true
+                    standalone: true,
+                    hostDirectives: [IgxNoTypographyDirective]
                 }]
         }], propDecorators: { defaultClass: [{
                 type: HostBinding,
@@ -339,14 +341,15 @@ class IgxStepSubtitleDirective {
         this.elementClass = true;
         this.headerElementClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: IgxStepSubtitleDirective, isStandalone: true, selector: "[igxStepSubtitle]", host: { properties: { "class.igx-step__subtitle": "this.elementClass", "class.igx-step-header__subtitle": "this.headerElementClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxStepSubtitleDirective, isStandalone: true, selector: "[igxStepSubtitle]", host: { properties: { "class.igx-step__subtitle": "this.elementClass", "class.igx-step-header__subtitle": "this.headerElementClass" } }, hostDirectives: [{ directive: i1.IgxNoTypographyDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepSubtitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepSubtitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxStepSubtitle]',
-                    standalone: true
+                    standalone: true,
+                    hostDirectives: [IgxNoTypographyDirective]
                 }]
         }], propDecorators: { elementClass: [{
                 type: HostBinding,
@@ -395,10 +398,10 @@ class IgxStepContentDirective {
     set tabIndex(val) {
         this._tabIndex = val;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: IgxStepContentDirective, isStandalone: true, selector: "[igxStepContent]", inputs: { id: "id", tabIndex: "tabIndex" }, host: { properties: { "class.igx-stepper__step-content": "this.defaultClass", "attr.role": "this.role", "attr.aria-labelledby": "this.stepId", "attr.id": "this.id", "attr.tabindex": "this.tabIndex" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxStepContentDirective, isStandalone: true, selector: "[igxStepContent]", inputs: { id: "id", tabIndex: "tabIndex" }, host: { properties: { "class.igx-stepper__step-content": "this.defaultClass", "attr.role": "this.role", "attr.aria-labelledby": "this.stepId", "attr.id": "this.id", "attr.tabindex": "this.tabIndex" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxStepContent]',
@@ -870,16 +873,16 @@ class IgxStepComponent extends ToggleAnimationPlayer {
             this.stepperService.activeStep.closeAnimationPlayer?.finish();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: IgxStepComponent, isStandalone: true, selector: "igx-step", inputs: { id: "id", disabled: ["disabled", "disabled", booleanAttribute], completed: ["completed", "completed", booleanAttribute], isValid: ["isValid", "isValid", booleanAttribute], optional: ["optional", "optional", booleanAttribute], active: ["active", "active", booleanAttribute], tabIndex: "tabIndex" }, outputs: { activeChange: "activeChange" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "keydown": "handleKeydown($event)" }, properties: { "attr.id": "this.id", "class.igx-step--completed": "this.completed", "attr.aria-selected": "this.active", "attr.tabindex": "this.tabIndex", "attr.role": "this.role", "attr.aria-controls": "this.contentId", "class.igx-step": "this.cssClass", "class.igx-step--vertical": "this.isVertical", "class.igx-step--disabled": "this.generalDisabled", "class": "this.titlePositionTop", "class.igx-step--current": "this.isActive", "class.igx-step--invalid": "this.isInvalid", "class.igx-step--horizontal": "this.isHorizontal" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxStepComponent, isStandalone: true, selector: "igx-step", inputs: { id: "id", disabled: ["disabled", "disabled", booleanAttribute], completed: ["completed", "completed", booleanAttribute], isValid: ["isValid", "isValid", booleanAttribute], optional: ["optional", "optional", booleanAttribute], active: ["active", "active", booleanAttribute], tabIndex: "tabIndex" }, outputs: { activeChange: "activeChange" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()", "keydown": "handleKeydown($event)" }, properties: { "attr.id": "this.id", "class.igx-step--completed": "this.completed", "attr.aria-selected": "this.active", "attr.tabindex": "this.tabIndex", "attr.role": "this.role", "attr.aria-controls": "this.contentId", "class.igx-step": "this.cssClass", "class.igx-step--vertical": "this.isVertical", "class.igx-step--disabled": "this.generalDisabled", "class": "this.titlePositionTop", "class.igx-step--current": "this.isActive", "class.igx-step--invalid": "this.isInvalid", "class.igx-step--horizontal": "this.isHorizontal" } }, providers: [
             { provide: IGX_STEP_COMPONENT, useExisting: IgxStepComponent }
-        ], queries: [{ propertyName: "indicator", first: true, predicate: i0.forwardRef(() => IgxStepIndicatorDirective), descendants: true }, { propertyName: "content", first: true, predicate: i0.forwardRef(() => IgxStepContentDirective), descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }, { propertyName: "customIndicatorTemplate", first: true, predicate: ["customIndicator"], descendants: true, static: true }, { propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultTitle>\n    @if (isTitleVisible) {\n        <ng-content select=\"[igxStepTitle]\"></ng-content>\n    }\n    @if (isTitleVisible) {\n        <ng-content select=\"[igxStepSubtitle]\"></ng-content>\n    }\n</ng-template>\n\n<ng-template #contentTemplate>\n    <div [ngClass]=\"contentClasses\" #contentContainer>\n        @if (active || collapsing) {\n            <ng-content select=\"[igxStepContent]\"></ng-content>\n        }\n    </div>\n</ng-template>\n\n<ng-template #defaultIndicator>\n    <span>{{ index + 1 }}</span>\n</ng-template>\n\n<ng-template #customIndicator>\n    <ng-content select=\"[igxStepIndicator]\"></ng-content>\n</ng-template>\n\n<div class=\"igx-step__header igx-step-header\" igxRipple (keydown)=\"handleKeydown($event)\"\n     [ngClass]=\"stepHeaderClasses\"\n     (click)=\"onPointerDown($event)\">\n\n    @if (isIndicatorVisible) {\n        <div class=\"igx-step__indicator igx-step-header__indicator\">\n            <ng-container *ngTemplateOutlet=\"indicatorTemplate ? indicatorTemplate : defaultIndicator\"></ng-container>\n        </div>\n    }\n\n    <div class=\"igx-step__title-wrapper\">\n        <ng-container *ngTemplateOutlet=\"defaultTitle\"></ng-container>\n    </div>\n</div>\n\n@if (!isHorizontal) {\n    <div class=\"igx-step__content-wrapper\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </div>\n}\n", styles: ["@layer ig.base{.igx-step{display:flex;position:relative;flex-direction:column;align-content:center;justify-content:center}.igx-step:first-of-type .igx-step__header:before{visibility:hidden}.igx-step:last-of-type .igx-step__header:after{visibility:hidden}.igx-step:last-of-type .igx-step__content-wrapper:before{display:none}.igx-step:focus{outline:none}.igx-step:focus .igx-step__title{color:var(--title-focus-color)}.igx-step:focus .igx-step__subtitle{color:var(--subtitle-focus-color)}.igx-step:focus .igx-step__header{background:var(--step-focus-background);color:var(--title-focus-color)}.igx-step:focus .igx-step__header:hover .igx-step__title{color:var(--title-focus-color)}.igx-step:focus .igx-step__header:hover .igx-step__subtitle{color:var(--subtitle-focus-color)}.igx-step:focus .igx-step__header:before,.igx-step:focus .igx-step__header:after{z-index:-1}.igx-step--invalid:focus .igx-step__header{background:var(--invalid-step-focus-background)}.igx-step--invalid:focus .igx-step__header:hover .igx-step__title{color:var(--invalid-title-focus-color)}.igx-step--invalid:focus .igx-step__header:hover .igx-step__subtitle{color:var(--invalid-subtitle-focus-color)}.igx-step--invalid:focus .igx-step__title{color:var(--invalid-title-focus-color)}.igx-step--invalid:focus .igx-step__subtitle{color:var(--invalid-subtitle-focus-color)}.igx-step--current:focus .igx-step__header{background:var(--current-step-focus-background)}.igx-step--current:focus .igx-step__header:hover .igx-step__title{color:var(--current-title-focus-color)}.igx-step--current:focus .igx-step__header:hover .igx-step__subtitle{color:var(--current-subtitle-focus-color)}.igx-step--current:focus .igx-step__title{color:var(--current-title-focus-color)}.igx-step--current:focus .igx-step__subtitle{color:var(--current-subtitle-focus-color)}.igx-step__title-wrapper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:2rem}.igx-step__title-wrapper:empty{display:none}.igx-step__title-wrapper>*{display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.igx-step__content-wrapper{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin-block:0;padding:1rem;position:relative}.igx-step__content-wrapper:before{content:\"\";position:absolute}.igx-step--completed+.igx-step:before{border-top-color:var(--complete-step-separator-color)!important;border-top-style:var(--complete-step-separator-style)!important}.igx-step--completed+.igx-step .igx-step__header:before{border-top-color:var(--complete-step-separator-color)!important;border-top-style:var(--complete-step-separator-style)!important}.igx-step--completed:focus .igx-step__header{background:var(--complete-step-focus-background)}.igx-step--completed:focus .igx-step__header:hover .igx-step__title{color:var(--complete-title-focus-color)}.igx-step--completed:focus .igx-step__header:hover .igx-step__subtitle{color:var(--complete-subtitle-focus-color)}.igx-step--completed:focus .igx-step__title{color:var(--complete-title-focus-color)}.igx-step--completed:focus .igx-step__subtitle{color:var(--complete-subtitle-focus-color)}.igx-step--simple .igx-step__indicator{width:initial;height:initial}.igx-step--simple .igx-step__indicator div>igx-icon,.igx-step--simple .igx-step__indicator div>igx-avatar,.igx-step--simple .igx-step__indicator div>igx-circular-bar{max-width:initial;max-height:initial}.igx-step--horizontal{overflow:hidden;flex-direction:row;flex:1}.igx-step--horizontal:before{content:\"\";width:auto;flex:1;position:relative}.igx-step--horizontal:first-of-type{flex-grow:1;max-width:-moz-max-content;max-width:max-content;min-width:auto}.igx-step--horizontal:first-of-type:before{display:none}.igx-step--horizontal .igx-step__title-wrapper{width:100%}.igx-step--horizontal .igx-step__header{display:flex;flex-direction:row;align-items:center;justify-content:center}.igx-step--horizontal .igx-step__header:before,.igx-step--horizontal .igx-step__header:after{content:\"\";position:absolute;flex:1;min-width:.25rem}.igx-step--horizontal .igx-step__header:before{inset-inline-start:0}.igx-step--horizontal .igx-step__header:after{inset-inline-end:0}.igx-step--horizontal .igx-step__content{flex-grow:1}.igx-step--horizontal .igx-step__content:focus{outline:none}.igx-step--horizontal .igx-step__content:before{display:none}.igx-step--start .igx-step__header{flex-direction:row;align-items:center}.igx-step--start .igx-step__title-wrapper{order:-1}.igx-step--end .igx-step__header{flex-direction:row;align-items:center}.igx-step--top .igx-step__title-wrapper{order:-1}.igx-step--horizontal.igx-step--simple{text-align:center}.igx-step--horizontal.igx-step--simple .igx-step__header{align-self:center;height:auto}.igx-step--horizontal.igx-step--simple .igx-step__header:before,.igx-step--horizontal.igx-step--simple .igx-step__header:after{display:none}.igx-step--horizontal.igx-step--top .igx-step__header{flex-direction:column;justify-content:flex-end}.igx-step--horizontal.igx-step--top .igx-step__title-wrapper{text-align:center}.igx-step--horizontal.igx-step--bottom .igx-step__header{flex-direction:column;justify-content:flex-start}.igx-step--horizontal.igx-step--bottom .igx-step__title-wrapper{text-align:center}.igx-step--horizontal.igx-step--start .igx-step__title-wrapper{text-align:end}.igx-step--horizontal.igx-step--start .igx-step__indicator{flex:1 0 auto}.igx-step--horizontal.igx-step--start .igx-step__header:before,.igx-step--horizontal.igx-step--start .igx-step__header:after{display:none}.igx-step--horizontal.igx-step--end:first-of-type{min-width:0}.igx-step--horizontal.igx-step--end .igx-step__indicator{flex:1 0 auto}.igx-step--horizontal.igx-step--end .igx-step__header:before,.igx-step--horizontal.igx-step--end .igx-step__header:after{display:none}.igx-step--disabled{color:var(--disabled-title-color);pointer-events:none;cursor:default}.igx-step--disabled .igx-step__indicator{color:var(--disabled-indicator-color);background:var(--disabled-indicator-background)}.igx-step--disabled .igx-step__title{color:var(--disabled-title-color)}.igx-step--disabled .igx-step__subtitle{color:var(--disabled-subtitle-color)}.igx-step-header{display:flex;padding:.5rem;position:relative;line-height:normal;flex-direction:column;align-items:flex-start;gap:.5rem;cursor:pointer;color:var(--title-color);background:var(--step-background);border-radius:var(--border-radius-step-header);overflow:hidden}.igx-step-header__indicator{display:flex;align-items:center;justify-content:center;position:relative;font-size:.75rem;white-space:nowrap;border-radius:var(--border-radius-indicator);color:var(--indicator-color);background:var(--indicator-background);box-shadow:0 0 0 clamp(1px,.0625rem,.0625rem) var(--indicator-outline)}.igx-step-header__title{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin-top:0;margin-bottom:0;color:var(--title-color)}.igx-step-header__subtitle{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin-top:0;margin-bottom:0;color:var(--subtitle-color)}.igx-step-header:hover{background:var(--step-hover-background)}.igx-step-header:hover .igx-step-header__title{color:var(--title-hover-color)}.igx-step-header:hover .igx-step-header__subtitle{color:var(--subtitle-hover-color)}.igx-step-header--invalid{background:var(--invalid-step-background);color:var(--invalid-title-color)}.igx-step-header--invalid .igx-step-header__indicator{color:var(--invalid-indicator-color);background:var(--invalid-indicator-background);box-shadow:0 0 0 clamp(1px,.0625rem,.0625rem) var(--invalid-indicator-outline)}.igx-step-header--invalid .igx-step-header__title{color:var(--invalid-title-color)}.igx-step-header--invalid .igx-step-header__subtitle{color:var(--invalid-subtitle-color)}.igx-step-header--invalid:hover{background:var(--invalid-step-hover-background)}.igx-step-header--invalid:hover .igx-step-header__title{color:var(--invalid-title-hover-color)}.igx-step-header--invalid:hover .igx-step-header__subtitle{color:var(--invalid-subtitle-hover-color)}.igx-step-header--completed{background:var(--complete-step-background)}.igx-step-header--completed:after{border-top-color:var(--complete-step-separator-color)!important;border-top-style:var(--complete-step-separator-style)!important}.igx-step-header--completed .igx-step-header__indicator{color:var(--complete-indicator-color);background:var(--complete-indicator-background);box-shadow:0 0 0 clamp(1px,.0625rem,.0625rem) var(--complete-indicator-outline)}.igx-step-header--completed .igx-step-header__title{color:var(--complete-title-color)}.igx-step-header--completed .igx-step-header__subtitle{color:var(--complete-subtitle-color)}.igx-step-header--completed:hover{background:var(--complete-step-hover-background)}.igx-step-header--completed:hover .igx-step-header__title{color:var(--complete-title-hover-color)}.igx-step-header--completed:hover .igx-step-header__subtitle{color:var(--complete-subtitle-hover-color)}.igx-step-header--current{background:var(--current-step-background);color:var(--current-title-color)}.igx-step-header--current .igx-step-header__indicator{color:var(--current-indicator-color)!important;background:var(--current-indicator-background);box-shadow:0 0 0 clamp(1px,.0625rem,.0625rem) var(--current-indicator-outline)!important}.igx-step-header--current .igx-step-header__title{color:var(--current-title-color);font-weight:600}.igx-step-header--current .igx-step-header__indicator{color:var(--current-subtitle-color)}.igx-step-header--current:hover{background:var(--current-step-hover-background)}.igx-step-header--current:hover .igx-step-header__title{color:var(--current-title-hover-color)}.igx-step-header--current:hover .igx-step-header__subtitle{color:var(--current-subtitle-hover-color)}.igx-step-header--disabled{color:var(--disabled-title-color);pointer-events:none;cursor:default}.igx-step-header--disabled .igx-step-header__indicator{color:var(--disabled-indicator-color);background:var(--disabled-indicator-background);box-shadow:0 0 0 clamp(1px,.0625rem,.0625rem) var(--disabled-indicator-outline)}.igx-step-header--disabled .igx-step-header__title{color:var(--disabled-title-color)}.igx-step-header--disabled .igx-step-header__subtitle{color:var(--disabled-subtitle-color)}}@layer ig.material{@container style(--ig-theme: material){.igx-step--simple .igx-step__indicator{min-width:1.5rem;min-height:1.5rem}.igx-step--horizontal:before{min-width:2.25rem;height:.0625rem;top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:before,.igx-step--horizontal .igx-step__header:after{height:.0625rem;width:calc(50% - 1.25rem);top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:hover:before,.igx-step--horizontal .igx-step__header:hover:after,.igx-step--horizontal .igx-step__header:focus:before,.igx-step--horizontal .igx-step__header:focus:after{z-index:-1}.igx-step--horizontal.igx-step--simple:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--simple .igx-step__header{padding:.5rem}.igx-step--horizontal.igx-step--top:before{border-top:.0625rem var(--step-separator-style) var(--step-separator-color);top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--top .igx-step__header:before,.igx-step--horizontal.igx-step--top .igx-step__header:after{top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--start:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--end:before{top:calc(50% - .03125rem)}.igx-step__content-wrapper{margin-inline-start:1.25rem;padding-inline-start:1.25rem;min-height:1.5rem}.igx-step__content-wrapper:before{inset-inline-start:-.03125rem;top:0rem;bottom:0rem;width:.0625rem;border-inline-start:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--completed .igx-step__content-wrapper:before{border-inline-start-style:var(--complete-step-separator-style);border-inline-start-color:var(--complete-step-separator-color)}.igx-step:last-of-type .igx-step__content-wrapper{min-height:0}.igx-step__indicator{height:1.5rem;width:1.5rem;min-width:1.5rem}.igx-step__indicator>igx-icon{--size: var(--ig-icon-size, 1.125rem);color:inherit}.igx-step__indicator>igx-icon,.igx-step__indicator>igx-avatar,.igx-step__indicator>igx-circular-bar{max-height:1.5rem;max-width:1.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-step .igx-ripple__inner{display:none!important}.igx-step:focus .igx-step__header{box-shadow:inset 0 0 0 clamp(1px,.0625rem,.0625rem) var(--indicator-outline)}.igx-step--simple .igx-step__indicator{min-width:2.5rem;min-height:2.5rem}.igx-step--horizontal:before{min-width:2.25rem;height:.5rem;top:1.5rem;border-top:.5rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:before,.igx-step--horizontal .igx-step__header:after{height:.5rem;width:calc(50% - 1.75rem);top:1.5rem;border-top:.5rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal.igx-step--simple:before{top:calc(50% - .25rem)}.igx-step--horizontal.igx-step--simple .igx-step__header{padding:.5rem}.igx-step--horizontal.igx-step--top:before{border-top:.5rem var(--step-separator-style) var(--step-separator-color);top:calc(100% - 2rem)}.igx-step--horizontal.igx-step--top .igx-step__header:before,.igx-step--horizontal.igx-step--top .igx-step__header:after{top:calc(100% - 2rem)}.igx-step--horizontal.igx-step--start .igx-step__header,.igx-step--horizontal.igx-step--end .igx-step__header{padding:.5rem}.igx-step__content-wrapper{margin-inline-start:1.75rem;padding-inline-start:1.75rem;min-height:1.5rem}.igx-step__content-wrapper:before{inset-inline-start:-.25rem;top:0rem;bottom:0rem;width:.5rem;border-inline-start:.5rem var(--step-separator-style) var(--step-separator-color)}.igx-step--completed .igx-step__content-wrapper:before{border-inline-start-style:var(--complete-step-separator-style);border-inline-start-color:var(--complete-step-separator-color)}.igx-step:last-of-type .igx-step__content-wrapper{min-height:0}.igx-step__indicator{height:2.5rem;width:2.5rem;min-width:2.5rem}.igx-step__indicator>igx-icon{--size: var(--ig-icon-size, 1.125rem)}.igx-step__indicator>igx-icon,.igx-step__indicator>igx-avatar,.igx-step__indicator>igx-circular-bar{max-height:2.5rem;max-width:2.5rem}.igx-step--disabled .igx-step__header{box-shadow:none}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-step .igx-ripple__inner{display:none!important}.igx-step--simple .igx-step__indicator{min-width:1.5rem;min-height:1.5rem}.igx-step--horizontal:before{min-width:2.25rem;height:.0625rem;top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:before,.igx-step--horizontal .igx-step__header:after{height:.0625rem;width:calc(50% - 1.25rem);top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:hover:before,.igx-step--horizontal .igx-step__header:hover:after,.igx-step--horizontal .igx-step__header:focus:before,.igx-step--horizontal .igx-step__header:focus:after{z-index:-1}.igx-step--horizontal.igx-step--simple:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--simple .igx-step__header{padding:.5rem}.igx-step--horizontal.igx-step--top:before{border-top:.0625rem var(--step-separator-style) var(--step-separator-color);top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--top .igx-step__header:before,.igx-step--horizontal.igx-step--top .igx-step__header:after{top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--start:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--end:before{top:calc(50% - .03125rem)}.igx-step__content-wrapper{margin-inline-start:1.25rem;padding-inline-start:1.25rem;min-height:1.5rem}.igx-step__content-wrapper:before{inset-inline-start:-.03125rem;top:0rem;bottom:0rem;width:.0625rem;border-inline-start:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--completed .igx-step__content-wrapper:before{border-inline-start-style:var(--complete-step-separator-style);border-inline-start-color:var(--complete-step-separator-color)}.igx-step:last-of-type .igx-step__content-wrapper{min-height:0}.igx-step__indicator{height:1.5rem;width:1.5rem;min-width:1.5rem}.igx-step__indicator>igx-icon{--size: var(--ig-icon-size, 1.125rem);color:inherit}.igx-step__indicator>igx-icon,.igx-step__indicator>igx-avatar,.igx-step__indicator>igx-circular-bar{max-height:1.5rem;max-width:1.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-step .igx-ripple__inner{display:none!important}.igx-step--simple .igx-step__indicator{min-width:1.5rem;min-height:1.5rem}.igx-step--horizontal:before{min-width:2.5rem;height:.0625rem;top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:before,.igx-step--horizontal .igx-step__header:after{height:.0625rem;width:calc(50% - 1.25rem);top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal.igx-step--simple:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--simple .igx-step__header{padding:.5rem}.igx-step--horizontal.igx-step--top:before{border-top:.0625rem var(--step-separator-style) var(--step-separator-color);top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--top .igx-step__header:before,.igx-step--horizontal.igx-step--top .igx-step__header:after{top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--start:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--end:before{top:calc(50% - .03125rem)}.igx-step__content-wrapper{margin-inline-start:1.25rem;padding-inline-start:1.25rem;min-height:1.5rem}.igx-step__content-wrapper:before{inset-inline-start:-.03125rem;top:0rem;bottom:0rem;width:.0625rem;border-inline-start:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--completed .igx-step__content-wrapper:before{border-inline-start-style:var(--complete-step-separator-style);border-inline-start-color:var(--complete-step-separator-color)}.igx-step:last-of-type .igx-step__content-wrapper{min-height:0}.igx-step [aria-selected=true] .igx-step__content-wrapper{padding-block:1rem;padding-inline-end:1rem}.igx-step [aria-selected=false] .igx-step__content-wrapper{padding-block:0}.igx-step__indicator{height:1.5rem;width:1.5rem;min-width:1.5rem}.igx-step__indicator>igx-icon{--size: var(--ig-icon--size, .875rem)}.igx-step__indicator>igx-icon,.igx-step__indicator>igx-avatar,.igx-step__indicator>igx-circular-bar{max-height:1.5rem;max-width:1.5rem}}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "indicator", first: true, predicate: i0.forwardRef(() => IgxStepIndicatorDirective), descendants: true }, { propertyName: "content", first: true, predicate: i0.forwardRef(() => IgxStepContentDirective), descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }, { propertyName: "customIndicatorTemplate", first: true, predicate: ["customIndicator"], descendants: true, static: true }, { propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultTitle>\n    @if (isTitleVisible) {\n        <ng-content select=\"[igxStepTitle]\"></ng-content>\n    }\n    @if (isTitleVisible) {\n        <ng-content select=\"[igxStepSubtitle]\"></ng-content>\n    }\n</ng-template>\n\n<ng-template #contentTemplate>\n    <div [ngClass]=\"contentClasses\" #contentContainer>\n        @if (active || collapsing) {\n            <ng-content select=\"[igxStepContent]\"></ng-content>\n        }\n    </div>\n</ng-template>\n\n<ng-template #defaultIndicator>\n    <span>{{ index + 1 }}</span>\n</ng-template>\n\n<ng-template #customIndicator>\n    <ng-content select=\"[igxStepIndicator]\"></ng-content>\n</ng-template>\n\n<div class=\"igx-step__header igx-step-header\" igxRipple (keydown)=\"handleKeydown($event)\"\n     [ngClass]=\"stepHeaderClasses\"\n     (click)=\"onPointerDown($event)\">\n\n    @if (isIndicatorVisible) {\n        <div class=\"igx-step__indicator igx-step-header__indicator\">\n            <ng-container *ngTemplateOutlet=\"indicatorTemplate ? indicatorTemplate : defaultIndicator\"></ng-container>\n        </div>\n    }\n\n    <div class=\"igx-step__title-wrapper\">\n        <ng-container *ngTemplateOutlet=\"defaultTitle\"></ng-container>\n    </div>\n</div>\n\n@if (!isHorizontal) {\n    <div class=\"igx-step__content-wrapper\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </div>\n}\n", styles: ["@layer ig.base{.igx-step{display:flex;position:relative;flex-direction:column;align-content:center;justify-content:center}.igx-step:first-of-type .igx-step__header:before{visibility:hidden}.igx-step:last-of-type .igx-step__header:after{visibility:hidden}.igx-step:last-of-type .igx-step__content-wrapper:before{display:none}.igx-step:focus{outline:none}.igx-step:focus .igx-step__title{color:var(--title-focus-color)}.igx-step:focus .igx-step__subtitle{color:var(--subtitle-focus-color)}.igx-step:focus .igx-step__header{background:var(--step-focus-background);color:var(--title-focus-color)}.igx-step:focus .igx-step__header:hover .igx-step__title{color:var(--title-focus-color)}.igx-step:focus .igx-step__header:hover .igx-step__subtitle{color:var(--subtitle-focus-color)}.igx-step:focus .igx-step__header:before,.igx-step:focus .igx-step__header:after{z-index:-1}.igx-step--invalid:focus .igx-step__header{background:var(--invalid-step-focus-background)}.igx-step--invalid:focus .igx-step__header:hover .igx-step__title{color:var(--invalid-title-focus-color)}.igx-step--invalid:focus .igx-step__header:hover .igx-step__subtitle{color:var(--invalid-subtitle-focus-color)}.igx-step--invalid:focus .igx-step__title{color:var(--invalid-title-focus-color)}.igx-step--invalid:focus .igx-step__subtitle{color:var(--invalid-subtitle-focus-color)}.igx-step--current:focus .igx-step__header{background:var(--current-step-focus-background)}.igx-step--current:focus .igx-step__header:hover .igx-step__title{color:var(--current-title-focus-color)}.igx-step--current:focus .igx-step__header:hover .igx-step__subtitle{color:var(--current-subtitle-focus-color)}.igx-step--current:focus .igx-step__title{color:var(--current-title-focus-color)}.igx-step--current:focus .igx-step__subtitle{color:var(--current-subtitle-focus-color)}.igx-step__title-wrapper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:2rem}.igx-step__title-wrapper:empty{display:none}.igx-step__title-wrapper>*{display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.igx-step__content-wrapper{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin-block:0;padding:1rem;position:relative}.igx-step__content-wrapper:before{content:\"\";position:absolute}.igx-step--completed+.igx-step:before{border-top-color:var(--complete-step-separator-color)!important;border-top-style:var(--complete-step-separator-style)!important}.igx-step--completed+.igx-step .igx-step__header:before{border-top-color:var(--complete-step-separator-color)!important;border-top-style:var(--complete-step-separator-style)!important}.igx-step--completed:focus .igx-step__header{background:var(--complete-step-focus-background)}.igx-step--completed:focus .igx-step__header:hover .igx-step__title{color:var(--complete-title-focus-color)}.igx-step--completed:focus .igx-step__header:hover .igx-step__subtitle{color:var(--complete-subtitle-focus-color)}.igx-step--completed:focus .igx-step__title{color:var(--complete-title-focus-color)}.igx-step--completed:focus .igx-step__subtitle{color:var(--complete-subtitle-focus-color)}.igx-step--simple .igx-step__indicator{width:initial;height:initial}.igx-step--simple .igx-step__indicator div>igx-icon,.igx-step--simple .igx-step__indicator div>igx-avatar,.igx-step--simple .igx-step__indicator div>igx-circular-bar{max-width:initial;max-height:initial}.igx-step--horizontal{overflow:hidden;flex-direction:row;flex:1}.igx-step--horizontal:before{content:\"\";width:auto;flex:1;position:relative}.igx-step--horizontal:first-of-type{flex-grow:1;max-width:-moz-max-content;max-width:max-content;min-width:auto}.igx-step--horizontal:first-of-type:before{display:none}.igx-step--horizontal .igx-step__title-wrapper{width:100%}.igx-step--horizontal .igx-step__header{display:flex;flex-direction:row;align-items:center;justify-content:center}.igx-step--horizontal .igx-step__header:before,.igx-step--horizontal .igx-step__header:after{content:\"\";position:absolute;flex:1;min-width:.25rem}.igx-step--horizontal .igx-step__header:before{inset-inline-start:0}.igx-step--horizontal .igx-step__header:after{inset-inline-end:0}.igx-step--horizontal .igx-step__content{flex-grow:1}.igx-step--horizontal .igx-step__content:focus{outline:none}.igx-step--horizontal .igx-step__content:before{display:none}.igx-step--start .igx-step__header{flex-direction:row;align-items:center}.igx-step--start .igx-step__title-wrapper{order:-1}.igx-step--end .igx-step__header{flex-direction:row;align-items:center}.igx-step--top .igx-step__title-wrapper{order:-1}.igx-step--horizontal.igx-step--simple{text-align:center}.igx-step--horizontal.igx-step--simple .igx-step__header{align-self:center;height:auto}.igx-step--horizontal.igx-step--simple .igx-step__header:before,.igx-step--horizontal.igx-step--simple .igx-step__header:after{display:none}.igx-step--horizontal.igx-step--top .igx-step__header{flex-direction:column;justify-content:flex-end}.igx-step--horizontal.igx-step--top .igx-step__title-wrapper{text-align:center}.igx-step--horizontal.igx-step--bottom .igx-step__header{flex-direction:column;justify-content:flex-start}.igx-step--horizontal.igx-step--bottom .igx-step__title-wrapper{text-align:center}.igx-step--horizontal.igx-step--start .igx-step__title-wrapper{text-align:end}.igx-step--horizontal.igx-step--start .igx-step__indicator{flex:1 0 auto}.igx-step--horizontal.igx-step--start .igx-step__header:before,.igx-step--horizontal.igx-step--start .igx-step__header:after{display:none}.igx-step--horizontal.igx-step--end:first-of-type{min-width:0}.igx-step--horizontal.igx-step--end .igx-step__indicator{flex:1 0 auto}.igx-step--horizontal.igx-step--end .igx-step__header:before,.igx-step--horizontal.igx-step--end .igx-step__header:after{display:none}.igx-step--disabled{color:var(--disabled-title-color);pointer-events:none;cursor:default}.igx-step--disabled .igx-step__indicator{color:var(--disabled-indicator-color);background:var(--disabled-indicator-background)}.igx-step--disabled .igx-step__title{color:var(--disabled-title-color)}.igx-step--disabled .igx-step__subtitle{color:var(--disabled-subtitle-color)}.igx-step-header{display:flex;padding:.5rem;position:relative;line-height:normal;flex-direction:column;align-items:flex-start;gap:.5rem;cursor:pointer;color:var(--title-color);background:var(--step-background);border-radius:var(--border-radius-step-header);overflow:hidden}.igx-step-header__indicator{display:flex;align-items:center;justify-content:center;position:relative;font-size:.75rem;white-space:nowrap;border-radius:var(--border-radius-indicator);color:var(--indicator-color);background:var(--indicator-background);box-shadow:0 0 0 clamp(1px,.0625rem,.0625rem) var(--indicator-outline)}.igx-step-header__title{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin-top:0;margin-bottom:0;color:var(--title-color)}.igx-step-header__subtitle{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin-top:0;margin-bottom:0;color:var(--subtitle-color)}.igx-step-header:hover{background:var(--step-hover-background)}.igx-step-header:hover .igx-step-header__title{color:var(--title-hover-color)}.igx-step-header:hover .igx-step-header__subtitle{color:var(--subtitle-hover-color)}.igx-step-header--invalid{background:var(--invalid-step-background);color:var(--invalid-title-color)}.igx-step-header--invalid .igx-step-header__indicator{color:var(--invalid-indicator-color);background:var(--invalid-indicator-background);box-shadow:0 0 0 clamp(1px,.0625rem,.0625rem) var(--invalid-indicator-outline)}.igx-step-header--invalid .igx-step-header__title{color:var(--invalid-title-color)}.igx-step-header--invalid .igx-step-header__subtitle{color:var(--invalid-subtitle-color)}.igx-step-header--invalid:hover{background:var(--invalid-step-hover-background)}.igx-step-header--invalid:hover .igx-step-header__title{color:var(--invalid-title-hover-color)}.igx-step-header--invalid:hover .igx-step-header__subtitle{color:var(--invalid-subtitle-hover-color)}.igx-step-header--completed{background:var(--complete-step-background)}.igx-step-header--completed:after{border-top-color:var(--complete-step-separator-color)!important;border-top-style:var(--complete-step-separator-style)!important}.igx-step-header--completed .igx-step-header__indicator{color:var(--complete-indicator-color);background:var(--complete-indicator-background);box-shadow:0 0 0 clamp(1px,.0625rem,.0625rem) var(--complete-indicator-outline)}.igx-step-header--completed .igx-step-header__title{color:var(--complete-title-color)}.igx-step-header--completed .igx-step-header__subtitle{color:var(--complete-subtitle-color)}.igx-step-header--completed:hover{background:var(--complete-step-hover-background)}.igx-step-header--completed:hover .igx-step-header__title{color:var(--complete-title-hover-color)}.igx-step-header--completed:hover .igx-step-header__subtitle{color:var(--complete-subtitle-hover-color)}.igx-step-header--current{background:var(--current-step-background);color:var(--current-title-color)}.igx-step-header--current .igx-step-header__indicator{color:var(--current-indicator-color)!important;background:var(--current-indicator-background);box-shadow:0 0 0 clamp(1px,.0625rem,.0625rem) var(--current-indicator-outline)!important}.igx-step-header--current .igx-step-header__title{color:var(--current-title-color);font-weight:600}.igx-step-header--current .igx-step-header__indicator{color:var(--current-subtitle-color)}.igx-step-header--current:hover{background:var(--current-step-hover-background)}.igx-step-header--current:hover .igx-step-header__title{color:var(--current-title-hover-color)}.igx-step-header--current:hover .igx-step-header__subtitle{color:var(--current-subtitle-hover-color)}.igx-step-header--disabled{color:var(--disabled-title-color);pointer-events:none;cursor:default}.igx-step-header--disabled .igx-step-header__indicator{color:var(--disabled-indicator-color);background:var(--disabled-indicator-background);box-shadow:0 0 0 clamp(1px,.0625rem,.0625rem) var(--disabled-indicator-outline)}.igx-step-header--disabled .igx-step-header__title{color:var(--disabled-title-color)}.igx-step-header--disabled .igx-step-header__subtitle{color:var(--disabled-subtitle-color)}}@layer ig.material{@container style(--ig-theme: material){.igx-step--simple .igx-step__indicator{min-width:1.5rem;min-height:1.5rem}.igx-step--horizontal:before{min-width:2.25rem;height:.0625rem;top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:before,.igx-step--horizontal .igx-step__header:after{height:.0625rem;width:calc(50% - 1.25rem);top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:hover:before,.igx-step--horizontal .igx-step__header:hover:after,.igx-step--horizontal .igx-step__header:focus:before,.igx-step--horizontal .igx-step__header:focus:after{z-index:-1}.igx-step--horizontal.igx-step--simple:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--simple .igx-step__header{padding:.5rem}.igx-step--horizontal.igx-step--top:before{border-top:.0625rem var(--step-separator-style) var(--step-separator-color);top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--top .igx-step__header:before,.igx-step--horizontal.igx-step--top .igx-step__header:after{top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--start:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--end:before{top:calc(50% - .03125rem)}.igx-step__content-wrapper{margin-inline-start:1.25rem;padding-inline-start:1.25rem;min-height:1.5rem}.igx-step__content-wrapper:before{inset-inline-start:-.03125rem;top:0rem;bottom:0rem;width:.0625rem;border-inline-start:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--completed .igx-step__content-wrapper:before{border-inline-start-style:var(--complete-step-separator-style);border-inline-start-color:var(--complete-step-separator-color)}.igx-step:last-of-type .igx-step__content-wrapper{min-height:0}.igx-step__indicator{--ig-icon-size: 1.125rem;height:1.5rem;width:1.5rem;min-width:1.5rem}.igx-step__indicator>igx-icon{color:inherit}.igx-step__indicator>igx-icon,.igx-step__indicator>igx-avatar,.igx-step__indicator>igx-circular-bar{max-height:1.5rem;max-width:1.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-step .igx-ripple__inner{display:none!important}.igx-step:focus .igx-step__header{box-shadow:inset 0 0 0 clamp(1px,.0625rem,.0625rem) var(--indicator-outline)}.igx-step--simple .igx-step__indicator{min-width:2.5rem;min-height:2.5rem}.igx-step--horizontal:before{min-width:2.25rem;height:.5rem;top:1.5rem;border-top:.5rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:before,.igx-step--horizontal .igx-step__header:after{height:.5rem;width:calc(50% - 1.75rem);top:1.5rem;border-top:.5rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal.igx-step--simple:before{top:calc(50% - .25rem)}.igx-step--horizontal.igx-step--simple .igx-step__header{padding:.5rem}.igx-step--horizontal.igx-step--top:before{border-top:.5rem var(--step-separator-style) var(--step-separator-color);top:calc(100% - 2rem)}.igx-step--horizontal.igx-step--top .igx-step__header:before,.igx-step--horizontal.igx-step--top .igx-step__header:after{top:calc(100% - 2rem)}.igx-step--horizontal.igx-step--start .igx-step__header,.igx-step--horizontal.igx-step--end .igx-step__header{padding:.5rem}.igx-step__content-wrapper{margin-inline-start:1.75rem;padding-inline-start:1.75rem;min-height:1.5rem}.igx-step__content-wrapper:before{inset-inline-start:-.25rem;top:0rem;bottom:0rem;width:.5rem;border-inline-start:.5rem var(--step-separator-style) var(--step-separator-color)}.igx-step--completed .igx-step__content-wrapper:before{border-inline-start-style:var(--complete-step-separator-style);border-inline-start-color:var(--complete-step-separator-color)}.igx-step:last-of-type .igx-step__content-wrapper{min-height:0}.igx-step__indicator{--ig-icon-size: 1.125rem;height:2.5rem;width:2.5rem;min-width:2.5rem}.igx-step__indicator>igx-icon,.igx-step__indicator>igx-avatar,.igx-step__indicator>igx-circular-bar{max-height:2.5rem;max-width:2.5rem}.igx-step--disabled .igx-step__header{box-shadow:none}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-step .igx-ripple__inner{display:none!important}.igx-step--simple .igx-step__indicator{min-width:1.5rem;min-height:1.5rem}.igx-step--horizontal:before{min-width:2.25rem;height:.0625rem;top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:before,.igx-step--horizontal .igx-step__header:after{height:.0625rem;width:calc(50% - 1.25rem);top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:hover:before,.igx-step--horizontal .igx-step__header:hover:after,.igx-step--horizontal .igx-step__header:focus:before,.igx-step--horizontal .igx-step__header:focus:after{z-index:-1}.igx-step--horizontal.igx-step--simple:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--simple .igx-step__header{padding:.5rem}.igx-step--horizontal.igx-step--top:before{border-top:.0625rem var(--step-separator-style) var(--step-separator-color);top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--top .igx-step__header:before,.igx-step--horizontal.igx-step--top .igx-step__header:after{top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--start:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--end:before{top:calc(50% - .03125rem)}.igx-step__content-wrapper{margin-inline-start:1.25rem;padding-inline-start:1.25rem;min-height:1.5rem}.igx-step__content-wrapper:before{inset-inline-start:-.03125rem;top:0rem;bottom:0rem;width:.0625rem;border-inline-start:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--completed .igx-step__content-wrapper:before{border-inline-start-style:var(--complete-step-separator-style);border-inline-start-color:var(--complete-step-separator-color)}.igx-step:last-of-type .igx-step__content-wrapper{min-height:0}.igx-step__indicator{--ig-icon-size: 1.125rem;height:1.5rem;width:1.5rem;min-width:1.5rem}.igx-step__indicator>igx-icon{color:inherit}.igx-step__indicator>igx-icon,.igx-step__indicator>igx-avatar,.igx-step__indicator>igx-circular-bar{max-height:1.5rem;max-width:1.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-step .igx-ripple__inner{display:none!important}.igx-step--simple .igx-step__indicator{min-width:1.5rem;min-height:1.5rem}.igx-step--horizontal:before{min-width:2.5rem;height:.0625rem;top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:before,.igx-step--horizontal .igx-step__header:after{height:.0625rem;width:calc(50% - 1.25rem);top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal.igx-step--simple:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--simple .igx-step__header{padding:.5rem}.igx-step--horizontal.igx-step--top:before{border-top:.0625rem var(--step-separator-style) var(--step-separator-color);top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--top .igx-step__header:before,.igx-step--horizontal.igx-step--top .igx-step__header:after{top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--start:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--end:before{top:calc(50% - .03125rem)}.igx-step__content-wrapper{margin-inline-start:1.25rem;padding-inline-start:1.25rem;min-height:1.5rem}.igx-step__content-wrapper:before{inset-inline-start:-.03125rem;top:0rem;bottom:0rem;width:.0625rem;border-inline-start:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--completed .igx-step__content-wrapper:before{border-inline-start-style:var(--complete-step-separator-style);border-inline-start-color:var(--complete-step-separator-color)}.igx-step:last-of-type .igx-step__content-wrapper{min-height:0}.igx-step [aria-selected=true] .igx-step__content-wrapper{padding-block:1rem;padding-inline-end:1rem}.igx-step [aria-selected=false] .igx-step__content-wrapper{padding-block:0}.igx-step__indicator{--ig-icon-size: .875rem;height:1.5rem;width:1.5rem;min-width:1.5rem}.igx-step__indicator>igx-icon,.igx-step__indicator>igx-avatar,.igx-step__indicator>igx-circular-bar{max-height:1.5rem;max-width:1.5rem}}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-step', encapsulation: ViewEncapsulation.None, providers: [
                         { provide: IGX_STEP_COMPONENT, useExisting: IgxStepComponent }
-                    ], changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass, IgxRippleDirective, NgTemplateOutlet], template: "<ng-template #defaultTitle>\n    @if (isTitleVisible) {\n        <ng-content select=\"[igxStepTitle]\"></ng-content>\n    }\n    @if (isTitleVisible) {\n        <ng-content select=\"[igxStepSubtitle]\"></ng-content>\n    }\n</ng-template>\n\n<ng-template #contentTemplate>\n    <div [ngClass]=\"contentClasses\" #contentContainer>\n        @if (active || collapsing) {\n            <ng-content select=\"[igxStepContent]\"></ng-content>\n        }\n    </div>\n</ng-template>\n\n<ng-template #defaultIndicator>\n    <span>{{ index + 1 }}</span>\n</ng-template>\n\n<ng-template #customIndicator>\n    <ng-content select=\"[igxStepIndicator]\"></ng-content>\n</ng-template>\n\n<div class=\"igx-step__header igx-step-header\" igxRipple (keydown)=\"handleKeydown($event)\"\n     [ngClass]=\"stepHeaderClasses\"\n     (click)=\"onPointerDown($event)\">\n\n    @if (isIndicatorVisible) {\n        <div class=\"igx-step__indicator igx-step-header__indicator\">\n            <ng-container *ngTemplateOutlet=\"indicatorTemplate ? indicatorTemplate : defaultIndicator\"></ng-container>\n        </div>\n    }\n\n    <div class=\"igx-step__title-wrapper\">\n        <ng-container *ngTemplateOutlet=\"defaultTitle\"></ng-container>\n    </div>\n</div>\n\n@if (!isHorizontal) {\n    <div class=\"igx-step__content-wrapper\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </div>\n}\n", styles: ["@layer ig.base{.igx-step{display:flex;position:relative;flex-direction:column;align-content:center;justify-content:center}.igx-step:first-of-type .igx-step__header:before{visibility:hidden}.igx-step:last-of-type .igx-step__header:after{visibility:hidden}.igx-step:last-of-type .igx-step__content-wrapper:before{display:none}.igx-step:focus{outline:none}.igx-step:focus .igx-step__title{color:var(--title-focus-color)}.igx-step:focus .igx-step__subtitle{color:var(--subtitle-focus-color)}.igx-step:focus .igx-step__header{background:var(--step-focus-background);color:var(--title-focus-color)}.igx-step:focus .igx-step__header:hover .igx-step__title{color:var(--title-focus-color)}.igx-step:focus .igx-step__header:hover .igx-step__subtitle{color:var(--subtitle-focus-color)}.igx-step:focus .igx-step__header:before,.igx-step:focus .igx-step__header:after{z-index:-1}.igx-step--invalid:focus .igx-step__header{background:var(--invalid-step-focus-background)}.igx-step--invalid:focus .igx-step__header:hover .igx-step__title{color:var(--invalid-title-focus-color)}.igx-step--invalid:focus .igx-step__header:hover .igx-step__subtitle{color:var(--invalid-subtitle-focus-color)}.igx-step--invalid:focus .igx-step__title{color:var(--invalid-title-focus-color)}.igx-step--invalid:focus .igx-step__subtitle{color:var(--invalid-subtitle-focus-color)}.igx-step--current:focus .igx-step__header{background:var(--current-step-focus-background)}.igx-step--current:focus .igx-step__header:hover .igx-step__title{color:var(--current-title-focus-color)}.igx-step--current:focus .igx-step__header:hover .igx-step__subtitle{color:var(--current-subtitle-focus-color)}.igx-step--current:focus .igx-step__title{color:var(--current-title-focus-color)}.igx-step--current:focus .igx-step__subtitle{color:var(--current-subtitle-focus-color)}.igx-step__title-wrapper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:2rem}.igx-step__title-wrapper:empty{display:none}.igx-step__title-wrapper>*{display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.igx-step__content-wrapper{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin-block:0;padding:1rem;position:relative}.igx-step__content-wrapper:before{content:\"\";position:absolute}.igx-step--completed+.igx-step:before{border-top-color:var(--complete-step-separator-color)!important;border-top-style:var(--complete-step-separator-style)!important}.igx-step--completed+.igx-step .igx-step__header:before{border-top-color:var(--complete-step-separator-color)!important;border-top-style:var(--complete-step-separator-style)!important}.igx-step--completed:focus .igx-step__header{background:var(--complete-step-focus-background)}.igx-step--completed:focus .igx-step__header:hover .igx-step__title{color:var(--complete-title-focus-color)}.igx-step--completed:focus .igx-step__header:hover .igx-step__subtitle{color:var(--complete-subtitle-focus-color)}.igx-step--completed:focus .igx-step__title{color:var(--complete-title-focus-color)}.igx-step--completed:focus .igx-step__subtitle{color:var(--complete-subtitle-focus-color)}.igx-step--simple .igx-step__indicator{width:initial;height:initial}.igx-step--simple .igx-step__indicator div>igx-icon,.igx-step--simple .igx-step__indicator div>igx-avatar,.igx-step--simple .igx-step__indicator div>igx-circular-bar{max-width:initial;max-height:initial}.igx-step--horizontal{overflow:hidden;flex-direction:row;flex:1}.igx-step--horizontal:before{content:\"\";width:auto;flex:1;position:relative}.igx-step--horizontal:first-of-type{flex-grow:1;max-width:-moz-max-content;max-width:max-content;min-width:auto}.igx-step--horizontal:first-of-type:before{display:none}.igx-step--horizontal .igx-step__title-wrapper{width:100%}.igx-step--horizontal .igx-step__header{display:flex;flex-direction:row;align-items:center;justify-content:center}.igx-step--horizontal .igx-step__header:before,.igx-step--horizontal .igx-step__header:after{content:\"\";position:absolute;flex:1;min-width:.25rem}.igx-step--horizontal .igx-step__header:before{inset-inline-start:0}.igx-step--horizontal .igx-step__header:after{inset-inline-end:0}.igx-step--horizontal .igx-step__content{flex-grow:1}.igx-step--horizontal .igx-step__content:focus{outline:none}.igx-step--horizontal .igx-step__content:before{display:none}.igx-step--start .igx-step__header{flex-direction:row;align-items:center}.igx-step--start .igx-step__title-wrapper{order:-1}.igx-step--end .igx-step__header{flex-direction:row;align-items:center}.igx-step--top .igx-step__title-wrapper{order:-1}.igx-step--horizontal.igx-step--simple{text-align:center}.igx-step--horizontal.igx-step--simple .igx-step__header{align-self:center;height:auto}.igx-step--horizontal.igx-step--simple .igx-step__header:before,.igx-step--horizontal.igx-step--simple .igx-step__header:after{display:none}.igx-step--horizontal.igx-step--top .igx-step__header{flex-direction:column;justify-content:flex-end}.igx-step--horizontal.igx-step--top .igx-step__title-wrapper{text-align:center}.igx-step--horizontal.igx-step--bottom .igx-step__header{flex-direction:column;justify-content:flex-start}.igx-step--horizontal.igx-step--bottom .igx-step__title-wrapper{text-align:center}.igx-step--horizontal.igx-step--start .igx-step__title-wrapper{text-align:end}.igx-step--horizontal.igx-step--start .igx-step__indicator{flex:1 0 auto}.igx-step--horizontal.igx-step--start .igx-step__header:before,.igx-step--horizontal.igx-step--start .igx-step__header:after{display:none}.igx-step--horizontal.igx-step--end:first-of-type{min-width:0}.igx-step--horizontal.igx-step--end .igx-step__indicator{flex:1 0 auto}.igx-step--horizontal.igx-step--end .igx-step__header:before,.igx-step--horizontal.igx-step--end .igx-step__header:after{display:none}.igx-step--disabled{color:var(--disabled-title-color);pointer-events:none;cursor:default}.igx-step--disabled .igx-step__indicator{color:var(--disabled-indicator-color);background:var(--disabled-indicator-background)}.igx-step--disabled .igx-step__title{color:var(--disabled-title-color)}.igx-step--disabled .igx-step__subtitle{color:var(--disabled-subtitle-color)}.igx-step-header{display:flex;padding:.5rem;position:relative;line-height:normal;flex-direction:column;align-items:flex-start;gap:.5rem;cursor:pointer;color:var(--title-color);background:var(--step-background);border-radius:var(--border-radius-step-header);overflow:hidden}.igx-step-header__indicator{display:flex;align-items:center;justify-content:center;position:relative;font-size:.75rem;white-space:nowrap;border-radius:var(--border-radius-indicator);color:var(--indicator-color);background:var(--indicator-background);box-shadow:0 0 0 clamp(1px,.0625rem,.0625rem) var(--indicator-outline)}.igx-step-header__title{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin-top:0;margin-bottom:0;color:var(--title-color)}.igx-step-header__subtitle{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin-top:0;margin-bottom:0;color:var(--subtitle-color)}.igx-step-header:hover{background:var(--step-hover-background)}.igx-step-header:hover .igx-step-header__title{color:var(--title-hover-color)}.igx-step-header:hover .igx-step-header__subtitle{color:var(--subtitle-hover-color)}.igx-step-header--invalid{background:var(--invalid-step-background);color:var(--invalid-title-color)}.igx-step-header--invalid .igx-step-header__indicator{color:var(--invalid-indicator-color);background:var(--invalid-indicator-background);box-shadow:0 0 0 clamp(1px,.0625rem,.0625rem) var(--invalid-indicator-outline)}.igx-step-header--invalid .igx-step-header__title{color:var(--invalid-title-color)}.igx-step-header--invalid .igx-step-header__subtitle{color:var(--invalid-subtitle-color)}.igx-step-header--invalid:hover{background:var(--invalid-step-hover-background)}.igx-step-header--invalid:hover .igx-step-header__title{color:var(--invalid-title-hover-color)}.igx-step-header--invalid:hover .igx-step-header__subtitle{color:var(--invalid-subtitle-hover-color)}.igx-step-header--completed{background:var(--complete-step-background)}.igx-step-header--completed:after{border-top-color:var(--complete-step-separator-color)!important;border-top-style:var(--complete-step-separator-style)!important}.igx-step-header--completed .igx-step-header__indicator{color:var(--complete-indicator-color);background:var(--complete-indicator-background);box-shadow:0 0 0 clamp(1px,.0625rem,.0625rem) var(--complete-indicator-outline)}.igx-step-header--completed .igx-step-header__title{color:var(--complete-title-color)}.igx-step-header--completed .igx-step-header__subtitle{color:var(--complete-subtitle-color)}.igx-step-header--completed:hover{background:var(--complete-step-hover-background)}.igx-step-header--completed:hover .igx-step-header__title{color:var(--complete-title-hover-color)}.igx-step-header--completed:hover .igx-step-header__subtitle{color:var(--complete-subtitle-hover-color)}.igx-step-header--current{background:var(--current-step-background);color:var(--current-title-color)}.igx-step-header--current .igx-step-header__indicator{color:var(--current-indicator-color)!important;background:var(--current-indicator-background);box-shadow:0 0 0 clamp(1px,.0625rem,.0625rem) var(--current-indicator-outline)!important}.igx-step-header--current .igx-step-header__title{color:var(--current-title-color);font-weight:600}.igx-step-header--current .igx-step-header__indicator{color:var(--current-subtitle-color)}.igx-step-header--current:hover{background:var(--current-step-hover-background)}.igx-step-header--current:hover .igx-step-header__title{color:var(--current-title-hover-color)}.igx-step-header--current:hover .igx-step-header__subtitle{color:var(--current-subtitle-hover-color)}.igx-step-header--disabled{color:var(--disabled-title-color);pointer-events:none;cursor:default}.igx-step-header--disabled .igx-step-header__indicator{color:var(--disabled-indicator-color);background:var(--disabled-indicator-background);box-shadow:0 0 0 clamp(1px,.0625rem,.0625rem) var(--disabled-indicator-outline)}.igx-step-header--disabled .igx-step-header__title{color:var(--disabled-title-color)}.igx-step-header--disabled .igx-step-header__subtitle{color:var(--disabled-subtitle-color)}}@layer ig.material{@container style(--ig-theme: material){.igx-step--simple .igx-step__indicator{min-width:1.5rem;min-height:1.5rem}.igx-step--horizontal:before{min-width:2.25rem;height:.0625rem;top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:before,.igx-step--horizontal .igx-step__header:after{height:.0625rem;width:calc(50% - 1.25rem);top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:hover:before,.igx-step--horizontal .igx-step__header:hover:after,.igx-step--horizontal .igx-step__header:focus:before,.igx-step--horizontal .igx-step__header:focus:after{z-index:-1}.igx-step--horizontal.igx-step--simple:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--simple .igx-step__header{padding:.5rem}.igx-step--horizontal.igx-step--top:before{border-top:.0625rem var(--step-separator-style) var(--step-separator-color);top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--top .igx-step__header:before,.igx-step--horizontal.igx-step--top .igx-step__header:after{top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--start:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--end:before{top:calc(50% - .03125rem)}.igx-step__content-wrapper{margin-inline-start:1.25rem;padding-inline-start:1.25rem;min-height:1.5rem}.igx-step__content-wrapper:before{inset-inline-start:-.03125rem;top:0rem;bottom:0rem;width:.0625rem;border-inline-start:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--completed .igx-step__content-wrapper:before{border-inline-start-style:var(--complete-step-separator-style);border-inline-start-color:var(--complete-step-separator-color)}.igx-step:last-of-type .igx-step__content-wrapper{min-height:0}.igx-step__indicator{height:1.5rem;width:1.5rem;min-width:1.5rem}.igx-step__indicator>igx-icon{--size: var(--ig-icon-size, 1.125rem);color:inherit}.igx-step__indicator>igx-icon,.igx-step__indicator>igx-avatar,.igx-step__indicator>igx-circular-bar{max-height:1.5rem;max-width:1.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-step .igx-ripple__inner{display:none!important}.igx-step:focus .igx-step__header{box-shadow:inset 0 0 0 clamp(1px,.0625rem,.0625rem) var(--indicator-outline)}.igx-step--simple .igx-step__indicator{min-width:2.5rem;min-height:2.5rem}.igx-step--horizontal:before{min-width:2.25rem;height:.5rem;top:1.5rem;border-top:.5rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:before,.igx-step--horizontal .igx-step__header:after{height:.5rem;width:calc(50% - 1.75rem);top:1.5rem;border-top:.5rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal.igx-step--simple:before{top:calc(50% - .25rem)}.igx-step--horizontal.igx-step--simple .igx-step__header{padding:.5rem}.igx-step--horizontal.igx-step--top:before{border-top:.5rem var(--step-separator-style) var(--step-separator-color);top:calc(100% - 2rem)}.igx-step--horizontal.igx-step--top .igx-step__header:before,.igx-step--horizontal.igx-step--top .igx-step__header:after{top:calc(100% - 2rem)}.igx-step--horizontal.igx-step--start .igx-step__header,.igx-step--horizontal.igx-step--end .igx-step__header{padding:.5rem}.igx-step__content-wrapper{margin-inline-start:1.75rem;padding-inline-start:1.75rem;min-height:1.5rem}.igx-step__content-wrapper:before{inset-inline-start:-.25rem;top:0rem;bottom:0rem;width:.5rem;border-inline-start:.5rem var(--step-separator-style) var(--step-separator-color)}.igx-step--completed .igx-step__content-wrapper:before{border-inline-start-style:var(--complete-step-separator-style);border-inline-start-color:var(--complete-step-separator-color)}.igx-step:last-of-type .igx-step__content-wrapper{min-height:0}.igx-step__indicator{height:2.5rem;width:2.5rem;min-width:2.5rem}.igx-step__indicator>igx-icon{--size: var(--ig-icon-size, 1.125rem)}.igx-step__indicator>igx-icon,.igx-step__indicator>igx-avatar,.igx-step__indicator>igx-circular-bar{max-height:2.5rem;max-width:2.5rem}.igx-step--disabled .igx-step__header{box-shadow:none}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-step .igx-ripple__inner{display:none!important}.igx-step--simple .igx-step__indicator{min-width:1.5rem;min-height:1.5rem}.igx-step--horizontal:before{min-width:2.25rem;height:.0625rem;top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:before,.igx-step--horizontal .igx-step__header:after{height:.0625rem;width:calc(50% - 1.25rem);top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:hover:before,.igx-step--horizontal .igx-step__header:hover:after,.igx-step--horizontal .igx-step__header:focus:before,.igx-step--horizontal .igx-step__header:focus:after{z-index:-1}.igx-step--horizontal.igx-step--simple:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--simple .igx-step__header{padding:.5rem}.igx-step--horizontal.igx-step--top:before{border-top:.0625rem var(--step-separator-style) var(--step-separator-color);top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--top .igx-step__header:before,.igx-step--horizontal.igx-step--top .igx-step__header:after{top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--start:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--end:before{top:calc(50% - .03125rem)}.igx-step__content-wrapper{margin-inline-start:1.25rem;padding-inline-start:1.25rem;min-height:1.5rem}.igx-step__content-wrapper:before{inset-inline-start:-.03125rem;top:0rem;bottom:0rem;width:.0625rem;border-inline-start:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--completed .igx-step__content-wrapper:before{border-inline-start-style:var(--complete-step-separator-style);border-inline-start-color:var(--complete-step-separator-color)}.igx-step:last-of-type .igx-step__content-wrapper{min-height:0}.igx-step__indicator{height:1.5rem;width:1.5rem;min-width:1.5rem}.igx-step__indicator>igx-icon{--size: var(--ig-icon-size, 1.125rem);color:inherit}.igx-step__indicator>igx-icon,.igx-step__indicator>igx-avatar,.igx-step__indicator>igx-circular-bar{max-height:1.5rem;max-width:1.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-step .igx-ripple__inner{display:none!important}.igx-step--simple .igx-step__indicator{min-width:1.5rem;min-height:1.5rem}.igx-step--horizontal:before{min-width:2.5rem;height:.0625rem;top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:before,.igx-step--horizontal .igx-step__header:after{height:.0625rem;width:calc(50% - 1.25rem);top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal.igx-step--simple:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--simple .igx-step__header{padding:.5rem}.igx-step--horizontal.igx-step--top:before{border-top:.0625rem var(--step-separator-style) var(--step-separator-color);top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--top .igx-step__header:before,.igx-step--horizontal.igx-step--top .igx-step__header:after{top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--start:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--end:before{top:calc(50% - .03125rem)}.igx-step__content-wrapper{margin-inline-start:1.25rem;padding-inline-start:1.25rem;min-height:1.5rem}.igx-step__content-wrapper:before{inset-inline-start:-.03125rem;top:0rem;bottom:0rem;width:.0625rem;border-inline-start:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--completed .igx-step__content-wrapper:before{border-inline-start-style:var(--complete-step-separator-style);border-inline-start-color:var(--complete-step-separator-color)}.igx-step:last-of-type .igx-step__content-wrapper{min-height:0}.igx-step [aria-selected=true] .igx-step__content-wrapper{padding-block:1rem;padding-inline-end:1rem}.igx-step [aria-selected=false] .igx-step__content-wrapper{padding-block:0}.igx-step__indicator{height:1.5rem;width:1.5rem;min-width:1.5rem}.igx-step__indicator>igx-icon{--size: var(--ig-icon--size, .875rem)}.igx-step__indicator>igx-icon,.igx-step__indicator>igx-avatar,.igx-step__indicator>igx-circular-bar{max-height:1.5rem;max-width:1.5rem}}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass, IgxRippleDirective, NgTemplateOutlet], template: "<ng-template #defaultTitle>\n    @if (isTitleVisible) {\n        <ng-content select=\"[igxStepTitle]\"></ng-content>\n    }\n    @if (isTitleVisible) {\n        <ng-content select=\"[igxStepSubtitle]\"></ng-content>\n    }\n</ng-template>\n\n<ng-template #contentTemplate>\n    <div [ngClass]=\"contentClasses\" #contentContainer>\n        @if (active || collapsing) {\n            <ng-content select=\"[igxStepContent]\"></ng-content>\n        }\n    </div>\n</ng-template>\n\n<ng-template #defaultIndicator>\n    <span>{{ index + 1 }}</span>\n</ng-template>\n\n<ng-template #customIndicator>\n    <ng-content select=\"[igxStepIndicator]\"></ng-content>\n</ng-template>\n\n<div class=\"igx-step__header igx-step-header\" igxRipple (keydown)=\"handleKeydown($event)\"\n     [ngClass]=\"stepHeaderClasses\"\n     (click)=\"onPointerDown($event)\">\n\n    @if (isIndicatorVisible) {\n        <div class=\"igx-step__indicator igx-step-header__indicator\">\n            <ng-container *ngTemplateOutlet=\"indicatorTemplate ? indicatorTemplate : defaultIndicator\"></ng-container>\n        </div>\n    }\n\n    <div class=\"igx-step__title-wrapper\">\n        <ng-container *ngTemplateOutlet=\"defaultTitle\"></ng-container>\n    </div>\n</div>\n\n@if (!isHorizontal) {\n    <div class=\"igx-step__content-wrapper\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </div>\n}\n", styles: ["@layer ig.base{.igx-step{display:flex;position:relative;flex-direction:column;align-content:center;justify-content:center}.igx-step:first-of-type .igx-step__header:before{visibility:hidden}.igx-step:last-of-type .igx-step__header:after{visibility:hidden}.igx-step:last-of-type .igx-step__content-wrapper:before{display:none}.igx-step:focus{outline:none}.igx-step:focus .igx-step__title{color:var(--title-focus-color)}.igx-step:focus .igx-step__subtitle{color:var(--subtitle-focus-color)}.igx-step:focus .igx-step__header{background:var(--step-focus-background);color:var(--title-focus-color)}.igx-step:focus .igx-step__header:hover .igx-step__title{color:var(--title-focus-color)}.igx-step:focus .igx-step__header:hover .igx-step__subtitle{color:var(--subtitle-focus-color)}.igx-step:focus .igx-step__header:before,.igx-step:focus .igx-step__header:after{z-index:-1}.igx-step--invalid:focus .igx-step__header{background:var(--invalid-step-focus-background)}.igx-step--invalid:focus .igx-step__header:hover .igx-step__title{color:var(--invalid-title-focus-color)}.igx-step--invalid:focus .igx-step__header:hover .igx-step__subtitle{color:var(--invalid-subtitle-focus-color)}.igx-step--invalid:focus .igx-step__title{color:var(--invalid-title-focus-color)}.igx-step--invalid:focus .igx-step__subtitle{color:var(--invalid-subtitle-focus-color)}.igx-step--current:focus .igx-step__header{background:var(--current-step-focus-background)}.igx-step--current:focus .igx-step__header:hover .igx-step__title{color:var(--current-title-focus-color)}.igx-step--current:focus .igx-step__header:hover .igx-step__subtitle{color:var(--current-subtitle-focus-color)}.igx-step--current:focus .igx-step__title{color:var(--current-title-focus-color)}.igx-step--current:focus .igx-step__subtitle{color:var(--current-subtitle-focus-color)}.igx-step__title-wrapper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:2rem}.igx-step__title-wrapper:empty{display:none}.igx-step__title-wrapper>*{display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.igx-step__content-wrapper{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin-block:0;padding:1rem;position:relative}.igx-step__content-wrapper:before{content:\"\";position:absolute}.igx-step--completed+.igx-step:before{border-top-color:var(--complete-step-separator-color)!important;border-top-style:var(--complete-step-separator-style)!important}.igx-step--completed+.igx-step .igx-step__header:before{border-top-color:var(--complete-step-separator-color)!important;border-top-style:var(--complete-step-separator-style)!important}.igx-step--completed:focus .igx-step__header{background:var(--complete-step-focus-background)}.igx-step--completed:focus .igx-step__header:hover .igx-step__title{color:var(--complete-title-focus-color)}.igx-step--completed:focus .igx-step__header:hover .igx-step__subtitle{color:var(--complete-subtitle-focus-color)}.igx-step--completed:focus .igx-step__title{color:var(--complete-title-focus-color)}.igx-step--completed:focus .igx-step__subtitle{color:var(--complete-subtitle-focus-color)}.igx-step--simple .igx-step__indicator{width:initial;height:initial}.igx-step--simple .igx-step__indicator div>igx-icon,.igx-step--simple .igx-step__indicator div>igx-avatar,.igx-step--simple .igx-step__indicator div>igx-circular-bar{max-width:initial;max-height:initial}.igx-step--horizontal{overflow:hidden;flex-direction:row;flex:1}.igx-step--horizontal:before{content:\"\";width:auto;flex:1;position:relative}.igx-step--horizontal:first-of-type{flex-grow:1;max-width:-moz-max-content;max-width:max-content;min-width:auto}.igx-step--horizontal:first-of-type:before{display:none}.igx-step--horizontal .igx-step__title-wrapper{width:100%}.igx-step--horizontal .igx-step__header{display:flex;flex-direction:row;align-items:center;justify-content:center}.igx-step--horizontal .igx-step__header:before,.igx-step--horizontal .igx-step__header:after{content:\"\";position:absolute;flex:1;min-width:.25rem}.igx-step--horizontal .igx-step__header:before{inset-inline-start:0}.igx-step--horizontal .igx-step__header:after{inset-inline-end:0}.igx-step--horizontal .igx-step__content{flex-grow:1}.igx-step--horizontal .igx-step__content:focus{outline:none}.igx-step--horizontal .igx-step__content:before{display:none}.igx-step--start .igx-step__header{flex-direction:row;align-items:center}.igx-step--start .igx-step__title-wrapper{order:-1}.igx-step--end .igx-step__header{flex-direction:row;align-items:center}.igx-step--top .igx-step__title-wrapper{order:-1}.igx-step--horizontal.igx-step--simple{text-align:center}.igx-step--horizontal.igx-step--simple .igx-step__header{align-self:center;height:auto}.igx-step--horizontal.igx-step--simple .igx-step__header:before,.igx-step--horizontal.igx-step--simple .igx-step__header:after{display:none}.igx-step--horizontal.igx-step--top .igx-step__header{flex-direction:column;justify-content:flex-end}.igx-step--horizontal.igx-step--top .igx-step__title-wrapper{text-align:center}.igx-step--horizontal.igx-step--bottom .igx-step__header{flex-direction:column;justify-content:flex-start}.igx-step--horizontal.igx-step--bottom .igx-step__title-wrapper{text-align:center}.igx-step--horizontal.igx-step--start .igx-step__title-wrapper{text-align:end}.igx-step--horizontal.igx-step--start .igx-step__indicator{flex:1 0 auto}.igx-step--horizontal.igx-step--start .igx-step__header:before,.igx-step--horizontal.igx-step--start .igx-step__header:after{display:none}.igx-step--horizontal.igx-step--end:first-of-type{min-width:0}.igx-step--horizontal.igx-step--end .igx-step__indicator{flex:1 0 auto}.igx-step--horizontal.igx-step--end .igx-step__header:before,.igx-step--horizontal.igx-step--end .igx-step__header:after{display:none}.igx-step--disabled{color:var(--disabled-title-color);pointer-events:none;cursor:default}.igx-step--disabled .igx-step__indicator{color:var(--disabled-indicator-color);background:var(--disabled-indicator-background)}.igx-step--disabled .igx-step__title{color:var(--disabled-title-color)}.igx-step--disabled .igx-step__subtitle{color:var(--disabled-subtitle-color)}.igx-step-header{display:flex;padding:.5rem;position:relative;line-height:normal;flex-direction:column;align-items:flex-start;gap:.5rem;cursor:pointer;color:var(--title-color);background:var(--step-background);border-radius:var(--border-radius-step-header);overflow:hidden}.igx-step-header__indicator{display:flex;align-items:center;justify-content:center;position:relative;font-size:.75rem;white-space:nowrap;border-radius:var(--border-radius-indicator);color:var(--indicator-color);background:var(--indicator-background);box-shadow:0 0 0 clamp(1px,.0625rem,.0625rem) var(--indicator-outline)}.igx-step-header__title{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin-top:0;margin-bottom:0;color:var(--title-color)}.igx-step-header__subtitle{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin-top:0;margin-bottom:0;color:var(--subtitle-color)}.igx-step-header:hover{background:var(--step-hover-background)}.igx-step-header:hover .igx-step-header__title{color:var(--title-hover-color)}.igx-step-header:hover .igx-step-header__subtitle{color:var(--subtitle-hover-color)}.igx-step-header--invalid{background:var(--invalid-step-background);color:var(--invalid-title-color)}.igx-step-header--invalid .igx-step-header__indicator{color:var(--invalid-indicator-color);background:var(--invalid-indicator-background);box-shadow:0 0 0 clamp(1px,.0625rem,.0625rem) var(--invalid-indicator-outline)}.igx-step-header--invalid .igx-step-header__title{color:var(--invalid-title-color)}.igx-step-header--invalid .igx-step-header__subtitle{color:var(--invalid-subtitle-color)}.igx-step-header--invalid:hover{background:var(--invalid-step-hover-background)}.igx-step-header--invalid:hover .igx-step-header__title{color:var(--invalid-title-hover-color)}.igx-step-header--invalid:hover .igx-step-header__subtitle{color:var(--invalid-subtitle-hover-color)}.igx-step-header--completed{background:var(--complete-step-background)}.igx-step-header--completed:after{border-top-color:var(--complete-step-separator-color)!important;border-top-style:var(--complete-step-separator-style)!important}.igx-step-header--completed .igx-step-header__indicator{color:var(--complete-indicator-color);background:var(--complete-indicator-background);box-shadow:0 0 0 clamp(1px,.0625rem,.0625rem) var(--complete-indicator-outline)}.igx-step-header--completed .igx-step-header__title{color:var(--complete-title-color)}.igx-step-header--completed .igx-step-header__subtitle{color:var(--complete-subtitle-color)}.igx-step-header--completed:hover{background:var(--complete-step-hover-background)}.igx-step-header--completed:hover .igx-step-header__title{color:var(--complete-title-hover-color)}.igx-step-header--completed:hover .igx-step-header__subtitle{color:var(--complete-subtitle-hover-color)}.igx-step-header--current{background:var(--current-step-background);color:var(--current-title-color)}.igx-step-header--current .igx-step-header__indicator{color:var(--current-indicator-color)!important;background:var(--current-indicator-background);box-shadow:0 0 0 clamp(1px,.0625rem,.0625rem) var(--current-indicator-outline)!important}.igx-step-header--current .igx-step-header__title{color:var(--current-title-color);font-weight:600}.igx-step-header--current .igx-step-header__indicator{color:var(--current-subtitle-color)}.igx-step-header--current:hover{background:var(--current-step-hover-background)}.igx-step-header--current:hover .igx-step-header__title{color:var(--current-title-hover-color)}.igx-step-header--current:hover .igx-step-header__subtitle{color:var(--current-subtitle-hover-color)}.igx-step-header--disabled{color:var(--disabled-title-color);pointer-events:none;cursor:default}.igx-step-header--disabled .igx-step-header__indicator{color:var(--disabled-indicator-color);background:var(--disabled-indicator-background);box-shadow:0 0 0 clamp(1px,.0625rem,.0625rem) var(--disabled-indicator-outline)}.igx-step-header--disabled .igx-step-header__title{color:var(--disabled-title-color)}.igx-step-header--disabled .igx-step-header__subtitle{color:var(--disabled-subtitle-color)}}@layer ig.material{@container style(--ig-theme: material){.igx-step--simple .igx-step__indicator{min-width:1.5rem;min-height:1.5rem}.igx-step--horizontal:before{min-width:2.25rem;height:.0625rem;top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:before,.igx-step--horizontal .igx-step__header:after{height:.0625rem;width:calc(50% - 1.25rem);top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:hover:before,.igx-step--horizontal .igx-step__header:hover:after,.igx-step--horizontal .igx-step__header:focus:before,.igx-step--horizontal .igx-step__header:focus:after{z-index:-1}.igx-step--horizontal.igx-step--simple:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--simple .igx-step__header{padding:.5rem}.igx-step--horizontal.igx-step--top:before{border-top:.0625rem var(--step-separator-style) var(--step-separator-color);top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--top .igx-step__header:before,.igx-step--horizontal.igx-step--top .igx-step__header:after{top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--start:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--end:before{top:calc(50% - .03125rem)}.igx-step__content-wrapper{margin-inline-start:1.25rem;padding-inline-start:1.25rem;min-height:1.5rem}.igx-step__content-wrapper:before{inset-inline-start:-.03125rem;top:0rem;bottom:0rem;width:.0625rem;border-inline-start:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--completed .igx-step__content-wrapper:before{border-inline-start-style:var(--complete-step-separator-style);border-inline-start-color:var(--complete-step-separator-color)}.igx-step:last-of-type .igx-step__content-wrapper{min-height:0}.igx-step__indicator{--ig-icon-size: 1.125rem;height:1.5rem;width:1.5rem;min-width:1.5rem}.igx-step__indicator>igx-icon{color:inherit}.igx-step__indicator>igx-icon,.igx-step__indicator>igx-avatar,.igx-step__indicator>igx-circular-bar{max-height:1.5rem;max-width:1.5rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-step .igx-ripple__inner{display:none!important}.igx-step:focus .igx-step__header{box-shadow:inset 0 0 0 clamp(1px,.0625rem,.0625rem) var(--indicator-outline)}.igx-step--simple .igx-step__indicator{min-width:2.5rem;min-height:2.5rem}.igx-step--horizontal:before{min-width:2.25rem;height:.5rem;top:1.5rem;border-top:.5rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:before,.igx-step--horizontal .igx-step__header:after{height:.5rem;width:calc(50% - 1.75rem);top:1.5rem;border-top:.5rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal.igx-step--simple:before{top:calc(50% - .25rem)}.igx-step--horizontal.igx-step--simple .igx-step__header{padding:.5rem}.igx-step--horizontal.igx-step--top:before{border-top:.5rem var(--step-separator-style) var(--step-separator-color);top:calc(100% - 2rem)}.igx-step--horizontal.igx-step--top .igx-step__header:before,.igx-step--horizontal.igx-step--top .igx-step__header:after{top:calc(100% - 2rem)}.igx-step--horizontal.igx-step--start .igx-step__header,.igx-step--horizontal.igx-step--end .igx-step__header{padding:.5rem}.igx-step__content-wrapper{margin-inline-start:1.75rem;padding-inline-start:1.75rem;min-height:1.5rem}.igx-step__content-wrapper:before{inset-inline-start:-.25rem;top:0rem;bottom:0rem;width:.5rem;border-inline-start:.5rem var(--step-separator-style) var(--step-separator-color)}.igx-step--completed .igx-step__content-wrapper:before{border-inline-start-style:var(--complete-step-separator-style);border-inline-start-color:var(--complete-step-separator-color)}.igx-step:last-of-type .igx-step__content-wrapper{min-height:0}.igx-step__indicator{--ig-icon-size: 1.125rem;height:2.5rem;width:2.5rem;min-width:2.5rem}.igx-step__indicator>igx-icon,.igx-step__indicator>igx-avatar,.igx-step__indicator>igx-circular-bar{max-height:2.5rem;max-width:2.5rem}.igx-step--disabled .igx-step__header{box-shadow:none}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-step .igx-ripple__inner{display:none!important}.igx-step--simple .igx-step__indicator{min-width:1.5rem;min-height:1.5rem}.igx-step--horizontal:before{min-width:2.25rem;height:.0625rem;top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:before,.igx-step--horizontal .igx-step__header:after{height:.0625rem;width:calc(50% - 1.25rem);top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:hover:before,.igx-step--horizontal .igx-step__header:hover:after,.igx-step--horizontal .igx-step__header:focus:before,.igx-step--horizontal .igx-step__header:focus:after{z-index:-1}.igx-step--horizontal.igx-step--simple:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--simple .igx-step__header{padding:.5rem}.igx-step--horizontal.igx-step--top:before{border-top:.0625rem var(--step-separator-style) var(--step-separator-color);top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--top .igx-step__header:before,.igx-step--horizontal.igx-step--top .igx-step__header:after{top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--start:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--end:before{top:calc(50% - .03125rem)}.igx-step__content-wrapper{margin-inline-start:1.25rem;padding-inline-start:1.25rem;min-height:1.5rem}.igx-step__content-wrapper:before{inset-inline-start:-.03125rem;top:0rem;bottom:0rem;width:.0625rem;border-inline-start:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--completed .igx-step__content-wrapper:before{border-inline-start-style:var(--complete-step-separator-style);border-inline-start-color:var(--complete-step-separator-color)}.igx-step:last-of-type .igx-step__content-wrapper{min-height:0}.igx-step__indicator{--ig-icon-size: 1.125rem;height:1.5rem;width:1.5rem;min-width:1.5rem}.igx-step__indicator>igx-icon{color:inherit}.igx-step__indicator>igx-icon,.igx-step__indicator>igx-avatar,.igx-step__indicator>igx-circular-bar{max-height:1.5rem;max-width:1.5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-step .igx-ripple__inner{display:none!important}.igx-step--simple .igx-step__indicator{min-width:1.5rem;min-height:1.5rem}.igx-step--horizontal:before{min-width:2.5rem;height:.0625rem;top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal .igx-step__header:before,.igx-step--horizontal .igx-step__header:after{height:.0625rem;width:calc(50% - 1.25rem);top:1.21875rem;border-top:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--horizontal.igx-step--simple:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--simple .igx-step__header{padding:.5rem}.igx-step--horizontal.igx-step--top:before{border-top:.0625rem var(--step-separator-style) var(--step-separator-color);top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--top .igx-step__header:before,.igx-step--horizontal.igx-step--top .igx-step__header:after{top:calc(100% - 1.28125rem)}.igx-step--horizontal.igx-step--start:before{top:calc(50% - .03125rem)}.igx-step--horizontal.igx-step--end:before{top:calc(50% - .03125rem)}.igx-step__content-wrapper{margin-inline-start:1.25rem;padding-inline-start:1.25rem;min-height:1.5rem}.igx-step__content-wrapper:before{inset-inline-start:-.03125rem;top:0rem;bottom:0rem;width:.0625rem;border-inline-start:.0625rem var(--step-separator-style) var(--step-separator-color)}.igx-step--completed .igx-step__content-wrapper:before{border-inline-start-style:var(--complete-step-separator-style);border-inline-start-color:var(--complete-step-separator-color)}.igx-step:last-of-type .igx-step__content-wrapper{min-height:0}.igx-step [aria-selected=true] .igx-step__content-wrapper{padding-block:1rem;padding-inline-end:1rem}.igx-step [aria-selected=false] .igx-step__content-wrapper{padding-block:0}.igx-step__indicator{--ig-icon-size: .875rem;height:1.5rem;width:1.5rem;min-width:1.5rem}.igx-step__indicator>igx-icon,.igx-step__indicator>igx-avatar,.igx-step__indicator>igx-circular-bar{max-height:1.5rem;max-width:1.5rem}}}\n"] }]
         }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -1388,13 +1391,13 @@ class IgxStepperComponent extends IgxCarouselComponentBase {
             this.activateStep(nextStep);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: IgxStepperComponent, isStandalone: true, selector: "igx-stepper", inputs: { verticalAnimationType: "verticalAnimationType", horizontalAnimationType: "horizontalAnimationType", animationDuration: "animationDuration", linear: ["linear", "linear", booleanAttribute], orientation: "orientation", stepType: "stepType", contentTop: ["contentTop", "contentTop", booleanAttribute], titlePosition: "titlePosition" }, outputs: { activeStepChanging: "activeStepChanging", activeStepChanged: "activeStepChanged" }, host: { properties: { "attr.aria-orientation": "this.orientation", "class.igx-stepper": "this.cssClass", "attr.role": "this.role", "class.igx-stepper--horizontal": "this.directionClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxStepperComponent, isStandalone: true, selector: "igx-stepper", inputs: { verticalAnimationType: "verticalAnimationType", horizontalAnimationType: "horizontalAnimationType", animationDuration: "animationDuration", linear: ["linear", "linear", booleanAttribute], orientation: "orientation", stepType: "stepType", contentTop: ["contentTop", "contentTop", booleanAttribute], titlePosition: "titlePosition" }, outputs: { activeStepChanging: "activeStepChanging", activeStepChanged: "activeStepChanged" }, host: { properties: { "attr.aria-orientation": "this.orientation", "class.igx-stepper": "this.cssClass", "attr.role": "this.role", "class.igx-stepper--horizontal": "this.directionClass" } }, providers: [
             IgxStepperService,
             { provide: IGX_STEPPER_COMPONENT, useExisting: IgxStepperComponent },
         ], queries: [{ propertyName: "invalidIndicatorTemplate", first: true, predicate: IgxStepInvalidIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "completedIndicatorTemplate", first: true, predicate: IgxStepCompletedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "activeIndicatorTemplate", first: true, predicate: IgxStepActiveIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "_steps", predicate: IgxStepComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!contentTop || orientation !== 'horizontal') {\n    <div class=\"igx-stepper__header\">\n        <ng-template *ngTemplateOutlet=\"stepTemplate\"></ng-template>\n    </div>\n}\n\n@if (orientation === 'horizontal') {\n    <div class=\"igx-stepper__body\">\n        @for (step of steps; track step) {\n            <ng-container *ngTemplateOutlet=\"step.contentTemplate\"></ng-container>\n        }\n    </div>\n}\n\n@if (contentTop && orientation === 'horizontal') {\n    <div class=\"igx-stepper__header\">\n        <ng-template *ngTemplateOutlet=\"stepTemplate\"></ng-template>\n    </div>\n}\n\n<ng-template #stepTemplate>\n    <ng-content select=\"igx-step\"></ng-content>\n</ng-template>\n", styles: ["@layer ig.base{.igx-stepper{display:flex;flex-direction:column;width:100%;overflow:hidden}.igx-stepper__header{display:flex;white-space:nowrap;flex-direction:column;width:100%;flex:none}.igx-stepper__body{display:flex;color:var(--content-foreground);position:relative;flex-direction:column;flex:1 1 auto;overflow:hidden}.igx-stepper--horizontal .igx-stepper__header{flex-direction:row}.igx-stepper--horizontal .igx-stepper__body-content{display:flex;position:absolute;inset:0;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;z-index:-1;padding:1rem;font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin-top:0;margin-bottom:0}.igx-stepper--horizontal .igx-stepper__body-content--active{z-index:1;position:relative}.igx-stepper--horizontal .igx-stepper__step-content{flex-grow:1}.igx-stepper--horizontal .igx-stepper__step-content:focus{outline:none}.igx-stepper--horizontal .igx-stepper__step-content:before{display:none}.igx-stepper--horizontal .igx-stepper__step-content-wrapper{text-align:center}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-stepper', encapsulation: ViewEncapsulation.None, providers: [
                         IgxStepperService,
@@ -1466,11 +1469,11 @@ const IGX_STEPPER_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxStepperModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxStepperModule, imports: [IgxStepComponent, IgxStepperComponent, IgxStepTitleDirective, IgxStepSubtitleDirective, IgxStepIndicatorDirective, IgxStepContentDirective, IgxStepActiveIndicatorDirective, IgxStepCompletedIndicatorDirective, IgxStepInvalidIndicatorDirective], exports: [IgxStepComponent, IgxStepperComponent, IgxStepTitleDirective, IgxStepSubtitleDirective, IgxStepIndicatorDirective, IgxStepContentDirective, IgxStepActiveIndicatorDirective, IgxStepCompletedIndicatorDirective, IgxStepInvalidIndicatorDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepperModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxStepperModule, imports: [IgxStepComponent, IgxStepperComponent, IgxStepTitleDirective, IgxStepSubtitleDirective, IgxStepIndicatorDirective, IgxStepContentDirective, IgxStepActiveIndicatorDirective, IgxStepCompletedIndicatorDirective, IgxStepInvalidIndicatorDirective], exports: [IgxStepComponent, IgxStepperComponent, IgxStepTitleDirective, IgxStepSubtitleDirective, IgxStepIndicatorDirective, IgxStepContentDirective, IgxStepActiveIndicatorDirective, IgxStepCompletedIndicatorDirective, IgxStepInvalidIndicatorDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepperModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxStepperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxStepperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [