igniteui-webcomponents 4.5.0 → 4.7.0

package/components/select/select-group.js

@@ -4,37 +4,38 @@ 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;
 };
+import { LitElement, html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
+import { themes } from '../../theming/theming-decorator.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
-import IgcDropdownGroupComponent from '../dropdown/dropdown-group.js';
-class IgcSelectGroupComponent extends IgcDropdownGroupComponent {
+import { styles } from '../dropdown/themes/dropdown-group.base.css.js';
+import { all } from '../dropdown/themes/group.js';
+let IgcSelectGroupComponent = class IgcSelectGroupComponent extends LitElement {
     static register() {
         registerComponent(this);
     }
     constructor() {
         super();
         this.disabled = false;
+        this._internals = this.attachInternals();
+        this._internals.role = 'group';
         this.observer = new MutationObserver(this.updateControlledItems.bind(this));
     }
     disconnectedCallback() {
         this.observer.disconnect();
         super.disconnectedCallback();
     }
-    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();
+        this.disabledChange();
     }
     updateControlledItems(mutations) {
         mutations.forEach((mutation) => {
@@ -47,15 +48,23 @@ class IgcSelectGroupComponent extends IgcDropdownGroupComponent {
             }
         });
     }
-    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));
+    disabledChange() {
+        this._internals.ariaDisabled = `${this.disabled}`;
+        for (const item of this.controlledItems) {
+            item.disabled = this.disabled;
+        }
+    }
+    render() {
+        return html `
+      <label part="label">
+        <slot name="label"></slot>
+      </label>
+      <slot></slot>
+    `;
     }
-}
+};
 IgcSelectGroupComponent.tagName = 'igc-select-group';
+IgcSelectGroupComponent.styles = styles;
 __decorate([
     queryAssignedElements({ flatten: true, selector: 'igc-select-item' })
 ], IgcSelectGroupComponent.prototype, "items", void 0);
@@ -70,6 +79,9 @@ __decorate([
 ], IgcSelectGroupComponent.prototype, "disabled", void 0);
 __decorate([
     watch('disabled', { waitUntilFirstUpdate: true })
-], IgcSelectGroupComponent.prototype, "updateDisabled", null);
+], IgcSelectGroupComponent.prototype, "disabledChange", null);
+IgcSelectGroupComponent = __decorate([
+    themes(all)
+], IgcSelectGroupComponent);
 export default IgcSelectGroupComponent;
 //# sourceMappingURL=select-group.js.map

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

@@ -1 +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,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,yBAAyB,MAAM,+BAA+B,CAAC;AAWtE,MAAqB,uBAAwB,SAAQ,yBAAyB;IAGrE,MAAM,CAAU,QAAQ;QAC7B,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAsBD;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;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,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;;AA7E+B,+BAAO,GAAG,kBAAkB,AAArB,CAAsB;AAW7C;IADf,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC;sDAChB;AAM5C;IAJT,qBAAqB,CAAC;QACrB,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,iCAAiC;KAC5C,CAAC;4DACoD;AAO/C;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDACnB;AA+Cd;IADT,KAAK,CAAC,UAAU,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;6DAOjD;eA9EkB,uBAAuB","sourcesContent":["import { property, queryAssignedElements } from 'lit/decorators.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.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  public static override readonly tagName = 'igc-select-group';\n\n  public static override register() {\n    registerComponent(this);\n  }\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  /**\n   * Whether the group item and all its children are disabled.\n   * @attr\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    super.disconnectedCallback();\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"]}
+{"version":3,"file":"select-group.js","sourceRoot":"","sources":["../../../src/components/select/select-group.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\n\nimport type IgcSelectItemComponent from './select-item.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { styles } from '../dropdown/themes/dropdown-group.base.css.js';\nimport { all } from '../dropdown/themes/group.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 */\n@themes(all)\nexport default class IgcSelectGroupComponent extends LitElement {\n  public static readonly tagName = 'igc-select-group';\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(this);\n  }\n\n  private _internals: ElementInternals;\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 items!: Array<IgcSelectItemComponent>;\n\n  @queryAssignedElements({\n    flatten: true,\n    selector: 'igc-select-item:not([disabled])',\n  })\n  protected activeItems!: Array<IgcSelectItemComponent>;\n\n  /**\n   * Whether the group item and all its children are disabled.\n   * @attr\n   */\n  @property({ reflect: true, type: Boolean })\n  public disabled = false;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n    this._internals.role = 'group';\n\n    this.observer = new MutationObserver(this.updateControlledItems.bind(this));\n  }\n\n  public override disconnectedCallback() {\n    this.observer.disconnect();\n    super.disconnectedCallback();\n  }\n\n  protected override async firstUpdated() {\n    await this.updateComplete;\n    this.controlledItems = this.activeItems;\n\n    this.items.forEach((i) => {\n      this.observer.observe(i, {\n        attributes: true,\n        attributeFilter: ['disabled'],\n      });\n    });\n\n    this.disabledChange();\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 disabledChange() {\n    this._internals.ariaDisabled = `${this.disabled}`;\n\n    for (const item of this.controlledItems) {\n      item.disabled = this.disabled;\n    }\n  }\n\n  protected override render() {\n    return html`\n      <label part=\"label\">\n        <slot name=\"label\"></slot>\n      </label>\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-select-group': IgcSelectGroupComponent;\n  }\n}\n"]}

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

