igniteui-webcomponents 3.3.0-beta.0 → 3.3.0

package/components/dropdown/dropdown-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-group.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAG/E,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAWxE,IAAqB,yBAAyB,GAA9C,MAAqB,yBAA0B,SAAQ,UAAU;IAAjE;;QAYS,SAAI,GAAiC,OAAO,CAAC;IAgBtD,CAAC;IAdiB,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAyB,CAAC;QACtE,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;IAC5B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;KAGV,CAAC;IACJ,CAAC;CACF,CAAA;AA3BwB,iCAAO,GAAG,oBAAqB,CAAA;AAE/B,gCAAM,GAAG,MAAO,CAAA;AAKvC;IAFC,cAAc,EAAE;IAChB,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC;wDACzB;AAI/C;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACwB;AAZjC,yBAAyB;IAD7C,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;GACE,yBAAyB,CA4B7C;eA5BoB,yBAAyB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/dropdown-group.base.css.js';\nimport { styles as fluent } from './themes/light/dropdown-group.fluent.css.js';\nimport type IgcDropdownItemComponent from './dropdown-item';\nimport type IgcDropdownComponent from './dropdown';\nimport { blazorSuppress } from '../common/decorators/blazorSuppress.js';\n\n/**\n * @element igc-dropdown-group - A container for a group of `igc-dropdown-item` components.\n *\n * @slot label - Contains the group's label.\n * @slot - Intended to contain the items belonging to this group.\n *\n * @csspart label - The native label element.\n */\n@themes({ fluent })\nexport default class IgcDropdownGroupComponent extends LitElement {\n  public static readonly tagName = 'igc-dropdown-group';\n\n  public static override styles = styles;\n\n  /** All child `igc-dropdown-item`s. */\n  @blazorSuppress()\n  @queryAssignedElements({ flatten: true, selector: 'igc-dropdown-item' })\n  public items!: Array<IgcDropdownItemComponent>;\n\n  /** @private */\n  @property({ reflect: true })\n  public size: 'small' | 'medium' | 'large' = 'large';\n\n  public override connectedCallback() {\n    super.connectedCallback();\n\n    this.setAttribute('role', 'group');\n    const dropdown = this.closest('igc-dropdown') as IgcDropdownComponent;\n    this.size = dropdown.size;\n  }\n\n  protected override render() {\n    return html`\n      <label part=\"label\"><slot name=\"label\"></slot></label>\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dropdown-group': IgcDropdownGroupComponent;\n  }\n}\n"]}
+{"version":3,"file":"dropdown-group.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAE/E,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAYxE,IAAqB,yBAAyB,GAA9C,MAAqB,yBAA0B,SAAQ,UAAU;IAW/C,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;IACjC,CAAC;IAES,SAAS;QACjB,OAAO,IAAI,CAAC,OAAO,CAAC,cAAc,CAAE,CAAC;IACvC,CAAC;IAEkB,MAAM;;QACvB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,mCAAI,OAAO,CAAC,CAAC;QAExD,OAAO,IAAI,CAAA;;;KAGV,CAAC;IACJ,CAAC;CACF,CAAA;AA7BwB,iCAAO,GAAG,oBAAqB,CAAA;AAE/B,gCAAM,GAAG,MAAO,CAAA;AAMvC;IAFC,cAAc,EAAE;IAChB,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC;wDACzB;AAT5B,yBAAyB;IAD7C,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;GACE,yBAAyB,CA8B7C;eA9BoB,yBAAyB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/dropdown-group.base.css.js';\nimport { styles as fluent } from './themes/light/dropdown-group.fluent.css.js';\nimport type IgcDropdownItemComponent from './dropdown-item';\nimport { blazorSuppress } from '../common/decorators/blazorSuppress.js';\nimport { SizableInterface } from '../common/mixins/sizable.js';\n\n/**\n * @element igc-dropdown-group - A container for a group of `igc-dropdown-item` components.\n *\n * @slot label - Contains the group's label.\n * @slot - Intended to contain the items belonging to this group.\n *\n * @csspart label - The native label element.\n */\n@themes({ fluent })\nexport default class IgcDropdownGroupComponent extends LitElement {\n  public static readonly tagName = 'igc-dropdown-group';\n\n  public static override styles = styles;\n  protected parent!: SizableInterface;\n\n  /** All child `igc-dropdown-item`s. */\n  @blazorSuppress()\n  @queryAssignedElements({ flatten: true, selector: 'igc-dropdown-item' })\n  public items!: Array<IgcDropdownItemComponent>;\n\n  public override connectedCallback() {\n    super.connectedCallback();\n\n    this.setAttribute('role', 'group');\n    this.parent = this.getParent();\n  }\n\n  protected getParent() {\n    return this.closest('igc-dropdown')!;\n  }\n\n  protected override render() {\n    this.setAttribute('size', this.parent?.size ?? 'large');\n\n    return html`\n      <label part=\"label\"><slot name=\"label\"></slot></label>\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dropdown-group': IgcDropdownGroupComponent;\n  }\n}\n"]}

package/components/dropdown/dropdown.d.ts

@@ -1,12 +1,8 @@
 import { LitElement } from 'lit';
 import { Constructor } from '../common/mixins/constructor.js';
 import type { IgcPlacement, IgcToggleComponent, IgcToggleEventMap } from '../toggle/types';
+import IgcDropdownGroupComponent from './dropdown-group.js';
 import IgcDropdownItemComponent from './dropdown-item.js';
-import type IgcDropdownGroupComponent from './dropdown-group';
-export declare enum DropdownActionKey {
-    ESCAPE = "escape",
-    ENTER = "enter"
-}
 export interface IgcDropdownEventMap extends IgcToggleEventMap {
     igcChange: CustomEvent<IgcDropdownItemComponent>;
 }
@@ -35,7 +31,8 @@ export default class IgcDropdownComponent extends IgcDropdownComponent_base impl
     private selectedItem;
     private activeItem;
     private target;
-    private get allItems();
+    private readonly keyDownHandlers;
+    protected get allItems(): IgcDropdownItemComponent[];
     private targetNodes;
     protected content: HTMLElement;
     protected scrollContainer: HTMLElement;
@@ -68,21 +65,28 @@ export default class IgcDropdownComponent extends IgcDropdownComponent_base impl
     protected updateOptions(): void;
     protected sizeChange(): void;
     constructor();
-    firstUpdated(): void;
+    firstUpdated(): Promise<void>;
     protected getUpdateComplete(): Promise<boolean>;
-    private handleKeyDown;
-    private handleItemActionKey;
-    private handleClick;
-    private handleTargetClick;
-    private handleOpening;
-    private handleClosing;
-    private handleChange;
-    private handleSlotChange;
-    private handleFocusout;
-    private getItem;
-    private activateItem;
-    private selectItem;
-    private navigate;
+    protected setInitialSelection(): void;
+    protected handleKeyDown: (event: KeyboardEvent) => void;
+    protected onHomeKey(): void;
+    protected onEndKey(): void;
+    protected onEscapeKey(): void;
+    protected onEnterKey(): void;
+    protected handleClick(event: MouseEvent): void;
+    protected handleTargetClick: () => Promise<void>;
+    protected handleOpening(): boolean;
+    protected handleClosing(): boolean;
+    protected handleChange(item: IgcDropdownItemComponent): void;
+    protected handleSlotChange(): void;
+    protected handleFocusout(event: Event): void;
+    protected getItem(value: string): {
+        item: IgcDropdownItemComponent;
+        index: number;
+    };
+    protected activateItem(value: IgcDropdownItemComponent): void;
+    protected selectItem(item: IgcDropdownItemComponent, emit?: boolean): IgcDropdownItemComponent | null;
+    protected navigate(direction: -1 | 1, currentIndex?: number): void;
     private navigateItem;
     private scrollToHiddenItem;
     private getNearestSiblingFocusableItemIndex;

package/components/dropdown/dropdown.js

@@ -11,21 +11,29 @@ import { styles } from './themes/light/dropdown.base.css.js';
 import { styles as bootstrap } from './themes/light/dropdown.bootstrap.css.js';
 import { styles as fluent } from './themes/light/dropdown.fluent.css.js';
 import { styles as indigo } from './themes/light/dropdown.indigo.css.js';
-import IgcDropdownItemComponent from './dropdown-item.js';
 import { IgcToggleController } from '../toggle/toggle.controller.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { SizableMixin } from '../common/mixins/sizable.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { watch } from '../common/decorators/watch.js';
 import { blazorSuppress } from '../common/decorators/blazorSuppress.js';
