igniteui-angular 21.2.0-rc.0 → 21.2.0-rc.2

package/fesm2022/igniteui-angular-splitter.mjs

@@ -215,10 +215,10 @@ class IgxSplitterPaneComponent {
         }
         return siblings;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxSplitterPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.6", type: IgxSplitterPaneComponent, isStandalone: true, selector: "igx-splitter-pane", inputs: { minSize: "minSize", maxSize: "maxSize", resizable: ["resizable", "resizable", booleanAttribute], size: "size", collapsed: ["collapsed", "collapsed", booleanAttribute] }, outputs: { collapsedChange: "collapsedChange" }, host: { properties: { "style.display": "this.display", "style.order": "this.order", "style.overflow": "this.overflow", "style.min-width": "this.minWidth", "style.max-width": "this.maxWidth", "style.min-height": "this.minHeight", "style.max-height": "this.maxHeight", "style.flex": "this.flex" } }, ngImport: i0, template: "<ng-content></ng-content>" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxSplitterPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: IgxSplitterPaneComponent, isStandalone: true, selector: "igx-splitter-pane", inputs: { minSize: "minSize", maxSize: "maxSize", resizable: ["resizable", "resizable", booleanAttribute], size: "size", collapsed: ["collapsed", "collapsed", booleanAttribute] }, outputs: { collapsedChange: "collapsedChange" }, host: { properties: { "style.display": "this.display", "style.order": "this.order", "style.overflow": "this.overflow", "style.min-width": "this.minWidth", "style.max-width": "this.maxWidth", "style.min-height": "this.minHeight", "style.max-height": "this.maxHeight", "style.flex": "this.flex" } }, ngImport: i0, template: "<ng-content></ng-content>" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxSplitterPaneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxSplitterPaneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-splitter-pane', standalone: true, template: "<ng-content></ng-content>" }]
         }], propDecorators: { display: [{
@@ -542,10 +542,10 @@ class IgxSplitterComponent {
         }
         return [this.initialPaneSize - delta, this.initialSiblingSize + delta];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: IgxSplitterComponent, isStandalone: true, selector: "igx-splitter", inputs: { type: "type", nonCollapsible: ["nonCollapsible", "nonCollapsible", booleanAttribute] }, outputs: { resizeStart: "resizeStart", resizing: "resizing", resizeEnd: "resizeEnd" }, host: { properties: { "class.igx-splitter": "this.cssClass", "style.overflow": "this.overflow", "style.display": "this.display", "attr.aria-orientation": "this.orientation", "style.flex-direction": "this.direction" } }, queries: [{ propertyName: "panes", predicate: IgxSplitterPaneComponent, read: IgxSplitterPaneComponent }], ngImport: i0, template: "<ng-content select=\"igx-splitter-pane\"></ng-content>\n@for (pane of panes; track pane; let last = $last; let index = $index) {\n    @if (!last) {\n        <igx-splitter-bar [order]=\"pane.order + 1\" role=\"separator\"\n            [type]=\"type\"\n            [pane]=\"pane\"\n            [siblings]=\"getPaneSiblingsByOrder(pane.order + 1, index)\"\n            (moveStart)=\"onMoveStart($event)\"\n            (moving)=\"onMoving($event)\"\n            (movingEnd)=\"onMoveEnd($event)\"\n            [nonCollapsible]=\"nonCollapsible\">\n        </igx-splitter-bar>\n    }\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => IgxSplitBarComponent), selector: "igx-splitter-bar", inputs: ["nonCollapsible", "type", "order", "pane", "siblings"], outputs: ["moveStart", "moving", "movingEnd"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: IgxSplitterComponent, isStandalone: true, selector: "igx-splitter", inputs: { type: "type", nonCollapsible: ["nonCollapsible", "nonCollapsible", booleanAttribute] }, outputs: { resizeStart: "resizeStart", resizing: "resizing", resizeEnd: "resizeEnd" }, host: { properties: { "class.igx-splitter": "this.cssClass", "style.overflow": "this.overflow", "style.display": "this.display", "attr.aria-orientation": "this.orientation", "style.flex-direction": "this.direction" } }, queries: [{ propertyName: "panes", predicate: IgxSplitterPaneComponent, read: IgxSplitterPaneComponent }], ngImport: i0, template: "<ng-content select=\"igx-splitter-pane\"></ng-content>\n@for (pane of panes; track pane; let last = $last; let index = $index) {\n    @if (!last) {\n        <igx-splitter-bar [order]=\"pane.order + 1\" role=\"separator\"\n            [type]=\"type\"\n            [pane]=\"pane\"\n            [siblings]=\"getPaneSiblingsByOrder(pane.order + 1, index)\"\n            (moveStart)=\"onMoveStart($event)\"\n            (moving)=\"onMoving($event)\"\n            (movingEnd)=\"onMoveEnd($event)\"\n            [nonCollapsible]=\"nonCollapsible\">\n        </igx-splitter-bar>\n    }\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => IgxSplitBarComponent), selector: "igx-splitter-bar", inputs: ["nonCollapsible", "type", "order", "pane", "siblings"], outputs: ["moveStart", "moving", "movingEnd"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxSplitterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxSplitterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-splitter', imports: [forwardRef(() => IgxSplitBarComponent)], template: "<ng-content select=\"igx-splitter-pane\"></ng-content>\n@for (pane of panes; track pane; let last = $last; let index = $index) {\n    @if (!last) {\n        <igx-splitter-bar [order]=\"pane.order + 1\" role=\"separator\"\n            [type]=\"type\"\n            [pane]=\"pane\"\n            [siblings]=\"getPaneSiblingsByOrder(pane.order + 1, index)\"\n            (moveStart)=\"onMoveStart($event)\"\n            (moving)=\"onMoving($event)\"\n            (movingEnd)=\"onMoveEnd($event)\"\n            [nonCollapsible]=\"nonCollapsible\">\n        </igx-splitter-bar>\n    }\n}\n" }]
         }], propDecorators: { panes: [{
@@ -769,10 +769,10 @@ class IgxSplitBarComponent {
         }
         target.toggle();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxSplitBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.6", type: IgxSplitBarComponent, isStandalone: true, selector: "igx-splitter-bar", inputs: { nonCollapsible: ["nonCollapsible", "nonCollapsible", booleanAttribute], type: "type", order: "order", pane: "pane", siblings: "siblings" }, outputs: { moveStart: "moveStart", moving: "moving", movingEnd: "movingEnd" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "class.igx-splitter-bar-host": "this.cssClass", "style.order": "this.order", "attr.tabindex": "this.tabindex", "attr.aria-orientation": "this.orientation" } }, ngImport: i0, template: "<div class=\"igx-splitter-bar\"\n    [class.igx-splitter-bar--vertical]=\"type === 0\"\n    [style.cursor]=\"cursor\"\n    igxDrag\n    [ghost]=\"false\"\n    [dragDirection]=\"dragDir\"\n    (dragStart)=\"onDragStart($event)\"\n    (dragMove)=\"onDragMove($event)\"\n    (dragEnd)=\"onDragEnd($event)\"\n    [class.igx-splitter-bar--collapsible]=\"!nonCollapsible\"\n>\n    <div class=\"igx-splitter-bar__expander--start\" igxDragIgnore (click)=\"onCollapsing(false)\" [hidden]=\"prevButtonHidden\"></div>\n    <div class=\"igx-splitter-bar__handle\"></div>\n    <div class=\"igx-splitter-bar__expander--end\" igxDragIgnore (click)=\"onCollapsing(true)\" [hidden]=\"nextButtonHidden\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: IgxDragIgnoreDirective, selector: "[igxDragIgnore]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxSplitBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: IgxSplitBarComponent, isStandalone: true, selector: "igx-splitter-bar", inputs: { nonCollapsible: ["nonCollapsible", "nonCollapsible", booleanAttribute], type: "type", order: "order", pane: "pane", siblings: "siblings" }, outputs: { moveStart: "moveStart", moving: "moving", movingEnd: "movingEnd" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "class.igx-splitter-bar-host": "this.cssClass", "style.order": "this.order", "attr.tabindex": "this.tabindex", "attr.aria-orientation": "this.orientation" } }, ngImport: i0, template: "<div class=\"igx-splitter-bar\"\n    [class.igx-splitter-bar--vertical]=\"type === 0\"\n    [style.cursor]=\"cursor\"\n    igxDrag\n    [ghost]=\"false\"\n    [dragDirection]=\"dragDir\"\n    (dragStart)=\"onDragStart($event)\"\n    (dragMove)=\"onDragMove($event)\"\n    (dragEnd)=\"onDragEnd($event)\"\n    [class.igx-splitter-bar--collapsible]=\"!nonCollapsible\"\n>\n    <div class=\"igx-splitter-bar__expander--start\" igxDragIgnore (click)=\"onCollapsing(false)\" [hidden]=\"prevButtonHidden\"></div>\n    <div class=\"igx-splitter-bar__handle\"></div>\n    <div class=\"igx-splitter-bar__expander--end\" igxDragIgnore (click)=\"onCollapsing(true)\" [hidden]=\"nextButtonHidden\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: IgxDragIgnoreDirective, selector: "[igxDragIgnore]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxSplitBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxSplitBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-splitter-bar', imports: [IgxDragDirective, IgxDragIgnoreDirective], template: "<div class=\"igx-splitter-bar\"\n    [class.igx-splitter-bar--vertical]=\"type === 0\"\n    [style.cursor]=\"cursor\"\n    igxDrag\n    [ghost]=\"false\"\n    [dragDirection]=\"dragDir\"\n    (dragStart)=\"onDragStart($event)\"\n    (dragMove)=\"onDragMove($event)\"\n    (dragEnd)=\"onDragEnd($event)\"\n    [class.igx-splitter-bar--collapsible]=\"!nonCollapsible\"\n>\n    <div class=\"igx-splitter-bar__expander--start\" igxDragIgnore (click)=\"onCollapsing(false)\" [hidden]=\"prevButtonHidden\"></div>\n    <div class=\"igx-splitter-bar__handle\"></div>\n    <div class=\"igx-splitter-bar__expander--end\" igxDragIgnore (click)=\"onCollapsing(true)\" [hidden]=\"nextButtonHidden\"></div>\n</div>\n" }]
         }], propDecorators: { cssClass: [{
@@ -822,11 +822,11 @@ const IGX_SPLITTER_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxSplitterModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxSplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: IgxSplitterModule, imports: [IgxSplitterComponent, IgxSplitterPaneComponent, IgxSplitBarComponent], exports: [IgxSplitterComponent, IgxSplitterPaneComponent, IgxSplitBarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxSplitterModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxSplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: IgxSplitterModule, imports: [IgxSplitterComponent, IgxSplitterPaneComponent, IgxSplitBarComponent], exports: [IgxSplitterComponent, IgxSplitterPaneComponent, IgxSplitBarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxSplitterModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxSplitterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxSplitterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/igniteui-angular-stepper.mjs

@@ -5,7 +5,7 @@ import { CarouselAnimationType, CarouselAnimationDirection, IgxCarouselComponent
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { IgxRippleDirective } from 'igniteui-angular/directives';
 import { ToggleAnimationPlayer } from 'igniteui-angular/expansion-panel';
-import { PlatformUtil, ɵIgxDirectionality as _IgxDirectionality } from 'igniteui-angular/core';
+import { PlatformUtil, isLeftToRight } from 'igniteui-angular/core';
 import { useAnimation } from '@angular/animations';
 import { Subject } from 'rxjs';
 import { fadeIn, growVerIn, growVerOut } from 'igniteui-angular/animations';
@@ -172,10 +172,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: "21.2.6", ngImport: i0, type: IgxStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxStepperService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepperService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxStepperService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepperService, decorators: [{
             type: Injectable
         }] });
 
@@ -195,10 +195,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
  * </igx-stepper>
  */
 class IgxStepActiveIndicatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxStepActiveIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxStepActiveIndicatorDirective, isStandalone: true, selector: "[igxStepActiveIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepActiveIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxStepActiveIndicatorDirective, isStandalone: true, selector: "[igxStepActiveIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxStepActiveIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepActiveIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxStepActiveIndicator]',
@@ -221,10 +221,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
  * </igx-stepper>
  */
 class IgxStepCompletedIndicatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxStepCompletedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxStepCompletedIndicatorDirective, isStandalone: true, selector: "[igxStepCompletedIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepCompletedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxStepCompletedIndicatorDirective, isStandalone: true, selector: "[igxStepCompletedIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxStepCompletedIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepCompletedIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxStepCompletedIndicator]',
@@ -247,10 +247,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
  * </igx-stepper>
  */
 class IgxStepInvalidIndicatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxStepInvalidIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxStepInvalidIndicatorDirective, isStandalone: true, selector: "[igxStepInvalidIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepInvalidIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxStepInvalidIndicatorDirective, isStandalone: true, selector: "[igxStepInvalidIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxStepInvalidIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepInvalidIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxStepInvalidIndicator]',
@@ -273,10 +273,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
  * </igx-stepper>
  */
 class IgxStepIndicatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxStepIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxStepIndicatorDirective, isStandalone: true, selector: "[igxStepIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxStepIndicatorDirective, isStandalone: true, selector: "[igxStepIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxStepIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxStepIndicator]',
@@ -302,10 +302,10 @@ class IgxStepTitleDirective {
     constructor() {
         this.defaultClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxStepTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxStepTitleDirective, isStandalone: true, selector: "[igxStepTitle]", host: { properties: { "class.igx-stepper__step-title": "this.defaultClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxStepTitleDirective, isStandalone: true, selector: "[igxStepTitle]", host: { properties: { "class.igx-stepper__step-title": "this.defaultClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxStepTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxStepTitle]',
@@ -334,10 +334,10 @@ class IgxStepSubtitleDirective {
     constructor() {
         this.defaultClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxStepSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxStepSubtitleDirective, isStandalone: true, selector: "[igxStepSubtitle]", host: { properties: { "class.igx-stepper__step-subtitle": "this.defaultClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxStepSubtitleDirective, isStandalone: true, selector: "[igxStepSubtitle]", host: { properties: { "class.igx-stepper__step-subtitle": "this.defaultClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxStepSubtitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepSubtitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxStepSubtitle]',
@@ -387,10 +387,10 @@ class IgxStepContentDirective {
     set tabIndex(val) {
         this._tabIndex = val;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxStepContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", 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: "21.2.9", ngImport: i0, type: IgxStepContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", 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: "21.2.6", ngImport: i0, type: IgxStepContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxStepContent]',
@@ -446,7 +446,6 @@ class IgxStepComponent extends ToggleAnimationPlayer {
         this.platform = inject(PlatformUtil);
         this.stepperService = inject(IgxStepperService);
         this.element = inject(ElementRef);
-        this.dir = inject(_IgxDirectionality);
         /**
          * Get/Set the `id` of the step component.
          * Default value is `"igx-step-0"`;
@@ -749,6 +748,7 @@ class IgxStepComponent extends ToggleAnimationPlayer {
     }
     /** @hidden @internal */
     handleNavigation(key) {
+        const rtl = !isLeftToRight(this.nativeElement);
         switch (key) {
             case this.platform.KEYMAP.HOME:
                 this.stepper.steps.filter(s => s.isAccessible)[0]?.nativeElement.focus();
@@ -760,7 +760,7 @@ class IgxStepComponent extends ToggleAnimationPlayer {
                 this.previousStep?.nativeElement.focus();
                 break;
             case this.platform.KEYMAP.ARROW_LEFT:
-                if (this.dir.rtl && this.stepper.orientation === IgxStepperOrientation.Horizontal) {
+                if (rtl && this.stepper.orientation === IgxStepperOrientation.Horizontal) {
                     this.nextStep?.nativeElement.focus();
                 }
                 else {
@@ -771,7 +771,7 @@ class IgxStepComponent extends ToggleAnimationPlayer {
                 this.nextStep?.nativeElement.focus();
                 break;
             case this.platform.KEYMAP.ARROW_RIGHT:
-                if (this.dir.rtl && this.stepper.orientation === IgxStepperOrientation.Horizontal) {
+                if (rtl && this.stepper.orientation === IgxStepperOrientation.Horizontal) {
                     this.previousStep?.nativeElement.focus();
                 }
                 else {
@@ -847,12 +847,12 @@ class IgxStepComponent extends ToggleAnimationPlayer {
             this.stepperService.activeStep.closeAnimationPlayer?.finish();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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-stepper__step--completed": "this.completed", "attr.aria-selected": "this.active", "attr.tabindex": "this.tabIndex", "attr.role": "this.role", "attr.aria-controls": "this.contentId", "class.igx-stepper__step": "this.cssClass", "class.igx-stepper__step--disabled": "this.generalDisabled", "class": "this.titlePositionTop" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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-stepper__step--completed": "this.completed", "attr.aria-selected": "this.active", "attr.tabindex": "this.tabIndex", "attr.role": "this.role", "attr.aria-controls": "this.contentId", "class.igx-stepper__step": "this.cssClass", "class.igx-stepper__step--disabled": "this.generalDisabled", "class": "this.titlePositionTop" } }, 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-stepper__step-header\" igxRipple [ngClass]=\"stepHeaderClasses\" (keydown)=\"handleKeydown($event)\"\n    (click)=\"onPointerDown($event)\">\n\n    @if (isIndicatorVisible) {\n        <div class=\"igx-stepper__step-indicator\">\n            <ng-container *ngTemplateOutlet=\"indicatorTemplate ? indicatorTemplate : defaultIndicator\"></ng-container>\n        </div>\n    }\n\n    <div class=\"igx-stepper__step-title-wrapper\">\n        <ng-container *ngTemplateOutlet=\"defaultTitle\"></ng-container>\n    </div>\n</div>\n\n@if (!isHorizontal) {\n    <div class=\"igx-stepper__step-content-wrapper\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </div>\n}\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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxStepComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-step', providers: [
                         { provide: IGX_STEP_COMPONENT, useExisting: IgxStepComponent }
@@ -1353,13 +1353,13 @@ class IgxStepperComponent extends IgxCarouselComponentBase {
             this.activateStep(nextStep);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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: "21.2.9", ngImport: i0, type: IgxStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-stepper', providers: [
                         IgxStepperService,
@@ -1431,11 +1431,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: "21.2.6", ngImport: i0, type: IgxStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.6", 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: "21.2.6", ngImport: i0, type: IgxStepperModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", 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: "21.2.9", ngImport: i0, type: IgxStepperModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxStepperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxStepperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [