@digital-realty/ix-select 1.0.8 → 1.0.10

package/dist/IxSelect.d.ts

@@ -11,6 +11,11 @@ export declare class IxSelect extends LitElement {
     /** @nocollapse */
     static readonly formAssociated = true;
     component: Select;
+    minWidth: number;
+    /**
+     * Whether or not the drop-down menu should be at least the width of the select element.
+     */
+    wideMenu: boolean;
     /**
      * The switch between filled and outlined.
      */
@@ -105,6 +110,7 @@ export declare class IxSelect extends LitElement {
     private getErrorText;
     private syncValidity;
     private getRequiredValidationMessage;
+    private handleResize;
     checkValidity(): boolean;
     reportValidity(): boolean;
     setCustomValidity(error: string): void;
@@ -116,6 +122,8 @@ export declare class IxSelect extends LitElement {
     formResetCallback(): void;
     /** @private */
     formStateRestoreCallback(newState: string): void;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<2 | 1>;
 }
 export {};

package/dist/IxSelect.js

@@ -14,6 +14,11 @@ const VALUE = Symbol('value');
 export class IxSelect extends LitElement {
     constructor() {
         super(...arguments);
+        this.minWidth = 0;
+        /**
+         * Whether or not the drop-down menu should be at least the width of the select element.
+         */
+        this.wideMenu = false;
         /**
          * The switch between filled and outlined.
          */
@@ -94,6 +99,12 @@ export class IxSelect extends LitElement {
             .attachInternals();
         this.customValidationMessage = '';
         this[_a] = '';
+        this.handleResize = () => {
+            this.minWidth = 0;
+            setTimeout(() => {
+                this.minWidth = this.component.offsetWidth;
+            }, 500);
+        };
     }
     get hasError() {
         return this.error || this.nativeError;
@@ -186,6 +197,20 @@ export class IxSelect extends LitElement {
     formStateRestoreCallback(newState) {
         this.value = newState;
     }
+    async connectedCallback() {
+        super.connectedCallback();
+        if (!isServer && this.wideMenu) {
+            await this.updateComplete;
+            this.minWidth = this.component.offsetWidth;
+            window.addEventListener('resize', this.handleResize);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (!isServer && this.wideMenu) {
+            window.removeEventListener('resize', this.handleResize);
+        }
+    }
     render() {
         const tag = this.filled
             ? literal `md-filled-select`
@@ -209,6 +234,7 @@ export class IxSelect extends LitElement {
         name=${this.name}
         @request-selection=${this.handleSelection}
         class="select"
+        style="min-width:${this.minWidth}px"
       >
         <slot></slot>
           ${this.leadingIcon
@@ -236,6 +262,12 @@ IxSelect.formAssociated = true;
 __decorate([
     query('.select')
 ], IxSelect.prototype, "component", void 0);
+__decorate([
+    property({ type: Number })
+], IxSelect.prototype, "minWidth", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'wide-menu' })
+], IxSelect.prototype, "wideMenu", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IxSelect.prototype, "filled", void 0);

package/dist/IxSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxSelect.js","sourceRoot":"","sources":["../src/IxSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues, isServer } from 'lit';\nimport { html as staticHtml, StaticValue, literal } from 'lit/static-html.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { Select } from '@material/web/select/internal/select.js';\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport { DEFAULT_TYPEAHEAD_BUFFER_TIME } from '@material/web/menu/internal/menu.js';\nimport '@material/web/select/filled-select.js';\nimport '@material/web/select/outlined-select.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './selectoption/ix-select-option.js';\n\nconst VALUE = Symbol('value');\n\nexport class IxSelect extends LitElement {\n  static {\n    requestUpdateOnAriaChange(IxSelect);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /** @nocollapse */\n  static readonly formAssociated = true;\n\n  @query('.select') component!: Select;\n\n  /**\n   * The switch between filled and outlined.\n   */\n  @property({ type: Boolean, reflect: true }) filled = false;\n\n  /**\n   * The floating label for the field.\n   */\n  @property() label: string = '';\n\n  /**\n   * Opens the menu synchronously with no animation.\n   */\n  @property({ type: Boolean }) quick = false;\n\n  /**\n   * Whether or not the select is required.\n   */\n  @property({ type: Boolean }) required = false;\n\n  /**\n   * Disables the select.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * The error message that replaces supporting text when `error` is true. If\n   * `errorText` is an empty string, then the supporting text will continue to\n   * show.\n   *\n   * This error message overrides the error message displayed by\n   * `reportValidity()`.\n   */\n  @property({ type: String, attribute: 'error-text' }) errorText = '';\n\n  /**\n   * Conveys additional information below the select, such as how it should\n   * be used.\n   */\n  @property({ type: String, attribute: 'supporting-text' }) supportingText = '';\n\n  /**\n   * Gets or sets whether or not the select is in a visually invalid state.\n   *\n   * This error state overrides the error state controlled by\n   * `reportValidity()`.\n   */\n  @property({ type: Boolean, reflect: true }) error = false;\n\n  /**\n   * Text to display in the field. Only set for SSR.\n   */\n  @property({ type: String, attribute: 'display-text' }) displayText = '';\n\n  /**\n   * Name of icon. It is always a string.\n   */\n  @property({ attribute: 'leading-icon', reflect: true })\n  leadingIcon = '';\n\n  /**\n   * Name of icon. It is always a string.\n   */\n  @property({ attribute: 'trailing-icon', reflect: true })\n  trailingIcon = '';\n\n  /**\n   * Whether or not the underlying md-menu should be position: fixed to display\n   * in a top-level manner, or position: absolute.\n   *\n   * position:fixed is useful for cases where select is inside of another\n   * element with stacking context and hidden overflows such as `md-dialog`.\n   */\n  @property({ attribute: 'menu-positioning' })\n  menuPositioning: 'absolute' | 'fixed' = 'absolute';\n\n  /**\n   * The max time between the keystrokes of the typeahead select / menu behavior\n   * before it clears the typeahead buffer.\n   */\n  @property({ type: Number, attribute: 'typeahead-delay' })\n  typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;\n\n  /**\n   * The index of the currently selected option.\n   *\n   * Note: For SSR, set `[selected]` on the requested option and `displayText`\n   * rather than setting `selectedIndex` setting `selectedIndex` will incur a\n   * DOM query.\n   */\n  @property({ type: Number, attribute: 'selected-index' })\n  selectedIndex = -1;\n\n  @state() private nativeError = false;\n\n  @state() private nativeErrorText = '';\n\n  private get hasError() {\n    return this.error || this.nativeError;\n  }\n\n  private readonly internals = (this as HTMLElement) /* needed for closure */\n    .attachInternals();\n\n  private customValidationMessage = '';\n\n  get form() {\n    return this.internals.form;\n  }\n\n  get labels() {\n    return this.internals.labels;\n  }\n\n  get name() {\n    return this.getAttribute('name') ?? '';\n  }\n\n  set name(name: string) {\n    this.setAttribute('name', name);\n  }\n\n  get validity() {\n    this.syncValidity();\n    return this.internals.validity;\n  }\n\n  get value() {\n    this[VALUE] = this.component.value;\n    return this[VALUE];\n  }\n\n  set value(value: string) {\n    if (isServer) return;\n    this.component.value = value;\n  }\n\n  [VALUE] = '';\n\n  get validationMessage() {\n    this.syncValidity();\n    return this.internals.validationMessage;\n  }\n\n  private handleSelection() {\n    this.internals.setFormValue(this.component.value);\n    this.syncValidity();\n  }\n\n  async getUpdateComplete(): Promise<boolean> {\n    await super.getUpdateComplete();\n    await this.component.updateComplete;\n    this.internals.setFormValue(this.component.value);\n    return true;\n  }\n\n  protected override updated(changed: PropertyValues<Select>) {\n    if (changed.has('required')) {\n      this.syncValidity();\n    }\n  }\n\n  private getErrorText() {\n    return this.error ? this.errorText : this.nativeErrorText;\n  }\n\n  private async syncValidity() {\n    const valueMissing = this.required && !this.component.value;\n    const customError = !!this.customValidationMessage;\n    const validationMessage =\n      this.customValidationMessage ||\n      (valueMissing && this.getRequiredValidationMessage()) ||\n      '';\n\n    this.internals.setValidity(\n      { valueMissing, customError },\n      validationMessage,\n      this.component\n    );\n  }\n\n  // Returns the platform `<select>` validation message for i18n.\n  // eslint-disable-next-line class-methods-use-this\n  private getRequiredValidationMessage() {\n    const select = document.createElement('select');\n    select.required = true;\n    return select.validationMessage;\n  }\n\n  checkValidity() {\n    this.syncValidity();\n    return this.internals.checkValidity();\n  }\n\n  reportValidity() {\n    return this.component.reportValidity();\n  }\n\n  setCustomValidity(error: string) {\n    this.customValidationMessage = error;\n    this.syncValidity();\n  }\n\n  /**\n   * Reset the select to its default value.\n   */\n  reset() {\n    this.component.reset();\n  }\n\n  /** @private */\n  formResetCallback() {\n    this.reset();\n  }\n\n  /** @private */\n  formStateRestoreCallback(newState: string) {\n    this.value = newState;\n  }\n\n  override render() {\n    const tag: StaticValue = this.filled\n      ? literal`md-filled-select`\n      : literal`md-outlined-select`;\n\n    const ariaLabel = this.label || (this as ARIAMixinStrict).ariaLabel;\n\n    return staticHtml`<${tag}\n        ?disabled=${this.disabled}\n        ?quick=${this.quick}\n        ?error=${this.hasError}\n        ?required=${this.required}\n        ?has-leading-icon=${this.leadingIcon.length > 0}\n        aria-label=${ariaLabel || nothing}\n        tabindex=${ifDefined(this.disabled ? undefined : '0')}\n        menu-positioning=${this.menuPositioning}\n        typeahead-delay=${this.typeaheadDelay}\n        supporting-text=${this.supportingText}\n        error-text=${this.getErrorText()}\n        selected-index=${this.selectedIndex}\n        display-text=${this.displayText}\n        label=${this.label}\n        name=${this.name}\n        @request-selection=${this.handleSelection}\n        class=\"select\"\n      >\n        <slot></slot>\n          ${\n            this.leadingIcon\n              ? html`<ix-icon slot=\"leading-icon\">${this.leadingIcon}</ix-icon>`\n              : nothing\n          }\n          ${\n            this.trailingIcon\n              ? html`<ix-icon slot=\"trailing-icon\"\n                  >${this.trailingIcon}</ix-icon\n                >`\n              : nothing\n          }\n      </${tag}>`;\n  }\n}\n"]}
+{"version":3,"file":"IxSelect.js","sourceRoot":"","sources":["../src/IxSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues, isServer } from 'lit';\nimport { html as staticHtml, StaticValue, literal } from 'lit/static-html.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { Select } from '@material/web/select/internal/select.js';\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport { DEFAULT_TYPEAHEAD_BUFFER_TIME } from '@material/web/menu/internal/menu.js';\nimport '@material/web/select/filled-select.js';\nimport '@material/web/select/outlined-select.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './selectoption/ix-select-option.js';\n\nconst VALUE = Symbol('value');\n\nexport class IxSelect extends LitElement {\n  static {\n    requestUpdateOnAriaChange(IxSelect);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /** @nocollapse */\n  static readonly formAssociated = true;\n\n  @query('.select') component!: Select;\n\n  @property({ type: Number }) minWidth = 0;\n\n  /**\n   * Whether or not the drop-down menu should be at least the width of the select element.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'wide-menu' }) wideMenu =\n    false;\n\n  /**\n   * The switch between filled and outlined.\n   */\n  @property({ type: Boolean, reflect: true }) filled = false;\n\n  /**\n   * The floating label for the field.\n   */\n  @property() label: string = '';\n\n  /**\n   * Opens the menu synchronously with no animation.\n   */\n  @property({ type: Boolean }) quick = false;\n\n  /**\n   * Whether or not the select is required.\n   */\n  @property({ type: Boolean }) required = false;\n\n  /**\n   * Disables the select.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * The error message that replaces supporting text when `error` is true. If\n   * `errorText` is an empty string, then the supporting text will continue to\n   * show.\n   *\n   * This error message overrides the error message displayed by\n   * `reportValidity()`.\n   */\n  @property({ type: String, attribute: 'error-text' }) errorText = '';\n\n  /**\n   * Conveys additional information below the select, such as how it should\n   * be used.\n   */\n  @property({ type: String, attribute: 'supporting-text' }) supportingText = '';\n\n  /**\n   * Gets or sets whether or not the select is in a visually invalid state.\n   *\n   * This error state overrides the error state controlled by\n   * `reportValidity()`.\n   */\n  @property({ type: Boolean, reflect: true }) error = false;\n\n  /**\n   * Text to display in the field. Only set for SSR.\n   */\n  @property({ type: String, attribute: 'display-text' }) displayText = '';\n\n  /**\n   * Name of icon. It is always a string.\n   */\n  @property({ attribute: 'leading-icon', reflect: true })\n  leadingIcon = '';\n\n  /**\n   * Name of icon. It is always a string.\n   */\n  @property({ attribute: 'trailing-icon', reflect: true })\n  trailingIcon = '';\n\n  /**\n   * Whether or not the underlying md-menu should be position: fixed to display\n   * in a top-level manner, or position: absolute.\n   *\n   * position:fixed is useful for cases where select is inside of another\n   * element with stacking context and hidden overflows such as `md-dialog`.\n   */\n  @property({ attribute: 'menu-positioning' })\n  menuPositioning: 'absolute' | 'fixed' = 'absolute';\n\n  /**\n   * The max time between the keystrokes of the typeahead select / menu behavior\n   * before it clears the typeahead buffer.\n   */\n  @property({ type: Number, attribute: 'typeahead-delay' })\n  typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;\n\n  /**\n   * The index of the currently selected option.\n   *\n   * Note: For SSR, set `[selected]` on the requested option and `displayText`\n   * rather than setting `selectedIndex` setting `selectedIndex` will incur a\n   * DOM query.\n   */\n  @property({ type: Number, attribute: 'selected-index' })\n  selectedIndex = -1;\n\n  @state() private nativeError = false;\n\n  @state() private nativeErrorText = '';\n\n  private get hasError() {\n    return this.error || this.nativeError;\n  }\n\n  private readonly internals = (this as HTMLElement) /* needed for closure */\n    .attachInternals();\n\n  private customValidationMessage = '';\n\n  get form() {\n    return this.internals.form;\n  }\n\n  get labels() {\n    return this.internals.labels;\n  }\n\n  get name() {\n    return this.getAttribute('name') ?? '';\n  }\n\n  set name(name: string) {\n    this.setAttribute('name', name);\n  }\n\n  get validity() {\n    this.syncValidity();\n    return this.internals.validity;\n  }\n\n  get value() {\n    this[VALUE] = this.component.value;\n    return this[VALUE];\n  }\n\n  set value(value: string) {\n    if (isServer) return;\n    this.component.value = value;\n  }\n\n  [VALUE] = '';\n\n  get validationMessage() {\n    this.syncValidity();\n    return this.internals.validationMessage;\n  }\n\n  private handleSelection() {\n    this.internals.setFormValue(this.component.value);\n    this.syncValidity();\n  }\n\n  async getUpdateComplete(): Promise<boolean> {\n    await super.getUpdateComplete();\n    await this.component.updateComplete;\n    this.internals.setFormValue(this.component.value);\n    return true;\n  }\n\n  protected override updated(changed: PropertyValues<Select>) {\n    if (changed.has('required')) {\n      this.syncValidity();\n    }\n  }\n\n  private getErrorText() {\n    return this.error ? this.errorText : this.nativeErrorText;\n  }\n\n  private async syncValidity() {\n    const valueMissing = this.required && !this.component.value;\n    const customError = !!this.customValidationMessage;\n    const validationMessage =\n      this.customValidationMessage ||\n      (valueMissing && this.getRequiredValidationMessage()) ||\n      '';\n\n    this.internals.setValidity(\n      { valueMissing, customError },\n      validationMessage,\n      this.component\n    );\n  }\n\n  // Returns the platform `<select>` validation message for i18n.\n  // eslint-disable-next-line class-methods-use-this\n  private getRequiredValidationMessage() {\n    const select = document.createElement('select');\n    select.required = true;\n    return select.validationMessage;\n  }\n\n  private handleResize = () => {\n    this.minWidth = 0;\n    setTimeout(() => {\n      this.minWidth = this.component.offsetWidth;\n    }, 500);\n  };\n\n  checkValidity() {\n    this.syncValidity();\n    return this.internals.checkValidity();\n  }\n\n  reportValidity() {\n    return this.component.reportValidity();\n  }\n\n  setCustomValidity(error: string) {\n    this.customValidationMessage = error;\n    this.syncValidity();\n  }\n\n  /**\n   * Reset the select to its default value.\n   */\n  reset() {\n    this.component.reset();\n  }\n\n  /** @private */\n  formResetCallback() {\n    this.reset();\n  }\n\n  /** @private */\n  formStateRestoreCallback(newState: string) {\n    this.value = newState;\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    if (!isServer && this.wideMenu) {\n      await this.updateComplete;\n      this.minWidth = this.component.offsetWidth;\n      window.addEventListener('resize', this.handleResize);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (!isServer && this.wideMenu) {\n      window.removeEventListener('resize', this.handleResize);\n    }\n  }\n\n  override render() {\n    const tag: StaticValue = this.filled\n      ? literal`md-filled-select`\n      : literal`md-outlined-select`;\n\n    const ariaLabel = this.label || (this as ARIAMixinStrict).ariaLabel;\n\n    return staticHtml`<${tag}\n        ?disabled=${this.disabled}\n        ?quick=${this.quick}\n        ?error=${this.hasError}\n        ?required=${this.required}\n        ?has-leading-icon=${this.leadingIcon.length > 0}\n        aria-label=${ariaLabel || nothing}\n        tabindex=${ifDefined(this.disabled ? undefined : '0')}\n        menu-positioning=${this.menuPositioning}\n        typeahead-delay=${this.typeaheadDelay}\n        supporting-text=${this.supportingText}\n        error-text=${this.getErrorText()}\n        selected-index=${this.selectedIndex}\n        display-text=${this.displayText}\n        label=${this.label}\n        name=${this.name}\n        @request-selection=${this.handleSelection}\n        class=\"select\"\n        style=\"min-width:${this.minWidth}px\"\n      >\n        <slot></slot>\n          ${\n            this.leadingIcon\n              ? html`<ix-icon slot=\"leading-icon\">${this.leadingIcon}</ix-icon>`\n              : nothing\n          }\n          ${\n            this.trailingIcon\n              ? html`<ix-icon slot=\"trailing-icon\"\n                  >${this.trailingIcon}</ix-icon\n                >`\n              : nothing\n          }\n      </${tag}>`;\n  }\n}\n"]}

package/dist/ix-select.d.ts

@@ -1 +1,4 @@
-export {};
+import { IxSelect } from './IxSelect.js';
+export declare class IxSelectStyled extends IxSelect {
+    static styles: import("lit").CSSResult;
+}

package/dist/ix-select.js

@@ -1,3 +1,11 @@
+import { css } from 'lit';
 import { IxSelect } from './IxSelect.js';
-window.customElements.define('ix-select', IxSelect);
+export class IxSelectStyled extends IxSelect {
+}
+IxSelectStyled.styles = css `
+    .select {
+      display: block;
+    }
+  `;
+window.customElements.define('ix-select', IxSelectStyled);
 //# sourceMappingURL=ix-select.js.map

package/dist/ix-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-select.js","sourceRoot":"","sources":["../src/ix-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["import { IxSelect } from './IxSelect.js';\n\nwindow.customElements.define('ix-select', IxSelect);\n"]}
+{"version":3,"file":"ix-select.js","sourceRoot":"","sources":["../src/ix-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,OAAO,cAAe,SAAQ,QAAQ;;AAC1B,qBAAM,GAAG,GAAG,CAAA;;;;GAI3B,CAAC;AAGJ,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { IxSelect } from './IxSelect.js';\n\nexport class IxSelectStyled extends IxSelect {\n  static override styles = css`\n    .select {\n      display: block;\n    }\n  `;\n}\n\nwindow.customElements.define('ix-select', IxSelectStyled);\n"]}

package/dist/selectoption/ix-select-option.d.ts

@@ -1 +1,4 @@
-export {};
+import { IxSelectOption } from './IxSelectOption.js';
+export declare class IxSelectOptionStyled extends IxSelectOption {
+    static styles: import("lit").CSSResult[];
+}

package/dist/selectoption/ix-select-option.js

@@ -1,3 +1,7 @@
+import { styles } from '@material/web/menu/internal/menuitem/menu-item-styles.css.js';
 import { IxSelectOption } from './IxSelectOption.js';
-window.customElements.define('ix-select-option', IxSelectOption);
+export class IxSelectOptionStyled extends IxSelectOption {
+}
+IxSelectOptionStyled.styles = [styles];
+window.customElements.define('ix-select-option', IxSelectOptionStyled);
 //# sourceMappingURL=ix-select-option.js.map

package/dist/selectoption/ix-select-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-select-option.js","sourceRoot":"","sources":["../../src/selectoption/ix-select-option.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { IxSelectOption } from './IxSelectOption.js';\n\nwindow.customElements.define('ix-select-option', IxSelectOption);\n"]}
+{"version":3,"file":"ix-select-option.js","sourceRoot":"","sources":["../../src/selectoption/ix-select-option.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,8DAA8D,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,MAAM,OAAO,oBAAqB,SAAQ,cAAc;;AACtC,2BAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAGpC,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,oBAAoB,CAAC,CAAC","sourcesContent":["import { styles } from '@material/web/menu/internal/menuitem/menu-item-styles.css.js';\nimport { IxSelectOption } from './IxSelectOption.js';\n\nexport class IxSelectOptionStyled extends IxSelectOption {\n  static override styles = [styles];\n}\n\nwindow.customElements.define('ix-select-option', IxSelectOptionStyled);\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-select following open-wc recommendations",
   "license": "MIT",
   "author": "interxion",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -30,7 +30,7 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@digital-realty/ix-icon": "*",
+    "@digital-realty/ix-icon": "^0.0.3",
     "@lit-labs/react": "^2.0.3",
     "@material/web": "^1.0.0",
     "lit": "^2.0.2",
@@ -104,5 +104,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "dfeb7c40d2849123ee4443ef78df6972ea3aa4cf"
+  "gitHead": "06b703eafc99380a30c4901ad7afbeba00de0d5c"
 }