igniteui-angular 22.1.4 → 22.2.0-rc.0

package/README.md

@@ -20,7 +20,7 @@ Or visit [Ignite UI for Angular Discord](https://discord.com/channels/8366344874
 ### Contributing
 There are many ways in which you can [participate](https://github.com/IgniteUI/igniteui-angular/blob/master/.github/CONTRIBUTING.md#overview) in this project, for example:
 
- - [Submit bugs and feature requests](https://github.com/IgniteUI/igniteui-angular/wiki/How-to-log-an-Issue-on-Github), and help us verify as they are checked in.
+ - [Submit bugs and feature requests](https://github.com/IgniteUI/igniteui-angular/wiki/How-to-log-an-Issue-on-Github), and help us verify them as they are checked in.
  - Review [source code changes](https://github.com/IgniteUI/igniteui-angular/pulls)
  - Review [the documentation](https://github.com/IgniteUI/igniteui-docfx) and make pull requests for anything from typos to additional and new content
  - If you are interested in fixing issues and contributing directly to the code base, please see the document [How to Contribute](https://github.com/IgniteUI/igniteui-angular/blob/master/.github/CONTRIBUTING.md#fixing-a-bug), which covers the following:
@@ -95,7 +95,7 @@ Ignite UI for Angular arrives with an extensive library of data visualizations t
 
 Some of the Angular chart types included are: [Polar chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/polar-chart), [Pie chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/pie-chart), [Donut chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/donut-chart), [Bubble chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/bubble-chart), [Area chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/area-chart), [Treemap chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/treemap-chart), and many others. And if you look for [Angular financial charts](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/stock-chart), with Ignite UI you can get the same features as the ones you come across with Google Finance and Yahoo Finance Charts.
 
-### Current List of Components Include:
+### Current List of Components Includes:
 
 |Components|Status|||Added in|License|Directives|Status|||Added in|License|
 |:--|:--:|:--|:--|:--|:--|:--:|:--|:--|:--|:--|:--|

package/combo/README.md

@@ -50,6 +50,15 @@ public dataLoading(evt): void {
 What the combo exposes is a `virtualizationState` property that gives state of the combo - first index and the number of items that needs to be loaded.
 The service, should inform the combo for the total items that are on the server - using the `totalItemCount` property.
 
+The first rendered range does not emit `dataPreLoad` when the initial page already covers it.
+Later range changes still emit the event, so the consumer can cancel a superseded request.
+Capture the requested range when starting a fetch and cancel its subscription before replacing
+it; assigning `data` does not identify which request produced the page.
+
+Changing a positive `totalItemCount` refreshes the list without rebinding `data`. If the total
+shrinks, loaded records beyond it are excluded while the valid prefix keeps its position.
+This limit is applied before filtering and grouping; group headers are not remote records.
+
 
 ## Features
 
@@ -86,6 +95,16 @@ export class MyCombo {
 }
 ```
 
+With primitive value keys, resolving the selection reuses previously found records
+after verifying their index, identity and key. Missing or invalid matches share one
+fallback scan. Changing the data array, its length or `valueKey` clears the lookup;
+object keys retain deep-equality matching. A selected key whose record is not loaded
+is represented by `{ [valueKey]: key }` and is checked again on the next resolution.
+
+The hit validation does not detect a different record becoming an earlier duplicate
+of an already cached key without rebinding the data. This remains a known limitation
+of the lookup, not a guarantee of compatibility with every in-place mutation.
+
 ### Selection Events
 
 The `igx-combo` exposes both `selectionChanging` and `selectionChanged`.

package/drop-down/README.md

@@ -71,7 +71,41 @@ The ***igx-drop-down-item-group*** component can be used inside of the ***igx-dr
 ***NOTE:*** The ***igx-drop-down-item-group*** tag can be used for grouping of ***igx-drop-down-item*** only an will forfeit any other content passed to it. 
 
 ## Virtualized item list
-The `igx-drop-down` supports the use of `IgxForOf` directive for displaying very large lists of data. To use a virtualized list of items in the drop-down, follow the steps below:
+The `igx-drop-down` can display very large lists of data with either `IgxVirtualScrollComponent` or the `IgxForOf` directive. Both are supported; pick one for a given drop-down.
+
+### Using IgxVirtualScrollComponent
+Project an `igx-virtual-scroll` and template its items with `igxVirtualItem`. The template context gives the item and its index in the whole collection, which are what `igx-drop-down-item` binds to:
+
+```typescript
+    import { IgxDropDownComponent, IgxDropDownItemComponent } from 'igniteui-angular/drop-down';
+    import { IgxVirtualItemDirective, IgxVirtualScrollComponent } from 'igniteui-angular/virtual-scroll';
+```
+
+```html
+    <igx-drop-down>
+        <igx-virtual-scroll role="presentation" [data]="localItems" [estimatedItemSize]="28" [initialViewportSize]="200"
+                            style="display: block; height: 200px">
+            <ng-template igxVirtualItem let-item let-index="index">
+                <igx-drop-down-item [value]="item" [index]="index">
+                    {{ item.data }}
+                </igx-drop-down-item>
+            </ng-template>
+        </igx-virtual-scroll>
+    </igx-drop-down>
+```
+
+The scrolling host needs a real height — it is the element that scrolls, so no wrapping container is required. A drop-down is closed until the change detection pass that opens it, so the list has no size to measure in that pass, yet the drop-down focuses an item in it. `initialViewportSize` is an internal input that renders the first window against the given size until the height is measured. It goes away once the drop-down opens a list that renders on reveal.
+
+`index` is the item's index in the whole collection, so it stays correct as rows are recycled.
+
+Use `role="presentation"` on this scrolling container so the options belong to the drop-down's listbox without an intervening list role.
+
+For paged `dataWindow` bindings, navigation and item lookup use the same normalization as the virtual scroll: `startIndex` and `totalCount` are truncated to integers and clamped to zero or above; non-finite values become zero. The effective count is at least the normalized start index plus the page length, even when the declared total is smaller.
+
+See the [virtual scroll README](../virtual-scroll/README.md) for the rest of its API.
+
+### Using the IgxForOf directive
+To use `*igxFor` instead, follow the steps below:
 
 ### Import IgxForOfModule
 ```typescript
@@ -100,7 +134,9 @@ Configure the drop-down to use `*igxFor` instead of `ngFor`. Some additional con
 ```
 Furthermore, when using `*igxFor` in the drop-down template, items must have `value` and `index` bound. The `value` property should be unique for each item.
 
-### Styling the container
+### Styling the container for the IgxForOf directive
+This applies to the `*igxFor` variant above. An `igx-virtual-scroll` is itself the scrolling element and needs no wrapper.
+
 In order for the drop-down list to properly display, the drop-down items must be wrapped in a container element (e.g. `<div>`).
 The container element must have the following styles:
  - `overflow: hidden;`
@@ -133,7 +169,7 @@ The following outputs are available in the **igx-drop-down** component:
 | `closing` | true | Emitted before the dropdown is closed. | `IBaseCancelableBrowserEventArgs` |
 | `closed` | false | Emitted when a dropdown is being closed. | `IBaseEventArgs` |
 
-***NOTE:*** The using `*igxFor` to virtualize `igx-drop-down-item`s, `selectionChanging` will emit `newSeleciton` and `oldSelection` as type `{ value: any, index: number }`. 
+***NOTE:*** When the `igx-drop-down-item`s are virtualized, with either `igx-virtual-scroll` or `*igxFor`, `selectionChanging` will emit `newSelection` and `oldSelection` as type `{ value: any, index: number }`.
 
 ## Methods
 The following methods are available in the **igx-drop-down** component:
@@ -158,7 +194,7 @@ The following getters are available on the **igx-drop-down** component:
 | `element`| `ElementRef` | Get dropdown html element. |
 | `scrollContainer`| `ElementRef` | Get drop down's html element of its scroll container. |
 
-***NOTE:*** The using `*igxFor` to virtualize `igx-drop-down-item`s, `selectedItem` will return type `{ value: any, index: number }`, where `value` is the item's bound `value` property and `index` is the item's index property in the data set. 
+***NOTE:*** When the `igx-drop-down-item`s are virtualized, with either `igx-virtual-scroll` or `*igxFor`, `selectedItem` will return type `{ value: any, index: number }`, where `value` is the item's bound `value` property and `index` is the item's index property in the data set.
 
 The following table summarizes some of the useful **igx-drop-down-item** component inputs, outputs and methods.
 

package/fesm2022/igniteui-angular-accordion.mjs

@@ -348,10 +348,10 @@ class IgxAccordionComponent {
             this.panels?.forEach(panel => panel.animationSettings = this.animationSettings);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.1.1", type: IgxAccordionComponent, isStandalone: true, selector: "igx-accordion", inputs: { id: "id", animationSettings: "animationSettings", singleBranchExpand: ["singleBranchExpand", "singleBranchExpand", booleanAttribute] }, outputs: { panelExpanding: "panelExpanding", panelExpanded: "panelExpanded", panelCollapsing: "panelCollapsing", panelCollapsed: "panelCollapsed" }, host: { properties: { "attr.id": "this.id", "class.igx-accordion": "this.cssClass", "style.display": "this.displayStyle" } }, queries: [{ propertyName: "_panels", predicate: IgxExpansionPanelComponent }], ngImport: i0, template: "<ng-content select=\"igx-expansion-panel\"></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.1.7", type: IgxAccordionComponent, isStandalone: true, selector: "igx-accordion", inputs: { id: "id", animationSettings: "animationSettings", singleBranchExpand: ["singleBranchExpand", "singleBranchExpand", booleanAttribute] }, outputs: { panelExpanding: "panelExpanding", panelExpanded: "panelExpanded", panelCollapsing: "panelCollapsing", panelCollapsed: "panelCollapsed" }, host: { properties: { "attr.id": "this.id", "class.igx-accordion": "this.cssClass", "style.display": "this.displayStyle" } }, queries: [{ propertyName: "_panels", predicate: IgxExpansionPanelComponent }], ngImport: i0, template: "<ng-content select=\"igx-expansion-panel\"></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxAccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAccordionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-accordion', changeDetection: ChangeDetectionStrategy.Eager, standalone: true, template: "<ng-content select=\"igx-expansion-panel\"></ng-content>\n" }]
         }], propDecorators: { id: [{
@@ -399,11 +399,11 @@ const IGX_ACCORDION_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxAccordionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxAccordionModule, imports: [IgxAccordionComponent, i2.IgxExpansionPanelComponent, i2.IgxExpansionPanelHeaderComponent, i2.IgxExpansionPanelBodyComponent, i2.IgxExpansionPanelDescriptionDirective, i2.IgxExpansionPanelTitleDirective, i2.IgxExpansionPanelIconDirective], exports: [IgxAccordionComponent, i2.IgxExpansionPanelComponent, i2.IgxExpansionPanelHeaderComponent, i2.IgxExpansionPanelBodyComponent, i2.IgxExpansionPanelDescriptionDirective, i2.IgxExpansionPanelTitleDirective, i2.IgxExpansionPanelIconDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxAccordionModule, imports: [i2.IgxExpansionPanelComponent, i2.IgxExpansionPanelHeaderComponent, i2.IgxExpansionPanelBodyComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxAccordionModule, imports: [IgxAccordionComponent, i2.IgxExpansionPanelComponent, i2.IgxExpansionPanelHeaderComponent, i2.IgxExpansionPanelBodyComponent, i2.IgxExpansionPanelDescriptionDirective, i2.IgxExpansionPanelTitleDirective, i2.IgxExpansionPanelIconDirective], exports: [IgxAccordionComponent, i2.IgxExpansionPanelComponent, i2.IgxExpansionPanelHeaderComponent, i2.IgxExpansionPanelBodyComponent, i2.IgxExpansionPanelDescriptionDirective, i2.IgxExpansionPanelTitleDirective, i2.IgxExpansionPanelIconDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAccordionModule, imports: [i2.IgxExpansionPanelComponent, i2.IgxExpansionPanelHeaderComponent, i2.IgxExpansionPanelBodyComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxAccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/igniteui-angular-action-strip.mjs

@@ -10,10 +10,10 @@ class IgxActionStripMenuItemDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxActionStripMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxActionStripMenuItemDirective, isStandalone: true, selector: "[igxActionStripMenuItem]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxActionStripMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxActionStripMenuItemDirective, isStandalone: true, selector: "[igxActionStripMenuItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxActionStripMenuItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxActionStripMenuItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxActionStripMenuItem]',
@@ -272,10 +272,10 @@ class IgxActionStripComponent {
             this.menu.close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxActionStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxActionStripComponent, isStandalone: true, selector: "igx-action-strip", inputs: { context: "context", hidden: ["hidden", "hidden", booleanAttribute], resourceStrings: "resourceStrings" }, host: { properties: { "style.display": "this.display", "class.igx-action-strip": "this.hostClass" } }, providers: [{ provide: IgxActionStripToken, useExisting: IgxActionStripComponent }], queries: [{ propertyName: "_menuItems", predicate: IgxActionStripMenuItemDirective }, { propertyName: "actionButtons", predicate: IgxActionStripActionsToken }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"igx-action-strip__actions\">\n    <ng-content #content></ng-content>\n    @if (menuItems.length > 0) {\n        <button\n            type=\"button\"\n            igxIconButton=\"flat\"\n            igxRipple\n            [igxToggleAction]=\"dropdown\"\n            [overlaySettings]=\"menuOverlaySettings\"\n            (click)=\"$event.stopPropagation()\"\n            [title]=\"resourceStrings.igx_action_strip_button_more_title\"\n            [igxDropDownItemNavigation]=\"dropdown\"\n        >\n            <igx-icon family=\"default\" name=\"more_vert\"></igx-icon>\n        </button>\n    }\n    <igx-drop-down #dropdown>\n        @for (item of menuItems; track trackMenuItem(item)) {\n            <igx-drop-down-item\n                class=\"igx-action-strip__menu-item\"\n            >\n                <div class=\"igx-drop-down__item-template\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            item.templateRef;\n                            context: { $implicit: item }\n                        \"\n                    ></ng-container>\n                </div>\n            </igx-drop-down-item>\n        }\n    </igx-drop-down>\n</div>\n", styles: ["@layer ig.base{.igx-action-strip__pinning-actions,.igx-action-strip__editing-actions{display:flex;align-items:center;justify-content:center}.igx-action-strip__menu-item--danger [igxLabel],.igx-action-strip__menu-item [igxLabel]{cursor:pointer}.igx-drop-down__item.igx-action-strip__menu-item--danger igx-icon+[igxLabel],.igx-drop-down__item.igx-action-strip__menu-item igx-icon+[igxLabel]{margin-inline-start:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.625rem,-1 * .625rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-action-strip{--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);--action-strip-size: var(--component-size);--button-size: max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.75rem, -1 * 1.75rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem));display:flex;align-items:center;justify-content:flex-end;position:absolute;width:100%;height:100%;pointer-events:none;top:0;inset-inline-start:0;background:var(--background);color:inherit;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:0;z-index:9999}.igx-action-strip [igxIconButton]{--component-size: var(--action-strip-size);width:var(--button-size);height:var(--button-size)}.igx-action-strip [igxIconButton] igx-icon{--component-size: var(--action-strip-size);--ig-icon-size: max(var(--is-large, 1) * max(1.125rem, -1 * 1.125rem), var(--is-medium, 1) * max(.875rem, -1 * .875rem), var(--is-small, 1) * max(.875rem, -1 * .875rem))}.igx-action-strip__actions{display:inline-flex;align-items:center;justify-content:center;pointer-events:all;position:relative;color:var(--icon-color);border-radius:var(--actions-border-radius);background:var(--actions-background)}.igx-action-strip__actions:last-child{margin-inline-end:0}.igx-action-strip__actions igx-icon:not(igx-drop-down *){color:var(--icon-color)}.igx-action-strip__actions [igxIconButton]:not(igx-drop-down *){border-radius:var(--actions-border-radius)}.igx-action-strip__actions [igxIconButton]:not(igx-drop-down *) igx-icon{color:var(--icon-color)}.igx-action-strip__delete igx-icon{color:var(--delete-action)}.igx-action-strip__delete [igxIconButton] igx-icon{color:var(--delete-action)}.igx-action-strip__editing-actions>[igxButton]{margin-inline-start:.25rem}.igx-action-strip__editing-actions>[igxButton]:first-of-type{margin-inline-start:0}.igx-action-strip__menu-item--danger,.igx-action-strip__menu-item--danger:hover{color:var(--ig-error-500)}.igx-action-strip__menu-button{display:flex;align-items:center}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-action-strip [igxIconButton]{--button-size: max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.75rem, -1 * 1.75rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem))}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxToggleActionDirective, selector: "[igxToggleAction]", inputs: ["overlaySettings", "igxToggleOutlet", "igxToggleAction"], exportAs: ["toggle-action"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy", "role"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxActionStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxActionStripComponent, isStandalone: true, selector: "igx-action-strip", inputs: { context: "context", hidden: ["hidden", "hidden", booleanAttribute], resourceStrings: "resourceStrings" }, host: { properties: { "style.display": "this.display", "class.igx-action-strip": "this.hostClass" } }, providers: [{ provide: IgxActionStripToken, useExisting: IgxActionStripComponent }], queries: [{ propertyName: "_menuItems", predicate: IgxActionStripMenuItemDirective }, { propertyName: "actionButtons", predicate: IgxActionStripActionsToken }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"igx-action-strip__actions\">\n    <ng-content #content></ng-content>\n    @if (menuItems.length > 0) {\n        <button\n            type=\"button\"\n            igxIconButton=\"flat\"\n            igxRipple\n            [igxToggleAction]=\"dropdown\"\n            [overlaySettings]=\"menuOverlaySettings\"\n            (click)=\"$event.stopPropagation()\"\n            [title]=\"resourceStrings.igx_action_strip_button_more_title\"\n            [igxDropDownItemNavigation]=\"dropdown\"\n        >\n            <igx-icon family=\"default\" name=\"more_vert\"></igx-icon>\n        </button>\n    }\n    <igx-drop-down #dropdown>\n        @for (item of menuItems; track trackMenuItem(item)) {\n            <igx-drop-down-item\n                class=\"igx-action-strip__menu-item\"\n            >\n                <div class=\"igx-drop-down__item-template\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            item.templateRef;\n                            context: { $implicit: item }\n                        \"\n                    ></ng-container>\n                </div>\n            </igx-drop-down-item>\n        }\n    </igx-drop-down>\n</div>\n", styles: ["@layer ig.base{.igx-action-strip__pinning-actions,.igx-action-strip__editing-actions{display:flex;align-items:center;justify-content:center}.igx-action-strip__menu-item--danger [igxLabel],.igx-action-strip__menu-item [igxLabel]{cursor:pointer}.igx-drop-down__item.igx-action-strip__menu-item--danger igx-icon+[igxLabel],.igx-drop-down__item.igx-action-strip__menu-item igx-icon+[igxLabel]{margin-inline-start:max(var(--is-large, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.625rem,-1 * .625rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-action-strip{--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);--action-strip-size: var(--component-size);--button-size: max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.75rem, -1 * 1.75rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem));display:flex;align-items:center;justify-content:flex-end;position:absolute;width:100%;height:100%;pointer-events:none;top:0;inset-inline-start:0;background:var(--background);color:inherit;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:0;z-index:9999}.igx-action-strip [igxIconButton]{--component-size: var(--action-strip-size);width:var(--button-size);height:var(--button-size)}.igx-action-strip [igxIconButton] igx-icon{--component-size: var(--action-strip-size);--ig-icon-size: max(var(--is-large, 1) * max(1.125rem, -1 * 1.125rem), var(--is-medium, 1) * max(.875rem, -1 * .875rem), var(--is-small, 1) * max(.875rem, -1 * .875rem))}.igx-action-strip__actions{display:inline-flex;align-items:center;justify-content:center;pointer-events:all;position:relative;color:var(--icon-color);border-radius:var(--actions-border-radius);background:var(--actions-background)}.igx-action-strip__actions:last-child{margin-inline-end:0}.igx-action-strip__actions igx-icon:not(igx-drop-down *){color:var(--icon-color)}.igx-action-strip__actions [igxIconButton]:not(igx-drop-down *){border-radius:var(--actions-border-radius)}.igx-action-strip__actions [igxIconButton]:not(igx-drop-down *) igx-icon{color:var(--icon-color)}.igx-action-strip__delete igx-icon{color:var(--delete-action)}.igx-action-strip__delete [igxIconButton] igx-icon{color:var(--delete-action)}.igx-action-strip__editing-actions>[igxButton]{margin-inline-start:.25rem}.igx-action-strip__editing-actions>[igxButton]:first-of-type{margin-inline-start:0}.igx-action-strip__menu-item--danger,.igx-action-strip__menu-item--danger:hover{color:var(--ig-error-500)}.igx-action-strip__menu-button{display:flex;align-items:center}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-action-strip [igxIconButton]{--button-size: max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.75rem, -1 * 1.75rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem))}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxToggleActionDirective, selector: "[igxToggleAction]", inputs: ["overlaySettings", "igxToggleOutlet", "igxToggleAction"], exportAs: ["toggle-action"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy", "role"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxActionStripComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxActionStripComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-action-strip', encapsulation: ViewEncapsulation.None, imports: [
                         NgTemplateOutlet,
@@ -322,11 +322,11 @@ const IGX_ACTION_STRIP_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxActionStripModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxActionStripModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxActionStripModule, imports: [IgxActionStripComponent, IgxActionStripMenuItemDirective], exports: [IgxActionStripComponent, IgxActionStripMenuItemDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxActionStripModule, imports: [IgxActionStripComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxActionStripModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxActionStripModule, imports: [IgxActionStripComponent, IgxActionStripMenuItemDirective], exports: [IgxActionStripComponent, IgxActionStripMenuItemDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxActionStripModule, imports: [IgxActionStripComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxActionStripModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxActionStripModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/igniteui-angular-avatar.mjs

@@ -222,10 +222,10 @@ class IgxAvatarComponent {
                 return 'custom avatar';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: IgxAvatarComponent, isStandalone: true, selector: "igx-avatar", inputs: { id: "id", shape: "shape", color: "color", bgColor: "bgColor", initials: "initials", icon: "icon", src: "src", size: "size" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.role": "this.role", "class.igx-avatar": "this.cssClass", "attr.aria-roledescription": "this.roleDescription", "attr.id": "this.id", "class.igx-avatar--rounded": "this.isRounded", "class.igx-avatar--circle": "this.isCircle", "style.color": "this.color", "style.background": "this.bgColor", "class.igx-avatar--image": "this._isImageType", "class.igx-avatar--icon": "this._isIconType", "class.igx-avatar--initials": "this._isInitialsType", "style.--component-size": "this.componentSize" } }, viewQueries: [{ propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "imageTemplate", first: true, predicate: ["imageTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "initialsTemplate", first: true, predicate: ["initialsTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "iconTemplate", first: true, predicate: ["iconTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #defaultTemplate>\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #imageTemplate>\n    <div #image class=\"igx-avatar__image\" [style.backgroundImage]=\"getSrcUrl()\"></div>\n</ng-template>\n\n<ng-template #initialsTemplate>\n    <span>{{initials.substring(0, 2)}}</span>\n</ng-template>\n\n<ng-template #iconTemplate>\n     <igx-icon>{{icon}}</igx-icon>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template\"></ng-container>\n", styles: ["@layer ig.base{.igx-avatar{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));position:relative;display:inline-flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--color);background:var(--background);vertical-align:middle;outline-style:none;flex-shrink:0;width:var(--size);height:var(--size)}.igx-avatar igx-icon{--ig-size: 3;color:var(--icon-color)}.igx-avatar:after{box-shadow:none;transition:box-shadow .15s cubic-bezier(.455,.03,.515,.955)}.igx-avatar__image{width:100%;height:100%;border-radius:inherit;background-size:cover;background-repeat:no-repeat;background-position:center}.igx-avatar--circle{border-radius:calc(var(--size)/2)}.igx-avatar--rounded{border-radius:var(--border-radius)}.igx-avatar--initials{text-transform:uppercase;font-size:calc(var(--size)/2);line-height:calc(var(--size)/2)}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-avatar igx-icon{--ig-size: 1}}}\n"], dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { 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: IgxAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: IgxAvatarComponent, isStandalone: true, selector: "igx-avatar", inputs: { id: "id", shape: "shape", color: "color", bgColor: "bgColor", initials: "initials", icon: "icon", src: "src", size: "size" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.role": "this.role", "class.igx-avatar": "this.cssClass", "attr.aria-roledescription": "this.roleDescription", "attr.id": "this.id", "class.igx-avatar--rounded": "this.isRounded", "class.igx-avatar--circle": "this.isCircle", "style.color": "this.color", "style.background": "this.bgColor", "class.igx-avatar--image": "this._isImageType", "class.igx-avatar--icon": "this._isIconType", "class.igx-avatar--initials": "this._isInitialsType", "style.--component-size": "this.componentSize" } }, viewQueries: [{ propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "imageTemplate", first: true, predicate: ["imageTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "initialsTemplate", first: true, predicate: ["initialsTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "iconTemplate", first: true, predicate: ["iconTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #defaultTemplate>\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #imageTemplate>\n    <div #image class=\"igx-avatar__image\" [style.backgroundImage]=\"getSrcUrl()\"></div>\n</ng-template>\n\n<ng-template #initialsTemplate>\n    <span>{{initials.substring(0, 2)}}</span>\n</ng-template>\n\n<ng-template #iconTemplate>\n     <igx-icon>{{icon}}</igx-icon>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template\"></ng-container>\n", styles: ["@layer ig.base{.igx-avatar{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));position:relative;display:inline-flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--color);background:var(--background);vertical-align:middle;outline-style:none;flex-shrink:0;width:var(--size);height:var(--size)}.igx-avatar igx-icon{--ig-size: 3;color:var(--icon-color)}.igx-avatar:after{box-shadow:none;transition:box-shadow .15s cubic-bezier(.455,.03,.515,.955)}.igx-avatar__image{width:100%;height:100%;border-radius:inherit;background-size:cover;background-repeat:no-repeat;background-position:center}.igx-avatar--circle{border-radius:calc(var(--size)/2)}.igx-avatar--rounded{border-radius:var(--border-radius)}.igx-avatar--initials{text-transform:uppercase;font-size:calc(var(--size)/2);line-height:calc(var(--size)/2)}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-avatar igx-icon{--ig-size: 1}}}\n"], dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { 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: IgxAvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-avatar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxIconComponent, NgTemplateOutlet], template: "<ng-template #defaultTemplate>\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #imageTemplate>\n    <div #image class=\"igx-avatar__image\" [style.backgroundImage]=\"getSrcUrl()\"></div>\n</ng-template>\n\n<ng-template #initialsTemplate>\n    <span>{{initials.substring(0, 2)}}</span>\n</ng-template>\n\n<ng-template #iconTemplate>\n     <igx-icon>{{icon}}</igx-icon>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template\"></ng-container>\n", styles: ["@layer ig.base{.igx-avatar{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));position:relative;display:inline-flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--color);background:var(--background);vertical-align:middle;outline-style:none;flex-shrink:0;width:var(--size);height:var(--size)}.igx-avatar igx-icon{--ig-size: 3;color:var(--icon-color)}.igx-avatar:after{box-shadow:none;transition:box-shadow .15s cubic-bezier(.455,.03,.515,.955)}.igx-avatar__image{width:100%;height:100%;border-radius:inherit;background-size:cover;background-repeat:no-repeat;background-position:center}.igx-avatar--circle{border-radius:calc(var(--size)/2)}.igx-avatar--rounded{border-radius:var(--border-radius)}.igx-avatar--initials{text-transform:uppercase;font-size:calc(var(--size)/2);line-height:calc(var(--size)/2)}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-avatar igx-icon{--ig-size: 1}}}\n"] }]
         }], propDecorators: { ariaLabel: [{
@@ -302,11 +302,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxAvatarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxAvatarModule, imports: [IgxAvatarComponent], exports: [IgxAvatarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxAvatarModule, imports: [IgxAvatarComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxAvatarModule, imports: [IgxAvatarComponent], exports: [IgxAvatarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAvatarModule, imports: [IgxAvatarComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxAvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IgxAvatarComponent],

package/fesm2022/igniteui-angular-badge.mjs

@@ -179,10 +179,10 @@ class IgxBadgeComponent {
     get errorClass() {
         return this.type === IgxBadgeType.ERROR;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxBadgeComponent, isStandalone: true, selector: "igx-badge", inputs: { id: "id", type: "type", value: "value", icon: "icon", iconSet: "iconSet", shape: "shape", outlined: ["outlined", "outlined", booleanAttribute], dot: ["dot", "dot", booleanAttribute] }, host: { properties: { "attr.id": "this.id", "attr.role": "this.role", "class.igx-badge": "this.cssClass", "class.igx-badge--square": "this._squareShape", "attr.aria-label": "this.label", "class.igx-badge--outlined": "this.outlined", "class.igx-badge--dot": "this.dot", "attr.aria-roledescription": "this.roleDescription", "class.igx-badge--info": "this.infoClass", "class.igx-badge--success": "this.successClass", "class.igx-badge--warning": "this.warningClass", "class.igx-badge--error": "this.errorClass" } }, ngImport: i0, template: "@if (value || value === 0 && !icon) {\n    <span class=\"igx-badge__value\">{{value}}</span>\n}\n@if (icon && !iconSet) {\n    <igx-icon>{{icon}}</igx-icon>\n}\n@if (icon && iconSet) {\n    <igx-icon [family]=\"iconSet\" [name]=\"icon\">{{icon}}</igx-icon>\n}\n<ng-content></ng-content>\n", styles: ["@layer ig.base{.igx-badge{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--badge-size: var(--component-size);--_badge-size: var(--size);--ig-icon-size: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max(.875rem, -1 * .875rem), var(--is-small, 1) * max(.75rem, -1 * .75rem));--ig-icon-color: var(--icon-color);display:inline-flex;justify-content:center;align-items:center;min-width:var(--_badge-size);min-height:var(--_badge-size);color:var(--text-color);background:var(--background-color);border-radius:calc(var(--size)/2);box-shadow:var(--elevation);overflow:hidden;font-size:max(var(--is-large, 1)*max(var(--ig-body-2-font-size),-1 * var(--ig-body-2-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size),-1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-caption-font-size),-1 * var(--ig-caption-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-2-font-weight),-1 * var(--ig-body-2-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight),-1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-caption-font-weight),-1 * var(--ig-caption-font-weight)));line-height:max(var(--is-large, 1)*max(var(--ig-body-2-line-height),-1 * var(--ig-body-2-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height),-1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-caption-line-height),-1 * var(--ig-caption-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-2-letter-spacing),-1 * var(--ig-body-2-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing),-1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-caption-letter-spacing),-1 * var(--ig-caption-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-2-text-transform),-1 * var(--ig-body-2-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform),-1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-caption-text-transform),-1 * var(--ig-caption-text-transform)));padding-inline:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));gap:.125rem}.igx-badge:has(igx-icon:only-child){padding-inline:0}.igx-badge__value{white-space:nowrap;text-box:trim-both cap alphabetic}.igx-badge--info{background:var(--ig-info-800)}.igx-badge--success{background:var(--ig-success-900)}.igx-badge--warning{background:var(--ig-warn-500);color:var(--ig-warn-500-contrast)}.igx-badge--warning igx-icon{color:var(--ig-warn-500-contrast)}.igx-badge--error{background:var(--ig-error-700);color:var(--ig-error-900-contrast)}.igx-badge--outlined{box-shadow:0 0 0 .125rem var(--border-color)}.igx-badge--square{border-radius:var(--border-radius)}.igx-badge--dot{--_dot-size: var(--dot-size);min-width:var(--_dot-size);min-height:var(--_dot-size);padding:0}.igx-badge--dot igx-icon,.igx-badge--dot>*{display:none}.igx-badge--hidden{visibility:hidden}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-badge--success{background:var(--ig-success-500)}.igx-badge--info{background:var(--ig-info-500)}.igx-badge--error{background:var(--ig-error-500);color:var(--ig-error-100-contrast)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-badge{--ig-icon-size: max(var(--is-large, 1) * max(.75rem, -1 * .75rem), var(--is-medium, 1) * max(.625rem, -1 * .625rem), var(--is-small, 1) * max(.5rem, -1 * .5rem));padding-inline:max(var(--is-large, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-badge:has(igx-icon:only-child){padding-inline:0}.igx-badge--dot{padding-inline:0}.igx-badge{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);font-size:max(var(--is-large, 1)*max(var(--ig-button-font-size),-1 * var(--ig-button-font-size)),var(--is-medium, 1)*max(.625rem,-1 * .625rem),var(--is-small, 1)*max(.5625rem,-1 * .5625rem));line-height:max(var(--is-large, 1)*max(var(--ig-button-line-height),-1 * var(--ig-button-line-height)),var(--is-medium, 1)*max(.875rem,-1 * .875rem),var(--is-small, 1)*max(.75rem,-1 * .75rem))}.igx-badge--success{background:var(--ig-success-700)}.igx-badge--info{background:var(--ig-info-500)}.igx-badge--error{background:var(--ig-error-500)}.igx-badge--warning{color:var(--ig-gray-900)}.igx-badge--warning igx-icon{color:var(--ig-gray-900)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-badge--success{background:var(--ig-success-500)}.igx-badge--info{background:var(--ig-info-700)}.igx-badge--error{background:var(--ig-error-500)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-badge--warning{color:var(--ig-gray-50)}.igx-badge--warning igx-icon{color:var(--ig-gray-50)}}}\n"], dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxBadgeComponent, isStandalone: true, selector: "igx-badge", inputs: { id: "id", type: "type", value: "value", icon: "icon", iconSet: "iconSet", shape: "shape", outlined: ["outlined", "outlined", booleanAttribute], dot: ["dot", "dot", booleanAttribute] }, host: { properties: { "attr.id": "this.id", "attr.role": "this.role", "class.igx-badge": "this.cssClass", "class.igx-badge--square": "this._squareShape", "attr.aria-label": "this.label", "class.igx-badge--outlined": "this.outlined", "class.igx-badge--dot": "this.dot", "attr.aria-roledescription": "this.roleDescription", "class.igx-badge--info": "this.infoClass", "class.igx-badge--success": "this.successClass", "class.igx-badge--warning": "this.warningClass", "class.igx-badge--error": "this.errorClass" } }, ngImport: i0, template: "@if (value || value === 0 && !icon) {\n    <span class=\"igx-badge__value\">{{value}}</span>\n}\n@if (icon && !iconSet) {\n    <igx-icon>{{icon}}</igx-icon>\n}\n@if (icon && iconSet) {\n    <igx-icon [family]=\"iconSet\" [name]=\"icon\">{{icon}}</igx-icon>\n}\n<ng-content></ng-content>\n", styles: ["@layer ig.base{.igx-badge{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--badge-size: var(--component-size);--_badge-size: var(--size);--ig-icon-size: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max(.875rem, -1 * .875rem), var(--is-small, 1) * max(.75rem, -1 * .75rem));--ig-icon-color: var(--icon-color);display:inline-flex;justify-content:center;align-items:center;min-width:var(--_badge-size);min-height:var(--_badge-size);color:var(--text-color);background:var(--background-color);border-radius:calc(var(--size)/2);box-shadow:var(--elevation);overflow:hidden;font-size:max(var(--is-large, 1)*max(var(--ig-body-2-font-size),-1 * var(--ig-body-2-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size),-1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-caption-font-size),-1 * var(--ig-caption-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-2-font-weight),-1 * var(--ig-body-2-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight),-1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-caption-font-weight),-1 * var(--ig-caption-font-weight)));line-height:max(var(--is-large, 1)*max(var(--ig-body-2-line-height),-1 * var(--ig-body-2-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height),-1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-caption-line-height),-1 * var(--ig-caption-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-2-letter-spacing),-1 * var(--ig-body-2-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing),-1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-caption-letter-spacing),-1 * var(--ig-caption-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-2-text-transform),-1 * var(--ig-body-2-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform),-1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-caption-text-transform),-1 * var(--ig-caption-text-transform)));padding-inline:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));gap:.125rem}.igx-badge:has(igx-icon:only-child){padding-inline:0}.igx-badge__value{white-space:nowrap;text-box:trim-both cap alphabetic}.igx-badge--info{background:var(--ig-info-800)}.igx-badge--success{background:var(--ig-success-900)}.igx-badge--warning{background:var(--ig-warn-500);color:var(--ig-warn-500-contrast)}.igx-badge--warning igx-icon{color:var(--ig-warn-500-contrast)}.igx-badge--error{background:var(--ig-error-700);color:var(--ig-error-900-contrast)}.igx-badge--outlined{box-shadow:0 0 0 .125rem var(--border-color)}.igx-badge--square{border-radius:var(--border-radius)}.igx-badge--dot{--_dot-size: var(--dot-size);min-width:var(--_dot-size);min-height:var(--_dot-size);padding:0}.igx-badge--dot igx-icon,.igx-badge--dot>*{display:none}.igx-badge--hidden{visibility:hidden}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-badge--success{background:var(--ig-success-500)}.igx-badge--info{background:var(--ig-info-500)}.igx-badge--error{background:var(--ig-error-500);color:var(--ig-error-100-contrast)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-badge{--ig-icon-size: max(var(--is-large, 1) * max(.75rem, -1 * .75rem), var(--is-medium, 1) * max(.625rem, -1 * .625rem), var(--is-small, 1) * max(.5rem, -1 * .5rem));padding-inline:max(var(--is-large, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-badge:has(igx-icon:only-child){padding-inline:0}.igx-badge--dot{padding-inline:0}.igx-badge{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);font-size:max(var(--is-large, 1)*max(var(--ig-button-font-size),-1 * var(--ig-button-font-size)),var(--is-medium, 1)*max(.625rem,-1 * .625rem),var(--is-small, 1)*max(.5625rem,-1 * .5625rem));line-height:max(var(--is-large, 1)*max(var(--ig-button-line-height),-1 * var(--ig-button-line-height)),var(--is-medium, 1)*max(.875rem,-1 * .875rem),var(--is-small, 1)*max(.75rem,-1 * .75rem))}.igx-badge--success{background:var(--ig-success-700)}.igx-badge--info{background:var(--ig-info-500)}.igx-badge--error{background:var(--ig-error-500)}.igx-badge--warning{color:var(--ig-gray-900)}.igx-badge--warning igx-icon{color:var(--ig-gray-900)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-badge--success{background:var(--ig-success-500)}.igx-badge--info{background:var(--ig-info-700)}.igx-badge--error{background:var(--ig-error-500)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-badge--warning{color:var(--ig-gray-50)}.igx-badge--warning igx-icon{color:var(--ig-gray-50)}}}\n"], dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-badge', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxIconComponent], template: "@if (value || value === 0 && !icon) {\n    <span class=\"igx-badge__value\">{{value}}</span>\n}\n@if (icon && !iconSet) {\n    <igx-icon>{{icon}}</igx-icon>\n}\n@if (icon && iconSet) {\n    <igx-icon [family]=\"iconSet\" [name]=\"icon\">{{icon}}</igx-icon>\n}\n<ng-content></ng-content>\n", styles: ["@layer ig.base{.igx-badge{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--default-size));--badge-size: var(--component-size);--_badge-size: var(--size);--ig-icon-size: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max(.875rem, -1 * .875rem), var(--is-small, 1) * max(.75rem, -1 * .75rem));--ig-icon-color: var(--icon-color);display:inline-flex;justify-content:center;align-items:center;min-width:var(--_badge-size);min-height:var(--_badge-size);color:var(--text-color);background:var(--background-color);border-radius:calc(var(--size)/2);box-shadow:var(--elevation);overflow:hidden;font-size:max(var(--is-large, 1)*max(var(--ig-body-2-font-size),-1 * var(--ig-body-2-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size),-1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-caption-font-size),-1 * var(--ig-caption-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-2-font-weight),-1 * var(--ig-body-2-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight),-1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-caption-font-weight),-1 * var(--ig-caption-font-weight)));line-height:max(var(--is-large, 1)*max(var(--ig-body-2-line-height),-1 * var(--ig-body-2-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height),-1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-caption-line-height),-1 * var(--ig-caption-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-2-letter-spacing),-1 * var(--ig-body-2-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing),-1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-caption-letter-spacing),-1 * var(--ig-caption-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-2-text-transform),-1 * var(--ig-body-2-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform),-1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-caption-text-transform),-1 * var(--ig-caption-text-transform)));padding-inline:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));gap:.125rem}.igx-badge:has(igx-icon:only-child){padding-inline:0}.igx-badge__value{white-space:nowrap;text-box:trim-both cap alphabetic}.igx-badge--info{background:var(--ig-info-800)}.igx-badge--success{background:var(--ig-success-900)}.igx-badge--warning{background:var(--ig-warn-500);color:var(--ig-warn-500-contrast)}.igx-badge--warning igx-icon{color:var(--ig-warn-500-contrast)}.igx-badge--error{background:var(--ig-error-700);color:var(--ig-error-900-contrast)}.igx-badge--outlined{box-shadow:0 0 0 .125rem var(--border-color)}.igx-badge--square{border-radius:var(--border-radius)}.igx-badge--dot{--_dot-size: var(--dot-size);min-width:var(--_dot-size);min-height:var(--_dot-size);padding:0}.igx-badge--dot igx-icon,.igx-badge--dot>*{display:none}.igx-badge--hidden{visibility:hidden}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-badge--success{background:var(--ig-success-500)}.igx-badge--info{background:var(--ig-info-500)}.igx-badge--error{background:var(--ig-error-500);color:var(--ig-error-100-contrast)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-badge{--ig-icon-size: max(var(--is-large, 1) * max(.75rem, -1 * .75rem), var(--is-medium, 1) * max(.625rem, -1 * .625rem), var(--is-small, 1) * max(.5rem, -1 * .5rem));padding-inline:max(var(--is-large, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.25rem,-1 * .25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-badge:has(igx-icon:only-child){padding-inline:0}.igx-badge--dot{padding-inline:0}.igx-badge{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);font-size:max(var(--is-large, 1)*max(var(--ig-button-font-size),-1 * var(--ig-button-font-size)),var(--is-medium, 1)*max(.625rem,-1 * .625rem),var(--is-small, 1)*max(.5625rem,-1 * .5625rem));line-height:max(var(--is-large, 1)*max(var(--ig-button-line-height),-1 * var(--ig-button-line-height)),var(--is-medium, 1)*max(.875rem,-1 * .875rem),var(--is-small, 1)*max(.75rem,-1 * .75rem))}.igx-badge--success{background:var(--ig-success-700)}.igx-badge--info{background:var(--ig-info-500)}.igx-badge--error{background:var(--ig-error-500)}.igx-badge--warning{color:var(--ig-gray-900)}.igx-badge--warning igx-icon{color:var(--ig-gray-900)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-badge--success{background:var(--ig-success-500)}.igx-badge--info{background:var(--ig-info-700)}.igx-badge--error{background:var(--ig-error-500)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-badge--warning{color:var(--ig-gray-50)}.igx-badge--warning igx-icon{color:var(--ig-gray-50)}}}\n"] }]
         }], propDecorators: { id: [{
@@ -246,11 +246,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxBadgeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxBadgeModule, imports: [IgxBadgeComponent], exports: [IgxBadgeComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBadgeModule, imports: [IgxBadgeComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxBadgeModule, imports: [IgxBadgeComponent], exports: [IgxBadgeComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBadgeModule, imports: [IgxBadgeComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxBadgeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBadgeModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [IgxBadgeComponent],

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
@@ -288,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: [{
@@ -336,11 +336,11 @@ const IGX_BANNER_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxBannerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.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],