@digital-realty/ix-select 1.0.1

package/dist/src/selectoption/IxSelectOption.js

@@ -0,0 +1,187 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '@material/web/ripple/ripple.js';
+import '@material/web/focus/md-focus-ring.js';
+import '@material/web/labs/item/item.js';
+import { html, LitElement, nothing } from 'lit';
+import { property, query, queryAssignedElements } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
+import { SelectOptionController, } from './selectOptionController.js';
+/**
+ * @fires close-menu Closes the encapsulating menu on
+ * @fires request-selection Requests the parent md-select to select this element
+ * (and deselect others if single-selection) when `selected` changed to `true`.
+ * @fires request-deselection Requests the parent md-select to deselect this
+ * element when `selected` changed to `false`.
+ */
+export class IxSelectOption extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Disables the item and makes it non-selectable and non-interactive.
+         */
+        this.disabled = false;
+        /**
+         * READONLY: self-identifies as a menu item and sets its identifying attribute
+         */
+        this.isMenuItem = true;
+        /**
+         * Sets the item in the selected visual state when a submenu is opened.
+         */
+        this.selected = false;
+        /**
+         * Form value of the option.
+         */
+        this.value = '';
+        this.type = 'option';
+        this.selectOptionController = new SelectOptionController(this, {
+            getHeadlineElements: () => this.headlineElements,
+        });
+    }
+    /**
+     * The text that is selectable via typeahead. If not set, defaults to the
+     * innerText of the item slotted into the `"headline"` slot.
+     */
+    get typeaheadText() {
+        return this.selectOptionController.typeaheadText;
+    }
+    set typeaheadText(text) {
+        this.selectOptionController.setTypeaheadText(text);
+    }
+    /**
+     * The text that is displayed in the select field when selected. If not set,
+     * defaults to the textContent of the item slotted into the `"headline"` slot.
+     */
+    get displayText() {
+        return this.selectOptionController.displayText;
+    }
+    set displayText(text) {
+        this.selectOptionController.setDisplayText(text);
+    }
+    render() {
+        return this.renderListItem(html `
+      <md-item>
+        <div slot="container">
+          ${this.renderRipple()} ${this.renderFocusRing()}
+        </div>
+        <slot name="start" slot="start"></slot>
+        <slot name="end" slot="end"></slot>
+        ${this.renderBody()}
+      </md-item>
+    `);
+    }
+    /**
+     * Renders the root list item.
+     *
+     * @param content the child content of the list item.
+     */
+    renderListItem(content) {
+        return html `
+      <li
+        id="item"
+        tabindex=${this.disabled ? -1 : 0}
+        role=${this.selectOptionController.role}
+        aria-label=${this.ariaLabel || nothing}
+        aria-selected=${this.ariaSelected || nothing}
+        aria-checked=${this.ariaChecked || nothing}
+        aria-expanded=${this.ariaExpanded || nothing}
+        aria-haspopup=${this.ariaHasPopup || nothing}
+        class="list-item ${classMap(this.getRenderClasses())}"
+        @click=${this.selectOptionController.onClick}
+        @keydown=${this.selectOptionController.onKeydown}
+      >
+        ${content}
+      </li>
+    `;
+    }
+    /**
+     * Handles rendering of the ripple element.
+     */
+    renderRipple() {
+        return html ` <md-ripple
+      part="ripple"
+      for="item"
+      ?disabled=${this.disabled}
+    ></md-ripple>`;
+    }
+    /**
+     * Handles rendering of the focus ring.
+     */
+    // eslint-disable-next-line class-methods-use-this
+    renderFocusRing() {
+        return html ` <md-focus-ring
+      part="focus-ring"
+      for="item"
+      inward
+    ></md-focus-ring>`;
+    }
+    /**
+     * Classes applied to the list item root.
+     */
+    getRenderClasses() {
+        return {
+            disabled: this.disabled,
+            selected: this.selected,
+        };
+    }
+    /**
+     * Handles rendering the headline and supporting text.
+     */
+    // eslint-disable-next-line class-methods-use-this
+    renderBody() {
+        return html `
+      <slot></slot>
+      <slot name="overline" slot="overline"></slot>
+      <slot name="headline" slot="headline"></slot>
+      <slot name="supporting-text" slot="supporting-text"></slot>
+      <slot
+        name="trailing-supporting-text"
+        slot="trailing-supporting-text"
+      ></slot>
+    `;
+    }
+    focus() {
+        var _a;
+        // TODO(b/300334509): needed for some cases where delegatesFocus doesn't
+        // work programmatically like in FF and select-option
+        (_a = this.listItemRoot) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+}
+(() => {
+    requestUpdateOnAriaChange(IxSelectOption);
+})();
+/** @nocollapse */
+IxSelectOption.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IxSelectOption.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'md-menu-item', reflect: true })
+], IxSelectOption.prototype, "isMenuItem", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxSelectOption.prototype, "selected", void 0);
+__decorate([
+    property()
+], IxSelectOption.prototype, "value", void 0);
+__decorate([
+    query('.list-item')
+], IxSelectOption.prototype, "listItemRoot", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'headline' })
+], IxSelectOption.prototype, "headlineElements", void 0);
+__decorate([
+    property({ attribute: 'typeahead-text' })
+], IxSelectOption.prototype, "typeaheadText", null);
+__decorate([
+    property({ attribute: 'display-text' })
+], IxSelectOption.prototype, "displayText", null);
+//# sourceMappingURL=IxSelectOption.js.map

package/dist/src/selectoption/IxSelectOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxSelectOption.js","sourceRoot":"","sources":["../../../src/selectoption/IxSelectOption.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/ripple/ripple.js';\nimport '@material/web/focus/md-focus-ring.js';\nimport '@material/web/labs/item/item.js';\n\nimport { html, LitElement, nothing } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\n\nimport {\n  SelectOption,\n  SelectOptionController,\n} from './selectOptionController.js';\n\n/**\n * @fires close-menu Closes the encapsulating menu on\n * @fires request-selection Requests the parent md-select to select this element\n * (and deselect others if single-selection) when `selected` changed to `true`.\n * @fires request-deselection Requests the parent md-select to deselect this\n * element when `selected` changed to `false`.\n */\nexport class IxSelectOption extends LitElement implements SelectOption {\n  static {\n    requestUpdateOnAriaChange(IxSelectOption);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Disables the item and makes it non-selectable and non-interactive.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * READONLY: self-identifies as a menu item and sets its identifying attribute\n   */\n  @property({ type: Boolean, attribute: 'md-menu-item', reflect: true })\n  isMenuItem = true;\n\n  /**\n   * Sets the item in the selected visual state when a submenu is opened.\n   */\n  @property({ type: Boolean }) selected = false;\n\n  /**\n   * Form value of the option.\n   */\n  @property() value = '';\n\n  @query('.list-item') protected readonly listItemRoot!: HTMLElement | null;\n\n  @queryAssignedElements({ slot: 'headline' })\n  protected readonly headlineElements!: HTMLElement[];\n\n  type = 'option' as const;\n\n  /**\n   * The text that is selectable via typeahead. If not set, defaults to the\n   * innerText of the item slotted into the `\"headline\"` slot.\n   */\n  get typeaheadText() {\n    return this.selectOptionController.typeaheadText;\n  }\n\n  @property({ attribute: 'typeahead-text' })\n  set typeaheadText(text: string) {\n    this.selectOptionController.setTypeaheadText(text);\n  }\n\n  /**\n   * The text that is displayed in the select field when selected. If not set,\n   * defaults to the textContent of the item slotted into the `\"headline\"` slot.\n   */\n  get displayText() {\n    return this.selectOptionController.displayText;\n  }\n\n  @property({ attribute: 'display-text' })\n  set displayText(text: string) {\n    this.selectOptionController.setDisplayText(text);\n  }\n\n  private readonly selectOptionController = new SelectOptionController(this, {\n    getHeadlineElements: () => this.headlineElements,\n  });\n\n  protected override render() {\n    return this.renderListItem(html`\n      <md-item>\n        <div slot=\"container\">\n          ${this.renderRipple()} ${this.renderFocusRing()}\n        </div>\n        <slot name=\"start\" slot=\"start\"></slot>\n        <slot name=\"end\" slot=\"end\"></slot>\n        ${this.renderBody()}\n      </md-item>\n    `);\n  }\n\n  /**\n   * Renders the root list item.\n   *\n   * @param content the child content of the list item.\n   */\n  protected renderListItem(content: unknown) {\n    return html`\n      <li\n        id=\"item\"\n        tabindex=${this.disabled ? -1 : 0}\n        role=${this.selectOptionController.role}\n        aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}\n        aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}\n        aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}\n        aria-expanded=${(this as ARIAMixinStrict).ariaExpanded || nothing}\n        aria-haspopup=${(this as ARIAMixinStrict).ariaHasPopup || nothing}\n        class=\"list-item ${classMap(this.getRenderClasses())}\"\n        @click=${this.selectOptionController.onClick}\n        @keydown=${this.selectOptionController.onKeydown}\n      >\n        ${content}\n      </li>\n    `;\n  }\n\n  /**\n   * Handles rendering of the ripple element.\n   */\n  protected renderRipple() {\n    return html` <md-ripple\n      part=\"ripple\"\n      for=\"item\"\n      ?disabled=${this.disabled}\n    ></md-ripple>`;\n  }\n\n  /**\n   * Handles rendering of the focus ring.\n   */\n  // eslint-disable-next-line class-methods-use-this\n  protected renderFocusRing() {\n    return html` <md-focus-ring\n      part=\"focus-ring\"\n      for=\"item\"\n      inward\n    ></md-focus-ring>`;\n  }\n\n  /**\n   * Classes applied to the list item root.\n   */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      disabled: this.disabled,\n      selected: this.selected,\n    };\n  }\n\n  /**\n   * Handles rendering the headline and supporting text.\n   */\n  // eslint-disable-next-line class-methods-use-this\n  protected renderBody() {\n    return html`\n      <slot></slot>\n      <slot name=\"overline\" slot=\"overline\"></slot>\n      <slot name=\"headline\" slot=\"headline\"></slot>\n      <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n      <slot\n        name=\"trailing-supporting-text\"\n        slot=\"trailing-supporting-text\"\n      ></slot>\n    `;\n  }\n\n  override focus() {\n    // TODO(b/300334509): needed for some cases where delegatesFocus doesn't\n    // work programmatically like in FF and select-option\n    this.listItemRoot?.focus();\n  }\n}\n"]}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+import { IxSelectOption } from './IxSelectOption.js';
+window.customElements.define('ix-select-option', IxSelectOption);
+//# sourceMappingURL=ix-select-option.js.map

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

@@ -0,0 +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"]}

package/dist/src/selectoption/selectOptionController.d.ts

@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { MenuItem, MenuItemControllerConfig } from '@material/web/menu/internal/controllers/menuItemController.js';
+/**
+ * The interface specific to a Select Option
+ */
+interface SelectOptionSelf {
+    /**
+     * The form value associated with the Select Option. (Note: the visual portion
+     * of the SelectOption is the headline defined in ListItem)
+     */
+    value: string;
+    /**
+     * Whether or not the SelectOption is selected.
+     */
+    selected: boolean;
+    /**
+     * The text to display in the select when selected. Defaults to the
+     * textContent of the Element slotted into the headline.
+     */
+    displayText: string;
+}
+/**
+ * The interface to implement for a select option. Additionally, the element
+ * must have `md-list-item` and `md-menu-item` attributes on the host.
+ */
+export type SelectOption = SelectOptionSelf & MenuItem;
+/**
+ * Creates an event fired by a SelectOption to request selection from md-select.
+ * Typically fired after `selected` changes from `false` to `true`.
+ */
+export declare function createRequestSelectionEvent(): Event;
+/**
+ * Creates an event fired by a SelectOption to request deselection from
+ * md-select. Typically fired after `selected` changes from `true` to `false`.
+ */
+export declare function createRequestDeselectionEvent(): Event;
+/**
+ * The options used to inialize SelectOptionController.
+ */
+export type SelectOptionConfig = MenuItemControllerConfig;
+/**
+ * A controller that provides most functionality and md-select compatibility for
+ * an element that implements the SelectOption interface.
+ */
+export declare class SelectOptionController implements ReactiveController {
+    private readonly host;
+    private readonly menuItemController;
+    private readonly getHeadlineElements;
+    private internalDisplayText;
+    private lastSelected;
+    private firstUpdate;
+    /**
+     * The recommended role of the select option.
+     */
+    get role(): "menuitem" | "option";
+    /**
+     * The text that is selectable via typeahead. If not set, defaults to the
+     * innerText of the item slotted into the `"headline"` slot.
+     */
+    get typeaheadText(): string;
+    setTypeaheadText(text: string): void;
+    /**
+     * The text that is displayed in the select field when selected. If not set,
+     * defaults to the textContent of the item slotted into the `"headline"` slot.
+     */
+    get displayText(): string;
+    setDisplayText(text: string): void;
+    /**
+     * @param host The SelectOption in which to attach this controller to.
+     * @param config The object that configures this controller's behavior.
+     */
+    constructor(host: ReactiveControllerHost & SelectOption, config: SelectOptionConfig);
+    hostUpdate(): void;
+    hostUpdated(): void;
+    /**
+     * Bind this click listener to the interactive element. Handles closing the
+     * menu.
+     */
+    onClick: () => void;
+    /**
+     * Bind this click listener to the interactive element. Handles closing the
+     * menu.
+     */
+    onKeydown: (e: KeyboardEvent) => void;
+}
+export {};

package/dist/src/selectoption/selectOptionController.js

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MenuItemController, } from '@material/web/menu/internal/controllers/menuItemController.js';
+/**
+ * Creates an event fired by a SelectOption to request selection from md-select.
+ * Typically fired after `selected` changes from `false` to `true`.
+ */
+export function createRequestSelectionEvent() {
+    return new Event('request-selection', {
+        bubbles: true,
+        composed: true,
+    });
+}
+/**
+ * Creates an event fired by a SelectOption to request deselection from
+ * md-select. Typically fired after `selected` changes from `true` to `false`.
+ */
+export function createRequestDeselectionEvent() {
+    return new Event('request-deselection', {
+        bubbles: true,
+        composed: true,
+    });
+}
+/**
+ * A controller that provides most functionality and md-select compatibility for
+ * an element that implements the SelectOption interface.
+ */
+export class SelectOptionController {
+    /**
+     * The recommended role of the select option.
+     */
+    get role() {
+        return this.menuItemController.role;
+    }
+    /**
+     * The text that is selectable via typeahead. If not set, defaults to the
+     * innerText of the item slotted into the `"headline"` slot.
+     */
+    get typeaheadText() {
+        return this.menuItemController.typeaheadText;
+    }
+    setTypeaheadText(text) {
+        this.menuItemController.setTypeaheadText(text);
+    }
+    /**
+     * The text that is displayed in the select field when selected. If not set,
+     * defaults to the textContent of the item slotted into the `"headline"` slot.
+     */
+    get displayText() {
+        if (this.internalDisplayText !== null) {
+            return this.internalDisplayText;
+        }
+        const headlineElements = this.getHeadlineElements();
+        const textParts = [];
+        headlineElements.forEach(headlineElement => {
+            if (headlineElement.textContent && headlineElement.textContent.trim()) {
+                textParts.push(headlineElement.textContent.trim());
+            }
+        });
+        return textParts.join(' ');
+    }
+    setDisplayText(text) {
+        this.internalDisplayText = text;
+    }
+    /**
+     * @param host The SelectOption in which to attach this controller to.
+     * @param config The object that configures this controller's behavior.
+     */
+    constructor(host, config) {
+        this.host = host;
+        this.internalDisplayText = null;
+        this.lastSelected = this.host.selected;
+        this.firstUpdate = true;
+        /**
+         * Bind this click listener to the interactive element. Handles closing the
+         * menu.
+         */
+        this.onClick = () => {
+            this.menuItemController.onClick();
+        };
+        /**
+         * Bind this click listener to the interactive element. Handles closing the
+         * menu.
+         */
+        this.onKeydown = (e) => {
+            this.menuItemController.onKeydown(e);
+        };
+        this.menuItemController = new MenuItemController(host, config);
+        this.getHeadlineElements = config.getHeadlineElements;
+        host.addController(this);
+    }
+    hostUpdate() {
+        if (this.lastSelected !== this.host.selected) {
+            this.host.ariaSelected = this.host.selected ? 'true' : 'false';
+        }
+    }
+    hostUpdated() {
+        // Do not dispatch event on first update / boot-up.
+        if (this.lastSelected !== this.host.selected && !this.firstUpdate) {
+            // This section is really useful for when the user sets selected on the
+            // option programmatically. Most other cases (click and keyboard) are
+            // handled by md-select because it needs to coordinate the
+            // single-selection behavior.
+            if (this.host.selected) {
+                this.host.dispatchEvent(createRequestSelectionEvent());
+            }
+            else {
+                this.host.dispatchEvent(createRequestDeselectionEvent());
+            }
+        }
+        this.lastSelected = this.host.selected;
+        this.firstUpdate = false;
+    }
+}
+//# sourceMappingURL=selectOptionController.js.map

package/dist/src/selectoption/selectOptionController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectOptionController.js","sourceRoot":"","sources":["../../../src/selectoption/selectOptionController.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { ReactiveController, ReactiveControllerHost } from 'lit';\n\nimport {\n  MenuItem,\n  MenuItemController,\n  MenuItemControllerConfig,\n} from '@material/web/menu/internal/controllers/menuItemController.js';\n\n/**\n * The interface specific to a Select Option\n */\ninterface SelectOptionSelf {\n  /**\n   * The form value associated with the Select Option. (Note: the visual portion\n   * of the SelectOption is the headline defined in ListItem)\n   */\n  value: string;\n  /**\n   * Whether or not the SelectOption is selected.\n   */\n  selected: boolean;\n  /**\n   * The text to display in the select when selected. Defaults to the\n   * textContent of the Element slotted into the headline.\n   */\n  displayText: string;\n}\n\n/**\n * The interface to implement for a select option. Additionally, the element\n * must have `md-list-item` and `md-menu-item` attributes on the host.\n */\nexport type SelectOption = SelectOptionSelf & MenuItem;\n\n/**\n * Creates an event fired by a SelectOption to request selection from md-select.\n * Typically fired after `selected` changes from `false` to `true`.\n */\nexport function createRequestSelectionEvent() {\n  return new Event('request-selection', {\n    bubbles: true,\n    composed: true,\n  });\n}\n\n/**\n * Creates an event fired by a SelectOption to request deselection from\n * md-select. Typically fired after `selected` changes from `true` to `false`.\n */\nexport function createRequestDeselectionEvent() {\n  return new Event('request-deselection', {\n    bubbles: true,\n    composed: true,\n  });\n}\n\n/**\n * The options used to inialize SelectOptionController.\n */\nexport type SelectOptionConfig = MenuItemControllerConfig;\n\n/**\n * A controller that provides most functionality and md-select compatibility for\n * an element that implements the SelectOption interface.\n */\nexport class SelectOptionController implements ReactiveController {\n  private readonly menuItemController: MenuItemController;\n\n  private readonly getHeadlineElements: SelectOptionConfig['getHeadlineElements'];\n\n  private internalDisplayText: string | null = null;\n\n  private lastSelected = this.host.selected;\n\n  private firstUpdate = true;\n\n  /**\n   * The recommended role of the select option.\n   */\n  get role() {\n    return this.menuItemController.role;\n  }\n\n  /**\n   * The text that is selectable via typeahead. If not set, defaults to the\n   * innerText of the item slotted into the `\"headline\"` slot.\n   */\n  get typeaheadText() {\n    return this.menuItemController.typeaheadText;\n  }\n\n  setTypeaheadText(text: string) {\n    this.menuItemController.setTypeaheadText(text);\n  }\n\n  /**\n   * The text that is displayed in the select field when selected. If not set,\n   * defaults to the textContent of the item slotted into the `\"headline\"` slot.\n   */\n  get displayText() {\n    if (this.internalDisplayText !== null) {\n      return this.internalDisplayText;\n    }\n\n    const headlineElements = this.getHeadlineElements();\n\n    const textParts: string[] = [];\n    headlineElements.forEach(headlineElement => {\n      if (headlineElement.textContent && headlineElement.textContent.trim()) {\n        textParts.push(headlineElement.textContent.trim());\n      }\n    });\n\n    return textParts.join(' ');\n  }\n\n  setDisplayText(text: string) {\n    this.internalDisplayText = text;\n  }\n\n  /**\n   * @param host The SelectOption in which to attach this controller to.\n   * @param config The object that configures this controller's behavior.\n   */\n  constructor(\n    private readonly host: ReactiveControllerHost & SelectOption,\n    config: SelectOptionConfig\n  ) {\n    this.menuItemController = new MenuItemController(host, config);\n    this.getHeadlineElements = config.getHeadlineElements;\n    host.addController(this);\n  }\n\n  hostUpdate() {\n    if (this.lastSelected !== this.host.selected) {\n      this.host.ariaSelected = this.host.selected ? 'true' : 'false';\n    }\n  }\n\n  hostUpdated() {\n    // Do not dispatch event on first update / boot-up.\n    if (this.lastSelected !== this.host.selected && !this.firstUpdate) {\n      // This section is really useful for when the user sets selected on the\n      // option programmatically. Most other cases (click and keyboard) are\n      // handled by md-select because it needs to coordinate the\n      // single-selection behavior.\n      if (this.host.selected) {\n        this.host.dispatchEvent(createRequestSelectionEvent());\n      } else {\n        this.host.dispatchEvent(createRequestDeselectionEvent());\n      }\n    }\n\n    this.lastSelected = this.host.selected;\n    this.firstUpdate = false;\n  }\n\n  /**\n   * Bind this click listener to the interactive element. Handles closing the\n   * menu.\n   */\n  onClick = () => {\n    this.menuItemController.onClick();\n  };\n\n  /**\n   * Bind this click listener to the interactive element. Handles closing the\n   * menu.\n   */\n  onKeydown = (e: KeyboardEvent) => {\n    this.menuItemController.onKeydown(e);\n  };\n}\n"]}

package/dist/test/ix-select.test.d.ts

@@ -0,0 +1 @@
+import '../src/ix-select.js';

package/dist/test/ix-select.test.js

@@ -0,0 +1,58 @@
+import { html } from 'lit';
+import { fixture, expect } from '@open-wc/testing';
+import '../src/ix-select.js';
+describe('IxSelect', () => {
+    it('should show the outlined field by default', async () => {
+        const el = await fixture(html `<ix-select></ix-select>`);
+        expect(el.materialRoot.tagName.toLowerCase()).to.be.string('md-outlined-select');
+    });
+});
+describe('IxSelect', () => {
+    it('should render the appearance specified by property', async () => {
+        const el = await fixture(html `<ix-select appearance="filled"></ix-select>`);
+        expect(el.materialRoot.tagName.toLowerCase()).to.be.string('md-filled-select');
+    });
+});
+describe('IxSelect', () => {
+    it('form should submit with data', async () => {
+        var _a, _b, _c;
+        let formData;
+        const select = await fixture(html `
+      <ix-select name="theForm" label="theLabel">
+        <ix-select-option value="1">
+          <div slot="headline">Test Value</div>
+        </ix-select-option>
+      </ix-select>
+    `);
+        const handleSubmit = (e) => {
+            e.preventDefault();
+            formData = new FormData(e.target);
+        };
+        const form = await fixture(html `
+      <form @submit=${handleSubmit}>
+        ${select}
+        <button type="submit">Submit</button>
+      </form>
+    `);
+        form.addEventListener('submit', () => {
+            formData.forEach((value, key) => console.log(`${key}: ${value}`));
+        });
+        (_b = (_a = select.materialRoot.options[0].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('li')) === null || _b === void 0 ? void 0 : _b.click();
+        // Wait for 'request-selection' event to propogate to select after dropdown item 'clicked'
+        // Form will not contain any data if we submit before event is received
+        // eslint-disable-next-line no-use-before-define
+        await waitForEvent(select, 'request-selection');
+        (_c = form.querySelector('button')) === null || _c === void 0 ? void 0 : _c.click();
+        expect(formData.get('theForm'), 'Form data did not contain expected result').is.string('1');
+    });
+});
+function waitForEvent(target, eventName) {
+    return new Promise(resolve => {
+        const handler = (event) => {
+            resolve(event);
+            target.removeEventListener(eventName, handler);
+        };
+        target.addEventListener(eventName, handler);
+    });
+}
+//# sourceMappingURL=ix-select.test.js.map

package/dist/test/ix-select.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-select.test.js","sourceRoot":"","sources":["../../test/ix-select.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { fixture, expect } from '@open-wc/testing';\nimport { IxSelect } from '../src/IxSelect.js';\nimport '../src/ix-select.js';\n\ndescribe('IxSelect', () => {\n  it('should show the outlined field by default', async () => {\n    const el = await fixture<IxSelect>(html`<ix-select></ix-select>`);\n\n    expect(el.materialRoot.tagName.toLowerCase()).to.be.string(\n      'md-outlined-select'\n    );\n  });\n});\n\ndescribe('IxSelect', () => {\n  it('should render the appearance specified by property', async () => {\n    const el = await fixture<IxSelect>(\n      html`<ix-select appearance=\"filled\"></ix-select>`\n    );\n\n    expect(el.materialRoot.tagName.toLowerCase()).to.be.string(\n      'md-filled-select'\n    );\n  });\n});\n\ndescribe('IxSelect', () => {\n  it('form should submit with data', async () => {\n    let formData: FormData;\n\n    const select = await fixture<IxSelect>(html`\n      <ix-select name=\"theForm\" label=\"theLabel\">\n        <ix-select-option value=\"1\">\n          <div slot=\"headline\">Test Value</div>\n        </ix-select-option>\n      </ix-select>\n    `);\n\n    const handleSubmit = (e: Event & { target: HTMLFormElement }) => {\n      e.preventDefault();\n      formData = new FormData(e.target);\n    };\n    const form = await fixture<HTMLFormElement>(html`\n      <form @submit=${handleSubmit}>\n        ${select}\n        <button type=\"submit\">Submit</button>\n      </form>\n    `);\n\n    form.addEventListener('submit', () => {\n      formData.forEach((value, key) => console.log(`${key}: ${value}`));\n    });\n\n    select.materialRoot.options[0].shadowRoot?.querySelector('li')?.click();\n\n    // Wait for 'request-selection' event to propogate to select after dropdown item 'clicked'\n    // Form will not contain any data if we submit before event is received\n    // eslint-disable-next-line no-use-before-define\n    await waitForEvent(select, 'request-selection');\n\n    form.querySelector('button')?.click();\n\n    expect(\n      formData!.get('theForm'),\n      'Form data did not contain expected result'\n    ).is.string('1');\n  });\n});\n\nfunction waitForEvent(target: EventTarget, eventName: string): Promise<Event> {\n  return new Promise(resolve => {\n    const handler = (event: Event) => {\n      resolve(event);\n      target.removeEventListener(eventName, handler);\n    };\n    target.addEventListener(eventName, handler);\n  });\n}\n"]}