-export var DropdownActionKey;
-(function (DropdownActionKey) {
-    DropdownActionKey["ESCAPE"] = "escape";
-    DropdownActionKey["ENTER"] = "enter";
-})(DropdownActionKey || (DropdownActionKey = {}));
+import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
+import { defineComponents } from '../common/definitions/defineComponents.js';
+import IgcDropdownGroupComponent from './dropdown-group.js';
+import IgcDropdownHeaderComponent from './dropdown-header.js';
+import IgcDropdownItemComponent from './dropdown-item.js';
+defineComponents(IgcDropdownGroupComponent, IgcDropdownHeaderComponent, IgcDropdownItemComponent);
 let IgcDropdownComponent = class IgcDropdownComponent extends SizableMixin(EventEmitterMixin(LitElement)) {
     constructor() {
         super();
+        this.keyDownHandlers = new Map(Object.entries({
+            Escape: this.onEscapeKey,
+            Enter: this.onEnterKey,
+            ArrowUp: this.onArrowUpKeyDown,
+            ArrowDown: this.onArrowDownKeyDown,
+            Home: this.onHomeKey,
+            End: this.onEndKey,
+        }));
         this.keepOpenOnSelect = false;
         this.open = false;
         this.placement = 'bottom-start';
@@ -36,62 +44,35 @@ let IgcDropdownComponent = class IgcDropdownComponent extends SizableMixin(Event
         this.keepOpenOnOutsideClick = false;
         this.sameWidth = false;
         this.handleKeyDown = (event) => {
-            if (this.open &&
-                event &&
-                (event.composedPath().includes(this.target) ||
-                    event.composedPath().includes(this.content))) {
-                const key = event.key.toLowerCase();
-                const navKeys = [
-                    'esc',
-                    'escape',
-                    'enter',
-                    'arrowup',
-                    'up',
-                    'arrowdown',
-                    'down',
-                ];
-                if (navKeys.indexOf(key) === -1) {
-                    return;
-                }
+            var _a;
+            const path = event.composedPath();
+            if (!(path.includes(this.target) || path.includes(this.content)))
+                return;
+            if (this.keyDownHandlers.has(event.key)) {
                 event.preventDefault();
                 event.stopPropagation();
-                switch (key) {
-                    case 'esc':
-                    case 'escape':
-                        this.handleItemActionKey(DropdownActionKey.ESCAPE);
-                        break;
-                    case 'enter':
-                        this.handleItemActionKey(DropdownActionKey.ENTER);
-                        break;
-                    case 'arrowup':
-                    case 'up':
-                        this.onArrowUpKeyDown();
-                        break;
-                    case 'arrowdown':
-                    case 'down':
-                        this.onArrowDownKeyDown();
-                        break;
-                    default:
-                        return;
-                }
+                (_a = this.keyDownHandlers.get(event.key)) === null || _a === void 0 ? void 0 : _a.call(this);
             }
         };
-        this.handleTargetClick = () => {
+        this.handleTargetClick = async () => {
             if (!this.open) {
                 if (!this.handleOpening())
                     return;
                 this.show();
+                await this.updateComplete;
                 this.emitEvent('igcOpened');
             }
             else {
                 this._hide();
             }
         };
-        this.toggleController = new IgcToggleController(this, this.target);
+        this.toggleController = new IgcToggleController(this, {
+            target: this.target,
+            closeCallback: () => this._hide(),
+        });
     }
     get allItems() {
-        const groupItems = this.groups.flatMap((group) => group.items);
-        return [...this.items, ...groupItems];
+        return [...this.items, ...this.groups.flatMap((group) => group.items)];
     }
     toggleDirectiveChange() {
         var _a;
@@ -112,44 +93,50 @@ let IgcDropdownComponent = class IgcDropdownComponent extends SizableMixin(Event
     updateOptions() {
         if (!this.toggleController)
             return;
-        this.toggleController.updateToggleDir();
+        this.toggleController.update();
     }
     sizeChange() {
-        this.groups.forEach((g) => (g.size = this.size));
+        this.groups.forEach((g) => g.requestUpdate());
     }
-    firstUpdated() {
+    async firstUpdated() {
         if (this.targetNodes.length) {
             this.target = this.targetNodes[0];
             this.target.setAttribute('aria-haspopup', 'listbox');
         }
+        await this.updateComplete;
+        this.setInitialSelection();
     }
     async getUpdateComplete() {
         const result = await super.getUpdateComplete();
         await this.toggleController.rendered;
         return result;
     }
-    handleItemActionKey(key) {
-        switch (key) {
-            case DropdownActionKey.ENTER:
-                this.selectItem(this.activeItem);
-                this.handleChange(this.activeItem);
-                break;
-            case DropdownActionKey.ESCAPE:
-                break;
+    setInitialSelection() {
+        const item = this.allItems.filter((item) => item.selected).at(-1);
+        this.allItems.forEach((item) => (item.selected = false));
+        if (item) {
+            this.selectItem(item, false);
         }
-        if (!this.keepOpenOnSelect)
-            this._hide();
+    }
+    onHomeKey() {
+        this.navigateTo(this.allItems.filter((item) => !item.disabled).at(0).value);
+    }
+    onEndKey() {
+        this.navigateTo(this.allItems.filter((item) => !item.disabled).at(-1).value);
+    }
+    onEscapeKey() {
+        this._hide();
+    }
+    onEnterKey() {
+        this.selectItem(this.activeItem);
     }
     handleClick(event) {
-        const newSelectedItem = event
+        const item = event
             .composedPath()
             .find((e) => e instanceof IgcDropdownItemComponent);
-        if (!newSelectedItem || newSelectedItem.disabled)
+        if (!item || item.disabled)
             return;
-        this.selectItem(newSelectedItem);
-        this.handleChange(newSelectedItem);
-        if (!this.keepOpenOnSelect)
-            this._hide();
+        this.selectItem(item);
     }
     handleOpening() {
         const args = { cancelable: true };
@@ -186,25 +173,25 @@ let IgcDropdownComponent = class IgcDropdownComponent extends SizableMixin(Event
     activateItem(value) {
         if (!value)
             return;
-        if (this.activeItem && this.activeItem !== value) {
+        if (this.activeItem) {
             this.activeItem.active = false;
         }
         this.activeItem = value;
         this.activeItem.active = true;
     }
     selectItem(item, emit = true) {
-        const oldItem = this.selectedItem;
-        if (!item) {
+        if (!item)
             return null;
-        }
-        if (oldItem && oldItem !== item) {
-            oldItem.selected = false;
+        if (this.selectedItem) {
+            this.selectedItem.selected = false;
         }
         this.activateItem(item);
         this.selectedItem = item;
         this.selectedItem.selected = true;
         if (emit)
             this.handleChange(this.selectedItem);
+        if (emit && !this.keepOpenOnSelect)
+            this._hide();
         return this.selectedItem;
     }
     navigate(direction, currentIndex) {
@@ -264,13 +251,14 @@ let IgcDropdownComponent = class IgcDropdownComponent extends SizableMixin(Event
     onArrowUpKeyDown() {
         this.navigatePrev();
     }
-    _hide(emit = true) {
+    async _hide(emit = true) {
         if (emit && !this.handleClosing())
             return;
         if (!this.open)
             return;
         this.open = false;
         if (emit) {
+            await this.updateComplete;
             this.emitEvent('igcClosed');
         }
     }
@@ -285,12 +273,7 @@ let IgcDropdownComponent = class IgcDropdownComponent extends SizableMixin(Event
         this._hide(false);
     }
     toggle(target) {
-        if (!this.open) {
-            this.show(target);
-        }
-        else {
-            this.hide();
-        }
+        this.open ? this.hide() : this.show(target);
     }
     navigateTo(value) {
         const index = typeof value === 'string' ? this.getItem(value).index : value;
@@ -401,7 +384,8 @@ __decorate([
     blazorSuppress()
 ], IgcDropdownComponent.prototype, "select", null);
 IgcDropdownComponent = __decorate([
-    themes({ bootstrap, fluent, indigo })
+    themes({ bootstrap, fluent, indigo }),
+    blazorAdditionalDependencies('IgcDropdownItemComponent, IgcDropdownHeaderComponent, IgcDropdownGroupComponent')
 ], IgcDropdownComponent);
 export default IgcDropdownComponent;
 //# sourceMappingURL=dropdown.js.map

package/components/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { styles } from './themes/light/dropdown.base.css.js';\nimport { styles as bootstrap } from './themes/light/dropdown.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/dropdown.fluent.css.js';\nimport { styles as indigo } from './themes/light/dropdown.indigo.css.js';\nimport type {\n  IgcPlacement,\n  IgcToggleComponent,\n  IgcToggleEventMap,\n} from '../toggle/types';\nimport IgcDropdownItemComponent from './dropdown-item.js';\nimport { IgcToggleController } from '../toggle/toggle.controller.js';\nimport type IgcDropdownGroupComponent from './dropdown-group';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { blazorSuppress } from '../common/decorators/blazorSuppress.js';\n\nexport enum DropdownActionKey {\n  ESCAPE = 'escape',\n  ENTER = 'enter',\n}\n\nexport interface IgcDropdownEventMap extends IgcToggleEventMap {\n  igcChange: CustomEvent<IgcDropdownItemComponent>;\n}\n\n/**\n * Represents a DropDown component.\n *\n * @element igc-dropdown\n *\n * @fires igcChange - Emitted when the selected item changes.\n * @fires igcOpening - Emitted just before the dropdown is open.\n * @fires igcOpened - Emitted after the dropdown is open.\n * @fires igcClosing - Emitter just before the dropdown is closed.\n * @fires igcClosed - Emitted after closing the dropdown.\n *\n * @slot target - Renders the dropdown's target element.\n * @slot - Renders the dropdown list items.\n *\n * @csspart base - The dropdown list wrapper.\n * @csspart list - The dropdown list.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcDropdownComponent\n  extends SizableMixin(\n    EventEmitterMixin<IgcDropdownEventMap, Constructor<LitElement>>(LitElement)\n  )\n  implements IgcToggleComponent\n{\n  public static readonly tagName = 'igc-dropdown';\n\n  public static styles = styles;\n\n  private toggleController!: IgcToggleController;\n  private selectedItem!: IgcDropdownItemComponent | null;\n  private activeItem!: IgcDropdownItemComponent;\n  private target!: HTMLElement;\n\n  private get allItems(): IgcDropdownItemComponent[] {\n    const groupItems: IgcDropdownItemComponent[] = this.groups.flatMap(\n      (group) => group.items\n    );\n    return [...this.items, ...groupItems];\n  }\n\n  @queryAssignedElements({ slot: 'target' })\n  private targetNodes!: Array<HTMLElement>;\n\n  @query('[part=\"base\"]')\n  protected content!: HTMLElement;\n\n  @query('[part=\"list\"]')\n  protected scrollContainer!: HTMLElement;\n\n  @queryAssignedElements({ flatten: true, selector: 'igc-dropdown-item' })\n  protected items!: Array<IgcDropdownItemComponent>;\n\n  @queryAssignedElements({ flatten: true, selector: 'igc-dropdown-group' })\n  protected groups!: Array<IgcDropdownGroupComponent>;\n\n  /** Whether the dropdown should be kept open on selection. */\n  @property({ type: Boolean, attribute: 'keep-open-on-select' })\n  public keepOpenOnSelect = false;\n\n  /** Sets the open state of the component. */\n  @property({ type: Boolean })\n  public open = false;\n\n  /** The preferred placement of the component around the target element.\n   * @type {\"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"right\" | \"right-start\" | \"right-end\" | \"left\" | \"left-start\" | \"left-end\"}\n   */\n  @property()\n  public placement: IgcPlacement = 'bottom-start';\n\n  /** Sets the component's positioning strategy. */\n  @property({ attribute: 'position-strategy' })\n  public positionStrategy: 'absolute' | 'fixed' = 'absolute';\n\n  /** Determines the behavior of the component during scrolling the container. */\n  @property({ attribute: 'scroll-strategy' })\n  public scrollStrategy: 'scroll' | 'block' | 'close' = 'scroll';\n\n  /**\n   * Whether the component should be flipped to the opposite side of the target once it's about to overflow the visible area.\n   * When true, once enough space is detected on its preferred side, it will flip back.\n   */\n  @property({ type: Boolean })\n  public flip = false;\n\n  /** The distance from the target element. */\n  @property({ type: Number })\n  public distance = 0;\n\n  /** Whether the component should be kept open on clicking outside of it. */\n  @property({ type: Boolean, attribute: 'keep-open-on-outside-click' })\n  public keepOpenOnOutsideClick = false;\n\n  /** Whether the dropdown's width should be the same as the target's one. */\n  @property({ type: Boolean, attribute: 'same-width' })\n  public sameWidth = false;\n\n  @watch('open')\n  protected toggleDirectiveChange() {\n    if (!this.target) return;\n    this.toggleController.target = this.target;\n\n    if (this.open) {\n      document.addEventListener('keydown', this.handleKeyDown);\n      this.target.addEventListener('focusout', this.handleFocusout);\n      this.selectedItem = this.allItems.find((i) => i.selected) ?? null;\n    } else {\n      document.removeEventListener('keydown', this.handleKeyDown);\n      this.target.removeEventListener('focusout', this.handleFocusout);\n    }\n\n    this.target.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n  }\n\n  @watch('placement')\n  @watch('flip')\n  @watch('positionStrategy')\n  @watch('closeOnOutsideClick')\n  @watch('distance')\n  @watch('sameWidth')\n  protected updateOptions() {\n    if (!this.toggleController) return;\n\n    this.toggleController.updateToggleDir();\n  }\n\n  @watch('size')\n  protected sizeChange() {\n    this.groups.forEach((g) => (g.size = this.size));\n  }\n\n  constructor() {\n    super();\n\n    this.toggleController = new IgcToggleController(this, this.target);\n  }\n\n  public override firstUpdated() {\n    if (this.targetNodes.length) {\n      this.target = this.targetNodes[0];\n      this.target.setAttribute('aria-haspopup', 'listbox');\n    }\n  }\n\n  protected override async getUpdateComplete() {\n    const result = await super.getUpdateComplete();\n    await this.toggleController.rendered;\n    return result;\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (\n      this.open &&\n      event &&\n      (event.composedPath().includes(this.target) ||\n        event.composedPath().includes(this.content))\n    ) {\n      const key = event.key.toLowerCase();\n      const navKeys = [\n        'esc',\n        'escape',\n        'enter',\n        'arrowup',\n        'up',\n        'arrowdown',\n        'down',\n      ];\n      if (navKeys.indexOf(key) === -1) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      switch (key) {\n        case 'esc':\n        case 'escape':\n          this.handleItemActionKey(DropdownActionKey.ESCAPE);\n          break;\n        case 'enter':\n          this.handleItemActionKey(DropdownActionKey.ENTER);\n          break;\n        case 'arrowup':\n        case 'up':\n          this.onArrowUpKeyDown();\n          break;\n        case 'arrowdown':\n        case 'down':\n          this.onArrowDownKeyDown();\n          break;\n        default:\n          return;\n      }\n    }\n  };\n\n  private handleItemActionKey(key: DropdownActionKey) {\n    switch (key) {\n      case DropdownActionKey.ENTER:\n        this.selectItem(this.activeItem);\n        this.handleChange(this.activeItem);\n        break;\n      case DropdownActionKey.ESCAPE:\n        break;\n    }\n\n    if (!this.keepOpenOnSelect) this._hide();\n  }\n\n  private handleClick(event: MouseEvent) {\n    const newSelectedItem = event\n      .composedPath()\n      .find(\n        (e) => e instanceof IgcDropdownItemComponent\n      ) as IgcDropdownItemComponent;\n\n    if (!newSelectedItem || newSelectedItem.disabled) return;\n\n    this.selectItem(newSelectedItem);\n    this.handleChange(newSelectedItem);\n    if (!this.keepOpenOnSelect) this._hide();\n  }\n\n  private handleTargetClick = () => {\n    if (!this.open) {\n      if (!this.handleOpening()) return;\n      this.show();\n      this.emitEvent('igcOpened');\n    } else {\n      this._hide();\n    }\n  };\n\n  private handleOpening() {\n    const args = { cancelable: true };\n    return this.emitEvent('igcOpening', args);\n  }\n\n  private handleClosing(): boolean {\n    const args = { cancelable: true };\n    return this.emitEvent('igcClosing', args);\n  }\n\n  private handleChange(item: IgcDropdownItemComponent) {\n    const args = { detail: item };\n    this.emitEvent('igcChange', args);\n  }\n\n  private handleSlotChange() {\n    if (!this.target) return;\n    this.target.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n  }\n\n  private handleFocusout(event: Event) {\n    event.preventDefault();\n    (event.target as HTMLElement).focus();\n  }\n\n  private getItem(value: string) {\n    let itemIndex = -1;\n    let item!: IgcDropdownItemComponent;\n    this.allItems.find((i, index) => {\n      if (i.value === value) {\n        item = i;\n        itemIndex = index;\n      }\n    });\n    return { item: item, index: itemIndex };\n  }\n\n  private activateItem(value: IgcDropdownItemComponent) {\n    if (!value) return;\n\n    if (this.activeItem && this.activeItem !== value) {\n      this.activeItem.active = false;\n    }\n\n    this.activeItem = value;\n    this.activeItem.active = true;\n  }\n\n  private selectItem(\n    item: IgcDropdownItemComponent,\n    emit = true\n  ): IgcDropdownItemComponent | null {\n    const oldItem = this.selectedItem;\n\n    if (!item) {\n      return null;\n    }\n\n    if (oldItem && oldItem !== item) {\n      oldItem.selected = false;\n    }\n\n    this.activateItem(item);\n    this.selectedItem = item;\n    this.selectedItem.selected = true;\n    if (emit) this.handleChange(this.selectedItem);\n\n    return this.selectedItem;\n  }\n\n  private navigate(direction: -1 | 1, currentIndex?: number) {\n    let index = -1;\n    if (this.activeItem) {\n      index = currentIndex\n        ? currentIndex\n        : [...this.allItems].indexOf(this.activeItem) ?? index;\n    }\n\n    const newIndex = this.getNearestSiblingFocusableItemIndex(index, direction);\n    this.navigateItem(newIndex);\n  }\n\n  private navigateItem(newIndex: number): IgcDropdownItemComponent | null {\n    if (!this.allItems) {\n      return null;\n    }\n\n    if (newIndex < 0 || newIndex >= this.allItems.length) {\n      return null;\n    }\n\n    const newItem = this.allItems[newIndex];\n\n    this.activateItem(newItem);\n    this.scrollToHiddenItem(newItem);\n\n    return newItem;\n  }\n\n  private scrollToHiddenItem(newItem: IgcDropdownItemComponent) {\n    const elementRect = newItem.getBoundingClientRect();\n    const parentRect = this.content.getBoundingClientRect();\n    if (parentRect.top > elementRect.top) {\n      this.content.scrollTop -= parentRect.top - elementRect.top;\n    }\n\n    if (parentRect.bottom < elementRect.bottom) {\n      this.content.scrollTop += elementRect.bottom - parentRect.bottom;\n    }\n  }\n\n  private getNearestSiblingFocusableItemIndex(\n    startIndex: number,\n    direction: -1 | 1\n  ): number {\n    let index = startIndex;\n    const items = this.allItems;\n    if (!items) {\n      return -1;\n    }\n\n    while (items[index + direction] && items[index + direction].disabled) {\n      index += direction;\n    }\n\n    index += direction;\n\n    return index > -1 && index < items.length ? index : -1;\n  }\n\n  private navigateNext() {\n    this.navigate(1);\n  }\n\n  private navigatePrev() {\n    this.navigate(-1);\n  }\n\n  private onArrowDownKeyDown() {\n    this.navigateNext();\n  }\n\n  private onArrowUpKeyDown() {\n    this.navigatePrev();\n  }\n\n  private _hide(emit = true) {\n    if (emit && !this.handleClosing()) return;\n\n    if (!this.open) return;\n\n    this.open = false;\n\n    if (emit) {\n      this.emitEvent('igcClosed');\n    }\n  }\n\n  /** Shows the dropdown. */\n  @blazorSuppress()\n  public show(target?: HTMLElement) {\n    if (this.open && !target) return;\n\n    if (target) this.target = target;\n\n    this.open = true;\n  }\n\n  /** Hides the dropdown. */\n  public hide(): void {\n    this._hide(false);\n  }\n\n  /** Toggles the open state of the dropdown. */\n  @blazorSuppress()\n  public toggle(target?: HTMLElement): void {\n    if (!this.open) {\n      this.show(target);\n    } else {\n      this.hide();\n    }\n  }\n\n  /** Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null. */\n  public navigateTo(value: string): IgcDropdownItemComponent | null;\n  /** Navigates to the item at the specified index. If it exists, returns the found item, otherwise - null. */\n  public navigateTo(index: number): IgcDropdownItemComponent | null;\n  /** Navigates to the specified item. If it exists, returns the found item, otherwise - null. */\n  @blazorSuppress()\n  public navigateTo(value: string | number): IgcDropdownItemComponent | null {\n    const index =\n      typeof value === 'string' ? this.getItem(value).index : (value as number);\n\n    return this.navigateItem(index);\n  }\n\n  /** Selects the item with the specified value. If it exists, returns the found item, otherwise - null. */\n  public select(value: string): IgcDropdownItemComponent | null;\n  /** Selects the item at the specified index. If it exists, returns the found item, otherwise - null. */\n  public select(index: number): IgcDropdownItemComponent | null;\n  /** Selects the specified item. If it exists, returns the found item, otherwise - null. */\n  @blazorSuppress()\n  public select(value: string | number): IgcDropdownItemComponent | null {\n    const item =\n      typeof value === 'string'\n        ? this.getItem(value).item\n        : this.allItems[value as number];\n\n    return this.selectItem(item, false);\n  }\n\n  /**  Clears the current selection of the dropdown. */\n  public clearSelection() {\n    if (this.selectedItem) {\n      this.selectedItem.selected = false;\n    }\n    this.selectedItem = null;\n  }\n\n  protected override render() {\n    return html`\n      <slot\n        id=\"igcDDLTarget\"\n        name=\"target\"\n        @click=${this.handleTargetClick}\n        @slotchange=${this.handleSlotChange}\n      >\n      </slot>\n      <div\n        part=\"base\"\n        style=${styleMap({ position: this.positionStrategy })}\n        @click=${this.handleClick}\n        ${this.toggleController.toggleDirective}\n      >\n        <div role=\"listbox\" part=\"list\" aria-labelledby=\"igcDDLTarget\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dropdown': IgcDropdownComponent;\n  }\n}\n"]}
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { styles } from './themes/light/dropdown.base.css.js';\nimport { styles as bootstrap } from './themes/light/dropdown.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/dropdown.fluent.css.js';\nimport { styles as indigo } from './themes/light/dropdown.indigo.css.js';\nimport type {\n  IgcPlacement,\n  IgcToggleComponent,\n  IgcToggleEventMap,\n} from '../toggle/types';\nimport { IgcToggleController } from '../toggle/toggle.controller.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { blazorSuppress } from '../common/decorators/blazorSuppress.js';\nimport { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcDropdownGroupComponent from './dropdown-group.js';\nimport IgcDropdownHeaderComponent from './dropdown-header.js';\nimport IgcDropdownItemComponent from './dropdown-item.js';\n\ndefineComponents(\n  IgcDropdownGroupComponent,\n  IgcDropdownHeaderComponent,\n  IgcDropdownItemComponent\n);\n\nexport interface IgcDropdownEventMap extends IgcToggleEventMap {\n  igcChange: CustomEvent<IgcDropdownItemComponent>;\n}\n\n/**\n * Represents a DropDown component.\n *\n * @element igc-dropdown\n *\n * @fires igcChange - Emitted when the selected item changes.\n * @fires igcOpening - Emitted just before the dropdown is open.\n * @fires igcOpened - Emitted after the dropdown is open.\n * @fires igcClosing - Emitter just before the dropdown is closed.\n * @fires igcClosed - Emitted after closing the dropdown.\n *\n * @slot target - Renders the dropdown's target element.\n * @slot - Renders the dropdown list items.\n *\n * @csspart base - The dropdown list wrapper.\n * @csspart list - The dropdown list.\n */\n@themes({ bootstrap, fluent, indigo })\n@blazorAdditionalDependencies(\n  'IgcDropdownItemComponent, IgcDropdownHeaderComponent, IgcDropdownGroupComponent'\n)\nexport default class IgcDropdownComponent\n  extends SizableMixin(\n    EventEmitterMixin<IgcDropdownEventMap, Constructor<LitElement>>(LitElement)\n  )\n  implements IgcToggleComponent\n{\n  public static readonly tagName = 'igc-dropdown';\n\n  public static styles = styles;\n\n  private toggleController!: IgcToggleController;\n  private selectedItem!: IgcDropdownItemComponent | null;\n  private activeItem!: IgcDropdownItemComponent;\n  private target!: HTMLElement;\n\n  private readonly keyDownHandlers: Map<string, Function> = new Map(\n    Object.entries({\n      Escape: this.onEscapeKey,\n      Enter: this.onEnterKey,\n      ArrowUp: this.onArrowUpKeyDown,\n      ArrowDown: this.onArrowDownKeyDown,\n      Home: this.onHomeKey,\n      End: this.onEndKey,\n    })\n  );\n\n  protected get allItems() {\n    return [...this.items, ...this.groups.flatMap((group) => group.items)];\n  }\n\n  @queryAssignedElements({ slot: 'target' })\n  private targetNodes!: Array<HTMLElement>;\n\n  @query('[part=\"base\"]')\n  protected content!: HTMLElement;\n\n  @query('[part=\"list\"]')\n  protected scrollContainer!: HTMLElement;\n\n  @queryAssignedElements({ flatten: true, selector: 'igc-dropdown-item' })\n  protected items!: Array<IgcDropdownItemComponent>;\n\n  @queryAssignedElements({ flatten: true, selector: 'igc-dropdown-group' })\n  protected groups!: Array<IgcDropdownGroupComponent>;\n\n  /** Whether the dropdown should be kept open on selection. */\n  @property({ type: Boolean, attribute: 'keep-open-on-select' })\n  public keepOpenOnSelect = false;\n\n  /** Sets the open state of the component. */\n  @property({ type: Boolean })\n  public open = false;\n\n  /** The preferred placement of the component around the target element.\n   * @type {\"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"right\" | \"right-start\" | \"right-end\" | \"left\" | \"left-start\" | \"left-end\"}\n   */\n  @property()\n  public placement: IgcPlacement = 'bottom-start';\n\n  /** Sets the component's positioning strategy. */\n  @property({ attribute: 'position-strategy' })\n  public positionStrategy: 'absolute' | 'fixed' = 'absolute';\n\n  /** Determines the behavior of the component during scrolling the container. */\n  @property({ attribute: 'scroll-strategy' })\n  public scrollStrategy: 'scroll' | 'block' | 'close' = 'scroll';\n\n  /**\n   * Whether the component should be flipped to the opposite side of the target once it's about to overflow the visible area.\n   * When true, once enough space is detected on its preferred side, it will flip back.\n   */\n  @property({ type: Boolean })\n  public flip = false;\n\n  /** The distance from the target element. */\n  @property({ type: Number })\n  public distance = 0;\n\n  /** Whether the component should be kept open on clicking outside of it. */\n  @property({ type: Boolean, attribute: 'keep-open-on-outside-click' })\n  public keepOpenOnOutsideClick = false;\n\n  /** Whether the dropdown's width should be the same as the target's one. */\n  @property({ type: Boolean, attribute: 'same-width' })\n  public sameWidth = false;\n\n  @watch('open')\n  protected toggleDirectiveChange() {\n    if (!this.target) return;\n    this.toggleController.target = this.target;\n\n    if (this.open) {\n      document.addEventListener('keydown', this.handleKeyDown);\n      this.target.addEventListener('focusout', this.handleFocusout);\n      this.selectedItem = this.allItems.find((i) => i.selected) ?? null;\n    } else {\n      document.removeEventListener('keydown', this.handleKeyDown);\n      this.target.removeEventListener('focusout', this.handleFocusout);\n    }\n\n    this.target.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n  }\n\n  @watch('placement')\n  @watch('flip')\n  @watch('positionStrategy')\n  @watch('closeOnOutsideClick')\n  @watch('distance')\n  @watch('sameWidth')\n  protected updateOptions() {\n    if (!this.toggleController) return;\n\n    this.toggleController.update();\n  }\n\n  @watch('size')\n  protected sizeChange() {\n    this.groups.forEach((g) => g.requestUpdate());\n  }\n\n  constructor() {\n    super();\n    this.toggleController = new IgcToggleController(this, {\n      target: this.target,\n      closeCallback: () => this._hide(),\n    });\n  }\n\n  public override async firstUpdated() {\n    if (this.targetNodes.length) {\n      this.target = this.targetNodes[0];\n      this.target.setAttribute('aria-haspopup', 'listbox');\n    }\n\n    await this.updateComplete;\n    this.setInitialSelection();\n  }\n\n  protected override async getUpdateComplete() {\n    const result = await super.getUpdateComplete();\n    await this.toggleController.rendered;\n    return result;\n  }\n\n  protected setInitialSelection() {\n    const item = this.allItems.filter((item) => item.selected).at(-1);\n    this.allItems.forEach((item) => (item.selected = false));\n    if (item) {\n      this.selectItem(item, false);\n    }\n  }\n\n  protected handleKeyDown = (event: KeyboardEvent) => {\n    const path = event.composedPath();\n    if (!(path.includes(this.target) || path.includes(this.content))) return;\n\n    if (this.keyDownHandlers.has(event.key)) {\n      event.preventDefault();\n      event.stopPropagation();\n      this.keyDownHandlers.get(event.key)?.call(this);\n    }\n  };\n\n  protected onHomeKey() {\n    this.navigateTo(\n      this.allItems.filter((item) => !item.disabled).at(0)!.value\n    );\n  }\n\n  protected onEndKey() {\n    this.navigateTo(\n      this.allItems.filter((item) => !item.disabled).at(-1)!.value\n    );\n  }\n\n  protected onEscapeKey() {\n    this._hide();\n  }\n\n  protected onEnterKey() {\n    this.selectItem(this.activeItem);\n  }\n\n  protected handleClick(event: MouseEvent) {\n    const item = event\n      .composedPath()\n      .find(\n        (e) => e instanceof IgcDropdownItemComponent\n      ) as IgcDropdownItemComponent;\n\n    if (!item || item.disabled) return;\n\n    this.selectItem(item);\n  }\n\n  protected handleTargetClick = async () => {\n    if (!this.open) {\n      if (!this.handleOpening()) return;\n      this.show();\n      await this.updateComplete;\n      this.emitEvent('igcOpened');\n    } else {\n      this._hide();\n    }\n  };\n\n  protected handleOpening() {\n    const args = { cancelable: true };\n    return this.emitEvent('igcOpening', args);\n  }\n\n  protected handleClosing(): boolean {\n    const args = { cancelable: true };\n    return this.emitEvent('igcClosing', args);\n  }\n\n  protected handleChange(item: IgcDropdownItemComponent) {\n    const args = { detail: item };\n    this.emitEvent('igcChange', args);\n  }\n\n  protected handleSlotChange() {\n    if (!this.target) return;\n    this.target.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n  }\n\n  protected handleFocusout(event: Event) {\n    event.preventDefault();\n    (event.target as HTMLElement).focus();\n  }\n\n  protected getItem(value: string) {\n    let itemIndex = -1;\n    let item!: IgcDropdownItemComponent;\n    this.allItems.find((i, index) => {\n      if (i.value === value) {\n        item = i;\n        itemIndex = index;\n      }\n    });\n    return { item: item, index: itemIndex };\n  }\n\n  protected activateItem(value: IgcDropdownItemComponent) {\n    if (!value) return;\n\n    if (this.activeItem) {\n      this.activeItem.active = false;\n    }\n\n    this.activeItem = value;\n    this.activeItem.active = true;\n  }\n\n  protected selectItem(\n    item: IgcDropdownItemComponent,\n    emit = true\n  ): IgcDropdownItemComponent | null {\n    if (!item) return null;\n\n    if (this.selectedItem) {\n      this.selectedItem.selected = false;\n    }\n\n    this.activateItem(item);\n    this.selectedItem = item;\n    this.selectedItem.selected = true;\n    if (emit) this.handleChange(this.selectedItem);\n    if (emit && !this.keepOpenOnSelect) this._hide();\n\n    return this.selectedItem;\n  }\n\n  protected navigate(direction: -1 | 1, currentIndex?: number) {\n    let index = -1;\n    if (this.activeItem) {\n      index = currentIndex\n        ? currentIndex\n        : [...this.allItems].indexOf(this.activeItem) ?? index;\n    }\n\n    const newIndex = this.getNearestSiblingFocusableItemIndex(index, direction);\n    this.navigateItem(newIndex);\n  }\n\n  private navigateItem(newIndex: number): IgcDropdownItemComponent | null {\n    if (!this.allItems) {\n      return null;\n    }\n\n    if (newIndex < 0 || newIndex >= this.allItems.length) {\n      return null;\n    }\n\n    const newItem = this.allItems[newIndex];\n\n    this.activateItem(newItem);\n    this.scrollToHiddenItem(newItem);\n\n    return newItem;\n  }\n\n  private scrollToHiddenItem(newItem: IgcDropdownItemComponent) {\n    const elementRect = newItem.getBoundingClientRect();\n    const parentRect = this.content.getBoundingClientRect();\n    if (parentRect.top > elementRect.top) {\n      this.content.scrollTop -= parentRect.top - elementRect.top;\n    }\n\n    if (parentRect.bottom < elementRect.bottom) {\n      this.content.scrollTop += elementRect.bottom - parentRect.bottom;\n    }\n  }\n\n  private getNearestSiblingFocusableItemIndex(\n    startIndex: number,\n    direction: -1 | 1\n  ): number {\n    let index = startIndex;\n    const items = this.allItems;\n    if (!items) {\n      return -1;\n    }\n\n    while (items[index + direction] && items[index + direction].disabled) {\n      index += direction;\n    }\n\n    index += direction;\n\n    return index > -1 && index < items.length ? index : -1;\n  }\n\n  private navigateNext() {\n    this.navigate(1);\n  }\n\n  private navigatePrev() {\n    this.navigate(-1);\n  }\n\n  private onArrowDownKeyDown() {\n    this.navigateNext();\n  }\n\n  private onArrowUpKeyDown() {\n    this.navigatePrev();\n  }\n\n  private async _hide(emit = true) {\n    if (emit && !this.handleClosing()) return;\n\n    if (!this.open) return;\n\n    this.open = false;\n\n    if (emit) {\n      await this.updateComplete;\n      this.emitEvent('igcClosed');\n    }\n  }\n\n  /** Shows the dropdown. */\n  @blazorSuppress()\n  public show(target?: HTMLElement) {\n    if (this.open && !target) return;\n\n    if (target) this.target = target;\n\n    this.open = true;\n  }\n\n  /** Hides the dropdown. */\n  public hide(): void {\n    this._hide(false);\n  }\n\n  /** Toggles the open state of the dropdown. */\n  @blazorSuppress()\n  public toggle(target?: HTMLElement): void {\n    this.open ? this.hide() : this.show(target);\n  }\n\n  /** Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null. */\n  public navigateTo(value: string): IgcDropdownItemComponent | null;\n  /** Navigates to the item at the specified index. If it exists, returns the found item, otherwise - null. */\n  public navigateTo(index: number): IgcDropdownItemComponent | null;\n  /** Navigates to the specified item. If it exists, returns the found item, otherwise - null. */\n  @blazorSuppress()\n  public navigateTo(value: string | number): IgcDropdownItemComponent | null {\n    const index =\n      typeof value === 'string' ? this.getItem(value).index : (value as number);\n\n    return this.navigateItem(index);\n  }\n\n  /** Selects the item with the specified value. If it exists, returns the found item, otherwise - null. */\n  public select(value: string): IgcDropdownItemComponent | null;\n  /** Selects the item at the specified index. If it exists, returns the found item, otherwise - null. */\n  public select(index: number): IgcDropdownItemComponent | null;\n  /** Selects the specified item. If it exists, returns the found item, otherwise - null. */\n  @blazorSuppress()\n  public select(value: string | number): IgcDropdownItemComponent | null {\n    const item =\n      typeof value === 'string'\n        ? this.getItem(value).item\n        : this.allItems[value as number];\n\n    return this.selectItem(item, false);\n  }\n\n  /**  Clears the current selection of the dropdown. */\n  public clearSelection() {\n    if (this.selectedItem) {\n      this.selectedItem.selected = false;\n    }\n    this.selectedItem = null;\n  }\n\n  protected override render() {\n    return html`\n      <slot\n        id=\"igcDDLTarget\"\n        name=\"target\"\n        @click=${this.handleTargetClick}\n        @slotchange=${this.handleSlotChange}\n      >\n      </slot>\n      <div\n        part=\"base\"\n        style=${styleMap({ position: this.positionStrategy })}\n        @click=${this.handleClick}\n        ${this.toggleController.toggleDirective}\n      >\n        <div role=\"listbox\" part=\"list\" aria-labelledby=\"igcDDLTarget\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-dropdown': IgcDropdownComponent;\n  }\n}\n"]}

package/components/expansion-panel/expansion-panel.d.ts

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { Constructor } from '../common/mixins/constructor.js';
-import '../icon/icon.js';
 export interface IgcExpansionPanelComponentEventMap {
     igcOpening: CustomEvent<IgcExpansionPanelComponent>;
     igcOpened: CustomEvent<IgcExpansionPanelComponent>;
@@ -33,6 +32,7 @@ declare const IgcExpansionPanelComponent_base: import("../common/mixins/construc
 export default class IgcExpansionPanelComponent extends IgcExpansionPanelComponent_base {
     static readonly tagName = "igc-expansion-panel";
     static styles: import("lit").CSSResult;
+    private static readonly increment;
     /** Indicates whether the contents of the control should be visible. */
     open: boolean;
     /** Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions. */

package/components/expansion-panel/expansion-panel.js

@@ -4,6 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var IgcExpansionPanelComponent_1;
 import { LitElement, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
@@ -12,9 +13,11 @@ import { styles } from './themes/light/expansion-panel.base.css.js';
 import { styles as bootstrap } from './themes/light/expansion-panel.bootstrap.css.js';
 import { styles as fluent } from './themes/light/expansion-panel.fluent.css.js';
 import { styles as indigo } from './themes/light/expansion-panel.indigo.css.js';
-import '../icon/icon.js';
-let NEXT_ID = 0;
-let IgcExpansionPanelComponent = class IgcExpansionPanelComponent extends EventEmitterMixin(LitElement) {
+import { createCounter } from '../common/util.js';
+import { defineComponents } from '../common/definitions/defineComponents.js';
+import IgcIconComponent from '../icon/icon.js';
+defineComponents(IgcIconComponent);
+let IgcExpansionPanelComponent = IgcExpansionPanelComponent_1 = class IgcExpansionPanelComponent extends EventEmitterMixin(LitElement) {
     constructor() {
         super(...arguments);
         this.open = false;
@@ -23,8 +26,9 @@ let IgcExpansionPanelComponent = class IgcExpansionPanelComponent extends EventE
     }
     connectedCallback() {
         super.connectedCallback();
-        const id = this.getAttribute('id');
-        this.panelId = id ? id : 'igc-expansion-panel-' + ++NEXT_ID;
+        this.panelId =
+            this.getAttribute('id') ||
+                `igc-expansion-panel-${IgcExpansionPanelComponent_1.increment()}`;
     }
     handleClicked() {
         this.panelHeader.focus();
@@ -149,6 +153,7 @@ let IgcExpansionPanelComponent = class IgcExpansionPanelComponent extends EventE
 };
 IgcExpansionPanelComponent.tagName = 'igc-expansion-panel';
 IgcExpansionPanelComponent.styles = styles;
+IgcExpansionPanelComponent.increment = createCounter();
 __decorate([
     property({ reflect: true, type: Boolean })
 ], IgcExpansionPanelComponent.prototype, "open", void 0);
@@ -161,7 +166,7 @@ __decorate([
 __decorate([
     query('[part~="header"]', true)
 ], IgcExpansionPanelComponent.prototype, "panelHeader", void 0);
-IgcExpansionPanelComponent = __decorate([
+IgcExpansionPanelComponent = IgcExpansionPanelComponent_1 = __decorate([
     themes({ bootstrap, fluent, indigo })
 ], IgcExpansionPanelComponent);
 export default IgcExpansionPanelComponent;

package/components/expansion-panel/expansion-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"expansion-panel.js","sourceRoot":"","sources":["../../../src/components/expansion-panel/expansion-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/expansion-panel.base.css.js';\nimport { styles as bootstrap } from './themes/light/expansion-panel.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/expansion-panel.fluent.css.js';\nimport { styles as indigo } from './themes/light/expansion-panel.indigo.css.js';\nimport '../icon/icon.js';\n\nlet NEXT_ID = 0;\nexport interface IgcExpansionPanelComponentEventMap {\n  igcOpening: CustomEvent<IgcExpansionPanelComponent>;\n  igcOpened: CustomEvent<IgcExpansionPanelComponent>;\n  igcClosing: CustomEvent<IgcExpansionPanelComponent>;\n  igcClosed: CustomEvent<IgcExpansionPanelComponent>;\n}\n\n/**\n * The Expansion Panel Component provides a way to display information in a toggleable way -\n * compact summary view containing title and description and expanded detail view containing\n * additional content to the summary header.\n *\n * @element igc-expansion-panel\n *\n * @slot title - renders the title of the panel's header\n * @slot subtitle - renders the subtitle of the panel's header\n * @slot indicator - renders the expand/collapsed indicator\n *\n * @fires igcOpening - Emitted before opening the expansion panel.\n * @fires igcOpened - Emitted after the expansion panel is opened.\n * @fires igcClosing - Emitted before closing the expansion panel.\n * @fires igcClosed - Emitted after the expansion panel is closed.\n *\n * @csspart header - The container of the expansion indicator, title and subtitle.\n * @csspart title -  The title container.\n * @csspart subtitle - The subtitle container.\n * @csspart indicator - The indicator container.\n * @csspart content - The expansion panel's content wrapper.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcExpansionPanelComponent extends EventEmitterMixin<\n  IgcExpansionPanelComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-expansion-panel';\n  public static styles = styles;\n\n  /** Indicates whether the contents of the control should be visible. */\n  @property({ reflect: true, type: Boolean })\n  public open = false;\n\n  /** Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions. */\n  @property({ reflect: true, type: Boolean })\n  public disabled = false;\n\n  /** The indicator position of the expansion panel. */\n  @property({ reflect: true, attribute: 'indicator-position' })\n  public indicatorPosition: 'start' | 'end' | 'none' = 'start';\n\n  @query('[part~=\"header\"]', true)\n  protected panelHeader!: HTMLElement;\n\n  private panelId!: string;\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    const id = this.getAttribute('id');\n    this.panelId! = id ? id : 'igc-expansion-panel-' + ++NEXT_ID;\n  }\n\n  private handleClicked() {\n    this.panelHeader!.focus();\n\n    if (this.open) {\n      this.closeWithEvent();\n    } else {\n      this.openWithEvent();\n    }\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    switch (event.key.toLowerCase()) {\n      case 'arrowdown':\n      case 'down':\n        if (event.altKey) {\n          this.openWithEvent();\n        }\n        break;\n      case 'arrowup':\n      case 'up':\n        if (event.altKey) {\n          this.closeWithEvent();\n        }\n        break;\n      case 'enter':\n      case ' ':\n        this.open ? this.closeWithEvent() : this.openWithEvent();\n        break;\n    }\n  }\n\n  /**\n   * @private\n   * Opens the panel.\n   */\n  private openWithEvent() {\n    if (this.open) {\n      return;\n    }\n\n    const args = {\n      cancelable: true,\n      detail: this,\n    };\n\n    const allowed = this.emitEvent('igcOpening', args);\n\n    if (!allowed) {\n      return;\n    }\n\n    this.open = true;\n    this.emitEvent('igcOpened', { detail: this });\n  }\n\n  /**\n   * @private\n   * Closes the panel.\n   */\n  private closeWithEvent() {\n    if (!this.open) {\n      return;\n    }\n\n    const args = {\n      cancelable: true,\n      detail: this,\n    };\n\n    const allowed = this.emitEvent('igcClosing', args);\n\n    if (!allowed) {\n      return;\n    }\n\n    this.open = false;\n    this.emitEvent('igcClosed', { detail: this });\n  }\n\n  /** Toggles panel open state. */\n  public toggle(): void {\n    this.open = !this.open;\n  }\n\n  /** Hides the panel content. */\n  public hide(): void {\n    this.open = false;\n  }\n\n  /** Shows the panel content. */\n  public show(): void {\n    this.open = true;\n  }\n\n  private indicatorTemplate() {\n    return html`\n      <div part=\"indicator\" aria-hidden=\"true\">\n        <slot name=\"indicator\">\n          <igc-icon\n            name=${this.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\n            collection=\"internal\"\n          >\n          </igc-icon>\n        </slot>\n      </div>\n    `;\n  }\n\n  private headerTemplate() {\n    return html`\n      <div\n        part=\"header\"\n        id=\"${this.panelId!}-header\"\n        role=\"button\"\n        aria-expanded=\"${this.open}\"\n        aria-disabled=\"${this.disabled}\"\n        aria-controls=\"${this.panelId!}-content\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        @click=${this.handleClicked}\n        @keydown=${this.handleKeydown}\n      >\n        ${this.indicatorTemplate()}\n        <div>\n          <slot name=\"title\" part=\"title\"></slot>\n          <slot name=\"subtitle\" part=\"subtitle\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private contentTemplate() {\n    return html`\n      <div\n        part=\"content\"\n        role=\"region\"\n        id=\"${this.panelId!}-content\"\n        aria-labelledby=\"${this.panelId!}-header\"\n      >\n        <slot ?hidden=${!this.open}></slot>\n      </div>\n    `;\n  }\n\n  protected override render() {\n    return html` ${this.headerTemplate()} ${this.contentTemplate()}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-expansion-panel': IgcExpansionPanelComponent;\n  }\n}\n"]}
+{"version":3,"file":"expansion-panel.js","sourceRoot":"","sources":["../../../src/components/expansion-panel/expansion-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/expansion-panel.base.css.js';\nimport { styles as bootstrap } from './themes/light/expansion-panel.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/expansion-panel.fluent.css.js';\nimport { styles as indigo } from './themes/light/expansion-panel.indigo.css.js';\nimport { createCounter } from '../common/util.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcIconComponent from '../icon/icon.js';\n\ndefineComponents(IgcIconComponent);\n\nexport interface IgcExpansionPanelComponentEventMap {\n  igcOpening: CustomEvent<IgcExpansionPanelComponent>;\n  igcOpened: CustomEvent<IgcExpansionPanelComponent>;\n  igcClosing: CustomEvent<IgcExpansionPanelComponent>;\n  igcClosed: CustomEvent<IgcExpansionPanelComponent>;\n}\n\n/**\n * The Expansion Panel Component provides a way to display information in a toggleable way -\n * compact summary view containing title and description and expanded detail view containing\n * additional content to the summary header.\n *\n * @element igc-expansion-panel\n *\n * @slot title - renders the title of the panel's header\n * @slot subtitle - renders the subtitle of the panel's header\n * @slot indicator - renders the expand/collapsed indicator\n *\n * @fires igcOpening - Emitted before opening the expansion panel.\n * @fires igcOpened - Emitted after the expansion panel is opened.\n * @fires igcClosing - Emitted before closing the expansion panel.\n * @fires igcClosed - Emitted after the expansion panel is closed.\n *\n * @csspart header - The container of the expansion indicator, title and subtitle.\n * @csspart title -  The title container.\n * @csspart subtitle - The subtitle container.\n * @csspart indicator - The indicator container.\n * @csspart content - The expansion panel's content wrapper.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcExpansionPanelComponent extends EventEmitterMixin<\n  IgcExpansionPanelComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-expansion-panel';\n  public static styles = styles;\n  private static readonly increment = createCounter();\n\n  /** Indicates whether the contents of the control should be visible. */\n  @property({ reflect: true, type: Boolean })\n  public open = false;\n\n  /** Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions. */\n  @property({ reflect: true, type: Boolean })\n  public disabled = false;\n\n  /** The indicator position of the expansion panel. */\n  @property({ reflect: true, attribute: 'indicator-position' })\n  public indicatorPosition: 'start' | 'end' | 'none' = 'start';\n\n  @query('[part~=\"header\"]', true)\n  protected panelHeader!: HTMLElement;\n\n  private panelId!: string;\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.panelId =\n      this.getAttribute('id') ||\n      `igc-expansion-panel-${IgcExpansionPanelComponent.increment()}`;\n  }\n\n  private handleClicked() {\n    this.panelHeader!.focus();\n\n    if (this.open) {\n      this.closeWithEvent();\n    } else {\n      this.openWithEvent();\n    }\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    switch (event.key.toLowerCase()) {\n      case 'arrowdown':\n      case 'down':\n        if (event.altKey) {\n          this.openWithEvent();\n        }\n        break;\n      case 'arrowup':\n      case 'up':\n        if (event.altKey) {\n          this.closeWithEvent();\n        }\n        break;\n      case 'enter':\n      case ' ':\n        this.open ? this.closeWithEvent() : this.openWithEvent();\n        break;\n    }\n  }\n\n  /**\n   * @private\n   * Opens the panel.\n   */\n  private openWithEvent() {\n    if (this.open) {\n      return;\n    }\n\n    const args = {\n      cancelable: true,\n      detail: this,\n    };\n\n    const allowed = this.emitEvent('igcOpening', args);\n\n    if (!allowed) {\n      return;\n    }\n\n    this.open = true;\n    this.emitEvent('igcOpened', { detail: this });\n  }\n\n  /**\n   * @private\n   * Closes the panel.\n   */\n  private closeWithEvent() {\n    if (!this.open) {\n      return;\n    }\n\n    const args = {\n      cancelable: true,\n      detail: this,\n    };\n\n    const allowed = this.emitEvent('igcClosing', args);\n\n    if (!allowed) {\n      return;\n    }\n\n    this.open = false;\n    this.emitEvent('igcClosed', { detail: this });\n  }\n\n  /** Toggles panel open state. */\n  public toggle(): void {\n    this.open = !this.open;\n  }\n\n  /** Hides the panel content. */\n  public hide(): void {\n    this.open = false;\n  }\n\n  /** Shows the panel content. */\n  public show(): void {\n    this.open = true;\n  }\n\n  private indicatorTemplate() {\n    return html`\n      <div part=\"indicator\" aria-hidden=\"true\">\n        <slot name=\"indicator\">\n          <igc-icon\n            name=${this.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\n            collection=\"internal\"\n          >\n          </igc-icon>\n        </slot>\n      </div>\n    `;\n  }\n\n  private headerTemplate() {\n    return html`\n      <div\n        part=\"header\"\n        id=\"${this.panelId!}-header\"\n        role=\"button\"\n        aria-expanded=\"${this.open}\"\n        aria-disabled=\"${this.disabled}\"\n        aria-controls=\"${this.panelId!}-content\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        @click=${this.handleClicked}\n        @keydown=${this.handleKeydown}\n      >\n        ${this.indicatorTemplate()}\n        <div>\n          <slot name=\"title\" part=\"title\"></slot>\n          <slot name=\"subtitle\" part=\"subtitle\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private contentTemplate() {\n    return html`\n      <div\n        part=\"content\"\n        role=\"region\"\n        id=\"${this.panelId!}-content\"\n        aria-labelledby=\"${this.panelId!}-header\"\n      >\n        <slot ?hidden=${!this.open}></slot>\n      </div>\n    `;\n  }\n\n  protected override render() {\n    return html` ${this.headerTemplate()} ${this.contentTemplate()}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-expansion-panel': IgcExpansionPanelComponent;\n  }\n}\n"]}

package/components/expansion-panel/themes/light/expansion-panel.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{color:hsla(var(--igc-gray-900), var(--igc-gray-a));width:auto;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[part=header]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;padding:calc(var(--igc-spacing-large)*2) calc(var(--igc-spacing-large)*3)}[part=header]:focus,[part=header]:active{outline:rgba(0,0,0,0);background:hsla(var(--igc-gray-100), var(--igc-gray-a))}[part=header] *:not([part~=indicator]){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex:1 0 0%;flex:1 0 0%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[part=title]::slotted(*){font-family:var(--igc-h5-font-family);font-weight:var(--igc-h5-font-weight);font-size:var(--igc-h5-font-size);font-style:var(--igc-h5-font-style);letter-spacing:var(--igc-h5-letter-spacing);text-transform:var(--igc-h5-text-transform);line-height:var(--igc-h5-line-height);margin-top:var(--igc-h5-margin-top);margin-bottom:var(--igc-h5-margin-bottom);white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;margin:0}[part=subtitle]{color:hsla(var(--igc-gray-700), var(--igc-gray-a))}[part=subtitle]::slotted(*){font-family:var(--igc-subtitle-2-font-family);font-weight:var(--igc-subtitle-2-font-weight);font-size:var(--igc-subtitle-2-font-size);font-style:var(--igc-subtitle-2-font-style);letter-spacing:var(--igc-subtitle-2-letter-spacing);text-transform:var(--igc-subtitle-2-text-transform);line-height:var(--igc-subtitle-2-line-height);margin-top:var(--igc-subtitle-2-margin-top);margin-bottom:var(--igc-subtitle-2-margin-bottom);white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden}:host([open]) [part~=content]{font-family:var(--igc-body-2-font-family);font-weight:var(--igc-body-2-font-weight);font-size:var(--igc-body-2-font-size);font-style:var(--igc-body-2-font-style);letter-spacing:var(--igc-body-2-letter-spacing);text-transform:var(--igc-body-2-text-transform);line-height:var(--igc-body-2-line-height);margin-top:var(--igc-body-2-margin-top);margin-bottom:var(--igc-body-2-margin-bottom);overflow:hidden;padding:calc(var(--igc-spacing-large)*2) calc(var(--igc-spacing-large)*3)}[part~=indicator]{color:hsla(var(--igc-gray-800), var(--igc-gray-a))}[part~=indicator] igc-icon{--size: 1.5rem}:host([indicator-position=start]) [part~=indicator]{-webkit-margin-end:calc(var(--igc-spacing-large)*2);margin-inline-end:calc(var(--igc-spacing-large)*2)}:host([indicator-position=end]) [part~=indicator]{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-margin-start:calc(var(--igc-spacing-large)*2);margin-inline-start:calc(var(--igc-spacing-large)*2)}:host([indicator-position=none]) [part~=indicator]{display:none}:host([disabled]){pointer-events:none}:host([disabled]) [part=title],:host([disabled]) [part=subtitle],:host([disabled]) [part~=indicator]{color:var(--disabled-color, hsla(var(--igc-gray-500), var(--igc-gray-a)))}`;
+export const styles = css `:host{--lines-clamped: 1;color:hsla(var(--igc-gray-900), var(--igc-gray-a));background:hsla(var(--igc-surface-500), var(--igc-surface-a));width:auto;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[part=header]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;padding:calc(var(--igc-spacing-large)*2) calc(var(--igc-spacing-large)*3)}[part=header]:focus,[part=header]:active{outline:rgba(0,0,0,0);background:hsla(var(--igc-gray-100), var(--igc-gray-a))}[part=header] *:not([part~=indicator]){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex:1 0 0%;flex:1 0 0%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[part=title]::slotted(*){font-family:var(--igc-h5-font-family);font-weight:var(--igc-h5-font-weight);font-size:var(--igc-h5-font-size);font-style:var(--igc-h5-font-style);letter-spacing:var(--igc-h5-letter-spacing);text-transform:var(--igc-h5-text-transform);line-height:var(--igc-h5-line-height);margin-top:var(--igc-h5-margin-top);margin-bottom:var(--igc-h5-margin-bottom);display:-webkit-inline-box;-webkit-line-clamp:var(--lines-clamped);-webkit-box-orient:vertical;overflow:hidden;margin:0}[part=subtitle]{color:hsla(var(--igc-gray-700), var(--igc-gray-a))}[part=subtitle]::slotted(*){font-family:var(--igc-subtitle-2-font-family);font-weight:var(--igc-subtitle-2-font-weight);font-size:var(--igc-subtitle-2-font-size);font-style:var(--igc-subtitle-2-font-style);letter-spacing:var(--igc-subtitle-2-letter-spacing);text-transform:var(--igc-subtitle-2-text-transform);line-height:var(--igc-subtitle-2-line-height);margin-top:var(--igc-subtitle-2-margin-top);margin-bottom:var(--igc-subtitle-2-margin-bottom);white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden}:host([open]) [part~=content]{font-family:var(--igc-body-2-font-family);font-weight:var(--igc-body-2-font-weight);font-size:var(--igc-body-2-font-size);font-style:var(--igc-body-2-font-style);letter-spacing:var(--igc-body-2-letter-spacing);text-transform:var(--igc-body-2-text-transform);line-height:var(--igc-body-2-line-height);margin-top:var(--igc-body-2-margin-top);margin-bottom:var(--igc-body-2-margin-bottom);overflow:hidden;padding:calc(var(--igc-spacing-large)*2) calc(var(--igc-spacing-large)*3)}[part~=indicator]{color:hsla(var(--igc-gray-800), var(--igc-gray-a))}[part~=indicator] igc-icon{--size: 1.5rem}:host([indicator-position=start]) [part~=indicator]{-webkit-margin-end:calc(var(--igc-spacing-large)*2);margin-inline-end:calc(var(--igc-spacing-large)*2)}:host([indicator-position=end]) [part~=indicator]{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-margin-start:calc(var(--igc-spacing-large)*2);margin-inline-start:calc(var(--igc-spacing-large)*2)}:host([indicator-position=none]) [part~=indicator]{display:none}:host([disabled]){pointer-events:none}:host([disabled]) [part=title],:host([disabled]) [part=subtitle],:host([disabled]) [part~=indicator]{color:var(--disabled-color, hsla(var(--igc-gray-500), var(--igc-gray-a)))}`;
 //# sourceMappingURL=expansion-panel.base.css.js.map