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

package/fesm2022/igniteui-angular-bottom-nav.mjs

@@ -2,6 +2,8 @@ import * as i0 from '@angular/core';
 import { HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive, NgModule } from '@angular/core';
 import { IgxTabContentDirective, IgxTabContentBase, IgxTabHeaderDirective, IgxTabHeaderBase, IgxTabItemDirective, IgxTabsDirective, IgxTabsBase } from 'igniteui-angular/tabs';
 import { NgTemplateOutlet } from '@angular/common';
+import * as i1 from 'igniteui-angular/directives';
+import { IgxNoTypographyDirective } from 'igniteui-angular/directives';
 
 class IgxBottomNavContentComponent extends IgxTabContentDirective {
     constructor() {
@@ -9,10 +11,10 @@ class IgxBottomNavContentComponent extends IgxTabContentDirective {
         /** @hidden */
         this.defaultClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxBottomNavContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: IgxBottomNavContentComponent, isStandalone: true, selector: "igx-bottom-nav-content", host: { properties: { "class.igx-bottom-nav__panel": "this.defaultClass" } }, providers: [{ provide: IgxTabContentBase, useExisting: IgxBottomNavContentComponent }], usesInheritance: true, ngImport: i0, template: "@if (tab.selected || tab.previous) {\n    <ng-content></ng-content>\n}\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: IgxBottomNavContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxBottomNavContentComponent, isStandalone: true, selector: "igx-bottom-nav-content", host: { properties: { "class.igx-bottom-nav__panel": "this.defaultClass" } }, providers: [{ provide: IgxTabContentBase, useExisting: IgxBottomNavContentComponent }], usesInheritance: true, ngImport: i0, template: "@if (tab.selected || tab.previous) {\n    <ng-content></ng-content>\n}\n", changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxBottomNavContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-bottom-nav-content', encapsulation: ViewEncapsulation.None, providers: [{ provide: IgxTabContentBase, useExisting: IgxBottomNavContentComponent }], changeDetection: ChangeDetectionStrategy.Eager, imports: [], template: "@if (tab.selected || tab.previous) {\n    <ng-content></ng-content>\n}\n" }]
         }], propDecorators: { defaultClass: [{
@@ -34,10 +36,10 @@ class IgxBottomNavHeaderComponent extends IgxTabHeaderDirective {
     get cssClassDisabled() {
         return this.tab.disabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxBottomNavHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: IgxBottomNavHeaderComponent, isStandalone: true, selector: "igx-bottom-nav-header", host: { properties: { "class.igx-bottom-nav__menu-item--selected": "this.cssClassSelected", "class.igx-bottom-nav__menu-item--disabled": "this.cssClassDisabled", "class.igx-bottom-nav__menu-item": "this.cssClass" } }, providers: [{ provide: IgxTabHeaderBase, useExisting: IgxBottomNavHeaderComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\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: IgxBottomNavHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: IgxBottomNavHeaderComponent, isStandalone: true, selector: "igx-bottom-nav-header", host: { properties: { "class.igx-bottom-nav__menu-item--selected": "this.cssClassSelected", "class.igx-bottom-nav__menu-item--disabled": "this.cssClassDisabled", "class.igx-bottom-nav__menu-item": "this.cssClass" } }, providers: [{ provide: IgxTabHeaderBase, useExisting: IgxBottomNavHeaderComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxBottomNavHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-bottom-nav-header', encapsulation: ViewEncapsulation.None, providers: [{ provide: IgxTabHeaderBase, useExisting: IgxBottomNavHeaderComponent }], changeDetection: ChangeDetectionStrategy.Eager, standalone: true, template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { cssClassSelected: [{
@@ -52,10 +54,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             }] } });
 
 class IgxBottomNavItemComponent extends IgxTabItemDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxBottomNavItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: IgxBottomNavItemComponent, isStandalone: true, selector: "igx-bottom-nav-item", providers: [{ provide: IgxTabItemDirective, useExisting: IgxBottomNavItemComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #headerTemplate>\n    <ng-content select=\"igx-bottom-nav-header\"></ng-content>\n</ng-template>\n<ng-template #panelTemplate>\n    <ng-content select=\"igx-bottom-nav-content\"></ng-content>\n</ng-template>\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: IgxBottomNavItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: IgxBottomNavItemComponent, isStandalone: true, selector: "igx-bottom-nav-item", providers: [{ provide: IgxTabItemDirective, useExisting: IgxBottomNavItemComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #headerTemplate>\n    <ng-content select=\"igx-bottom-nav-header\"></ng-content>\n</ng-template>\n<ng-template #panelTemplate>\n    <ng-content select=\"igx-bottom-nav-content\"></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxBottomNavItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-bottom-nav-item', encapsulation: ViewEncapsulation.None, providers: [{ provide: IgxTabItemDirective, useExisting: IgxBottomNavItemComponent }], changeDetection: ChangeDetectionStrategy.Eager, standalone: true, template: "<ng-template #headerTemplate>\n    <ng-content select=\"igx-bottom-nav-header\"></ng-content>\n</ng-template>\n<ng-template #panelTemplate>\n    <ng-content select=\"igx-bottom-nav-content\"></ng-content>\n</ng-template>\n" }]
         }] });
@@ -107,33 +109,34 @@ class IgxBottomNavComponent extends IgxTabsDirective {
     getNextTabId() {
         return NEXT_BOTTOM_NAV_ITEM_ID++;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxBottomNavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: IgxBottomNavComponent, isStandalone: true, selector: "igx-bottom-nav", host: { properties: { "class.igx-bottom-nav": "this.hostClass" } }, providers: [{ provide: IgxTabsBase, useExisting: IgxBottomNavComponent }], usesInheritance: true, ngImport: i0, template: "@for (tab of items; track tab; let i = $index) {\n    <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n}\n\n<div\n    #tablist\n    role=\"tablist\"\n    class=\"igx-bottom-nav__menu igx-bottom-nav__menu--bottom\"\n    aria-orientation=\"horizontal\"\n>\n    @for (tab of items; track tab; let i = $index) {\n        <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n    }\n</div>\n", styles: ["@layer ig.base{.igx-bottom-nav__panel{display:block}.igx-bottom-nav__panel:focus{outline-style:none}.igx-bottom-nav__panel:empty{display:none}.igx-bottom-nav__menu{display:flex;position:fixed;justify-content:center;align-items:center;inset-inline-start:0;inset-inline-end:0;height:3.5rem;background:var(--background);border-top:.0625rem solid var(--border-color);overflow:hidden;z-index:8}.igx-bottom-nav__menu--top{inset-block-start:0;inset-block-end:inherit;box-shadow:var(--elevation)}.igx-bottom-nav__menu--bottom{inset-block-start:inherit;inset-block-end:0;box-shadow:var(--elevation)}.igx-bottom-nav__menu-item{display:flex;position:relative;flex-flow:column nowrap;flex:1;gap:.25rem;align-items:center;justify-content:center;min-width:5rem;max-width:10.5rem;height:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;padding:0 .75rem;-webkit-tap-highlight-color:rgba(0,0,0,0);outline-style:none;color:var(--label-color)}.igx-bottom-nav__menu-item igx-icon{--component-size: 3}.igx-bottom-nav__menu-item [igxBottomNavHeaderIcon]{display:flex;position:relative;justify-content:center;color:var(--icon-color);padding:0 .5rem;height:1.5rem;transform:translateZ(0);transition:transform .15s cubic-bezier(.455,.03,.515,.955);z-index:1}.igx-bottom-nav__menu-item [igxBottomNavHeaderLabel]{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;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--label-color);max-width:100%;text-align:center;transform:translateZ(0);transition:transform .15s cubic-bezier(.455,.03,.515,.955);z-index:1}.igx-bottom-nav__menu-item--selected{transition:color .15s cubic-bezier(.455,.03,.515,.955),opacity .25s cubic-bezier(.455,.03,.515,.955)}.igx-bottom-nav__menu-item--selected [igxBottomNavHeaderIcon]{color:var(--icon-selected-color);inset-block-start:-.125rem;transform:translateY(-2px)}.igx-bottom-nav__menu-item--selected [igxBottomNavHeaderLabel]{color:var(--label-selected-color);transform:translateY(-2px) scale(1.166667)}.igx-bottom-nav__menu-item--disabled{cursor:default;pointer-events:none;opacity:.5}.igx-bottom-nav__menu-item--disabled [igxBottomNavHeaderIcon]{color:var(--icon-disabled-color)}.igx-bottom-nav__menu-item--disabled [igxBottomNavHeaderLabel]{color:var(--label-disabled-color)}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-bottom-nav__menu-item igx-icon{--size: 1rem}.igx-bottom-nav__menu-item [igxBottomNavHeaderIcon],.igx-bottom-nav__menu-item [igxBottomNavHeaderLabel]{transform:unset;transition:none}.igx-bottom-nav__menu-item [igxBottomNavHeaderIcon]{padding:unset;height:auto}.igx-bottom-nav__menu-item--disabled{opacity:unset}}}\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.1.1", ngImport: i0, type: IgxBottomNavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxBottomNavComponent, isStandalone: true, selector: "igx-bottom-nav", host: { properties: { "class.igx-bottom-nav": "this.hostClass" } }, providers: [{ provide: IgxTabsBase, useExisting: IgxBottomNavComponent }], usesInheritance: true, ngImport: i0, template: "@for (tab of items; track tab; let i = $index) {\n    <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n}\n\n<div\n    #tablist\n    role=\"tablist\"\n    class=\"igx-bottom-nav__menu igx-bottom-nav__menu--bottom\"\n    aria-orientation=\"horizontal\"\n>\n    @for (tab of items; track tab; let i = $index) {\n        <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n    }\n</div>\n", styles: ["@layer ig.base{.igx-bottom-nav__panel{display:block}.igx-bottom-nav__panel:focus{outline-style:none}.igx-bottom-nav__panel:empty{display:none}.igx-bottom-nav__menu{display:flex;position:fixed;justify-content:center;align-items:center;inset-inline-start:0;inset-inline-end:0;height:3.5rem;background:var(--background);border-top:.0625rem solid var(--border-color);overflow:hidden;z-index:8}.igx-bottom-nav__menu--top{inset-block-start:0;inset-block-end:inherit;box-shadow:var(--elevation)}.igx-bottom-nav__menu--bottom{inset-block-start:inherit;inset-block-end:0;box-shadow:var(--elevation)}.igx-bottom-nav__menu-item{display:flex;position:relative;flex-flow:column nowrap;flex:1;gap:.25rem;align-items:center;justify-content:center;min-width:5rem;max-width:10.5rem;height:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;padding:0 .75rem;-webkit-tap-highlight-color:rgba(0,0,0,0);outline-style:none;color:var(--label-color)}.igx-bottom-nav__menu-item igx-icon{--component-size: 3}.igx-bottom-nav__menu-item [igxBottomNavHeaderIcon]{display:flex;position:relative;justify-content:center;color:var(--icon-color);padding:0 .5rem;height:1.5rem;transform:translateZ(0);transition:transform .15s cubic-bezier(.455,.03,.515,.955);z-index:1}.igx-bottom-nav__menu-item [igxBottomNavHeaderLabel]{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;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--label-color);max-width:100%;text-align:center;transform:translateZ(0);transition:transform .15s cubic-bezier(.455,.03,.515,.955);z-index:1}.igx-bottom-nav__menu-item--selected{transition:color .15s cubic-bezier(.455,.03,.515,.955),opacity .25s cubic-bezier(.455,.03,.515,.955)}.igx-bottom-nav__menu-item--selected [igxBottomNavHeaderIcon]{color:var(--icon-selected-color);inset-block-start:-.125rem;transform:translateY(-2px)}.igx-bottom-nav__menu-item--selected [igxBottomNavHeaderLabel]{color:var(--label-selected-color);transform:translateY(-2px) scale(1.166667)}.igx-bottom-nav__menu-item--disabled{cursor:default;pointer-events:none;opacity:.5}.igx-bottom-nav__menu-item--disabled [igxBottomNavHeaderIcon]{color:var(--icon-disabled-color)}.igx-bottom-nav__menu-item--disabled [igxBottomNavHeaderLabel]{color:var(--label-disabled-color)}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-bottom-nav__menu-item{--ig-icon-size: 1rem}.igx-bottom-nav__menu-item [igxBottomNavHeaderIcon],.igx-bottom-nav__menu-item [igxBottomNavHeaderLabel]{transform:unset;transition:none}.igx-bottom-nav__menu-item [igxBottomNavHeaderIcon]{padding:unset;height:auto}.igx-bottom-nav__menu-item--disabled{opacity:unset}}}\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.0", ngImport: i0, type: IgxBottomNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-bottom-nav', encapsulation: ViewEncapsulation.None, providers: [{ provide: IgxTabsBase, useExisting: IgxBottomNavComponent }], changeDetection: ChangeDetectionStrategy.Eager, imports: [NgTemplateOutlet], template: "@for (tab of items; track tab; let i = $index) {\n    <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n}\n\n<div\n    #tablist\n    role=\"tablist\"\n    class=\"igx-bottom-nav__menu igx-bottom-nav__menu--bottom\"\n    aria-orientation=\"horizontal\"\n>\n    @for (tab of items; track tab; let i = $index) {\n        <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n    }\n</div>\n", styles: ["@layer ig.base{.igx-bottom-nav__panel{display:block}.igx-bottom-nav__panel:focus{outline-style:none}.igx-bottom-nav__panel:empty{display:none}.igx-bottom-nav__menu{display:flex;position:fixed;justify-content:center;align-items:center;inset-inline-start:0;inset-inline-end:0;height:3.5rem;background:var(--background);border-top:.0625rem solid var(--border-color);overflow:hidden;z-index:8}.igx-bottom-nav__menu--top{inset-block-start:0;inset-block-end:inherit;box-shadow:var(--elevation)}.igx-bottom-nav__menu--bottom{inset-block-start:inherit;inset-block-end:0;box-shadow:var(--elevation)}.igx-bottom-nav__menu-item{display:flex;position:relative;flex-flow:column nowrap;flex:1;gap:.25rem;align-items:center;justify-content:center;min-width:5rem;max-width:10.5rem;height:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;padding:0 .75rem;-webkit-tap-highlight-color:rgba(0,0,0,0);outline-style:none;color:var(--label-color)}.igx-bottom-nav__menu-item igx-icon{--component-size: 3}.igx-bottom-nav__menu-item [igxBottomNavHeaderIcon]{display:flex;position:relative;justify-content:center;color:var(--icon-color);padding:0 .5rem;height:1.5rem;transform:translateZ(0);transition:transform .15s cubic-bezier(.455,.03,.515,.955);z-index:1}.igx-bottom-nav__menu-item [igxBottomNavHeaderLabel]{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;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--label-color);max-width:100%;text-align:center;transform:translateZ(0);transition:transform .15s cubic-bezier(.455,.03,.515,.955);z-index:1}.igx-bottom-nav__menu-item--selected{transition:color .15s cubic-bezier(.455,.03,.515,.955),opacity .25s cubic-bezier(.455,.03,.515,.955)}.igx-bottom-nav__menu-item--selected [igxBottomNavHeaderIcon]{color:var(--icon-selected-color);inset-block-start:-.125rem;transform:translateY(-2px)}.igx-bottom-nav__menu-item--selected [igxBottomNavHeaderLabel]{color:var(--label-selected-color);transform:translateY(-2px) scale(1.166667)}.igx-bottom-nav__menu-item--disabled{cursor:default;pointer-events:none;opacity:.5}.igx-bottom-nav__menu-item--disabled [igxBottomNavHeaderIcon]{color:var(--icon-disabled-color)}.igx-bottom-nav__menu-item--disabled [igxBottomNavHeaderLabel]{color:var(--label-disabled-color)}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-bottom-nav__menu-item igx-icon{--size: 1rem}.igx-bottom-nav__menu-item [igxBottomNavHeaderIcon],.igx-bottom-nav__menu-item [igxBottomNavHeaderLabel]{transform:unset;transition:none}.igx-bottom-nav__menu-item [igxBottomNavHeaderIcon]{padding:unset;height:auto}.igx-bottom-nav__menu-item--disabled{opacity:unset}}}\n"] }]
+            args: [{ selector: 'igx-bottom-nav', encapsulation: ViewEncapsulation.None, providers: [{ provide: IgxTabsBase, useExisting: IgxBottomNavComponent }], changeDetection: ChangeDetectionStrategy.Eager, imports: [NgTemplateOutlet], template: "@for (tab of items; track tab; let i = $index) {\n    <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n}\n\n<div\n    #tablist\n    role=\"tablist\"\n    class=\"igx-bottom-nav__menu igx-bottom-nav__menu--bottom\"\n    aria-orientation=\"horizontal\"\n>\n    @for (tab of items; track tab; let i = $index) {\n        <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n    }\n</div>\n", styles: ["@layer ig.base{.igx-bottom-nav__panel{display:block}.igx-bottom-nav__panel:focus{outline-style:none}.igx-bottom-nav__panel:empty{display:none}.igx-bottom-nav__menu{display:flex;position:fixed;justify-content:center;align-items:center;inset-inline-start:0;inset-inline-end:0;height:3.5rem;background:var(--background);border-top:.0625rem solid var(--border-color);overflow:hidden;z-index:8}.igx-bottom-nav__menu--top{inset-block-start:0;inset-block-end:inherit;box-shadow:var(--elevation)}.igx-bottom-nav__menu--bottom{inset-block-start:inherit;inset-block-end:0;box-shadow:var(--elevation)}.igx-bottom-nav__menu-item{display:flex;position:relative;flex-flow:column nowrap;flex:1;gap:.25rem;align-items:center;justify-content:center;min-width:5rem;max-width:10.5rem;height:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;padding:0 .75rem;-webkit-tap-highlight-color:rgba(0,0,0,0);outline-style:none;color:var(--label-color)}.igx-bottom-nav__menu-item igx-icon{--component-size: 3}.igx-bottom-nav__menu-item [igxBottomNavHeaderIcon]{display:flex;position:relative;justify-content:center;color:var(--icon-color);padding:0 .5rem;height:1.5rem;transform:translateZ(0);transition:transform .15s cubic-bezier(.455,.03,.515,.955);z-index:1}.igx-bottom-nav__menu-item [igxBottomNavHeaderLabel]{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;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--label-color);max-width:100%;text-align:center;transform:translateZ(0);transition:transform .15s cubic-bezier(.455,.03,.515,.955);z-index:1}.igx-bottom-nav__menu-item--selected{transition:color .15s cubic-bezier(.455,.03,.515,.955),opacity .25s cubic-bezier(.455,.03,.515,.955)}.igx-bottom-nav__menu-item--selected [igxBottomNavHeaderIcon]{color:var(--icon-selected-color);inset-block-start:-.125rem;transform:translateY(-2px)}.igx-bottom-nav__menu-item--selected [igxBottomNavHeaderLabel]{color:var(--label-selected-color);transform:translateY(-2px) scale(1.166667)}.igx-bottom-nav__menu-item--disabled{cursor:default;pointer-events:none;opacity:.5}.igx-bottom-nav__menu-item--disabled [igxBottomNavHeaderIcon]{color:var(--icon-disabled-color)}.igx-bottom-nav__menu-item--disabled [igxBottomNavHeaderLabel]{color:var(--label-disabled-color)}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-bottom-nav__menu-item{--ig-icon-size: 1rem}.igx-bottom-nav__menu-item [igxBottomNavHeaderIcon],.igx-bottom-nav__menu-item [igxBottomNavHeaderLabel]{transform:unset;transition:none}.igx-bottom-nav__menu-item [igxBottomNavHeaderIcon]{padding:unset;height:auto}.igx-bottom-nav__menu-item--disabled{opacity:unset}}}\n"] }]
         }], propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.igx-bottom-nav']
             }] } });
 
 class IgxBottomNavHeaderLabelDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxBottomNavHeaderLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: IgxBottomNavHeaderLabelDirective, isStandalone: true, selector: "[igxBottomNavHeaderLabel],igx-bottom-nav-header-label", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavHeaderLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxBottomNavHeaderLabelDirective, isStandalone: true, selector: "[igxBottomNavHeaderLabel],igx-bottom-nav-header-label", hostDirectives: [{ directive: i1.IgxNoTypographyDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxBottomNavHeaderLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavHeaderLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxBottomNavHeaderLabel],igx-bottom-nav-header-label',
-                    standalone: true
+                    standalone: true,
+                    hostDirectives: [IgxNoTypographyDirective]
                 }]
         }] });
 class IgxBottomNavHeaderIconDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxBottomNavHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: IgxBottomNavHeaderIconDirective, isStandalone: true, selector: "[igxBottomNavHeaderIcon],igx-bottom-nav-header-icon", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxBottomNavHeaderIconDirective, isStandalone: true, selector: "[igxBottomNavHeaderIcon],igx-bottom-nav-header-icon", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxBottomNavHeaderIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavHeaderIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxBottomNavHeaderIcon],igx-bottom-nav-header-icon',
@@ -156,11 +159,11 @@ const IGX_BOTTOM_NAV_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxBottomNavModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxBottomNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxBottomNavModule, imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderLabelDirective, IgxBottomNavHeaderIconDirective], exports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderLabelDirective, IgxBottomNavHeaderIconDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxBottomNavModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavModule, imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderLabelDirective, IgxBottomNavHeaderIconDirective], exports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderLabelDirective, IgxBottomNavHeaderIconDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxBottomNavModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/igniteui-angular-bottom-nav.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"igniteui-angular-bottom-nav.mjs","sources":["../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-content.component.ts","../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-content.component.html","../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-header.component.ts","../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-header.component.html","../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-item.component.ts","../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-item.component.html","../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.component.ts","../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.component.html","../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.directives.ts","../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/public_api.ts","../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.module.ts","../../../projects/igniteui-angular/bottom-nav/src/igniteui-angular-bottom-nav.ts"],"sourcesContent":["import { Component, HostBinding, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';\nimport { IgxTabContentBase, IgxTabContentDirective } from 'igniteui-angular/tabs';\n\n@Component({\n    selector: 'igx-bottom-nav-content',\n    templateUrl: 'bottom-nav-content.component.html',\n    encapsulation: ViewEncapsulation.None,\n    providers: [{ provide: IgxTabContentBase, useExisting: IgxBottomNavContentComponent }],\n    changeDetection: ChangeDetectionStrategy.Eager,\n    imports: []\n})\nexport class IgxBottomNavContentComponent extends IgxTabContentDirective {\n    /** @hidden */\n    @HostBinding('class.igx-bottom-nav__panel')\n    public defaultClass = true;\n}\n","@if (tab.selected || tab.previous) {\n    <ng-content></ng-content>\n}\n","import { Component, HostBinding, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';\nimport { IgxTabHeaderBase, IgxTabHeaderDirective } from 'igniteui-angular/tabs';\n\n@Component({\n    selector: 'igx-bottom-nav-header',\n    templateUrl: 'bottom-nav-header.component.html',\n    encapsulation: ViewEncapsulation.None,\n    providers: [{ provide: IgxTabHeaderBase, useExisting: IgxBottomNavHeaderComponent }],\n    changeDetection: ChangeDetectionStrategy.Eager,\n    standalone: true\n})\nexport class IgxBottomNavHeaderComponent extends IgxTabHeaderDirective {\n\n    /** @hidden */\n    @HostBinding('class.igx-bottom-nav__menu-item--selected')\n    public get cssClassSelected(): boolean {\n        return this.tab.selected;\n    }\n\n    /** @hidden */\n    @HostBinding('class.igx-bottom-nav__menu-item--disabled')\n    public get cssClassDisabled(): boolean {\n        return this.tab.disabled;\n    }\n\n    /** @hidden */\n    @HostBinding('class.igx-bottom-nav__menu-item')\n    public readonly cssClass = 'igx-bottom-nav__menu-item';\n}\n","<ng-content></ng-content>\n","import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';\nimport { IgxTabItemDirective } from 'igniteui-angular/tabs';\n\n@Component({\n    selector: 'igx-bottom-nav-item',\n    templateUrl: 'bottom-nav-item.component.html',\n    encapsulation: ViewEncapsulation.None,\n    providers: [{ provide: IgxTabItemDirective, useExisting: IgxBottomNavItemComponent }],\n    changeDetection: ChangeDetectionStrategy.Eager,\n    standalone: true\n})\nexport class IgxBottomNavItemComponent extends IgxTabItemDirective {\n}\n","<ng-template #headerTemplate>\n    <ng-content select=\"igx-bottom-nav-header\"></ng-content>\n</ng-template>\n<ng-template #panelTemplate>\n    <ng-content select=\"igx-bottom-nav-content\"></ng-content>\n</ng-template>\n","import { Component, ChangeDetectionStrategy, HostBinding, ViewEncapsulation } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IgxTabsBase, IgxTabsDirective } from 'igniteui-angular/tabs';\n\n\n/** @hidden */\nlet NEXT_BOTTOM_NAV_ITEM_ID = 0;\n\n/**\n * Bottom Navigation component enables the user to navigate among a number of contents displayed in a single view.\n *\n * @igxModule IgxBottomNavModule\n *\n * @igxTheme igx-bottom-nav-theme\n *\n * @igxKeywords bottom navigation\n *\n * @igxGroup Layouts\n *\n * @remarks\n * The Ignite UI for Angular Bottom Navigation component enables the user to navigate among a number of contents\n * displayed in a single view. The navigation through the contents is accomplished with the tab buttons located at bottom.\n *\n * @example\n * ```html\n * <igx-bottom-nav>\n *     <igx-bottom-nav-item>\n *         <igx-bottom-nav-header>\n *             <igx-icon igxBottomNavHeaderIcon>folder</igx-icon>\n *             <span igxBottomNavHeaderLabel>Tab 1</span>\n *         </igx-bottom-nav-header>\n *         <igx-bottom-nav-content>\n *             Content 1\n *         </igx-bottom-nav-content>\n *     </igx-bottom-nav-item>\n *     ...\n * </igx-bottom-nav>\n * ```\n */\n@Component({\n    selector: 'igx-bottom-nav',\n    templateUrl: 'bottom-nav.component.html',\n    styleUrl: 'bottom-nav.component.css',\n    encapsulation: ViewEncapsulation.None,\n    providers: [{ provide: IgxTabsBase, useExisting: IgxBottomNavComponent }],\n    changeDetection: ChangeDetectionStrategy.Eager,\n    imports: [NgTemplateOutlet]\n})\nexport class IgxBottomNavComponent extends IgxTabsDirective {\n    /** @hidden */\n    public override disableAnimation = true;\n\n    /** @hidden */\n    protected override componentName = 'igx-bottom-nav';\n\n    /** @hidden @internal */\n    @HostBinding('class.igx-bottom-nav')\n    public readonly hostClass = 'igx-bottom-nav';\n\n    /** @hidden */\n    protected getNextTabId() {\n        return NEXT_BOTTOM_NAV_ITEM_ID++;\n    }\n}\n","@for (tab of items; track tab; let i = $index) {\n    <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n}\n\n<div\n    #tablist\n    role=\"tablist\"\n    class=\"igx-bottom-nav__menu igx-bottom-nav__menu--bottom\"\n    aria-orientation=\"horizontal\"\n>\n    @for (tab of items; track tab; let i = $index) {\n        <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n    }\n</div>\n","import { Directive } from '@angular/core';\n\n@Directive({\n    selector: '[igxBottomNavHeaderLabel],igx-bottom-nav-header-label',\n    standalone: true\n})\nexport class IgxBottomNavHeaderLabelDirective { }\n\n@Directive({\n    selector: '[igxBottomNavHeaderIcon],igx-bottom-nav-header-icon',\n    standalone: true\n})\nexport class IgxBottomNavHeaderIconDirective { }\n","import { IgxBottomNavContentComponent } from './bottom-nav-content.component';\nimport { IgxBottomNavHeaderComponent } from './bottom-nav-header.component';\nimport { IgxBottomNavItemComponent } from './bottom-nav-item.component';\nimport { IgxBottomNavComponent } from './bottom-nav.component';\nimport { IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective } from './bottom-nav.directives';\n\nexport * from './bottom-nav.component';\nexport * from './bottom-nav-item.component';\nexport * from './bottom-nav-header.component';\nexport * from './bottom-nav.directives';\nexport * from './bottom-nav-content.component';\n\n/* NOTE: Bottom navigation directives collection for ease-of-use import in standalone components scenario */\nexport const IGX_BOTTOM_NAV_DIRECTIVES = [\n    IgxBottomNavComponent,\n    IgxBottomNavItemComponent,\n    IgxBottomNavHeaderComponent,\n    IgxBottomNavContentComponent,\n    IgxBottomNavHeaderLabelDirective,\n    IgxBottomNavHeaderIconDirective\n] as const;\n","import { NgModule } from '@angular/core';\nimport { IGX_BOTTOM_NAV_DIRECTIVES } from './public_api';\n\n/**\n * @hidden\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n    imports: [\n        ...IGX_BOTTOM_NAV_DIRECTIVES\n    ],\n    exports: [\n        ...IGX_BOTTOM_NAV_DIRECTIVES\n    ]\n})\nexport class IgxBottomNavModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.IgxBottomNavComponent","i2.IgxBottomNavItemComponent","i3.IgxBottomNavHeaderComponent","i4.IgxBottomNavContentComponent","i5.IgxBottomNavHeaderLabelDirective","i5.IgxBottomNavHeaderIconDirective"],"mappings":"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"}
+{"version":3,"file":"igniteui-angular-bottom-nav.mjs","sources":["../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-content.component.ts","../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-content.component.html","../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-header.component.ts","../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-header.component.html","../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-item.component.ts","../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav-item.component.html","../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.component.ts","../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.component.html","../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.directives.ts","../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/public_api.ts","../../../projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.module.ts","../../../projects/igniteui-angular/bottom-nav/src/igniteui-angular-bottom-nav.ts"],"sourcesContent":["import { Component, HostBinding, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';\nimport { IgxTabContentBase, IgxTabContentDirective } from 'igniteui-angular/tabs';\n\n@Component({\n    selector: 'igx-bottom-nav-content',\n    templateUrl: 'bottom-nav-content.component.html',\n    encapsulation: ViewEncapsulation.None,\n    providers: [{ provide: IgxTabContentBase, useExisting: IgxBottomNavContentComponent }],\n    changeDetection: ChangeDetectionStrategy.Eager,\n    imports: []\n})\nexport class IgxBottomNavContentComponent extends IgxTabContentDirective {\n    /** @hidden */\n    @HostBinding('class.igx-bottom-nav__panel')\n    public defaultClass = true;\n}\n","@if (tab.selected || tab.previous) {\n    <ng-content></ng-content>\n}\n","import { Component, HostBinding, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';\nimport { IgxTabHeaderBase, IgxTabHeaderDirective } from 'igniteui-angular/tabs';\n\n@Component({\n    selector: 'igx-bottom-nav-header',\n    templateUrl: 'bottom-nav-header.component.html',\n    encapsulation: ViewEncapsulation.None,\n    providers: [{ provide: IgxTabHeaderBase, useExisting: IgxBottomNavHeaderComponent }],\n    changeDetection: ChangeDetectionStrategy.Eager,\n    standalone: true\n})\nexport class IgxBottomNavHeaderComponent extends IgxTabHeaderDirective {\n\n    /** @hidden */\n    @HostBinding('class.igx-bottom-nav__menu-item--selected')\n    public get cssClassSelected(): boolean {\n        return this.tab.selected;\n    }\n\n    /** @hidden */\n    @HostBinding('class.igx-bottom-nav__menu-item--disabled')\n    public get cssClassDisabled(): boolean {\n        return this.tab.disabled;\n    }\n\n    /** @hidden */\n    @HostBinding('class.igx-bottom-nav__menu-item')\n    public readonly cssClass = 'igx-bottom-nav__menu-item';\n}\n","<ng-content></ng-content>\n","import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';\nimport { IgxTabItemDirective } from 'igniteui-angular/tabs';\n\n@Component({\n    selector: 'igx-bottom-nav-item',\n    templateUrl: 'bottom-nav-item.component.html',\n    encapsulation: ViewEncapsulation.None,\n    providers: [{ provide: IgxTabItemDirective, useExisting: IgxBottomNavItemComponent }],\n    changeDetection: ChangeDetectionStrategy.Eager,\n    standalone: true\n})\nexport class IgxBottomNavItemComponent extends IgxTabItemDirective {\n}\n","<ng-template #headerTemplate>\n    <ng-content select=\"igx-bottom-nav-header\"></ng-content>\n</ng-template>\n<ng-template #panelTemplate>\n    <ng-content select=\"igx-bottom-nav-content\"></ng-content>\n</ng-template>\n","import { Component, ChangeDetectionStrategy, HostBinding, ViewEncapsulation } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IgxTabsBase, IgxTabsDirective } from 'igniteui-angular/tabs';\n\n\n/** @hidden */\nlet NEXT_BOTTOM_NAV_ITEM_ID = 0;\n\n/**\n * Bottom Navigation component enables the user to navigate among a number of contents displayed in a single view.\n *\n * @igxModule IgxBottomNavModule\n *\n * @igxTheme igx-bottom-nav-theme\n *\n * @igxKeywords bottom navigation\n *\n * @igxGroup Layouts\n *\n * @remarks\n * The Ignite UI for Angular Bottom Navigation component enables the user to navigate among a number of contents\n * displayed in a single view. The navigation through the contents is accomplished with the tab buttons located at bottom.\n *\n * @example\n * ```html\n * <igx-bottom-nav>\n *     <igx-bottom-nav-item>\n *         <igx-bottom-nav-header>\n *             <igx-icon igxBottomNavHeaderIcon>folder</igx-icon>\n *             <span igxBottomNavHeaderLabel>Tab 1</span>\n *         </igx-bottom-nav-header>\n *         <igx-bottom-nav-content>\n *             Content 1\n *         </igx-bottom-nav-content>\n *     </igx-bottom-nav-item>\n *     ...\n * </igx-bottom-nav>\n * ```\n */\n@Component({\n    selector: 'igx-bottom-nav',\n    templateUrl: 'bottom-nav.component.html',\n    styleUrl: 'bottom-nav.component.css',\n    encapsulation: ViewEncapsulation.None,\n    providers: [{ provide: IgxTabsBase, useExisting: IgxBottomNavComponent }],\n    changeDetection: ChangeDetectionStrategy.Eager,\n    imports: [NgTemplateOutlet]\n})\nexport class IgxBottomNavComponent extends IgxTabsDirective {\n    /** @hidden */\n    public override disableAnimation = true;\n\n    /** @hidden */\n    protected override componentName = 'igx-bottom-nav';\n\n    /** @hidden @internal */\n    @HostBinding('class.igx-bottom-nav')\n    public readonly hostClass = 'igx-bottom-nav';\n\n    /** @hidden */\n    protected getNextTabId() {\n        return NEXT_BOTTOM_NAV_ITEM_ID++;\n    }\n}\n","@for (tab of items; track tab; let i = $index) {\n    <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n}\n\n<div\n    #tablist\n    role=\"tablist\"\n    class=\"igx-bottom-nav__menu igx-bottom-nav__menu--bottom\"\n    aria-orientation=\"horizontal\"\n>\n    @for (tab of items; track tab; let i = $index) {\n        <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n    }\n</div>\n","import { Directive } from '@angular/core';\nimport { IgxNoTypographyDirective } from 'igniteui-angular/directives';\n\n@Directive({\n    selector: '[igxBottomNavHeaderLabel],igx-bottom-nav-header-label',\n    standalone: true,\n    hostDirectives: [IgxNoTypographyDirective]\n})\nexport class IgxBottomNavHeaderLabelDirective { }\n\n@Directive({\n    selector: '[igxBottomNavHeaderIcon],igx-bottom-nav-header-icon',\n    standalone: true\n})\nexport class IgxBottomNavHeaderIconDirective { }\n","import { IgxBottomNavContentComponent } from './bottom-nav-content.component';\nimport { IgxBottomNavHeaderComponent } from './bottom-nav-header.component';\nimport { IgxBottomNavItemComponent } from './bottom-nav-item.component';\nimport { IgxBottomNavComponent } from './bottom-nav.component';\nimport { IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective } from './bottom-nav.directives';\n\nexport * from './bottom-nav.component';\nexport * from './bottom-nav-item.component';\nexport * from './bottom-nav-header.component';\nexport * from './bottom-nav.directives';\nexport * from './bottom-nav-content.component';\n\n/* NOTE: Bottom navigation directives collection for ease-of-use import in standalone components scenario */\nexport const IGX_BOTTOM_NAV_DIRECTIVES = [\n    IgxBottomNavComponent,\n    IgxBottomNavItemComponent,\n    IgxBottomNavHeaderComponent,\n    IgxBottomNavContentComponent,\n    IgxBottomNavHeaderLabelDirective,\n    IgxBottomNavHeaderIconDirective\n] as const;\n","import { NgModule } from '@angular/core';\nimport { IGX_BOTTOM_NAV_DIRECTIVES } from './public_api';\n\n/**\n * @hidden\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n    imports: [\n        ...IGX_BOTTOM_NAV_DIRECTIVES\n    ],\n    exports: [\n        ...IGX_BOTTOM_NAV_DIRECTIVES\n    ]\n})\nexport class IgxBottomNavModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.IgxBottomNavComponent","i2.IgxBottomNavItemComponent","i3.IgxBottomNavHeaderComponent","i4.IgxBottomNavContentComponent","i5.IgxBottomNavHeaderLabelDirective","i5.IgxBottomNavHeaderIconDirective"],"mappings":"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"}

package/fesm2022/igniteui-angular-button-group.mjs

@@ -442,10 +442,10 @@ class IgxButtonGroupComponent {
             this.updateDeselected(index);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: IgxButtonGroupComponent, isStandalone: true, selector: "igx-buttongroup", inputs: { id: "id", itemContentCssClass: "itemContentCssClass", multiSelection: "multiSelection", selectionMode: "selectionMode", values: "values", disabled: ["disabled", "disabled", booleanAttribute], alignment: "alignment" }, outputs: { selected: "selected", deselected: "deselected" }, host: { properties: { "attr.id": "this.id", "class.igx-button-group": "this.cssClass", "style.zIndex": "this.zIndex", "attr.role": "this.role", "class.igx-button-group--vertical": "this.isVertical" } }, queries: [{ propertyName: "templateButtons", predicate: IgxButtonDirective }], viewQueries: [{ propertyName: "viewButtons", predicate: IgxButtonDirective, descendants: true }], ngImport: i0, template: "<div class=\"igx-button-group__buttons-container\">\n  @for (button of values; track button) {\n    <button\n      type=\"button\"\n      igxButton=\"flat\"\n      [selected]=\"button.selected\"\n      [attr.data-togglable]=\"button.togglable\"\n      [disabled]=\"disabled || button.disabled\"\n      [igxLabel]=\"button.label\"\n      [igxRipple]=\"button.ripple\"\n    >\n      <span class=\"igx-button-group__item-content {{ itemContentCssClass }}\">\n        @if (button.icon) {\n          <igx-icon>{{ button.icon }}</igx-icon>\n        }\n        @if (button.label) {\n          <span class=\"igx-button-group__button-text\">{{ button.label }}</span>\n        }\n      </span>\n    </button>\n  }\n  <ng-content></ng-content>\n</div>\n", styles: ["@layer ig.base{.igx-button-group{--item-min-width: 2.625rem;--ig-icon-size: 1.125rem;--z-item-elevated: 2}.igx-button-group__buttons-container{display:flex;border-radius:var(--border-radius);box-shadow:var(--elevation)}.igx-button-group button{margin-top:0;margin-inline-end:0;margin-bottom:0}.igx-button-group__item{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);text-align:center;border:.0625rem solid var(--item-border-color);color:var(--item-text-color);background:var(--item-background);min-width:var(--item-min-width);display:flex;flex:1 0 0%;justify-content:center;align-items:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;z-index:0}.igx-button-group__item igx-icon{color:var(--item-icon-color)}.igx-button-group__item:hover{z-index:1;color:var(--item-hover-text-color);background:var(--item-hover-background);border-color:var(--item-hover-border-color)}.igx-button-group__item:hover igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item:active{z-index:var(--z-item-elevated);color:var(--item-hover-text-color);background:var(--item-active-background);border-color:var(--item-active-border-color)}.igx-button-group__item:active igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item[igxButton]{border-radius:0}.igx-button-group__item[igxButton][disabled=true]{color:var(--disabled-text-color);background:var(--disabled-background-color);border-color:var(--item-disabled-border)}.igx-button-group__item[igxButton][disabled=true] igx-icon{color:var(--disabled-text-color)}.igx-button-group__item[igxButton].igx-button--focused{z-index:var(--z-item-elevated);color:var(--item-focused-text-color);background:var(--item-focused-background);border-color:var(--item-focused-border-color)}.igx-button-group__item[igxButton].igx-button--focused igx-icon{color:var(--item-focused-text-color)}.igx-button-group__item[igxButton].igx-button--focused:hover{background:var(--item-focused-hover-background);border-color:var(--item-focused-hover-border-color);color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:hover igx-icon{color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:active{background:var(--item-active-background);border-color:var(--item-active-border-color);color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:active igx-icon{color:var(--item-focused-hover-text-color)}.igx-button-group__item:not(:nth-child(1)){margin-inline-start:-.0625rem}.igx-button-group__item:first-of-type{border-start-start-radius:inherit;border-end-start-radius:inherit}.igx-button-group__item:last-of-type{border-start-end-radius:inherit;border-end-end-radius:inherit}.igx-button-group__item--selected{color:var(--item-selected-text-color);background:var(--item-selected-background);border-color:var(--item-selected-border-color);position:relative;z-index:calc(var(--z-item-elevated) + 1)}.igx-button-group__item--selected[igxButton]{border-color:var(--item-selected-border-color)}.igx-button-group__item--selected igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected:hover{border-color:var(--item-selected-hover-border-color);color:var(--item-selected-hover-text-color);background:var(--item-selected-hover-background)}.igx-button-group__item--selected:hover igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected:active{border-color:var(--item-selected-active-border-color);color:var(--item-selected-hover-text-color);background:var(--item-selected-active-background)}.igx-button-group__item--selected:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{background:var(--item-selected-focus-background);border-color:var(--item-selected-hover-border-color);color:var(--item-selected-text-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover{color:var(--item-selected-hover-text-color);background:var(--item-selected-focus-hover-background);border-color:var(--item-selected-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:active{background:var(--item-selected-active-background);color:var(--item-selected-hover-text-color);border-color:var(--item-selected-active-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton][disabled=true]{color:var(--disabled-selected-text-color);background:var(--disabled-selected-background);border-color:var(--disabled-selected-border-color)}.igx-button-group__item--selected[igxButton][disabled=true] igx-icon{color:var(--disabled-selected-icon-color)}.igx-button-group__item-content{display:flex;align-items:center;flex-flow:row nowrap;min-width:0}.igx-button-group__item-content *~*{margin-inline-start:.625rem}.igx-button-group__button-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%}.igx-button-group--vertical .igx-button-group__buttons-container{flex-flow:column}.igx-button-group--vertical .igx-button-group__item{width:100%}.igx-button-group--vertical .igx-button-group__item:not(:nth-child(1)){margin-top:-.0625rem!important;margin-inline-start:0}.igx-button-group--vertical .igx-button-group__item:first-of-type{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.igx-button-group--vertical .igx-button-group__item:last-of-type{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}}@layer ig.material{@container style(--ig-theme: material){.igx-button-group__item--selected[igxButton].igx-button--focused{color:var(--item-selected-hover-text-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-hover-icon-color)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-button-group__item[igxButton].igx-button--focused{box-shadow:0 0 0 .25rem var(--idle-shadow-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{box-shadow:0 0 0 .25rem var(--selected-shadow-color)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-button-group__item igx-icon{--ig-icon-size: 1.125rem}.igx-button-group__item[igxButton].igx-button--focused{border-color:var(--item-border-color)}.igx-button-group__item[igxButton].igx-button--focused:hover{border-color:var(--item-focused-hover-border-color)}.igx-button-group__item[igxButton].igx-button--focused:after{content:\"\";position:absolute;inset-block-start:.125rem;inset-inline-start:.125rem;pointer-events:none;width:calc(100% - .25rem);height:calc(100% - .25rem);box-shadow:0 0 0 .0625rem var(--item-focused-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{border-color:var(--item-selected-hover-border-color)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-button-group{--item-min-width: rem(32px)}.igx-button-group__item{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);padding-inline:max(var(--is-large, 1)*max(.625rem,-1 * .625rem)*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(.375rem,-1 * .375rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-button-group__item igx-icon{--ig-icon-size: 1rem}.igx-button-group__item:hover{z-index:1}.igx-button-group__item:active{z-index:2}.igx-button-group__item[igxButton].igx-button--focused{box-shadow:0 0 0 .1875rem var(--idle-shadow-color)}.igx-button-group__item[igxButton].igx-button--focused igx-icon{color:var(--item-icon-color)}.igx-button-group__item[igxButton].igx-button--focused:hover igx-icon,.igx-button-group__item[igxButton].igx-button--focused:active igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{box-shadow:0 0 0 .1875rem var(--selected-shadow-color);border-color:var(--item-selected-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover,.igx-button-group__item--selected[igxButton].igx-button--focused:active{border-color:var(--item-selected-hover-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover igx-icon,.igx-button-group__item--selected[igxButton].igx-button--focused:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton][disabled=true]{border:none}}}\n"], dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { 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.1.1", ngImport: i0, type: IgxButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxButtonGroupComponent, isStandalone: true, selector: "igx-buttongroup", inputs: { id: "id", itemContentCssClass: "itemContentCssClass", multiSelection: "multiSelection", selectionMode: "selectionMode", values: "values", disabled: ["disabled", "disabled", booleanAttribute], alignment: "alignment" }, outputs: { selected: "selected", deselected: "deselected" }, host: { properties: { "attr.id": "this.id", "class.igx-button-group": "this.cssClass", "style.zIndex": "this.zIndex", "attr.role": "this.role", "class.igx-button-group--vertical": "this.isVertical" } }, queries: [{ propertyName: "templateButtons", predicate: IgxButtonDirective }], viewQueries: [{ propertyName: "viewButtons", predicate: IgxButtonDirective, descendants: true }], ngImport: i0, template: "<div class=\"igx-button-group__buttons-container\">\n  @for (button of values; track button) {\n    <button\n      type=\"button\"\n      igxButton=\"flat\"\n      [selected]=\"button.selected\"\n      [attr.data-togglable]=\"button.togglable\"\n      [disabled]=\"disabled || button.disabled\"\n      [igxLabel]=\"button.label\"\n      [igxRipple]=\"button.ripple\"\n    >\n      <span class=\"igx-button-group__item-content {{ itemContentCssClass }}\">\n        @if (button.icon) {\n          <igx-icon>{{ button.icon }}</igx-icon>\n        }\n        @if (button.label) {\n          <span class=\"igx-button-group__button-text\">{{ button.label }}</span>\n        }\n      </span>\n    </button>\n  }\n  <ng-content></ng-content>\n</div>\n", styles: ["@layer ig.base{.igx-button-group{--item-min-width: 2.625rem;--ig-icon-size: 1.125rem;--z-item-elevated: 2}.igx-button-group__buttons-container{display:flex;border-radius:var(--border-radius);box-shadow:var(--elevation)}.igx-button-group button{margin-top:0;margin-inline-end:0;margin-bottom:0}.igx-button-group__item{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);text-align:center;border:.0625rem solid var(--item-border-color);color:var(--item-text-color);background:var(--item-background);min-width:var(--item-min-width);display:flex;flex:1 0 0%;justify-content:center;align-items:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;z-index:0}.igx-button-group__item igx-icon{color:var(--item-icon-color)}.igx-button-group__item:hover{z-index:1;color:var(--item-hover-text-color);background:var(--item-hover-background);border-color:var(--item-hover-border-color)}.igx-button-group__item:hover igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item:active{z-index:var(--z-item-elevated);color:var(--item-hover-text-color);background:var(--item-active-background);border-color:var(--item-active-border-color)}.igx-button-group__item:active igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item[igxButton]{border-radius:0}.igx-button-group__item[igxButton][disabled=true]{color:var(--disabled-text-color);background:var(--disabled-background-color);border-color:var(--item-disabled-border)}.igx-button-group__item[igxButton][disabled=true] igx-icon{color:var(--disabled-text-color)}.igx-button-group__item[igxButton].igx-button--focused{z-index:var(--z-item-elevated);color:var(--item-focused-text-color);background:var(--item-focused-background);border-color:var(--item-focused-border-color)}.igx-button-group__item[igxButton].igx-button--focused igx-icon{color:var(--item-focused-text-color)}.igx-button-group__item[igxButton].igx-button--focused:hover{background:var(--item-focused-hover-background);border-color:var(--item-focused-hover-border-color);color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:hover igx-icon{color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:active{background:var(--item-active-background);border-color:var(--item-active-border-color);color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:active igx-icon{color:var(--item-focused-hover-text-color)}.igx-button-group__item:not(:nth-child(1)){margin-inline-start:-.0625rem}.igx-button-group__item:first-of-type{border-start-start-radius:inherit;border-end-start-radius:inherit}.igx-button-group__item:last-of-type{border-start-end-radius:inherit;border-end-end-radius:inherit}.igx-button-group__item--selected{color:var(--item-selected-text-color);background:var(--item-selected-background);border-color:var(--item-selected-border-color);position:relative;z-index:calc(var(--z-item-elevated) + 1)}.igx-button-group__item--selected[igxButton]{border-color:var(--item-selected-border-color)}.igx-button-group__item--selected igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected:hover{border-color:var(--item-selected-hover-border-color);color:var(--item-selected-hover-text-color);background:var(--item-selected-hover-background)}.igx-button-group__item--selected:hover igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected:active{border-color:var(--item-selected-active-border-color);color:var(--item-selected-hover-text-color);background:var(--item-selected-active-background)}.igx-button-group__item--selected:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{background:var(--item-selected-focus-background);border-color:var(--item-selected-hover-border-color);color:var(--item-selected-text-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover{color:var(--item-selected-hover-text-color);background:var(--item-selected-focus-hover-background);border-color:var(--item-selected-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:active{background:var(--item-selected-active-background);color:var(--item-selected-hover-text-color);border-color:var(--item-selected-active-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton][disabled=true]{color:var(--disabled-selected-text-color);background:var(--disabled-selected-background);border-color:var(--disabled-selected-border-color)}.igx-button-group__item--selected[igxButton][disabled=true] igx-icon{color:var(--disabled-selected-icon-color)}.igx-button-group__item-content{display:flex;align-items:center;flex-flow:row nowrap;min-width:0}.igx-button-group__item-content *~*{margin-inline-start:.625rem}.igx-button-group__button-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%}.igx-button-group--vertical .igx-button-group__buttons-container{flex-flow:column}.igx-button-group--vertical .igx-button-group__item{width:100%}.igx-button-group--vertical .igx-button-group__item:not(:nth-child(1)){margin-top:-.0625rem!important;margin-inline-start:0}.igx-button-group--vertical .igx-button-group__item:first-of-type{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.igx-button-group--vertical .igx-button-group__item:last-of-type{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}}@layer ig.material{@container style(--ig-theme: material){.igx-button-group__item--selected[igxButton].igx-button--focused{color:var(--item-selected-hover-text-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-hover-icon-color)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-button-group__item[igxButton].igx-button--focused{box-shadow:0 0 0 .25rem var(--idle-shadow-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{box-shadow:0 0 0 .25rem var(--selected-shadow-color)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-button-group__item igx-icon{--ig-icon-size: 1.125rem}.igx-button-group__item[igxButton].igx-button--focused{border-color:var(--item-border-color)}.igx-button-group__item[igxButton].igx-button--focused:hover{border-color:var(--item-focused-hover-border-color)}.igx-button-group__item[igxButton].igx-button--focused:after{content:\"\";position:absolute;inset-block-start:.125rem;inset-inline-start:.125rem;pointer-events:none;width:calc(100% - .25rem);height:calc(100% - .25rem);box-shadow:0 0 0 .0625rem var(--item-focused-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{border-color:var(--item-selected-hover-border-color)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-button-group{--item-min-width: rem(32px)}.igx-button-group__item{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);padding-inline:max(var(--is-large, 1)*max(.625rem,-1 * .625rem)*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(.375rem,-1 * .375rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-button-group__item igx-icon{--ig-icon-size: 1rem}.igx-button-group__item:hover{z-index:1}.igx-button-group__item:active{z-index:2}.igx-button-group__item[igxButton].igx-button--focused{box-shadow:0 0 0 .1875rem var(--idle-shadow-color)}.igx-button-group__item[igxButton].igx-button--focused igx-icon{color:var(--item-icon-color)}.igx-button-group__item[igxButton].igx-button--focused:hover igx-icon,.igx-button-group__item[igxButton].igx-button--focused:active igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{box-shadow:0 0 0 .1875rem var(--selected-shadow-color);border-color:var(--item-selected-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover,.igx-button-group__item--selected[igxButton].igx-button--focused:active{border-color:var(--item-selected-hover-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover igx-icon,.igx-button-group__item--selected[igxButton].igx-button--focused:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton][disabled=true]{border:none}}}\n"], dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { 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.0", ngImport: i0, type: IgxButtonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxButtonGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-buttongroup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent], template: "<div class=\"igx-button-group__buttons-container\">\n  @for (button of values; track button) {\n    <button\n      type=\"button\"\n      igxButton=\"flat\"\n      [selected]=\"button.selected\"\n      [attr.data-togglable]=\"button.togglable\"\n      [disabled]=\"disabled || button.disabled\"\n      [igxLabel]=\"button.label\"\n      [igxRipple]=\"button.ripple\"\n    >\n      <span class=\"igx-button-group__item-content {{ itemContentCssClass }}\">\n        @if (button.icon) {\n          <igx-icon>{{ button.icon }}</igx-icon>\n        }\n        @if (button.label) {\n          <span class=\"igx-button-group__button-text\">{{ button.label }}</span>\n        }\n      </span>\n    </button>\n  }\n  <ng-content></ng-content>\n</div>\n", styles: ["@layer ig.base{.igx-button-group{--item-min-width: 2.625rem;--ig-icon-size: 1.125rem;--z-item-elevated: 2}.igx-button-group__buttons-container{display:flex;border-radius:var(--border-radius);box-shadow:var(--elevation)}.igx-button-group button{margin-top:0;margin-inline-end:0;margin-bottom:0}.igx-button-group__item{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);text-align:center;border:.0625rem solid var(--item-border-color);color:var(--item-text-color);background:var(--item-background);min-width:var(--item-min-width);display:flex;flex:1 0 0%;justify-content:center;align-items:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;z-index:0}.igx-button-group__item igx-icon{color:var(--item-icon-color)}.igx-button-group__item:hover{z-index:1;color:var(--item-hover-text-color);background:var(--item-hover-background);border-color:var(--item-hover-border-color)}.igx-button-group__item:hover igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item:active{z-index:var(--z-item-elevated);color:var(--item-hover-text-color);background:var(--item-active-background);border-color:var(--item-active-border-color)}.igx-button-group__item:active igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item[igxButton]{border-radius:0}.igx-button-group__item[igxButton][disabled=true]{color:var(--disabled-text-color);background:var(--disabled-background-color);border-color:var(--item-disabled-border)}.igx-button-group__item[igxButton][disabled=true] igx-icon{color:var(--disabled-text-color)}.igx-button-group__item[igxButton].igx-button--focused{z-index:var(--z-item-elevated);color:var(--item-focused-text-color);background:var(--item-focused-background);border-color:var(--item-focused-border-color)}.igx-button-group__item[igxButton].igx-button--focused igx-icon{color:var(--item-focused-text-color)}.igx-button-group__item[igxButton].igx-button--focused:hover{background:var(--item-focused-hover-background);border-color:var(--item-focused-hover-border-color);color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:hover igx-icon{color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:active{background:var(--item-active-background);border-color:var(--item-active-border-color);color:var(--item-focused-hover-text-color)}.igx-button-group__item[igxButton].igx-button--focused:active igx-icon{color:var(--item-focused-hover-text-color)}.igx-button-group__item:not(:nth-child(1)){margin-inline-start:-.0625rem}.igx-button-group__item:first-of-type{border-start-start-radius:inherit;border-end-start-radius:inherit}.igx-button-group__item:last-of-type{border-start-end-radius:inherit;border-end-end-radius:inherit}.igx-button-group__item--selected{color:var(--item-selected-text-color);background:var(--item-selected-background);border-color:var(--item-selected-border-color);position:relative;z-index:calc(var(--z-item-elevated) + 1)}.igx-button-group__item--selected[igxButton]{border-color:var(--item-selected-border-color)}.igx-button-group__item--selected igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected:hover{border-color:var(--item-selected-hover-border-color);color:var(--item-selected-hover-text-color);background:var(--item-selected-hover-background)}.igx-button-group__item--selected:hover igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected:active{border-color:var(--item-selected-active-border-color);color:var(--item-selected-hover-text-color);background:var(--item-selected-active-background)}.igx-button-group__item--selected:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{background:var(--item-selected-focus-background);border-color:var(--item-selected-hover-border-color);color:var(--item-selected-text-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover{color:var(--item-selected-hover-text-color);background:var(--item-selected-focus-hover-background);border-color:var(--item-selected-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:active{background:var(--item-selected-active-background);color:var(--item-selected-hover-text-color);border-color:var(--item-selected-active-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton][disabled=true]{color:var(--disabled-selected-text-color);background:var(--disabled-selected-background);border-color:var(--disabled-selected-border-color)}.igx-button-group__item--selected[igxButton][disabled=true] igx-icon{color:var(--disabled-selected-icon-color)}.igx-button-group__item-content{display:flex;align-items:center;flex-flow:row nowrap;min-width:0}.igx-button-group__item-content *~*{margin-inline-start:.625rem}.igx-button-group__button-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%}.igx-button-group--vertical .igx-button-group__buttons-container{flex-flow:column}.igx-button-group--vertical .igx-button-group__item{width:100%}.igx-button-group--vertical .igx-button-group__item:not(:nth-child(1)){margin-top:-.0625rem!important;margin-inline-start:0}.igx-button-group--vertical .igx-button-group__item:first-of-type{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.igx-button-group--vertical .igx-button-group__item:last-of-type{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}}@layer ig.material{@container style(--ig-theme: material){.igx-button-group__item--selected[igxButton].igx-button--focused{color:var(--item-selected-hover-text-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-hover-icon-color)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-button-group__item[igxButton].igx-button--focused{box-shadow:0 0 0 .25rem var(--idle-shadow-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{box-shadow:0 0 0 .25rem var(--selected-shadow-color)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-button-group__item igx-icon{--ig-icon-size: 1.125rem}.igx-button-group__item[igxButton].igx-button--focused{border-color:var(--item-border-color)}.igx-button-group__item[igxButton].igx-button--focused:hover{border-color:var(--item-focused-hover-border-color)}.igx-button-group__item[igxButton].igx-button--focused:after{content:\"\";position:absolute;inset-block-start:.125rem;inset-inline-start:.125rem;pointer-events:none;width:calc(100% - .25rem);height:calc(100% - .25rem);box-shadow:0 0 0 .0625rem var(--item-focused-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{border-color:var(--item-selected-hover-border-color)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-button-group{--item-min-width: rem(32px)}.igx-button-group__item{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);padding-inline:max(var(--is-large, 1)*max(.625rem,-1 * .625rem)*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(.375rem,-1 * .375rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-button-group__item igx-icon{--ig-icon-size: 1rem}.igx-button-group__item:hover{z-index:1}.igx-button-group__item:active{z-index:2}.igx-button-group__item[igxButton].igx-button--focused{box-shadow:0 0 0 .1875rem var(--idle-shadow-color)}.igx-button-group__item[igxButton].igx-button--focused igx-icon{color:var(--item-icon-color)}.igx-button-group__item[igxButton].igx-button--focused:hover igx-icon,.igx-button-group__item[igxButton].igx-button--focused:active igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused{box-shadow:0 0 0 .1875rem var(--selected-shadow-color);border-color:var(--item-selected-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover,.igx-button-group__item--selected[igxButton].igx-button--focused:active{border-color:var(--item-selected-hover-border-color)}.igx-button-group__item--selected[igxButton].igx-button--focused:hover igx-icon,.igx-button-group__item--selected[igxButton].igx-button--focused:active igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton][disabled=true]{border:none}}}\n"] }]
         }], propDecorators: { id: [{
@@ -502,11 +502,11 @@ const IGX_BUTTON_GROUP_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxButtonGroupModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxButtonGroupModule, imports: [IgxButtonGroupComponent, i2.IgxButtonDirective], exports: [IgxButtonGroupComponent, i2.IgxButtonDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxButtonGroupModule, imports: [IgxButtonGroupComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxButtonGroupModule, imports: [IgxButtonGroupComponent, i2.IgxButtonDirective], exports: [IgxButtonGroupComponent, i2.IgxButtonDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxButtonGroupModule, imports: [IgxButtonGroupComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxButtonGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxButtonGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...IGX_BUTTON_GROUP_DIRECTIVES],