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

package/fesm2022/igniteui-angular-tabs.mjs

@@ -3,7 +3,8 @@ import { inject, EventEmitter, booleanAttribute, Input, Output, ViewChild, Conte
 import { CarouselAnimationDirection, IgxCarouselComponentBase } from 'igniteui-angular/carousel';
 import { PlatformUtil, isLeftToRight, getResizeObserver } from 'igniteui-angular/core';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
-import { IgxRippleDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';
+import * as i1 from 'igniteui-angular/directives';
+import { IgxRippleDirective, IgxIconButtonDirective, IgxNoTypographyDirective } from 'igniteui-angular/directives';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 import * as i6 from 'igniteui-angular/input-group';
 import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
@@ -50,10 +51,10 @@ class IgxTabItemDirective {
             this.selectedChange.emit(this._selected);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.0", type: IgxTabItemDirective, isStandalone: true, inputs: { disabled: ["disabled", "disabled", booleanAttribute], selected: ["selected", "selected", booleanAttribute] }, outputs: { selectedChange: "selectedChange" }, queries: [{ propertyName: "headerComponent", first: true, predicate: IgxTabHeaderBase, descendants: true }, { propertyName: "panelComponent", first: true, predicate: IgxTabContentBase, descendants: true }], viewQueries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true, static: true }, { propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, static: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", type: IgxTabItemDirective, isStandalone: true, inputs: { disabled: ["disabled", "disabled", booleanAttribute], selected: ["selected", "selected", booleanAttribute] }, outputs: { selectedChange: "selectedChange" }, queries: [{ propertyName: "headerComponent", first: true, predicate: IgxTabHeaderBase, descendants: true }, { propertyName: "panelComponent", first: true, predicate: IgxTabContentBase, descendants: true }], viewQueries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true, static: true }, { propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, static: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabItemDirective, decorators: [{
             type: Directive
         }], propDecorators: { headerComponent: [{
                 type: ContentChild,
@@ -98,10 +99,10 @@ class IgxTabContentDirective {
     get nativeElement() {
         return this.elementRef.nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: IgxTabContentDirective, isStandalone: true, host: { properties: { "attr.role": "this.role", "attr.tabindex": "this.tabIndex", "style.z-index": "this.zIndex" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxTabContentDirective, isStandalone: true, host: { properties: { "attr.role": "this.role", "attr.tabindex": "this.tabIndex", "style.z-index": "this.zIndex" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabContentDirective, decorators: [{
             type: Directive
         }], propDecorators: { role: [{
                 type: HostBinding,
@@ -120,10 +121,10 @@ class IgxTabContentComponent extends IgxTabContentDirective {
         /** @hidden */
         this.cssClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: IgxTabContentComponent, isStandalone: true, selector: "igx-tab-content", host: { properties: { "class.igx-tabs-content__inner": "this.cssClass" } }, providers: [{ provide: IgxTabContentBase, useExisting: IgxTabContentComponent }], usesInheritance: true, ngImport: i0, template: "@if (tab.selected || tab.previous) {\n    <ng-content></ng-content>\n}\n", styles: ["@layer ig.base{.igx-tabs-content{position:relative;overflow:hidden;display:flex;flex-direction:column;flex:1 1 auto}.igx-tabs-content__inner{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;flex:1 1 auto}.igx-tabs-content__inner::-moz-focus-inner{border:0}.igx-tabs-content__inner:focus{outline-width:0}.igx-tabs-content__inner[tabindex=\"0\"]{position:relative}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxTabContentComponent, isStandalone: true, selector: "igx-tab-content", host: { properties: { "class.igx-tabs-content__inner": "this.cssClass" } }, providers: [{ provide: IgxTabContentBase, useExisting: IgxTabContentComponent }], usesInheritance: true, ngImport: i0, template: "@if (tab.selected || tab.previous) {\n    <ng-content></ng-content>\n}\n", styles: ["@layer ig.base{.igx-tabs-content{position:relative;overflow:hidden;display:flex;flex-direction:column;flex:1 1 auto}.igx-tabs-content__inner{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;flex:1 1 auto}.igx-tabs-content__inner::-moz-focus-inner{border:0}.igx-tabs-content__inner:focus{outline-width:0}.igx-tabs-content__inner[tabindex=\"0\"]{position:relative}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-tab-content', changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, providers: [{ provide: IgxTabContentBase, useExisting: IgxTabContentComponent }], template: "@if (tab.selected || tab.previous) {\n    <ng-content></ng-content>\n}\n", styles: ["@layer ig.base{.igx-tabs-content{position:relative;overflow:hidden;display:flex;flex-direction:column;flex:1 1 auto}.igx-tabs-content__inner{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;flex:1 1 auto}.igx-tabs-content__inner::-moz-focus-inner{border:0}.igx-tabs-content__inner:focus{outline-width:0}.igx-tabs-content__inner[tabindex=\"0\"]{position:relative}}\n"] }]
         }], propDecorators: { cssClass: [{
@@ -166,10 +167,10 @@ class IgxTabHeaderDirective {
     get nativeElement() {
         return this.elementRef.nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: IgxTabHeaderDirective, isStandalone: true, host: { listeners: { "click": "onClick()" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabIndex", "attr.aria-selected": "this.ariaSelected", "attr.aria-disabled": "this.ariaDisabled" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxTabHeaderDirective, isStandalone: true, host: { listeners: { "click": "onClick()" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabIndex", "attr.aria-selected": "this.ariaSelected", "attr.aria-disabled": "this.ariaDisabled" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabHeaderDirective, decorators: [{
             type: Directive
         }], propDecorators: { role: [{
                 type: HostBinding,
@@ -407,10 +408,10 @@ class IgxTabsDirective extends IgxCarouselComponentBase {
             this.currentItem = item;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.0", type: IgxTabsDirective, isStandalone: true, inputs: { selectedIndex: "selectedIndex", disableAnimation: ["disableAnimation", "disableAnimation", booleanAttribute] }, outputs: { selectedIndexChange: "selectedIndexChange", selectedIndexChanging: "selectedIndexChanging", selectedItemChange: "selectedItemChange" }, queries: [{ propertyName: "items", predicate: IgxTabItemDirective }, { propertyName: "panels", predicate: IgxTabContentBase, descendants: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", type: IgxTabsDirective, isStandalone: true, inputs: { selectedIndex: "selectedIndex", disableAnimation: ["disableAnimation", "disableAnimation", booleanAttribute] }, outputs: { selectedIndexChange: "selectedIndexChange", selectedIndexChanging: "selectedIndexChanging", selectedItemChange: "selectedItemChange" }, queries: [{ propertyName: "items", predicate: IgxTabItemDirective }, { propertyName: "panels", predicate: IgxTabContentBase, descendants: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabsDirective, decorators: [{
             type: Directive
         }], propDecorators: { selectedIndex: [{
                 type: Input
@@ -686,10 +687,10 @@ class IgxTabsComponent extends IgxTabsDirective {
         const rtl = !isLeftToRight(this._element.nativeElement);
         return rtl ? this.itemsWrapper.nativeElement.offsetWidth - element.offsetLeft - element.offsetWidth : element.offsetLeft;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: IgxTabsComponent, isStandalone: true, selector: "igx-tabs", inputs: { tabAlignment: "tabAlignment", activation: "activation" }, host: { properties: { "class.igx-tabs": "this.defaultClass" } }, providers: [{ provide: IgxTabsBase, useExisting: IgxTabsComponent }], viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true, static: true }, { propertyName: "viewPort", first: true, predicate: ["viewPort"], descendants: true, static: true }, { propertyName: "itemsWrapper", first: true, predicate: ["itemsWrapper"], descendants: true, static: true }, { propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true, static: true }, { propertyName: "selectedIndicator", first: true, predicate: ["selectedIndicator"], descendants: true }, { propertyName: "scrollPrevButton", first: true, predicate: ["scrollPrevButton"], descendants: true }, { propertyName: "scrollNextButton", first: true, predicate: ["scrollNextButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #headerContainer class=\"igx-tabs-header\">\n    <button #scrollPrevButton type=\"button\" igxIconButton=\"flat\" igxRipple tabindex=\"-1\" class=\"igx-tabs-header-button\" (click)=\"scrollPrev()\">\n        <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n    </button>\n    <div #viewPort class=\"igx-tabs-header__content\">\n        <div #itemsWrapper class=\"igx-tabs-header__wrapper\" role=\"tablist\">\n            <div #itemsContainer class=\"igx-tabs-header-scroll\" [ngClass]=\"resolveHeaderScrollClasses()\">\n                @for (tab of items; track tab; let i = $index) {\n                    <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                }\n            </div>\n            @if (items.length > 0) {\n                <div #selectedIndicator class=\"igx-tabs-header__active-indicator\">\n                </div>\n            }\n        </div>\n    </div>\n    <button #scrollNextButton type=\"button\" igxIconButton=\"flat\" igxRipple tabindex=\"-1\" class=\"igx-tabs-header-button\" (click)=\"scrollNext()\">\n        <igx-icon family=\"default\" name=\"next\"></igx-icon>\n    </button>\n</div>\n<div class=\"igx-tabs-content\">\n    @for (tab of items; track tab; let i = $index) {\n        <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n    }\n</div>\n", styles: ["@layer ig.base{.igx-tabs{--nav-btn-border-color: var(--border-color);display:flex;flex-direction:column;overflow:hidden}}\n"], dependencies: [{ kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxTabsComponent, isStandalone: true, selector: "igx-tabs", inputs: { tabAlignment: "tabAlignment", activation: "activation" }, host: { properties: { "class.igx-tabs": "this.defaultClass" } }, providers: [{ provide: IgxTabsBase, useExisting: IgxTabsComponent }], viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true, static: true }, { propertyName: "viewPort", first: true, predicate: ["viewPort"], descendants: true, static: true }, { propertyName: "itemsWrapper", first: true, predicate: ["itemsWrapper"], descendants: true, static: true }, { propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true, static: true }, { propertyName: "selectedIndicator", first: true, predicate: ["selectedIndicator"], descendants: true }, { propertyName: "scrollPrevButton", first: true, predicate: ["scrollPrevButton"], descendants: true }, { propertyName: "scrollNextButton", first: true, predicate: ["scrollNextButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #headerContainer class=\"igx-tabs-header\">\n    <button #scrollPrevButton type=\"button\" igxIconButton=\"flat\" igxRipple tabindex=\"-1\" class=\"igx-tabs-header-button\" (click)=\"scrollPrev()\">\n        <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n    </button>\n    <div #viewPort class=\"igx-tabs-header__content\">\n        <div #itemsWrapper class=\"igx-tabs-header__wrapper\" role=\"tablist\">\n            <div #itemsContainer class=\"igx-tabs-header-scroll\" [ngClass]=\"resolveHeaderScrollClasses()\">\n                @for (tab of items; track tab; let i = $index) {\n                    <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                }\n            </div>\n            @if (items.length > 0) {\n                <div #selectedIndicator class=\"igx-tabs-header__active-indicator\">\n                </div>\n            }\n        </div>\n    </div>\n    <button #scrollNextButton type=\"button\" igxIconButton=\"flat\" igxRipple tabindex=\"-1\" class=\"igx-tabs-header-button\" (click)=\"scrollNext()\">\n        <igx-icon family=\"default\" name=\"next\"></igx-icon>\n    </button>\n</div>\n<div class=\"igx-tabs-content\">\n    @for (tab of items; track tab; let i = $index) {\n        <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n    }\n</div>\n", styles: ["@layer ig.base{.igx-tabs{--nav-btn-border-color: var(--border-color);display:flex;flex-direction:column;overflow:hidden}}\n"], dependencies: [{ kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-tabs', encapsulation: ViewEncapsulation.None, providers: [{ provide: IgxTabsBase, useExisting: IgxTabsComponent }], changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxRippleDirective, IgxIconComponent, NgClass, NgTemplateOutlet, IgxIconButtonDirective], template: "<div #headerContainer class=\"igx-tabs-header\">\n    <button #scrollPrevButton type=\"button\" igxIconButton=\"flat\" igxRipple tabindex=\"-1\" class=\"igx-tabs-header-button\" (click)=\"scrollPrev()\">\n        <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n    </button>\n    <div #viewPort class=\"igx-tabs-header__content\">\n        <div #itemsWrapper class=\"igx-tabs-header__wrapper\" role=\"tablist\">\n            <div #itemsContainer class=\"igx-tabs-header-scroll\" [ngClass]=\"resolveHeaderScrollClasses()\">\n                @for (tab of items; track tab; let i = $index) {\n                    <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                }\n            </div>\n            @if (items.length > 0) {\n                <div #selectedIndicator class=\"igx-tabs-header__active-indicator\">\n                </div>\n            }\n        </div>\n    </div>\n    <button #scrollNextButton type=\"button\" igxIconButton=\"flat\" igxRipple tabindex=\"-1\" class=\"igx-tabs-header-button\" (click)=\"scrollNext()\">\n        <igx-icon family=\"default\" name=\"next\"></igx-icon>\n    </button>\n</div>\n<div class=\"igx-tabs-content\">\n    @for (tab of items; track tab; let i = $index) {\n        <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n    }\n</div>\n", styles: ["@layer ig.base{.igx-tabs{--nav-btn-border-color: var(--border-color);display:flex;flex-direction:column;overflow:hidden}}\n"] }]
         }], propDecorators: { tabAlignment: [{
@@ -822,10 +823,10 @@ class IgxTabHeaderComponent extends IgxTabHeaderDirective {
         }
         return newIndex;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: IgxTabHeaderComponent, isStandalone: true, selector: "igx-tab-header", host: { listeners: { "keydown": "keyDown($event)" }, properties: { "class.igx-tab-header--selected": "this.provideCssClassSelected", "class.igx-tab-header--disabled": "this.provideCssClassDisabled", "class.igx-tab-header--justify": "this.applyJustifyClass", "class.igx-tab-header": "this.cssClass" } }, providers: [{ provide: IgxTabHeaderBase, useExisting: IgxTabHeaderComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n\n<div class=\"igx-tab-header__inner\">\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n", styles: ["@layer ig.base{.igx-tab-header{--ig-ripple-color: var(--tab-ripple-color);display:inline-flex;justify-content:center;align-items:center;min-width:5.625rem;max-width:22.5rem;word-wrap:break-word;flex-basis:auto;flex-shrink:0;padding:.6875rem 1rem;overflow:hidden;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:var(--item-background);color:var(--item-text-color);outline:0;gap:.5rem}.igx-tab-header igx-icon{color:var(--item-icon-color)}.igx-tab-header::-moz-focus-inner{border:0}.igx-tab-header:focus{background:var(--item-hover-background);color:var(--item-hover-color);border-bottom-color:#0000}.igx-tab-header:hover{background:var(--item-hover-background);color:var(--item-hover-color)}.igx-tab-header:hover igx-icon,.igx-tab-header:focus igx-icon{color:var(--item-hover-icon-color)}.igx-tab-header--justify{flex-basis:0;flex-grow:1;max-width:100%}.igx-tab-header--selected{outline:0;color:var(--item-active-color);background:var(--item-active-background)}.igx-tab-header--selected:hover,.igx-tab-header--selected:focus{background:var(--item-active-hover-background);color:var(--item-active-hover-color)}.igx-tab-header--selected:hover igx-icon,.igx-tab-header--selected:focus igx-icon{color:var(--item-active-hover-icon-color)}.igx-tab-header--selected igx-icon{color:var(--item-active-icon-color)}.igx-tab-header--disabled{outline:0;color:var(--item-disabled-color);cursor:default;pointer-events:none}.igx-tab-header--disabled igx-icon{color:var(--item-disabled-icon-color)}.igx-tab-header__inner{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:.5rem}.igx-tab-header__inner>[igxtabheaderlabel]{font-family:var(--ig-button-font-family, var(--ig-font-family));font-size:var(--ig-button-font-size);font-weight:var(--ig-button-font-weight);font-style:var(--ig-button-font-style);line-height:var(--ig-button-line-height);letter-spacing:var(--ig-button-letter-spacing);text-transform:var(--ig-button-text-transform);margin-top:var(--ig-button-margin-top);margin-bottom:var(--ig-button-margin-bottom);margin:0;display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.igx-tab-header__inner>[igxtabheadericon]:last-child{margin-bottom:0}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-tabs .igx-tab-header--selected:focus,.igx-tabs .igx-tab-header:focus{border:none;box-shadow:inset 0 0 0 .125rem var(--item-hover-color);border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;z-index:1}.igx-tabs .igx-tab-header--selected:focus:after,.igx-tabs .igx-tab-header:focus:after{display:none}.igx-tab-header{min-height:3rem;padding-block:.75rem;border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius)}.igx-tab-header:hover{box-shadow:inset 0 0 0 .0625rem var(--border-color--hover)}.igx-tab-header--selected{position:relative;box-shadow:inset 0 0 0 .0625rem var(--border-color);z-index:1}.igx-tab-header--selected:not(:focus):before{content:\"\";position:absolute;bottom:0;inset-inline-start:0;width:100%;height:.0625rem;background:linear-gradient(to right,var(--border-color) 1px,var(--item-active-background) 1px,var(--item-active-background) calc(100% - 1px),var(--border-color) calc(100% - 1px));z-index:-1}.igx-tab-header--selected:hover{box-shadow:inset 0 0 0 .0625rem var(--border-color)}.igx-tab-header--selected:hover:before{background:linear-gradient(to right,var(--border-color) 1px,var(--item-active-hover-background) 1px,var(--item-active-hover-background) calc(100% - 1px),var(--border-color) calc(100% - 1px))}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-tab-header{min-height:2.5rem}.igx-tab-header igx-icon{--ig-size: 2}.igx-tab-header{transition:all .3s cubic-bezier(.35,0,.25,1);border:.0625rem solid var(--border-color);border-radius:var(--border-radius);border-top:.0625rem solid rgba(0,0,0,0);border-inline:none}.igx-tab-header:hover,.igx-tab-header:focus{border-top:.0625rem solid rgba(0,0,0,0);border-inline:none;border-bottom:.0625rem solid var(--border-color)}.igx-tab-header__inner>[igxtabheaderlabel]{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);--ig-subtitle-2-text-transform: uppercase;--ig-subtitle-2-font-weight: 600;margin:0}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-tab-header{--ig-button-font-weight: 500;min-height:2.75rem;transition:all .3s cubic-bezier(.35,0,.25,1);border:.0625rem solid var(--border-color);border-radius:var(--border-radius)}.igx-tab-header:hover,.igx-tab-header:focus{border:.0625rem solid var(--border-color--hover)}.igx-tab-header--selected{--ig-button-font-weight: 600}}}@layer ig.material{@container style(--ig-theme: material){.igx-tab-header{min-height:3rem;transition:all .3s cubic-bezier(.35,0,.25,1);border:.0625rem solid var(--border-color);border-radius:var(--border-radius)}.igx-tab-header:hover,.igx-tab-header:focus{border:.0625rem solid var(--border-color--hover)}}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: IgxTabHeaderComponent, isStandalone: true, selector: "igx-tab-header", host: { listeners: { "keydown": "keyDown($event)" }, properties: { "class.igx-tab-header--selected": "this.provideCssClassSelected", "class.igx-tab-header--disabled": "this.provideCssClassDisabled", "class.igx-tab-header--justify": "this.applyJustifyClass", "class.igx-tab-header": "this.cssClass" } }, providers: [{ provide: IgxTabHeaderBase, useExisting: IgxTabHeaderComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n\n<div class=\"igx-tab-header__inner\">\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n", styles: ["@layer ig.base{.igx-tab-header{--ig-ripple-color: var(--tab-ripple-color);display:inline-flex;justify-content:center;align-items:center;min-width:5.625rem;max-width:22.5rem;word-wrap:break-word;flex-basis:auto;flex-shrink:0;padding:.6875rem 1rem;overflow:hidden;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:var(--item-background);color:var(--item-text-color);outline:0;gap:.5rem}.igx-tab-header igx-icon{color:var(--item-icon-color)}.igx-tab-header::-moz-focus-inner{border:0}.igx-tab-header:focus{background:var(--item-hover-background);color:var(--item-hover-color);border-bottom-color:#0000}.igx-tab-header:hover{background:var(--item-hover-background);color:var(--item-hover-color)}.igx-tab-header:hover igx-icon,.igx-tab-header:focus igx-icon{color:var(--item-hover-icon-color)}.igx-tab-header--justify{flex-basis:0;flex-grow:1;max-width:100%}.igx-tab-header--selected{outline:0;color:var(--item-active-color);background:var(--item-active-background)}.igx-tab-header--selected:hover,.igx-tab-header--selected:focus{background:var(--item-active-hover-background);color:var(--item-active-hover-color)}.igx-tab-header--selected:hover igx-icon,.igx-tab-header--selected:focus igx-icon{color:var(--item-active-hover-icon-color)}.igx-tab-header--selected igx-icon{color:var(--item-active-icon-color)}.igx-tab-header--disabled{outline:0;color:var(--item-disabled-color);cursor:default;pointer-events:none}.igx-tab-header--disabled igx-icon{color:var(--item-disabled-icon-color)}.igx-tab-header__inner{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:.5rem}.igx-tab-header__inner>[igxtabheaderlabel]{font-family:var(--ig-button-font-family, var(--ig-font-family));font-size:var(--ig-button-font-size);font-weight:var(--ig-button-font-weight);font-style:var(--ig-button-font-style);line-height:var(--ig-button-line-height);letter-spacing:var(--ig-button-letter-spacing);text-transform:var(--ig-button-text-transform);margin-top:var(--ig-button-margin-top);margin-bottom:var(--ig-button-margin-bottom);margin:0;display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.igx-tab-header__inner>[igxtabheadericon]:last-child{margin-bottom:0}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-tabs .igx-tab-header--selected:focus,.igx-tabs .igx-tab-header:focus{border:none;box-shadow:inset 0 0 0 .125rem var(--item-hover-color);border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;z-index:1}.igx-tabs .igx-tab-header--selected:focus:after,.igx-tabs .igx-tab-header:focus:after{display:none}.igx-tab-header{min-height:3rem;padding-block:.75rem;border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius)}.igx-tab-header:hover{box-shadow:inset 0 0 0 .0625rem var(--border-color--hover)}.igx-tab-header--selected{position:relative;box-shadow:inset 0 0 0 .0625rem var(--border-color);z-index:1}.igx-tab-header--selected:not(:focus):before{content:\"\";position:absolute;bottom:0;inset-inline-start:0;width:100%;height:.0625rem;background:linear-gradient(to right,var(--border-color) 1px,var(--item-active-background) 1px,var(--item-active-background) calc(100% - 1px),var(--border-color) calc(100% - 1px));z-index:-1}.igx-tab-header--selected:hover{box-shadow:inset 0 0 0 .0625rem var(--border-color)}.igx-tab-header--selected:hover:before{background:linear-gradient(to right,var(--border-color) 1px,var(--item-active-hover-background) 1px,var(--item-active-hover-background) calc(100% - 1px),var(--border-color) calc(100% - 1px))}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-tab-header{min-height:2.5rem}.igx-tab-header igx-icon{--ig-size: 2}.igx-tab-header{transition:all .3s cubic-bezier(.35,0,.25,1);border:.0625rem solid var(--border-color);border-radius:var(--border-radius);border-top:.0625rem solid rgba(0,0,0,0);border-inline:none}.igx-tab-header:hover,.igx-tab-header:focus{border-top:.0625rem solid rgba(0,0,0,0);border-inline:none;border-bottom:.0625rem solid var(--border-color)}.igx-tab-header__inner>[igxtabheaderlabel]{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);--ig-subtitle-2-text-transform: uppercase;--ig-subtitle-2-font-weight: 600;margin:0}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-tab-header{--ig-button-font-weight: 500;min-height:2.75rem;transition:all .3s cubic-bezier(.35,0,.25,1);border:.0625rem solid var(--border-color);border-radius:var(--border-radius)}.igx-tab-header:hover,.igx-tab-header:focus{border:.0625rem solid var(--border-color--hover)}.igx-tab-header--selected{--ig-button-font-weight: 600}}}@layer ig.material{@container style(--ig-theme: material){.igx-tab-header{min-height:3rem;transition:all .3s cubic-bezier(.35,0,.25,1);border:.0625rem solid var(--border-color);border-radius:var(--border-radius)}.igx-tab-header:hover,.igx-tab-header:focus{border:.0625rem solid var(--border-color--hover)}}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-tab-header', encapsulation: ViewEncapsulation.None, providers: [{ provide: IgxTabHeaderBase, useExisting: IgxTabHeaderComponent }], changeDetection: ChangeDetectionStrategy.Eager, standalone: true, template: "<ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n\n<div class=\"igx-tab-header__inner\">\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n", styles: ["@layer ig.base{.igx-tab-header{--ig-ripple-color: var(--tab-ripple-color);display:inline-flex;justify-content:center;align-items:center;min-width:5.625rem;max-width:22.5rem;word-wrap:break-word;flex-basis:auto;flex-shrink:0;padding:.6875rem 1rem;overflow:hidden;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:var(--item-background);color:var(--item-text-color);outline:0;gap:.5rem}.igx-tab-header igx-icon{color:var(--item-icon-color)}.igx-tab-header::-moz-focus-inner{border:0}.igx-tab-header:focus{background:var(--item-hover-background);color:var(--item-hover-color);border-bottom-color:#0000}.igx-tab-header:hover{background:var(--item-hover-background);color:var(--item-hover-color)}.igx-tab-header:hover igx-icon,.igx-tab-header:focus igx-icon{color:var(--item-hover-icon-color)}.igx-tab-header--justify{flex-basis:0;flex-grow:1;max-width:100%}.igx-tab-header--selected{outline:0;color:var(--item-active-color);background:var(--item-active-background)}.igx-tab-header--selected:hover,.igx-tab-header--selected:focus{background:var(--item-active-hover-background);color:var(--item-active-hover-color)}.igx-tab-header--selected:hover igx-icon,.igx-tab-header--selected:focus igx-icon{color:var(--item-active-hover-icon-color)}.igx-tab-header--selected igx-icon{color:var(--item-active-icon-color)}.igx-tab-header--disabled{outline:0;color:var(--item-disabled-color);cursor:default;pointer-events:none}.igx-tab-header--disabled igx-icon{color:var(--item-disabled-icon-color)}.igx-tab-header__inner{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:.5rem}.igx-tab-header__inner>[igxtabheaderlabel]{font-family:var(--ig-button-font-family, var(--ig-font-family));font-size:var(--ig-button-font-size);font-weight:var(--ig-button-font-weight);font-style:var(--ig-button-font-style);line-height:var(--ig-button-line-height);letter-spacing:var(--ig-button-letter-spacing);text-transform:var(--ig-button-text-transform);margin-top:var(--ig-button-margin-top);margin-bottom:var(--ig-button-margin-bottom);margin:0;display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.igx-tab-header__inner>[igxtabheadericon]:last-child{margin-bottom:0}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-tabs .igx-tab-header--selected:focus,.igx-tabs .igx-tab-header:focus{border:none;box-shadow:inset 0 0 0 .125rem var(--item-hover-color);border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;z-index:1}.igx-tabs .igx-tab-header--selected:focus:after,.igx-tabs .igx-tab-header:focus:after{display:none}.igx-tab-header{min-height:3rem;padding-block:.75rem;border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius)}.igx-tab-header:hover{box-shadow:inset 0 0 0 .0625rem var(--border-color--hover)}.igx-tab-header--selected{position:relative;box-shadow:inset 0 0 0 .0625rem var(--border-color);z-index:1}.igx-tab-header--selected:not(:focus):before{content:\"\";position:absolute;bottom:0;inset-inline-start:0;width:100%;height:.0625rem;background:linear-gradient(to right,var(--border-color) 1px,var(--item-active-background) 1px,var(--item-active-background) calc(100% - 1px),var(--border-color) calc(100% - 1px));z-index:-1}.igx-tab-header--selected:hover{box-shadow:inset 0 0 0 .0625rem var(--border-color)}.igx-tab-header--selected:hover:before{background:linear-gradient(to right,var(--border-color) 1px,var(--item-active-hover-background) 1px,var(--item-active-hover-background) calc(100% - 1px),var(--border-color) calc(100% - 1px))}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-tab-header{min-height:2.5rem}.igx-tab-header igx-icon{--ig-size: 2}.igx-tab-header{transition:all .3s cubic-bezier(.35,0,.25,1);border:.0625rem solid var(--border-color);border-radius:var(--border-radius);border-top:.0625rem solid rgba(0,0,0,0);border-inline:none}.igx-tab-header:hover,.igx-tab-header:focus{border-top:.0625rem solid rgba(0,0,0,0);border-inline:none;border-bottom:.0625rem solid var(--border-color)}.igx-tab-header__inner>[igxtabheaderlabel]{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);--ig-subtitle-2-text-transform: uppercase;--ig-subtitle-2-font-weight: 600;margin:0}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-tab-header{--ig-button-font-weight: 500;min-height:2.75rem;transition:all .3s cubic-bezier(.35,0,.25,1);border:.0625rem solid var(--border-color);border-radius:var(--border-radius)}.igx-tab-header:hover,.igx-tab-header:focus{border:.0625rem solid var(--border-color--hover)}.igx-tab-header--selected{--ig-button-font-weight: 600}}}@layer ig.material{@container style(--ig-theme: material){.igx-tab-header{min-height:3rem;transition:all .3s cubic-bezier(.35,0,.25,1);border:.0625rem solid var(--border-color);border-radius:var(--border-radius)}.igx-tab-header:hover,.igx-tab-header:focus{border:.0625rem solid var(--border-color--hover)}}}\n"] }]
         }], propDecorators: { provideCssClassSelected: [{
@@ -846,30 +847,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             }] } });
 
 class IgxTabItemComponent extends IgxTabItemDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: IgxTabItemComponent, isStandalone: true, selector: "igx-tab-item", providers: [{ provide: IgxTabItemDirective, useExisting: IgxTabItemComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #headerTemplate>\n    <ng-content select=\"igx-tab-header\"></ng-content>\n</ng-template>\n<ng-template #panelTemplate>\n    <ng-content select=\"igx-tab-content\"></ng-content>\n</ng-template>\n", styles: ["@layer ig.base{.igx-tabs-header{display:flex;align-items:center;overflow:hidden;flex:0 0 auto;z-index:1}.igx-tabs-header__content{display:flex;align-items:center;flex:1 1 auto;overflow:hidden;scroll-behavior:smooth}.igx-tabs-header__wrapper{position:relative;flex-grow:1}.igx-tabs-header__active-indicator{position:absolute;bottom:0;left:0;transform:translate(0);height:.125rem;min-width:5.625rem;background:var(--indicator-color);transition:transform .3s cubic-bezier(.35,0,.25,1),width .2s cubic-bezier(.35,0,.25,1)}.igx-tabs-header-button{--ig-ripple-color: var(--button-ripple-color);display:flex;align-items:center;justify-content:center;z-index:1;border:none;padding:0;min-width:3rem;width:3rem;cursor:pointer;position:relative;background:var(--button-background);color:var(--button-color);outline:0;align-self:stretch;height:auto;transition:none;border-radius:clamp(0rem,calc(var(--ig-radius-factor, calc(NaN)) * 0),0)}.igx-tabs-header-button:hover{background:var(--button-hover-background);color:var(--button-hover-color)}.igx-tabs-header-button:focus{outline:0}.igx-tabs-header-button::-moz-focus-inner{border:0}.igx-tabs-header-button:disabled{color:var(--button-disabled-color);cursor:default;pointer-events:none}.igx-tabs-header-button--none{display:none}[dir=rtl] .igx-tabs-header-button{transform:scaleX(-1)}.igx-tabs-header-scroll{display:flex;height:100%}.igx-tabs-header-scroll--start{justify-content:flex-start}.igx-tabs-header-scroll--end{justify-content:flex-end;min-width:-moz-max-content;min-width:max-content}.igx-tabs-header-scroll--center{justify-content:center;min-width:-moz-max-content;min-width:max-content}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-tabs-header{position:relative;background:var(--item-background)}.igx-tabs-header:after{content:\"\";position:absolute;bottom:0;inset-inline-start:0;width:100%;height:.0625rem;background:var(--border-color);z-index:0}.igx-tabs-header__active-indicator{display:none}.igx-tabs-header-button igx-icon{--size: 1.5rem}.igx-tabs-header-button:focus{background:var(--button-hover-background)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-tabs-header__active-indicator{height:.1875rem}.igx-tabs-header-button{min-width:2.5rem;width:2.5rem}.igx-tabs-header-button igx-icon{--size: 1rem}.igx-tabs-header-button:after{content:\"\";position:absolute;pointer-events:none;width:100%;height:100%;border-bottom:.0625rem solid var(--nav-btn-border-color)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-tabs-header-button:focus{background:var(--button-hover-background)}.igx-tabs-header-button igx-icon{--size: 1.5rem}}}@layer ig.material{@container style(--ig-theme: material){.igx-tabs-header{background:var(--item-background)}.igx-tabs-header-button:focus{background:var(--button-hover-background)}.igx-tabs-header-button igx-icon{--size: 1.5rem}}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: IgxTabItemComponent, isStandalone: true, selector: "igx-tab-item", providers: [{ provide: IgxTabItemDirective, useExisting: IgxTabItemComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #headerTemplate>\n    <ng-content select=\"igx-tab-header\"></ng-content>\n</ng-template>\n<ng-template #panelTemplate>\n    <ng-content select=\"igx-tab-content\"></ng-content>\n</ng-template>\n", styles: ["@layer ig.base{.igx-tabs-header{display:flex;align-items:center;overflow:hidden;flex:0 0 auto;z-index:1}.igx-tabs-header__content{display:flex;align-items:center;flex:1 1 auto;overflow:hidden;scroll-behavior:smooth}.igx-tabs-header__wrapper{position:relative;flex-grow:1}.igx-tabs-header__active-indicator{position:absolute;bottom:0;left:0;transform:translate(0);height:.125rem;min-width:5.625rem;background:var(--indicator-color);transition:transform .3s cubic-bezier(.35,0,.25,1),width .2s cubic-bezier(.35,0,.25,1)}.igx-tabs-header-button{--ig-ripple-color: var(--button-ripple-color);display:flex;align-items:center;justify-content:center;z-index:1;border:none;padding:0;min-width:3rem;width:3rem;cursor:pointer;position:relative;background:var(--button-background);color:var(--button-color);outline:0;align-self:stretch;height:auto;transition:none;border-radius:clamp(0rem,calc(var(--ig-radius-factor, calc(NaN)) * 0),0)}.igx-tabs-header-button:hover{background:var(--button-hover-background);color:var(--button-hover-color)}.igx-tabs-header-button:focus{outline:0}.igx-tabs-header-button::-moz-focus-inner{border:0}.igx-tabs-header-button:disabled{color:var(--button-disabled-color);cursor:default;pointer-events:none}.igx-tabs-header-button--none{display:none}[dir=rtl] .igx-tabs-header-button{transform:scaleX(-1)}.igx-tabs-header-scroll{display:flex;height:100%}.igx-tabs-header-scroll--start{justify-content:flex-start}.igx-tabs-header-scroll--end{justify-content:flex-end;min-width:-moz-max-content;min-width:max-content}.igx-tabs-header-scroll--center{justify-content:center;min-width:-moz-max-content;min-width:max-content}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-tabs-header{--ig-icon-size: 1.5rem;position:relative;background:var(--item-background)}.igx-tabs-header:after{content:\"\";position:absolute;bottom:0;inset-inline-start:0;width:100%;height:.0625rem;background:var(--border-color);z-index:0}.igx-tabs-header__active-indicator{display:none}.igx-tabs-header-button:focus{background:var(--button-hover-background)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-tabs-header{--ig-icon-size: 1rem}.igx-tabs-header__active-indicator{height:.1875rem}.igx-tabs-header-button{min-width:2.5rem;width:2.5rem}.igx-tabs-header-button:after{content:\"\";position:absolute;pointer-events:none;width:100%;height:100%;border-bottom:.0625rem solid var(--nav-btn-border-color)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-tabs-header{--ig-icon-size: 1.5rem}.igx-tabs-header-button:focus{background:var(--button-hover-background)}}}@layer ig.material{@container style(--ig-theme: material){.igx-tabs-header{--ig-icon-size: 1.5rem;background:var(--item-background)}.igx-tabs-header-button:focus{background:var(--button-hover-background)}}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-tab-item', encapsulation: ViewEncapsulation.None, providers: [{ provide: IgxTabItemDirective, useExisting: IgxTabItemComponent }], changeDetection: ChangeDetectionStrategy.Eager, standalone: true, template: "<ng-template #headerTemplate>\n    <ng-content select=\"igx-tab-header\"></ng-content>\n</ng-template>\n<ng-template #panelTemplate>\n    <ng-content select=\"igx-tab-content\"></ng-content>\n</ng-template>\n", styles: ["@layer ig.base{.igx-tabs-header{display:flex;align-items:center;overflow:hidden;flex:0 0 auto;z-index:1}.igx-tabs-header__content{display:flex;align-items:center;flex:1 1 auto;overflow:hidden;scroll-behavior:smooth}.igx-tabs-header__wrapper{position:relative;flex-grow:1}.igx-tabs-header__active-indicator{position:absolute;bottom:0;left:0;transform:translate(0);height:.125rem;min-width:5.625rem;background:var(--indicator-color);transition:transform .3s cubic-bezier(.35,0,.25,1),width .2s cubic-bezier(.35,0,.25,1)}.igx-tabs-header-button{--ig-ripple-color: var(--button-ripple-color);display:flex;align-items:center;justify-content:center;z-index:1;border:none;padding:0;min-width:3rem;width:3rem;cursor:pointer;position:relative;background:var(--button-background);color:var(--button-color);outline:0;align-self:stretch;height:auto;transition:none;border-radius:clamp(0rem,calc(var(--ig-radius-factor, calc(NaN)) * 0),0)}.igx-tabs-header-button:hover{background:var(--button-hover-background);color:var(--button-hover-color)}.igx-tabs-header-button:focus{outline:0}.igx-tabs-header-button::-moz-focus-inner{border:0}.igx-tabs-header-button:disabled{color:var(--button-disabled-color);cursor:default;pointer-events:none}.igx-tabs-header-button--none{display:none}[dir=rtl] .igx-tabs-header-button{transform:scaleX(-1)}.igx-tabs-header-scroll{display:flex;height:100%}.igx-tabs-header-scroll--start{justify-content:flex-start}.igx-tabs-header-scroll--end{justify-content:flex-end;min-width:-moz-max-content;min-width:max-content}.igx-tabs-header-scroll--center{justify-content:center;min-width:-moz-max-content;min-width:max-content}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-tabs-header{position:relative;background:var(--item-background)}.igx-tabs-header:after{content:\"\";position:absolute;bottom:0;inset-inline-start:0;width:100%;height:.0625rem;background:var(--border-color);z-index:0}.igx-tabs-header__active-indicator{display:none}.igx-tabs-header-button igx-icon{--size: 1.5rem}.igx-tabs-header-button:focus{background:var(--button-hover-background)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-tabs-header__active-indicator{height:.1875rem}.igx-tabs-header-button{min-width:2.5rem;width:2.5rem}.igx-tabs-header-button igx-icon{--size: 1rem}.igx-tabs-header-button:after{content:\"\";position:absolute;pointer-events:none;width:100%;height:100%;border-bottom:.0625rem solid var(--nav-btn-border-color)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-tabs-header-button:focus{background:var(--button-hover-background)}.igx-tabs-header-button igx-icon{--size: 1.5rem}}}@layer ig.material{@container style(--ig-theme: material){.igx-tabs-header{background:var(--item-background)}.igx-tabs-header-button:focus{background:var(--button-hover-background)}.igx-tabs-header-button igx-icon{--size: 1.5rem}}}\n"] }]
+            args: [{ selector: 'igx-tab-item', encapsulation: ViewEncapsulation.None, providers: [{ provide: IgxTabItemDirective, useExisting: IgxTabItemComponent }], changeDetection: ChangeDetectionStrategy.Eager, standalone: true, template: "<ng-template #headerTemplate>\n    <ng-content select=\"igx-tab-header\"></ng-content>\n</ng-template>\n<ng-template #panelTemplate>\n    <ng-content select=\"igx-tab-content\"></ng-content>\n</ng-template>\n", styles: ["@layer ig.base{.igx-tabs-header{display:flex;align-items:center;overflow:hidden;flex:0 0 auto;z-index:1}.igx-tabs-header__content{display:flex;align-items:center;flex:1 1 auto;overflow:hidden;scroll-behavior:smooth}.igx-tabs-header__wrapper{position:relative;flex-grow:1}.igx-tabs-header__active-indicator{position:absolute;bottom:0;left:0;transform:translate(0);height:.125rem;min-width:5.625rem;background:var(--indicator-color);transition:transform .3s cubic-bezier(.35,0,.25,1),width .2s cubic-bezier(.35,0,.25,1)}.igx-tabs-header-button{--ig-ripple-color: var(--button-ripple-color);display:flex;align-items:center;justify-content:center;z-index:1;border:none;padding:0;min-width:3rem;width:3rem;cursor:pointer;position:relative;background:var(--button-background);color:var(--button-color);outline:0;align-self:stretch;height:auto;transition:none;border-radius:clamp(0rem,calc(var(--ig-radius-factor, calc(NaN)) * 0),0)}.igx-tabs-header-button:hover{background:var(--button-hover-background);color:var(--button-hover-color)}.igx-tabs-header-button:focus{outline:0}.igx-tabs-header-button::-moz-focus-inner{border:0}.igx-tabs-header-button:disabled{color:var(--button-disabled-color);cursor:default;pointer-events:none}.igx-tabs-header-button--none{display:none}[dir=rtl] .igx-tabs-header-button{transform:scaleX(-1)}.igx-tabs-header-scroll{display:flex;height:100%}.igx-tabs-header-scroll--start{justify-content:flex-start}.igx-tabs-header-scroll--end{justify-content:flex-end;min-width:-moz-max-content;min-width:max-content}.igx-tabs-header-scroll--center{justify-content:center;min-width:-moz-max-content;min-width:max-content}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-tabs-header{--ig-icon-size: 1.5rem;position:relative;background:var(--item-background)}.igx-tabs-header:after{content:\"\";position:absolute;bottom:0;inset-inline-start:0;width:100%;height:.0625rem;background:var(--border-color);z-index:0}.igx-tabs-header__active-indicator{display:none}.igx-tabs-header-button:focus{background:var(--button-hover-background)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-tabs-header{--ig-icon-size: 1rem}.igx-tabs-header__active-indicator{height:.1875rem}.igx-tabs-header-button{min-width:2.5rem;width:2.5rem}.igx-tabs-header-button:after{content:\"\";position:absolute;pointer-events:none;width:100%;height:100%;border-bottom:.0625rem solid var(--nav-btn-border-color)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-tabs-header{--ig-icon-size: 1.5rem}.igx-tabs-header-button:focus{background:var(--button-hover-background)}}}@layer ig.material{@container style(--ig-theme: material){.igx-tabs-header{--ig-icon-size: 1.5rem;background:var(--item-background)}.igx-tabs-header-button:focus{background:var(--button-hover-background)}}}\n"] }]
         }] });
 
 class IgxTabHeaderLabelDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabHeaderLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: IgxTabHeaderLabelDirective, isStandalone: true, selector: "[igxTabHeaderLabel],igx-tab-header-label", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabHeaderLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxTabHeaderLabelDirective, isStandalone: true, selector: "[igxTabHeaderLabel],igx-tab-header-label", hostDirectives: [{ directive: i1.IgxNoTypographyDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabHeaderLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabHeaderLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxTabHeaderLabel],igx-tab-header-label',
-                    standalone: true
+                    standalone: true,
+                    hostDirectives: [IgxNoTypographyDirective]
                 }]
         }] });
 class IgxTabHeaderIconDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: IgxTabHeaderIconDirective, isStandalone: true, selector: "[igxTabHeaderIcon],igx-tab-header-icon", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxTabHeaderIconDirective, isStandalone: true, selector: "[igxTabHeaderIcon],igx-tab-header-icon", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabHeaderIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabHeaderIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxTabHeaderIcon],igx-tab-header-icon',
@@ -894,11 +896,11 @@ const IGX_TABS_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxTabsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxTabsModule, imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabHeaderLabelDirective, IgxTabHeaderIconDirective, i6.IgxPrefixDirective, i6.IgxSuffixDirective], exports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabHeaderLabelDirective, IgxTabHeaderIconDirective, i6.IgxPrefixDirective, i6.IgxSuffixDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabsModule, imports: [IgxTabsComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxTabsModule, imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabHeaderLabelDirective, IgxTabHeaderIconDirective, i6.IgxPrefixDirective, i6.IgxSuffixDirective], exports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabHeaderLabelDirective, IgxTabHeaderIconDirective, i6.IgxPrefixDirective, i6.IgxSuffixDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabsModule, imports: [IgxTabsComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTabsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [