@material/web 1.0.0-pre.1 → 1.0.0-pre.11

package/select/lib/select.js

@@ -0,0 +1,589 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var _a;
+import { __decorate } from "tslib";
+import '../../menu/menu.js';
+import { html, LitElement, nothing } from 'lit';
+import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { html as staticHtml } from 'lit/static-html.js';
+import { List } from '../../list/lib/list.js';
+import { DEFAULT_TYPEAHEAD_BUFFER_TIME } from '../../menu/lib/menu.js';
+import { isElementInSubtree, isSelectableKey } from '../../menu/lib/shared.js';
+import { TYPEAHEAD_RECORD } from '../../menu/lib/typeaheadController.js';
+import { getSelectedItems } from './shared.js';
+const VALUE = Symbol('value');
+/**
+ * @fires input Fired when a selection is made by the user via mouse or keyboard
+ * interaction.
+ * @fires change Fired when a selection is made by the user via mouse or
+ * keyboard interaction.
+ */
+export class Select extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Opens the menu synchronously with no animation.
+         */
+        this.quick = false;
+        /**
+         * Whether or not the select is required.
+         */
+        this.required = false;
+        /**
+         * Disables the select.
+         */
+        this.disabled = false;
+        /**
+         * The error message that replaces supporting text when `error` is true. If
+         * `errorText` is an empty string, then the supporting text will continue to
+         * show.
+         *
+         * Calling `reportValidity()` will automatically update `errorText` to the
+         * native `validationMessage`.
+         */
+        this.errorText = '';
+        /**
+         * The floating label for the field.
+         */
+        this.label = '';
+        /**
+         * Conveys additional information below the text field, such as how it should
+         * be used.
+         */
+        this.supportingText = '';
+        /**
+         * Gets or sets whether or not the text field is in a visually invalid state.
+         *
+         * Calling `reportValidity()` will automatically update `error`.
+         */
+        this.error = false;
+        /**
+         * Whether or not the underlying md-menu should be position: fixed to display
+         * in a top-level manner.
+         */
+        this.menuFixed = false;
+        /**
+         * The max time between the keystrokes of the typeahead select / menu behavior
+         * before it clears the typeahead buffer.
+         */
+        this.typeaheadBufferTime = DEFAULT_TYPEAHEAD_BUFFER_TIME;
+        /**
+         * Whether or not the text field has a leading icon. Used for SSR.
+         */
+        this.hasLeadingIcon = false;
+        /**
+         * Whether or not the text field has a trailing icon. Used for SSR.
+         */
+        this.hasTrailingIcon = false;
+        /**
+         * Text to display in the field. Only set for SSR.
+         */
+        this.displayText = '';
+        /**
+         * When set to true, the error text's `role="alert"` will be removed, then
+         * re-added after an animation frame. This will re-announce an error message
+         * to screen readers.
+         */
+        this.refreshErrorAlert = false;
+        this.focused = false;
+        this.open = false;
+        this[_a] = '';
+        /**
+         * Used for initializing select when the user sets the `value` directly.
+         */
+        this.lastUserSetValue = null;
+        /**
+         * Used for initializing select when the user sets the `selectedIndex`
+         * directly.
+         */
+        this.lastUserSetSelectedIndex = null;
+        /**
+         * Used for `input` and `change` event change detection.
+         */
+        this.lastSelectedOption = null;
+        // tslint:disable-next-line:enforce-name-casing
+        this.lastSelectedOptionRecords = [];
+    }
+    /**
+     * The value of the currently selected option.
+     *
+     * Note: For SSR, set `[selected]` on the requested option and `displayText`
+     * rather than setting `value` setting `value` will incur a DOM query.
+     */
+    get value() {
+        return this[VALUE];
+    }
+    set value(value) {
+        this.lastUserSetValue = value;
+        this.select(value);
+    }
+    get options() {
+        // NOTE: this does a DOM query.
+        return (this.menu?.items ?? []);
+    }
+    /**
+     * The index of the currently selected option.
+     *
+     * Note: For SSR, set `[selected]` on the requested option and `displayText`
+     * rather than setting `selectedIndex` setting `selectedIndex` will incur a
+     * DOM query.
+     */
+    get selectedIndex() {
+        // tslint:disable-next-line:enforce-name-casing
+        const [_option, index] = (this.getSelectedOptions() ?? [])[0] ?? [];
+        return index ?? -1;
+    }
+    set selectedIndex(index) {
+        this.lastUserSetSelectedIndex = index;
+        this.selectIndex(index);
+    }
+    /**
+     * Returns an array of selected options.
+     *
+     * NOTE: md-select only suppoprts single selection.
+     */
+    get selectedOptions() {
+        return (this.getSelectedOptions() ?? []).map(([option]) => option);
+    }
+    render() {
+        return html `
+      <span
+          class="select ${classMap(this.getRenderClasses())}"
+          @focusout=${this.handleFocusout}>
+        ${this.renderField()}
+        ${this.renderMenu()}
+      </span>
+    `;
+    }
+    getRenderClasses() {
+        return {
+            'disabled': this.disabled,
+            'error': this.error,
+        };
+    }
+    renderField() {
+        return staticHtml `
+      <${this.fieldTag}
+          aria-haspopup="listbox"
+          role="combobox"
+          tabindex=${this.disabled ? '-1' : '0'}
+          aria-expanded=${this.open ? 'true' : 'false'}
+          class="field"
+          label=${this.label}
+          .focused=${this.focused || this.open}
+          .populated=${!!this.displayText}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          .error=${this.error}
+          .hasStart=${this.hasLeadingIcon}
+          .hasEnd=${this.hasTrailingIcon}
+          @keydown =${this.handleKeydown}
+          @click=${this.handleClick}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}>
+        ${this.renderFieldContent()}
+      </${this.fieldTag}>`;
+    }
+    renderFieldContent() {
+        return [
+            this.renderLeadingIcon(),
+            this.renderLabel(),
+            this.renderTrailingIcon(),
+            this.renderSupportingText(),
+        ];
+    }
+    renderLeadingIcon() {
+        return html `
+      <span class="icon leading" slot="start">
+         <slot name="leadingicon" @slotchange=${this.handleIconChange}></slot>
+      </span>
+     `;
+    }
+    renderTrailingIcon() {
+        return html `
+      <span class="icon trailing" slot="end">
+         <slot name="trailingicon" @slotchange=${this.handleIconChange}></slot>
+      </span>
+     `;
+    }
+    renderLabel() {
+        // need to render &nbsp; so that line-height can apply and give it a
+        // non-zero height
+        return html `<div
+        id="label"
+        class="label">${this.displayText || html `&nbsp;`}</div>`;
+    }
+    renderSupportingText() {
+        const text = this.getSupportingText();
+        if (!text) {
+            return nothing;
+        }
+        return html `<span id="support"
+      slot="supporting-text"
+      role=${this.shouldErrorAnnounce() ? 'alert' : nothing}>${text}</span>`;
+    }
+    getSupportingText() {
+        return this.error && this.errorText ? this.errorText : this.supportingText;
+    }
+    shouldErrorAnnounce() {
+        // Announce if there is an error and error text visible.
+        // If refreshErrorAlert is true, do not announce. This will remove the
+        // role="alert" attribute. Another render cycle will happen after an
+        // animation frame to re-add the role.
+        return this.error && !!this.errorText && !this.refreshErrorAlert;
+    }
+    renderMenu() {
+        return html `
+      <md-menu
+          id="listbox"
+          default-focus="NONE"
+          listTabIndex="-1"
+          type="listbox"
+          stay-open-on-focusout
+          .anchor=${this.field}
+          .open=${this.open}
+          .quick=${this.quick}
+          .fixed=${this.menuFixed}
+          .typeaheadBufferTime=${this.typeaheadBufferTime}
+          @opening=${this.handleOpening}
+          @closing=${this.handleClosing}
+          @close-menu=${this.handleCloseMenu}
+          @request-selection=${this.handleRequestSelection}
+          @request-deselection=${this.handleRequestDeselection}>
+        ${this.renderMenuContent()}
+      </md-menu>`;
+    }
+    renderMenuContent() {
+        return html `<slot></slot>`;
+    }
+    /**
+     * Handles opening the select on keydown and typahead selection when the menu
+     * is closed.
+     */
+    handleKeydown(e) {
+        if (this.open || this.disabled || !this.menu) {
+            return;
+        }
+        const typeaheadController = this.menu.typeaheadController;
+        const isOpenKey = e.code === 'Space' || e.code === 'ArrowDown' || e.code === 'Enter';
+        // Do not open if currently typing ahead because the user may be typing the
+        // spacebar to match a word with a space
+        if (!typeaheadController.isTypingAhead && isOpenKey) {
+            e.preventDefault();
+            this.open = true;
+            return;
+        }
+        const isPrintableKey = e.key.length === 1;
+        // Handles typing ahead when the menu is closed by delegating the event to
+        // the underlying menu's typeaheadController
+        if (isPrintableKey) {
+            typeaheadController.onKeydown(e);
+            e.preventDefault();
+            const { lastActiveRecord } = typeaheadController;
+            if (!lastActiveRecord) {
+                return;
+            }
+            const hasChanged = this.selectItem(lastActiveRecord[TYPEAHEAD_RECORD.ITEM]);
+            if (hasChanged) {
+                this.dispatchInteractionEvents();
+            }
+        }
+    }
+    handleClick() {
+        this.open = true;
+    }
+    handleFocus() {
+        this.focused = true;
+    }
+    handleBlur() {
+        this.focused = false;
+    }
+    /**
+     * Handles closing the menu when the focus leaves the select's subtree.
+     */
+    handleFocusout(e) {
+        // Don't close the menu if we are switching focus between menu,
+        // select-option, and field
+        if (e.relatedTarget && isElementInSubtree(e.relatedTarget, this)) {
+            return;
+        }
+        this.open = false;
+    }
+    /**
+     * Gets a list of all selected select options as a list item record array.
+     *
+     * @return An array of selected list option records.
+     */
+    getSelectedOptions() {
+        if (!this.menu) {
+            this.lastSelectedOptionRecords = [];
+            return null;
+        }
+        const items = this.menu.items;
+        this.lastSelectedOptionRecords = getSelectedItems(items);
+        return this.lastSelectedOptionRecords;
+    }
+    async getUpdateComplete() {
+        await this.menu?.updateComplete;
+        return super.getUpdateComplete();
+    }
+    /**
+     * Gets the selected options from the DOM, and updates the value and display
+     * text to the first selected option's value and headline respectively.
+     *
+     * @return Whether or not the selected option has changed since last update.
+     */
+    updateValueAndDisplayText() {
+        const selectedOptions = this.getSelectedOptions() ?? [];
+        // Used to determine whether or not we need to fire an input / change event
+        // which fire whenever the option element changes (value or selectedIndex)
+        // on user interaction.
+        let hasSelectedOptionChanged = false;
+        if (selectedOptions.length) {
+            const [firstSelectedOption] = selectedOptions[0];
+            hasSelectedOptionChanged =
+                this.lastSelectedOption !== firstSelectedOption;
+            this.lastSelectedOption = firstSelectedOption;
+            this[VALUE] = firstSelectedOption.value;
+            this.displayText = firstSelectedOption.headline;
+        }
+        else {
+            hasSelectedOptionChanged = this.lastSelectedOption !== null;
+            this.lastSelectedOption = null;
+            this[VALUE] = '';
+            this.displayText = '';
+        }
+        return hasSelectedOptionChanged;
+    }
+    update(changed) {
+        // In SSR the options will be ready to query, so try to figure out what
+        // the value and display text should be.
+        if (!this.hasUpdated) {
+            this.initUserSelection();
+        }
+        super.update(changed);
+    }
+    async firstUpdated(changed) {
+        await this.menu?.updateComplete;
+        // If this has been handled on update already due to SSR, try again.
+        if (!this.lastSelectedOptionRecords.length) {
+            this.initUserSelection();
+        }
+        super.firstUpdated(changed);
+    }
+    updated(changedProperties) {
+        // Keep changedProperties arg so that subclasses may call it
+        if (this.refreshErrorAlert) {
+            // The past render cycle removed the role="alert" from the error message.
+            // Re-add it after an animation frame to re-announce the error.
+            requestAnimationFrame(() => {
+                this.refreshErrorAlert = false;
+            });
+        }
+    }
+    /**
+     * Focuses and activates the last selected item upon opening, and resets other
+     * active items.
+     */
+    async handleOpening() {
+        const items = this.menu.items;
+        const activeItem = List.getActiveItem(items)?.item;
+        const [selectedItem] = this.lastSelectedOptionRecords[0] ?? [null];
+        // This is true if the user keys through the list but clicks out of the menu
+        // thus no close-menu event is fired by an item and we can't clean up in
+        // handleCloseMenu.
+        if (activeItem && activeItem !== selectedItem) {
+            activeItem.active = false;
+        }
+        if (selectedItem) {
+            selectedItem.active = true;
+            selectedItem.focus();
+        }
+    }
+    handleClosing() {
+        this.open = false;
+    }
+    /**
+     * Determines the reason for closing, and updates the UI accordingly.
+     */
+    handleCloseMenu(e) {
+        const reason = e.reason;
+        const item = e.itemPath[0];
+        this.open = false;
+        let hasChanged = false;
+        if (reason.kind === 'CLICK_SELECTION') {
+            hasChanged = this.selectItem(item);
+        }
+        else if (reason.kind === 'KEYDOWN' && isSelectableKey(reason.key)) {
+            hasChanged = this.selectItem(item);
+        }
+        else {
+            // This can happen on ESC being pressed
+            item.active = false;
+            item.blur();
+        }
+        // Dispatch interaction events since selection has been made via keyboard
+        // or mouse.
+        if (hasChanged) {
+            this.dispatchInteractionEvents();
+        }
+    }
+    /**
+     * Selects a given option, deselects other options, and updates the UI.
+     *
+     * @return Whether the last selected option has changed.
+     */
+    selectItem(item) {
+        this.lastSelectedOptionRecords.forEach(([option]) => {
+            if (item !== option) {
+                option.selected = false;
+            }
+        });
+        item.selected = true;
+        return this.updateValueAndDisplayText();
+    }
+    /**
+     * Handles updating selection when an option element requests selection via
+     * property / attribute change.
+     */
+    handleRequestSelection(e) {
+        const requestingOptionEl = e.target;
+        // No-op if this item is already selected.
+        if (this.lastSelectedOptionRecords.some(([option]) => option === requestingOptionEl)) {
+            return;
+        }
+        this.selectItem(requestingOptionEl);
+    }
+    /**
+     * Handles updating selection when an option element requests deselection via
+     * property / attribute change.
+     */
+    handleRequestDeselection(e) {
+        const requestingOptionEl = e.target;
+        // No-op if this item is not even in the list of tracked selected items.
+        if (!this.lastSelectedOptionRecords.some(([option]) => option === requestingOptionEl)) {
+            return;
+        }
+        this.updateValueAndDisplayText();
+    }
+    /**
+     * Selects an option given the value of the option, and updates MdSelect's
+     * value.
+     */
+    select(value) {
+        const optionToSelect = this.options.find(option => option.value === value);
+        if (optionToSelect) {
+            this.selectItem(optionToSelect);
+        }
+    }
+    /**
+     * Selects an option given the index of the option, and updates MdSelect's
+     * value.
+     */
+    selectIndex(index) {
+        const optionToSelect = this.options[index];
+        if (optionToSelect) {
+            this.selectItem(optionToSelect);
+        }
+    }
+    /**
+     * Attempts to initialize the selected option from user-settable values like
+     * SSR, setting `value`, or `selectedIndex` at startup.
+     */
+    initUserSelection() {
+        // User has set `.value` directly, but internals have not yet booted up.
+        if (this.lastUserSetValue && !this.lastSelectedOptionRecords.length) {
+            this.select(this.lastUserSetValue);
+            // User has set `.selectedIndex` directly, but internals have not yet
+            // booted up.
+        }
+        else if (this.lastUserSetSelectedIndex !== null &&
+            !this.lastSelectedOptionRecords.length) {
+            this.selectIndex(this.lastUserSetSelectedIndex);
+            // Regular boot up!
+        }
+        else {
+            this.updateValueAndDisplayText();
+        }
+    }
+    handleIconChange() {
+        this.hasLeadingIcon = this.leadingIcons.length > 0;
+        this.hasTrailingIcon = this.trailingIcons.length > 0;
+    }
+    /**
+     * Dispatches the `input` and `change` events.
+     */
+    dispatchInteractionEvents() {
+        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        this.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+}
+_a = VALUE;
+__decorate([
+    property({ type: Boolean })
+], Select.prototype, "quick", void 0);
+__decorate([
+    property({ type: Boolean })
+], Select.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Select.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], Select.prototype, "errorText", void 0);
+__decorate([
+    property()
+], Select.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], Select.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Select.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean })
+], Select.prototype, "menuFixed", void 0);
+__decorate([
+    property({ type: Number })
+], Select.prototype, "typeaheadBufferTime", void 0);
+__decorate([
+    property({ type: Boolean })
+], Select.prototype, "hasLeadingIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], Select.prototype, "hasTrailingIcon", void 0);
+__decorate([
+    property()
+], Select.prototype, "displayText", void 0);
+__decorate([
+    state()
+], Select.prototype, "refreshErrorAlert", void 0);
+__decorate([
+    state()
+], Select.prototype, "focused", void 0);
+__decorate([
+    state()
+], Select.prototype, "open", void 0);
+__decorate([
+    query('.field')
+], Select.prototype, "field", void 0);
+__decorate([
+    query('md-menu')
+], Select.prototype, "menu", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'leadingicon', flatten: true })
+], Select.prototype, "leadingIcons", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'trailingicon', flatten: true })
+], Select.prototype, "trailingIcons", void 0);
+__decorate([
+    property()
+], Select.prototype, "value", null);
+__decorate([
+    property({ type: Number })
+], Select.prototype, "selectedIndex", null);
+//# sourceMappingURL=select.js.map

package/select/lib/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["select.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 '../../menu/menu.js';\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {html as staticHtml, StaticValue} from 'lit/static-html.js';\n\nimport {Field} from '../../field/lib/field.js';\nimport {List} from '../../list/lib/list.js';\nimport {DEFAULT_TYPEAHEAD_BUFFER_TIME, Menu} from '../../menu/lib/menu.js';\nimport {DefaultCloseMenuEvent, isElementInSubtree, isSelectableKey} from '../../menu/lib/shared.js';\nimport {TYPEAHEAD_RECORD} from '../../menu/lib/typeaheadController.js';\n\nimport {getSelectedItems, RequestDeselectionEvent, RequestSelectionEvent, SelectOption, SelectOptionRecord} from './shared.js';\n\nconst VALUE = Symbol('value');\n\n/**\n * @fires input Fired when a selection is made by the user via mouse or keyboard\n * interaction.\n * @fires change Fired when a selection is made by the user via mouse or\n * keyboard interaction.\n */\nexport abstract class Select extends LitElement {\n  /**\n   * Opens the menu synchronously with no animation.\n   */\n  @property({type: Boolean}) quick = false;\n  /**\n   * Whether or not the select is required.\n   */\n  @property({type: Boolean}) required = false;\n  /**\n   * Disables the select.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\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   * Calling `reportValidity()` will automatically update `errorText` to the\n   * native `validationMessage`.\n   */\n  @property({type: String}) errorText = '';\n  /**\n   * The floating label for the field.\n   */\n  @property() label = '';\n  /**\n   * Conveys additional information below the text field, such as how it should\n   * be used.\n   */\n  @property({type: String}) supportingText = '';\n  /**\n   * Gets or sets whether or not the text field is in a visually invalid state.\n   *\n   * Calling `reportValidity()` will automatically update `error`.\n   */\n  @property({type: Boolean, reflect: true}) error = false;\n  /**\n   * Whether or not the underlying md-menu should be position: fixed to display\n   * in a top-level manner.\n   */\n  @property({type: Boolean}) menuFixed = false;\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}) typeaheadBufferTime = DEFAULT_TYPEAHEAD_BUFFER_TIME;\n  /**\n   * Whether or not the text field has a leading icon. Used for SSR.\n   */\n  @property({type: Boolean}) hasLeadingIcon = false;\n  /**\n   * Whether or not the text field has a trailing icon. Used for SSR.\n   */\n  @property({type: Boolean}) hasTrailingIcon = false;\n  /**\n   * Text to display in the field. Only set for SSR.\n   */\n  @property() displayText = '';\n  /**\n   * When set to true, the error text's `role=\"alert\"` will be removed, then\n   * re-added after an animation frame. This will re-announce an error message\n   * to screen readers.\n   */\n  @state() private refreshErrorAlert = false;\n  @state() private focused = false;\n  @state() private open = false;\n  @query('.field') private readonly field!: Field|null;\n  @query('md-menu') private readonly menu!: Menu|null;\n  @queryAssignedElements({slot: 'leadingicon', flatten: true})\n  private readonly leadingIcons!: Element[];\n  @queryAssignedElements({slot: 'trailingicon', flatten: true})\n  private readonly trailingIcons!: Element[];\n\n  /**\n   * The value of the currently selected option.\n   *\n   * Note: For SSR, set `[selected]` on the requested option and `displayText`\n   * rather than setting `value` setting `value` will incur a DOM query.\n   */\n  @property()\n  get value(): string {\n    return this[VALUE];\n  }\n\n  set value(value: string) {\n    this.lastUserSetValue = value;\n    this.select(value);\n  }\n\n  [VALUE] = '';\n\n  get options() {\n    // NOTE: this does a DOM query.\n    return (this.menu?.items ?? []) as SelectOption[];\n  }\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})\n  get selectedIndex(): number {\n    // tslint:disable-next-line:enforce-name-casing\n    const [_option, index] = (this.getSelectedOptions() ?? [])[0] ?? [];\n    return index ?? -1;\n  }\n\n  set selectedIndex(index: number) {\n    this.lastUserSetSelectedIndex = index;\n    this.selectIndex(index);\n  }\n\n  /**\n   * Returns an array of selected options.\n   *\n   * NOTE: md-select only suppoprts single selection.\n   */\n  get selectedOptions() {\n    return (this.getSelectedOptions() ?? []).map(([option]) => option);\n  }\n\n  protected abstract readonly fieldTag: StaticValue;\n\n  /**\n   * Used for initializing select when the user sets the `value` directly.\n   */\n  private lastUserSetValue: string|null = null;\n\n  /**\n   * Used for initializing select when the user sets the `selectedIndex`\n   * directly.\n   */\n  private lastUserSetSelectedIndex: number|null = null;\n\n  /**\n   * Used for `input` and `change` event change detection.\n   */\n  private lastSelectedOption: SelectOption|null = null;\n\n  // tslint:disable-next-line:enforce-name-casing\n  private lastSelectedOptionRecords: SelectOptionRecord[] = [];\n\n  protected override render() {\n    return html`\n      <span\n          class=\"select ${classMap(this.getRenderClasses())}\"\n          @focusout=${this.handleFocusout}>\n        ${this.renderField()}\n        ${this.renderMenu()}\n      </span>\n    `;\n  }\n\n  private getRenderClasses() {\n    return {\n      'disabled': this.disabled,\n      'error': this.error,\n    };\n  }\n\n  private renderField() {\n    return staticHtml`\n      <${this.fieldTag}\n          aria-haspopup=\"listbox\"\n          role=\"combobox\"\n          tabindex=${this.disabled ? '-1' : '0'}\n          aria-expanded=${this.open ? 'true' : 'false'}\n          class=\"field\"\n          label=${this.label}\n          .focused=${this.focused || this.open}\n          .populated=${!!this.displayText}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          .error=${this.error}\n          .hasStart=${this.hasLeadingIcon}\n          .hasEnd=${this.hasTrailingIcon}\n          @keydown =${this.handleKeydown}\n          @click=${this.handleClick}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}>\n        ${this.renderFieldContent()}\n      </${this.fieldTag}>`;\n  }\n\n  private renderFieldContent() {\n    return [\n      this.renderLeadingIcon(),\n      this.renderLabel(),\n      this.renderTrailingIcon(),\n      this.renderSupportingText(),\n    ];\n  }\n\n  private renderLeadingIcon() {\n    return html`\n      <span class=\"icon leading\" slot=\"start\">\n         <slot name=\"leadingicon\" @slotchange=${this.handleIconChange}></slot>\n      </span>\n     `;\n  }\n\n  private renderTrailingIcon() {\n    return html`\n      <span class=\"icon trailing\" slot=\"end\">\n         <slot name=\"trailingicon\" @slotchange=${this.handleIconChange}></slot>\n      </span>\n     `;\n  }\n\n  private renderLabel() {\n    // need to render &nbsp; so that line-height can apply and give it a\n    // non-zero height\n    return html`<div\n        id=\"label\"\n        class=\"label\">${this.displayText || html`&nbsp;`}</div>`;\n  }\n\n  private renderSupportingText() {\n    const text = this.getSupportingText();\n    if (!text) {\n      return nothing;\n    }\n\n    return html`<span id=\"support\"\n      slot=\"supporting-text\"\n      role=${this.shouldErrorAnnounce() ? 'alert' : nothing}>${text}</span>`;\n  }\n\n  private getSupportingText() {\n    return this.error && this.errorText ? this.errorText : this.supportingText;\n  }\n\n  private shouldErrorAnnounce() {\n    // Announce if there is an error and error text visible.\n    // If refreshErrorAlert is true, do not announce. This will remove the\n    // role=\"alert\" attribute. Another render cycle will happen after an\n    // animation frame to re-add the role.\n    return this.error && !!this.errorText && !this.refreshErrorAlert;\n  }\n\n  private renderMenu() {\n    return html`\n      <md-menu\n          id=\"listbox\"\n          default-focus=\"NONE\"\n          listTabIndex=\"-1\"\n          type=\"listbox\"\n          stay-open-on-focusout\n          .anchor=${this.field}\n          .open=${this.open}\n          .quick=${this.quick}\n          .fixed=${this.menuFixed}\n          .typeaheadBufferTime=${this.typeaheadBufferTime}\n          @opening=${this.handleOpening}\n          @closing=${this.handleClosing}\n          @close-menu=${this.handleCloseMenu}\n          @request-selection=${this.handleRequestSelection}\n          @request-deselection=${this.handleRequestDeselection}>\n        ${this.renderMenuContent()}\n      </md-menu>`;\n  }\n\n  private renderMenuContent() {\n    return html`<slot></slot>`;\n  }\n\n  /**\n   * Handles opening the select on keydown and typahead selection when the menu\n   * is closed.\n   */\n  private handleKeydown(e: KeyboardEvent) {\n    if (this.open || this.disabled || !this.menu) {\n      return;\n    }\n\n    const typeaheadController = this.menu.typeaheadController;\n    const isOpenKey =\n        e.code === 'Space' || e.code === 'ArrowDown' || e.code === 'Enter';\n\n    // Do not open if currently typing ahead because the user may be typing the\n    // spacebar to match a word with a space\n    if (!typeaheadController.isTypingAhead && isOpenKey) {\n      e.preventDefault();\n      this.open = true;\n      return;\n    }\n\n    const isPrintableKey = e.key.length === 1;\n\n    // Handles typing ahead when the menu is closed by delegating the event to\n    // the underlying menu's typeaheadController\n    if (isPrintableKey) {\n      typeaheadController.onKeydown(e);\n      e.preventDefault();\n\n      const {lastActiveRecord} = typeaheadController;\n\n      if (!lastActiveRecord) {\n        return;\n      }\n\n      const hasChanged = this.selectItem(\n          lastActiveRecord[TYPEAHEAD_RECORD.ITEM] as SelectOption);\n\n      if (hasChanged) {\n        this.dispatchInteractionEvents();\n      }\n    }\n  }\n\n  private handleClick() {\n    this.open = true;\n  }\n\n  private handleFocus() {\n    this.focused = true;\n  }\n\n  private handleBlur() {\n    this.focused = false;\n  }\n\n  /**\n   * Handles closing the menu when the focus leaves the select's subtree.\n   */\n  private handleFocusout(e: FocusEvent) {\n    // Don't close the menu if we are switching focus between menu,\n    // select-option, and field\n    if (e.relatedTarget && isElementInSubtree(e.relatedTarget, this)) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  /**\n   * Gets a list of all selected select options as a list item record array.\n   *\n   * @return An array of selected list option records.\n   */\n  private getSelectedOptions() {\n    if (!this.menu) {\n      this.lastSelectedOptionRecords = [];\n      return null;\n    }\n\n    const items = this.menu.items as SelectOption[];\n    this.lastSelectedOptionRecords = getSelectedItems(items);\n    return this.lastSelectedOptionRecords;\n  }\n\n  override async getUpdateComplete() {\n    await this.menu?.updateComplete;\n    return super.getUpdateComplete();\n  }\n\n  /**\n   * Gets the selected options from the DOM, and updates the value and display\n   * text to the first selected option's value and headline respectively.\n   *\n   * @return Whether or not the selected option has changed since last update.\n   */\n  private updateValueAndDisplayText() {\n    const selectedOptions = this.getSelectedOptions() ?? [];\n    // Used to determine whether or not we need to fire an input / change event\n    // which fire whenever the option element changes (value or selectedIndex)\n    // on user interaction.\n    let hasSelectedOptionChanged = false;\n\n    if (selectedOptions.length) {\n      const [firstSelectedOption] = selectedOptions[0];\n      hasSelectedOptionChanged =\n          this.lastSelectedOption !== firstSelectedOption;\n      this.lastSelectedOption = firstSelectedOption;\n      this[VALUE] = firstSelectedOption.value;\n      this.displayText = firstSelectedOption.headline;\n\n    } else {\n      hasSelectedOptionChanged = this.lastSelectedOption !== null;\n      this.lastSelectedOption = null;\n      this[VALUE] = '';\n      this.displayText = '';\n    }\n\n    return hasSelectedOptionChanged;\n  }\n\n  protected override update(changed: PropertyValues<this>) {\n    // In SSR the options will be ready to query, so try to figure out what\n    // the value and display text should be.\n    if (!this.hasUpdated) {\n      this.initUserSelection();\n    }\n\n    super.update(changed);\n  }\n\n  protected override async firstUpdated(changed: PropertyValues<this>) {\n    await this.menu?.updateComplete;\n    // If this has been handled on update already due to SSR, try again.\n    if (!this.lastSelectedOptionRecords.length) {\n      this.initUserSelection();\n    }\n\n    super.firstUpdated(changed);\n  }\n\n  protected override updated(changedProperties: PropertyValues) {\n    // Keep changedProperties arg so that subclasses may call it\n\n    if (this.refreshErrorAlert) {\n      // The past render cycle removed the role=\"alert\" from the error message.\n      // Re-add it after an animation frame to re-announce the error.\n      requestAnimationFrame(() => {\n        this.refreshErrorAlert = false;\n      });\n    }\n  }\n\n  /**\n   * Focuses and activates the last selected item upon opening, and resets other\n   * active items.\n   */\n  private async handleOpening() {\n    const items = this.menu!.items;\n    const activeItem = List.getActiveItem(items)?.item;\n    const [selectedItem] = this.lastSelectedOptionRecords[0] ?? [null];\n\n    // This is true if the user keys through the list but clicks out of the menu\n    // thus no close-menu event is fired by an item and we can't clean up in\n    // handleCloseMenu.\n    if (activeItem && activeItem !== selectedItem) {\n      activeItem.active = false;\n    }\n\n    if (selectedItem) {\n      selectedItem.active = true;\n      selectedItem.focus();\n    }\n  }\n\n  private handleClosing() {\n    this.open = false;\n  }\n\n  /**\n   * Determines the reason for closing, and updates the UI accordingly.\n   */\n  private handleCloseMenu(e: InstanceType<typeof DefaultCloseMenuEvent>) {\n    const reason = e.reason;\n    const item = e.itemPath[0] as SelectOption;\n    this.open = false;\n    let hasChanged = false;\n\n    if (reason.kind === 'CLICK_SELECTION') {\n      hasChanged = this.selectItem(item);\n    } else if (reason.kind === 'KEYDOWN' && isSelectableKey(reason.key)) {\n      hasChanged = this.selectItem(item);\n    } else {\n      // This can happen on ESC being pressed\n      item.active = false;\n      item.blur();\n    }\n\n    // Dispatch interaction events since selection has been made via keyboard\n    // or mouse.\n    if (hasChanged) {\n      this.dispatchInteractionEvents();\n    }\n  }\n\n  /**\n   * Selects a given option, deselects other options, and updates the UI.\n   *\n   * @return Whether the last selected option has changed.\n   */\n  private selectItem(item: SelectOption) {\n    this.lastSelectedOptionRecords.forEach(([option]) => {\n      if (item !== option) {\n        option.selected = false;\n      }\n    });\n    item.selected = true;\n\n    return this.updateValueAndDisplayText();\n  }\n\n  /**\n   * Handles updating selection when an option element requests selection via\n   * property / attribute change.\n   */\n  private handleRequestSelection(e: RequestSelectionEvent) {\n    const requestingOptionEl = e.target as SelectOption & HTMLElement;\n\n    // No-op if this item is already selected.\n    if (this.lastSelectedOptionRecords.some(\n            ([option]) => option === requestingOptionEl)) {\n      return;\n    }\n\n    this.selectItem(requestingOptionEl);\n  }\n\n  /**\n   * Handles updating selection when an option element requests deselection via\n   * property / attribute change.\n   */\n  private handleRequestDeselection(e: RequestDeselectionEvent) {\n    const requestingOptionEl = e.target as SelectOption & HTMLElement;\n\n    // No-op if this item is not even in the list of tracked selected items.\n    if (!this.lastSelectedOptionRecords.some(\n            ([option]) => option === requestingOptionEl)) {\n      return;\n    }\n\n    this.updateValueAndDisplayText();\n  }\n\n  /**\n   * Selects an option given the value of the option, and updates MdSelect's\n   * value.\n   */\n  select(value: string) {\n    const optionToSelect = this.options.find(option => option.value === value);\n    if (optionToSelect) {\n      this.selectItem(optionToSelect);\n    }\n  }\n\n  /**\n   * Selects an option given the index of the option, and updates MdSelect's\n   * value.\n   */\n  selectIndex(index: number) {\n    const optionToSelect = this.options[index];\n    if (optionToSelect) {\n      this.selectItem(optionToSelect);\n    }\n  }\n\n  /**\n   * Attempts to initialize the selected option from user-settable values like\n   * SSR, setting `value`, or `selectedIndex` at startup.\n   */\n  private initUserSelection() {\n    // User has set `.value` directly, but internals have not yet booted up.\n    if (this.lastUserSetValue && !this.lastSelectedOptionRecords.length) {\n      this.select(this.lastUserSetValue);\n\n      // User has set `.selectedIndex` directly, but internals have not yet\n      // booted up.\n    } else if (\n        this.lastUserSetSelectedIndex !== null &&\n        !this.lastSelectedOptionRecords.length) {\n      this.selectIndex(this.lastUserSetSelectedIndex);\n\n      // Regular boot up!\n    } else {\n      this.updateValueAndDisplayText();\n    }\n  }\n\n  private handleIconChange() {\n    this.hasLeadingIcon = this.leadingIcons.length > 0;\n    this.hasTrailingIcon = this.trailingIcons.length > 0;\n  }\n\n  /**\n   * Dispatches the `input` and `change` events.\n   */\n  private dispatchInteractionEvents() {\n    this.dispatchEvent(new Event('input', {bubbles: true, composed: true}));\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n  }\n}\n"]}

package/select/lib/selectoption/harness.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ListItemHarness } from '../../../list/lib/listitem/harness.js';
+/**
+ * Test harness for menu item.
+ */
+export declare class SelectOptionHarness extends ListItemHarness {
+}

package/select/lib/selectoption/harness.js

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ListItemHarness } from '../../../list/lib/listitem/harness.js';
+/**
+ * Test harness for menu item.
+ */
+export class SelectOptionHarness extends ListItemHarness {
+}
+//# sourceMappingURL=harness.js.map

package/select/lib/selectoption/harness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,uCAAuC,CAAC;AAEtE;;GAEG;AACH,MAAM,OAAO,mBAAoB,SAAQ,eAAe;CAAG","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ListItemHarness} from '../../../list/lib/listitem/harness.js';\n\n/**\n * Test harness for menu item.\n */\nexport class SelectOptionHarness extends ListItemHarness {}\n"]}