@@ -1,12 +1,16 @@
-import IgcDropdownHeaderComponent from '../dropdown/dropdown-header.js';
+import { LitElement } from 'lit';
 /**
- * @element igc-select-header - Represents a header item in a select component.
+ * Represents a header item in an igc-select component.
+ *
+ * @element igc-select-header
  *
  * @slot - Renders the header.
  */
-export default class IgcSelectHeaderComponent extends IgcDropdownHeaderComponent {
+export default class IgcSelectHeaderComponent extends LitElement {
     static readonly tagName = "igc-select-header";
+    static styles: import("lit").CSSResult;
     static register(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/select/select-header.js

@@ -1,10 +1,26 @@
+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 { LitElement, html } from 'lit';
+import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
-import IgcDropdownHeaderComponent from '../dropdown/dropdown-header.js';
-class IgcSelectHeaderComponent extends IgcDropdownHeaderComponent {
+import { styles } from '../dropdown/themes/dropdown-header.base.css.js';
+import { all } from '../dropdown/themes/header.js';
+let IgcSelectHeaderComponent = class IgcSelectHeaderComponent extends LitElement {
     static register() {
         registerComponent(this);
     }
-}
+    render() {
+        return html `<slot></slot>`;
+    }
+};
 IgcSelectHeaderComponent.tagName = 'igc-select-header';
+IgcSelectHeaderComponent.styles = styles;
+IgcSelectHeaderComponent = __decorate([
+    themes(all)
+], IgcSelectHeaderComponent);
 export default IgcSelectHeaderComponent;
 //# sourceMappingURL=select-header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-header.js","sourceRoot":"","sources":["../../../src/components/select/select-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,0BAA0B,MAAM,gCAAgC,CAAC;AAOxE,MAAqB,wBAAyB,SAAQ,0BAA0B;IAGvE,MAAM,CAAU,QAAQ;QAC7B,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;;AAJ+B,gCAAO,GAAG,mBAAmB,CAAC;eAD3C,wBAAwB","sourcesContent":["import { registerComponent } from '../common/definitions/register.js';\nimport 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  public static override readonly tagName = 'igc-select-header';\n\n  public static override register() {\n    registerComponent(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-select-header': IgcSelectHeaderComponent;\n  }\n}\n"]}
+{"version":3,"file":"select-header.js","sourceRoot":"","sources":["../../../src/components/select/select-header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,gDAAgD,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,MAAM,8BAA8B,CAAC;AAUpC,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,UAAU;IAIvD,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AATsB,gCAAO,GAAG,mBAAmB,AAAtB,CAAuB;AAC9B,+BAAM,GAAG,MAAM,AAAT,CAAU;AAFpB,wBAAwB;IAD5C,MAAM,CAAC,GAAG,CAAC;GACS,wBAAwB,CAW5C;eAXoB,wBAAwB","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { styles } from '../dropdown/themes/dropdown-header.base.css.js';\nimport { all } from '../dropdown/themes/header.js';\n\n/**\n * Represents a header item in an igc-select component.\n *\n * @element igc-select-header\n *\n * @slot - Renders the header.\n */\n@themes(all)\nexport default class IgcSelectHeaderComponent extends LitElement {\n  public static readonly tagName = 'igc-select-header';\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(this);\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-select-header': IgcSelectHeaderComponent;\n  }\n}\n"]}

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

@@ -1,4 +1,4 @@
-import IgcDropdownItemComponent from '../dropdown/dropdown-item.js';
+import { IgcBaseOptionLikeComponent } from '../common/mixins/option.js';
 /**
  * Represents an item in a select list.
  *
@@ -12,15 +12,11 @@ import IgcDropdownItemComponent from '../dropdown/dropdown-item.js';
  * @csspart content - The main content wrapper.
  * @csspart suffix - The suffix wrapper.
  */
-export default class IgcSelectItemComponent extends IgcDropdownItemComponent {
+export default class IgcSelectItemComponent extends IgcBaseOptionLikeComponent {
     static readonly tagName = "igc-select-item";
+    static styles: import("lit").CSSResult;
     static register(): void;
-    private content;
     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 {

package/components/select/select-item.js

@@ -4,12 +4,13 @@ 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;
 };
-import { queryAssignedNodes } from 'lit/decorators.js';
+import { themes } from '../../theming/theming-decorator.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
-import IgcDropdownItemComponent from '../dropdown/dropdown-item.js';
-import { extractText } from '../common/util.js';
-class IgcSelectItemComponent extends IgcDropdownItemComponent {
+import { IgcBaseOptionLikeComponent } from '../common/mixins/option.js';
+import { styles } from '../dropdown/themes/dropdown-item.base.css.js';
+import { all } from '../dropdown/themes/item.js';
+let IgcSelectItemComponent = class IgcSelectItemComponent extends IgcBaseOptionLikeComponent {
     static register() {
         registerComponent(this);
     }
@@ -19,21 +20,14 @@ class IgcSelectItemComponent extends IgcDropdownItemComponent {
             this.focus();
         }
     }
-    get textContent() {
-        return extractText(this.content).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);
+IgcSelectItemComponent.styles = styles;
 __decorate([
     watch('active')
 ], IgcSelectItemComponent.prototype, "activeChange", null);
+IgcSelectItemComponent = __decorate([
+    themes(all)
+], IgcSelectItemComponent);
 export default IgcSelectItemComponent;
 //# sourceMappingURL=select-item.js.map

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

@@ -1 +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,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,wBAAwB,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAehD,MAAqB,sBAAuB,SAAQ,wBAAwB;IAGnE,MAAM,CAAU,QAAQ;QAC7B,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAMS,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,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7C,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;AAOpD;IADP,kBAAkB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACL;AAGvB;IADT,KAAK,CAAC,QAAQ,CAAC;0DAOf;eAjBkB,sBAAsB","sourcesContent":["import { queryAssignedNodes } from 'lit/decorators.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport IgcDropdownItemComponent from '../dropdown/dropdown-item.js';\nimport { extractText } from '../common/util.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  public static override readonly tagName = 'igc-select-item';\n\n  public static override register() {\n    registerComponent(this);\n  }\n\n  @queryAssignedNodes({ flatten: true })\n  private content!: Array<Element>;\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 extractText(this.content).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"]}
+{"version":3,"file":"select-item.js","sourceRoot":"","sources":["../../../src/components/select/select-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,8CAA8C,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,MAAM,4BAA4B,CAAC;AAgBlC,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,0BAA0B;IAIrE,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,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,CAAC;YAChB,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;;AAdsB,8BAAO,GAAG,iBAAiB,AAApB,CAAqB;AAC5B,6BAAM,GAAG,MAAM,AAAT,CAAU;AAO7B;IADT,KAAK,CAAC,QAAQ,CAAC;0DAOf;AAfkB,sBAAsB;IAD1C,MAAM,CAAC,GAAG,CAAC;GACS,sBAAsB,CAgB1C;eAhBoB,sBAAsB","sourcesContent":["import { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { IgcBaseOptionLikeComponent } from '../common/mixins/option.js';\nimport { styles } from '../dropdown/themes/dropdown-item.base.css.js';\nimport { all } from '../dropdown/themes/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 */\n@themes(all)\nexport default class IgcSelectItemComponent extends IgcBaseOptionLikeComponent {\n  public static readonly tagName = 'igc-select-item';\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(this);\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\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-select-item': IgcSelectItemComponent;\n  }\n}\n"]}

package/components/select/select.d.ts

@@ -1,16 +1,24 @@
+import IgcSelectGroupComponent from './select-group.js';
+import IgcSelectItemComponent from './select-item.js';
 import { themeSymbol } from '../../theming/theming-decorator.js';
+import { IgcBaseComboBoxLikeComponent } from '../common/mixins/combo-box.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { Validator } from '../common/validators.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>;
+import { type IgcPlacement } from '../popover/popover.js';
+export interface IgcSelectEventMap {
+    igcChange: CustomEvent<IgcSelectItemComponent>;
     igcBlur: CustomEvent<void>;
+    igcFocus: CustomEvent<void>;
+    igcOpening: CustomEvent<void>;
+    igcOpened: CustomEvent<void>;
+    igcClosing: CustomEvent<void>;
+    igcClosed: CustomEvent<void>;
 }
-declare const IgcSelectComponent_base: Constructor<import("../common/mixins/form-associated-required.js").FormRequiredInterface & import("../common/mixins/form-associated.js").FormAssociatedElementInterface> & import("../common/mixins/constructor.js").AbstractConstructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcSelectEventMap>> & Constructor<IgcDropdownComponent>;
+declare const IgcSelectComponent_base: Constructor<import("../common/mixins/form-associated-required.js").FormRequiredInterface & import("../common/mixins/form-associated.js").FormAssociatedElementInterface> & import("../common/mixins/constructor.js").AbstractConstructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcSelectEventMap>> & Constructor<IgcBaseComboBoxLikeComponent>;
 /**
+ * Represents a control that provides a menu of options.
+ *
  * @element igc-select
  *
  * @slot - Renders the list of select items.
@@ -20,6 +28,7 @@ declare const IgcSelectComponent_base: Constructor<import("../common/mixins/form
  * @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.
+ * @slot toggle-icon-expanded - Renders content for the toggle icon when the component is in open state.
  *
  * @fires igcFocus - Emitted when the select gains focus.
  * @fires igcBlur - Emitted when the select loses focus.
@@ -41,23 +50,32 @@ export default class IgcSelectComponent extends IgcSelectComponent_base {
     static readonly tagName = "igc-select";
     static styles: import("lit").CSSResult;
     static register(): void;
-    private searchTerm;
-    private lastKeyTime;
-    protected validators: Validator<this>[];
     private readonly [themeSymbol];
-    private readonly targetKeyHandlers;
-    protected items: Array<IgcSelectItemComponent>;
-    protected groups: Array<IgcSelectGroupComponent>;
+    private _value;
+    private _searchTerm;
+    private _lastKeyTime;
+    private _rootClickController;
+    private _rootScrollController;
+    private get isMaterialTheme();
+    private get _activeItems();
+    protected _selectedItem: IgcSelectItemComponent | null;
+    protected _activeItem: IgcSelectItemComponent;
+    protected validators: Validator<this>[];
+    protected input: IgcInputComponent;
     protected helperText: Array<HTMLElement>;
     protected inputSuffix: Array<HTMLElement>;
     protected inputPrefix: Array<HTMLElement>;
-    protected selectedItem: IgcSelectItemComponent | null;
-    protected target: IgcInputComponent;
+    protected _expandedIconSlot: Array<HTMLElement>;
+    protected get hasExpandedIcon(): boolean;
+    protected get hasPrefixes(): boolean;
+    protected get hasSuffixes(): boolean;
+    protected get hasHelperText(): boolean;
     /**
      * The value attribute of the control.
      * @attr
      */
-    value?: string;
+    get value(): string;
+    set value(value: string);
     /**
      * The outlined attribute of the control.
      * @attr
@@ -68,6 +86,11 @@ export default class IgcSelectComponent extends IgcSelectComponent_base {
      * @attr
      */
     autofocus: boolean;
+    /**
+     * The distance of the select dropdown from its input.
+     * @attr
+     */
+    distance: number;
     /**
      * The label attribute of the control.
      * @attr
@@ -78,11 +101,21 @@ export default class IgcSelectComponent extends IgcSelectComponent_base {
      * @attr
      */
     placeholder: string;
+    /** The preferred placement of the select dropdown around its input.
+     * @type {'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end'}
+     * @attr
+     */
+    placement: IgcPlacement;
     /**
      * @deprecated since version 4.3.0
      * @hidden @internal @private
      */
     positionStrategy: 'absolute' | 'fixed';
+    /**
+     * Determines the behavior of the component during scrolling of the parent container.
+     * @attr scroll-strategy
+     */
+    scrollStrategy: 'scroll' | 'block' | 'close';
     /**
      * Whether the dropdown's width should be the same as the target's one.
      * @deprecated since version 4.3.0
@@ -98,38 +131,62 @@ export default class IgcSelectComponent extends IgcSelectComponent_base {
      * @attr
      */
     flip: boolean;
+    /** Returns the items of the igc-select component. */
+    get items(): IgcSelectItemComponent[];
+    /** Returns the groups of the igc-select component. */
+    get groups(): IgcSelectGroupComponent[];
+    /** Returns the selected item from the dropdown or null.  */
+    get selectedItem(): IgcSelectItemComponent | null;
+    protected scrollStrategyChanged(): void;
+    protected openChange(): void;
     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;
+    protected firstUpdated(): Promise<void>;
+    private handleFocusIn;
+    private handleFocusOut;
+    private handleClick;
+    private handleChange;
+    private handleSearch;
+    private onEnterKey;
+    private onSpaceBarKey;
+    private onArrowDown;
+    private onArrowUp;
+    private altArrowDown;
+    private altArrowUp;
+    protected onEscapeKey(): Promise<void>;
+    private onTabKey;
+    protected onHomeKey(): void;
+    protected onEndKey(): void;
     /** Monitor input slot changes and request update */
     protected inputSlotChanged(): void;
+    private activateItem;
+    private setSelectedItem;
+    private _selectItem;
+    private _navigateToActiveItem;
+    private _updateValue;
+    private clearSelectedItem;
+    protected getItem(value: string): IgcSelectItemComponent | undefined;
+    private _stopPropagation;
     /** Sets focus on the component. */
     focus(options?: FocusOptions): void;
     /** Removes focus from the component. */
     blur(): void;
     /** Checks the validity of the control and moves the focus to it if it is not valid. */
     reportValidity(): boolean;
-    protected firstUpdated(): Promise<void>;
-    protected updateValue(): void;
-    protected updateSelected(): 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 onTargetArrowLeftKeyDown(): void;
-    protected onTargetArrowRightKeyDown(): 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;
+    /** Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null. */
+    navigateTo(value: string): IgcSelectItemComponent | null;
+    /** Navigates to the item at the specified index. If it exists, returns the found item, otherwise - null. */
+    navigateTo(index: number): IgcSelectItemComponent | null;
+    /** Selects the item with the specified value. If it exists, returns the found item, otherwise - null. */
+    select(value: string): IgcSelectItemComponent | null;
+    /** Selects the item at the specified index. If it exists, returns the found item, otherwise - null. */
+    select(index: number): IgcSelectItemComponent | null;
+    /**  Resets the current value and selection of the component. */
+    clearSelection(): void;
+    protected renderInputSlots(): import("lit-html").TemplateResult<1>;
+    protected renderToggleIcon(): import("lit-html").TemplateResult<1>;
+    protected renderHelperText(): import("lit-html").TemplateResult<1>;
+    protected renderInputAnchor(): import("lit-html").TemplateResult<1>;
+    protected renderDropdown(): import("lit-html").TemplateResult<1>;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {