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

package/fesm2022/igniteui-angular-list.mjs

@@ -10,10 +10,10 @@ class IgxListBaseDirective {
     constructor() {
         this.el = inject(ElementRef, { optional: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxListBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxListBaseDirective, isStandalone: true, selector: "[igxListBase]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxListBaseDirective, isStandalone: true, selector: "[igxListBase]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxListBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListBaseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxListBase]',
@@ -30,10 +30,10 @@ class IgxEmptyListTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxEmptyListTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxEmptyListTemplateDirective, isStandalone: true, selector: "[igxEmptyList]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxEmptyListTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxEmptyListTemplateDirective, isStandalone: true, selector: "[igxEmptyList]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxEmptyListTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxEmptyListTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxEmptyList]',
@@ -44,10 +44,10 @@ class IgxDataLoadingTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDataLoadingTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxDataLoadingTemplateDirective, isStandalone: true, selector: "[igxDataLoading]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDataLoadingTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxDataLoadingTemplateDirective, isStandalone: true, selector: "[igxDataLoading]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxDataLoadingTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxDataLoadingTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxDataLoading]',
@@ -58,10 +58,10 @@ class IgxListItemLeftPanningTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxListItemLeftPanningTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxListItemLeftPanningTemplateDirective, isStandalone: true, selector: "[igxListItemLeftPanning]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListItemLeftPanningTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxListItemLeftPanningTemplateDirective, isStandalone: true, selector: "[igxListItemLeftPanning]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxListItemLeftPanningTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListItemLeftPanningTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxListItemLeftPanning]',
@@ -72,10 +72,10 @@ class IgxListItemRightPanningTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxListItemRightPanningTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxListItemRightPanningTemplateDirective, isStandalone: true, selector: "[igxListItemRightPanning]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListItemRightPanningTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxListItemRightPanningTemplateDirective, isStandalone: true, selector: "[igxListItemRightPanning]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxListItemRightPanningTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListItemRightPanningTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxListItemRightPanning]',
@@ -513,10 +513,10 @@ class IgxListItemComponent {
         this._panState = IgxListPanState.NONE;
         this.hideLeftAndRightPanTemplates();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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)" }, properties: { "attr.aria-label": "this.ariaLabel", "style.touch-action": "this.touchAction", "attr.role": "this.role", "class.igx-list-item": "this.cssClass", "class.igx-list-item--selected": "this.selected", "class.igx-list__item-base--selected": "this.selected", "class.igx-list-item--header": "this.headerStyle", "class.igx-list__header": "this.headerStyle", "class.igx-list-item--base": "this.innerStyle", "class.igx-list__item-base": "this.innerStyle", "class.igx-list-item--active": "this.active", "style.display": "this.display" } }, 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 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 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 igx-list__item-thumbnail\">\n        <ng-content select=\"[igxListThumbnail], .igx-list-item__thumbnail, .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 igx-list__item-lines\">\n        <ng-content select=\"[igxListLine], .igx-list-item__lines, .igx-list__item-lines, [igxListLineTitle], [igxListLineSubTitle], .igx-list-item__title .igx-list__item-line-title, .igx-list-item__subtitle, .igx-list__item-line-subtitle\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #itemActions>\n    <div class=\"igx-list-item__actions igx-list__item-actions\">\n        <ng-content select=\"[igxListAction], .igx-list-item__actions, .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 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: "22.2.0", ngImport: i0, type: IgxListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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)" }, properties: { "attr.aria-label": "this.ariaLabel", "style.touch-action": "this.touchAction", "attr.role": "this.role", "class.igx-list-item": "this.cssClass", "class.igx-list-item--selected": "this.selected", "class.igx-list__item-base--selected": "this.selected", "class.igx-list-item--header": "this.headerStyle", "class.igx-list__header": "this.headerStyle", "class.igx-list-item--base": "this.innerStyle", "class.igx-list__item-base": "this.innerStyle", "class.igx-list-item--active": "this.active", "style.display": "this.display" } }, 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 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 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 igx-list__item-thumbnail\">\n        <ng-content select=\"[igxListThumbnail], .igx-list-item__thumbnail, .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 igx-list__item-lines\">\n        <ng-content select=\"[igxListLine], .igx-list-item__lines, .igx-list__item-lines, [igxListLineTitle], [igxListLineSubTitle], .igx-list-item__title .igx-list__item-line-title, .igx-list-item__subtitle, .igx-list__item-line-subtitle\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #itemActions>\n    <div class=\"igx-list-item__actions igx-list__item-actions\">\n        <ng-content select=\"[igxListAction], .igx-list-item__actions, .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 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: "22.1.7", ngImport: i0, type: IgxListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-list-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "\n@if (!isHeader && list.listItemLeftPanningTemplate) {\n    <div #leftPanningTmpl class=\"igx-list-item__right 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 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 igx-list__item-thumbnail\">\n        <ng-content select=\"[igxListThumbnail], .igx-list-item__thumbnail, .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 igx-list__item-lines\">\n        <ng-content select=\"[igxListLine], .igx-list-item__lines, .igx-list__item-lines, [igxListLineTitle], [igxListLineSubTitle], .igx-list-item__title .igx-list__item-line-title, .igx-list-item__subtitle, .igx-list__item-line-subtitle\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #itemActions>\n    <div class=\"igx-list-item__actions igx-list__item-actions\">\n        <ng-content select=\"[igxListAction], .igx-list-item__actions, .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 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: [{
@@ -585,10 +585,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: "22.1.7", ngImport: i0, type: IgxListThumbnailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxListThumbnailDirective, isStandalone: true, selector: "[igxListThumbnail]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListThumbnailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxListThumbnailDirective, isStandalone: true, selector: "[igxListThumbnail]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxListThumbnailDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListThumbnailDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxListThumbnail]',
@@ -600,10 +600,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", 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: "22.1.7", ngImport: i0, type: IgxListActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxListActionDirective, isStandalone: true, selector: "[igxListAction]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxListActionDirective, isStandalone: true, selector: "[igxListAction]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxListActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListActionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxListAction]',
@@ -615,10 +615,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", 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: "22.1.7", ngImport: i0, type: IgxListLineDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxListLineDirective, isStandalone: true, selector: "[igxListLine]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListLineDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxListLineDirective, isStandalone: true, selector: "[igxListLine]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxListLineDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListLineDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxListLine]',
@@ -633,10 +633,10 @@ class IgxListLineTitleDirective {
     constructor() {
         this.cssClass = 'igx-list__item-line-title';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxListLineTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxListLineTitleDirective, isStandalone: true, selector: "[igxListLineTitle]", host: { properties: { "class.igx-list-item__title": "this.cssClass", "class.igx-list__item-line-title": "this.cssClass" } }, hostDirectives: [{ directive: i1.IgxNoTypographyDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListLineTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxListLineTitleDirective, isStandalone: true, selector: "[igxListLineTitle]", host: { properties: { "class.igx-list-item__title": "this.cssClass", "class.igx-list__item-line-title": "this.cssClass" } }, hostDirectives: [{ directive: i1.IgxNoTypographyDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxListLineTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListLineTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxListLineTitle]',
@@ -658,10 +658,10 @@ class IgxListLineSubTitleDirective {
     constructor() {
         this.cssClass = 'igx-list__item-line-subtitle';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxListLineSubTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxListLineSubTitleDirective, isStandalone: true, selector: "[igxListLineSubTitle]", host: { properties: { "class.igx-list-item__subtitle": "this.cssClass", "class.igx-list__item-line-subtitle": "this.cssClass" } }, hostDirectives: [{ directive: i1.IgxNoTypographyDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListLineSubTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxListLineSubTitleDirective, isStandalone: true, selector: "[igxListLineSubTitle]", host: { properties: { "class.igx-list-item__subtitle": "this.cssClass", "class.igx-list__item-line-subtitle": "this.cssClass" } }, hostDirectives: [{ directive: i1.IgxNoTypographyDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxListLineSubTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListLineSubTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxListLineSubTitle]',
@@ -1000,10 +1000,10 @@ class IgxListComponent extends IgxListBaseDirective {
             return this.emptyListTemplate ? this.emptyListTemplate.template : this.defaultEmptyListTemplate;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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": "this.cssClass", "class.igx-list--empty": "this.isListEmpty" } }, 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", styles: ["@layer ig.base{.igx-list-item__right,.igx-list-item__left{position:absolute;visibility:hidden;display:flex;z-index:1}.igx-list-item--header,.igx-list-item__content{padding-block:var(--_padding-block);padding-inline:var(--_padding-inline)}.igx-list{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--list-size: var(--component-size);position:relative;display:flex;flex-flow:column nowrap;background:var(--background);height:auto;overflow-y:auto;overflow-x:hidden;z-index:0;border-radius:var(--border-radius)}.igx-list:focus-visible{outline-style:none}.igx-list--empty{justify-content:center;align-items:center}.igx-list--empty .igx-list__message{text-align:center;color:var(--item-text-color);padding:1rem;z-index:1}.igx-list-item{--_padding-block: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.125rem, -1 * .125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));--_padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));display:flex;flex-flow:column wrap;justify-content:center}.igx-list-item igx-avatar{--ig-size: 1}.igx-list-item__thumbnail{display:flex;align-items:center;justify-content:center;align-self:center;padding:0;color:var(--item-thumbnail-color);gap:.5rem}.igx-list-item__thumbnail>igx-icon,.igx-list-item__thumbnail>igc-icon{--component-size: var(--list-size)}.igx-list-item__thumbnail igx-avatar igx-icon,.igx-list-item__thumbnail igx-avatar igc-icon{color:var(--item-thumbnail-color)}.igx-list-item__thumbnail:empty{display:none}.igx-list-item__lines{color:currentColor;display:flex;flex-direction:column;flex:1 0 0%;gap:.125rem}.igx-list-item__lines:empty{display:none}.igx-list-item__actions{display:flex;align-items:center;justify-content:center;color:var(--item-action-color);gap:.5rem;margin-inline-start:auto}.igx-list-item__actions:empty{display:none}.igx-list-item__actions>*,.igx-list-item__actions [class^=igx]{--component-size: var(--list-size)}.igx-list-item__actions igc-icon,.igx-list-item__actions igx-icon{color:var(--item-action-color)}[dir=rtl] .igx-list-item__actions igx-icon,[dir=rtl] .igx-list-item__actions igc-icon{transform:scaleX(-1)}.igx-list-item__title{color:var(--item-title-color)}.igx-list-item__subtitle{color:var(--item-subtitle-color)}.igx-list-item__content{--component-size: var(--list-size);display:flex;align-items:center;position:relative;color:var(--item-text-color);background:var(--item-background);transition:background .15s ease-out,transform .3s cubic-bezier(.25,.46,.45,.94);border-radius:var(--item-border-radius);z-index:2;gap:1rem}.igx-list-item--header{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);margin:0;--component-size: var(--list-size);display:flex;color:var(--header-text-color);background:var(--header-background)}.igx-list-item--base{border-radius:var(--item-border-radius);border-bottom:var(--border-width) solid var(--border-color)}.igx-list-item--base:last-of-type{border-bottom:none}.igx-list-item--base:hover .igx-list-item__lines{color:currentColor}.igx-list-item--base:hover .igx-list-item__content{color:var(--item-text-color-hover);background:var(--item-background-hover)}.igx-list-item--base:hover .igx-list-item__title{color:var(--item-title-color-hover)}.igx-list-item--base:hover .igx-list-item__subtitle{color:var(--item-subtitle-color-hover)}.igx-list-item--base:hover .igx-list-item__actions{color:var(--item-action-color-hover)}.igx-list-item--base:hover .igx-list-item__actions igx-icon,.igx-list-item--base:hover .igx-list-item__actions igc-icon{color:var(--item-action-color-hover)}.igx-list-item--base:hover .igx-list-item__thumbnail{color:var(--item-thumbnail-color-hover)}.igx-list-item--base:hover .igx-list-item__thumbnail igx-icon,.igx-list-item--base:hover .igx-list-item__thumbnail igc-icon{color:var(--item-thumbnail-color-hover)}.igx-list-item--base:focus-within .igx-list-item__lines{color:currentColor}.igx-list-item--base:focus-within .igx-list-item__content{color:var(--item-text-color-hover);background:var(--item-background-hover)}.igx-list-item--base:focus-within .igx-list-item__title{color:var(--item-title-color-hover)}.igx-list-item--base:focus-within .igx-list-item__subtitle{color:var(--item-subtitle-color-hover)}.igx-list-item--base:focus-within .igx-list-item__actions{color:var(--item-action-color-hover)}.igx-list-item--base:focus-within .igx-list-item__actions igx-icon,.igx-list-item--base:focus-within .igx-list-item__actions igc-icon{color:var(--item-action-color-hover)}.igx-list-item--base:focus-within .igx-list-item__thumbnail{color:var(--item-thumbnail-color-hover)}.igx-list-item--base:focus-within .igx-list-item__thumbnail igx-icon,.igx-list-item--base:focus-within .igx-list-item__thumbnail igc-icon{color:var(--item-thumbnail-color-hover)}.igx-list-item--base:active .igx-list-item__content{color:var(--item-text-color-active);background:var(--item-background-active);z-index:3}.igx-list-item--base:active .igx-list-item__thumbnail{color:var(--item-thumbnail-color-active)}.igx-list-item--base:active .igx-list-item__thumbnail igx-icon,.igx-list-item--base:active .igx-list-item__thumbnail igc-icon{color:var(--item-thumbnail-color-active)}.igx-list-item--base:active .igx-list-item__title{color:var(--item-title-color-active)}.igx-list-item--base:active .igx-list-item__subtitle{color:var(--item-subtitle-color-active)}.igx-list-item--base:active .igx-list-item__actions{color:var(--item-action-color-active)}.igx-list-item--base:active .igx-list-item__actions igx-icon,.igx-list-item--base:active .igx-list-item__actions igc-icon{color:var(--item-action-color-active)}.igx-list-item--selected .igx-list-item__content{color:var(--item-text-color-selected);background:var(--item-background-selected);z-index:3}.igx-list-item--selected .igx-list-item__thumbnail{color:var(--item-thumbnail-color-selected)}.igx-list-item--selected .igx-list-item__thumbnail igx-icon,.igx-list-item--selected .igx-list-item__thumbnail igc-icon{color:var(--item-thumbnail-color-selected)}.igx-list-item--selected .igx-list-item__title{color:var(--item-title-color-selected)}.igx-list-item--selected .igx-list-item__subtitle{color:var(--item-subtitle-color-selected)}.igx-list-item--selected .igx-list-item__actions{color:var(--item-action-color-selected)}.igx-list-item--selected .igx-list-item__actions igx-icon,.igx-list-item--selected .igx-list-item__actions igc-icon{color:var(--item-action-color-selected)}.igx-list-item--selected:hover .igx-list-item__content{color:var(--item-text-color-selected);background:var(--item-background-selected)}.igx-list-item--selected:hover .igx-list-item__thumbnail{color:var(--item-thumbnail-color-selected)}.igx-list-item--selected:hover .igx-list-item__thumbnail igx-icon,.igx-list-item--selected:hover .igx-list-item__thumbnail igc-icon{color:var(--item-thumbnail-color-selected)}.igx-list-item--selected:hover .igx-list-item__title{color:var(--item-title-color-selected)}.igx-list-item--selected:hover .igx-list-item__subtitle{color:var(--item-subtitle-color-selected)}.igx-list-item--selected:hover .igx-list-item__actions{color:var(--item-action-color-selected)}.igx-list-item--selected:hover .igx-list-item__actions igx-icon,.igx-list-item--selected:hover .igx-list-item__actions igc-icon{color:var(--item-action-color-selected)}.igx-list-item--selected:focus-within .igx-list-item__content{color:var(--item-text-color-selected);background:var(--item-background-selected)}.igx-list-item--selected:focus-within .igx-list-item__thumbnail{color:var(--item-thumbnail-color-selected)}.igx-list-item--selected:focus-within .igx-list-item__thumbnail igx-icon,.igx-list-item--selected:focus-within .igx-list-item__thumbnail igc-icon{color:var(--item-thumbnail-color-selected)}.igx-list-item--selected:focus-within .igx-list-item__title{color:var(--item-title-color-selected)}.igx-list-item--selected:focus-within .igx-list-item__subtitle{color:var(--item-subtitle-color-selected)}.igx-list-item--selected:focus-within .igx-list-item__actions{color:var(--item-action-color-selected)}.igx-list-item--selected:focus-within .igx-list-item__actions igx-icon,.igx-list-item--selected:focus-within .igx-list-item__actions igc-icon{color:var(--item-action-color-selected)}}@layer ig.material{@container style(--ig-theme: material){.igx-list-item igx-checkbox{--composite-padding: 0;--label-margin: .75rem}.igx-list-item__lines,.igx-list-item__title{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}.igx-list-item__subtitle{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-list{border:var(--border-width) solid var(--border-color)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-list-item__lines{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}.igx-list-item__title{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);margin:0}.igx-list-item__subtitle{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-list-item__lines,.igx-list-item__title,.igx-list-item__subtitle{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-list{gap:.25rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-list-item{--_padding-block: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.375rem, -1 * .375rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));--_padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-list-item igx-avatar{--ig-size: 2}.igx-list-item__lines,.igx-list-item__title,.igx-list-item__subtitle{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}.igx-list-item__thumbnail>igx-icon,.igx-list-item__thumbnail>igc-icon{--component-size: 2}.igx-list-item__content{gap:.5rem}.igx-list-item__actions{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.25rem,-1 * .25rem))}.igx-list-item__actions>*{--component-size: 2}.igx-list-item--header{min-height:max(var(--is-large, 1)*max(2rem,-1 * 2rem),var(--is-medium, 1)*max(1.75rem,-1 * 1.75rem),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem))}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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": "this.cssClass", "class.igx-list--empty": "this.isListEmpty" } }, 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", styles: ["@layer ig.base{.igx-list-item__right,.igx-list-item__left{position:absolute;visibility:hidden;display:flex;z-index:1}.igx-list-item--header,.igx-list-item__content{padding-block:var(--_padding-block);padding-inline:var(--_padding-inline)}.igx-list{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--list-size: var(--component-size);position:relative;display:flex;flex-flow:column nowrap;background:var(--background);height:auto;overflow-y:auto;overflow-x:hidden;z-index:0;border-radius:var(--border-radius)}.igx-list:focus-visible{outline-style:none}.igx-list--empty{justify-content:center;align-items:center}.igx-list--empty .igx-list__message{text-align:center;color:var(--item-text-color);padding:1rem;z-index:1}.igx-list-item{--_padding-block: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.125rem, -1 * .125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));--_padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));display:flex;flex-flow:column wrap;justify-content:center}.igx-list-item igx-avatar{--ig-size: 1}.igx-list-item__thumbnail{display:flex;align-items:center;justify-content:center;align-self:center;padding:0;color:var(--item-thumbnail-color);gap:.5rem}.igx-list-item__thumbnail>igx-icon,.igx-list-item__thumbnail>igc-icon{--component-size: var(--list-size)}.igx-list-item__thumbnail igx-avatar igx-icon,.igx-list-item__thumbnail igx-avatar igc-icon{color:var(--item-thumbnail-color)}.igx-list-item__thumbnail:empty{display:none}.igx-list-item__lines{color:currentColor;display:flex;flex-direction:column;flex:1 0 0%;gap:.125rem}.igx-list-item__lines:empty{display:none}.igx-list-item__actions{display:flex;align-items:center;justify-content:center;color:var(--item-action-color);gap:.5rem;margin-inline-start:auto}.igx-list-item__actions:empty{display:none}.igx-list-item__actions>*,.igx-list-item__actions [class^=igx]{--component-size: var(--list-size)}.igx-list-item__actions igc-icon,.igx-list-item__actions igx-icon{color:var(--item-action-color)}[dir=rtl] .igx-list-item__actions igx-icon,[dir=rtl] .igx-list-item__actions igc-icon{transform:scaleX(-1)}.igx-list-item__title{color:var(--item-title-color)}.igx-list-item__subtitle{color:var(--item-subtitle-color)}.igx-list-item__content{--component-size: var(--list-size);display:flex;align-items:center;position:relative;color:var(--item-text-color);background:var(--item-background);transition:background .15s ease-out,transform .3s cubic-bezier(.25,.46,.45,.94);border-radius:var(--item-border-radius);z-index:2;gap:1rem}.igx-list-item--header{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);margin:0;--component-size: var(--list-size);display:flex;color:var(--header-text-color);background:var(--header-background)}.igx-list-item--base{border-radius:var(--item-border-radius);border-bottom:var(--border-width) solid var(--border-color)}.igx-list-item--base:last-of-type{border-bottom:none}.igx-list-item--base:hover .igx-list-item__lines{color:currentColor}.igx-list-item--base:hover .igx-list-item__content{color:var(--item-text-color-hover);background:var(--item-background-hover)}.igx-list-item--base:hover .igx-list-item__title{color:var(--item-title-color-hover)}.igx-list-item--base:hover .igx-list-item__subtitle{color:var(--item-subtitle-color-hover)}.igx-list-item--base:hover .igx-list-item__actions{color:var(--item-action-color-hover)}.igx-list-item--base:hover .igx-list-item__actions igx-icon,.igx-list-item--base:hover .igx-list-item__actions igc-icon{color:var(--item-action-color-hover)}.igx-list-item--base:hover .igx-list-item__thumbnail{color:var(--item-thumbnail-color-hover)}.igx-list-item--base:hover .igx-list-item__thumbnail igx-icon,.igx-list-item--base:hover .igx-list-item__thumbnail igc-icon{color:var(--item-thumbnail-color-hover)}.igx-list-item--base:focus-within .igx-list-item__lines{color:currentColor}.igx-list-item--base:focus-within .igx-list-item__content{color:var(--item-text-color-hover);background:var(--item-background-hover)}.igx-list-item--base:focus-within .igx-list-item__title{color:var(--item-title-color-hover)}.igx-list-item--base:focus-within .igx-list-item__subtitle{color:var(--item-subtitle-color-hover)}.igx-list-item--base:focus-within .igx-list-item__actions{color:var(--item-action-color-hover)}.igx-list-item--base:focus-within .igx-list-item__actions igx-icon,.igx-list-item--base:focus-within .igx-list-item__actions igc-icon{color:var(--item-action-color-hover)}.igx-list-item--base:focus-within .igx-list-item__thumbnail{color:var(--item-thumbnail-color-hover)}.igx-list-item--base:focus-within .igx-list-item__thumbnail igx-icon,.igx-list-item--base:focus-within .igx-list-item__thumbnail igc-icon{color:var(--item-thumbnail-color-hover)}.igx-list-item--base:active .igx-list-item__content{color:var(--item-text-color-active);background:var(--item-background-active);z-index:3}.igx-list-item--base:active .igx-list-item__thumbnail{color:var(--item-thumbnail-color-active)}.igx-list-item--base:active .igx-list-item__thumbnail igx-icon,.igx-list-item--base:active .igx-list-item__thumbnail igc-icon{color:var(--item-thumbnail-color-active)}.igx-list-item--base:active .igx-list-item__title{color:var(--item-title-color-active)}.igx-list-item--base:active .igx-list-item__subtitle{color:var(--item-subtitle-color-active)}.igx-list-item--base:active .igx-list-item__actions{color:var(--item-action-color-active)}.igx-list-item--base:active .igx-list-item__actions igx-icon,.igx-list-item--base:active .igx-list-item__actions igc-icon{color:var(--item-action-color-active)}.igx-list-item--selected .igx-list-item__content{color:var(--item-text-color-selected);background:var(--item-background-selected);z-index:3}.igx-list-item--selected .igx-list-item__thumbnail{color:var(--item-thumbnail-color-selected)}.igx-list-item--selected .igx-list-item__thumbnail igx-icon,.igx-list-item--selected .igx-list-item__thumbnail igc-icon{color:var(--item-thumbnail-color-selected)}.igx-list-item--selected .igx-list-item__title{color:var(--item-title-color-selected)}.igx-list-item--selected .igx-list-item__subtitle{color:var(--item-subtitle-color-selected)}.igx-list-item--selected .igx-list-item__actions{color:var(--item-action-color-selected)}.igx-list-item--selected .igx-list-item__actions igx-icon,.igx-list-item--selected .igx-list-item__actions igc-icon{color:var(--item-action-color-selected)}.igx-list-item--selected:hover .igx-list-item__content{color:var(--item-text-color-selected);background:var(--item-background-selected)}.igx-list-item--selected:hover .igx-list-item__thumbnail{color:var(--item-thumbnail-color-selected)}.igx-list-item--selected:hover .igx-list-item__thumbnail igx-icon,.igx-list-item--selected:hover .igx-list-item__thumbnail igc-icon{color:var(--item-thumbnail-color-selected)}.igx-list-item--selected:hover .igx-list-item__title{color:var(--item-title-color-selected)}.igx-list-item--selected:hover .igx-list-item__subtitle{color:var(--item-subtitle-color-selected)}.igx-list-item--selected:hover .igx-list-item__actions{color:var(--item-action-color-selected)}.igx-list-item--selected:hover .igx-list-item__actions igx-icon,.igx-list-item--selected:hover .igx-list-item__actions igc-icon{color:var(--item-action-color-selected)}.igx-list-item--selected:focus-within .igx-list-item__content{color:var(--item-text-color-selected);background:var(--item-background-selected)}.igx-list-item--selected:focus-within .igx-list-item__thumbnail{color:var(--item-thumbnail-color-selected)}.igx-list-item--selected:focus-within .igx-list-item__thumbnail igx-icon,.igx-list-item--selected:focus-within .igx-list-item__thumbnail igc-icon{color:var(--item-thumbnail-color-selected)}.igx-list-item--selected:focus-within .igx-list-item__title{color:var(--item-title-color-selected)}.igx-list-item--selected:focus-within .igx-list-item__subtitle{color:var(--item-subtitle-color-selected)}.igx-list-item--selected:focus-within .igx-list-item__actions{color:var(--item-action-color-selected)}.igx-list-item--selected:focus-within .igx-list-item__actions igx-icon,.igx-list-item--selected:focus-within .igx-list-item__actions igc-icon{color:var(--item-action-color-selected)}}@layer ig.material{@container style(--ig-theme: material){.igx-list-item igx-checkbox{--composite-padding: 0;--label-margin: .75rem}.igx-list-item__lines,.igx-list-item__title{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}.igx-list-item__subtitle{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-list{border:var(--border-width) solid var(--border-color)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-list-item__lines{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}.igx-list-item__title{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);margin:0}.igx-list-item__subtitle{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-list-item__lines,.igx-list-item__title,.igx-list-item__subtitle{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-list{gap:.25rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-list-item{--_padding-block: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.375rem, -1 * .375rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));--_padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-list-item igx-avatar{--ig-size: 2}.igx-list-item__lines,.igx-list-item__title,.igx-list-item__subtitle{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}.igx-list-item__thumbnail>igx-icon,.igx-list-item__thumbnail>igc-icon{--component-size: 2}.igx-list-item__content{gap:.5rem}.igx-list-item__actions{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.25rem,-1 * .25rem))}.igx-list-item__actions>*{--component-size: 2}.igx-list-item--header{min-height:max(var(--is-large, 1)*max(2rem,-1 * 2rem),var(--is-medium, 1)*max(1.75rem,-1 * 1.75rem),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem))}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-list', providers: [{ provide: IgxListBaseDirective, useExisting: IgxListComponent }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, 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", styles: ["@layer ig.base{.igx-list-item__right,.igx-list-item__left{position:absolute;visibility:hidden;display:flex;z-index:1}.igx-list-item--header,.igx-list-item__content{padding-block:var(--_padding-block);padding-inline:var(--_padding-inline)}.igx-list{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--list-size: var(--component-size);position:relative;display:flex;flex-flow:column nowrap;background:var(--background);height:auto;overflow-y:auto;overflow-x:hidden;z-index:0;border-radius:var(--border-radius)}.igx-list:focus-visible{outline-style:none}.igx-list--empty{justify-content:center;align-items:center}.igx-list--empty .igx-list__message{text-align:center;color:var(--item-text-color);padding:1rem;z-index:1}.igx-list-item{--_padding-block: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.125rem, -1 * .125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));--_padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-medium, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))), var(--is-small, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));display:flex;flex-flow:column wrap;justify-content:center}.igx-list-item igx-avatar{--ig-size: 1}.igx-list-item__thumbnail{display:flex;align-items:center;justify-content:center;align-self:center;padding:0;color:var(--item-thumbnail-color);gap:.5rem}.igx-list-item__thumbnail>igx-icon,.igx-list-item__thumbnail>igc-icon{--component-size: var(--list-size)}.igx-list-item__thumbnail igx-avatar igx-icon,.igx-list-item__thumbnail igx-avatar igc-icon{color:var(--item-thumbnail-color)}.igx-list-item__thumbnail:empty{display:none}.igx-list-item__lines{color:currentColor;display:flex;flex-direction:column;flex:1 0 0%;gap:.125rem}.igx-list-item__lines:empty{display:none}.igx-list-item__actions{display:flex;align-items:center;justify-content:center;color:var(--item-action-color);gap:.5rem;margin-inline-start:auto}.igx-list-item__actions:empty{display:none}.igx-list-item__actions>*,.igx-list-item__actions [class^=igx]{--component-size: var(--list-size)}.igx-list-item__actions igc-icon,.igx-list-item__actions igx-icon{color:var(--item-action-color)}[dir=rtl] .igx-list-item__actions igx-icon,[dir=rtl] .igx-list-item__actions igc-icon{transform:scaleX(-1)}.igx-list-item__title{color:var(--item-title-color)}.igx-list-item__subtitle{color:var(--item-subtitle-color)}.igx-list-item__content{--component-size: var(--list-size);display:flex;align-items:center;position:relative;color:var(--item-text-color);background:var(--item-background);transition:background .15s ease-out,transform .3s cubic-bezier(.25,.46,.45,.94);border-radius:var(--item-border-radius);z-index:2;gap:1rem}.igx-list-item--header{font-family:var(--ig-overline-font-family, var(--ig-font-family));font-size:var(--ig-overline-font-size);font-weight:var(--ig-overline-font-weight);font-style:var(--ig-overline-font-style);line-height:var(--ig-overline-line-height);letter-spacing:var(--ig-overline-letter-spacing);text-transform:var(--ig-overline-text-transform);margin-top:var(--ig-overline-margin-top);margin-bottom:var(--ig-overline-margin-bottom);margin:0;--component-size: var(--list-size);display:flex;color:var(--header-text-color);background:var(--header-background)}.igx-list-item--base{border-radius:var(--item-border-radius);border-bottom:var(--border-width) solid var(--border-color)}.igx-list-item--base:last-of-type{border-bottom:none}.igx-list-item--base:hover .igx-list-item__lines{color:currentColor}.igx-list-item--base:hover .igx-list-item__content{color:var(--item-text-color-hover);background:var(--item-background-hover)}.igx-list-item--base:hover .igx-list-item__title{color:var(--item-title-color-hover)}.igx-list-item--base:hover .igx-list-item__subtitle{color:var(--item-subtitle-color-hover)}.igx-list-item--base:hover .igx-list-item__actions{color:var(--item-action-color-hover)}.igx-list-item--base:hover .igx-list-item__actions igx-icon,.igx-list-item--base:hover .igx-list-item__actions igc-icon{color:var(--item-action-color-hover)}.igx-list-item--base:hover .igx-list-item__thumbnail{color:var(--item-thumbnail-color-hover)}.igx-list-item--base:hover .igx-list-item__thumbnail igx-icon,.igx-list-item--base:hover .igx-list-item__thumbnail igc-icon{color:var(--item-thumbnail-color-hover)}.igx-list-item--base:focus-within .igx-list-item__lines{color:currentColor}.igx-list-item--base:focus-within .igx-list-item__content{color:var(--item-text-color-hover);background:var(--item-background-hover)}.igx-list-item--base:focus-within .igx-list-item__title{color:var(--item-title-color-hover)}.igx-list-item--base:focus-within .igx-list-item__subtitle{color:var(--item-subtitle-color-hover)}.igx-list-item--base:focus-within .igx-list-item__actions{color:var(--item-action-color-hover)}.igx-list-item--base:focus-within .igx-list-item__actions igx-icon,.igx-list-item--base:focus-within .igx-list-item__actions igc-icon{color:var(--item-action-color-hover)}.igx-list-item--base:focus-within .igx-list-item__thumbnail{color:var(--item-thumbnail-color-hover)}.igx-list-item--base:focus-within .igx-list-item__thumbnail igx-icon,.igx-list-item--base:focus-within .igx-list-item__thumbnail igc-icon{color:var(--item-thumbnail-color-hover)}.igx-list-item--base:active .igx-list-item__content{color:var(--item-text-color-active);background:var(--item-background-active);z-index:3}.igx-list-item--base:active .igx-list-item__thumbnail{color:var(--item-thumbnail-color-active)}.igx-list-item--base:active .igx-list-item__thumbnail igx-icon,.igx-list-item--base:active .igx-list-item__thumbnail igc-icon{color:var(--item-thumbnail-color-active)}.igx-list-item--base:active .igx-list-item__title{color:var(--item-title-color-active)}.igx-list-item--base:active .igx-list-item__subtitle{color:var(--item-subtitle-color-active)}.igx-list-item--base:active .igx-list-item__actions{color:var(--item-action-color-active)}.igx-list-item--base:active .igx-list-item__actions igx-icon,.igx-list-item--base:active .igx-list-item__actions igc-icon{color:var(--item-action-color-active)}.igx-list-item--selected .igx-list-item__content{color:var(--item-text-color-selected);background:var(--item-background-selected);z-index:3}.igx-list-item--selected .igx-list-item__thumbnail{color:var(--item-thumbnail-color-selected)}.igx-list-item--selected .igx-list-item__thumbnail igx-icon,.igx-list-item--selected .igx-list-item__thumbnail igc-icon{color:var(--item-thumbnail-color-selected)}.igx-list-item--selected .igx-list-item__title{color:var(--item-title-color-selected)}.igx-list-item--selected .igx-list-item__subtitle{color:var(--item-subtitle-color-selected)}.igx-list-item--selected .igx-list-item__actions{color:var(--item-action-color-selected)}.igx-list-item--selected .igx-list-item__actions igx-icon,.igx-list-item--selected .igx-list-item__actions igc-icon{color:var(--item-action-color-selected)}.igx-list-item--selected:hover .igx-list-item__content{color:var(--item-text-color-selected);background:var(--item-background-selected)}.igx-list-item--selected:hover .igx-list-item__thumbnail{color:var(--item-thumbnail-color-selected)}.igx-list-item--selected:hover .igx-list-item__thumbnail igx-icon,.igx-list-item--selected:hover .igx-list-item__thumbnail igc-icon{color:var(--item-thumbnail-color-selected)}.igx-list-item--selected:hover .igx-list-item__title{color:var(--item-title-color-selected)}.igx-list-item--selected:hover .igx-list-item__subtitle{color:var(--item-subtitle-color-selected)}.igx-list-item--selected:hover .igx-list-item__actions{color:var(--item-action-color-selected)}.igx-list-item--selected:hover .igx-list-item__actions igx-icon,.igx-list-item--selected:hover .igx-list-item__actions igc-icon{color:var(--item-action-color-selected)}.igx-list-item--selected:focus-within .igx-list-item__content{color:var(--item-text-color-selected);background:var(--item-background-selected)}.igx-list-item--selected:focus-within .igx-list-item__thumbnail{color:var(--item-thumbnail-color-selected)}.igx-list-item--selected:focus-within .igx-list-item__thumbnail igx-icon,.igx-list-item--selected:focus-within .igx-list-item__thumbnail igc-icon{color:var(--item-thumbnail-color-selected)}.igx-list-item--selected:focus-within .igx-list-item__title{color:var(--item-title-color-selected)}.igx-list-item--selected:focus-within .igx-list-item__subtitle{color:var(--item-subtitle-color-selected)}.igx-list-item--selected:focus-within .igx-list-item__actions{color:var(--item-action-color-selected)}.igx-list-item--selected:focus-within .igx-list-item__actions igx-icon,.igx-list-item--selected:focus-within .igx-list-item__actions igc-icon{color:var(--item-action-color-selected)}}@layer ig.material{@container style(--ig-theme: material){.igx-list-item igx-checkbox{--composite-padding: 0;--label-margin: .75rem}.igx-list-item__lines,.igx-list-item__title{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin:0}.igx-list-item__subtitle{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-list{border:var(--border-width) solid var(--border-color)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-list-item__lines{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}.igx-list-item__title{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);margin:0}.igx-list-item__subtitle{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-list-item__lines,.igx-list-item__title,.igx-list-item__subtitle{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-list{gap:.25rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-list-item{--_padding-block: max(var(--is-large, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.375rem, -1 * .375rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.25rem, -1 * .25rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));--_padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))), var(--is-medium, 1) * max(.75rem, -1 * .75rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))), var(--is-small, 1) * max(.5rem, -1 * .5rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-list-item igx-avatar{--ig-size: 2}.igx-list-item__lines,.igx-list-item__title,.igx-list-item__subtitle{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin:0}.igx-list-item__thumbnail>igx-icon,.igx-list-item__thumbnail>igc-icon{--component-size: 2}.igx-list-item__content{gap:.5rem}.igx-list-item__actions{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.25rem,-1 * .25rem))}.igx-list-item__actions>*{--component-size: 2}.igx-list-item--header{min-height:max(var(--is-large, 1)*max(2rem,-1 * 2rem),var(--is-medium, 1)*max(1.75rem,-1 * 1.75rem),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem))}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { children: [{
@@ -1092,11 +1092,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: "22.1.7", ngImport: i0, type: IgxListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", 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: "22.1.7", ngImport: i0, type: IgxListModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", 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: "22.2.0", ngImport: i0, type: IgxListModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/igniteui-angular-navbar.mjs

@@ -8,10 +8,10 @@ import { IgxNoTypographyDirective } from 'igniteui-angular/directives';
  * Action icon is a container for the action nav icon of the navbar.
  */
 class IgxNavbarActionDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNavbarActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxNavbarActionDirective, isStandalone: true, selector: "[igxNavbarAction],igx-navbar-action", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxNavbarActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxNavbarActionDirective, isStandalone: true, selector: "[igxNavbarAction],igx-navbar-action", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNavbarActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxNavbarActionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxNavbarAction],igx-navbar-action',
@@ -19,10 +19,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }] });
 class IgxNavbarTitleDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNavbarTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxNavbarTitleDirective, isStandalone: true, selector: "[igxNavbarTitle],igx-navbar-title", hostDirectives: [{ directive: i1.IgxNoTypographyDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxNavbarTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxNavbarTitleDirective, isStandalone: true, selector: "[igxNavbarTitle],igx-navbar-title", hostDirectives: [{ directive: i1.IgxNoTypographyDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNavbarTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxNavbarTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxNavbarTitle],igx-navbar-title',
@@ -118,10 +118,10 @@ class IgxNavbarComponent {
     _triggerAction() {
         this.action.emit(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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", "class.igx-navbar": "this.cssClass" } }, 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 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                data-no-typography\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: ["@layer ig.base{.igx-navbar__title,igx-navbar-title,[igxNavbarTitle]{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom);display:-webkit-inline-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:0;flex-grow:1;-webkit-user-select:text;-moz-user-select:text;user-select:text;display:flex;flex-direction:row}.igx-navbar__right,.igx-navbar__middle,.igx-navbar__left{display:flex;align-items:center}.igx-navbar__right>igx-icon,.igx-navbar__middle>igx-icon,.igx-navbar__left>igx-icon,.igx-navbar__right>igc-icon,.igx-navbar__middle>igc-icon,.igx-navbar__left>igc-icon{--component-size: var(--ig-size-large);cursor:pointer}.igx-navbar__right>igx-icon,.igx-navbar__middle>igx-icon,.igx-navbar__left>igx-icon,.igx-navbar__right>igc-icon,.igx-navbar__middle>igc-icon,.igx-navbar__left>igc-icon{transition:color .15s cubic-bezier(.25,.46,.45,.94);color:var(--idle-icon-color)}.igx-navbar__right>igx-icon:hover,.igx-navbar__middle>igx-icon:hover,.igx-navbar__left>igx-icon:hover,.igx-navbar__right>igc-icon:hover,.igx-navbar__middle>igc-icon:hover,.igx-navbar__left>igc-icon:hover{color:var(--hover-icon-color)}.igx-navbar__right>igx-icon,.igx-navbar__middle>igx-icon,.igx-navbar__left>igx-icon,.igx-navbar__right>igc-icon,.igx-navbar__middle>igc-icon,.igx-navbar__left>igc-icon{-webkit-user-select:none;-moz-user-select:none;user-select:none}igx-navbar-action,[igxNavbarAction]{display:flex;align-items:center}igx-navbar-title,[igxNavbarTitle]{align-items:center}.igx-navbar{display:block;width:100%}.igx-navbar nav{display:flex;align-items:center;position:relative;flex-flow:row nowrap;gap:1rem;min-height:3.5rem;padding-inline:1rem;max-height:8rem;z-index:4;overflow:hidden;background:var(--background);color:var(--text-color);box-shadow:var(--elevation);border-bottom:.0625rem solid var(--border-color)}.igx-navbar igx-avatar{--ig-size: 1}.igx-navbar [igxIconButton],.igx-navbar igc-icon-button{--ig-size: 2}.igx-navbar__left:not(:empty){margin-inline-end:1rem}.igx-navbar__left:empty{display:none}.igx-navbar__middle{flex-grow:1}.igx-navbar__right{gap:1rem}.igx-navbar__right:empty{display:none}}@layer ig.material{@container style(--ig-theme: material){.igx-navbar igx-input-group{--ig-size: 1}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-navbar__title{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin:0}.igx-navbar igx-navbar-title,.igx-navbar [igxNavbarTitle]{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin:0}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-navbar__title{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}.igx-navbar igx-navbar-title,.igx-navbar [igxNavbarTitle]{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-navbar .igx-navbar__left [igxIconButton],.igx-navbar .igx-navbar__right [igxIconButton],.igx-navbar .igx-navbar__title [igxIconButton],.igx-navbar .igx-navbar__left igc-icon-button,.igx-navbar .igx-navbar__right igc-icon-button,.igx-navbar .igx-navbar__title igc-icon-button{padding:.375rem}.igx-navbar .igx-navbar__left>igx-icon,.igx-navbar .igx-navbar__right>igx-icon,.igx-navbar .igx-navbar__title>igx-icon,.igx-navbar .igx-navbar__left>igc-icon,.igx-navbar .igx-navbar__right>igc-icon,.igx-navbar .igx-navbar__title>igc-icon{--component-size: var(--ig-size-medium);--size: auto}.igx-navbar igx-avatar{--ig-size: 2}.igx-navbar igx-navbar-title,.igx-navbar [igxNavbarTitle]{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom)}.igx-navbar__title{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom)}.igx-navbar__right{gap:.5rem}.igx-navbar__left:not(:empty){margin-inline-end:unset}}}\n"], dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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", "class.igx-navbar": "this.cssClass" } }, 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 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                data-no-typography\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: ["@layer ig.base{.igx-navbar__title,igx-navbar-title,[igxNavbarTitle]{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom);display:-webkit-inline-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:0;flex-grow:1;-webkit-user-select:text;-moz-user-select:text;user-select:text;display:flex;flex-direction:row}.igx-navbar__right,.igx-navbar__middle,.igx-navbar__left{display:flex;align-items:center}.igx-navbar__right>igx-icon,.igx-navbar__middle>igx-icon,.igx-navbar__left>igx-icon,.igx-navbar__right>igc-icon,.igx-navbar__middle>igc-icon,.igx-navbar__left>igc-icon{--component-size: var(--ig-size-large);cursor:pointer}.igx-navbar__right>igx-icon,.igx-navbar__middle>igx-icon,.igx-navbar__left>igx-icon,.igx-navbar__right>igc-icon,.igx-navbar__middle>igc-icon,.igx-navbar__left>igc-icon{transition:color .15s cubic-bezier(.25,.46,.45,.94);color:var(--idle-icon-color)}.igx-navbar__right>igx-icon:hover,.igx-navbar__middle>igx-icon:hover,.igx-navbar__left>igx-icon:hover,.igx-navbar__right>igc-icon:hover,.igx-navbar__middle>igc-icon:hover,.igx-navbar__left>igc-icon:hover{color:var(--hover-icon-color)}.igx-navbar__right>igx-icon,.igx-navbar__middle>igx-icon,.igx-navbar__left>igx-icon,.igx-navbar__right>igc-icon,.igx-navbar__middle>igc-icon,.igx-navbar__left>igc-icon{-webkit-user-select:none;-moz-user-select:none;user-select:none}igx-navbar-action,[igxNavbarAction]{display:flex;align-items:center}igx-navbar-title,[igxNavbarTitle]{align-items:center}.igx-navbar{display:block;width:100%}.igx-navbar nav{display:flex;align-items:center;position:relative;flex-flow:row nowrap;gap:1rem;min-height:3.5rem;padding-inline:1rem;max-height:8rem;z-index:4;overflow:hidden;background:var(--background);color:var(--text-color);box-shadow:var(--elevation);border-bottom:.0625rem solid var(--border-color)}.igx-navbar igx-avatar{--ig-size: 1}.igx-navbar [igxIconButton],.igx-navbar igc-icon-button{--ig-size: 2}.igx-navbar__left:not(:empty){margin-inline-end:1rem}.igx-navbar__left:empty{display:none}.igx-navbar__middle{flex-grow:1}.igx-navbar__right{gap:1rem}.igx-navbar__right:empty{display:none}}@layer ig.material{@container style(--ig-theme: material){.igx-navbar igx-input-group{--ig-size: 1}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-navbar__title{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin:0}.igx-navbar igx-navbar-title,.igx-navbar [igxNavbarTitle]{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin:0}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-navbar__title{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}.igx-navbar igx-navbar-title,.igx-navbar [igxNavbarTitle]{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-navbar .igx-navbar__left [igxIconButton],.igx-navbar .igx-navbar__right [igxIconButton],.igx-navbar .igx-navbar__title [igxIconButton],.igx-navbar .igx-navbar__left igc-icon-button,.igx-navbar .igx-navbar__right igc-icon-button,.igx-navbar .igx-navbar__title igc-icon-button{padding:.375rem}.igx-navbar .igx-navbar__left>igx-icon,.igx-navbar .igx-navbar__right>igx-icon,.igx-navbar .igx-navbar__title>igx-icon,.igx-navbar .igx-navbar__left>igc-icon,.igx-navbar .igx-navbar__right>igc-icon,.igx-navbar .igx-navbar__title>igc-icon{--component-size: var(--ig-size-medium);--size: auto}.igx-navbar igx-avatar{--ig-size: 2}.igx-navbar igx-navbar-title,.igx-navbar [igxNavbarTitle]{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom)}.igx-navbar__title{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom)}.igx-navbar__right{gap:.5rem}.igx-navbar__left:not(:empty){margin-inline-end:unset}}}\n"], dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxNavbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-navbar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxIconComponent], template: "<nav 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                data-no-typography\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: ["@layer ig.base{.igx-navbar__title,igx-navbar-title,[igxNavbarTitle]{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom);display:-webkit-inline-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:0;flex-grow:1;-webkit-user-select:text;-moz-user-select:text;user-select:text;display:flex;flex-direction:row}.igx-navbar__right,.igx-navbar__middle,.igx-navbar__left{display:flex;align-items:center}.igx-navbar__right>igx-icon,.igx-navbar__middle>igx-icon,.igx-navbar__left>igx-icon,.igx-navbar__right>igc-icon,.igx-navbar__middle>igc-icon,.igx-navbar__left>igc-icon{--component-size: var(--ig-size-large);cursor:pointer}.igx-navbar__right>igx-icon,.igx-navbar__middle>igx-icon,.igx-navbar__left>igx-icon,.igx-navbar__right>igc-icon,.igx-navbar__middle>igc-icon,.igx-navbar__left>igc-icon{transition:color .15s cubic-bezier(.25,.46,.45,.94);color:var(--idle-icon-color)}.igx-navbar__right>igx-icon:hover,.igx-navbar__middle>igx-icon:hover,.igx-navbar__left>igx-icon:hover,.igx-navbar__right>igc-icon:hover,.igx-navbar__middle>igc-icon:hover,.igx-navbar__left>igc-icon:hover{color:var(--hover-icon-color)}.igx-navbar__right>igx-icon,.igx-navbar__middle>igx-icon,.igx-navbar__left>igx-icon,.igx-navbar__right>igc-icon,.igx-navbar__middle>igc-icon,.igx-navbar__left>igc-icon{-webkit-user-select:none;-moz-user-select:none;user-select:none}igx-navbar-action,[igxNavbarAction]{display:flex;align-items:center}igx-navbar-title,[igxNavbarTitle]{align-items:center}.igx-navbar{display:block;width:100%}.igx-navbar nav{display:flex;align-items:center;position:relative;flex-flow:row nowrap;gap:1rem;min-height:3.5rem;padding-inline:1rem;max-height:8rem;z-index:4;overflow:hidden;background:var(--background);color:var(--text-color);box-shadow:var(--elevation);border-bottom:.0625rem solid var(--border-color)}.igx-navbar igx-avatar{--ig-size: 1}.igx-navbar [igxIconButton],.igx-navbar igc-icon-button{--ig-size: 2}.igx-navbar__left:not(:empty){margin-inline-end:1rem}.igx-navbar__left:empty{display:none}.igx-navbar__middle{flex-grow:1}.igx-navbar__right{gap:1rem}.igx-navbar__right:empty{display:none}}@layer ig.material{@container style(--ig-theme: material){.igx-navbar igx-input-group{--ig-size: 1}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-navbar__title{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin:0}.igx-navbar igx-navbar-title,.igx-navbar [igxNavbarTitle]{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin:0}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-navbar__title{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}.igx-navbar igx-navbar-title,.igx-navbar [igxNavbarTitle]{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-navbar .igx-navbar__left [igxIconButton],.igx-navbar .igx-navbar__right [igxIconButton],.igx-navbar .igx-navbar__title [igxIconButton],.igx-navbar .igx-navbar__left igc-icon-button,.igx-navbar .igx-navbar__right igc-icon-button,.igx-navbar .igx-navbar__title igc-icon-button{padding:.375rem}.igx-navbar .igx-navbar__left>igx-icon,.igx-navbar .igx-navbar__right>igx-icon,.igx-navbar .igx-navbar__title>igx-icon,.igx-navbar .igx-navbar__left>igc-icon,.igx-navbar .igx-navbar__right>igc-icon,.igx-navbar .igx-navbar__title>igc-icon{--component-size: var(--ig-size-medium);--size: auto}.igx-navbar igx-avatar{--ig-size: 2}.igx-navbar igx-navbar-title,.igx-navbar [igxNavbarTitle]{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom)}.igx-navbar__title{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom)}.igx-navbar__right{gap:.5rem}.igx-navbar__left:not(:empty){margin-inline-end:unset}}}\n"] }]
         }], propDecorators: { id: [{
@@ -163,11 +163,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: "22.1.7", ngImport: i0, type: IgxNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxNavbarModule, imports: [IgxNavbarComponent, IgxNavbarActionDirective, IgxNavbarTitleDirective], exports: [IgxNavbarComponent, IgxNavbarActionDirective, IgxNavbarTitleDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNavbarModule, imports: [IgxNavbarComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxNavbarModule, imports: [IgxNavbarComponent, IgxNavbarActionDirective, IgxNavbarTitleDirective], exports: [IgxNavbarComponent, IgxNavbarActionDirective, IgxNavbarTitleDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxNavbarModule, imports: [IgxNavbarComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxNavbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxNavbarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [