igniteui-angular 22.1.0-rc.0 → 22.1.1

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, ViewContainerRef, Renderer2, ElementRef, ChangeDetectorRef, DestroyRef, booleanAttribute, HostBinding, ViewChild, Input, ContentChildren, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { inject, TemplateRef, Directive, ViewContainerRef, Renderer2, ElementRef, ChangeDetectorRef, DestroyRef, signal, booleanAttribute, HostBinding, ViewChild, Input, ContentChildren, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { CloseScrollStrategy, getCurrentResourceStrings, ActionStripResourceStringsEN, trackByIdentity, onResourceChangeHandle, IgxActionStripActionsToken, IgxActionStripToken } from 'igniteui-angular/core';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 import { IgxIconButtonDirective, IgxRippleDirective, IgxToggleActionDirective } from 'igniteui-angular/directives';
@@ -54,6 +54,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * </igx-action-strip>
  */
 class IgxActionStripComponent {
+    /* blazorSuppress */
+    /**
+     * Sets the context of an action strip.
+     * The context should be an instance of a @Component, that has element property.
+     * This element will be the placeholder of the action strip.
+     *
+     * @example
+     * ```html
+     * <igx-action-strip [context]="cell"></igx-action-strip>
+     * ```
+     */
+    set context(value) {
+        this._context.set(value);
+    }
+    get context() {
+        return this._context();
+    }
+    /**
+     * Gets/Sets the visibility of the Action Strip.
+     * Could be used to set if the Action Strip will be initially hidden.
+     *
+     * @example
+     * ```html
+     *  <igx-action-strip [hidden]="false">
+     * ```
+     */
+    set hidden(value) {
+        this._hidden.set(value);
+    }
+    get hidden() {
+        return this._hidden();
+    }
     /**
      * Gets/Sets the resource strings.
      *
@@ -92,16 +124,6 @@ class IgxActionStripComponent {
         this.el = inject(ElementRef);
         /* blazorSuppress */
         this.cdr = inject(ChangeDetectorRef);
-        /**
-         * Gets/Sets the visibility of the Action Strip.
-         * Could be used to set if the Action Strip will be initially hidden.
-         *
-         * @example
-         * ```html
-         *  <igx-action-strip [hidden]="false">
-         * ```
-         */
-        this.hidden = true;
         /**
          * Getter for menu overlay settings
          *
@@ -110,6 +132,19 @@ class IgxActionStripComponent {
          */
         this.menuOverlaySettings = { scrollStrategy: new CloseScrollStrategy() };
         this._destroyRef = inject(DestroyRef);
+        /**
+         * `hidden` and `context` are held in signals so that the reads in the `display` host binding
+         * and in the action components' templates are tracked. Both are changed imperatively - from
+         * `show`/`hide`, and from the grid while it is rendering (e.g. `viewDetachHandler` hiding the
+         * strip as its row is detached) - and a plain field would leave those bindings stale, which
+         * surfaces as `NG0100` in dev mode and as an out-of-date strip in a zoneless app: a component's
+         * host binding is only re-evaluated when its parent view is refreshed, so marking this
+         * component for check is not enough.
+         */
+        this._hidden = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_hidden" }] : /* istanbul ignore next */ []));
+        this._context = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_context" }] : /* istanbul ignore next */ []));
         this._resourceStrings = null;
         this._defaultResourceStrings = getCurrentResourceStrings(ActionStripResourceStringsEN);
         /**
@@ -144,7 +179,7 @@ class IgxActionStripComponent {
      * Getter for the 'display' property of the current action strip
      */
     get display() {
-        return this.hidden ? 'none' : 'flex';
+        return this._hidden() ? 'none' : 'flex';
     }
     /**
      * @hidden

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} 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 context: any;\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 hidden = true;\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 = Object.assign({}, this._resourceStrings, value);\n    }\n\n    public get resourceStrings(): IActionStripResourceStrings {\n        return this._resourceStrings || 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    private _resourceStrings: 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);\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 = Object.assign({}, this._resourceStrings, value);\n    }\n\n    public get resourceStrings(): IActionStripResourceStrings {\n        return this._resourceStrings || 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 _defaultResourceStrings = getCurrentResourceStrings(ActionStripResourceStringsEN);\n    private _originalParent!: HTMLElement;\n\n    constructor() {\n        onResourceChangeHandle(this._destroyRef, () => {\n            this._defaultResourceStrings = getCurrentResourceStrings(ActionStripResourceStringsEN, false);\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-chips.mjs

@@ -237,6 +237,16 @@ class IgxChipComponent {
          * ```
          */
         this.removable = false;
+        /**
+         * Sets/gets whether the chip is outlined.
+         * Default value is `false`.
+         *
+         * @example
+         * ```html
+         * <igx-chip outlined></igx-chip>
+         * ```
+         */
+        this.outlined = false;
         /**
          * Defines if the chip can be selected on click or through navigation,
          * By default it is set to false.
@@ -675,11 +685,11 @@ class IgxChipComponent {
         this.destroy$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxChipComponent, isStandalone: true, selector: "igx-chip", inputs: { variant: "variant", id: "id", tabIndex: "tabIndex", data: "data", draggable: ["draggable", "draggable", booleanAttribute], animateOnRelease: ["animateOnRelease", "animateOnRelease", booleanAttribute], hideBaseOnDrag: ["hideBaseOnDrag", "hideBaseOnDrag", booleanAttribute], removable: ["removable", "removable", booleanAttribute], removeIcon: "removeIcon", selectable: ["selectable", "selectable", booleanAttribute], selectIcon: "selectIcon", class: "class", disabled: ["disabled", "disabled", booleanAttribute], selected: ["selected", "selected", booleanAttribute], color: "color", resourceStrings: "resourceStrings" }, outputs: { selectedChange: "selectedChange", moveStart: "moveStart", moveEnd: "moveEnd", remove: "remove", chipClick: "chipClick", selectedChanging: "selectedChanging", selectedChanged: "selectedChanged", keyDown: "keyDown", dragEnter: "dragEnter", dragLeave: "dragLeave", dragOver: "dragOver", dragDrop: "dragDrop" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.tabIndex": "this.tabIndex", "class.igx-chip--disabled": "this.disabled", "attr.aria-selected": "this.selected", "class.igx-chip": "this.defaultClass", "class.igx-chip--primary": "this.isPrimary", "class.igx-chip--info": "this.isInfo", "class.igx-chip--success": "this.isSuccess", "class.igx-chip--warning": "this.isWarning", "class.igx-chip--danger": "this.isDanger" } }, viewQueries: [{ propertyName: "dragDirective", first: true, predicate: ["chipArea"], descendants: true, read: IgxDragDirective, static: true }, { propertyName: "chipArea", first: true, predicate: ["chipArea"], descendants: true, read: ElementRef, static: true }, { propertyName: "defaultRemoveIcon", first: true, predicate: ["defaultRemoveIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultSelectIcon", first: true, predicate: ["defaultSelectIcon"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div #chipArea class=\"igx-chip__item\"\n    data-no-typography\n    [igxDrag]=\"{chip: this}\"\n    [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n    ghostClass=\"igx-chip__ghost\"\n    [ghostClasses]=\"['igx-chip__ghost', 'igx-chip']\"\n    [ghostStyle]=\"ghostStyles\"\n    (dragStart)=\"onChipDragStart($event)\"\n    (ghostCreate)=\"onChipGhostCreate()\"\n    (ghostDestroy)=\"onChipGhostDestroy()\"\n    (dragEnd)=\"onChipDragEnd()\"\n    (transitioned)=\"onChipMoveEnd($event)\"\n    (dragClick)=\"onChipDragClicked($event)\"\n    igxDrop\n    (enter)=\"onChipDragEnterHandler($event)\"\n    (leave)=\"onChipDragLeaveHandler($event)\"\n    (over)=\"onChipOverHandler($event)\"\n    (dropped)=\"onChipDrop($event)\">\n\n    <div class=\"igx-chip__start\" #selectContainer>\n        @if (selected) {\n            <div [ngClass]=\"selectClass(selected)\">\n                <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n            </div>\n        }\n\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </div>\n\n    <div class=\"igx-chip__content\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"igx-chip__end\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n        @if (removable) {\n            <div class=\"igx-chip__remove\"\n                [attr.tabIndex]=\"tabIndex\"\n                (keydown)=\"onRemoveBtnKeyDown($event)\"\n                (pointerdown)=\"onRemoveMouseDown($event)\"\n                (mousedown)=\"onRemoveMouseDown($event)\"\n                (click)=\"onRemoveClick($event)\"\n                (touchmove)=\"onRemoveTouchMove()\"\n                (touchend)=\"onRemoveTouchEnd($event)\">\n                <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n    <igx-icon\n        [attr.aria-label]=\"resourceStrings.igx_chip_select\"\n        family=\"default\"\n        name=\"selected\"\n    ></igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n    <igx-icon\n        [attr.aria-label]=\"resourceStrings.igx_chip_remove\"\n        family=\"default\"\n        name=\"remove\"\n    ></igx-icon>\n</ng-template>\n", styles: ["@layer ig.base{.igx-chip__end,.igx-chip__start{display:flex;align-items:center;position:relative}.igx-chip__end:empty,.igx-chip__start:empty{display:none}.igx-chip{--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));--chip-size: var(--component-size);--affix-margin: calc(max(var(--is-large, 1) * max(.5rem, -1 * .5rem), var(--is-medium, 1) * max(.25rem, -1 * .25rem), var(--is-small, 1) * max(0rem, -1 * 0rem))*-1) ;position:relative;display:inline-flex;flex-shrink:0;min-width:-moz-max-content;min-width:max-content;touch-action:none;outline:none}.igx-chip:focus .igx-chip__item{outline-style:none;color:var(--focus-text-color);background:var(--focus-background);border-color:var(--focus-border-color)}.igx-chip:focus .igx-chip__item--selected{color:var(--focus-selected-text-color);background:var(--focus-selected-background);border-color:var(--focus-selected-border-color)}.igx-chip:hover .igx-chip__item{color:var(--hover-text-color);background:var(--hover-background);border-color:var(--hover-border-color)}.igx-chip:hover .igx-chip__item--selected{color:var(--hover-selected-text-color);background:var(--hover-selected-background);border-color:var(--hover-selected-border-color)}.igx-chip__item{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:grid;grid-auto-flow:column;grid-auto-columns:auto;align-items:center;justify-content:center;text-align:center;height:var(--size);padding-inline: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(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));color:var(--text-color);background:var(--background);border:.0625rem solid var(--border-color);border-radius:var(--border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:pointer;filter:opacity(1)}.igx-chip__item igx-avatar{--dimension: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));display:flex!important;align-items:center;justify-content:center;font-size:calc(var(--dimension)/2);max-height:100%;width:var(--dimension);max-width:var(--dimension);height:var(--dimension)}.igx-chip__item igx-icon{--component-size: var(--chip-size)}.igx-chip__item igx-circular-bar{--igx-circular-bar-diameter: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem))}.igx-chip__item igx-prefix,.igx-chip__item [igxPrefix],.igx-chip__item igx-suffix,.igx-chip__item [igxSuffix]{display:inline-flex;vertical-align:middle;max-width:32ch}.igx-chip__item igx-prefix>igx-icon,.igx-chip__item [igxPrefix]>igx-icon,.igx-chip__item igx-suffix>igx-icon,.igx-chip__item [igxSuffix]>igx-icon{display:block}.igx-chip__start{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__start>igx-avatar:first-child,.igx-chip__start>igx-circular-bar:first-child{margin-inline-start:var(--affix-margin)}.igx-chip__start [igxPrefix]:first-of-type igx-avatar,.igx-chip__start [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__start igx-prefix:first-of-type igx-avatar,.igx-chip__start igx-prefix:first-of-type igx-circular-bar{margin-inline-start:var(--affix-margin)}.igx-chip__end{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__end>igx-avatar:last-child,.igx-chip__end>igx-circular-bar:last-child{margin-inline-end:var(--affix-margin)}.igx-chip__end [igxPrefix]:first-of-type igx-avatar,.igx-chip__end [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__end igx-prefix:first-of-type igx-avatar,.igx-chip__end igx-prefix:first-of-type igx-circular-bar{margin-inline-end:var(--affix-margin)}.igx-chip__item--selected{color:var(--selected-text-color);background:var(--selected-background);border-color:var(--selected-border-color)}.igx-chip--primary .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500);border-color:var(--ig-primary-500)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-800-contrast);background:var(--ig-primary-800);border-color:var(--ig-primary-800)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-600-contrast);background:var(--ig-primary-600);border-color:var(--ig-primary-600)}.igx-chip--info .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-800-contrast);background:var(--ig-info-800);border-color:var(--ig-info-800)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-600-contrast);background:var(--ig-info-600);border-color:var(--ig-info-600)}.igx-chip--success .igx-chip__item{color:var(--ig-success-500-contrast);background:var(--ig-success-500);border-color:var(--ig-success-500)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-800-contrast);background:var(--ig-success-800);border-color:var(--ig-success-800)}.igx-chip--success:hover .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-600);border-color:var(--ig-success-600)}.igx-chip--warning .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500);border-color:var(--ig-warn-500)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-800-contrast);background:var(--ig-warn-800);border-color:var(--ig-warn-800)}.igx-chip--warning:hover .igx-chip__item{color:var(--ig-warn-600-contrast);background:var(--ig-warn-600);border-color:var(--ig-warn-600)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-500-contrast);background:var(--ig-error-500);border-color:var(--ig-error-500)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-800-contrast);background:var(--ig-error-800);border-color:var(--ig-error-800)}.igx-chip--danger:hover .igx-chip__item{color:var(--ig-error-600-contrast);background:var(--ig-error-600);border-color:var(--ig-error-600)}.igx-chip__content{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;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(.1875rem,-1 * .1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));max-width:32ch}.igx-chip__content:empty{display:none}.igx-chip__select{display:inline-flex;align-items:center;max-width:1.5rem;opacity:1;z-index:1;transition:max-width .12s cubic-bezier(.455,.03,.515,.955),opacity .12s cubic-bezier(.455,.03,.515,.955) .06s;transition-behavior:allow-discrete}@starting-style{.igx-chip__select{max-width:0;opacity:0}}.igx-chip__remove{display:inline-flex;color:var(--remove-icon-color, currentColor)}.igx-chip__remove:empty{display:none}.igx-chip__remove:focus igx-icon{color:var(--remove-icon-color-focus)}.igx-chip__ghost{position:absolute;box-shadow:var(--ghost-elevation);overflow:hidden;color:var(--focus-text-color);height:var(--size)!important;background:var(--ghost-background);z-index:10}.igx-chip__ghost:hover,.igx-chip__ghost:focus{background:var(--ghost-background)}.igx-chip--disabled{cursor:default;pointer-events:none}.igx-chip--disabled .igx-chip__end:has(.igx-chip__remove:only-child){display:none}.igx-chip--disabled .igx-chip__item{color:var(--disabled-text-color);background:var(--disabled-background);border-color:var(--disabled-border-color)}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .25rem var(--focus-outline-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .25rem var(--focus-selected-outline-color)}.igx-chip--primary .igx-chip__item{color:var(--ig-primary-600-contrast)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500);border-color:var(--ig-primary-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-primary-500) h s l/.38)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-info-500) h s l/.38)}.igx-chip--success .igx-chip__item{color:var(--ig-success-600-contrast)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-500);border-color:var(--ig-success-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-success-500) h s l/.38)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500);border-color:var(--ig-warn-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-warn-500) h s l/.38)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-600-contrast)}.igx-chip--danger:focus .igx-chip__item{background:var(--ig-error-500);border-color:var(--ig-error-500);color:var(--ig-error-600-contrast);box-shadow:0 0 0 .25rem hsl(from var(--ig-error-500) h s l/.38)}.igx-chip--disabled .igx-chip__item{color:var(--disabled-text-color)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-chip__item{--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(.875rem, -1 * .875rem));--affix-margin: calc(max(var(--is-large, 1) * max(.25rem, -1 * .25rem), var(--is-medium, 1) * max(.1875rem, -1 * .1875rem), var(--is-small, 1) * max(.0625rem, -1 * .0625rem))*-1) ;padding-inline:max(var(--is-large, 1) * max(.4375rem,-1 * .4375rem),var(--is-medium, 1) * max(.3125rem,-1 * .3125rem),var(--is-small, 1) * max(.1875rem,-1 * .1875rem))}.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--focus-outline-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .1875rem var(--focus-selected-outline-color)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-500);border-color:var(--ig-primary-500);box-shadow:0 0 0 .1875rem hsl(from var(--ig-primary-400) h s l/.5)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-400);border-color:var(--ig-primary-400)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500);box-shadow:0 0 0 .1875rem var(--ig-info-100)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-400-contrast);background:var(--ig-info-400);border-color:var(--ig-info-400)}.igx-chip--success .igx-chip__item{color:var(--ig-success-900-contrast);background:var(--ig-success-800);border-color:var(--ig-success-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-200)}.igx-chip--success:hover .igx-chip__item{background:var(--ig-success-700);border-color:var(--ig-success-700)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900)}.igx-chip--warning:focus .igx-chip__item{background:var(--ig-warn-500);border-color:var(--ig-warn-500);box-shadow:0 0 0 .1875rem var(--ig-warn-100)}.igx-chip--warning:hover .igx-chip__item{background:var(--ig-warn-400);border-color:var(--ig-warn-400)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600);border-color:var(--ig-error-600)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-900-contrast);box-shadow:0 0 0 .1875rem var(--ig-error-100)}.igx-chip--danger:hover .igx-chip__item{background:var(--ig-error-500);border-color:var(--ig-error-500)}.igx-chip--disabled .igx-chip__item--selected,.igx-chip--disabled.igx-chip--primary .igx-chip__item{background:hsl(from var(--ig-primary-400) h s l/.5);color:hsl(from var(--ig-primary-900-contrast) h s l/.4);border-color:#0000}.igx-chip--disabled.igx-chip--info .igx-chip__item{color:var(--ig-info-900-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500);opacity:.4}.igx-chip--disabled.igx-chip--success .igx-chip__item{opacity:.4}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900);background:var(--ig-warn-500);border-color:var(--ig-warn-500);opacity:.4}.igx-chip--disabled.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600);border-color:var(--ig-error-600);opacity:.4}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-chip__item{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-chip--info:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-info-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-900)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}.igx-chip--warning:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-warn-900)}.igx-chip--danger:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-error-900)}.igx-chip--disabled .igx-chip__item--selected,.igx-chip--disabled.igx-chip--primary .igx-chip__item{color:hsl(from var(--ig-primary-900-contrast) h s l/.2)}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}}}\n"], dependencies: [{ kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostClasses", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxChipComponent, isStandalone: true, selector: "igx-chip", inputs: { variant: "variant", id: "id", tabIndex: "tabIndex", data: "data", draggable: ["draggable", "draggable", booleanAttribute], animateOnRelease: ["animateOnRelease", "animateOnRelease", booleanAttribute], hideBaseOnDrag: ["hideBaseOnDrag", "hideBaseOnDrag", booleanAttribute], removable: ["removable", "removable", booleanAttribute], removeIcon: "removeIcon", outlined: ["outlined", "outlined", booleanAttribute], selectable: ["selectable", "selectable", booleanAttribute], selectIcon: "selectIcon", class: "class", disabled: ["disabled", "disabled", booleanAttribute], selected: ["selected", "selected", booleanAttribute], color: "color", resourceStrings: "resourceStrings" }, outputs: { selectedChange: "selectedChange", moveStart: "moveStart", moveEnd: "moveEnd", remove: "remove", chipClick: "chipClick", selectedChanging: "selectedChanging", selectedChanged: "selectedChanged", keyDown: "keyDown", dragEnter: "dragEnter", dragLeave: "dragLeave", dragOver: "dragOver", dragDrop: "dragDrop" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.tabIndex": "this.tabIndex", "class.igx-chip--outlined": "this.outlined", "class.igx-chip--disabled": "this.disabled", "attr.aria-selected": "this.selected", "class.igx-chip": "this.defaultClass", "class.igx-chip--primary": "this.isPrimary", "class.igx-chip--info": "this.isInfo", "class.igx-chip--success": "this.isSuccess", "class.igx-chip--warning": "this.isWarning", "class.igx-chip--danger": "this.isDanger" } }, viewQueries: [{ propertyName: "dragDirective", first: true, predicate: ["chipArea"], descendants: true, read: IgxDragDirective, static: true }, { propertyName: "chipArea", first: true, predicate: ["chipArea"], descendants: true, read: ElementRef, static: true }, { propertyName: "defaultRemoveIcon", first: true, predicate: ["defaultRemoveIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultSelectIcon", first: true, predicate: ["defaultSelectIcon"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div #chipArea class=\"igx-chip__item\"\n    data-no-typography\n    [igxDrag]=\"{chip: this}\"\n    [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n    ghostClass=\"igx-chip__ghost\"\n    [ghostClasses]=\"['igx-chip__ghost', 'igx-chip']\"\n    [ghostStyle]=\"ghostStyles\"\n    (dragStart)=\"onChipDragStart($event)\"\n    (ghostCreate)=\"onChipGhostCreate()\"\n    (ghostDestroy)=\"onChipGhostDestroy()\"\n    (dragEnd)=\"onChipDragEnd()\"\n    (transitioned)=\"onChipMoveEnd($event)\"\n    (dragClick)=\"onChipDragClicked($event)\"\n    igxDrop\n    (enter)=\"onChipDragEnterHandler($event)\"\n    (leave)=\"onChipDragLeaveHandler($event)\"\n    (over)=\"onChipOverHandler($event)\"\n    (dropped)=\"onChipDrop($event)\">\n\n    <div class=\"igx-chip__start\" #selectContainer>\n        @if (selected) {\n            <div [ngClass]=\"selectClass(selected)\">\n                <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n            </div>\n        }\n\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </div>\n\n    <div class=\"igx-chip__content\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"igx-chip__end\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n        @if (removable) {\n            <div class=\"igx-chip__remove\"\n                [attr.tabIndex]=\"tabIndex\"\n                (keydown)=\"onRemoveBtnKeyDown($event)\"\n                (pointerdown)=\"onRemoveMouseDown($event)\"\n                (mousedown)=\"onRemoveMouseDown($event)\"\n                (click)=\"onRemoveClick($event)\"\n                (touchmove)=\"onRemoveTouchMove()\"\n                (touchend)=\"onRemoveTouchEnd($event)\">\n                <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n    <igx-icon\n        [attr.aria-label]=\"resourceStrings.igx_chip_select\"\n        family=\"default\"\n        name=\"selected\"\n    ></igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n    <igx-icon\n        [attr.aria-label]=\"resourceStrings.igx_chip_remove\"\n        family=\"default\"\n        name=\"remove\"\n    ></igx-icon>\n</ng-template>\n", styles: ["@layer ig.base{.igx-chip__end,.igx-chip__start{display:flex;align-items:center;position:relative}.igx-chip__end:empty,.igx-chip__start:empty{display:none}.igx-chip{--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));--chip-size: var(--component-size);--affix-margin: calc(max(var(--is-large, 1) * max(.5rem, -1 * .5rem), var(--is-medium, 1) * max(.25rem, -1 * .25rem), var(--is-small, 1) * max(0rem, -1 * 0rem))*-1) ;position:relative;display:inline-flex;flex-shrink:0;min-width:-moz-max-content;min-width:max-content;touch-action:none;outline:none}.igx-chip:focus .igx-chip__item{outline-style:none;color:var(--focus-text-color);background:var(--focus-background)}.igx-chip:focus .igx-chip__item--selected{color:var(--focus-selected-text-color);background:var(--focus-selected-background)}.igx-chip:hover .igx-chip__item{color:var(--hover-text-color);background:var(--hover-background)}.igx-chip:hover .igx-chip__item--selected{color:var(--hover-selected-text-color);background:var(--hover-selected-background)}.igx-chip__item{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:grid;grid-auto-flow:column;grid-auto-columns:auto;align-items:center;justify-content:center;text-align:center;height:var(--size);padding-inline: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(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));color:var(--text-color);background:var(--background);border-radius:var(--border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:pointer;filter:opacity(1)}.igx-chip__item igx-avatar{--dimension: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));display:flex!important;align-items:center;justify-content:center;font-size:calc(var(--dimension)/2);max-height:100%;width:var(--dimension);max-width:var(--dimension);height:var(--dimension)}.igx-chip__item igx-icon{--component-size: var(--chip-size)}.igx-chip__item igx-circular-bar{--igx-circular-bar-diameter: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem))}.igx-chip__item igx-prefix,.igx-chip__item [igxPrefix],.igx-chip__item igx-suffix,.igx-chip__item [igxSuffix]{display:inline-flex;vertical-align:middle;max-width:32ch}.igx-chip__item igx-prefix>igx-icon,.igx-chip__item [igxPrefix]>igx-icon,.igx-chip__item igx-suffix>igx-icon,.igx-chip__item [igxSuffix]>igx-icon{display:block}.igx-chip__start{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__start>igx-avatar:first-child,.igx-chip__start>igx-circular-bar:first-child{margin-inline-start:var(--affix-margin)}.igx-chip__start [igxPrefix]:first-of-type igx-avatar,.igx-chip__start [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__start igx-prefix:first-of-type igx-avatar,.igx-chip__start igx-prefix:first-of-type igx-circular-bar{margin-inline-start:var(--affix-margin)}.igx-chip__end{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__end>igx-avatar:last-child,.igx-chip__end>igx-circular-bar:last-child{margin-inline-end:var(--affix-margin)}.igx-chip__end [igxPrefix]:first-of-type igx-avatar,.igx-chip__end [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__end igx-prefix:first-of-type igx-avatar,.igx-chip__end igx-prefix:first-of-type igx-circular-bar{margin-inline-end:var(--affix-margin)}.igx-chip__item--selected{color:var(--selected-text-color);background:var(--selected-background)}.igx-chip--primary .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-800-contrast);background:var(--ig-primary-800)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-600-contrast);background:var(--ig-primary-600)}.igx-chip--info .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-800-contrast);background:var(--ig-info-800)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-600-contrast);background:var(--ig-info-600)}.igx-chip--success .igx-chip__item{color:var(--ig-success-500-contrast);background:var(--ig-success-500)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-800-contrast);background:var(--ig-success-800)}.igx-chip--success:hover .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-600)}.igx-chip--warning .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-800-contrast);background:var(--ig-warn-800)}.igx-chip--warning:hover .igx-chip__item{color:var(--ig-warn-600-contrast);background:var(--ig-warn-600)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-500-contrast);background:var(--ig-error-500)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-800-contrast);background:var(--ig-error-800)}.igx-chip--danger:hover .igx-chip__item{color:var(--ig-error-600-contrast);background:var(--ig-error-600)}.igx-chip--disabled.igx-chip--primary .igx-chip__item,.igx-chip--disabled.igx-chip--info .igx-chip__item,.igx-chip--disabled.igx-chip--success .igx-chip__item,.igx-chip--disabled.igx-chip--warning .igx-chip__item,.igx-chip--disabled.igx-chip--danger .igx-chip__item{color:var(--ig-gray-500);background:var(--ig-gray-200)}.igx-chip--outlined .igx-chip__item{background:var(--outlined-background);color:var(--outlined-text-color);border:.0625rem solid var(--border-color)}.igx-chip--outlined .igx-chip__item--selected{background:var(--selected-outlined-background);color:var(--selected-outlined-text-color);border:.0625rem solid var(--selected-border-color)}.igx-chip--outlined:focus .igx-chip__item{color:var(--focus-outlined-text-color);background:var(--focus-outlined-background);border:.0625rem solid var(--focus-border-color)}.igx-chip--outlined:focus .igx-chip__item--selected{color:var(--focus-selected-outlined-text-color);background:var(--focus-selected-outlined-background);border:.0625rem solid var(--focus-selected-border-color)}.igx-chip--outlined:hover .igx-chip__item{color:var(--hover-outlined-text-color);background:var(--hover-outlined-background);border:.0625rem solid var(--hover-border-color)}.igx-chip--outlined:hover .igx-chip__item--selected{color:var(--hover-selected-outlined-text-color);background:var(--hover-selected-outlined-background);border:.0625rem solid var(--hover-selected-border-color)}.igx-chip--primary.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-primary-100-contrast);border-color:var(--ig-primary-800)}.igx-chip--primary.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-primary-800) h s l/.3)}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-600) h s l/.16)}.igx-chip--info.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-info-100-contrast);border-color:var(--ig-info-800)}.igx-chip--info.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-info-800) h s l/.3)}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-600) h s l/.16)}.igx-chip--success.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-success-100-contrast);border-color:var(--ig-success-800)}.igx-chip--success.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-success-800) h s l/.3)}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-600) h s l/.16)}.igx-chip--warning.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-warn-900-contrast);border-color:var(--ig-warn-800)}.igx-chip--warning.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-warn-800) h s l/.3)}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-600) h s l/.16)}.igx-chip--danger.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-error-100-contrast);border-color:var(--ig-error-800)}.igx-chip--danger.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-error-800) h s l/.3)}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-600) h s l/.16)}.igx-chip__content{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;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(.1875rem,-1 * .1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));max-width:32ch}.igx-chip__content:empty{display:none}.igx-chip__select{display:inline-flex;align-items:center;max-width:1.5rem;opacity:1;z-index:1;transition:max-width .12s cubic-bezier(.455,.03,.515,.955),opacity .12s cubic-bezier(.455,.03,.515,.955) .06s;transition-behavior:allow-discrete}@starting-style{.igx-chip__select{max-width:0;opacity:0}}.igx-chip__remove{display:inline-flex;color:var(--remove-icon-color, currentColor)}.igx-chip__remove:empty{display:none}.igx-chip__remove:focus igx-icon{color:var(--remove-icon-color-focus)}.igx-chip__ghost{position:absolute;box-shadow:var(--ghost-elevation);overflow:hidden;color:var(--focus-text-color);height:var(--size)!important;background:var(--ghost-background);z-index:10}.igx-chip__ghost:hover,.igx-chip__ghost:focus{background:var(--ghost-background)}.igx-chip--disabled{cursor:default;pointer-events:none}.igx-chip--disabled .igx-chip__end:has(.igx-chip__remove:only-child){display:none}.igx-chip--disabled .igx-chip__item{color:var(--disabled-text-color);background:var(--disabled-background)}.igx-chip--disabled .igx-chip__item--selected{color:var(--disabled-selected-text-color);background:var(--disabled-selected-background)}.igx-chip--disabled.igx-chip--outlined .igx-chip__item{background:var(--disabled-outlined-background);color:var(--disabled-outlined-text-color);border:.0625rem solid var(--disabled-border-color)}.igx-chip--disabled.igx-chip--outlined .igx-chip__item--selected{background:var(--disabled-selected-outlined-background);color:var(--disabled-selected-outlined-text-color);border:.0625rem solid var(--disabled-selected-border-color)}.igx-chip--disabled.igx-chip--outlined.igx-chip--primary .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--info .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--success .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--warning .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--danger .igx-chip__item{background:hsl(from var(--ig-gray-200) h s l/.3);color:var(--ig-gray-500);border-color:hsl(from var(--ig-gray-500) h s l/.3)}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .25rem var(--focus-shadow-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .25rem var(--focus-selected-shadow-color)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-primary-500) h s l/.38)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-info-500) h s l/.38)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-success-500) h s l/.38)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-warn-500) h s l/.38)}.igx-chip--danger:focus .igx-chip__item{background:var(--ig-error-500);color:var(--ig-error-600-contrast);box-shadow:0 0 0 .25rem hsl(from var(--ig-error-500) h s l/.38)}.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-primary-600);color:var(--ig-primary-100-contrast)}.igx-chip--primary.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-600) h s l/.3)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-info-900);color:var(--ig-info-900-contrast)}.igx-chip--info.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-600) h s l/.3)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-success-600);color:var(--ig-success-100-contrast)}.igx-chip--success.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-600) h s l/.3)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-warn-900)}.igx-chip--warning.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-600) h s l/.3)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-error-600);color:var(--ig-error-100-contrast)}.igx-chip--danger.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-600) h s l/.3)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-chip__item{--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(.875rem, -1 * .875rem));--affix-margin: calc(max(var(--is-large, 1) * max(.25rem, -1 * .25rem), var(--is-medium, 1) * max(.1875rem, -1 * .1875rem), var(--is-small, 1) * max(.0625rem, -1 * .0625rem))*-1) ;padding-inline:max(var(--is-large, 1) * max(.4375rem,-1 * .4375rem),var(--is-medium, 1) * max(.3125rem,-1 * .3125rem),var(--is-small, 1) * max(.1875rem,-1 * .1875rem))}.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--focus-shadow-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .1875rem var(--focus-selected-shadow-color)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-500);box-shadow:0 0 0 .1875rem hsl(from var(--ig-primary-400) h s l/.5)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-400)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);box-shadow:0 0 0 .1875rem var(--ig-info-100)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-400-contrast);background:var(--ig-info-400)}.igx-chip--success .igx-chip__item{color:var(--ig-success-900-contrast);background:var(--ig-success-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-200)}.igx-chip--success:hover .igx-chip__item{background:var(--ig-success-700)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900)}.igx-chip--warning:focus .igx-chip__item{background:var(--ig-warn-500);box-shadow:0 0 0 .1875rem var(--ig-warn-100)}.igx-chip--warning:hover .igx-chip__item{background:var(--ig-warn-400)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-900-contrast);box-shadow:0 0 0 .1875rem var(--ig-error-100)}.igx-chip--danger:hover .igx-chip__item{background:var(--ig-error-500)}.igx-chip--disabled.igx-chip--primary .igx-chip__item{background:hsl(from var(--ig-primary-400) h s l/.5);color:hsl(from var(--ig-primary-900-contrast) h s l/.4)}.igx-chip--disabled.igx-chip--info .igx-chip__item{color:var(--ig-info-900-contrast);background:var(--ig-info-500);opacity:.4}.igx-chip--disabled.igx-chip--success .igx-chip__item{opacity:.4}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900);background:var(--ig-warn-500);opacity:.4}.igx-chip--disabled.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600);opacity:.4}.igx-chip--primary.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-primary-400)}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-400) h s l/.3)}.igx-chip--info.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-info-500)}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-400) h s l/.3)}.igx-chip--success.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-success-700)}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-700) h s l/.3)}.igx-chip--warning.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-warn-600)}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-400) h s l/.3)}.igx-chip--danger.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-error-500)}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-500) h s l/.3)}.igx-chip--disabled.igx-chip--outlined .igx-chip__item--selected,.igx-chip--disabled.igx-chip--outlined.igx-chip--primary .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--info .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--success .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--warning .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--danger .igx-chip__item{opacity:.4}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-chip__item{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-primary-600)}.igx-chip--primary.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-primary-800) h s l/.3)}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-600) h s l/.16)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-info-600);color:var(--ig-info-100-contrast)}.igx-chip--info.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-info-800) h s l/.3)}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-600) h s l/.16)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-success-600)}.igx-chip--success.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-success-800) h s l/.3)}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-600) h s l/.16)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-warn-600);color:var(--ig-warn-100-contrast)}.igx-chip--warning.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-warn-800) h s l/.3)}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-600) h s l/.16)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-error-600)}.igx-chip--danger.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-error-800) h s l/.3)}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-600) h s l/.16)}}}@layer ig.material{@container style(--ig-theme: material) and style(--ig-theme-variant: dark){.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-primary-900-contrast);border-color:var(--ig-primary-200)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-info-500-contrast);border-color:var(--ig-info-200)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-success-900-contrast);border-color:var(--ig-success-300)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-gray-100-contrast);border-color:var(--ig-warn-300)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-error-900-contrast);border-color:var(--ig-error-300)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap) and style(--ig-theme-variant: dark){.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-primary-600-contrast);border-color:var(--ig-primary-300)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-gray-100-contrast);border-color:var(--ig-info-600)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-success-600-contrast);border-color:var(--ig-success-200)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-gray-100-contrast);border-color:var(--ig-warn-500)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-error-600-contrast);border-color:var(--ig-error-400)}}}@layer ig.fluent{@container style(--ig-theme: fluent) and style(--ig-theme-variant: dark){.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-primary-600-contrast);border-color:var(--ig-primary-200)}.igx-chip--primary.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-primary-800) h s l/.5)}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-600) h s l/.2)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-info-500-contrast);border-color:var(--ig-info-200)}.igx-chip--info.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-info-800) h s l/.5)}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-600) h s l/.2)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-success-600-contrast);border-color:var(--ig-success-100)}.igx-chip--success.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-success-800) h s l/.5)}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-600) h s l/.2)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-warn-500-contrast);border-color:var(--ig-warn-200)}.igx-chip--warning.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-warn-800) h s l/.5)}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-600) h s l/.2)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-error-600-contrast);border-color:var(--ig-error-50)}.igx-chip--danger.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-error-800) h s l/.5)}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-600) h s l/.2)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-chip--info:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-info-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-900)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}.igx-chip--warning:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-warn-900)}.igx-chip--danger:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-error-900)}.igx-chip--disabled.igx-chip--primary .igx-chip__item{color:hsl(from var(--ig-primary-900-contrast) h s l/.2)}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}.igx-chip--primary.igx-chip--outlined .igx-chip__item{color:var(--ig-primary-900-contrast)}.igx-chip--info.igx-chip--outlined .igx-chip__item{color:var(--ig-info-900-contrast);border-color:var(--ig-info-300)}.igx-chip--success.igx-chip--outlined .igx-chip__item{color:var(--ig-success-900-contrast);border-color:var(--ig-success-500)}.igx-chip--warning.igx-chip--outlined .igx-chip__item{color:var(--ig-warn-900-contrast);border-color:var(--ig-warn-300)}.igx-chip--danger.igx-chip--outlined .igx-chip__item{color:var(--ig-error-900-contrast);border-color:var(--ig-error-400)}.igx-chip--disabled.igx-chip--outlined.igx-chip--primary .igx-chip__item{color:var(--ig-gray-100-contrast)}.igx-chip--disabled.igx-chip--outlined.igx-chip--info .igx-chip__item{border-color:var(--ig-info-300);color:var(--ig-gray-100-contrast)}.igx-chip--disabled.igx-chip--outlined.igx-chip--success .igx-chip__item{border-color:var(--ig-success-500);color:var(--ig-gray-100-contrast)}.igx-chip--disabled.igx-chip--outlined.igx-chip--warning .igx-chip__item{border-color:var(--ig-warn-300);color:var(--ig-gray-100-contrast)}.igx-chip--disabled.igx-chip--outlined.igx-chip--danger .igx-chip__item{border-color:var(--ig-error-400);color:var(--ig-gray-100-contrast)}}}\n"], dependencies: [{ kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostClasses", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-chip', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDropDirective, IgxDragDirective, NgClass, NgTemplateOutlet, IgxIconComponent], template: "<div #chipArea class=\"igx-chip__item\"\n    data-no-typography\n    [igxDrag]=\"{chip: this}\"\n    [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n    ghostClass=\"igx-chip__ghost\"\n    [ghostClasses]=\"['igx-chip__ghost', 'igx-chip']\"\n    [ghostStyle]=\"ghostStyles\"\n    (dragStart)=\"onChipDragStart($event)\"\n    (ghostCreate)=\"onChipGhostCreate()\"\n    (ghostDestroy)=\"onChipGhostDestroy()\"\n    (dragEnd)=\"onChipDragEnd()\"\n    (transitioned)=\"onChipMoveEnd($event)\"\n    (dragClick)=\"onChipDragClicked($event)\"\n    igxDrop\n    (enter)=\"onChipDragEnterHandler($event)\"\n    (leave)=\"onChipDragLeaveHandler($event)\"\n    (over)=\"onChipOverHandler($event)\"\n    (dropped)=\"onChipDrop($event)\">\n\n    <div class=\"igx-chip__start\" #selectContainer>\n        @if (selected) {\n            <div [ngClass]=\"selectClass(selected)\">\n                <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n            </div>\n        }\n\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </div>\n\n    <div class=\"igx-chip__content\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"igx-chip__end\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n        @if (removable) {\n            <div class=\"igx-chip__remove\"\n                [attr.tabIndex]=\"tabIndex\"\n                (keydown)=\"onRemoveBtnKeyDown($event)\"\n                (pointerdown)=\"onRemoveMouseDown($event)\"\n                (mousedown)=\"onRemoveMouseDown($event)\"\n                (click)=\"onRemoveClick($event)\"\n                (touchmove)=\"onRemoveTouchMove()\"\n                (touchend)=\"onRemoveTouchEnd($event)\">\n                <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n    <igx-icon\n        [attr.aria-label]=\"resourceStrings.igx_chip_select\"\n        family=\"default\"\n        name=\"selected\"\n    ></igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n    <igx-icon\n        [attr.aria-label]=\"resourceStrings.igx_chip_remove\"\n        family=\"default\"\n        name=\"remove\"\n    ></igx-icon>\n</ng-template>\n", styles: ["@layer ig.base{.igx-chip__end,.igx-chip__start{display:flex;align-items:center;position:relative}.igx-chip__end:empty,.igx-chip__start:empty{display:none}.igx-chip{--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));--chip-size: var(--component-size);--affix-margin: calc(max(var(--is-large, 1) * max(.5rem, -1 * .5rem), var(--is-medium, 1) * max(.25rem, -1 * .25rem), var(--is-small, 1) * max(0rem, -1 * 0rem))*-1) ;position:relative;display:inline-flex;flex-shrink:0;min-width:-moz-max-content;min-width:max-content;touch-action:none;outline:none}.igx-chip:focus .igx-chip__item{outline-style:none;color:var(--focus-text-color);background:var(--focus-background);border-color:var(--focus-border-color)}.igx-chip:focus .igx-chip__item--selected{color:var(--focus-selected-text-color);background:var(--focus-selected-background);border-color:var(--focus-selected-border-color)}.igx-chip:hover .igx-chip__item{color:var(--hover-text-color);background:var(--hover-background);border-color:var(--hover-border-color)}.igx-chip:hover .igx-chip__item--selected{color:var(--hover-selected-text-color);background:var(--hover-selected-background);border-color:var(--hover-selected-border-color)}.igx-chip__item{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:grid;grid-auto-flow:column;grid-auto-columns:auto;align-items:center;justify-content:center;text-align:center;height:var(--size);padding-inline: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(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));color:var(--text-color);background:var(--background);border:.0625rem solid var(--border-color);border-radius:var(--border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:pointer;filter:opacity(1)}.igx-chip__item igx-avatar{--dimension: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));display:flex!important;align-items:center;justify-content:center;font-size:calc(var(--dimension)/2);max-height:100%;width:var(--dimension);max-width:var(--dimension);height:var(--dimension)}.igx-chip__item igx-icon{--component-size: var(--chip-size)}.igx-chip__item igx-circular-bar{--igx-circular-bar-diameter: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem))}.igx-chip__item igx-prefix,.igx-chip__item [igxPrefix],.igx-chip__item igx-suffix,.igx-chip__item [igxSuffix]{display:inline-flex;vertical-align:middle;max-width:32ch}.igx-chip__item igx-prefix>igx-icon,.igx-chip__item [igxPrefix]>igx-icon,.igx-chip__item igx-suffix>igx-icon,.igx-chip__item [igxSuffix]>igx-icon{display:block}.igx-chip__start{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__start>igx-avatar:first-child,.igx-chip__start>igx-circular-bar:first-child{margin-inline-start:var(--affix-margin)}.igx-chip__start [igxPrefix]:first-of-type igx-avatar,.igx-chip__start [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__start igx-prefix:first-of-type igx-avatar,.igx-chip__start igx-prefix:first-of-type igx-circular-bar{margin-inline-start:var(--affix-margin)}.igx-chip__end{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__end>igx-avatar:last-child,.igx-chip__end>igx-circular-bar:last-child{margin-inline-end:var(--affix-margin)}.igx-chip__end [igxPrefix]:first-of-type igx-avatar,.igx-chip__end [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__end igx-prefix:first-of-type igx-avatar,.igx-chip__end igx-prefix:first-of-type igx-circular-bar{margin-inline-end:var(--affix-margin)}.igx-chip__item--selected{color:var(--selected-text-color);background:var(--selected-background);border-color:var(--selected-border-color)}.igx-chip--primary .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500);border-color:var(--ig-primary-500)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-800-contrast);background:var(--ig-primary-800);border-color:var(--ig-primary-800)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-600-contrast);background:var(--ig-primary-600);border-color:var(--ig-primary-600)}.igx-chip--info .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-800-contrast);background:var(--ig-info-800);border-color:var(--ig-info-800)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-600-contrast);background:var(--ig-info-600);border-color:var(--ig-info-600)}.igx-chip--success .igx-chip__item{color:var(--ig-success-500-contrast);background:var(--ig-success-500);border-color:var(--ig-success-500)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-800-contrast);background:var(--ig-success-800);border-color:var(--ig-success-800)}.igx-chip--success:hover .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-600);border-color:var(--ig-success-600)}.igx-chip--warning .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500);border-color:var(--ig-warn-500)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-800-contrast);background:var(--ig-warn-800);border-color:var(--ig-warn-800)}.igx-chip--warning:hover .igx-chip__item{color:var(--ig-warn-600-contrast);background:var(--ig-warn-600);border-color:var(--ig-warn-600)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-500-contrast);background:var(--ig-error-500);border-color:var(--ig-error-500)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-800-contrast);background:var(--ig-error-800);border-color:var(--ig-error-800)}.igx-chip--danger:hover .igx-chip__item{color:var(--ig-error-600-contrast);background:var(--ig-error-600);border-color:var(--ig-error-600)}.igx-chip__content{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;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(.1875rem,-1 * .1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));max-width:32ch}.igx-chip__content:empty{display:none}.igx-chip__select{display:inline-flex;align-items:center;max-width:1.5rem;opacity:1;z-index:1;transition:max-width .12s cubic-bezier(.455,.03,.515,.955),opacity .12s cubic-bezier(.455,.03,.515,.955) .06s;transition-behavior:allow-discrete}@starting-style{.igx-chip__select{max-width:0;opacity:0}}.igx-chip__remove{display:inline-flex;color:var(--remove-icon-color, currentColor)}.igx-chip__remove:empty{display:none}.igx-chip__remove:focus igx-icon{color:var(--remove-icon-color-focus)}.igx-chip__ghost{position:absolute;box-shadow:var(--ghost-elevation);overflow:hidden;color:var(--focus-text-color);height:var(--size)!important;background:var(--ghost-background);z-index:10}.igx-chip__ghost:hover,.igx-chip__ghost:focus{background:var(--ghost-background)}.igx-chip--disabled{cursor:default;pointer-events:none}.igx-chip--disabled .igx-chip__end:has(.igx-chip__remove:only-child){display:none}.igx-chip--disabled .igx-chip__item{color:var(--disabled-text-color);background:var(--disabled-background);border-color:var(--disabled-border-color)}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .25rem var(--focus-outline-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .25rem var(--focus-selected-outline-color)}.igx-chip--primary .igx-chip__item{color:var(--ig-primary-600-contrast)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500);border-color:var(--ig-primary-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-primary-500) h s l/.38)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-info-500) h s l/.38)}.igx-chip--success .igx-chip__item{color:var(--ig-success-600-contrast)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-500);border-color:var(--ig-success-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-success-500) h s l/.38)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500);border-color:var(--ig-warn-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-warn-500) h s l/.38)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-600-contrast)}.igx-chip--danger:focus .igx-chip__item{background:var(--ig-error-500);border-color:var(--ig-error-500);color:var(--ig-error-600-contrast);box-shadow:0 0 0 .25rem hsl(from var(--ig-error-500) h s l/.38)}.igx-chip--disabled .igx-chip__item{color:var(--disabled-text-color)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-chip__item{--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(.875rem, -1 * .875rem));--affix-margin: calc(max(var(--is-large, 1) * max(.25rem, -1 * .25rem), var(--is-medium, 1) * max(.1875rem, -1 * .1875rem), var(--is-small, 1) * max(.0625rem, -1 * .0625rem))*-1) ;padding-inline:max(var(--is-large, 1) * max(.4375rem,-1 * .4375rem),var(--is-medium, 1) * max(.3125rem,-1 * .3125rem),var(--is-small, 1) * max(.1875rem,-1 * .1875rem))}.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--focus-outline-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .1875rem var(--focus-selected-outline-color)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-500);border-color:var(--ig-primary-500);box-shadow:0 0 0 .1875rem hsl(from var(--ig-primary-400) h s l/.5)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-400);border-color:var(--ig-primary-400)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500);box-shadow:0 0 0 .1875rem var(--ig-info-100)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-400-contrast);background:var(--ig-info-400);border-color:var(--ig-info-400)}.igx-chip--success .igx-chip__item{color:var(--ig-success-900-contrast);background:var(--ig-success-800);border-color:var(--ig-success-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-200)}.igx-chip--success:hover .igx-chip__item{background:var(--ig-success-700);border-color:var(--ig-success-700)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900)}.igx-chip--warning:focus .igx-chip__item{background:var(--ig-warn-500);border-color:var(--ig-warn-500);box-shadow:0 0 0 .1875rem var(--ig-warn-100)}.igx-chip--warning:hover .igx-chip__item{background:var(--ig-warn-400);border-color:var(--ig-warn-400)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600);border-color:var(--ig-error-600)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-900-contrast);box-shadow:0 0 0 .1875rem var(--ig-error-100)}.igx-chip--danger:hover .igx-chip__item{background:var(--ig-error-500);border-color:var(--ig-error-500)}.igx-chip--disabled .igx-chip__item--selected,.igx-chip--disabled.igx-chip--primary .igx-chip__item{background:hsl(from var(--ig-primary-400) h s l/.5);color:hsl(from var(--ig-primary-900-contrast) h s l/.4);border-color:#0000}.igx-chip--disabled.igx-chip--info .igx-chip__item{color:var(--ig-info-900-contrast);background:var(--ig-info-500);border-color:var(--ig-info-500);opacity:.4}.igx-chip--disabled.igx-chip--success .igx-chip__item{opacity:.4}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900);background:var(--ig-warn-500);border-color:var(--ig-warn-500);opacity:.4}.igx-chip--disabled.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600);border-color:var(--ig-error-600);opacity:.4}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-chip__item{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-chip--info:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-info-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-900)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}.igx-chip--warning:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-warn-900)}.igx-chip--danger:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-error-900)}.igx-chip--disabled .igx-chip__item--selected,.igx-chip--disabled.igx-chip--primary .igx-chip__item{color:hsl(from var(--ig-primary-900-contrast) h s l/.2)}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}}}\n"] }]
+            args: [{ selector: 'igx-chip', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDropDirective, IgxDragDirective, NgClass, NgTemplateOutlet, IgxIconComponent], template: "<div #chipArea class=\"igx-chip__item\"\n    data-no-typography\n    [igxDrag]=\"{chip: this}\"\n    [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n    ghostClass=\"igx-chip__ghost\"\n    [ghostClasses]=\"['igx-chip__ghost', 'igx-chip']\"\n    [ghostStyle]=\"ghostStyles\"\n    (dragStart)=\"onChipDragStart($event)\"\n    (ghostCreate)=\"onChipGhostCreate()\"\n    (ghostDestroy)=\"onChipGhostDestroy()\"\n    (dragEnd)=\"onChipDragEnd()\"\n    (transitioned)=\"onChipMoveEnd($event)\"\n    (dragClick)=\"onChipDragClicked($event)\"\n    igxDrop\n    (enter)=\"onChipDragEnterHandler($event)\"\n    (leave)=\"onChipDragLeaveHandler($event)\"\n    (over)=\"onChipOverHandler($event)\"\n    (dropped)=\"onChipDrop($event)\">\n\n    <div class=\"igx-chip__start\" #selectContainer>\n        @if (selected) {\n            <div [ngClass]=\"selectClass(selected)\">\n                <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n            </div>\n        }\n\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </div>\n\n    <div class=\"igx-chip__content\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"igx-chip__end\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n        @if (removable) {\n            <div class=\"igx-chip__remove\"\n                [attr.tabIndex]=\"tabIndex\"\n                (keydown)=\"onRemoveBtnKeyDown($event)\"\n                (pointerdown)=\"onRemoveMouseDown($event)\"\n                (mousedown)=\"onRemoveMouseDown($event)\"\n                (click)=\"onRemoveClick($event)\"\n                (touchmove)=\"onRemoveTouchMove()\"\n                (touchend)=\"onRemoveTouchEnd($event)\">\n                <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n    <igx-icon\n        [attr.aria-label]=\"resourceStrings.igx_chip_select\"\n        family=\"default\"\n        name=\"selected\"\n    ></igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n    <igx-icon\n        [attr.aria-label]=\"resourceStrings.igx_chip_remove\"\n        family=\"default\"\n        name=\"remove\"\n    ></igx-icon>\n</ng-template>\n", styles: ["@layer ig.base{.igx-chip__end,.igx-chip__start{display:flex;align-items:center;position:relative}.igx-chip__end:empty,.igx-chip__start:empty{display:none}.igx-chip{--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));--chip-size: var(--component-size);--affix-margin: calc(max(var(--is-large, 1) * max(.5rem, -1 * .5rem), var(--is-medium, 1) * max(.25rem, -1 * .25rem), var(--is-small, 1) * max(0rem, -1 * 0rem))*-1) ;position:relative;display:inline-flex;flex-shrink:0;min-width:-moz-max-content;min-width:max-content;touch-action:none;outline:none}.igx-chip:focus .igx-chip__item{outline-style:none;color:var(--focus-text-color);background:var(--focus-background)}.igx-chip:focus .igx-chip__item--selected{color:var(--focus-selected-text-color);background:var(--focus-selected-background)}.igx-chip:hover .igx-chip__item{color:var(--hover-text-color);background:var(--hover-background)}.igx-chip:hover .igx-chip__item--selected{color:var(--hover-selected-text-color);background:var(--hover-selected-background)}.igx-chip__item{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);display:grid;grid-auto-flow:column;grid-auto-columns:auto;align-items:center;justify-content:center;text-align:center;height:var(--size);padding-inline: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(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));color:var(--text-color);background:var(--background);border-radius:var(--border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:pointer;filter:opacity(1)}.igx-chip__item igx-avatar{--dimension: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem));display:flex!important;align-items:center;justify-content:center;font-size:calc(var(--dimension)/2);max-height:100%;width:var(--dimension);max-width:var(--dimension);height:var(--dimension)}.igx-chip__item igx-icon{--component-size: var(--chip-size)}.igx-chip__item igx-circular-bar{--igx-circular-bar-diameter: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.125rem, -1 * 1.125rem), var(--is-small, 1) * max(.875rem, -1 * .875rem))}.igx-chip__item igx-prefix,.igx-chip__item [igxPrefix],.igx-chip__item igx-suffix,.igx-chip__item [igxSuffix]{display:inline-flex;vertical-align:middle;max-width:32ch}.igx-chip__item igx-prefix>igx-icon,.igx-chip__item [igxPrefix]>igx-icon,.igx-chip__item igx-suffix>igx-icon,.igx-chip__item [igxSuffix]>igx-icon{display:block}.igx-chip__start{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__start>igx-avatar:first-child,.igx-chip__start>igx-circular-bar:first-child{margin-inline-start:var(--affix-margin)}.igx-chip__start [igxPrefix]:first-of-type igx-avatar,.igx-chip__start [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__start igx-prefix:first-of-type igx-avatar,.igx-chip__start igx-prefix:first-of-type igx-circular-bar{margin-inline-start:var(--affix-margin)}.igx-chip__end{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-chip__end>igx-avatar:last-child,.igx-chip__end>igx-circular-bar:last-child{margin-inline-end:var(--affix-margin)}.igx-chip__end [igxPrefix]:first-of-type igx-avatar,.igx-chip__end [igxPrefix]:first-of-type igx-circular-bar,.igx-chip__end igx-prefix:first-of-type igx-avatar,.igx-chip__end igx-prefix:first-of-type igx-circular-bar{margin-inline-end:var(--affix-margin)}.igx-chip__item--selected{color:var(--selected-text-color);background:var(--selected-background)}.igx-chip--primary .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-800-contrast);background:var(--ig-primary-800)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-600-contrast);background:var(--ig-primary-600)}.igx-chip--info .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-800-contrast);background:var(--ig-info-800)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-600-contrast);background:var(--ig-info-600)}.igx-chip--success .igx-chip__item{color:var(--ig-success-500-contrast);background:var(--ig-success-500)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-800-contrast);background:var(--ig-success-800)}.igx-chip--success:hover .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-600)}.igx-chip--warning .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-800-contrast);background:var(--ig-warn-800)}.igx-chip--warning:hover .igx-chip__item{color:var(--ig-warn-600-contrast);background:var(--ig-warn-600)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-500-contrast);background:var(--ig-error-500)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-800-contrast);background:var(--ig-error-800)}.igx-chip--danger:hover .igx-chip__item{color:var(--ig-error-600-contrast);background:var(--ig-error-600)}.igx-chip--disabled.igx-chip--primary .igx-chip__item,.igx-chip--disabled.igx-chip--info .igx-chip__item,.igx-chip--disabled.igx-chip--success .igx-chip__item,.igx-chip--disabled.igx-chip--warning .igx-chip__item,.igx-chip--disabled.igx-chip--danger .igx-chip__item{color:var(--ig-gray-500);background:var(--ig-gray-200)}.igx-chip--outlined .igx-chip__item{background:var(--outlined-background);color:var(--outlined-text-color);border:.0625rem solid var(--border-color)}.igx-chip--outlined .igx-chip__item--selected{background:var(--selected-outlined-background);color:var(--selected-outlined-text-color);border:.0625rem solid var(--selected-border-color)}.igx-chip--outlined:focus .igx-chip__item{color:var(--focus-outlined-text-color);background:var(--focus-outlined-background);border:.0625rem solid var(--focus-border-color)}.igx-chip--outlined:focus .igx-chip__item--selected{color:var(--focus-selected-outlined-text-color);background:var(--focus-selected-outlined-background);border:.0625rem solid var(--focus-selected-border-color)}.igx-chip--outlined:hover .igx-chip__item{color:var(--hover-outlined-text-color);background:var(--hover-outlined-background);border:.0625rem solid var(--hover-border-color)}.igx-chip--outlined:hover .igx-chip__item--selected{color:var(--hover-selected-outlined-text-color);background:var(--hover-selected-outlined-background);border:.0625rem solid var(--hover-selected-border-color)}.igx-chip--primary.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-primary-100-contrast);border-color:var(--ig-primary-800)}.igx-chip--primary.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-primary-800) h s l/.3)}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-600) h s l/.16)}.igx-chip--info.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-info-100-contrast);border-color:var(--ig-info-800)}.igx-chip--info.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-info-800) h s l/.3)}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-600) h s l/.16)}.igx-chip--success.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-success-100-contrast);border-color:var(--ig-success-800)}.igx-chip--success.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-success-800) h s l/.3)}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-600) h s l/.16)}.igx-chip--warning.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-warn-900-contrast);border-color:var(--ig-warn-800)}.igx-chip--warning.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-warn-800) h s l/.3)}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-600) h s l/.16)}.igx-chip--danger.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-error-100-contrast);border-color:var(--ig-error-800)}.igx-chip--danger.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-error-800) h s l/.3)}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-600) h s l/.16)}.igx-chip__content{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;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(.1875rem,-1 * .1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));max-width:32ch}.igx-chip__content:empty{display:none}.igx-chip__select{display:inline-flex;align-items:center;max-width:1.5rem;opacity:1;z-index:1;transition:max-width .12s cubic-bezier(.455,.03,.515,.955),opacity .12s cubic-bezier(.455,.03,.515,.955) .06s;transition-behavior:allow-discrete}@starting-style{.igx-chip__select{max-width:0;opacity:0}}.igx-chip__remove{display:inline-flex;color:var(--remove-icon-color, currentColor)}.igx-chip__remove:empty{display:none}.igx-chip__remove:focus igx-icon{color:var(--remove-icon-color-focus)}.igx-chip__ghost{position:absolute;box-shadow:var(--ghost-elevation);overflow:hidden;color:var(--focus-text-color);height:var(--size)!important;background:var(--ghost-background);z-index:10}.igx-chip__ghost:hover,.igx-chip__ghost:focus{background:var(--ghost-background)}.igx-chip--disabled{cursor:default;pointer-events:none}.igx-chip--disabled .igx-chip__end:has(.igx-chip__remove:only-child){display:none}.igx-chip--disabled .igx-chip__item{color:var(--disabled-text-color);background:var(--disabled-background)}.igx-chip--disabled .igx-chip__item--selected{color:var(--disabled-selected-text-color);background:var(--disabled-selected-background)}.igx-chip--disabled.igx-chip--outlined .igx-chip__item{background:var(--disabled-outlined-background);color:var(--disabled-outlined-text-color);border:.0625rem solid var(--disabled-border-color)}.igx-chip--disabled.igx-chip--outlined .igx-chip__item--selected{background:var(--disabled-selected-outlined-background);color:var(--disabled-selected-outlined-text-color);border:.0625rem solid var(--disabled-selected-border-color)}.igx-chip--disabled.igx-chip--outlined.igx-chip--primary .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--info .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--success .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--warning .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--danger .igx-chip__item{background:hsl(from var(--ig-gray-200) h s l/.3);color:var(--ig-gray-500);border-color:hsl(from var(--ig-gray-500) h s l/.3)}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .25rem var(--focus-shadow-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .25rem var(--focus-selected-shadow-color)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-500-contrast);background:var(--ig-primary-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-primary-500) h s l/.38)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-info-500) h s l/.38)}.igx-chip--success:focus .igx-chip__item{color:var(--ig-success-600-contrast);background:var(--ig-success-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-success-500) h s l/.38)}.igx-chip--warning:focus .igx-chip__item{color:var(--ig-warn-900-contrast);background:var(--ig-warn-500);box-shadow:0 0 0 .25rem hsl(from var(--ig-warn-500) h s l/.38)}.igx-chip--danger:focus .igx-chip__item{background:var(--ig-error-500);color:var(--ig-error-600-contrast);box-shadow:0 0 0 .25rem hsl(from var(--ig-error-500) h s l/.38)}.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-primary-600);color:var(--ig-primary-100-contrast)}.igx-chip--primary.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-600) h s l/.3)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-info-900);color:var(--ig-info-900-contrast)}.igx-chip--info.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-600) h s l/.3)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-success-600);color:var(--ig-success-100-contrast)}.igx-chip--success.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-600) h s l/.3)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-warn-900)}.igx-chip--warning.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-600) h s l/.3)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-error-600);color:var(--ig-error-100-contrast)}.igx-chip--danger.igx-chip--outlined:focus .igx-chip__item{background:#0000}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-600) h s l/.3)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-chip__item{--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(.875rem, -1 * .875rem));--affix-margin: calc(max(var(--is-large, 1) * max(.25rem, -1 * .25rem), var(--is-medium, 1) * max(.1875rem, -1 * .1875rem), var(--is-small, 1) * max(.0625rem, -1 * .0625rem))*-1) ;padding-inline:max(var(--is-large, 1) * max(.4375rem,-1 * .4375rem),var(--is-medium, 1) * max(.3125rem,-1 * .3125rem),var(--is-small, 1) * max(.1875rem,-1 * .1875rem))}.igx-chip:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--focus-shadow-color)}.igx-chip:focus .igx-chip__item--selected{box-shadow:0 0 0 .1875rem var(--focus-selected-shadow-color)}.igx-chip--primary:focus .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-500);box-shadow:0 0 0 .1875rem hsl(from var(--ig-primary-400) h s l/.5)}.igx-chip--primary:hover .igx-chip__item{color:var(--ig-primary-900-contrast);background:var(--ig-primary-400)}.igx-chip--info:focus .igx-chip__item{color:var(--ig-info-500-contrast);background:var(--ig-info-500);box-shadow:0 0 0 .1875rem var(--ig-info-100)}.igx-chip--info:hover .igx-chip__item{color:var(--ig-info-400-contrast);background:var(--ig-info-400)}.igx-chip--success .igx-chip__item{color:var(--ig-success-900-contrast);background:var(--ig-success-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-200)}.igx-chip--success:hover .igx-chip__item{background:var(--ig-success-700)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900)}.igx-chip--warning:focus .igx-chip__item{background:var(--ig-warn-500);box-shadow:0 0 0 .1875rem var(--ig-warn-100)}.igx-chip--warning:hover .igx-chip__item{background:var(--ig-warn-400)}.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600)}.igx-chip--danger:focus .igx-chip__item{color:var(--ig-error-900-contrast);box-shadow:0 0 0 .1875rem var(--ig-error-100)}.igx-chip--danger:hover .igx-chip__item{background:var(--ig-error-500)}.igx-chip--disabled.igx-chip--primary .igx-chip__item{background:hsl(from var(--ig-primary-400) h s l/.5);color:hsl(from var(--ig-primary-900-contrast) h s l/.4)}.igx-chip--disabled.igx-chip--info .igx-chip__item{color:var(--ig-info-900-contrast);background:var(--ig-info-500);opacity:.4}.igx-chip--disabled.igx-chip--success .igx-chip__item{opacity:.4}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-900);background:var(--ig-warn-500);opacity:.4}.igx-chip--disabled.igx-chip--danger .igx-chip__item{color:var(--ig-error-900-contrast);background:var(--ig-error-600);opacity:.4}.igx-chip--primary.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-primary-400)}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-400) h s l/.3)}.igx-chip--info.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-info-500)}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-400) h s l/.3)}.igx-chip--success.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-success-700)}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-700) h s l/.3)}.igx-chip--warning.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-warn-600)}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-400) h s l/.3)}.igx-chip--danger.igx-chip--outlined .igx-chip__item{background:#0000;color:var(--ig-gray-900);border-color:var(--ig-error-500)}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-500) h s l/.3)}.igx-chip--disabled.igx-chip--outlined .igx-chip__item--selected,.igx-chip--disabled.igx-chip--outlined.igx-chip--primary .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--info .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--success .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--warning .igx-chip__item,.igx-chip--disabled.igx-chip--outlined.igx-chip--danger .igx-chip__item{opacity:.4}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-chip__item{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom)}.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-primary-600)}.igx-chip--primary.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-primary-800) h s l/.3)}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-600) h s l/.16)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-info-600);color:var(--ig-info-100-contrast)}.igx-chip--info.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-info-800) h s l/.3)}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-600) h s l/.16)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-success-600)}.igx-chip--success.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-success-800) h s l/.3)}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-600) h s l/.16)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-warn-600);color:var(--ig-warn-100-contrast)}.igx-chip--warning.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-warn-800) h s l/.3)}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-600) h s l/.16)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{border-color:var(--ig-error-600)}.igx-chip--danger.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-error-800) h s l/.3)}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-600) h s l/.16)}}}@layer ig.material{@container style(--ig-theme: material) and style(--ig-theme-variant: dark){.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-primary-900-contrast);border-color:var(--ig-primary-200)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-info-500-contrast);border-color:var(--ig-info-200)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-success-900-contrast);border-color:var(--ig-success-300)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-gray-100-contrast);border-color:var(--ig-warn-300)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-error-900-contrast);border-color:var(--ig-error-300)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap) and style(--ig-theme-variant: dark){.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-primary-600-contrast);border-color:var(--ig-primary-300)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-gray-100-contrast);border-color:var(--ig-info-600)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-success-600-contrast);border-color:var(--ig-success-200)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-gray-100-contrast);border-color:var(--ig-warn-500)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-error-600-contrast);border-color:var(--ig-error-400)}}}@layer ig.fluent{@container style(--ig-theme: fluent) and style(--ig-theme-variant: dark){.igx-chip--primary.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-primary-600-contrast);border-color:var(--ig-primary-200)}.igx-chip--primary.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-primary-800) h s l/.5)}.igx-chip--primary.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-primary-600) h s l/.2)}.igx-chip--info.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-info-500-contrast);border-color:var(--ig-info-200)}.igx-chip--info.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-info-800) h s l/.5)}.igx-chip--info.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-info-600) h s l/.2)}.igx-chip--success.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-success-600-contrast);border-color:var(--ig-success-100)}.igx-chip--success.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-success-800) h s l/.5)}.igx-chip--success.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-success-600) h s l/.2)}.igx-chip--warning.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-warn-500-contrast);border-color:var(--ig-warn-200)}.igx-chip--warning.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-warn-800) h s l/.5)}.igx-chip--warning.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-warn-600) h s l/.2)}.igx-chip--danger.igx-chip--outlined:not(.igx-chip--disabled) .igx-chip__item{color:var(--ig-error-600-contrast);border-color:var(--ig-error-50)}.igx-chip--danger.igx-chip--outlined:focus .igx-chip__item{background:hsl(from var(--ig-error-800) h s l/.5)}.igx-chip--danger.igx-chip--outlined:hover .igx-chip__item{background:hsl(from var(--ig-error-600) h s l/.2)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-chip--info:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-info-800)}.igx-chip--success:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-success-900)}.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}.igx-chip--warning:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-warn-900)}.igx-chip--danger:focus .igx-chip__item{box-shadow:0 0 0 .1875rem var(--ig-error-900)}.igx-chip--disabled.igx-chip--primary .igx-chip__item{color:hsl(from var(--ig-primary-900-contrast) h s l/.2)}.igx-chip--disabled.igx-chip--warning .igx-chip__item{color:var(--ig-gray-50)}.igx-chip--primary.igx-chip--outlined .igx-chip__item{color:var(--ig-primary-900-contrast)}.igx-chip--info.igx-chip--outlined .igx-chip__item{color:var(--ig-info-900-contrast);border-color:var(--ig-info-300)}.igx-chip--success.igx-chip--outlined .igx-chip__item{color:var(--ig-success-900-contrast);border-color:var(--ig-success-500)}.igx-chip--warning.igx-chip--outlined .igx-chip__item{color:var(--ig-warn-900-contrast);border-color:var(--ig-warn-300)}.igx-chip--danger.igx-chip--outlined .igx-chip__item{color:var(--ig-error-900-contrast);border-color:var(--ig-error-400)}.igx-chip--disabled.igx-chip--outlined.igx-chip--primary .igx-chip__item{color:var(--ig-gray-100-contrast)}.igx-chip--disabled.igx-chip--outlined.igx-chip--info .igx-chip__item{border-color:var(--ig-info-300);color:var(--ig-gray-100-contrast)}.igx-chip--disabled.igx-chip--outlined.igx-chip--success .igx-chip__item{border-color:var(--ig-success-500);color:var(--ig-gray-100-contrast)}.igx-chip--disabled.igx-chip--outlined.igx-chip--warning .igx-chip__item{border-color:var(--ig-warn-300);color:var(--ig-gray-100-contrast)}.igx-chip--disabled.igx-chip--outlined.igx-chip--danger .igx-chip__item{border-color:var(--ig-error-400);color:var(--ig-gray-100-contrast)}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { variant: [{
                 type: Input
             }], id: [{
@@ -711,6 +721,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 args: [{ transform: booleanAttribute }]
             }], removeIcon: [{
                 type: Input
+            }], outlined: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }, {
+                type: HostBinding,
+                args: ['class.igx-chip--outlined']
             }], selectable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]