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

package/fesm2022/igniteui-angular-card.mjs

@@ -35,10 +35,10 @@ class IgxCardMediaDirective {
          */
         this.role = 'img';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxCardMediaDirective, isStandalone: true, selector: "igx-card-media", inputs: { width: "width", height: "height", role: "role" }, host: { properties: { "class.igx-card__media": "this.cssClass", "style.width": "this.width", "style.min-width": "this.width", "style.height": "this.height", "attr.role": "this.role" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxCardMediaDirective, isStandalone: true, selector: "igx-card-media", inputs: { width: "width", height: "height", role: "role" }, host: { properties: { "class.igx-card__media": "this.cssClass", "style.width": "this.width", "style.min-width": "this.width", "style.height": "this.height", "attr.role": "this.role" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardMediaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardMediaDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -85,10 +85,10 @@ class IgxCardHeaderComponent {
          */
         this.vertical = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.6", type: IgxCardHeaderComponent, isStandalone: true, selector: "igx-card-header", inputs: { vertical: ["vertical", "vertical", booleanAttribute] }, host: { properties: { "class.igx-card-header": "this.cssClass", "class.igx-card-header--vertical": "this.vertical" } }, ngImport: i0, template: "<div class=\"igx-card-header__thumbnail\">\n    <ng-content select=\"igx-avatar, igx-card-media, [igxCardThumbnail]\"></ng-content>\n</div>\n\n<div class=\"igx-card-header__titles\">\n    <ng-content select=\"\n        [igxCardHeaderTitle],\n        [igxCardHeaderSubtitle],\n        .igx-card-header__title,\n        .igx-card-header__title--small,\n        .igx-card-header__subtitle\">\n    </ng-content>\n</div>\n\n<ng-content></ng-content>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: IgxCardHeaderComponent, isStandalone: true, selector: "igx-card-header", inputs: { vertical: ["vertical", "vertical", booleanAttribute] }, host: { properties: { "class.igx-card-header": "this.cssClass", "class.igx-card-header--vertical": "this.vertical" } }, ngImport: i0, template: "<div class=\"igx-card-header__thumbnail\">\n    <ng-content select=\"igx-avatar, igx-card-media, [igxCardThumbnail]\"></ng-content>\n</div>\n\n<div class=\"igx-card-header__titles\">\n    <ng-content select=\"\n        [igxCardHeaderTitle],\n        [igxCardHeaderSubtitle],\n        .igx-card-header__title,\n        .igx-card-header__title--small,\n        .igx-card-header__subtitle\">\n    </ng-content>\n</div>\n\n<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-card-header', standalone: true, template: "<div class=\"igx-card-header__thumbnail\">\n    <ng-content select=\"igx-avatar, igx-card-media, [igxCardThumbnail]\"></ng-content>\n</div>\n\n<div class=\"igx-card-header__titles\">\n    <ng-content select=\"\n        [igxCardHeaderTitle],\n        [igxCardHeaderSubtitle],\n        .igx-card-header__title,\n        .igx-card-header__title--small,\n        .igx-card-header__subtitle\">\n    </ng-content>\n</div>\n\n<ng-content></ng-content>\n" }]
         }], propDecorators: { cssClass: [{
@@ -106,10 +106,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
  * Use it to wrap anything you want to be used as a thumbnail.
  */
 class IgxCardThumbnailDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardThumbnailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxCardThumbnailDirective, isStandalone: true, selector: "[igxCardThumbnail]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardThumbnailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxCardThumbnailDirective, isStandalone: true, selector: "[igxCardThumbnail]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardThumbnailDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardThumbnailDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCardThumbnail]',
@@ -125,10 +125,10 @@ class IgxCardHeaderTitleDirective {
         /** @hidden @internal */
         this.cssClass = 'igx-card__header__title';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardHeaderTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxCardHeaderTitleDirective, isStandalone: true, selector: "[igxCardHeaderTitle]", host: { properties: { "class.igx-card-header__title": "this.cssClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardHeaderTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxCardHeaderTitleDirective, isStandalone: true, selector: "[igxCardHeaderTitle]", host: { properties: { "class.igx-card-header__title": "this.cssClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardHeaderTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardHeaderTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCardHeaderTitle]',
@@ -147,10 +147,10 @@ class IgxCardHeaderSubtitleDirective {
         /** @hidden @internal */
         this.cssClass = 'igx-card-header__subtitle';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardHeaderSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxCardHeaderSubtitleDirective, isStandalone: true, selector: "[igxCardHeaderSubtitle]", host: { properties: { "class.igx-card-header__subtitle": "this.cssClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardHeaderSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxCardHeaderSubtitleDirective, isStandalone: true, selector: "[igxCardHeaderSubtitle]", host: { properties: { "class.igx-card-header__subtitle": "this.cssClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardHeaderSubtitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardHeaderSubtitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCardHeaderSubtitle]',
@@ -168,10 +168,10 @@ class IgxCardContentDirective {
         /** @hidden @internal */
         this.cssClass = 'igx-card-content';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxCardContentDirective, isStandalone: true, selector: "igx-card-content", host: { properties: { "class.igx-card-content": "this.cssClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxCardContentDirective, isStandalone: true, selector: "igx-card-content", host: { properties: { "class.igx-card-content": "this.cssClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardContentDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -198,10 +198,10 @@ class IgxCardFooterDirective {
          */
         this.role = 'footer';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxCardFooterDirective, isStandalone: true, selector: "igx-card-footer", inputs: { role: "role" }, host: { properties: { "attr.role": "this.role" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxCardFooterDirective, isStandalone: true, selector: "igx-card-footer", inputs: { role: "role" }, host: { properties: { "attr.role": "this.role" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardFooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardFooterDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -300,10 +300,10 @@ class IgxCardComponent {
          */
         this.horizontal = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.6", type: IgxCardComponent, isStandalone: true, selector: "igx-card", inputs: { id: "id", role: "role", elevated: ["elevated", "elevated", booleanAttribute], horizontal: ["horizontal", "horizontal", booleanAttribute] }, host: { properties: { "attr.id": "this.id", "class.igx-card": "this.cssClass", "attr.role": "this.role", "class.igx-card--elevated": "this.elevated", "class.igx-card--horizontal": "this.horizontal" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: IgxCardComponent, isStandalone: true, selector: "igx-card", inputs: { id: "id", role: "role", elevated: ["elevated", "elevated", booleanAttribute], horizontal: ["horizontal", "horizontal", booleanAttribute] }, host: { properties: { "attr.id": "this.id", "class.igx-card": "this.cssClass", "attr.role": "this.role", "class.igx-card--elevated": "this.elevated", "class.igx-card--horizontal": "this.horizontal" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-card', standalone: true, template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { id: [{
@@ -388,10 +388,10 @@ class IgxCardActionsComponent {
             this.vertical = true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.6", type: IgxCardActionsComponent, isStandalone: true, selector: "igx-card-actions", inputs: { layout: "layout", vertical: ["vertical", "vertical", booleanAttribute] }, host: { properties: { "class.igx-card-actions": "this.layout", "class.igx-card-actions--vertical": "this.vertical", "class.igx-card-actions--justify": "this.isJustifyLayout" } }, usesOnChanges: true, ngImport: i0, template: "<div #buttons class=\"igx-card-actions__start\">\n    <ng-content select=\"[igxStart], [igxButton]:not([igxEnd])\"></ng-content>\n</div>\n\n<ng-content></ng-content>\n\n<div class=\"igx-card-actions__end\">\n    <ng-content select=\"[igxEnd], [igxIconButton]:not([igxStart]), igx-icon:not([igxStart])\"></ng-content>\n</div>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: IgxCardActionsComponent, isStandalone: true, selector: "igx-card-actions", inputs: { layout: "layout", vertical: ["vertical", "vertical", booleanAttribute] }, host: { properties: { "class.igx-card-actions": "this.layout", "class.igx-card-actions--vertical": "this.vertical", "class.igx-card-actions--justify": "this.isJustifyLayout" } }, usesOnChanges: true, ngImport: i0, template: "<div #buttons class=\"igx-card-actions__start\">\n    <ng-content select=\"[igxStart], [igxButton]:not([igxEnd])\"></ng-content>\n</div>\n\n<ng-content></ng-content>\n\n<div class=\"igx-card-actions__end\">\n    <ng-content select=\"[igxEnd], [igxIconButton]:not([igxStart]), igx-icon:not([igxStart])\"></ng-content>\n</div>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-card-actions', standalone: true, template: "<div #buttons class=\"igx-card-actions__start\">\n    <ng-content select=\"[igxStart], [igxButton]:not([igxEnd])\"></ng-content>\n</div>\n\n<ng-content></ng-content>\n\n<div class=\"igx-card-actions__end\">\n    <ng-content select=\"[igxEnd], [igxIconButton]:not([igxStart]), igx-icon:not([igxStart])\"></ng-content>\n</div>\n" }]
         }], propDecorators: { layout: [{
@@ -428,11 +428,11 @@ const IGX_CARD_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxCardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: IgxCardModule, imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardMediaDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxCardFooterDirective, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardThumbnailDirective], exports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardMediaDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxCardFooterDirective, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardThumbnailDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: IgxCardModule, imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardMediaDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxCardFooterDirective, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardThumbnailDirective], exports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardMediaDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxCardFooterDirective, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardThumbnailDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCardModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/igniteui-angular-carousel.mjs

@@ -1,10 +1,10 @@
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, EventEmitter, Directive, ElementRef, booleanAttribute, Output, HostBinding, Input, Component, Injectable, IterableDiffers, DOCUMENT, TemplateRef, HostListener, ViewChildren, ViewChild, ContentChildren, ContentChild, NgModule } from '@angular/core';
+import { inject, ChangeDetectorRef, EventEmitter, Directive, ElementRef, booleanAttribute, Output, HostBinding, Input, Component, Injectable, IterableDiffers, TemplateRef, HostListener, ViewChildren, ViewChild, ContentChildren, ContentChild, NgModule } from '@angular/core';
 import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
 import { Subject, merge } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { IgxAngularAnimationService, HammerGesturesManager, PlatformUtil, ɵIgxDirectionality as _IgxDirectionality, getCurrentResourceStrings, CarouselResourceStringsEN, onResourceChangeHandle, first, last } from 'igniteui-angular/core';
+import { IgxAngularAnimationService, HammerGesturesManager, PlatformUtil, getCurrentResourceStrings, CarouselResourceStringsEN, onResourceChangeHandle, isLeftToRight, first, last } from 'igniteui-angular/core';
 import { useAnimation } from '@angular/animations';
 import { fadeIn, slideInLeft } from 'igniteui-angular/animations';
 import { IgxIconComponent } from 'igniteui-angular/icon';
@@ -181,18 +181,18 @@ class IgxCarouselComponentBase {
         });
         this.leaveAnimationPlayer.play();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCarouselComponentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxCarouselComponentBase, isStandalone: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCarouselComponentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxCarouselComponentBase, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCarouselComponentBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCarouselComponentBase, decorators: [{
             type: Directive
         }] });
 
 class IgxCarouselIndicatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCarouselIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxCarouselIndicatorDirective, isStandalone: true, selector: "[igxCarouselIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCarouselIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxCarouselIndicatorDirective, isStandalone: true, selector: "[igxCarouselIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCarouselIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCarouselIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCarouselIndicator]',
@@ -200,10 +200,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                 }]
         }] });
 class IgxCarouselNextButtonDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCarouselNextButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxCarouselNextButtonDirective, isStandalone: true, selector: "[igxCarouselNextButton]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCarouselNextButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxCarouselNextButtonDirective, isStandalone: true, selector: "[igxCarouselNextButton]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCarouselNextButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCarouselNextButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCarouselNextButton]',
@@ -211,10 +211,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                 }]
         }] });
 class IgxCarouselPrevButtonDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCarouselPrevButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxCarouselPrevButtonDirective, isStandalone: true, selector: "[igxCarouselPrevButton]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCarouselPrevButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxCarouselPrevButtonDirective, isStandalone: true, selector: "[igxCarouselPrevButton]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCarouselPrevButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCarouselPrevButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxCarouselPrevButton]',
@@ -325,10 +325,10 @@ class IgxSlideComponent {
         this._destroy$.next(true);
         this._destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxSlideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.6", type: IgxSlideComponent, isStandalone: true, selector: "igx-slide", inputs: { index: "index", direction: "direction", total: "total", active: ["active", "active", booleanAttribute], previous: ["previous", "previous", booleanAttribute] }, outputs: { activeChange: "activeChange" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.id": "this.id", "attr.role": "this.tab", "attr.aria-labelledby": "this.ariaLabelledBy", "class.igx-slide": "this.cssClass", "class.igx-slide--current": "this.active", "class.igx-slide--previous": "this.previous" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxSlideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: IgxSlideComponent, isStandalone: true, selector: "igx-slide", inputs: { index: "index", direction: "direction", total: "total", active: ["active", "active", booleanAttribute], previous: ["previous", "previous", booleanAttribute] }, outputs: { activeChange: "activeChange" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.id": "this.id", "attr.role": "this.tab", "attr.aria-labelledby": "this.ariaLabelledBy", "class.igx-slide": "this.cssClass", "class.igx-slide--current": "this.active", "class.igx-slide--previous": "this.previous" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxSlideComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxSlideComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-slide', standalone: true, template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { index: [{
@@ -376,10 +376,10 @@ class CarouselHammerConfig extends HammerGestureConfig {
             pan: { direction: HammerGesturesManager.Hammer?.DIRECTION_HORIZONTAL }
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: CarouselHammerConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: CarouselHammerConfig }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CarouselHammerConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CarouselHammerConfig }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: CarouselHammerConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CarouselHammerConfig, decorators: [{
             type: Injectable
         }] });
 /**
@@ -558,8 +558,6 @@ class IgxCarouselComponent extends IgxCarouselComponentBase {
         this.element = inject(ElementRef);
         this.iterableDiffers = inject(IterableDiffers);
         this.platformUtil = inject(PlatformUtil);
-        this.dir = inject(_IgxDirectionality);
-        this.document = inject(DOCUMENT);
         /**
          * Sets the `id` of the carousel.
          * If not set, the `id` of the first carousel component will be `"igx-carousel-0"`.
@@ -949,20 +947,21 @@ class IgxCarouselComponent extends IgxCarouselComponentBase {
     handleKeydown(event) {
         const { key } = event;
         const slides = this.slides.toArray();
+        const isRTL = !isLeftToRight(this.nativeElement);
         switch (key) {
             case this.platformUtil.KEYMAP.ARROW_LEFT:
-                this.dir.rtl ? this.next() : this.prev();
+                isRTL ? this.next() : this.prev();
                 break;
             case this.platformUtil.KEYMAP.ARROW_RIGHT:
-                this.dir.rtl ? this.prev() : this.next();
+                isRTL ? this.prev() : this.next();
                 break;
             case this.platformUtil.KEYMAP.HOME:
                 event.preventDefault();
-                this.select(this.dir.rtl ? last(slides) : first(slides));
+                this.select(isRTL ? last(slides) : first(slides));
                 break;
             case this.platformUtil.KEYMAP.END:
                 event.preventDefault();
-                this.select(this.dir.rtl ? first(slides) : last(slides));
+                this.select(isRTL ? first(slides) : last(slides));
                 break;
         }
         this.indicatorsElements[this.current].nativeElement.focus();
@@ -1262,15 +1261,15 @@ class IgxCarouselComponent extends IgxCarouselComponentBase {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: IgxCarouselComponent, isStandalone: true, selector: "igx-carousel", inputs: { id: "id", loop: ["loop", "loop", booleanAttribute], pause: ["pause", "pause", booleanAttribute], navigation: ["navigation", "navigation", booleanAttribute], indicators: ["indicators", "indicators", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute], gesturesSupport: ["gesturesSupport", "gesturesSupport", booleanAttribute], maximumIndicatorsCount: "maximumIndicatorsCount", indicatorsOrientation: "indicatorsOrientation", animationType: "animationType", resourceStrings: "resourceStrings", interval: "interval" }, outputs: { slideChanged: "slideChanged", slideAdded: "slideAdded", slideRemoved: "slideRemoved", carouselPaused: "carouselPaused", carouselPlaying: "carouselPlaying" }, host: { listeners: { "tap": "onTap($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "panleft": "onPanLeft($event)", "panright": "onPanRight($event)", "panup": "onPanUp($event)", "pandown": "onPanDown($event)", "panend": "onPanEnd($event)" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.aria-roledescription": "this.roleDescription", "attr.aria-labelledby": "this.labelId", "class.igx-carousel--vertical": "this.isVertical", "class.igx-carousel": "this.cssClass", "style.touch-action": "this.touchAction" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: IgxCarouselComponent, isStandalone: true, selector: "igx-carousel", inputs: { id: "id", loop: ["loop", "loop", booleanAttribute], pause: ["pause", "pause", booleanAttribute], navigation: ["navigation", "navigation", booleanAttribute], indicators: ["indicators", "indicators", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute], gesturesSupport: ["gesturesSupport", "gesturesSupport", booleanAttribute], maximumIndicatorsCount: "maximumIndicatorsCount", indicatorsOrientation: "indicatorsOrientation", animationType: "animationType", resourceStrings: "resourceStrings", interval: "interval" }, outputs: { slideChanged: "slideChanged", slideAdded: "slideAdded", slideRemoved: "slideRemoved", carouselPaused: "carouselPaused", carouselPlaying: "carouselPlaying" }, host: { listeners: { "tap": "onTap($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "panleft": "onPanLeft($event)", "panright": "onPanRight($event)", "panup": "onPanUp($event)", "pandown": "onPanDown($event)", "panend": "onPanEnd($event)" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.aria-roledescription": "this.roleDescription", "attr.aria-labelledby": "this.labelId", "class.igx-carousel--vertical": "this.isVertical", "class.igx-carousel": "this.cssClass", "style.touch-action": "this.touchAction" } }, providers: [
             {
                 provide: HAMMER_GESTURE_CONFIG,
                 useClass: CarouselHammerConfig
             }
         ], queries: [{ propertyName: "indicatorTemplate", first: true, predicate: IgxCarouselIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "nextButtonTemplate", first: true, predicate: IgxCarouselNextButtonDirective, descendants: true, read: TemplateRef }, { propertyName: "prevButtonTemplate", first: true, predicate: IgxCarouselPrevButtonDirective, descendants: true, read: TemplateRef }, { propertyName: "slides", predicate: IgxSlideComponent }], viewQueries: [{ propertyName: "defaultIndicator", first: true, predicate: ["defaultIndicator"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultNextButton", first: true, predicate: ["defaultNextButton"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultPrevButton", first: true, predicate: ["defaultPrevButton"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_indicators", predicate: ["indicators"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultIndicator let-slide>\n    <div class=\"igx-nav-dot\"\n        [class.igx-nav-dot--active]=\"slide.active\">\n    </div>\n</ng-template>\n\n<ng-template #defaultNextButton>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"carousel_next\"\n        class=\"igx-nav-arrow\">\n    </igx-icon>\n</ng-template>\n\n<ng-template #defaultPrevButton>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"carousel_prev\"\n        class=\"igx-nav-arrow\">\n    </igx-icon>\n</ng-template>\n\n@if (navigation && slides.length) {\n    <button\n        igxButton\n        class=\"igx-carousel__arrow--prev\"\n        [attr.aria-label]=\"resourceStrings.igx_carousel_previous_slide\"\n        [disabled]=\"prevButtonDisabled\"\n        (click)=\"prev()\"\n        (keydown)=\"handleKeydownPrev($event)\">\n        <ng-container *ngTemplateOutlet=\"getPrevButtonTemplate; context: {$implicit: prevButtonDisabled};\"></ng-container>\n    </button>\n}\n\n@if (navigation && slides.length) {\n    <button\n        igxButton\n        class=\"igx-carousel__arrow--next\"\n        [attr.aria-label]=\"resourceStrings.igx_carousel_next_slide\"\n        [disabled]=\"nextButtonDisabled\"\n        (click)=\"next()\"\n        (keydown)=\"handleKeydownNext($event)\">\n        <ng-container *ngTemplateOutlet=\"getNextButtonTemplate; context: {$implicit: nextButtonDisabled};\"></ng-container>\n    </button>\n}\n\n@if (showIndicators) {\n    <div [ngClass]=\"indicatorsClass\" [attr.role]=\"'tablist'\" (keyup)=\"handleKeyUp($event)\" (focusout)=\"handleFocusOut($event)\" (click)=\"handleClick()\" (keydown)=\"handleKeydown($event)\">\n        @for (slide of slides; track slide) {\n            <div #indicators\n                class=\"igx-carousel-indicators__indicator\"\n                (click)=\"select(slide)\"\n                [id]=\"'tab-'+ slide.index + '-' + total\"\n                [attr.role]=\"'tab'\"\n                [attr.tabindex]=\"slide.active ? 0 : -1\"\n                [attr.aria-label]=\"resourceStrings.igx_carousel_slide + ' ' + (slide.index + 1) + ' ' + resourceStrings.igx_carousel_of + ' ' + this.total\"\n                [attr.aria-controls]=\"'panel-' + slide.index\"\n                [attr.aria-selected]=\"slide.active\">\n                <ng-container *ngTemplateOutlet=\"getIndicatorTemplate; context: {$implicit: slide};\"></ng-container>\n            </div>\n        }\n    </div>\n}\n\n@if (showIndicatorsLabel) {\n    <div [ngClass]=\"indicatorsClass\" class=\"igx-carousel-label-indicator\">\n        <span [id]=\"labelId\" class=\"igx-carousel__label\">{{getCarouselLabel}}</span>\n    </div>\n}\n\n<div class=\"igx-carousel__inner\" [attr.aria-live]=\"!interval || stoppedByInteraction ? 'polite' : 'off'\">\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;outline-style:none}\n"], dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCarouselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCarouselComponent, decorators: [{
             type: Component,
             args: [{ providers: [
                         {
@@ -1403,11 +1402,11 @@ const IGX_CAROUSEL_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxCarouselModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: IgxCarouselModule, imports: [IgxCarouselComponent, IgxSlideComponent, IgxCarouselIndicatorDirective, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective], exports: [IgxCarouselComponent, IgxSlideComponent, IgxCarouselIndicatorDirective, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCarouselModule, imports: [IgxCarouselComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: IgxCarouselModule, imports: [IgxCarouselComponent, IgxSlideComponent, IgxCarouselIndicatorDirective, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective], exports: [IgxCarouselComponent, IgxSlideComponent, IgxCarouselIndicatorDirective, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCarouselModule, imports: [IgxCarouselComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxCarouselModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxCarouselModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [