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

package/README.md

@@ -50,7 +50,7 @@ This repository ships with **Copilot Skills** — structured knowledge files tha
 | Data Grids | [`skills/igniteui-angular-grids/SKILL.md`](skills/igniteui-angular-grids/SKILL.md) | Data Grids (grid type selection, column config, sorting, filtering, selection, editing, grouping, paging, remote data, state persistence, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid) |
 | Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`](skills/igniteui-angular-theming/SKILL.md) | Theming & Styling (includes MCP server setup) |
 | Generate From Image Design | [`skills/igniteui-angular-generate-from-image-design/SKILL.md`](skills/igniteui-angular-generate-from-image-design/SKILL.md) | Build Angular views from screenshots, mockups, and wireframes using Ignite UI components, theming MCP tools, and image-to-layout/component mapping guidance |
-| Figma to App | [`skills/igniteui-angular-figma-to-app/SKILL.md`](skills/igniteui-angular-figma-to-app/SKILL.md) | Translate Figma app screens built with the Indigo.Design UI Kits (Material, Fluent, Bootstrap, Indigo) into Angular apps — 1:1 Figma component to Ignite UI control mapping, design token bridging, asset extraction, and visual validation against the original design |
+| Figma to App | [`skills/igniteui-angular-figma-to-app/SKILL.md`](skills/igniteui-angular-figma-to-app/SKILL.md) | Translate Figma app screens into Angular apps — Indigo.Design UI Kits (Material, Fluent, Bootstrap, Indigo) with 1:1 Figma component to Ignite UI control mapping, plus third-party kits and plain frames via semantic mapping, design token bridging, asset extraction, and visual validation against the original design |
 
 #### How It Works
 

package/button-group/README.md

@@ -1,6 +1,6 @@
 # igx-ButtonGroup
 
-The **igx-ButtonGroup** component aims at providing a button group functionality to developers that also allow horizontal/vertical alignment, single/multiple selection with toggling. The igx-ButtounGroup component makes use of the igxButton directive.
+The **igx-ButtonGroup** component aims at providing a button group functionality to developers that also allow horizontal/vertical alignment, single/multiple selection with toggling. The igx-ButtonGroup component makes use of the igxButton directive.
 A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup.html)
 
 # Usage
@@ -13,28 +13,61 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 | Name   |      Type      |  Description |
 |:----------|:-------------:|:------|
 | `id` | string | Unique identifier of the component. If not provided it will be automatically generated.|
-| `multiSelection` |  boolean | Enables selecting multiple buttons. Value by default is false.  |
+| `selectionMode` | `'single'` \| `'singleRequired'` \| `'multi'` | Sets the selection mode of the buttons. `single` (default) allows one selected button that can be deselected, `singleRequired` keeps one button selected once a selection is made and `multi` allows selecting multiple buttons. |
 | `alignment` |    enum   |   Set the button group alignment. Available enum members are ButtonGroupAlignment.horizontal (default) or ButtonGroupAlignment.vertical. |
-| `disabled` | boolean | Disables the igxButtounGroup component. False by default. |
+| `disabled` | boolean | Disables the igx-ButtonGroup component. False by default. |
+| `values` | `IButtonGroupButton[]` | Configures the buttons rendered by the group. They are rendered before any buttons projected in the group's content. Empty by default. |
+| `itemContentCssClass` | string | CSS class applied to the content of each button rendered from `values`. |
+| `buttons` | `IgxButtonDirective[]` | Gets all buttons in the group - the ones rendered from `values` followed by the projected ones. Read-only. |
+| `selectedButtons` | `IgxButtonDirective[]` | Gets the selected button/buttons. Read-only. |
+
+# IButtonGroupButton
+Describes a button configured through the `values` input.
+
+| Name   |      Type      |  Description |
+|:----------|:-------------:|:------|
+| `label` | string | The text displayed in the button, also used as its `aria-label`. Buttons are tracked by `label`, so it should be unique within `values`. Required. |
+| `icon` | string | The name of the icon displayed before the label. |
+| `ripple` | string | The color of the ripple effect shown when the button is clicked. |
+| `selected` | boolean | Whether the button is selected. Kept in sync with the selection state of the group. |
+| `disabled` | boolean | Whether the button is disabled. Disabling the group disables all of its buttons. |
+| `togglable` | boolean | Rendered as the button's `data-togglable` attribute. |
 
 # API Methods
 | Name   | Description |
 |:----------|:------|
 | `selectButton(index: number)` | Selects a button by its index.  |
 | `deselectButton(index: number)` | Deselects a button by its index. |
-| `selectedButtons()` | Gets the selected button/buttons. |
 
 # Events
 | Name   | Description |
 |:----------|:-------------:|
-| `onSelect` | Fired when a button is selected. |
-| `onUnselect` | Fired when a button is unselected. |
-| `onClick` | Fired when a button is clicked. |
+| `selected` | Fired when a button is selected through user interaction. |
+| `deselected` | Fired when a button is deselected through user interaction. |
 
 # Examples
 
-Using `igx-ButtonGroup` to organize buttons into an Angular styled button group.
+Using `igx-ButtonGroup` to organize buttons into an Angular styled button group, configured through `values`.
+```typescript
+import { ButtonGroupAlignment, IButtonGroupButton } from 'igniteui-angular/button-group';
+
+public alignment = ButtonGroupAlignment.vertical;
+public buttons: IButtonGroupButton[] = [
+    { label: 'Bold', icon: 'format_bold', selected: true },
+    { label: 'Italic', icon: 'format_italic' },
+    { label: 'Underline', icon: 'format_underlined', disabled: true }
+];
+```
+```html
+    <igx-buttongroup selectionMode="multi" [values]="buttons" [alignment]="alignment">
+    </igx-buttongroup>
+```
+
+Projecting `igxButton` buttons in the group's content instead.
 ```html
-    <igx-buttongroup multiSelection="false" [values]="buttons" [alignment]="alignment">
+    <igx-buttongroup selectionMode="singleRequired">
+        <button igxButton [selected]="true">Day</button>
+        <button igxButton>Week</button>
+        <button igxButton>Month</button>
     </igx-buttongroup>
 ```

package/calendar/README.md

@@ -47,10 +47,10 @@ handler when selection is done.
 
 A multiple selection calendar with different locale and templating for the subheader.
 ```html
-<igx-calendar locale="ja-JP" selection="multi">
+<igx-calendar #calendar locale="ja-JP" selection="multi">
         <ng-template igxCalendarSubheader let-format>
-                <span (click)="format.yearView()">{{ format.year.combined }}</span>
-                <span (click)="format.monthView()">{{ format.month.combined | titlecase }}</span>
+                <span (click)="calendar.activeView = 'decade'">{{ format.year.combined }}</span>
+                <span (click)="calendar.activeView = 'year'">{{ format.month.combined | titlecase }}</span>
         </ng-template>
 </igx-calendar>
 ```
@@ -154,7 +154,7 @@ The defaul values are listed below.
 - `formatViews: Object`
 
 Controls whether the date parts in the different calendar views should be formatted according to the provided
-`locale` and `formatOptions`.
+`locale` and `formatOptions`. Date parts that are not formatted are rendered as plain numbers; months use their `Date.getMonth()` value, from `0` (January) to `11` (December).
 
 The default values are listed below.
 ```typescript
@@ -199,34 +199,47 @@ Just decorate a ng-template inside the calendar with `igxCalendarHeader` or `igx
 and use the context returned to customize the way the date is displayed.
 
 The template decorated with the `igxCalendarHeader` directive is rendered only when the calendar selection is set to `single`.
-The `igxCalendarSubheader` is available in all selection modes.
+The `igxCalendarSubheader` is available in all selection modes and receives the context of the current view date in the days, months and years views.
 
 Example:
 
 ```html
-<igx-calendar>
+<igx-calendar #calendar>
         <ng-template igxCalendarHeader let-parts>
-                ...
+                {{ parts.weekday.combined }} {{ parts.month.combined }} {{ parts.day.value }}
         </ng-template>
         <ng-template igxCalendarSubheader let-parts>
-        <!-- Let's change the default representation to YYYY-MM -->
-                <span class="date__el" (click)="parts.monthView()">
-                        {{ parts.month.combined }}
-                </span>
-                <span class="date__el" (click)="parts.yearView()">
-                        {{ parts.year.combined }}
-                </span>
+                @switch (calendar.activeView) {
+                        @case ('month') {
+                                <!-- Days view: show the view date as YYYY-MM and open the months view on click -->
+                                <span class="date__el" (click)="calendar.activeView = 'year'">
+                                        {{ parts.date | date: 'yyyy-MM' }}
+                                </span>
+                        }
+                        @case ('year') {
+                                <!-- Months view: show the year and open the years view on click -->
+                                <span class="date__el" (click)="calendar.activeView = 'decade'">
+                                        {{ parts.year.combined }}
+                                </span>
+                        }
+                        @case ('decade') {
+                                <!-- Years view: the context holds the view date, so the title can be built around it -->
+                                <span class="date__el">Years around {{ parts.year.value }}</span>
+                        }
+                }
         </ng-template>
 </igx-calendar>
 ```
+
+The subheader template replaces the default content of the subheader in every view, so use the calendar's
+`activeView` to render the content that fits the current view and to switch between views.
 #### Template context
 
 | Name      | Type     | Description                                                                  |
 | :-------- | :------: | :--------------------------------------------------------------------------- |
 | date      | Date     | The date object in the context of the template. See * below for details.     |
+| index     | number   | The index of the month view the subheader belongs to when `monthsViewNumber` is greater than `1`. |
 | full      | string   | The full date representation returned after applying the `formatOptions`.    |
-| monthView | Function | A function which when called puts the calendar in month view.                |
-| yearView  | Function | A function which when called puts the calendar in year view.                 |
 | era       | Object   | The era date component (if applicable) formatted to the supplied locale.     |
 | year      | Object   | The year date component (if applicable) formatted to the supplied locale.    |
 | month     | Object   | The month date component (if applicable) formatted to the supplied locale.   |
@@ -234,7 +247,7 @@ Example:
 | weekday   | Object   | The weekday date component (if applicable) formatted to the supplied locale. |
 
 \* In the `igxCalendarHeader` context this is either the current date or the current selection of the calendar.
-In the `igxCalendarSubheaderContext` this is the same as the `viewDate`
+In the `igxCalendarSubheader` context this is the same as the `viewDate` (offset by `index` months in a multi-view calendar).
 
 **NOTE:** All of the date components (year, month, etc.) are objects with the structure
 ```typescript
@@ -246,6 +259,3 @@ In the `igxCalendarSubheaderContext` this is the same as the `viewDate`
 ```
 where `value` is the locale string representation of the date component, `literal` is the locale string separator (if any),
 and `combined` is as the name suggests the combined output of the two.
-
-**NOTE 2:** Mind that both in Internet Explorer and Edge all of the date parts will be empty strings as both browsers don't
-implement the Intl API providing this functionality.

package/card/README.md

@@ -65,6 +65,6 @@ Supporting directives and components:
 | `isJustifyLayout` | boolean | Returns true when the layout type is set to `justify`. |
 
 
-`*` When the `horizontal` property of the card is set to `true`, any `igx-card-actions` between the opening and closing brackets of the `igx-card` component will automatically have their `vertical` property set to true.
+`*` When `vertical` is not set explicitly, any `igx-card-actions` between the opening and closing brackets of the `igx-card` component follow the card's `horizontal` property - they are vertical while the card is horizontal and update when `horizontal` changes. Setting `vertical` explicitly overrides this.
 
 `**` The `igx-card-content` is just a container for the content placed in it. It is used as a layout hook so that whe can arrange it correctly with respect to all other card elements.

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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxAccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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.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] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", 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.2.0", ngImport: i0, type: IgxAccordionModule, imports: [i2.IgxExpansionPanelComponent, i2.IgxExpansionPanelHeaderComponent, i2.IgxExpansionPanelBodyComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxActionStripMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxActionStripMenuItemDirective, isStandalone: true, selector: "[igxActionStripMenuItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxActionStripMenuItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxActionStripMenuItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxActionStripMenuItem]',
@@ -106,18 +106,7 @@ class IgxActionStripComponent {
      * @internal
      */
     get hideOnRowLeave() {
-        if (this.menu.items.length === 0) {
-            return true;
-        }
-        else if (this.menu.items.length > 0) {
-            if (this.menu.collapsed) {
-                return true;
-            }
-            else {
-                return false;
-            }
-        }
-        return undefined;
+        return this.menu.items.length === 0 || this.menu.collapsed;
     }
     constructor() {
         this._viewContainer = inject(ViewContainerRef);
@@ -272,10 +261,10 @@ class IgxActionStripComponent {
             this.menu.close();
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxActionStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxActionStripComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxActionStripComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-action-strip', encapsulation: ViewEncapsulation.None, imports: [
                         NgTemplateOutlet,
@@ -322,11 +311,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.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] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxActionStripModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxActionStripModule, imports: [IgxActionStripComponent, IgxActionStripMenuItemDirective], exports: [IgxActionStripComponent, IgxActionStripMenuItemDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxActionStripModule, imports: [IgxActionStripComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxActionStripModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxActionStripModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

@@ -1 +1 @@
-{"version":3,"file":"igniteui-angular-action-strip.mjs","sources":["../../../projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts","../../../projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.html","../../../projects/igniteui-angular/action-strip/src/action-strip/public_api.ts","../../../projects/igniteui-angular/action-strip/src/action-strip/action-strip.module.ts","../../../projects/igniteui-angular/action-strip/src/igniteui-angular-action-strip.ts"],"sourcesContent":["import {\n  Component,\n  Directive,\n  HostBinding,\n  Input,\n  Renderer2,\n  ViewContainerRef,\n  ContentChildren,\n  QueryList,\n  ViewChild,\n  TemplateRef,\n  ChangeDetectorRef,\n  AfterViewInit,\n  ElementRef,\n  booleanAttribute,\n  inject,\n  DestroyRef,\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  signal\n} from '@angular/core';\n\n\nimport {\n    ActionStripResourceStringsEN,\n    CloseScrollStrategy,\n    getCurrentResourceStrings,\n    onResourceChangeHandle,\n    IActionStripResourceStrings,\n    IgxActionStripActionsToken,\n    IgxActionStripToken,\n    OverlaySettings\n} from 'igniteui-angular/core';\nimport { IgxIconComponent } from 'igniteui-angular/icon';\nimport { IgxToggleActionDirective } from 'igniteui-angular/directives';\nimport { IgxRippleDirective } from 'igniteui-angular/directives';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IgxIconButtonDirective } from 'igniteui-angular/directives';\nimport { trackByIdentity } from 'igniteui-angular/core';\nimport { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down';\n\n@Directive({\n    selector: '[igxActionStripMenuItem]',\n    standalone: true\n})\nexport class IgxActionStripMenuItemDirective {\n    public templateRef = inject<TemplateRef<any>>(TemplateRef);\n}\n\n/* blazorElement */\n/* jsonAPIManageItemInMarkup */\n/* jsonAPIManageCollectionInMarkup */\n/* wcElementTag: igc-action-strip */\n/* blazorIndirectRender */\n/* singleInstanceIdentifier */\n/* contentParent: Grid */\n/* contentParent: TreeGrid */\n/* contentParent: RowIsland */\n/* contentParent: HierarchicalGrid */\n/**\n * Action Strip provides templatable area for one or more actions.\n *\n * @igxModule IgxActionStripModule\n *\n * @igxTheme igx-action-strip-theme\n *\n * @igxKeywords action, strip, actionStrip, pinning, editing\n *\n * @igxGroup Data Entry & Display\n *\n * @igxParent IgxGridComponent, IgxHierarchicalGridComponent, IgxTreeGridComponent, IgxRowIslandComponent, *\n *\n * @remarks\n * The Ignite UI Action Strip is a container, overlaying its parent container,\n * and displaying action buttons with action applicable to the parent component the strip is instantiated or shown for.\n *\n * @example\n * ```html\n * <igx-action-strip #actionStrip>\n *     <igx-icon (click)=\"doSomeAction()\"></igx-icon>\n * </igx-action-strip>\n */\n@Component({\n    selector: 'igx-action-strip',\n    templateUrl: 'action-strip.component.html',\n    styleUrl: 'action-strip.component.css',\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        NgTemplateOutlet,\n        IgxIconButtonDirective,\n        IgxRippleDirective,\n        IgxToggleActionDirective,\n        IgxDropDownItemNavigationDirective,\n        IgxIconComponent,\n        IgxDropDownComponent,\n        IgxDropDownItemComponent\n    ],\n    changeDetection: ChangeDetectionStrategy.Eager,\n    providers: [{ provide: IgxActionStripToken, useExisting: IgxActionStripComponent }]\n})\nexport class IgxActionStripComponent implements IgxActionStripToken, AfterViewInit, AfterContentInit {\n    private _viewContainer = inject(ViewContainerRef);\n    private renderer = inject(Renderer2);\n    protected el = inject(ElementRef);\n    /* blazorSuppress */\n    public cdr = inject(ChangeDetectorRef);\n\n\n    /* blazorSuppress */\n    /**\n     * Sets the context of an action strip.\n     * The context should be an instance of a @Component, that has element property.\n     * This element will be the placeholder of the action strip.\n     *\n     * @example\n     * ```html\n     * <igx-action-strip [context]=\"cell\"></igx-action-strip>\n     * ```\n     */\n    @Input()\n    public set context(value: any) {\n        this._context.set(value);\n    }\n\n    public get context(): any {\n        return this._context();\n    }\n\n    /**\n     * Menu Items ContentChildren inside the Action Strip\n     *\n     * @hidden\n     * @internal\n     */\n    @ContentChildren(IgxActionStripMenuItemDirective)\n    public _menuItems!: QueryList<IgxActionStripMenuItemDirective>;\n\n\n    /* blazorInclude */\n    /* contentChildren */\n    /* blazorTreatAsCollection */\n    /* blazorCollectionName: GridActionsBaseDirectiveCollection */\n    /**\n     * ActionButton as ContentChildren inside the Action Strip\n     *\n     * @hidden\n     * @internal\n     */\n    @ContentChildren(IgxActionStripActionsToken)\n    public actionButtons!: QueryList<IgxActionStripActionsToken>;\n\n    /**\n     * Gets/Sets the visibility of the Action Strip.\n     * Could be used to set if the Action Strip will be initially hidden.\n     *\n     * @example\n     * ```html\n     *  <igx-action-strip [hidden]=\"false\">\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public set hidden(value: boolean) {\n        this._hidden.set(value);\n    }\n\n    public get hidden(): boolean {\n        return this._hidden();\n    }\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: IActionStripResourceStrings) {\n        this._resourceStrings = value;\n        this._customResourceStrings = Object.assign({}, this._defaultResourceStrings, this._resourceStrings);\n    }\n\n    public get resourceStrings(): IActionStripResourceStrings {\n        return this._resourceStrings ? this._customResourceStrings : this._defaultResourceStrings;\n    }\n\n    /**\n     * Hide or not the Action Strip based on if it is a menu.\n     *\n     * @hidden\n     * @internal\n     */\n    public get hideOnRowLeave(): boolean {\n        if (this.menu.items.length === 0) {\n            return true;\n        } else if (this.menu.items.length > 0) {\n            if (this.menu.collapsed) {\n                return true;\n            } else {\n                return false;\n            }\n        }\n        return undefined!;\n    }\n\n    /**\n     * Reference to the menu\n     *\n     * @hidden\n     * @internal\n     */\n    @ViewChild('dropdown')\n    public menu!: IgxDropDownComponent;\n\n    /**\n     * Getter for menu overlay settings\n     *\n     * @hidden\n     * @internal\n     */\n    public menuOverlaySettings: OverlaySettings = { scrollStrategy: new CloseScrollStrategy() };\n\n    private _destroyRef = inject(DestroyRef);\n    /**\n     * `hidden` and `context` are held in signals so that the reads in the `display` host binding\n     * and in the action components' templates are tracked. Both are changed imperatively - from\n     * `show`/`hide`, and from the grid while it is rendering (e.g. `viewDetachHandler` hiding the\n     * strip as its row is detached) - and a plain field would leave those bindings stale, which\n     * surfaces as `NG0100` in dev mode and as an out-of-date strip in a zoneless app: a component's\n     * host binding is only re-evaluated when its parent view is refreshed, so marking this\n     * component for check is not enough.\n     */\n    private _hidden = signal(true);\n    private _context = signal<any>(undefined);\n    private _resourceStrings: IActionStripResourceStrings = null!;\n    private _customResourceStrings: IActionStripResourceStrings = null!;\n    private _defaultResourceStrings = getCurrentResourceStrings(ActionStripResourceStringsEN);\n    private _originalParent!: HTMLElement;\n\n    constructor() {\n        onResourceChangeHandle(this._destroyRef, () => {\n            this._defaultResourceStrings = getCurrentResourceStrings(ActionStripResourceStringsEN, false);\n            this._customResourceStrings = this._resourceStrings ? Object.assign({}, this._defaultResourceStrings, this._resourceStrings) : null!;\n        }, this);\n    }\n\n    /**\n     * Menu Items list.\n     *\n     * @hidden\n     * @internal\n     */\n    public get menuItems() {\n        const actions: any[] = [];\n        this.actionButtons.forEach(button => {\n            if (button.asMenuItems) {\n                const children = button.buttons;\n                if (children) {\n                    children.toArray().forEach(x => actions.push(x));\n                }\n            }\n        });\n        return [... this._menuItems.toArray(), ...actions];\n    }\n\n\n    /**\n     * Getter for the 'display' property of the current action strip\n     */\n    @HostBinding('style.display')\n    private get display(): string {\n        return this._hidden() ? 'none' : 'flex';\n    }\n\n    /**\n     * Host `attr.class` binding.\n     */\n    @HostBinding('class.igx-action-strip')\n    protected hostClass = 'igx-action-strip';\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public ngAfterContentInit() {\n        this.actionButtons.forEach(button => {\n            button.strip = this;\n        });\n        this.actionButtons.changes.subscribe(() => {\n            this.actionButtons.forEach(button => {\n                button.strip = this;\n            });\n        });\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public ngAfterViewInit() {\n        this.menu.selectionChanging.subscribe(($event) => {\n            const newSelection = ($event.newSelection as any).elementRef.nativeElement;\n            let allButtons: any[] = [];\n            this.actionButtons.forEach(actionButtons => {\n                if (actionButtons.asMenuItems) {\n                    allButtons = [...allButtons, ...actionButtons.buttons.toArray()];\n                }\n            });\n            const button = allButtons.find(x => newSelection.contains(x.container.nativeElement));\n            if (button) {\n                button.actionClick.emit();\n            }\n        });\n        this._originalParent = this._viewContainer.element.nativeElement?.parentElement;\n    }\n\n    /**\n     * Showing the Action Strip and appending it the specified context element.\n     *\n     * @param context\n     * @example\n     * ```typescript\n     * this.actionStrip.show(row);\n     * ```\n     */\n    public show(context?: any): void {\n        this.hidden = false;\n        if (!context) {\n            return;\n        }\n        // when shown for different context make sure the menu won't stay opened\n        if (this.context !== context) {\n            this.closeMenu();\n        }\n        this.context = context;\n        if (this.context && this.context.element) {\n            this.renderer.appendChild(context.element.nativeElement, this._viewContainer.element.nativeElement);\n        }\n        this.cdr.detectChanges();\n    }\n\n    /**\n     * Hiding the Action Strip and removing it from its current context element.\n     *\n     * @example\n     * ```typescript\n     * this.actionStrip.hide();\n     * ```\n     */\n    public hide(): void {\n        this.hidden = true;\n        this.closeMenu();\n        if (this._originalParent) {\n            // D.P. fix(elements) don't detach native DOM, instead move back. Might not matter for Angular, but Elements will destroy\n            this.renderer.appendChild(this._originalParent, this._viewContainer.element.nativeElement);\n        } else if (this.context && this.context.element) {\n            this.renderer.removeChild(this.context.element.nativeElement, this._viewContainer.element.nativeElement);\n        }\n    }\n\n    /** pin swapping w/ unpin resets the menuItems collection */\n    protected trackMenuItem = trackByIdentity;\n\n    /**\n     * Close the menu if opened\n     *\n     * @hidden\n     * @internal\n     */\n    private closeMenu(): void {\n        if (this.menu && !this.menu.collapsed) {\n            this.menu.close();\n        }\n    }\n}\n","<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","import { IgxActionStripComponent, IgxActionStripMenuItemDirective } from './action-strip.component';\n\nexport { IgxActionStripComponent, IgxActionStripMenuItemDirective } from './action-strip.component';\n\n/* Action-strip outside of grid directives collection for ease-of-use import in standalone components scenario */\nexport const IGX_ACTION_STRIP_DIRECTIVES = [\n    IgxActionStripComponent,\n    IgxActionStripMenuItemDirective\n] as const;\n","import { NgModule } from '@angular/core';\nimport { IGX_ACTION_STRIP_DIRECTIVES } from './public_api';\n\n/**\n * @hidden\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n    imports: [\n        ...IGX_ACTION_STRIP_DIRECTIVES\n    ],\n    exports: [\n        ...IGX_ACTION_STRIP_DIRECTIVES\n    ],\n})\nexport class IgxActionStripModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.IgxActionStripComponent","i1.IgxActionStripMenuItemDirective"],"mappings":"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"}
+{"version":3,"file":"igniteui-angular-action-strip.mjs","sources":["../../../projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts","../../../projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.html","../../../projects/igniteui-angular/action-strip/src/action-strip/public_api.ts","../../../projects/igniteui-angular/action-strip/src/action-strip/action-strip.module.ts","../../../projects/igniteui-angular/action-strip/src/igniteui-angular-action-strip.ts"],"sourcesContent":["import {\n  Component,\n  Directive,\n  HostBinding,\n  Input,\n  Renderer2,\n  ViewContainerRef,\n  ContentChildren,\n  QueryList,\n  ViewChild,\n  TemplateRef,\n  ChangeDetectorRef,\n  AfterViewInit,\n  ElementRef,\n  booleanAttribute,\n  inject,\n  DestroyRef,\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  signal\n} from '@angular/core';\n\n\nimport {\n    ActionStripResourceStringsEN,\n    CloseScrollStrategy,\n    getCurrentResourceStrings,\n    onResourceChangeHandle,\n    IActionStripResourceStrings,\n    IgxActionStripActionsToken,\n    IgxActionStripToken,\n    OverlaySettings\n} from 'igniteui-angular/core';\nimport { IgxIconComponent } from 'igniteui-angular/icon';\nimport { IgxToggleActionDirective } from 'igniteui-angular/directives';\nimport { IgxRippleDirective } from 'igniteui-angular/directives';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IgxIconButtonDirective } from 'igniteui-angular/directives';\nimport { trackByIdentity } from 'igniteui-angular/core';\nimport { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down';\n\n@Directive({\n    selector: '[igxActionStripMenuItem]',\n    standalone: true\n})\nexport class IgxActionStripMenuItemDirective {\n    public templateRef = inject<TemplateRef<any>>(TemplateRef);\n}\n\n/* blazorElement */\n/* jsonAPIManageItemInMarkup */\n/* jsonAPIManageCollectionInMarkup */\n/* wcElementTag: igc-action-strip */\n/* blazorIndirectRender */\n/* singleInstanceIdentifier */\n/* contentParent: Grid */\n/* contentParent: TreeGrid */\n/* contentParent: RowIsland */\n/* contentParent: HierarchicalGrid */\n/**\n * Action Strip provides templatable area for one or more actions.\n *\n * @igxModule IgxActionStripModule\n *\n * @igxTheme igx-action-strip-theme\n *\n * @igxKeywords action, strip, actionStrip, pinning, editing\n *\n * @igxGroup Data Entry & Display\n *\n * @igxParent IgxGridComponent, IgxHierarchicalGridComponent, IgxTreeGridComponent, IgxRowIslandComponent, *\n *\n * @remarks\n * The Ignite UI Action Strip is a container, overlaying its parent container,\n * and displaying action buttons with action applicable to the parent component the strip is instantiated or shown for.\n *\n * @example\n * ```html\n * <igx-action-strip #actionStrip>\n *     <igx-icon (click)=\"doSomeAction()\"></igx-icon>\n * </igx-action-strip>\n */\n@Component({\n    selector: 'igx-action-strip',\n    templateUrl: 'action-strip.component.html',\n    styleUrl: 'action-strip.component.css',\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        NgTemplateOutlet,\n        IgxIconButtonDirective,\n        IgxRippleDirective,\n        IgxToggleActionDirective,\n        IgxDropDownItemNavigationDirective,\n        IgxIconComponent,\n        IgxDropDownComponent,\n        IgxDropDownItemComponent\n    ],\n    changeDetection: ChangeDetectionStrategy.Eager,\n    providers: [{ provide: IgxActionStripToken, useExisting: IgxActionStripComponent }]\n})\nexport class IgxActionStripComponent implements IgxActionStripToken, AfterViewInit, AfterContentInit {\n    private _viewContainer = inject(ViewContainerRef);\n    private renderer = inject(Renderer2);\n    protected el = inject(ElementRef);\n    /* blazorSuppress */\n    public cdr = inject(ChangeDetectorRef);\n\n\n    /* blazorSuppress */\n    /**\n     * Sets the context of an action strip.\n     * The context should be an instance of a @Component, that has element property.\n     * This element will be the placeholder of the action strip.\n     *\n     * @example\n     * ```html\n     * <igx-action-strip [context]=\"cell\"></igx-action-strip>\n     * ```\n     */\n    @Input()\n    public set context(value: any) {\n        this._context.set(value);\n    }\n\n    public get context(): any {\n        return this._context();\n    }\n\n    /**\n     * Menu Items ContentChildren inside the Action Strip\n     *\n     * @hidden\n     * @internal\n     */\n    @ContentChildren(IgxActionStripMenuItemDirective)\n    public _menuItems!: QueryList<IgxActionStripMenuItemDirective>;\n\n\n    /* blazorInclude */\n    /* contentChildren */\n    /* blazorTreatAsCollection */\n    /* blazorCollectionName: GridActionsBaseDirectiveCollection */\n    /**\n     * ActionButton as ContentChildren inside the Action Strip\n     *\n     * @hidden\n     * @internal\n     */\n    @ContentChildren(IgxActionStripActionsToken)\n    public actionButtons!: QueryList<IgxActionStripActionsToken>;\n\n    /**\n     * Gets/Sets the visibility of the Action Strip.\n     * Could be used to set if the Action Strip will be initially hidden.\n     *\n     * @example\n     * ```html\n     *  <igx-action-strip [hidden]=\"false\">\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public set hidden(value: boolean) {\n        this._hidden.set(value);\n    }\n\n    public get hidden(): boolean {\n        return this._hidden();\n    }\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: IActionStripResourceStrings) {\n        this._resourceStrings = value;\n        this._customResourceStrings = Object.assign({}, this._defaultResourceStrings, this._resourceStrings);\n    }\n\n    public get resourceStrings(): IActionStripResourceStrings {\n        return this._resourceStrings ? this._customResourceStrings : this._defaultResourceStrings;\n    }\n\n    /**\n     * Hide or not the Action Strip based on if it is a menu.\n     *\n     * @hidden\n     * @internal\n     */\n    public get hideOnRowLeave(): boolean {\n        return this.menu.items.length === 0 || this.menu.collapsed;\n    }\n\n    /**\n     * Reference to the menu\n     *\n     * @hidden\n     * @internal\n     */\n    @ViewChild('dropdown')\n    public menu!: IgxDropDownComponent;\n\n    /**\n     * Getter for menu overlay settings\n     *\n     * @hidden\n     * @internal\n     */\n    public menuOverlaySettings: OverlaySettings = { scrollStrategy: new CloseScrollStrategy() };\n\n    private _destroyRef = inject(DestroyRef);\n    /**\n     * `hidden` and `context` are held in signals so that the reads in the `display` host binding\n     * and in the action components' templates are tracked. Both are changed imperatively - from\n     * `show`/`hide`, and from the grid while it is rendering (e.g. `viewDetachHandler` hiding the\n     * strip as its row is detached) - and a plain field would leave those bindings stale, which\n     * surfaces as `NG0100` in dev mode and as an out-of-date strip in a zoneless app: a component's\n     * host binding is only re-evaluated when its parent view is refreshed, so marking this\n     * component for check is not enough.\n     */\n    private _hidden = signal(true);\n    private _context = signal<any>(undefined);\n    private _resourceStrings: IActionStripResourceStrings = null!;\n    private _customResourceStrings: IActionStripResourceStrings = null!;\n    private _defaultResourceStrings = getCurrentResourceStrings(ActionStripResourceStringsEN);\n    private _originalParent!: HTMLElement;\n\n    constructor() {\n        onResourceChangeHandle(this._destroyRef, () => {\n            this._defaultResourceStrings = getCurrentResourceStrings(ActionStripResourceStringsEN, false);\n            this._customResourceStrings = this._resourceStrings ? Object.assign({}, this._defaultResourceStrings, this._resourceStrings) : null!;\n        }, this);\n    }\n\n    /**\n     * Menu Items list.\n     *\n     * @hidden\n     * @internal\n     */\n    public get menuItems() {\n        const actions: any[] = [];\n        this.actionButtons.forEach(button => {\n            if (button.asMenuItems) {\n                const children = button.buttons;\n                if (children) {\n                    children.toArray().forEach(x => actions.push(x));\n                }\n            }\n        });\n        return [... this._menuItems.toArray(), ...actions];\n    }\n\n\n    /**\n     * Getter for the 'display' property of the current action strip\n     */\n    @HostBinding('style.display')\n    private get display(): string {\n        return this._hidden() ? 'none' : 'flex';\n    }\n\n    /**\n     * Host `attr.class` binding.\n     */\n    @HostBinding('class.igx-action-strip')\n    protected hostClass = 'igx-action-strip';\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public ngAfterContentInit() {\n        this.actionButtons.forEach(button => {\n            button.strip = this;\n        });\n        this.actionButtons.changes.subscribe(() => {\n            this.actionButtons.forEach(button => {\n                button.strip = this;\n            });\n        });\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public ngAfterViewInit() {\n        this.menu.selectionChanging.subscribe(($event) => {\n            const newSelection = ($event.newSelection as any).elementRef.nativeElement;\n            let allButtons: any[] = [];\n            this.actionButtons.forEach(actionButtons => {\n                if (actionButtons.asMenuItems) {\n                    allButtons = [...allButtons, ...actionButtons.buttons.toArray()];\n                }\n            });\n            const button = allButtons.find(x => newSelection.contains(x.container.nativeElement));\n            if (button) {\n                button.actionClick.emit();\n            }\n        });\n        this._originalParent = this._viewContainer.element.nativeElement?.parentElement;\n    }\n\n    /**\n     * Showing the Action Strip and appending it the specified context element.\n     *\n     * @param context\n     * @example\n     * ```typescript\n     * this.actionStrip.show(row);\n     * ```\n     */\n    public show(context?: any): void {\n        this.hidden = false;\n        if (!context) {\n            return;\n        }\n        // when shown for different context make sure the menu won't stay opened\n        if (this.context !== context) {\n            this.closeMenu();\n        }\n        this.context = context;\n        if (this.context && this.context.element) {\n            this.renderer.appendChild(context.element.nativeElement, this._viewContainer.element.nativeElement);\n        }\n        this.cdr.detectChanges();\n    }\n\n    /**\n     * Hiding the Action Strip and removing it from its current context element.\n     *\n     * @example\n     * ```typescript\n     * this.actionStrip.hide();\n     * ```\n     */\n    public hide(): void {\n        this.hidden = true;\n        this.closeMenu();\n        if (this._originalParent) {\n            // D.P. fix(elements) don't detach native DOM, instead move back. Might not matter for Angular, but Elements will destroy\n            this.renderer.appendChild(this._originalParent, this._viewContainer.element.nativeElement);\n        } else if (this.context && this.context.element) {\n            this.renderer.removeChild(this.context.element.nativeElement, this._viewContainer.element.nativeElement);\n        }\n    }\n\n    /** pin swapping w/ unpin resets the menuItems collection */\n    protected trackMenuItem = trackByIdentity;\n\n    /**\n     * Close the menu if opened\n     *\n     * @hidden\n     * @internal\n     */\n    private closeMenu(): void {\n        if (this.menu && !this.menu.collapsed) {\n            this.menu.close();\n        }\n    }\n}\n","<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","import { IgxActionStripComponent, IgxActionStripMenuItemDirective } from './action-strip.component';\n\nexport { IgxActionStripComponent, IgxActionStripMenuItemDirective } from './action-strip.component';\n\n/* Action-strip outside of grid directives collection for ease-of-use import in standalone components scenario */\nexport const IGX_ACTION_STRIP_DIRECTIVES = [\n    IgxActionStripComponent,\n    IgxActionStripMenuItemDirective\n] as const;\n","import { NgModule } from '@angular/core';\nimport { IGX_ACTION_STRIP_DIRECTIVES } from './public_api';\n\n/**\n * @hidden\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n    imports: [\n        ...IGX_ACTION_STRIP_DIRECTIVES\n    ],\n    exports: [\n        ...IGX_ACTION_STRIP_DIRECTIVES\n    ],\n})\nexport class IgxActionStripModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.IgxActionStripComponent","i1.IgxActionStripMenuItemDirective"],"mappings":"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"}

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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxAvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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.7", 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.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] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxAvatarModule, imports: [IgxAvatarComponent], exports: [IgxAvatarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxAvatarModule, imports: [IgxAvatarComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxAvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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.7", ngImport: i0, type: IgxBadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", 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.7", 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.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] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxBadgeModule, imports: [IgxBadgeComponent], exports: [IgxBadgeComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxBadgeModule, imports: [IgxBadgeComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxBadgeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxBadgeModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [IgxBadgeComponent],