igniteui-angular 21.0.4 → 21.0.6

package/fesm2022/igniteui-angular-list.mjs

@@ -8,10 +8,10 @@ class IgxListBaseDirective {
     constructor() {
         this.el = inject(ElementRef, { optional: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxListBaseDirective, isStandalone: true, selector: "[igxListBase]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxListBaseDirective, isStandalone: true, selector: "[igxListBase]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListBaseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxListBase]',
@@ -28,10 +28,10 @@ class IgxEmptyListTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxEmptyListTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxEmptyListTemplateDirective, isStandalone: true, selector: "[igxEmptyList]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxEmptyListTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxEmptyListTemplateDirective, isStandalone: true, selector: "[igxEmptyList]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxEmptyListTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxEmptyListTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxEmptyList]',
@@ -42,10 +42,10 @@ class IgxDataLoadingTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDataLoadingTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxDataLoadingTemplateDirective, isStandalone: true, selector: "[igxDataLoading]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxDataLoadingTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxDataLoadingTemplateDirective, isStandalone: true, selector: "[igxDataLoading]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDataLoadingTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxDataLoadingTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxDataLoading]',
@@ -56,10 +56,10 @@ class IgxListItemLeftPanningTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListItemLeftPanningTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxListItemLeftPanningTemplateDirective, isStandalone: true, selector: "[igxListItemLeftPanning]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListItemLeftPanningTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxListItemLeftPanningTemplateDirective, isStandalone: true, selector: "[igxListItemLeftPanning]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListItemLeftPanningTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListItemLeftPanningTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxListItemLeftPanning]',
@@ -70,10 +70,10 @@ class IgxListItemRightPanningTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListItemRightPanningTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxListItemRightPanningTemplateDirective, isStandalone: true, selector: "[igxListItemRightPanning]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListItemRightPanningTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxListItemRightPanningTemplateDirective, isStandalone: true, selector: "[igxListItemRightPanning]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListItemRightPanningTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListItemRightPanningTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxListItemRightPanning]',
@@ -473,10 +473,10 @@ class IgxListItemComponent {
         this._panState = IgxListPanState.NONE;
         this.hideLeftAndRightPanTemplates();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxListItemComponent, isStandalone: true, selector: "igx-list-item", inputs: { isHeader: ["isHeader", "isHeader", booleanAttribute], hidden: ["hidden", "hidden", booleanAttribute], index: "index", role: "role", selected: ["selected", "selected", booleanAttribute] }, host: { listeners: { "click": "clicked($event)", "panstart": "panStart()", "pancancel": "panCancel()", "panmove": "panMove($event)", "panend": "panEnd()" }, properties: { "attr.aria-label": "this.ariaLabel", "style.touch-action": "this.touchAction", "attr.role": "this.role", "class.igx-list__item-base--selected": "this.selected", "class.igx-list__header": "this.headerStyle", "class.igx-list__item-base": "this.innerStyle", "style.display": "this.display" } }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "leftPanningTemplateElement", first: true, predicate: ["leftPanningTmpl"], descendants: true }, { propertyName: "rightPanningTemplateElement", first: true, predicate: ["rightPanningTmpl"], descendants: true }], ngImport: i0, template: "\n@if (!isHeader && list.listItemLeftPanningTemplate) {\n    <div #leftPanningTmpl class=\"igx-list__item-right\"\n        [style.width.rem]=\"offsetWidthInRem\" [style.height.rem]=\"offsetHeightInRem\">\n        <ng-container *ngTemplateOutlet=\"list.listItemLeftPanningTemplate.template; context: context\">\n        </ng-container>\n    </div>\n}\n\n@if (!isHeader && list.listItemRightPanningTemplate) {\n    <div #rightPanningTmpl class=\"igx-list__item-left\"\n        [style.width.rem]=\"offsetWidthInRem\" [style.height.rem]=\"offsetHeightInRem\">\n        <ng-container *ngTemplateOutlet=\"list.listItemRightPanningTemplate.template; context: context\">\n        </ng-container>\n    </div>\n}\n\n<ng-template #itemsContent>\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #itemThumbnails>\n    <div class=\"igx-list__item-thumbnail\">\n        <ng-content select=\"[igxListThumbnail], igx-list__item-thumbnail, igx-avatar\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #itemLines>\n    <div class=\"igx-list__item-lines\">\n        <ng-content select=\"[igxListLine], .igx-list__item-lines, [igxListLineTitle], [igxListLineSubTitle], .igx-list__item-line-title, .igx-list__item-line-subtitle\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #itemActions>\n    <div class=\"igx-list__item-actions\">\n        <ng-content select=\"[igxListAction], .igx-list__item-actions\"></ng-content>\n    </div>\n</ng-template>\n\n@if (isHeader) {\n    <ng-container *ngTemplateOutlet=\"itemsContent\"></ng-container>\n}\n\n@if (!isHeader) {\n    <div class=\"igx-list__item-content\">\n        <ng-container *ngTemplateOutlet=\"itemThumbnails\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"itemLines\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"itemActions\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"itemsContent\"></ng-container>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxListItemComponent, isStandalone: true, selector: "igx-list-item", inputs: { isHeader: ["isHeader", "isHeader", booleanAttribute], hidden: ["hidden", "hidden", booleanAttribute], index: "index", role: "role", selected: ["selected", "selected", booleanAttribute] }, host: { listeners: { "click": "clicked($event)", "panstart": "panStart()", "pancancel": "panCancel()", "panmove": "panMove($event)", "panend": "panEnd()" }, properties: { "attr.aria-label": "this.ariaLabel", "style.touch-action": "this.touchAction", "attr.role": "this.role", "class.igx-list__item-base--selected": "this.selected", "class.igx-list__header": "this.headerStyle", "class.igx-list__item-base": "this.innerStyle", "style.display": "this.display" } }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "leftPanningTemplateElement", first: true, predicate: ["leftPanningTmpl"], descendants: true }, { propertyName: "rightPanningTemplateElement", first: true, predicate: ["rightPanningTmpl"], descendants: true }], ngImport: i0, template: "\n@if (!isHeader && list.listItemLeftPanningTemplate) {\n    <div #leftPanningTmpl class=\"igx-list__item-right\"\n        [style.width.rem]=\"offsetWidthInRem\" [style.height.rem]=\"offsetHeightInRem\">\n        <ng-container *ngTemplateOutlet=\"list.listItemLeftPanningTemplate.template; context: context\">\n        </ng-container>\n    </div>\n}\n\n@if (!isHeader && list.listItemRightPanningTemplate) {\n    <div #rightPanningTmpl class=\"igx-list__item-left\"\n        [style.width.rem]=\"offsetWidthInRem\" [style.height.rem]=\"offsetHeightInRem\">\n        <ng-container *ngTemplateOutlet=\"list.listItemRightPanningTemplate.template; context: context\">\n        </ng-container>\n    </div>\n}\n\n<ng-template #itemsContent>\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #itemThumbnails>\n    <div class=\"igx-list__item-thumbnail\">\n        <ng-content select=\"[igxListThumbnail], igx-list__item-thumbnail, igx-avatar\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #itemLines>\n    <div class=\"igx-list__item-lines\">\n        <ng-content select=\"[igxListLine], .igx-list__item-lines, [igxListLineTitle], [igxListLineSubTitle], .igx-list__item-line-title, .igx-list__item-line-subtitle\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #itemActions>\n    <div class=\"igx-list__item-actions\">\n        <ng-content select=\"[igxListAction], .igx-list__item-actions\"></ng-content>\n    </div>\n</ng-template>\n\n@if (isHeader) {\n    <ng-container *ngTemplateOutlet=\"itemsContent\"></ng-container>\n}\n\n@if (!isHeader) {\n    <div class=\"igx-list__item-content\">\n        <ng-container *ngTemplateOutlet=\"itemThumbnails\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"itemLines\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"itemActions\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"itemsContent\"></ng-container>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListItemComponent, decorators: [{
             type: Component,
             args: [{ providers: [HammerGesturesManager], selector: 'igx-list-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "\n@if (!isHeader && list.listItemLeftPanningTemplate) {\n    <div #leftPanningTmpl class=\"igx-list__item-right\"\n        [style.width.rem]=\"offsetWidthInRem\" [style.height.rem]=\"offsetHeightInRem\">\n        <ng-container *ngTemplateOutlet=\"list.listItemLeftPanningTemplate.template; context: context\">\n        </ng-container>\n    </div>\n}\n\n@if (!isHeader && list.listItemRightPanningTemplate) {\n    <div #rightPanningTmpl class=\"igx-list__item-left\"\n        [style.width.rem]=\"offsetWidthInRem\" [style.height.rem]=\"offsetHeightInRem\">\n        <ng-container *ngTemplateOutlet=\"list.listItemRightPanningTemplate.template; context: context\">\n        </ng-container>\n    </div>\n}\n\n<ng-template #itemsContent>\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #itemThumbnails>\n    <div class=\"igx-list__item-thumbnail\">\n        <ng-content select=\"[igxListThumbnail], igx-list__item-thumbnail, igx-avatar\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #itemLines>\n    <div class=\"igx-list__item-lines\">\n        <ng-content select=\"[igxListLine], .igx-list__item-lines, [igxListLineTitle], [igxListLineSubTitle], .igx-list__item-line-title, .igx-list__item-line-subtitle\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #itemActions>\n    <div class=\"igx-list__item-actions\">\n        <ng-content select=\"[igxListAction], .igx-list__item-actions\"></ng-content>\n    </div>\n</ng-template>\n\n@if (isHeader) {\n    <ng-container *ngTemplateOutlet=\"itemsContent\"></ng-container>\n}\n\n@if (!isHeader) {\n    <div class=\"igx-list__item-content\">\n        <ng-container *ngTemplateOutlet=\"itemThumbnails\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"itemLines\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"itemActions\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"itemsContent\"></ng-container>\n    </div>\n}\n" }]
         }], propDecorators: { leftPanningTemplateElement: [{
@@ -542,10 +542,10 @@ let NEXT_ID = 0;
  * Use it to wrap anything you want to be used as a thumbnail.
  */
 class IgxListThumbnailDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListThumbnailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxListThumbnailDirective, isStandalone: true, selector: "[igxListThumbnail]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListThumbnailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxListThumbnailDirective, isStandalone: true, selector: "[igxListThumbnail]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListThumbnailDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListThumbnailDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxListThumbnail]',
@@ -557,10 +557,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
  * Use it to wrap anything you want to be used as a list action: icon, checkbox...
  */
 class IgxListActionDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxListActionDirective, isStandalone: true, selector: "[igxListAction]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxListActionDirective, isStandalone: true, selector: "[igxListAction]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListActionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxListAction]',
@@ -572,10 +572,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
  * Use it to wrap anything you want to be used as a plane text.
  */
 class IgxListLineDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListLineDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxListLineDirective, isStandalone: true, selector: "[igxListLine]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListLineDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxListLineDirective, isStandalone: true, selector: "[igxListLine]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListLineDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListLineDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxListLine]',
@@ -590,10 +590,10 @@ class IgxListLineTitleDirective {
     constructor() {
         this.cssClass = 'igx-list__item-line-title';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListLineTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxListLineTitleDirective, isStandalone: true, selector: "[igxListLineTitle]", host: { properties: { "class.igx-list__item-line-title": "this.cssClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListLineTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxListLineTitleDirective, isStandalone: true, selector: "[igxListLineTitle]", host: { properties: { "class.igx-list__item-line-title": "this.cssClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListLineTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListLineTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxListLineTitle]',
@@ -611,10 +611,10 @@ class IgxListLineSubTitleDirective {
     constructor() {
         this.cssClass = 'igx-list__item-line-subtitle';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListLineSubTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxListLineSubTitleDirective, isStandalone: true, selector: "[igxListLineSubTitle]", host: { properties: { "class.igx-list__item-line-subtitle": "this.cssClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListLineSubTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxListLineSubTitleDirective, isStandalone: true, selector: "[igxListLineSubTitle]", host: { properties: { "class.igx-list__item-line-subtitle": "this.cssClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListLineSubTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListLineSubTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxListLineSubTitle]',
@@ -942,10 +942,10 @@ class IgxListComponent extends IgxListBaseDirective {
             return this.emptyListTemplate ? this.emptyListTemplate.template : this.defaultEmptyListTemplate;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxListComponent, isStandalone: true, selector: "igx-list", inputs: { panEndTriggeringThreshold: "panEndTriggeringThreshold", id: "id", allowLeftPanning: ["allowLeftPanning", "allowLeftPanning", booleanAttribute], allowRightPanning: ["allowRightPanning", "allowRightPanning", booleanAttribute], isLoading: ["isLoading", "isLoading", booleanAttribute], resourceStrings: "resourceStrings", role: "role" }, outputs: { leftPan: "leftPan", rightPan: "rightPan", startPan: "startPan", endPan: "endPan", resetPan: "resetPan", panStateChange: "panStateChange", itemClicked: "itemClicked" }, host: { properties: { "attr.id": "this.id", "attr.role": "this.role", "class.igx-list--empty": "this.isListEmpty", "class.igx-list": "this.cssClass" } }, providers: [{ provide: IgxListBaseDirective, useExisting: IgxListComponent }], queries: [{ propertyName: "emptyListTemplate", first: true, predicate: IgxEmptyListTemplateDirective, descendants: true, read: IgxEmptyListTemplateDirective }, { propertyName: "dataLoadingTemplate", first: true, predicate: IgxDataLoadingTemplateDirective, descendants: true, read: IgxDataLoadingTemplateDirective }, { propertyName: "listItemLeftPanningTemplate", first: true, predicate: IgxListItemLeftPanningTemplateDirective, descendants: true, read: IgxListItemLeftPanningTemplateDirective }, { propertyName: "listItemRightPanningTemplate", first: true, predicate: IgxListItemRightPanningTemplateDirective, descendants: true, read: IgxListItemRightPanningTemplateDirective }, { propertyName: "children", predicate: i0.forwardRef(() => IgxListItemComponent), descendants: true }], viewQueries: [{ propertyName: "defaultEmptyListTemplate", first: true, predicate: ["defaultEmptyList"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDataLoadingTemplate", first: true, predicate: ["defaultDataLoading"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n\n<ng-template #defaultEmptyList>\n    <article class=\"igx-list__message\">\n        {{resourceStrings.igx_list_no_items}}\n    </article>\n</ng-template>\n\n<ng-template #defaultDataLoading>\n    <article class=\"igx-list__message\">\n        {{resourceStrings.igx_list_loading}}\n    </article>\n</ng-template>\n\n@if (!children || children.length === 0 || isLoading) {\n    <ng-container *ngTemplateOutlet=\"template; context: context\">\n    </ng-container>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxListComponent, isStandalone: true, selector: "igx-list", inputs: { panEndTriggeringThreshold: "panEndTriggeringThreshold", id: "id", allowLeftPanning: ["allowLeftPanning", "allowLeftPanning", booleanAttribute], allowRightPanning: ["allowRightPanning", "allowRightPanning", booleanAttribute], isLoading: ["isLoading", "isLoading", booleanAttribute], resourceStrings: "resourceStrings", role: "role" }, outputs: { leftPan: "leftPan", rightPan: "rightPan", startPan: "startPan", endPan: "endPan", resetPan: "resetPan", panStateChange: "panStateChange", itemClicked: "itemClicked" }, host: { properties: { "attr.id": "this.id", "attr.role": "this.role", "class.igx-list--empty": "this.isListEmpty", "class.igx-list": "this.cssClass" } }, providers: [{ provide: IgxListBaseDirective, useExisting: IgxListComponent }], queries: [{ propertyName: "emptyListTemplate", first: true, predicate: IgxEmptyListTemplateDirective, descendants: true, read: IgxEmptyListTemplateDirective }, { propertyName: "dataLoadingTemplate", first: true, predicate: IgxDataLoadingTemplateDirective, descendants: true, read: IgxDataLoadingTemplateDirective }, { propertyName: "listItemLeftPanningTemplate", first: true, predicate: IgxListItemLeftPanningTemplateDirective, descendants: true, read: IgxListItemLeftPanningTemplateDirective }, { propertyName: "listItemRightPanningTemplate", first: true, predicate: IgxListItemRightPanningTemplateDirective, descendants: true, read: IgxListItemRightPanningTemplateDirective }, { propertyName: "children", predicate: i0.forwardRef(() => IgxListItemComponent), descendants: true }], viewQueries: [{ propertyName: "defaultEmptyListTemplate", first: true, predicate: ["defaultEmptyList"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDataLoadingTemplate", first: true, predicate: ["defaultDataLoading"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n\n<ng-template #defaultEmptyList>\n    <article class=\"igx-list__message\">\n        {{resourceStrings.igx_list_no_items}}\n    </article>\n</ng-template>\n\n<ng-template #defaultDataLoading>\n    <article class=\"igx-list__message\">\n        {{resourceStrings.igx_list_loading}}\n    </article>\n</ng-template>\n\n@if (!children || children.length === 0 || isLoading) {\n    <ng-container *ngTemplateOutlet=\"template; context: context\">\n    </ng-container>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-list', providers: [{ provide: IgxListBaseDirective, useExisting: IgxListComponent }], imports: [NgTemplateOutlet], template: "<ng-content></ng-content>\n\n<ng-template #defaultEmptyList>\n    <article class=\"igx-list__message\">\n        {{resourceStrings.igx_list_no_items}}\n    </article>\n</ng-template>\n\n<ng-template #defaultDataLoading>\n    <article class=\"igx-list__message\">\n        {{resourceStrings.igx_list_loading}}\n    </article>\n</ng-template>\n\n@if (!children || children.length === 0 || isLoading) {\n    <ng-container *ngTemplateOutlet=\"template; context: context\">\n    </ng-container>\n}\n" }]
         }], propDecorators: { children: [{
@@ -1034,11 +1034,11 @@ const IGX_LIST_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxListModule, imports: [IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective, IgxListActionDirective, IgxListLineDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxDataLoadingTemplateDirective, IgxEmptyListTemplateDirective, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective], exports: [IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective, IgxListActionDirective, IgxListLineDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxDataLoadingTemplateDirective, IgxEmptyListTemplateDirective, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxListModule, imports: [IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective, IgxListActionDirective, IgxListLineDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxDataLoadingTemplateDirective, IgxEmptyListTemplateDirective, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective], exports: [IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective, IgxListActionDirective, IgxListLineDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxDataLoadingTemplateDirective, IgxEmptyListTemplateDirective, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/igniteui-angular-navbar.mjs

@@ -6,10 +6,10 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
  * IgxActionIcon is a container for the action nav icon of the IgxNavbar.
  */
 class IgxNavbarActionDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavbarActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxNavbarActionDirective, isStandalone: true, selector: "igx-navbar-action,[igxNavbarAction]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavbarActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxNavbarActionDirective, isStandalone: true, selector: "igx-navbar-action,[igxNavbarAction]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavbarActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavbarActionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-navbar-action,[igxNavbarAction]',
@@ -17,10 +17,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                 }]
         }] });
 class IgxNavbarTitleDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavbarTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxNavbarTitleDirective, isStandalone: true, selector: "igx-navbar-title,[igxNavbarTitle]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavbarTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxNavbarTitleDirective, isStandalone: true, selector: "igx-navbar-title,[igxNavbarTitle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavbarTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavbarTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'igx-navbar-title,[igxNavbarTitle]',
@@ -110,10 +110,10 @@ class IgxNavbarComponent {
     _triggerAction() {
         this.action.emit(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxNavbarComponent, isStandalone: true, selector: "igx-navbar", inputs: { id: "id", actionButtonIcon: "actionButtonIcon", title: "title", titleId: "titleId", isActionButtonVisible: ["isActionButtonVisible", "isActionButtonVisible", booleanAttribute] }, outputs: { action: "action" }, host: { properties: { "attr.id": "this.id" } }, queries: [{ propertyName: "actionIconTemplate", first: true, predicate: IgxNavbarActionDirective, descendants: true, read: IgxNavbarActionDirective }, { propertyName: "titleContent", first: true, predicate: IgxNavbarTitleDirective, descendants: true, read: IgxNavbarTitleDirective }], ngImport: i0, template: "<nav class=\"igx-navbar\" role=\"navigation\" [attr.aria-labelledby]=\"titleId\">\n    <div class=\"igx-navbar__left\">\n        @if (isActionButtonVisible) {\n            <igx-icon (click)=\"_triggerAction()\">\n                {{actionButtonIcon}}\n            </igx-icon>\n        }\n        <ng-content select=\"igx-navbar-action, [igxNavbarAction]\"></ng-content>\n    </div>\n    <div class=\"igx-navbar__middle\">\n        @if (!isTitleContentVisible) {\n            <h1\n                class=\"igx-navbar__title\"\n                [attr.id]=\"titleId\">\n                {{ title }}\n            </h1>\n        }\n        <ng-content select=\"igx-navbar-title, [igxNavbarTitle]\"></ng-content>\n    </div>\n    <div class=\"igx-navbar__right\">\n        <ng-content></ng-content>\n    </div>\n</nav>\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxNavbarComponent, isStandalone: true, selector: "igx-navbar", inputs: { id: "id", actionButtonIcon: "actionButtonIcon", title: "title", titleId: "titleId", isActionButtonVisible: ["isActionButtonVisible", "isActionButtonVisible", booleanAttribute] }, outputs: { action: "action" }, host: { properties: { "attr.id": "this.id" } }, queries: [{ propertyName: "actionIconTemplate", first: true, predicate: IgxNavbarActionDirective, descendants: true, read: IgxNavbarActionDirective }, { propertyName: "titleContent", first: true, predicate: IgxNavbarTitleDirective, descendants: true, read: IgxNavbarTitleDirective }], ngImport: i0, template: "<nav class=\"igx-navbar\" role=\"navigation\" [attr.aria-labelledby]=\"titleId\">\n    <div class=\"igx-navbar__left\">\n        @if (isActionButtonVisible) {\n            <igx-icon (click)=\"_triggerAction()\">\n                {{actionButtonIcon}}\n            </igx-icon>\n        }\n        <ng-content select=\"igx-navbar-action, [igxNavbarAction]\"></ng-content>\n    </div>\n    <div class=\"igx-navbar__middle\">\n        @if (!isTitleContentVisible) {\n            <h1\n                class=\"igx-navbar__title\"\n                [attr.id]=\"titleId\">\n                {{ title }}\n            </h1>\n        }\n        <ng-content select=\"igx-navbar-title, [igxNavbarTitle]\"></ng-content>\n    </div>\n    <div class=\"igx-navbar__right\">\n        <ng-content></ng-content>\n    </div>\n</nav>\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-navbar', imports: [IgxIconComponent], template: "<nav class=\"igx-navbar\" role=\"navigation\" [attr.aria-labelledby]=\"titleId\">\n    <div class=\"igx-navbar__left\">\n        @if (isActionButtonVisible) {\n            <igx-icon (click)=\"_triggerAction()\">\n                {{actionButtonIcon}}\n            </igx-icon>\n        }\n        <ng-content select=\"igx-navbar-action, [igxNavbarAction]\"></ng-content>\n    </div>\n    <div class=\"igx-navbar__middle\">\n        @if (!isTitleContentVisible) {\n            <h1\n                class=\"igx-navbar__title\"\n                [attr.id]=\"titleId\">\n                {{ title }}\n            </h1>\n        }\n        <ng-content select=\"igx-navbar-title, [igxNavbarTitle]\"></ng-content>\n    </div>\n    <div class=\"igx-navbar__right\">\n        <ng-content></ng-content>\n    </div>\n</nav>\n", styles: [":host{display:block;width:100%}\n"] }]
         }], propDecorators: { id: [{
@@ -152,11 +152,11 @@ const IGX_NAVBAR_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxNavbarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxNavbarModule, imports: [IgxNavbarComponent, IgxNavbarActionDirective, IgxNavbarTitleDirective], exports: [IgxNavbarComponent, IgxNavbarActionDirective, IgxNavbarTitleDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavbarModule, imports: [IgxNavbarComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxNavbarModule, imports: [IgxNavbarComponent, IgxNavbarActionDirective, IgxNavbarTitleDirective], exports: [IgxNavbarComponent, IgxNavbarActionDirective, IgxNavbarTitleDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavbarModule, imports: [IgxNavbarComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavbarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/igniteui-angular-navigation-drawer.mjs

@@ -70,10 +70,10 @@ class IgxNavDrawerItemDirective {
     get disabledCSS() {
         return this.disabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavDrawerItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.2", type: IgxNavDrawerItemDirective, isStandalone: true, selector: "[igxDrawerItem]", inputs: { active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], isHeader: ["isHeader", "isHeader", booleanAttribute] }, host: { properties: { "class.igx-nav-drawer__item": "this.defaultCSS", "class.igx-nav-drawer__item--active": "this.currentCSS", "class.igx-nav-drawer__item--header": "this.headerCSS", "class.igx-nav-drawer__item--disabled": "this.disabledCSS" } }, exportAs: ["igxDrawerItem"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavDrawerItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.8", type: IgxNavDrawerItemDirective, isStandalone: true, selector: "[igxDrawerItem]", inputs: { active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], isHeader: ["isHeader", "isHeader", booleanAttribute] }, host: { properties: { "class.igx-nav-drawer__item": "this.defaultCSS", "class.igx-nav-drawer__item--active": "this.currentCSS", "class.igx-nav-drawer__item--header": "this.headerCSS", "class.igx-nav-drawer__item--disabled": "this.disabledCSS" } }, exportAs: ["igxDrawerItem"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavDrawerItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavDrawerItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxDrawerItem]',
@@ -106,10 +106,10 @@ class IgxNavDrawerTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavDrawerTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxNavDrawerTemplateDirective, isStandalone: true, selector: "[igxDrawer]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavDrawerTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxNavDrawerTemplateDirective, isStandalone: true, selector: "[igxDrawer]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavDrawerTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavDrawerTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxDrawer]',
@@ -120,10 +120,10 @@ class IgxNavDrawerMiniTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavDrawerMiniTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxNavDrawerMiniTemplateDirective, isStandalone: true, selector: "[igxDrawerMini]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavDrawerMiniTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxNavDrawerMiniTemplateDirective, isStandalone: true, selector: "[igxDrawerMini]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavDrawerMiniTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavDrawerMiniTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxDrawerMini]',
@@ -823,10 +823,10 @@ class IgxNavigationDrawerComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavigationDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.2", type: IgxNavigationDrawerComponent, isStandalone: true, selector: "igx-nav-drawer", inputs: { id: "id", position: "position", enableGestures: ["enableGestures", "enableGestures", booleanAttribute], pinThreshold: "pinThreshold", pin: ["pin", "pin", booleanAttribute], width: "width", disableAnimation: ["disableAnimation", "disableAnimation", booleanAttribute], miniWidth: "miniWidth", isOpen: ["isOpen", "isOpen", booleanAttribute] }, outputs: { isOpenChange: "isOpenChange", pinChange: "pinChange", opening: "opening", opened: "opened", closing: "closing", closed: "closed" }, host: { properties: { "class.igx-nav-drawer": "this.cssClass", "attr.id": "this.id", "class.igx-nav-drawer--disable-animation": "this.disableAnimation", "class.igx-nav-drawer--mini": "this.isMini", "class.igx-nav-drawer--pinned": "this.pinned", "style.--igx-nav-drawer-size": "this.normalSize", "style.--igx-nav-drawer-size--mini": "this.miniSize", "style.order": "this.isPinnedRight" } }, providers: [HammerGesturesManager], queries: [{ propertyName: "contentTemplate", first: true, predicate: IgxNavDrawerTemplateDirective, descendants: true, read: IgxNavDrawerTemplateDirective }, { propertyName: "miniTemplate", first: true, predicate: IgxNavDrawerMiniTemplateDirective, descendants: true, read: IgxNavDrawerMiniTemplateDirective }], viewQueries: [{ propertyName: "_drawer", first: true, predicate: ["aside"], descendants: true, static: true }, { propertyName: "_overlay", first: true, predicate: ["overlay"], descendants: true, static: true }, { propertyName: "_styleDummy", first: true, predicate: ["dummy"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultItemsTemplate>\n    <div igxDrawerItem [isHeader]=\"true\">Navigation Drawer</div>\n    <div igxDrawerItem> Start by adding</div>\n    <div igxDrawerItem> <code>&lt;ng-template igxDrawer&gt;</code> </div>\n    <div igxDrawerItem> And some items inside </div>\n    <div igxDrawerItem> Style with igxDrawerItem </div>\n    <div igxDrawerItem> and igxRipple directives</div>\n    <div igxDrawerItem [disabled]=\"true\">Disabled Item</div>\n</ng-template>\n\n<div [hidden]=\"pin\"\n    class=\"igx-nav-drawer__overlay\"\n    [class.igx-nav-drawer__overlay--hidden]=\"!isOpen\"\n    [class.igx-nav-drawer--disable-animation]=\"disableAnimation\"\n    (click)=\"close()\" #overlay>\n</div>\n<nav\n    class=\"igx-nav-drawer__aside\"\n    [class.igx-nav-drawer__aside--collapsed]=\"!miniTemplate && !isOpen\"\n    [class.igx-nav-drawer__aside--mini]=\"miniTemplate && !isOpen\"\n    [class.igx-nav-drawer__aside--normal]=\"!miniTemplate || isOpen\"\n    [class.igx-nav-drawer__aside--pinned]=\"pin\"\n    [class.igx-nav-drawer__aside--right]=\"position === 'right'\" #aside\n    [class.igx-nav-drawer--disable-animation]=\"disableAnimation\">\n\n    <ng-container *ngTemplateOutlet=\"template || defaultItemsTemplate\"></ng-container>\n</nav>\n<div class=\"igx-nav-drawer__style-dummy\" #dummy></div>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "directive", type: IgxNavDrawerItemDirective, selector: "[igxDrawerItem]", inputs: ["active", "disabled", "isHeader"], exportAs: ["igxDrawerItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavigationDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.8", type: IgxNavigationDrawerComponent, isStandalone: true, selector: "igx-nav-drawer", inputs: { id: "id", position: "position", enableGestures: ["enableGestures", "enableGestures", booleanAttribute], pinThreshold: "pinThreshold", pin: ["pin", "pin", booleanAttribute], width: "width", disableAnimation: ["disableAnimation", "disableAnimation", booleanAttribute], miniWidth: "miniWidth", isOpen: ["isOpen", "isOpen", booleanAttribute] }, outputs: { isOpenChange: "isOpenChange", pinChange: "pinChange", opening: "opening", opened: "opened", closing: "closing", closed: "closed" }, host: { properties: { "class.igx-nav-drawer": "this.cssClass", "attr.id": "this.id", "class.igx-nav-drawer--disable-animation": "this.disableAnimation", "class.igx-nav-drawer--mini": "this.isMini", "class.igx-nav-drawer--pinned": "this.pinned", "style.--igx-nav-drawer-size": "this.normalSize", "style.--igx-nav-drawer-size--mini": "this.miniSize", "style.order": "this.isPinnedRight" } }, providers: [HammerGesturesManager], queries: [{ propertyName: "contentTemplate", first: true, predicate: IgxNavDrawerTemplateDirective, descendants: true, read: IgxNavDrawerTemplateDirective }, { propertyName: "miniTemplate", first: true, predicate: IgxNavDrawerMiniTemplateDirective, descendants: true, read: IgxNavDrawerMiniTemplateDirective }], viewQueries: [{ propertyName: "_drawer", first: true, predicate: ["aside"], descendants: true, static: true }, { propertyName: "_overlay", first: true, predicate: ["overlay"], descendants: true, static: true }, { propertyName: "_styleDummy", first: true, predicate: ["dummy"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultItemsTemplate>\n    <div igxDrawerItem [isHeader]=\"true\">Navigation Drawer</div>\n    <div igxDrawerItem> Start by adding</div>\n    <div igxDrawerItem> <code>&lt;ng-template igxDrawer&gt;</code> </div>\n    <div igxDrawerItem> And some items inside </div>\n    <div igxDrawerItem> Style with igxDrawerItem </div>\n    <div igxDrawerItem> and igxRipple directives</div>\n    <div igxDrawerItem [disabled]=\"true\">Disabled Item</div>\n</ng-template>\n\n<div [hidden]=\"pin\"\n    class=\"igx-nav-drawer__overlay\"\n    [class.igx-nav-drawer__overlay--hidden]=\"!isOpen\"\n    [class.igx-nav-drawer--disable-animation]=\"disableAnimation\"\n    (click)=\"close()\" #overlay>\n</div>\n<nav\n    class=\"igx-nav-drawer__aside\"\n    [class.igx-nav-drawer__aside--collapsed]=\"!miniTemplate && !isOpen\"\n    [class.igx-nav-drawer__aside--mini]=\"miniTemplate && !isOpen\"\n    [class.igx-nav-drawer__aside--normal]=\"!miniTemplate || isOpen\"\n    [class.igx-nav-drawer__aside--pinned]=\"pin\"\n    [class.igx-nav-drawer__aside--right]=\"position === 'right'\" #aside\n    [class.igx-nav-drawer--disable-animation]=\"disableAnimation\">\n\n    <ng-container *ngTemplateOutlet=\"template || defaultItemsTemplate\"></ng-container>\n</nav>\n<div class=\"igx-nav-drawer__style-dummy\" #dummy></div>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "directive", type: IgxNavDrawerItemDirective, selector: "[igxDrawerItem]", inputs: ["active", "disabled", "isHeader"], exportAs: ["igxDrawerItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavigationDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavigationDrawerComponent, decorators: [{
             type: Component,
             args: [{ providers: [HammerGesturesManager], selector: 'igx-nav-drawer', imports: [IgxNavDrawerItemDirective, NgTemplateOutlet], template: "<ng-template #defaultItemsTemplate>\n    <div igxDrawerItem [isHeader]=\"true\">Navigation Drawer</div>\n    <div igxDrawerItem> Start by adding</div>\n    <div igxDrawerItem> <code>&lt;ng-template igxDrawer&gt;</code> </div>\n    <div igxDrawerItem> And some items inside </div>\n    <div igxDrawerItem> Style with igxDrawerItem </div>\n    <div igxDrawerItem> and igxRipple directives</div>\n    <div igxDrawerItem [disabled]=\"true\">Disabled Item</div>\n</ng-template>\n\n<div [hidden]=\"pin\"\n    class=\"igx-nav-drawer__overlay\"\n    [class.igx-nav-drawer__overlay--hidden]=\"!isOpen\"\n    [class.igx-nav-drawer--disable-animation]=\"disableAnimation\"\n    (click)=\"close()\" #overlay>\n</div>\n<nav\n    class=\"igx-nav-drawer__aside\"\n    [class.igx-nav-drawer__aside--collapsed]=\"!miniTemplate && !isOpen\"\n    [class.igx-nav-drawer__aside--mini]=\"miniTemplate && !isOpen\"\n    [class.igx-nav-drawer__aside--normal]=\"!miniTemplate || isOpen\"\n    [class.igx-nav-drawer__aside--pinned]=\"pin\"\n    [class.igx-nav-drawer__aside--right]=\"position === 'right'\" #aside\n    [class.igx-nav-drawer--disable-animation]=\"disableAnimation\">\n\n    <ng-container *ngTemplateOutlet=\"template || defaultItemsTemplate\"></ng-container>\n</nav>\n<div class=\"igx-nav-drawer__style-dummy\" #dummy></div>\n", styles: [":host{display:block;height:100%}\n"] }]
         }], propDecorators: { cssClass: [{
@@ -916,11 +916,11 @@ const IGX_NAVIGATION_DRAWER_DIRECTIVES = [
  * @hidden
  */
 class IgxNavigationDrawerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavigationDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxNavigationDrawerModule, imports: [IgxNavigationDrawerComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective], exports: [IgxNavigationDrawerComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavigationDrawerModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavigationDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxNavigationDrawerModule, imports: [IgxNavigationDrawerComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective], exports: [IgxNavigationDrawerComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavigationDrawerModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavigationDrawerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxNavigationDrawerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/igniteui-angular-paginator.mjs

@@ -11,10 +11,10 @@ class IgxPaginatorDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPaginatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxPaginatorDirective, isStandalone: true, selector: "[igxPaginator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPaginatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxPaginatorDirective, isStandalone: true, selector: "[igxPaginator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPaginatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPaginatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxPaginator]',
@@ -34,10 +34,10 @@ class IgxPaginatorContentDirective {
          */
         this.cssClass = 'igx-paginator-content';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPaginatorContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxPaginatorContentDirective, isStandalone: true, selector: "[igxPaginatorContent],igx-paginator-content", host: { properties: { "class.igx-paginator-content": "this.cssClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPaginatorContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: IgxPaginatorContentDirective, isStandalone: true, selector: "[igxPaginatorContent],igx-paginator-content", host: { properties: { "class.igx-paginator-content": "this.cssClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPaginatorContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPaginatorContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxPaginatorContent],igx-paginator-content',
@@ -315,12 +315,12 @@ class IgxPaginatorComponent {
     sortUniqueOptions(values, newOption) {
         return Array.from(new Set([...values, newOption])).sort((a, b) => a - b);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxPaginatorComponent, isStandalone: true, selector: "igx-paginator", inputs: { page: "page", perPage: "perPage", totalRecords: "totalRecords", selectOptions: "selectOptions", overlaySettings: "overlaySettings", resourceStrings: "resourceStrings" }, outputs: { perPageChange: "perPageChange", pageChange: "pageChange", paging: "paging", pagingDone: "pagingDone" }, host: { properties: { "class.igx-paginator": "this.cssClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxPaginatorComponent, isStandalone: true, selector: "igx-paginator", inputs: { page: "page", perPage: "perPage", totalRecords: "totalRecords", selectOptions: "selectOptions", overlaySettings: "overlaySettings", resourceStrings: "resourceStrings" }, outputs: { perPageChange: "perPageChange", pageChange: "pageChange", paging: "paging", pagingDone: "pagingDone" }, host: { properties: { "class.igx-paginator": "this.cssClass" } }, providers: [
             { provide: IgxPaginatorToken, useExisting: IgxPaginatorComponent }
         ], queries: [{ propertyName: "customContent", first: true, predicate: IgxPaginatorContentDirective, descendants: true }], ngImport: i0, template: "<ng-content select=\"[igxPaginatorContent],igx-paginator-content\"></ng-content>\n\n@if (!customContent) {\n    <igx-page-size></igx-page-size>\n}\n@if (!customContent) {\n    <igx-page-nav></igx-page-nav>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => IgxPageSizeSelectorComponent), selector: "igx-page-size" }, { kind: "component", type: i0.forwardRef(() => IgxPageNavigationComponent), selector: "igx-page-nav", inputs: ["role"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPaginatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-paginator', imports: [forwardRef(() => IgxPageSizeSelectorComponent), forwardRef(() => IgxPageNavigationComponent)], providers: [
                         { provide: IgxPaginatorToken, useExisting: IgxPaginatorComponent }
@@ -361,10 +361,10 @@ class IgxPageSizeSelectorComponent {
          */
         this.cssClass = 'igx-page-size';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPageSizeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxPageSizeSelectorComponent, isStandalone: true, selector: "igx-page-size", host: { properties: { "class.igx-page-size": "this.cssClass" } }, ngImport: i0, template: "<label class=\"igx-page-size__label\">{{ paginator.resourceStrings.igx_paginator_label }}</label>\n<div class=\"igx-page-size__select\">\n    <igx-select [overlaySettings]=\"paginator.overlaySettings\" [(ngModel)]=\"paginator.perPage\" type=\"border\">\n        @for (val of paginator.selectOptions; track val) {\n            <igx-select-item [value]=\"val\">\n                {{ val }}\n            </igx-select-item>\n        }\n    </igx-select>\n</div>\n", dependencies: [{ kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPageSizeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxPageSizeSelectorComponent, isStandalone: true, selector: "igx-page-size", host: { properties: { "class.igx-page-size": "this.cssClass" } }, ngImport: i0, template: "<label class=\"igx-page-size__label\">{{ paginator.resourceStrings.igx_paginator_label }}</label>\n<div class=\"igx-page-size__select\">\n    <igx-select [overlaySettings]=\"paginator.overlaySettings\" [(ngModel)]=\"paginator.perPage\" type=\"border\">\n        @for (val of paginator.selectOptions; track val) {\n            <igx-select-item [value]=\"val\">\n                {{ val }}\n            </igx-select-item>\n        }\n    </igx-select>\n</div>\n", dependencies: [{ kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPageSizeSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPageSizeSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-page-size', imports: [IgxSelectComponent, FormsModule, IgxSelectItemComponent], template: "<label class=\"igx-page-size__label\">{{ paginator.resourceStrings.igx_paginator_label }}</label>\n<div class=\"igx-page-size__select\">\n    <igx-select [overlaySettings]=\"paginator.overlaySettings\" [(ngModel)]=\"paginator.perPage\" type=\"border\">\n        @for (val of paginator.selectOptions; track val) {\n            <igx-select-item [value]=\"val\">\n                {{ val }}\n            </igx-select-item>\n        }\n    </igx-select>\n</div>\n" }]
         }], propDecorators: { cssClass: [{
@@ -384,10 +384,10 @@ class IgxPageNavigationComponent {
          */
         this.role = 'navigation';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPageNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: IgxPageNavigationComponent, isStandalone: true, selector: "igx-page-nav", inputs: { role: "role" }, host: { properties: { "class.igx-page-nav": "this.cssClass", "attr.role": "this.role" } }, ngImport: i0, template: "<button\n    [title]=\"paginator.resourceStrings.igx_paginator_first_page_button_text\"\n    [disabled]=\"paginator.isFirstPage\"\n    [attr.aria-disabled]=\"paginator.isFirstPage\"\n    (click)=\"paginator.paginate(0)\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"first_page\"></igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_previous_page_button_text\"\n    [disabled]=\"paginator.isFirstPage\"\n    [attr.aria-disabled]=\"paginator.isFirstPage\"\n    (click)=\"paginator.previousPage()\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n</button>\n<div class=\"igx-page-nav__text\" aria-current=\"page\">\n    <span>{{ paginator.page + 1 }}</span>\n    <span\n        >&nbsp;{{\n            paginator.resourceStrings.igx_paginator_pager_text\n        }}&nbsp;</span\n    >\n    <span>{{ paginator.totalPages || 1 }}</span>\n</div>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_next_page_button_text\"\n    [disabled]=\"paginator.isLastPage\"\n    [attr.aria-disabled]=\"paginator.isLastPage\"\n    (click)=\"paginator.nextPage()\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    igxIconButton=\"flat\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"next\"></igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_last_page_button_text\"\n    [disabled]=\"paginator.isLastPage\"\n    [attr.aria-disabled]=\"paginator.isLastPage\"\n    (click)=\"paginator.paginate(paginator.totalPages - 1)\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"last_page\"></igx-icon>\n</button>\n\n", dependencies: [{ kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPageNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IgxPageNavigationComponent, isStandalone: true, selector: "igx-page-nav", inputs: { role: "role" }, host: { properties: { "class.igx-page-nav": "this.cssClass", "attr.role": "this.role" } }, ngImport: i0, template: "<button\n    [title]=\"paginator.resourceStrings.igx_paginator_first_page_button_text\"\n    [disabled]=\"paginator.isFirstPage\"\n    [attr.aria-disabled]=\"paginator.isFirstPage\"\n    (click)=\"paginator.paginate(0)\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"first_page\"></igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_previous_page_button_text\"\n    [disabled]=\"paginator.isFirstPage\"\n    [attr.aria-disabled]=\"paginator.isFirstPage\"\n    (click)=\"paginator.previousPage()\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n</button>\n<div class=\"igx-page-nav__text\" aria-current=\"page\">\n    <span>{{ paginator.page + 1 }}</span>\n    <span\n        >&nbsp;{{\n            paginator.resourceStrings.igx_paginator_pager_text\n        }}&nbsp;</span\n    >\n    <span>{{ paginator.totalPages || 1 }}</span>\n</div>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_next_page_button_text\"\n    [disabled]=\"paginator.isLastPage\"\n    [attr.aria-disabled]=\"paginator.isLastPage\"\n    (click)=\"paginator.nextPage()\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    igxIconButton=\"flat\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"next\"></igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_last_page_button_text\"\n    [disabled]=\"paginator.isLastPage\"\n    [attr.aria-disabled]=\"paginator.isLastPage\"\n    (click)=\"paginator.paginate(paginator.totalPages - 1)\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"last_page\"></igx-icon>\n</button>\n\n", dependencies: [{ kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPageNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPageNavigationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-page-nav', imports: [IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective], template: "<button\n    [title]=\"paginator.resourceStrings.igx_paginator_first_page_button_text\"\n    [disabled]=\"paginator.isFirstPage\"\n    [attr.aria-disabled]=\"paginator.isFirstPage\"\n    (click)=\"paginator.paginate(0)\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"first_page\"></igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_previous_page_button_text\"\n    [disabled]=\"paginator.isFirstPage\"\n    [attr.aria-disabled]=\"paginator.isFirstPage\"\n    (click)=\"paginator.previousPage()\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n</button>\n<div class=\"igx-page-nav__text\" aria-current=\"page\">\n    <span>{{ paginator.page + 1 }}</span>\n    <span\n        >&nbsp;{{\n            paginator.resourceStrings.igx_paginator_pager_text\n        }}&nbsp;</span\n    >\n    <span>{{ paginator.totalPages || 1 }}</span>\n</div>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_next_page_button_text\"\n    [disabled]=\"paginator.isLastPage\"\n    [attr.aria-disabled]=\"paginator.isLastPage\"\n    (click)=\"paginator.nextPage()\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    igxIconButton=\"flat\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"next\"></igx-icon>\n</button>\n<button\n    [title]=\"paginator.resourceStrings.igx_paginator_last_page_button_text\"\n    [disabled]=\"paginator.isLastPage\"\n    [attr.aria-disabled]=\"paginator.isLastPage\"\n    (click)=\"paginator.paginate(paginator.totalPages - 1)\"\n    igxIconButton=\"flat\"\n    igxRipple\n    [igxRippleCentered]=\"true\"\n    type=\"button\"\n>\n    <igx-icon family=\"default\" name=\"last_page\"></igx-icon>\n</button>\n\n" }]
         }], propDecorators: { cssClass: [{
@@ -414,11 +414,11 @@ const IGX_PAGINATOR_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxPaginatorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxPaginatorModule, imports: [IgxPaginatorComponent, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective], exports: [IgxPaginatorComponent, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPaginatorModule, imports: [IgxPaginatorComponent, IgxPageNavigationComponent, IgxPageSizeSelectorComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxPaginatorModule, imports: [IgxPaginatorComponent, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective], exports: [IgxPaginatorComponent, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPaginatorModule, imports: [IgxPaginatorComponent, IgxPageNavigationComponent, IgxPageSizeSelectorComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxPaginatorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxPaginatorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [