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

package/fesm2022/igniteui-angular-banner.mjs

@@ -6,10 +6,10 @@ import { getCurrentResourceStrings, BannerResourceStringsEN, onResourceChangeHan
 import { IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent } from 'igniteui-angular/expansion-panel';
 
 class IgxBannerActionsDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBannerActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxBannerActionsDirective, isStandalone: true, selector: "igx-banner-actions", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxBannerActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxBannerActionsDirective, isStandalone: true, selector: "igx-banner-actions", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBannerActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxBannerActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -288,10 +288,10 @@ class IgxBannerComponent {
         }
         this.closed.emit(this._bannerEvent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxBannerComponent, isStandalone: true, selector: "igx-banner", inputs: { animationSettings: "animationSettings", resourceStrings: "resourceStrings", expanded: "expanded" }, outputs: { opened: "opened", opening: "opening", closed: "closed", closing: "closing" }, host: { properties: { "class": "this.cssClass", "style.display": "this.displayStyle" } }, queries: [{ propertyName: "bannerIcon", first: true, predicate: IgxIconComponent, descendants: true }, { propertyName: "_bannerActionTemplate", first: true, predicate: IgxBannerActionsDirective, descendants: true }], viewQueries: [{ propertyName: "_expansionPanel", first: true, predicate: ["expansionPanel"], descendants: true, static: true }], ngImport: i0, template: "<igx-expansion-panel #expansionPanel [animationSettings]=\"animationSettings\" (contentCollapsed)=\"onExpansionPanelClose()\" (contentExpanded)=\"onExpansionPanelOpen()\"\n    [collapsed]=\"collapsed\" role=\"status\" aria-live=\"polite\" [attr.aria-hidden]=\"collapsed\">\n    <igx-expansion-panel-body>\n        <div class=\"igx-banner\">\n            <div class=\"igx-banner__message\">\n                @if (bannerIcon) {\n                    <div class=\"igx-banner__illustration\">\n                        <ng-content select=\"igx-icon\"></ng-content>\n                    </div>\n                }\n                <span class=\"igx-banner__text\" data-no-typography>\n                    <ng-content></ng-content>\n                </span>\n            </div>\n            <div class=\"igx-banner__actions\">\n                @if (useDefaultTemplate) {\n                    <button type=\"button\" igxButton=\"flat\" igxRipple (click)=\"close($event)\">\n                        {{ resourceStrings.igx_banner_button_dismiss }}\n                    </button>\n                } @else {\n                    <ng-content select=\"igx-banner-actions\"></ng-content>\n                }\n            </div>\n        </div>\n    </igx-expansion-panel-body>\n</igx-expansion-panel>\n", styles: ["@layer ig.base{.igx-banner__actions>igx-banner-actions,.igx-banner__actions{display:flex;flex-wrap:wrap;align-self:flex-end;gap:.5rem}.igx-banner__actions>igx-banner-actions>a,.igx-banner__actions>a{display:inline-flex;align-items:center}.igx-banner__illustration,.igx-banner__message{display:flex;align-items:center}.igx-banner-host igx-expansion-panel-body{padding:0!important}.igx-banner{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--ig-size-large));display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.5rem;padding:1rem .5rem;min-width:20rem;background:var(--banner-background);box-shadow:inset 0 -.0625rem 0 0 var(--banner-border-color);border-radius:var(--border-radius)}.igx-banner igc-icon,.igx-banner igx-icon,.igx-banner igc-button,.igx-banner [igxButton]{--component-size: var(--ig-size, var(--ig-size-large))}.igx-banner__message{min-width:9.375rem;flex:1 0 0%;gap:1rem;padding:0 .5rem}.igx-banner__illustration{justify-content:center;color:var(--banner-illustration-color)}.igx-banner__text{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin-block:0;color:var(--banner-message-color);flex:1 0 0%}.igx-banner__text>*:not(hr){margin-block-start:0!important}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-banner{box-shadow:inset 0 0 0 .0625rem var(--banner-border-color);padding:1rem}.igx-banner igc-icon,.igx-banner igx-icon,.igx-banner igc-button,.igx-banner [igxButton]{--component-size: var(--ig-size, var(--ig-size-medium))}.igx-banner__message{gap:.5rem;padding:initial}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-banner__text{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-block:0}}}\n"], dependencies: [{ kind: "component", type: IgxExpansionPanelComponent, selector: "igx-expansion-panel", inputs: ["animationSettings", "id", "collapsed"], outputs: ["collapsedChange", "contentCollapsing", "contentCollapsed", "contentExpanding", "contentExpanded"] }, { kind: "component", type: IgxExpansionPanelBodyComponent, selector: "igx-expansion-panel-body", inputs: ["role", "label", "labelledBy"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxBannerComponent, isStandalone: true, selector: "igx-banner", inputs: { animationSettings: "animationSettings", resourceStrings: "resourceStrings", expanded: "expanded" }, outputs: { opened: "opened", opening: "opening", closed: "closed", closing: "closing" }, host: { properties: { "class": "this.cssClass", "style.display": "this.displayStyle" } }, queries: [{ propertyName: "bannerIcon", first: true, predicate: IgxIconComponent, descendants: true }, { propertyName: "_bannerActionTemplate", first: true, predicate: IgxBannerActionsDirective, descendants: true }], viewQueries: [{ propertyName: "_expansionPanel", first: true, predicate: ["expansionPanel"], descendants: true, static: true }], ngImport: i0, template: "<igx-expansion-panel #expansionPanel [animationSettings]=\"animationSettings\" (contentCollapsed)=\"onExpansionPanelClose()\" (contentExpanded)=\"onExpansionPanelOpen()\"\n    [collapsed]=\"collapsed\" role=\"status\" aria-live=\"polite\" [attr.aria-hidden]=\"collapsed\">\n    <igx-expansion-panel-body>\n        <div class=\"igx-banner\">\n            <div class=\"igx-banner__message\">\n                @if (bannerIcon) {\n                    <div class=\"igx-banner__illustration\">\n                        <ng-content select=\"igx-icon\"></ng-content>\n                    </div>\n                }\n                <span class=\"igx-banner__text\" data-no-typography>\n                    <ng-content></ng-content>\n                </span>\n            </div>\n            <div class=\"igx-banner__actions\">\n                @if (useDefaultTemplate) {\n                    <button type=\"button\" igxButton=\"flat\" igxRipple (click)=\"close($event)\">\n                        {{ resourceStrings.igx_banner_button_dismiss }}\n                    </button>\n                } @else {\n                    <ng-content select=\"igx-banner-actions\"></ng-content>\n                }\n            </div>\n        </div>\n    </igx-expansion-panel-body>\n</igx-expansion-panel>\n", styles: ["@layer ig.base{.igx-banner__actions>igx-banner-actions,.igx-banner__actions{display:flex;flex-wrap:wrap;align-self:flex-end;gap:.5rem}.igx-banner__actions>igx-banner-actions>a,.igx-banner__actions>a{display:inline-flex;align-items:center}.igx-banner__illustration,.igx-banner__message{display:flex;align-items:center}.igx-banner-host igx-expansion-panel-body{padding:0!important}.igx-banner{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--ig-size-large));display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.5rem;padding:1rem .5rem;min-width:20rem;background:var(--banner-background);box-shadow:inset 0 -.0625rem 0 0 var(--banner-border-color);border-radius:var(--border-radius)}.igx-banner igc-icon,.igx-banner igx-icon,.igx-banner igc-button,.igx-banner [igxButton]{--component-size: var(--ig-size, var(--ig-size-large))}.igx-banner__message{min-width:9.375rem;flex:1 0 0%;gap:1rem;padding:0 .5rem}.igx-banner__illustration{justify-content:center;color:var(--banner-illustration-color)}.igx-banner__text{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin-block:0;color:var(--banner-message-color);flex:1 0 0%}.igx-banner__text>*:not(hr){margin-block-start:0!important}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-banner{box-shadow:inset 0 0 0 .0625rem var(--banner-border-color);padding:1rem}.igx-banner igc-icon,.igx-banner igx-icon,.igx-banner igc-button,.igx-banner [igxButton]{--component-size: var(--ig-size, var(--ig-size-medium))}.igx-banner__message{gap:.5rem;padding:initial}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-banner__text{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-block:0}}}\n"], dependencies: [{ kind: "component", type: IgxExpansionPanelComponent, selector: "igx-expansion-panel", inputs: ["animationSettings", "id", "collapsed"], outputs: ["collapsedChange", "contentCollapsing", "contentCollapsed", "contentExpanding", "contentExpanded"] }, { kind: "component", type: IgxExpansionPanelBodyComponent, selector: "igx-expansion-panel-body", inputs: ["role", "label", "labelledBy"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBannerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxBannerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-banner', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxButtonDirective, IgxRippleDirective], template: "<igx-expansion-panel #expansionPanel [animationSettings]=\"animationSettings\" (contentCollapsed)=\"onExpansionPanelClose()\" (contentExpanded)=\"onExpansionPanelOpen()\"\n    [collapsed]=\"collapsed\" role=\"status\" aria-live=\"polite\" [attr.aria-hidden]=\"collapsed\">\n    <igx-expansion-panel-body>\n        <div class=\"igx-banner\">\n            <div class=\"igx-banner__message\">\n                @if (bannerIcon) {\n                    <div class=\"igx-banner__illustration\">\n                        <ng-content select=\"igx-icon\"></ng-content>\n                    </div>\n                }\n                <span class=\"igx-banner__text\" data-no-typography>\n                    <ng-content></ng-content>\n                </span>\n            </div>\n            <div class=\"igx-banner__actions\">\n                @if (useDefaultTemplate) {\n                    <button type=\"button\" igxButton=\"flat\" igxRipple (click)=\"close($event)\">\n                        {{ resourceStrings.igx_banner_button_dismiss }}\n                    </button>\n                } @else {\n                    <ng-content select=\"igx-banner-actions\"></ng-content>\n                }\n            </div>\n        </div>\n    </igx-expansion-panel-body>\n</igx-expansion-panel>\n", styles: ["@layer ig.base{.igx-banner__actions>igx-banner-actions,.igx-banner__actions{display:flex;flex-wrap:wrap;align-self:flex-end;gap:.5rem}.igx-banner__actions>igx-banner-actions>a,.igx-banner__actions>a{display:inline-flex;align-items:center}.igx-banner__illustration,.igx-banner__message{display:flex;align-items:center}.igx-banner-host igx-expansion-panel-body{padding:0!important}.igx-banner{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--ig-size-large));display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.5rem;padding:1rem .5rem;min-width:20rem;background:var(--banner-background);box-shadow:inset 0 -.0625rem 0 0 var(--banner-border-color);border-radius:var(--border-radius)}.igx-banner igc-icon,.igx-banner igx-icon,.igx-banner igc-button,.igx-banner [igxButton]{--component-size: var(--ig-size, var(--ig-size-large))}.igx-banner__message{min-width:9.375rem;flex:1 0 0%;gap:1rem;padding:0 .5rem}.igx-banner__illustration{justify-content:center;color:var(--banner-illustration-color)}.igx-banner__text{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin-block:0;color:var(--banner-message-color);flex:1 0 0%}.igx-banner__text>*:not(hr){margin-block-start:0!important}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-banner{box-shadow:inset 0 0 0 .0625rem var(--banner-border-color);padding:1rem}.igx-banner igc-icon,.igx-banner igx-icon,.igx-banner igc-button,.igx-banner [igxButton]{--component-size: var(--ig-size, var(--ig-size-medium))}.igx-banner__message{gap:.5rem;padding:initial}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-banner__text{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-block:0}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { bannerIcon: [{
@@ -336,11 +336,11 @@ const IGX_BANNER_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxBannerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBannerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxBannerModule, imports: [IgxBannerComponent, IgxBannerActionsDirective], exports: [IgxBannerComponent, IgxBannerActionsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBannerModule, imports: [IgxBannerComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxBannerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxBannerModule, imports: [IgxBannerComponent, IgxBannerActionsDirective], exports: [IgxBannerComponent, IgxBannerActionsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxBannerModule, imports: [IgxBannerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBannerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxBannerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...IGX_BANNER_DIRECTIVES],

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

@@ -11,10 +11,10 @@ class IgxBottomNavContentComponent extends IgxTabContentDirective {
         /** @hidden */
         this.defaultClass = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBottomNavContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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.2.0", ngImport: i0, type: IgxBottomNavContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBottomNavContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -36,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.7", ngImport: i0, type: IgxBottomNavHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", 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.2.0", ngImport: i0, type: IgxBottomNavHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBottomNavHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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: [{
@@ -54,10 +54,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
             }] } });
 
 class IgxBottomNavItemComponent extends IgxTabItemDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBottomNavItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", 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.2.0", ngImport: i0, type: IgxBottomNavItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBottomNavItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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" }]
         }] });
@@ -109,10 +109,10 @@ class IgxBottomNavComponent extends IgxTabsDirective {
     getNextTabId() {
         return NEXT_BOTTOM_NAV_ITEM_ID++;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBottomNavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxBottomNavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.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{--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.7", ngImport: i0, type: IgxBottomNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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{--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: [{
@@ -121,10 +121,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
             }] } });
 
 class IgxBottomNavHeaderLabelDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBottomNavHeaderLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxBottomNavHeaderLabelDirective, isStandalone: true, selector: "[igxBottomNavHeaderLabel],igx-bottom-nav-header-label", hostDirectives: [{ directive: i1.IgxNoTypographyDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxBottomNavHeaderLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxBottomNavHeaderLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxBottomNavHeaderLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxBottomNavHeaderLabel],igx-bottom-nav-header-label',
@@ -133,10 +133,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }] });
 class IgxBottomNavHeaderIconDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBottomNavHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxBottomNavHeaderIconDirective, isStandalone: true, selector: "[igxBottomNavHeaderIcon],igx-bottom-nav-header-icon", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxBottomNavHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxBottomNavHeaderIconDirective, isStandalone: true, selector: "[igxBottomNavHeaderIcon],igx-bottom-nav-header-icon", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBottomNavHeaderIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxBottomNavHeaderIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxBottomNavHeaderIcon],igx-bottom-nav-header-icon',
@@ -159,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.7", ngImport: i0, type: IgxBottomNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", 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.7", ngImport: i0, type: IgxBottomNavModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxBottomNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.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.2.0", ngImport: i0, type: IgxBottomNavModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBottomNavModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxBottomNavModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

@@ -28,10 +28,10 @@ let NEXT_ID = 0;
  * ```
  * The `fontOptions` value shown above is defined as:
  * ```typescript
- * this.fontOptions = [
- *   { icon: 'format_bold', selected: false },
- *   { icon: 'format_italic', selected: false },
- *   { icon: 'format_underlined', selected: false }];
+ * public fontOptions: IButtonGroupButton[] = [
+ *   { label: 'Bold', icon: 'format_bold', selected: false },
+ *   { label: 'Italic', icon: 'format_italic', selected: false },
+ *   { label: 'Underline', icon: 'format_underlined', selected: false }];
  * ```
  */
 class IgxButtonGroupComponent {
@@ -65,6 +65,26 @@ class IgxButtonGroupComponent {
          * ```
          */
         this.role = 'group';
+        /**
+         * Configures the buttons rendered by the button group using a collection of `IButtonGroupButton` objects.
+         * The buttons are rendered before any buttons projected in the group's content.
+         *
+         * The `selected` flag of each item is kept in sync with the selection state of its button.
+         *
+         * @example
+         * ```typescript
+         * public cities: IButtonGroupButton[] = [
+         *     { label: 'Sofia' },
+         *     { label: 'London' },
+         *     { label: 'New York', selected: true },
+         *     { label: 'Tokyo', disabled: true }
+         * ];
+         * ```
+         * ```html
+         * <igx-buttongroup [selectionMode]="'single'" [values]="cities"></igx-buttongroup>
+         * ```
+         */
+        this.values = [];
         /**
          * An @Ouput property that emits an event when a button is selected.
          * ```typescript
@@ -144,27 +164,6 @@ class IgxButtonGroupComponent {
     get itemContentCssClass() {
         return this._itemContentCssClass;
     }
-    /**
-     * Enables selecting multiple buttons. By default, multi-selection is false.
-     *
-     * @deprecated in version 16.1.0. Use the `selectionMode` property instead.
-     */
-    get multiSelection() {
-        if (this.selectionMode === 'multi') {
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-    set multiSelection(selectionMode) {
-        if (selectionMode) {
-            this.selectionMode = 'multi';
-        }
-        else {
-            this.selectionMode = 'single';
-        }
-    }
     /**
      * Gets/Sets the selection mode to 'single', 'singleRequired' or 'multi' of the buttons. By default, the selection mode is 'single'.
      * ```html
@@ -441,12 +440,12 @@ class IgxButtonGroupComponent {
             this.updateDeselected(index);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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[igxButton]: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[igxButton]:hover igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item[igxButton]: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[igxButton]:active igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item[igxButton]{border-radius:0;background:var(--item-background);color:var(--item-text-color)}.igx-button-group__item[igxButton] igx-icon{color:var(--item-icon-color)}.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]{background:var(--item-selected-background);border-color:var(--item-selected-border-color);color:var(--item-selected-text-color)}.igx-button-group__item--selected[igxButton] igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected[igxButton]: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[igxButton]:hover igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton]: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[igxButton]: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.2.0", ngImport: i0, type: IgxButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxButtonGroupComponent, isStandalone: true, selector: "igx-buttongroup", inputs: { id: "id", itemContentCssClass: "itemContentCssClass", 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.label) {\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[igxButton]: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[igxButton]:hover igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item[igxButton]: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[igxButton]:active igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item[igxButton]{border-radius:0;background:var(--item-background);color:var(--item-text-color)}.igx-button-group__item[igxButton] igx-icon{color:var(--item-icon-color)}.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]{background:var(--item-selected-background);border-color:var(--item-selected-border-color);color:var(--item-selected-text-color)}.igx-button-group__item--selected[igxButton] igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected[igxButton]: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[igxButton]:hover igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton]: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[igxButton]: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.7", ngImport: i0, type: IgxButtonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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[igxButton]: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[igxButton]:hover igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item[igxButton]: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[igxButton]:active igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item[igxButton]{border-radius:0;background:var(--item-background);color:var(--item-text-color)}.igx-button-group__item[igxButton] igx-icon{color:var(--item-icon-color)}.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]{background:var(--item-selected-background);border-color:var(--item-selected-border-color);color:var(--item-selected-text-color)}.igx-button-group__item--selected[igxButton] igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected[igxButton]: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[igxButton]:hover igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton]: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[igxButton]: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"] }]
+            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.label) {\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[igxButton]: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[igxButton]:hover igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item[igxButton]: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[igxButton]:active igx-icon{color:var(--item-hover-icon-color)}.igx-button-group__item[igxButton]{border-radius:0;background:var(--item-background);color:var(--item-text-color)}.igx-button-group__item[igxButton] igx-icon{color:var(--item-icon-color)}.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]{background:var(--item-selected-background);border-color:var(--item-selected-border-color);color:var(--item-selected-text-color)}.igx-button-group__item--selected[igxButton] igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected igx-icon{color:var(--item-selected-icon-color)}.igx-button-group__item--selected[igxButton]: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[igxButton]:hover igx-icon{color:var(--item-selected-hover-icon-color)}.igx-button-group__item--selected[igxButton]: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[igxButton]: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: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -463,8 +462,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 args: ['attr.role']
             }], itemContentCssClass: [{
                 type: Input
-            }], multiSelection: [{
-                type: Input
             }], selectionMode: [{
                 type: Input
             }], values: [{
@@ -501,11 +498,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.7", ngImport: i0, type: IgxButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxButtonGroupModule, imports: [IgxButtonGroupComponent, i2.IgxButtonDirective], exports: [IgxButtonGroupComponent, i2.IgxButtonDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxButtonGroupModule, imports: [IgxButtonGroupComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxButtonGroupModule, imports: [IgxButtonGroupComponent, i2.IgxButtonDirective], exports: [IgxButtonGroupComponent, i2.IgxButtonDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxButtonGroupModule, imports: [IgxButtonGroupComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxButtonGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxButtonGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...IGX_BUTTON_GROUP_DIRECTIVES],