igniteui-angular 22.1.3 → 22.2.0-rc.0

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.1", ngImport: i0, type: IgxBannerActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxBannerActionsDirective, isStandalone: true, selector: "igx-banner-actions", ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBannerActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBannerActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -68,10 +68,11 @@ class IgxBannerComponent {
      * By default it uses EN resources.
      */
     set resourceStrings(value) {
-        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
+        this._resourceStrings = value;
+        this._customResourceStrings = Object.assign({}, this._defaultResourceStrings, this._resourceStrings);
     }
     get resourceStrings() {
-        return this._resourceStrings || this._defaultResourceStrings;
+        return this._resourceStrings ? this._customResourceStrings : this._defaultResourceStrings;
     }
     /**
      * Gets/Sets whether the banner is expanded (visible) or collapsed (hidden).
@@ -186,9 +187,11 @@ class IgxBannerComponent {
         this._expanded = false;
         this._shouldFireEvent = false;
         this._resourceStrings = null;
+        this._customResourceStrings = null;
         this._defaultResourceStrings = getCurrentResourceStrings(BannerResourceStringsEN);
         onResourceChangeHandle(this._destroyRef, () => {
             this._defaultResourceStrings = getCurrentResourceStrings(BannerResourceStringsEN, false);
+            this._customResourceStrings = this._resourceStrings ? Object.assign({}, this._defaultResourceStrings, this._resourceStrings) : null;
         }, this);
     }
     /**
@@ -285,10 +288,10 @@ class IgxBannerComponent {
         }
         this.closed.emit(this._bannerEvent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBannerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", 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: [{
@@ -333,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.1", ngImport: i0, type: IgxBannerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxBannerModule, imports: [IgxBannerComponent, IgxBannerActionsDirective], exports: [IgxBannerComponent, IgxBannerActionsDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBannerModule, imports: [IgxBannerComponent] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBannerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBannerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...IGX_BANNER_DIRECTIVES],

package/fesm2022/igniteui-angular-banner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"igniteui-angular-banner.mjs","sources":["../../../projects/igniteui-angular/banner/src/banner/banner.directives.ts","../../../projects/igniteui-angular/banner/src/banner/banner.component.ts","../../../projects/igniteui-angular/banner/src/banner/banner.component.html","../../../projects/igniteui-angular/banner/src/banner/public_api.ts","../../../projects/igniteui-angular/banner/src/banner/banner.module.ts","../../../projects/igniteui-angular/banner/src/igniteui-angular-banner.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: 'igx-banner-actions',\n    standalone: true\n})\nexport class IgxBannerActionsDirective { }\n","import {\n  Component,\n  ContentChild,\n  DestroyRef,\n  ElementRef,\n  EventEmitter,\n  HostBinding,\n  inject,\n  Input,\n  Output,\n  ViewChild,\n  ChangeDetectionStrategy,\n  ViewEncapsulation\n} from '@angular/core';\n\nimport { IgxIconComponent } from 'igniteui-angular/icon';\nimport { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';\nimport { IgxBannerActionsDirective } from './banner.directives';\nimport {\n    CancelableEventArgs,\n    IBaseEventArgs,\n    BannerResourceStringsEN,\n    IBannerResourceStrings,\n    getCurrentResourceStrings,\n    onResourceChangeHandle,\n    IToggleView\n} from 'igniteui-angular/core';\nimport { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, ToggleAnimationSettings } from 'igniteui-angular/expansion-panel';\n\nexport interface BannerEventArgs extends IBaseEventArgs {\n    event?: Event;\n}\n\nexport interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventArgs {\n}\n/**\n * **Ignite UI for Angular Banner** -\n * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner.html)\n *\n * The Ignite UI Banner provides a highly template-able and easy to use banner that can be shown in your application.\n *\n * Usage:\n *\n * ```html\n * <igx-banner #banner>\n *   Our privacy settings have changed.\n *  <igx-banner-actions>\n *      <button type=\"button\" igxButton=\"contained\">Read More</button>\n *      <button type=\"button\" igxButton=\"contained\">Accept and Continue</button>\n *  </igx-banner-actions>\n * </igx-banner>\n * ```\n */\n@Component({\n    selector: 'igx-banner',\n    templateUrl: 'banner.component.html',\n    styleUrl: 'banner.component.css',\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.Eager,\n    imports: [IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxButtonDirective, IgxRippleDirective]\n})\nexport class IgxBannerComponent implements IToggleView {\n    public elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    /**\n     * @hidden\n     */\n    @ContentChild(IgxIconComponent)\n    public bannerIcon!: IgxIconComponent;\n\n    /**\n     * Fires after the banner shows up\n     * ```typescript\n     * public handleOpened(event) {\n     *  ...\n     * }\n     * ```\n     * ```html\n     * <igx-banner (opened)=\"handleOpened($event)\"></igx-banner>\n     * ```\n     */\n    @Output()\n    public opened = new EventEmitter<BannerEventArgs>();\n\n    /**\n     * Fires before the banner shows up\n     * ```typescript\n     * public handleOpening(event) {\n     *  ...\n     * }\n     * ```\n     * ```html\n     * <igx-banner (opening)=\"handleOpening($event)\"></igx-banner>\n     * ```\n     */\n    @Output()\n    public opening = new EventEmitter<BannerCancelEventArgs>();\n\n    /**\n     * Fires after the banner hides\n     * ```typescript\n     * public handleClosed(event) {\n     *  ...\n     * }\n     * ```\n     * ```html\n     * <igx-banner (closed)=\"handleClosed($event)\"></igx-banner>\n     * ```\n     */\n    @Output()\n    public closed = new EventEmitter<BannerEventArgs>();\n\n    /**\n     * Fires before the banner hides\n     * ```typescript\n     * public handleClosing(event) {\n     *  ...\n     * }\n     * ```\n     * ```html\n     * <igx-banner (closing)=\"handleClosing($event)\"></igx-banner>\n     * ```\n     */\n    @Output()\n    public closing = new EventEmitter<BannerCancelEventArgs>();\n\n    /** @hidden */\n    public get useDefaultTemplate(): boolean {\n        return !this._bannerActionTemplate;\n    }\n\n    /**\n     * Set the animation settings used by the banner open/close methods\n     * ```typescript\n     * import { slideInLeft, slideOutRight } from 'igniteui-angular';\n     * ...\n     * banner.animationSettings: ToggleAnimationSettings = { openAnimation: slideInLeft, closeAnimation: slideOutRight };\n     * ```\n     */\n    public set animationSettings(settings: ToggleAnimationSettings) {\n        this._animationSettings = settings;\n    }\n\n    /**\n     * Get the animation settings used by the banner open/close methods\n     * ```typescript\n     * let currentAnimations: ToggleAnimationSettings = banner.animationSettings\n     * ```\n     */\n    @Input()\n    public get animationSettings(): ToggleAnimationSettings {\n        return this._animationSettings ? this._animationSettings : this._expansionPanel.animationSettings;\n    }\n\n    /**\n     * Gets/Sets the resource strings.\n     *\n     * @remarks\n     * By default it uses EN resources.\n     */\n    @Input()\n    public set resourceStrings(value: IBannerResourceStrings) {\n        this._resourceStrings = Object.assign({}, this._resourceStrings, value);\n    }\n\n    public get resourceStrings(): IBannerResourceStrings {\n        return this._resourceStrings || this._defaultResourceStrings;\n    }\n\n    /**\n     * Gets/Sets whether the banner is expanded (visible) or collapsed (hidden).\n     * Defaults to `false`.\n     * Setting to `true` opens the banner, while `false` closes it.\n     *\n     * @example\n     * // Expand the banner\n     * banner.expanded = true;\n     *\n     * @example\n     * // Collapse the banner\n     * banner.expanded = false;\n     *\n     * @example\n     * // Check if the banner is expanded\n     * const isExpanded = banner.expanded;\n     */\n    @Input()\n    public get expanded(): boolean {\n        return this._expanded;\n    }\n\n    public set expanded(value: boolean) {\n        if (value === this._expanded) {\n            return;\n        }\n\n        this._expanded = value;\n        this._shouldFireEvent = true;\n\n        if (value) {\n            this._expansionPanel.open();\n        } else {\n            this._expansionPanel.close();\n        }\n    }\n\n    /**\n     * Gets whether the banner is collapsed.\n     *\n     * ```typescript\n     * const isCollapsed: boolean = banner.collapsed;\n     * ```\n     */\n    public get collapsed(): boolean {\n        return this._expansionPanel.collapsed;\n    }\n\n    /**\n     * Returns the native element of the banner component\n     * ```typescript\n     *  const myBannerElement: HTMLElement = banner.element;\n     * ```\n     */\n    public get element() {\n        return this.elementRef.nativeElement;\n    }\n\n    @HostBinding('class')\n    public cssClass = 'igx-banner-host';\n\n    /**\n     * @hidden\n     */\n    @HostBinding('style.display')\n    public get displayStyle(): string {\n        return this.collapsed ? '' : 'block';\n    }\n\n    @ViewChild('expansionPanel', { static: true })\n    private _expansionPanel!: IgxExpansionPanelComponent;\n\n    @ContentChild(IgxBannerActionsDirective)\n    private _bannerActionTemplate!: IgxBannerActionsDirective;\n\n    private _destroyRef = inject(DestroyRef);\n    private _expanded: boolean = false;\n    private _shouldFireEvent: boolean = false;\n    private _bannerEvent!: BannerEventArgs;\n    private _animationSettings!: ToggleAnimationSettings;\n    private _resourceStrings: IBannerResourceStrings = null!;\n    private _defaultResourceStrings = getCurrentResourceStrings(BannerResourceStringsEN);\n\n    constructor() {\n        onResourceChangeHandle(this._destroyRef, () => {\n            this._defaultResourceStrings = getCurrentResourceStrings(BannerResourceStringsEN, false);\n        }, this);\n    }\n\n    /**\n     * Opens the banner\n     *\n     * ```typescript\n     *  myBanner.open();\n     * ```\n     *\n     * ```html\n     * <igx-banner #banner>\n     * ...\n     * </igx-banner>\n     * <button type=\"button\" (click)=\"banner.open()\">Open Banner</button>\n     * ```\n     */\n    public open(event?: MouseEvent) {\n        this._bannerEvent = { owner: this, event };\n        const openingArgs: BannerCancelEventArgs = {\n            owner: this,\n            event,\n            cancel: false\n        };\n        this.opening.emit(openingArgs);\n        if (openingArgs.cancel) {\n            return;\n        }\n        this._expansionPanel.open(event);\n        this._expanded = true;\n        this._shouldFireEvent = false;\n    }\n\n    /**\n     * Closes the banner\n     *\n     * ```typescript\n     *  myBanner.close();\n     * ```\n     *\n     * ```html\n     * <igx-banner #banner>\n     * ...\n     * </igx-banner>\n     * <button type=\"button\" (click)=\"banner.close()\">Close Banner</button>\n     * ```\n     */\n    public close(event?: MouseEvent) {\n        this._bannerEvent = { owner: this, event};\n        const closingArgs: BannerCancelEventArgs = {\n            owner: this,\n            event,\n            cancel: false\n        };\n        this.closing.emit(closingArgs);\n        if (closingArgs.cancel) {\n            return;\n        }\n        this._expansionPanel.close(event);\n        this._expanded = false;\n        this._shouldFireEvent = false;\n    }\n\n    /**\n     * Toggles the banner\n     *\n     * ```typescript\n     *  myBanner.toggle();\n     * ```\n     *\n     * ```html\n     * <igx-banner #banner>\n     * ...\n     * </igx-banner>\n     * <button type=\"button\" (click)=\"banner.toggle()\">Toggle Banner</button>\n     * ```\n     */\n    public toggle(event?: MouseEvent) {\n        if (this.collapsed) {\n            this.open(event);\n        } else {\n            this.close(event);\n        }\n    }\n\n    /** @hidden */\n    public onExpansionPanelOpen() {\n        if (this._shouldFireEvent) {\n            return;\n        }\n        this.opened.emit(this._bannerEvent);\n    }\n\n    /** @hidden */\n    public onExpansionPanelClose() {\n        if (this._shouldFireEvent) {\n            return;\n        }\n        this.closed.emit(this._bannerEvent);\n    }\n}\n","<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","import { IgxBannerComponent } from './banner.component';\nimport { IgxBannerActionsDirective } from './banner.directives';\n\nexport * from './banner.component';\nexport * from './banner.directives';\n\n/* Banner directives collection for ease-of-use import in standalone components scenario */\nexport const IGX_BANNER_DIRECTIVES = [\n    IgxBannerComponent,\n    IgxBannerActionsDirective\n] as const;\n","import { NgModule } from '@angular/core';\nimport { IGX_BANNER_DIRECTIVES } from './public_api';\n\n/**\n * @hidden\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n    imports: [...IGX_BANNER_DIRECTIVES],\n    exports: [...IGX_BANNER_DIRECTIVES]\n})\nexport class IgxBannerModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.IgxBannerComponent","i2.IgxBannerActionsDirective"],"mappings":"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"}
+{"version":3,"file":"igniteui-angular-banner.mjs","sources":["../../../projects/igniteui-angular/banner/src/banner/banner.directives.ts","../../../projects/igniteui-angular/banner/src/banner/banner.component.ts","../../../projects/igniteui-angular/banner/src/banner/banner.component.html","../../../projects/igniteui-angular/banner/src/banner/public_api.ts","../../../projects/igniteui-angular/banner/src/banner/banner.module.ts","../../../projects/igniteui-angular/banner/src/igniteui-angular-banner.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: 'igx-banner-actions',\n    standalone: true\n})\nexport class IgxBannerActionsDirective { }\n","import {\n  Component,\n  ContentChild,\n  DestroyRef,\n  ElementRef,\n  EventEmitter,\n  HostBinding,\n  inject,\n  Input,\n  Output,\n  ViewChild,\n  ChangeDetectionStrategy,\n  ViewEncapsulation\n} from '@angular/core';\n\nimport { IgxIconComponent } from 'igniteui-angular/icon';\nimport { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';\nimport { IgxBannerActionsDirective } from './banner.directives';\nimport {\n    CancelableEventArgs,\n    IBaseEventArgs,\n    BannerResourceStringsEN,\n    IBannerResourceStrings,\n    getCurrentResourceStrings,\n    onResourceChangeHandle,\n    IToggleView\n} from 'igniteui-angular/core';\nimport { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, ToggleAnimationSettings } from 'igniteui-angular/expansion-panel';\n\nexport interface BannerEventArgs extends IBaseEventArgs {\n    event?: Event;\n}\n\nexport interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventArgs {\n}\n/**\n * **Ignite UI for Angular Banner** -\n * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner.html)\n *\n * The Ignite UI Banner provides a highly template-able and easy to use banner that can be shown in your application.\n *\n * Usage:\n *\n * ```html\n * <igx-banner #banner>\n *   Our privacy settings have changed.\n *  <igx-banner-actions>\n *      <button type=\"button\" igxButton=\"contained\">Read More</button>\n *      <button type=\"button\" igxButton=\"contained\">Accept and Continue</button>\n *  </igx-banner-actions>\n * </igx-banner>\n * ```\n */\n@Component({\n    selector: 'igx-banner',\n    templateUrl: 'banner.component.html',\n    styleUrl: 'banner.component.css',\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.Eager,\n    imports: [IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxButtonDirective, IgxRippleDirective]\n})\nexport class IgxBannerComponent implements IToggleView {\n    public elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    /**\n     * @hidden\n     */\n    @ContentChild(IgxIconComponent)\n    public bannerIcon!: IgxIconComponent;\n\n    /**\n     * Fires after the banner shows up\n     * ```typescript\n     * public handleOpened(event) {\n     *  ...\n     * }\n     * ```\n     * ```html\n     * <igx-banner (opened)=\"handleOpened($event)\"></igx-banner>\n     * ```\n     */\n    @Output()\n    public opened = new EventEmitter<BannerEventArgs>();\n\n    /**\n     * Fires before the banner shows up\n     * ```typescript\n     * public handleOpening(event) {\n     *  ...\n     * }\n     * ```\n     * ```html\n     * <igx-banner (opening)=\"handleOpening($event)\"></igx-banner>\n     * ```\n     */\n    @Output()\n    public opening = new EventEmitter<BannerCancelEventArgs>();\n\n    /**\n     * Fires after the banner hides\n     * ```typescript\n     * public handleClosed(event) {\n     *  ...\n     * }\n     * ```\n     * ```html\n     * <igx-banner (closed)=\"handleClosed($event)\"></igx-banner>\n     * ```\n     */\n    @Output()\n    public closed = new EventEmitter<BannerEventArgs>();\n\n    /**\n     * Fires before the banner hides\n     * ```typescript\n     * public handleClosing(event) {\n     *  ...\n     * }\n     * ```\n     * ```html\n     * <igx-banner (closing)=\"handleClosing($event)\"></igx-banner>\n     * ```\n     */\n    @Output()\n    public closing = new EventEmitter<BannerCancelEventArgs>();\n\n    /** @hidden */\n    public get useDefaultTemplate(): boolean {\n        return !this._bannerActionTemplate;\n    }\n\n    /**\n     * Set the animation settings used by the banner open/close methods\n     * ```typescript\n     * import { slideInLeft, slideOutRight } from 'igniteui-angular';\n     * ...\n     * banner.animationSettings: ToggleAnimationSettings = { openAnimation: slideInLeft, closeAnimation: slideOutRight };\n     * ```\n     */\n    public set animationSettings(settings: ToggleAnimationSettings) {\n        this._animationSettings = settings;\n    }\n\n    /**\n     * Get the animation settings used by the banner open/close methods\n     * ```typescript\n     * let currentAnimations: ToggleAnimationSettings = banner.animationSettings\n     * ```\n     */\n    @Input()\n    public get animationSettings(): ToggleAnimationSettings {\n        return this._animationSettings ? this._animationSettings : this._expansionPanel.animationSettings;\n    }\n\n    /**\n     * Gets/Sets the resource strings.\n     *\n     * @remarks\n     * By default it uses EN resources.\n     */\n    @Input()\n    public set resourceStrings(value: IBannerResourceStrings) {\n        this._resourceStrings = value;\n        this._customResourceStrings =  Object.assign({}, this._defaultResourceStrings, this._resourceStrings);\n    }\n\n    public get resourceStrings(): IBannerResourceStrings {\n        return this._resourceStrings ? this._customResourceStrings : this._defaultResourceStrings;\n    }\n\n    /**\n     * Gets/Sets whether the banner is expanded (visible) or collapsed (hidden).\n     * Defaults to `false`.\n     * Setting to `true` opens the banner, while `false` closes it.\n     *\n     * @example\n     * // Expand the banner\n     * banner.expanded = true;\n     *\n     * @example\n     * // Collapse the banner\n     * banner.expanded = false;\n     *\n     * @example\n     * // Check if the banner is expanded\n     * const isExpanded = banner.expanded;\n     */\n    @Input()\n    public get expanded(): boolean {\n        return this._expanded;\n    }\n\n    public set expanded(value: boolean) {\n        if (value === this._expanded) {\n            return;\n        }\n\n        this._expanded = value;\n        this._shouldFireEvent = true;\n\n        if (value) {\n            this._expansionPanel.open();\n        } else {\n            this._expansionPanel.close();\n        }\n    }\n\n    /**\n     * Gets whether the banner is collapsed.\n     *\n     * ```typescript\n     * const isCollapsed: boolean = banner.collapsed;\n     * ```\n     */\n    public get collapsed(): boolean {\n        return this._expansionPanel.collapsed;\n    }\n\n    /**\n     * Returns the native element of the banner component\n     * ```typescript\n     *  const myBannerElement: HTMLElement = banner.element;\n     * ```\n     */\n    public get element() {\n        return this.elementRef.nativeElement;\n    }\n\n    @HostBinding('class')\n    public cssClass = 'igx-banner-host';\n\n    /**\n     * @hidden\n     */\n    @HostBinding('style.display')\n    public get displayStyle(): string {\n        return this.collapsed ? '' : 'block';\n    }\n\n    @ViewChild('expansionPanel', { static: true })\n    private _expansionPanel!: IgxExpansionPanelComponent;\n\n    @ContentChild(IgxBannerActionsDirective)\n    private _bannerActionTemplate!: IgxBannerActionsDirective;\n\n    private _destroyRef = inject(DestroyRef);\n    private _expanded: boolean = false;\n    private _shouldFireEvent: boolean = false;\n    private _bannerEvent!: BannerEventArgs;\n    private _animationSettings!: ToggleAnimationSettings;\n    private _resourceStrings: IBannerResourceStrings = null!;\n    private _customResourceStrings: IBannerResourceStrings = null!;\n    private _defaultResourceStrings = getCurrentResourceStrings(BannerResourceStringsEN);\n\n    constructor() {\n        onResourceChangeHandle(this._destroyRef, () => {\n            this._defaultResourceStrings = getCurrentResourceStrings(BannerResourceStringsEN, false);\n            this._customResourceStrings = this._resourceStrings ? Object.assign({}, this._defaultResourceStrings, this._resourceStrings) : null!;\n        }, this);\n    }\n\n    /**\n     * Opens the banner\n     *\n     * ```typescript\n     *  myBanner.open();\n     * ```\n     *\n     * ```html\n     * <igx-banner #banner>\n     * ...\n     * </igx-banner>\n     * <button type=\"button\" (click)=\"banner.open()\">Open Banner</button>\n     * ```\n     */\n    public open(event?: MouseEvent) {\n        this._bannerEvent = { owner: this, event };\n        const openingArgs: BannerCancelEventArgs = {\n            owner: this,\n            event,\n            cancel: false\n        };\n        this.opening.emit(openingArgs);\n        if (openingArgs.cancel) {\n            return;\n        }\n        this._expansionPanel.open(event);\n        this._expanded = true;\n        this._shouldFireEvent = false;\n    }\n\n    /**\n     * Closes the banner\n     *\n     * ```typescript\n     *  myBanner.close();\n     * ```\n     *\n     * ```html\n     * <igx-banner #banner>\n     * ...\n     * </igx-banner>\n     * <button type=\"button\" (click)=\"banner.close()\">Close Banner</button>\n     * ```\n     */\n    public close(event?: MouseEvent) {\n        this._bannerEvent = { owner: this, event};\n        const closingArgs: BannerCancelEventArgs = {\n            owner: this,\n            event,\n            cancel: false\n        };\n        this.closing.emit(closingArgs);\n        if (closingArgs.cancel) {\n            return;\n        }\n        this._expansionPanel.close(event);\n        this._expanded = false;\n        this._shouldFireEvent = false;\n    }\n\n    /**\n     * Toggles the banner\n     *\n     * ```typescript\n     *  myBanner.toggle();\n     * ```\n     *\n     * ```html\n     * <igx-banner #banner>\n     * ...\n     * </igx-banner>\n     * <button type=\"button\" (click)=\"banner.toggle()\">Toggle Banner</button>\n     * ```\n     */\n    public toggle(event?: MouseEvent) {\n        if (this.collapsed) {\n            this.open(event);\n        } else {\n            this.close(event);\n        }\n    }\n\n    /** @hidden */\n    public onExpansionPanelOpen() {\n        if (this._shouldFireEvent) {\n            return;\n        }\n        this.opened.emit(this._bannerEvent);\n    }\n\n    /** @hidden */\n    public onExpansionPanelClose() {\n        if (this._shouldFireEvent) {\n            return;\n        }\n        this.closed.emit(this._bannerEvent);\n    }\n}\n","<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","import { IgxBannerComponent } from './banner.component';\nimport { IgxBannerActionsDirective } from './banner.directives';\n\nexport * from './banner.component';\nexport * from './banner.directives';\n\n/* Banner directives collection for ease-of-use import in standalone components scenario */\nexport const IGX_BANNER_DIRECTIVES = [\n    IgxBannerComponent,\n    IgxBannerActionsDirective\n] as const;\n","import { NgModule } from '@angular/core';\nimport { IGX_BANNER_DIRECTIVES } from './public_api';\n\n/**\n * @hidden\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n    imports: [...IGX_BANNER_DIRECTIVES],\n    exports: [...IGX_BANNER_DIRECTIVES]\n})\nexport class IgxBannerModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.IgxBannerComponent","i2.IgxBannerActionsDirective"],"mappings":"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"}

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.1", ngImport: i0, type: IgxBottomNavContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxBottomNavContentComponent, isStandalone: true, selector: "igx-bottom-nav-content", host: { properties: { "class.igx-bottom-nav__panel": "this.defaultClass" } }, providers: [{ provide: IgxTabContentBase, useExisting: IgxBottomNavContentComponent }], usesInheritance: true, ngImport: i0, template: "@if (tab.selected || tab.previous) {\n    <ng-content></ng-content>\n}\n", changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", 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.1", ngImport: i0, type: IgxBottomNavHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: IgxBottomNavHeaderComponent, isStandalone: true, selector: "igx-bottom-nav-header", host: { properties: { "class.igx-bottom-nav__menu-item--selected": "this.cssClassSelected", "class.igx-bottom-nav__menu-item--disabled": "this.cssClassDisabled", "class.igx-bottom-nav__menu-item": "this.cssClass" } }, providers: [{ provide: IgxTabHeaderBase, useExisting: IgxBottomNavHeaderComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", 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.1", ngImpor
             }] } });
 
 class IgxBottomNavItemComponent extends IgxTabItemDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: IgxBottomNavItemComponent, isStandalone: true, selector: "igx-bottom-nav-item", providers: [{ provide: IgxTabItemDirective, useExisting: IgxBottomNavItemComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #headerTemplate>\n    <ng-content select=\"igx-bottom-nav-header\"></ng-content>\n</ng-template>\n<ng-template #panelTemplate>\n    <ng-content select=\"igx-bottom-nav-content\"></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", 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.1", ngImport: i0, type: IgxBottomNavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxBottomNavComponent, isStandalone: true, selector: "igx-bottom-nav", host: { properties: { "class.igx-bottom-nav": "this.hostClass" } }, providers: [{ provide: IgxTabsBase, useExisting: IgxBottomNavComponent }], usesInheritance: true, ngImport: i0, template: "@for (tab of items; track tab; let i = $index) {\n    <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n}\n\n<div\n    #tablist\n    role=\"tablist\"\n    class=\"igx-bottom-nav__menu igx-bottom-nav__menu--bottom\"\n    aria-orientation=\"horizontal\"\n>\n    @for (tab of items; track tab; let i = $index) {\n        <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n    }\n</div>\n", styles: ["@layer ig.base{.igx-bottom-nav__panel{display:block}.igx-bottom-nav__panel:focus{outline-style:none}.igx-bottom-nav__panel:empty{display:none}.igx-bottom-nav__menu{display:flex;position:fixed;justify-content:center;align-items:center;inset-inline-start:0;inset-inline-end:0;height:3.5rem;background:var(--background);border-top:.0625rem solid var(--border-color);overflow:hidden;z-index:8}.igx-bottom-nav__menu--top{inset-block-start:0;inset-block-end:inherit;box-shadow:var(--elevation)}.igx-bottom-nav__menu--bottom{inset-block-start:inherit;inset-block-end:0;box-shadow:var(--elevation)}.igx-bottom-nav__menu-item{display:flex;position:relative;flex-flow:column nowrap;flex:1;gap:.25rem;align-items:center;justify-content:center;min-width:5rem;max-width:10.5rem;height:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;padding:0 .75rem;-webkit-tap-highlight-color:rgba(0,0,0,0);outline-style:none;color:var(--label-color)}.igx-bottom-nav__menu-item igx-icon{--component-size: 3}.igx-bottom-nav__menu-item [igxBottomNavHeaderIcon]{display:flex;position:relative;justify-content:center;color:var(--icon-color);padding:0 .5rem;height:1.5rem;transform:translateZ(0);transition:transform .15s cubic-bezier(.455,.03,.515,.955);z-index:1}.igx-bottom-nav__menu-item [igxBottomNavHeaderLabel]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--label-color);max-width:100%;text-align:center;transform:translateZ(0);transition:transform .15s cubic-bezier(.455,.03,.515,.955);z-index:1}.igx-bottom-nav__menu-item--selected{transition:color .15s cubic-bezier(.455,.03,.515,.955),opacity .25s cubic-bezier(.455,.03,.515,.955)}.igx-bottom-nav__menu-item--selected [igxBottomNavHeaderIcon]{color:var(--icon-selected-color);inset-block-start:-.125rem;transform:translateY(-2px)}.igx-bottom-nav__menu-item--selected [igxBottomNavHeaderLabel]{color:var(--label-selected-color);transform:translateY(-2px) scale(1.166667)}.igx-bottom-nav__menu-item--disabled{cursor:default;pointer-events:none;opacity:.5}.igx-bottom-nav__menu-item--disabled [igxBottomNavHeaderIcon]{color:var(--icon-disabled-color)}.igx-bottom-nav__menu-item--disabled [igxBottomNavHeaderLabel]{color:var(--label-disabled-color)}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-bottom-nav__menu-item{--ig-icon-size: 1rem}.igx-bottom-nav__menu-item [igxBottomNavHeaderIcon],.igx-bottom-nav__menu-item [igxBottomNavHeaderLabel]{transform:unset;transition:none}.igx-bottom-nav__menu-item [igxBottomNavHeaderIcon]{padding:unset;height:auto}.igx-bottom-nav__menu-item--disabled{opacity:unset}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", 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.1", ngImpor
             }] } });
 
 class IgxBottomNavHeaderLabelDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavHeaderLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxBottomNavHeaderLabelDirective, isStandalone: true, selector: "[igxBottomNavHeaderLabel],igx-bottom-nav-header-label", hostDirectives: [{ directive: i1.IgxNoTypographyDirective }], ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavHeaderLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", 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.1", ngImpor
                 }]
         }] });
 class IgxBottomNavHeaderIconDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxBottomNavHeaderIconDirective, isStandalone: true, selector: "[igxBottomNavHeaderIcon],igx-bottom-nav-header-icon", ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavHeaderIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", 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.1", ngImport: i0, type: IgxBottomNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavModule, imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderLabelDirective, IgxBottomNavHeaderIconDirective], exports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderLabelDirective, IgxBottomNavHeaderIconDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavModule }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBottomNavModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBottomNavModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

@@ -176,7 +176,7 @@ class IgxButtonGroupComponent {
     }
     set selectionMode(selectionMode) {
         if (this.viewButtons && selectionMode !== this._selectionMode) {
-            this.buttons.forEach((_b, i) => {
+            this.buttons.forEach((_, i) => {
                 this.deselectButton(i);
             });
             this._selectionMode = selectionMode;
@@ -277,8 +277,8 @@ class IgxButtonGroupComponent {
         if (index >= this.buttons.length || index < 0) {
             return;
         }
-        const button = this.buttons[index];
-        button.select();
+        this.buttons[index].selected = true;
+        this.updateSelected(index);
     }
     /**
      * @hidden
@@ -300,7 +300,6 @@ class IgxButtonGroupComponent {
             this.buttons.forEach((_, i) => {
                 if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {
                     this.deselectButton(i);
-                    this.updateDeselected(i);
                 }
             });
         }
@@ -334,8 +333,8 @@ class IgxButtonGroupComponent {
         if (index >= this.buttons.length || index < 0) {
             return;
         }
-        const button = this.buttons[index];
-        button.deselect();
+        this.buttons[index].selected = false;
+        this.updateDeselected(index);
     }
     /**
      * @hidden
@@ -442,10 +441,10 @@ class IgxButtonGroupComponent {
             this.updateDeselected(index);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxButtonGroupComponent, isStandalone: true, selector: "igx-buttongroup", inputs: { id: "id", itemContentCssClass: "itemContentCssClass", multiSelection: "multiSelection", selectionMode: "selectionMode", values: "values", disabled: ["disabled", "disabled", booleanAttribute], alignment: "alignment" }, outputs: { selected: "selected", deselected: "deselected" }, host: { properties: { "attr.id": "this.id", "class.igx-button-group": "this.cssClass", "style.zIndex": "this.zIndex", "attr.role": "this.role", "class.igx-button-group--vertical": "this.isVertical" } }, queries: [{ propertyName: "templateButtons", predicate: IgxButtonDirective }], viewQueries: [{ propertyName: "viewButtons", predicate: IgxButtonDirective, descendants: true }], ngImport: i0, template: "<div class=\"igx-button-group__buttons-container\">\n  @for (button of values; track button) {\n    <button\n      type=\"button\"\n      igxButton=\"flat\"\n      [selected]=\"button.selected\"\n      [attr.data-togglable]=\"button.togglable\"\n      [disabled]=\"disabled || button.disabled\"\n      [igxLabel]=\"button.label\"\n      [igxRipple]=\"button.ripple\"\n    >\n      <span class=\"igx-button-group__item-content {{ itemContentCssClass }}\">\n        @if (button.icon) {\n          <igx-icon>{{ button.icon }}</igx-icon>\n        }\n        @if (button.label) {\n          <span class=\"igx-button-group__button-text\">{{ button.label }}</span>\n        }\n      </span>\n    </button>\n  }\n  <ng-content></ng-content>\n</div>\n", styles: ["@layer ig.base{.igx-button-group{--item-min-width: 2.625rem;--ig-icon-size: 1.125rem;--z-item-elevated: 2}.igx-button-group__buttons-container{display:flex;border-radius:var(--border-radius);box-shadow:var(--elevation)}.igx-button-group button{margin-top:0;margin-inline-end:0;margin-bottom:0}.igx-button-group__item{font-family:var(--ig-button-font-family, var(--ig-font-family));font-size:var(--ig-button-font-size);font-weight:var(--ig-button-font-weight);font-style:var(--ig-button-font-style);line-height:var(--ig-button-line-height);letter-spacing:var(--ig-button-letter-spacing);text-transform:var(--ig-button-text-transform);margin-top:var(--ig-button-margin-top);margin-bottom:var(--ig-button-margin-bottom);text-align:center;border:.0625rem solid var(--item-border-color);color:var(--item-text-color);background:var(--item-background);min-width:var(--item-min-width);display:flex;flex:1 0 0%;justify-content:center;align-items:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;z-index:0}.igx-button-group__item igx-icon{color:var(--item-icon-color)}.igx-button-group__item[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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxButtonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", 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"] }]
         }], propDecorators: { id: [{
@@ -502,11 +501,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.1", ngImport: i0, type: IgxButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxButtonGroupModule, imports: [IgxButtonGroupComponent, i2.IgxButtonDirective], exports: [IgxButtonGroupComponent, i2.IgxButtonDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxButtonGroupModule, imports: [IgxButtonGroupComponent] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxButtonGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxButtonGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...IGX_BUTTON_GROUP_DIRECTIVES],