igniteui-webcomponents 4.8.2 → 4.10.0

package/components/ripple/ripple.js

@@ -1,23 +1,39 @@
 import { LitElement, html } from 'lit';
-import { styles } from './ripple.material.css.js';
 import { registerComponent } from '../common/definitions/register.js';
+import { styles } from './ripple.material.css.js';
+const rippleFrames = [
+    { opacity: 0.5, transform: 'scale(.3)' },
+    { opacity: 0, transform: 'scale(2)' },
+];
+const rippleAnimation = {
+    duration: 600,
+    fill: 'forwards',
+    easing: 'linear',
+};
+let rippleElement;
+function getRippleElement() {
+    if (!rippleElement) {
+        rippleElement = document.createElement('span');
+    }
+    return rippleElement.cloneNode();
+}
 class IgcRippleComponent extends LitElement {
     static register() {
-        registerComponent(this);
+        registerComponent(IgcRippleComponent);
     }
     constructor() {
         super();
         this.handler = ({ clientX, clientY }) => {
-            const element = document.createElement('span');
+            const element = getRippleElement();
             const { radius, top, left } = this.getDimensions(clientX, clientY);
             const styles = {
                 position: 'absolute',
                 display: 'block',
                 pointerEvents: 'none',
                 transformOrigin: 'center',
-                transform: `translate3d(0, 0, 0) scale(0)`,
+                transform: 'translate3d(0, 0, 0) scale(0)',
                 willChange: 'opacity, transform',
-                margin: `0 !important`,
+                margin: '0 !important',
                 border: 'none !important',
                 width: `${radius}px`,
                 height: `${radius}px`,
@@ -26,30 +42,26 @@ class IgcRippleComponent extends LitElement {
                 left: `${left}px`,
                 background: 'var(--color, hsl(var(--ig-gray-800)))',
             };
-            const frames = [
-                { opacity: 0.5, transform: 'scale(.3)' },
-                { opacity: 0, transform: 'scale(2)' },
-            ];
-            const opts = {
-                duration: 600,
-                fill: 'forwards',
-                easing: 'linear',
-            };
             Object.assign(element.style, styles);
-            this.shadowRoot?.appendChild(element);
-            element.animate(frames, opts).finished.then(() => element.remove());
+            this.renderRoot.appendChild(element);
+            element
+                .animate(rippleFrames, rippleAnimation)
+                .finished.then(() => element.remove());
         };
-        this.addEventListener('mousedown', this.handler);
+        this.addEventListener('pointerdown', this.handler);
     }
     getDimensions(x, y) {
-        const { width, height, left, top } = this.getBoundingClientRect();
-        const radius = Math.max(width, height);
-        const _left = Math.round(x - left - radius / 2);
-        const _top = Math.round(y - top - radius / 2);
-        return { radius, top: _top, left: _left };
+        const rect = this.getBoundingClientRect();
+        const radius = Math.max(rect.width, rect.height);
+        const halfRadius = radius / 2;
+        return {
+            radius,
+            top: Math.round(y - rect.top - halfRadius),
+            left: Math.round(x - rect.left - halfRadius),
+        };
     }
     render() {
-        return html `<div></div>`;
+        return html ``;
     }
 }
 IgcRippleComponent.tagName = 'igc-ripple';

package/components/ripple/ripple.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.js","sourceRoot":"","sources":["../../../src/components/ripple/ripple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAQtE,MAAqB,kBAAmB,SAAQ,UAAU;IAKjD,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAIF,YAAO,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAc,EAAE,EAAE;YACrD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAC/C,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YAEnE,MAAM,MAAM,GAAiC;gBAC3C,QAAQ,EAAE,UAAU;gBACpB,OAAO,EAAE,OAAO;gBAChB,aAAa,EAAE,MAAM;gBACrB,eAAe,EAAE,QAAQ;gBACzB,SAAS,EAAE,+BAA+B;gBAC1C,UAAU,EAAE,oBAAoB;gBAChC,MAAM,EAAE,cAAc;gBACtB,MAAM,EAAE,iBAAiB;gBACzB,KAAK,EAAE,GAAG,MAAM,IAAI;gBACpB,MAAM,EAAE,GAAG,MAAM,IAAI;gBACrB,YAAY,EAAE,KAAK;gBACnB,GAAG,EAAE,GAAG,GAAG,IAAI;gBACf,IAAI,EAAE,GAAG,IAAI,IAAI;gBACjB,UAAU,EAAE,uCAAuC;aACpD,CAAC;YACF,MAAM,MAAM,GAAe;gBACzB,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,WAAW,EAAE;gBACxC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE;aACtC,CAAC;YACF,MAAM,IAAI,GAA6B;gBACrC,QAAQ,EAAE,GAAG;gBACb,IAAI,EAAE,UAAU;gBAChB,MAAM,EAAE,QAAQ;aACjB,CAAC;YAEF,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;YACrC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;YACtC,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;QACtE,CAAC,CAAC;QApCA,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IACnD,CAAC;IAqCO,aAAa,CAAC,CAAS,EAAE,CAAS;QACxC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAClE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QACvC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC;QAChD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC;QAC9C,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;IAC5C,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,aAAa,CAAC;IAC3B,CAAC;;AA1DsB,0BAAO,GAAG,YAAY,AAAf,CAAgB;AACvB,yBAAM,GAAG,MAAM,AAAT,CAAU;eAFpB,kBAAkB","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport { styles } from './ripple.material.css.js';\nimport { registerComponent } from '../common/definitions/register.js';\n\n/**\n * A ripple can be applied to an element to represent\n * interactive surface.\n *\n * @element igc-ripple\n */\nexport default class IgcRippleComponent extends LitElement {\n  public static readonly tagName = 'igc-ripple';\n  public static override styles = styles;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(this);\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('mousedown', this.handler);\n  }\n\n  private handler = ({ clientX, clientY }: MouseEvent) => {\n    const element = document.createElement('span');\n    const { radius, top, left } = this.getDimensions(clientX, clientY);\n\n    const styles: Partial<CSSStyleDeclaration> = {\n      position: 'absolute',\n      display: 'block',\n      pointerEvents: 'none',\n      transformOrigin: 'center',\n      transform: `translate3d(0, 0, 0) scale(0)`,\n      willChange: 'opacity, transform',\n      margin: `0 !important`,\n      border: 'none !important',\n      width: `${radius}px`,\n      height: `${radius}px`,\n      borderRadius: '50%',\n      top: `${top}px`,\n      left: `${left}px`,\n      background: 'var(--color, hsl(var(--ig-gray-800)))',\n    };\n    const frames: Keyframe[] = [\n      { opacity: 0.5, transform: 'scale(.3)' },\n      { opacity: 0, transform: 'scale(2)' },\n    ];\n    const opts: KeyframeAnimationOptions = {\n      duration: 600, // --igc-ripple-duration,\n      fill: 'forwards',\n      easing: 'linear', // --igc-ripple-easing\n    };\n\n    Object.assign(element.style, styles);\n    this.shadowRoot?.appendChild(element);\n    element.animate(frames, opts).finished.then(() => element.remove());\n  };\n\n  private getDimensions(x: number, y: number) {\n    const { width, height, left, top } = this.getBoundingClientRect();\n    const radius = Math.max(width, height);\n    const _left = Math.round(x - left - radius / 2);\n    const _top = Math.round(y - top - radius / 2);\n    return { radius, top: _top, left: _left };\n  }\n\n  protected override render() {\n    return html`<div></div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-ripple': IgcRippleComponent;\n  }\n}\n"]}
+{"version":3,"file":"ripple.js","sourceRoot":"","sources":["../../../src/components/ripple/ripple.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport { registerComponent } from '../common/definitions/register.js';\nimport { styles } from './ripple.material.css.js';\n\nconst rippleFrames: Keyframe[] = [\n  { opacity: 0.5, transform: 'scale(.3)' },\n  { opacity: 0, transform: 'scale(2)' },\n];\n\nconst rippleAnimation: KeyframeAnimationOptions = {\n  duration: 600, // --igc-ripple-duration,\n  fill: 'forwards',\n  easing: 'linear', // --igc-ripple-easing\n};\n\nlet rippleElement: HTMLElement;\n\nfunction getRippleElement() {\n  if (!rippleElement) {\n    rippleElement = document.createElement('span');\n  }\n  return rippleElement.cloneNode() as HTMLElement;\n}\n\n/**\n * A ripple can be applied to an element to represent\n * interactive surface.\n *\n * @element igc-ripple\n */\nexport default class IgcRippleComponent extends LitElement {\n  public static readonly tagName = 'igc-ripple';\n  public static override styles = styles;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcRippleComponent);\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('pointerdown', this.handler);\n  }\n\n  private handler = ({ clientX, clientY }: PointerEvent) => {\n    const element = getRippleElement();\n    const { radius, top, left } = this.getDimensions(clientX, clientY);\n\n    const styles: Partial<CSSStyleDeclaration> = {\n      position: 'absolute',\n      display: 'block',\n      pointerEvents: 'none',\n      transformOrigin: 'center',\n      transform: 'translate3d(0, 0, 0) scale(0)',\n      willChange: 'opacity, transform',\n      margin: '0 !important',\n      border: 'none !important',\n      width: `${radius}px`,\n      height: `${radius}px`,\n      borderRadius: '50%',\n      top: `${top}px`,\n      left: `${left}px`,\n      background: 'var(--color, hsl(var(--ig-gray-800)))',\n    };\n\n    Object.assign(element.style, styles);\n    this.renderRoot.appendChild(element);\n\n    element\n      .animate(rippleFrames, rippleAnimation)\n      .finished.then(() => element.remove());\n  };\n\n  private getDimensions(x: number, y: number) {\n    const rect = this.getBoundingClientRect();\n    const radius = Math.max(rect.width, rect.height);\n    const halfRadius = radius / 2;\n\n    return {\n      radius,\n      top: Math.round(y - rect.top - halfRadius),\n      left: Math.round(x - rect.left - halfRadius),\n    };\n  }\n\n  protected override render() {\n    return html``;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-ripple': IgcRippleComponent;\n  }\n}\n"]}

package/components/select/select-group.js

@@ -4,9 +4,9 @@ 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 IgcSelectGroupComponent_1;
 import { LitElement, html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
-import IgcSelectItemComponent from './select-item.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { createMutationController, } from '../common/controllers/mutation-observer.js';
 import { watch } from '../common/decorators/watch.js';
@@ -14,9 +14,10 @@ import { registerComponent } from '../common/definitions/register.js';
 import { styles } from '../dropdown/themes/dropdown-group.base.css.js';
 import { all } from '../dropdown/themes/group.js';
 import { styles as shared } from '../dropdown/themes/shared/group/dropdown-group.common.css.js';
-let IgcSelectGroupComponent = class IgcSelectGroupComponent extends LitElement {
+import IgcSelectItemComponent from './select-item.js';
+let IgcSelectGroupComponent = IgcSelectGroupComponent_1 = class IgcSelectGroupComponent extends LitElement {
     static register() {
-        registerComponent(this);
+        registerComponent(IgcSelectGroupComponent_1);
     }
     _observerCallback({ changes: { attributes }, }) {
         for (const item of attributes) {
@@ -82,7 +83,7 @@ __decorate([
 __decorate([
     watch('disabled', { waitUntilFirstUpdate: true })
 ], IgcSelectGroupComponent.prototype, "disabledChange", null);
-IgcSelectGroupComponent = __decorate([
+IgcSelectGroupComponent = IgcSelectGroupComponent_1 = __decorate([
     themes(all)
 ], IgcSelectGroupComponent);
 export default IgcSelectGroupComponent;

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":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\n\nimport IgcSelectItemComponent from './select-item.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport {\n  MutationControllerParams,\n  createMutationController,\n} from '../common/controllers/mutation-observer.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';\nimport { styles as shared } from '../dropdown/themes/shared/group/dropdown-group.common.css.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, shared];\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(this);\n  }\n\n  private _internals: ElementInternals;\n  private controlledItems!: Array<IgcSelectItemComponent>;\n\n  /** All child `igc-select-item`s. */\n  @queryAssignedElements({\n    flatten: true,\n    selector: IgcSelectItemComponent.tagName,\n  })\n  public items!: Array<IgcSelectItemComponent>;\n\n  @queryAssignedElements({\n    flatten: true,\n    selector: `${IgcSelectItemComponent.tagName}:not([disabled])`,\n  })\n  protected activeItems!: Array<IgcSelectItemComponent>;\n\n  private _observerCallback({\n    changes: { attributes },\n  }: MutationControllerParams<IgcSelectItemComponent>) {\n    for (const item of attributes) {\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  /**\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    createMutationController(this, {\n      callback: this._observerCallback,\n      filter: [IgcSelectItemComponent.tagName],\n      config: {\n        attributeFilter: ['disabled'],\n        subtree: true,\n      },\n    });\n  }\n\n  protected override async firstUpdated() {\n    await this.updateComplete;\n    this.controlledItems = this.activeItems;\n\n    this.disabledChange();\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"]}
+{"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 { themes } from '../../theming/theming-decorator.js';\nimport {\n  type MutationControllerParams,\n  createMutationController,\n} from '../common/controllers/mutation-observer.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';\nimport { styles as shared } from '../dropdown/themes/shared/group/dropdown-group.common.css.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 */\n@themes(all)\nexport default class IgcSelectGroupComponent extends LitElement {\n  public static readonly tagName = 'igc-select-group';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcSelectGroupComponent);\n  }\n\n  private _internals: ElementInternals;\n  private controlledItems!: Array<IgcSelectItemComponent>;\n\n  /** All child `igc-select-item`s. */\n  @queryAssignedElements({\n    flatten: true,\n    selector: IgcSelectItemComponent.tagName,\n  })\n  public items!: Array<IgcSelectItemComponent>;\n\n  @queryAssignedElements({\n    flatten: true,\n    selector: `${IgcSelectItemComponent.tagName}:not([disabled])`,\n  })\n  protected activeItems!: Array<IgcSelectItemComponent>;\n\n  private _observerCallback({\n    changes: { attributes },\n  }: MutationControllerParams<IgcSelectItemComponent>) {\n    for (const item of attributes) {\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  /**\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    createMutationController(this, {\n      callback: this._observerCallback,\n      filter: [IgcSelectItemComponent.tagName],\n      config: {\n        attributeFilter: ['disabled'],\n        subtree: true,\n      },\n    });\n  }\n\n  protected override async firstUpdated() {\n    await this.updateComplete;\n    this.controlledItems = this.activeItems;\n\n    this.disabledChange();\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.js

@@ -4,15 +4,16 @@ 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 IgcSelectHeaderComponent_1;
 import { LitElement, html } from 'lit';
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { styles } from '../dropdown/themes/dropdown-header.base.css.js';
 import { all } from '../dropdown/themes/header.js';
 import { styles as shared } from '../dropdown/themes/shared/header/dropdown-header.common.css.js';
-let IgcSelectHeaderComponent = class IgcSelectHeaderComponent extends LitElement {
+let IgcSelectHeaderComponent = IgcSelectHeaderComponent_1 = class IgcSelectHeaderComponent extends LitElement {
     static register() {
-        registerComponent(this);
+        registerComponent(IgcSelectHeaderComponent_1);
     }
     render() {
         return html `<slot></slot>`;
@@ -20,7 +21,7 @@ let IgcSelectHeaderComponent = class IgcSelectHeaderComponent extends LitElement
 };
 IgcSelectHeaderComponent.tagName = 'igc-select-header';
 IgcSelectHeaderComponent.styles = [styles, shared];
-IgcSelectHeaderComponent = __decorate([
+IgcSelectHeaderComponent = IgcSelectHeaderComponent_1 = __decorate([
     themes(all)
 ], IgcSelectHeaderComponent);
 export default IgcSelectHeaderComponent;

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,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;AACnD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,gEAAgE,CAAC;AAUnF,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,UAAU;IAKvD,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAVsB,gCAAO,GAAG,mBAAmB,AAAtB,CAAuB;AAC9B,+BAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAF9B,wBAAwB;IAD5C,MAAM,CAAC,GAAG,CAAC;GACS,wBAAwB,CAY5C;eAZoB,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';\nimport { styles as shared } from '../dropdown/themes/shared/header/dropdown-header.common.css.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, shared];\n\n  /* blazorSuppress */\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"]}
+{"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;AACnD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,gEAAgE,CAAC;AAUnF,IAAM,wBAAwB,gCAA9B,MAAM,wBAAyB,SAAQ,UAAU;IAKvD,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,0BAAwB,CAAC,CAAC;IAC9C,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAVsB,gCAAO,GAAG,mBAAmB,AAAtB,CAAuB;AAC9B,+BAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAF9B,wBAAwB;IAD5C,MAAM,CAAC,GAAG,CAAC;GACS,wBAAwB,CAY5C;eAZoB,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';\nimport { styles as shared } from '../dropdown/themes/shared/header/dropdown-header.common.css.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, shared];\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcSelectHeaderComponent);\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

@@ -8,15 +8,20 @@ import { IgcBaseOptionLikeComponent } from '../common/mixins/option.js';
  * @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.
+ * @csspart prefix - The prefix wrapper of the igc-select-item.
+ * @csspart content - The main content wrapper of the igc-select-item.
+ * @csspart suffix - The suffix wrapper of the igc-select-item.
  */
 export default class IgcSelectItemComponent extends IgcBaseOptionLikeComponent {
     static readonly tagName = "igc-select-item";
     static styles: import("lit").CSSResult[];
     static register(): void;
-    protected activeChange(): void;
+    /**
+     * Whether the item is disabled.
+     * @attr
+     */
+    set active(value: boolean);
+    get active(): boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/select/select-item.js

@@ -4,30 +4,32 @@ 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 IgcSelectItemComponent_1;
+import { property } 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 { IgcBaseOptionLikeComponent } from '../common/mixins/option.js';
 import { styles } from '../dropdown/themes/dropdown-item.base.css.js';
 import { all } from '../dropdown/themes/item.js';
 import { styles as shared } from '../dropdown/themes/shared/item/dropdown-item.common.css.js';
-let IgcSelectItemComponent = class IgcSelectItemComponent extends IgcBaseOptionLikeComponent {
+let IgcSelectItemComponent = IgcSelectItemComponent_1 = class IgcSelectItemComponent extends IgcBaseOptionLikeComponent {
     static register() {
-        registerComponent(this);
+        registerComponent(IgcSelectItemComponent_1);
     }
-    activeChange() {
-        this.tabIndex = this.active ? 0 : -1;
-        if (this.active) {
-            this.focus();
-        }
+    set active(value) {
+        this._active = Boolean(value);
+        this.tabIndex = this._active ? 0 : -1;
+    }
+    get active() {
+        return this._active;
     }
 };
 IgcSelectItemComponent.tagName = 'igc-select-item';
 IgcSelectItemComponent.styles = [styles, shared];
 __decorate([
-    watch('active')
-], IgcSelectItemComponent.prototype, "activeChange", null);
-IgcSelectItemComponent = __decorate([
+    property({ type: Boolean, reflect: true })
+], IgcSelectItemComponent.prototype, "active", null);
+IgcSelectItemComponent = IgcSelectItemComponent_1 = __decorate([
     themes(all)
 ], IgcSelectItemComponent);
 export default IgcSelectItemComponent;

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,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;AACjD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4DAA4D,CAAC;AAgB/E,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,0BAA0B;IAKrE,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;;AAfsB,8BAAO,GAAG,iBAAiB,AAApB,CAAqB;AAC5B,6BAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAQvC;IADT,KAAK,CAAC,QAAQ,CAAC;0DAOf;AAhBkB,sBAAsB;IAD1C,MAAM,CAAC,GAAG,CAAC;GACS,sBAAsB,CAiB1C;eAjBoB,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';\nimport { styles as shared } from '../dropdown/themes/shared/item/dropdown-item.common.css.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, shared];\n\n  /* blazorSuppress */\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"]}
+{"version":3,"file":"select-item.js","sourceRoot":"","sources":["../../../src/components/select/select-item.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,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;AACjD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4DAA4D,CAAC;AAgB/E,IAAM,sBAAsB,8BAA5B,MAAM,sBAAuB,SAAQ,0BAA0B;IAKrE,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,wBAAsB,CAAC,CAAC;IAC5C,CAAC;IAOD,IAAoB,MAAM,CAAC,KAAc;QACvC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACxC,CAAC;IAED,IAAoB,MAAM;QACxB,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;;AApBsB,8BAAO,GAAG,iBAAiB,AAApB,CAAqB;AAC5B,6BAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAYjD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAI1C;AAjBkB,sBAAsB;IAD1C,MAAM,CAAC,GAAG,CAAC;GACS,sBAAsB,CAsB1C;eAtBoB,sBAAsB","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.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';\nimport { styles as shared } from '../dropdown/themes/shared/item/dropdown-item.common.css.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 of the igc-select-item.\n * @csspart content - The main content wrapper of the igc-select-item.\n * @csspart suffix - The suffix wrapper of the igc-select-item.\n */\n@themes(all)\nexport default class IgcSelectItemComponent extends IgcBaseOptionLikeComponent {\n  public static readonly tagName = 'igc-select-item';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcSelectItemComponent);\n  }\n\n  /**\n   * Whether the item is disabled.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public override set active(value: boolean) {\n    this._active = Boolean(value);\n    this.tabIndex = this._active ? 0 : -1;\n  }\n\n  public override get active() {\n    return this._active;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-select-item': IgcSelectItemComponent;\n  }\n}\n"]}

package/components/select/select.d.ts

@@ -1,11 +1,11 @@
-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 { AbstractConstructor } from '../common/mixins/constructor.js';
-import { Validator } from '../common/validators.js';
+import { type Validator } from '../common/validators.js';
 import IgcInputComponent from '../input/input.js';
 import { type IgcPlacement } from '../popover/popover.js';
+import IgcSelectGroupComponent from './select-group.js';
+import IgcSelectItemComponent from './select-item.js';
 export interface IgcSelectEventMap {
     igcChange: CustomEvent<IgcSelectItemComponent>;
     igcBlur: CustomEvent<void>;
@@ -38,13 +38,13 @@ declare const IgcSelectComponent_base: import("../common/mixins/constructor.js")
  * @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.
+ * @csspart list - The list wrapping container for the items of the igc-select.
+ * @csspart input - The encapsulated igc-input of the igc-select.
+ * @csspart label - The encapsulated text label of the igc-select.
+ * @csspart prefix - The prefix wrapper of the input of the igc-select.
+ * @csspart suffix - The suffix wrapper of the input of the igc-select.
+ * @csspart toggle-icon - The toggle icon wrapper of the igc-select.
+ * @csspart helper-text - The helper text wrapper of the igc-select.
  */
 export default class IgcSelectComponent extends IgcSelectComponent_base {
     static readonly tagName = "igc-select";
@@ -146,6 +146,7 @@ export default class IgcSelectComponent extends IgcSelectComponent_base {
     private handleClick;
     private handleChange;
     private handleSearch;
+    protected handleAnchorClick(): void;
     private onEnterKey;
     private onSpaceBarKey;
     private onArrowDown;
@@ -164,6 +165,7 @@ export default class IgcSelectComponent extends IgcSelectComponent_base {
     private _navigateToActiveItem;
     private _updateValue;
     private clearSelectedItem;
+    private focusItemOnOpen;
     protected getItem(value: string): IgcSelectItemComponent | undefined;
     private _stopPropagation;
     /** Sets focus on the component. */

package/components/select/select.js

@@ -4,15 +4,10 @@ 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 IgcSelectComponent_1;
 import { html } from 'lit';
 import { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import IgcSelectGroupComponent from './select-group.js';
-import IgcSelectHeaderComponent from './select-header.js';
-import IgcSelectItemComponent from './select-item.js';
-import { styles } from './themes/select.base.css.js';
-import { styles as shared } from './themes/shared/select.common.css.js';
-import { all } from './themes/themes.js';
 import { themeSymbol, themes } from '../../theming/theming-decorator.js';
 import { addKeybindings, altKey, arrowDown, arrowLeft, arrowRight, arrowUp, endKey, enterKey, escapeKey, homeKey, spaceBar, tabKey, } from '../common/controllers/key-bindings.js';
 import { addRootClickHandler } from '../common/controllers/root-click.js';
@@ -30,9 +25,15 @@ import { requiredValidator } from '../common/validators.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcInputComponent from '../input/input.js';
 import IgcPopoverComponent from '../popover/popover.js';
-let IgcSelectComponent = class IgcSelectComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(IgcBaseComboBoxLikeComponent)) {
+import IgcSelectGroupComponent from './select-group.js';
+import IgcSelectHeaderComponent from './select-header.js';
+import IgcSelectItemComponent from './select-item.js';
+import { styles } from './themes/select.base.css.js';
+import { styles as shared } from './themes/shared/select.common.css.js';
+import { all } from './themes/themes.js';
+let IgcSelectComponent = IgcSelectComponent_1 = class IgcSelectComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(IgcBaseComboBoxLikeComponent)) {
     static register() {
-        registerComponent(this, IgcIconComponent, IgcInputComponent, IgcPopoverComponent, IgcSelectGroupComponent, IgcSelectHeaderComponent, IgcSelectItemComponent);
+        registerComponent(IgcSelectComponent_1, IgcIconComponent, IgcInputComponent, IgcPopoverComponent, IgcSelectGroupComponent, IgcSelectHeaderComponent, IgcSelectItemComponent);
     }
     get isMaterialTheme() {
         return this[themeSymbol] === 'material';
@@ -167,8 +168,13 @@ let IgcSelectComponent = class IgcSelectComponent extends FormAssociatedRequired
         const item = this._activeItems.find((item) => item.textContent?.trim().toLocaleLowerCase().startsWith(this._searchTerm));
         if (item) {
             this.open ? this.activateItem(item) : this._selectItem(item);
+            this._activeItem.focus();
         }
     }
+    handleAnchorClick() {
+        super.handleAnchorClick();
+        this.focusItemOnOpen();
+    }
     onEnterKey() {
         this.open && this._activeItem
             ? this._selectItem(this._activeItem)
@@ -190,6 +196,7 @@ let IgcSelectComponent = class IgcSelectComponent extends FormAssociatedRequired
     altArrowDown() {
         if (!this.open) {
             this._show(true);
+            this.focusItemOnOpen();
         }
     }
     async altArrowUp() {
@@ -263,6 +270,7 @@ let IgcSelectComponent = class IgcSelectComponent extends FormAssociatedRequired
     _navigateToActiveItem(item) {
         if (item) {
             this.activateItem(item);
+            this._activeItem.focus({ preventScroll: true });
             item.scrollIntoView({ behavior: 'auto', block: 'nearest' });
         }
     }
@@ -278,6 +286,10 @@ let IgcSelectComponent = class IgcSelectComponent extends FormAssociatedRequired
         }
         this._selectedItem = null;
     }
+    async focusItemOnOpen() {
+        await this.updateComplete;
+        (this._selectedItem || this._activeItem)?.focus();
+    }
     getItem(value) {
         return this.items.find((item) => item.value === value);
     }
@@ -418,7 +430,6 @@ let IgcSelectComponent = class IgcSelectComponent extends FormAssociatedRequired
       flip
       shift
       same-width
-      strategy="fixed"
       .offset=${this.distance}
       .placement=${this.placement}
       >${this.renderInputAnchor()} ${this.renderDropdown()}
@@ -496,7 +507,7 @@ __decorate([
 __decorate([
     blazorSuppress()
 ], IgcSelectComponent.prototype, "select", null);
-IgcSelectComponent = __decorate([
+IgcSelectComponent = IgcSelectComponent_1 = __decorate([
     themes(all, true),
     blazorAdditionalDependencies('IgcIconComponent, IgcInputComponent, IgcSelectGroupComponent, IgcSelectHeaderComponent, IgcSelectItemComponent')
 ], IgcSelectComponent);