igniteui-webcomponents 3.3.0 → 4.0.0-alpha.2

package/components/select/select-group.js

@@ -0,0 +1,69 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { watch } from '../common/decorators/watch.js';
+import IgcDropdownGroupComponent from '../dropdown/dropdown-group.js';
+export default class IgcSelectGroupComponent extends IgcDropdownGroupComponent {
+    constructor() {
+        super();
+        this.disabled = false;
+        this.observer = new MutationObserver(this.updateControlledItems.bind(this));
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
+    getParent() {
+        return this.closest('igc-select');
+    }
+    async firstUpdated() {
+        await this.updateComplete;
+        this.controlledItems = this.activeItems;
+        this.setAttribute('role', 'presentation');
+        this.items.forEach((i) => {
+            this.observer.observe(i, {
+                attributes: true,
+                attributeFilter: ['disabled'],
+            });
+        });
+        this.updateDisabled();
+    }
+    updateControlledItems(mutations) {
+        mutations.forEach((mutation) => {
+            const item = mutation.target;
+            if (!this.disabled) {
+                this.controlledItems = this.activeItems;
+            }
+            if (this.disabled && !item.disabled) {
+                item.disabled = true;
+            }
+        });
+    }
+    updateDisabled() {
+        var _a;
+        this.disabled
+            ? this.setAttribute('aria-disabled', 'true')
+            : this.removeAttribute('aria-disabled');
+        (_a = this.controlledItems) === null || _a === void 0 ? void 0 : _a.forEach((i) => (i.disabled = this.disabled));
+    }
+}
+IgcSelectGroupComponent.tagName = 'igc-select-group';
+__decorate([
+    queryAssignedElements({ flatten: true, selector: 'igc-select-item' })
+], IgcSelectGroupComponent.prototype, "items", void 0);
+__decorate([
+    queryAssignedElements({
+        flatten: true,
+        selector: 'igc-select-item:not([disabled])',
+    })
+], IgcSelectGroupComponent.prototype, "activeItems", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], IgcSelectGroupComponent.prototype, "disabled", void 0);
+__decorate([
+    watch('disabled', { waitUntilFirstUpdate: true })
+], IgcSelectGroupComponent.prototype, "updateDisabled", null);
+//# sourceMappingURL=select-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-group.js","sourceRoot":"","sources":["../../../src/components/select/select-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,yBAAyB,MAAM,+BAA+B,CAAC;AAWtE,MAAM,CAAC,OAAO,OAAO,uBAAwB,SAAQ,yBAAyB;IAoB5E;QACE,KAAK,EAAE,CAAC;QAHH,aAAQ,GAAG,KAAK,CAAC;QAKtB,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC9E,CAAC;IAEe,oBAAoB;QAClC,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IAC7B,CAAC;IAEkB,SAAS;QAC1B,OAAO,IAAI,CAAC,OAAO,CAAC,YAAY,CAAE,CAAC;IACrC,CAAC;IAEkB,KAAK,CAAC,YAAY;QACnC,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC;QACxC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;QAE1C,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;YACvB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAE;gBACvB,UAAU,EAAE,IAAI;gBAChB,eAAe,EAAE,CAAC,UAAU,CAAC;aAC9B,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAES,qBAAqB,CAAC,SAA2B;QACzD,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;YAC7B,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAgC,CAAC;YAEvD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC;aACzC;YAED,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBACnC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;aACtB;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAGS,cAAc;;QACtB,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;YAC5C,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QAE1C,MAAA,IAAI,CAAC,eAAe,0CAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IACrE,CAAC;;AApE+B,+BAAO,GAAG,kBAAkB,CAAC;AAO7D;IADC,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC;sDAChB;AAMtD;IAJC,qBAAqB,CAAC;QACrB,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,iCAAiC;KAC5C,CAAC;4DACoD;AAGtD;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDACnB;AA8CxB;IADC,KAAK,CAAC,UAAU,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;6DAOjD","sourcesContent":["import { property, queryAssignedElements } from 'lit/decorators.js';\nimport { watch } from '../common/decorators/watch.js';\nimport IgcDropdownGroupComponent from '../dropdown/dropdown-group.js';\nimport IgcSelectItemComponent from './select-item.js';\n\n/**\n * @element igc-select-group - A container for a group of `igc-select-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 */\nexport default class IgcSelectGroupComponent extends IgcDropdownGroupComponent {\n  /** @private */\n  public static override readonly tagName = 'igc-select-group';\n\n  private observer!: MutationObserver;\n  private controlledItems!: Array<IgcSelectItemComponent>;\n\n  /** All child `igc-select-item`s. */\n  @queryAssignedElements({ flatten: true, selector: 'igc-select-item' })\n  public override items!: Array<IgcSelectItemComponent>;\n\n  @queryAssignedElements({\n    flatten: true,\n    selector: 'igc-select-item:not([disabled])',\n  })\n  protected activeItems!: Array<IgcSelectItemComponent>;\n\n  @property({ reflect: true, type: Boolean })\n  public disabled = false;\n\n  constructor() {\n    super();\n\n    this.observer = new MutationObserver(this.updateControlledItems.bind(this));\n  }\n\n  public override disconnectedCallback() {\n    this.observer.disconnect();\n  }\n\n  protected override getParent() {\n    return this.closest('igc-select')!;\n  }\n\n  protected override async firstUpdated() {\n    await this.updateComplete;\n    this.controlledItems = this.activeItems;\n    this.setAttribute('role', 'presentation');\n\n    this.items.forEach((i) => {\n      this.observer.observe(i, {\n        attributes: true,\n        attributeFilter: ['disabled'],\n      });\n    });\n\n    this.updateDisabled();\n  }\n\n  protected updateControlledItems(mutations: MutationRecord[]) {\n    mutations.forEach((mutation) => {\n      const item = mutation.target as IgcSelectItemComponent;\n\n      if (!this.disabled) {\n        this.controlledItems = this.activeItems;\n      }\n\n      if (this.disabled && !item.disabled) {\n        item.disabled = true;\n      }\n    });\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  protected updateDisabled() {\n    this.disabled\n      ? this.setAttribute('aria-disabled', 'true')\n      : this.removeAttribute('aria-disabled');\n\n    this.controlledItems?.forEach((i) => (i.disabled = this.disabled));\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-select-group': IgcSelectGroupComponent;\n  }\n}\n"]}

package/components/select/select-header.d.ts

@@ -0,0 +1,15 @@
+import IgcDropdownHeaderComponent from '../dropdown/dropdown-header.js';
+/**
+ * @element igc-select-header - Represents a header item in a select component.
+ *
+ * @slot - Renders the header.
+ */
+export default class IgcSelectHeaderComponent extends IgcDropdownHeaderComponent {
+    /** @private */
+    static readonly tagName = "igc-select-header";
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-select-header': IgcSelectHeaderComponent;
+    }
+}

package/components/select/select-header.js

@@ -0,0 +1,5 @@
+import IgcDropdownHeaderComponent from '../dropdown/dropdown-header.js';
+export default class IgcSelectHeaderComponent extends IgcDropdownHeaderComponent {
+}
+IgcSelectHeaderComponent.tagName = 'igc-select-header';
+//# sourceMappingURL=select-header.js.map

package/components/select/select-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-header.js","sourceRoot":"","sources":["../../../src/components/select/select-header.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,MAAM,gCAAgC,CAAC;AAOxE,MAAM,CAAC,OAAO,OAAO,wBAAyB,SAAQ,0BAA0B;;AAE9C,gCAAO,GAAG,mBAAmB,CAAC","sourcesContent":["import IgcDropdownHeaderComponent from '../dropdown/dropdown-header.js';\n\n/**\n * @element igc-select-header - Represents a header item in a select component.\n *\n * @slot - Renders the header.\n */\nexport default class IgcSelectHeaderComponent extends IgcDropdownHeaderComponent {\n  /** @private */\n  public static override readonly tagName = 'igc-select-header';\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-select-header': IgcSelectHeaderComponent;\n  }\n}\n"]}

package/components/select/select-item.d.ts

@@ -0,0 +1,30 @@
+import IgcDropdownItemComponent from '../dropdown/dropdown-item.js';
+/**
+ * Represents an item in a select list.
+ *
+ * @element igc-select-item
+ *
+ * @slot - Renders the all content bar the prefix and suffix.
+ * @slot prefix - Renders content before the main content area.
+ * @slot suffix - Renders content after the main content area.
+ *
+ * @csspart prefix - The prefix wrapper.
+ * @csspart content - The main content wrapper.
+ * @csspart suffix - The suffix wrapper.
+ */
+export default class IgcSelectItemComponent extends IgcDropdownItemComponent {
+    private content;
+    /** @private */
+    static readonly tagName = "igc-select-item";
+    constructor();
+    protected activeChange(): void;
+    /** Returns the text of the item without the prefix and suffix content. */
+    get textContent(): string;
+    /** Sets the textContent of the item without touching the prefix and suffix content. */
+    set textContent(value: string);
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-select-item': IgcSelectItemComponent;
+    }
+}

package/components/select/select-item.js

@@ -0,0 +1,39 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+import { queryAssignedNodes } from 'lit/decorators.js';
+import { watch } from '../common/decorators/watch.js';
+import IgcDropdownItemComponent from '../dropdown/dropdown-item.js';
+export default class IgcSelectItemComponent extends IgcDropdownItemComponent {
+    constructor() {
+        super();
+    }
+    activeChange() {
+        this.tabIndex = this.active ? 0 : -1;
+        if (this.active) {
+            this.focus();
+        }
+    }
+    get textContent() {
+        return this.content
+            .map((t) => { var _a; return (_a = t.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })
+            .filter((t) => t !== '')
+            .join(' ');
+    }
+    set textContent(value) {
+        const text = new Text(value);
+        this.content.forEach((n) => n.remove());
+        this.appendChild(text);
+    }
+}
+IgcSelectItemComponent.tagName = 'igc-select-item';
+__decorate([
+    queryAssignedNodes({ flatten: true })
+], IgcSelectItemComponent.prototype, "content", void 0);
+__decorate([
+    watch('active')
+], IgcSelectItemComponent.prototype, "activeChange", null);
+//# sourceMappingURL=select-item.js.map

package/components/select/select-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-item.js","sourceRoot":"","sources":["../../../src/components/select/select-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,wBAAwB,MAAM,8BAA8B,CAAC;AAepE,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,wBAAwB;IAO1E;QACE,KAAK,EAAE,CAAC;IACV,CAAC;IAGS,YAAY;QACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAErC,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;IACH,CAAC;IAGD,IAAoB,WAAW;QAC7B,OAAO,IAAI,CAAC,OAAO;aAChB,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,WAAC,OAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAA,EAAA,CAAC;aACjC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;aACvB,IAAI,CAAC,GAAG,CAAC,CAAC;IACf,CAAC;IAGD,IAAoB,WAAW,CAAC,KAAa;QAC3C,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;QACxC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC;;AA5B+B,8BAAO,GAAG,iBAAiB,CAAC;AAH5D;IADC,kBAAkB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACL;AAUjC;IADC,KAAK,CAAC,QAAQ,CAAC;0DAOf","sourcesContent":["import { queryAssignedNodes } from 'lit/decorators.js';\nimport { watch } from '../common/decorators/watch.js';\nimport IgcDropdownItemComponent from '../dropdown/dropdown-item.js';\n\n/**\n * Represents an item in a select list.\n *\n * @element igc-select-item\n *\n * @slot - Renders the all content bar the prefix and suffix.\n * @slot prefix - Renders content before the main content area.\n * @slot suffix - Renders content after the main content area.\n *\n * @csspart prefix - The prefix wrapper.\n * @csspart content - The main content wrapper.\n * @csspart suffix - The suffix wrapper.\n */\nexport default class IgcSelectItemComponent extends IgcDropdownItemComponent {\n  @queryAssignedNodes({ flatten: true })\n  private content!: Array<Element>;\n\n  /** @private */\n  public static override readonly tagName = 'igc-select-item';\n\n  constructor() {\n    super();\n  }\n\n  @watch('active')\n  protected activeChange() {\n    this.tabIndex = this.active ? 0 : -1;\n\n    if (this.active) {\n      this.focus();\n    }\n  }\n\n  /** Returns the text of the item without the prefix and suffix content. */\n  public override get textContent() {\n    return this.content\n      .map((t) => t.textContent?.trim())\n      .filter((t) => t !== '')\n      .join(' ');\n  }\n\n  /** Sets the textContent of the item without touching the prefix and suffix content. */\n  public override set textContent(value: string) {\n    const text = new Text(value);\n    this.content.forEach((n) => n.remove());\n    this.appendChild(text);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-select-item': IgcSelectItemComponent;\n  }\n}\n"]}

package/components/select/select.d.ts

@@ -0,0 +1,110 @@
+import { Constructor } from '../common/mixins/constructor.js';
+import IgcDropdownComponent, { IgcDropdownEventMap } from '../dropdown/dropdown.js';
+import IgcInputComponent from '../input/input.js';
+import IgcSelectGroupComponent from './select-group.js';
+import IgcSelectItemComponent from './select-item.js';
+export interface IgcSelectEventMap extends IgcDropdownEventMap {
+    igcFocus: CustomEvent<void>;
+    igcBlur: CustomEvent<void>;
+}
+declare const IgcSelectComponent_base: import("../common/mixins/constructor.js").AbstractConstructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcSelectEventMap>> & Constructor<IgcDropdownComponent>;
+/**
+ * @element igc-select
+ *
+ * @slot - Renders the list of select items.
+ * @slot prefix - Renders content before the input.
+ * @slot suffix - Renders content after input.
+ * @slot header - Renders a container before the list of options.
+ * @slot footer - Renders a container after the list of options.
+ * @slot helper-text - Renders content below the input.
+ * @slot toggle-icon - Renders content inside the suffix container.
+ *
+ * @fires igcFocus - Emitted when the select gains focus.
+ * @fires igcBlur - Emitted when the select loses focus.
+ * @fires igcChange - Emitted when the control's checked state changes.
+ * @fires igcOpening - Emitted just before the list of options is opened.
+ * @fires igcOpened - Emitted after the list of options is opened.
+ * @fires igcClosing - Emitter just before the list of options is closed.
+ * @fires igcClosed - Emitted after the list of options is closed.
+ *
+ * @csspart list - The list of options wrapper.
+ * @csspart input - The encapsulated igc-input.
+ * @csspart label - The encapsulated text label.
+ * @csspart prefix - The prefix wrapper.
+ * @csspart suffix - The suffix wrapper.
+ * @csspart toggle-icon - The toggle icon wrapper.
+ * @csspart helper-text - The helper text wrapper.
+ */
+export default class IgcSelectComponent extends IgcSelectComponent_base {
+    /** @private */
+    static readonly tagName = "igc-select";
+    static styles: import("lit").CSSResult;
+    private searchTerm;
+    private lastKeyTime;
+    private readonly targetKeyHandlers;
+    protected items: Array<IgcSelectItemComponent>;
+    protected groups: Array<IgcSelectGroupComponent>;
+    protected helperText: Array<HTMLElement>;
+    protected inputSuffix: Array<HTMLElement>;
+    protected inputPrefix: Array<HTMLElement>;
+    protected selectedItem: IgcSelectItemComponent | null;
+    protected target: IgcInputComponent;
+    /** The value attribute of the control. */
+    value?: string | undefined;
+    /** The name attribute of the control. */
+    name: string;
+    /** The disabled attribute of the control. */
+    disabled: boolean;
+    /** The required attribute of the control. */
+    required: boolean;
+    /** The invalid attribute of the control. */
+    invalid: boolean;
+    /** The outlined attribute of the control. */
+    outlined: boolean;
+    /** The autofocus attribute of the control. */
+    autofocus: boolean;
+    /** The label attribute of the control. */
+    label: string;
+    /** The placeholder attribute of the control. */
+    placeholder: string;
+    /** Whether the dropdown's width should be the same as the target's one. */
+    sameWidth: boolean;
+    /** The direction attribute of the control. */
+    dir: 'ltr' | 'rtl' | 'auto';
+    constructor();
+    /** Override the dropdown target focusout behavior to prevent the focus from
+     * being returned to the target element when the select loses focus. */
+    protected handleFocusout(): void;
+    /** Sets focus on the component. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the component. */
+    blur(): void;
+    /** Checks the validity of the control. */
+    reportValidity(): boolean;
+    firstUpdated(): Promise<void>;
+    protected updateValue(): void;
+    protected updateSelected(): void;
+    protected validate(): void;
+    protected selectNext(): void;
+    protected selectPrev(): void;
+    protected selectInteractiveItem(index: number): void;
+    protected searchItem(event: KeyboardEvent): void;
+    protected handleFocus(): void;
+    protected handleBlur(): void;
+    protected onTargetTabKey(): void;
+    protected onTargetEnterKey(): void;
+    protected onTargetArrowUpKeyDown(event: KeyboardEvent): void;
+    protected onTargetArrowDownKeyDown(event: KeyboardEvent): void;
+    protected onTargetHomeKey(): void;
+    protected onTargetEndKey(): void;
+    protected handleTargetKeyDown(event: KeyboardEvent): void;
+    protected get hasPrefixes(): boolean;
+    protected get hasSuffixes(): boolean;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-select': IgcSelectComponent;
+    }
+}
+export {};

package/components/select/select.js

@@ -0,0 +1,337 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+import { html } from 'lit';
+import { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { themes } from '../../theming/index.js';
+import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
+import { watch } from '../common/decorators/watch.js';
+import { defineComponents } from '../common/definitions/defineComponents.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import IgcDropdownComponent from '../dropdown/dropdown.js';
+import IgcIconComponent from '../icon/icon.js';
+import IgcInputComponent from '../input/input.js';
+import IgcSelectGroupComponent from './select-group.js';
+import IgcSelectHeaderComponent from './select-header.js';
+import IgcSelectItemComponent from './select-item.js';
+import { styles } from './themes/light/select.base.css';
+import { styles as bootstrap } from './themes/light/select.bootstrap.css';
+import { styles as fluent } from './themes/light/select.fluent.css';
+import { styles as indigo } from './themes/light/select.indigo.css';
+import { styles as material } from './themes/light/select.material.css';
+defineComponents(IgcIconComponent, IgcInputComponent, IgcSelectGroupComponent, IgcSelectHeaderComponent, IgcSelectItemComponent);
+let IgcSelectComponent = class IgcSelectComponent extends EventEmitterMixin(IgcDropdownComponent) {
+    constructor() {
+        super();
+        this.searchTerm = '';
+        this.lastKeyTime = Date.now();
+        this.targetKeyHandlers = new Map(Object.entries({
+            ' ': this.onTargetEnterKey,
+            Tab: this.onTargetTabKey,
+            Escape: this.onEscapeKey,
+            Enter: this.onTargetEnterKey,
+            ArrowLeft: this.onTargetArrowUpKeyDown,
+            ArrowRight: this.onTargetArrowDownKeyDown,
+            ArrowUp: this.onTargetArrowUpKeyDown,
+            ArrowDown: this.onTargetArrowDownKeyDown,
+            Home: this.onTargetHomeKey,
+            End: this.onTargetEndKey,
+        }));
+        this.disabled = false;
+        this.required = false;
+        this.invalid = false;
+        this.outlined = false;
+        this.sameWidth = true;
+        this.dir = 'auto';
+        this.size = 'medium';
+        this.addEventListener('igcClosing', () => this.target.focus());
+    }
+    handleFocusout() { }
+    focus(options) {
+        this.target.focus(options);
+    }
+    blur() {
+        this.target.blur();
+    }
+    reportValidity() {
+        this.invalid = this.required && !this.value;
+        if (this.invalid)
+            this.target.focus();
+        return !this.invalid;
+    }
+    async firstUpdated() {
+        super.firstUpdated();
+        await this.updateComplete;
+        if (!this.selectedItem && this.value) {
+            this.updateSelected();
+        }
+        if (this.autofocus) {
+            this.target.focus();
+        }
+    }
+    updateValue() {
+        var _a;
+        this.value = (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    updateSelected() {
+        var _a;
+        if (this.allItems.length === 0)
+            return;
+        if (((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value) !== this.value) {
+            const matches = this.allItems.filter((i) => i.value === this.value);
+            const index = this.allItems.indexOf(matches.at(-1));
+            if (index === -1) {
+                this.value = undefined;
+                this.clearSelection();
+                return;
+            }
+            this.select(index);
+        }
+    }
+    validate() {
+        this.updateComplete.then(() => this.reportValidity());
+    }
+    selectNext() {
+        var _a;
+        const activeItemIndex = [...this.allItems].indexOf((_a = this.selectedItem) !== null && _a !== void 0 ? _a : this.activeItem);
+        const next = this.getNearestSiblingFocusableItemIndex(activeItemIndex !== null && activeItemIndex !== void 0 ? activeItemIndex : -1, 1);
+        this.selectItem(this.allItems[next], true);
+    }
+    selectPrev() {
+        var _a;
+        const activeItemIndex = [...this.allItems].indexOf((_a = this.selectedItem) !== null && _a !== void 0 ? _a : this.activeItem);
+        const prev = this.getNearestSiblingFocusableItemIndex(activeItemIndex !== null && activeItemIndex !== void 0 ? activeItemIndex : -1, -1);
+        this.selectItem(this.allItems[prev], true);
+    }
+    selectInteractiveItem(index) {
+        const item = this.allItems
+            .filter((i) => !i.disabled)
+            .at(index);
+        if (item.value !== this.value) {
+            this.selectItem(item, true);
+        }
+    }
+    searchItem(event) {
+        if (!/^.$/u.test(event.key)) {
+            return;
+        }
+        const currentTime = Date.now();
+        if (currentTime - this.lastKeyTime > 500) {
+            this.searchTerm = '';
+        }
+        this.searchTerm += event.key;
+        this.lastKeyTime = currentTime;
+        const item = this.allItems
+            .filter((i) => !i.disabled)
+            .find((i) => {
+            var _a;
+            return (_a = i.textContent) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase().startsWith(this.searchTerm.toLowerCase());
+        });
+        if (item && this.value !== item.value) {
+            this.open ? this.activateItem(item) : this.selectItem(item);
+        }
+    }
+    handleFocus() {
+        if (this.open)
+            return;
+        this.emitEvent('igcFocus');
+    }
+    handleBlur() {
+        if (this.open)
+            return;
+        this.emitEvent('igcBlur');
+    }
+    onTargetTabKey() {
+        this.target.blur();
+        if (this.open)
+            this.hide();
+    }
+    onTargetEnterKey() {
+        !this.open ? this.target.click() : this.onEnterKey();
+    }
+    onTargetArrowUpKeyDown(event) {
+        if (event.altKey) {
+            this.toggle();
+        }
+        else {
+            !this.open ? this.selectPrev() : this.onArrowUpKeyDown();
+        }
+    }
+    onTargetArrowDownKeyDown(event) {
+        if (event.altKey) {
+            this.toggle();
+        }
+        else {
+            !this.open ? this.selectNext() : this.onArrowDownKeyDown();
+        }
+    }
+    onTargetHomeKey() {
+        !this.open ? this.selectInteractiveItem(0) : this.onHomeKey();
+    }
+    onTargetEndKey() {
+        !this.open ? this.selectInteractiveItem(-1) : this.onEndKey();
+    }
+    handleTargetKeyDown(event) {
+        var _a;
+        event.stopPropagation();
+        if (this.targetKeyHandlers.has(event.key)) {
+            event.preventDefault();
+            (_a = this.targetKeyHandlers.get(event.key)) === null || _a === void 0 ? void 0 : _a.call(this, event);
+        }
+        else {
+            this.searchItem(event);
+        }
+    }
+    get hasPrefixes() {
+        return this.inputPrefix.length > 0;
+    }
+    get hasSuffixes() {
+        return this.inputSuffix.length > 0;
+    }
+    render() {
+        var _a, _b;
+        return html `
+      <div
+        role="combobox"
+        tabindex=${this.disabled ? -1 : 0}
+        aria-owns="dropdown"
+        aria-describedby="helper-text"
+        aria-disabled=${this.disabled}
+        @focusin=${this.handleFocus}
+        @focusout=${this.handleBlur}
+        @keydown=${this.handleTargetKeyDown}
+        @click=${this.handleTargetClick}
+      >
+        <igc-input
+          id="input"
+          readonly
+          exportparts="container: input, input: native-input, label, prefix, suffix"
+          value=${ifDefined((_b = (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim())}
+          placeholder=${ifDefined(this.placeholder)}
+          label=${ifDefined(this.label)}
+          size=${this.size}
+          dir=${this.dir}
+          tabindex="-1"
+          .disabled="${this.disabled}"
+          .required=${this.required}
+          .invalid=${this.invalid}
+          .outlined=${this.outlined}
+          @igcBlur=${(e) => e.stopPropagation()}
+          @igcFocus=${(e) => e.stopPropagation()}
+        >
+          <span slot=${this.hasPrefixes ? 'prefix' : ''}>
+            <slot name="prefix"></slot>
+          </span>
+          <span slot=${this.hasSuffixes ? 'suffix' : ''}>
+            <slot name="suffix"></slot>
+          </span>
+          <span slot="suffix" part="toggle-icon" style="display: flex">
+            <slot name="toggle-icon">
+              <igc-icon
+                size=${this.size}
+                name=${this.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
+                collection="internal"
+                aria-hidden="true"
+              ></igc-icon>
+            </slot>
+          </span>
+        </igc-input>
+      </div>
+      <div
+        id="helper-text"
+        part="helper-text"
+        ?hidden="${this.helperText.length === 0}"
+      >
+        <slot name="helper-text"></slot>
+      </div>
+      <div
+        part="base"
+        style=${styleMap({ position: this.positionStrategy })}
+        @click=${this.handleClick}
+        ${this.toggleController.toggleDirective}
+      >
+        <div id="dropdown" role="listbox" part="list" aria-labelledby="input">
+          <slot name="header"></slot>
+          <slot></slot>
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+IgcSelectComponent.tagName = 'igc-select';
+IgcSelectComponent.styles = styles;
+__decorate([
+    queryAssignedElements({ flatten: true, selector: 'igc-select-item' })
+], IgcSelectComponent.prototype, "items", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true, selector: 'igc-select-group' })
+], IgcSelectComponent.prototype, "groups", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'helper-text' })
+], IgcSelectComponent.prototype, "helperText", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'suffix' })
+], IgcSelectComponent.prototype, "inputSuffix", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'prefix' })
+], IgcSelectComponent.prototype, "inputPrefix", void 0);
+__decorate([
+    state()
+], IgcSelectComponent.prototype, "selectedItem", void 0);
+__decorate([
+    query('div[role="combobox"]')
+], IgcSelectComponent.prototype, "target", void 0);
+__decorate([
+    property({ reflect: false, type: String })
+], IgcSelectComponent.prototype, "value", void 0);
+__decorate([
+    property()
+], IgcSelectComponent.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], IgcSelectComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], IgcSelectComponent.prototype, "required", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], IgcSelectComponent.prototype, "invalid", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], IgcSelectComponent.prototype, "outlined", void 0);
+__decorate([
+    property({ type: Boolean })
+], IgcSelectComponent.prototype, "autofocus", void 0);
+__decorate([
+    property({ type: String })
+], IgcSelectComponent.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], IgcSelectComponent.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'same-width' })
+], IgcSelectComponent.prototype, "sameWidth", void 0);
+__decorate([
+    property({ reflect: true })
+], IgcSelectComponent.prototype, "dir", void 0);
+__decorate([
+    watch('selectedItem')
+], IgcSelectComponent.prototype, "updateValue", null);
+__decorate([
+    watch('value')
+], IgcSelectComponent.prototype, "updateSelected", null);
+__decorate([
+    watch('value')
+], IgcSelectComponent.prototype, "validate", null);
+IgcSelectComponent = __decorate([
+    themes({ bootstrap, material, fluent, indigo }),
+    blazorAdditionalDependencies('IgcIconComponent, IgcInputComponent, IgcSelectGroupComponent, IgcSelectHeaderComponent, IgcSelectItemComponent')
+], IgcSelectComponent);
+export default IgcSelectComponent;
+//# sourceMappingURL=select.js.map