@digital-realty/ix-select 1.1.3 → 1.1.4

package/dist/IxSelect.js

@@ -1,236 +1,244 @@
-var _a;
-import { __decorate } from "tslib";
-import '@digital-realty/ix-icon/ix-icon.js';
-import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
-import { DEFAULT_TYPEAHEAD_BUFFER_TIME } from '@material/web/menu/internal/menu.js';
-import '@material/web/select/filled-select.js';
-import '@material/web/select/outlined-select.js';
-import { LitElement, html, isServer, nothing } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { literal, html as staticHtml } from 'lit/static-html.js';
-import './selectoption/ix-select-option.js';
-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.
-         */
-        this.filled = false;
-        /**
-         * The floating label for the field.
-         */
-        this.label = '';
-        /**
-         * 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.
-         *
-         * This error message overrides the error message displayed by
-         * `reportValidity()`.
-         */
-        this.errorText = '';
-        /**
-         * Conveys additional information below the select, such as how it should
-         * be used.
-         */
-        this.supportingText = '';
-        /**
-         * Gets or sets whether or not the select is in a visually invalid state.
-         *
-         * This error state overrides the error state controlled by
-         * `reportValidity()`.
-         */
-        this.error = false;
-        /**
-         * Text to display in the field. Only set for SSR.
-         */
-        this.displayText = '';
-        /**
-         * Name of icon. It is always a string.
-         */
-        this.leadingIcon = '';
-        /**
-         * Name of icon. It is always a string.
-         */
-        this.trailingIcon = '';
-        /**
-         * Whether or not the underlying md-menu should be position: fixed to display
-         * in a top-level manner, or position: absolute.
-         *
-         * position:fixed is useful for cases where select is inside of another
-         * element with stacking context and hidden overflows such as `md-dialog`.
-         */
-        this.menuPositioning = 'absolute';
-        /**
-         * The max time between the keystrokes of the typeahead select / menu behavior
-         * before it clears the typeahead buffer.
-         */
-        this.typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;
-        /**
-         * 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.
-         */
-        this.selectedIndex = -1;
-        this.nativeError = false;
-        this.nativeErrorText = '';
-        this.internals = this /* needed for closure */
-            .attachInternals();
-        this.customValidationMessage = '';
-        this[_a] = '';
-        this.handleResize = () => {
-            this.minWidth = 0;
-        };
-    }
-    get hasError() {
-        return this.error || this.nativeError;
-    }
-    get form() {
-        return this.internals.form;
-    }
-    get labels() {
-        return this.internals.labels;
-    }
-    get name() {
-        var _b;
-        return (_b = this.getAttribute('name')) !== null && _b !== void 0 ? _b : '';
-    }
-    set name(name) {
-        this.setAttribute('name', name);
-    }
-    get validity() {
-        this.syncValidity();
-        return this.internals.validity;
-    }
-    get value() {
-        this[VALUE] = this.component.value;
-        return this[VALUE];
-    }
-    set value(value) {
-        if (isServer)
-            return;
-        this.component.value = value;
-    }
-    get validationMessage() {
-        this.syncValidity();
-        return this.internals.validationMessage;
-    }
-    handleSelection() {
-        this.internals.setFormValue(this.component.value);
-        this.syncValidity();
-    }
-    setMenuWidth() {
-        if (this.wideMenu) {
-            this.minWidth = this.component.offsetWidth;
-        }
-    }
-    async getUpdateComplete() {
-        await super.getUpdateComplete();
-        await this.component.updateComplete;
-        this.setMenuWidth();
-        this.internals.setFormValue(this.component.value);
-        return true;
-    }
-    async updated(changed) {
-        if (changed.has('required')) {
-            this.syncValidity();
-        }
-        await this.getUpdateComplete();
-    }
-    getErrorText() {
-        return this.error ? this.errorText : this.nativeErrorText;
-    }
-    async syncValidity() {
-        const valueMissing = this.required && !this.component.value;
-        const customError = !!this.customValidationMessage;
-        const validationMessage = this.customValidationMessage ||
-            (valueMissing && this.getRequiredValidationMessage()) ||
-            '';
-        this.internals.setValidity({ valueMissing, customError }, validationMessage, this.component);
-    }
-    // Returns the platform `<select>` validation message for i18n.
-    // eslint-disable-next-line class-methods-use-this
-    getRequiredValidationMessage() {
-        const select = document.createElement('select');
-        select.required = true;
-        return select.validationMessage;
-    }
-    checkValidity() {
-        this.syncValidity();
-        return this.internals.checkValidity();
-    }
-    reportValidity() {
-        return this.component.reportValidity();
-    }
-    setCustomValidity(error) {
-        this.customValidationMessage = error;
-        this.syncValidity();
-    }
-    focus() {
-        var _b, _c;
-        (_c = (_b = this.component.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.field')) === null || _c === void 0 ? void 0 : _c.focus();
-    }
-    // eslint-disable-next-line class-methods-use-this
-    onBlur(e) {
-        // Prevent blur event from bubbling on focus in (when focus switches to options menu)
-        const el = e.relatedTarget;
-        if ((el === null || el === void 0 ? void 0 : el.tagName) === 'IX-SELECT-OPTION') {
-            e.stopPropagation();
-        }
-    }
-    /**
-     * Reset the select to its default value.
-     */
-    reset() {
-        this.component.reset();
-        this.internals.setFormValue(this.component.value);
-    }
-    /** @private */
-    formResetCallback() {
-        this.reset();
-    }
-    /** @private */
-    formStateRestoreCallback(newState) {
-        this.value = newState;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        if (!isServer && this.wideMenu) {
-            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`
-            : literal `md-outlined-select`;
-        const ariaLabel = this.label || this.ariaLabel;
+var _a;
+import { __decorate } from "tslib";
+import '@digital-realty/ix-icon/ix-icon.js';
+import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
+import { DEFAULT_TYPEAHEAD_BUFFER_TIME } from '@material/web/menu/internal/menu.js';
+import '@material/web/select/filled-select.js';
+import '@material/web/select/outlined-select.js';
+import { LitElement, html, isServer, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { literal, html as staticHtml } from 'lit/static-html.js';
+import './selectoption/ix-select-option.js';
+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.
+         */
+        this.filled = false;
+        /**
+         * The floating label for the field.
+         */
+        this.label = '';
+        /**
+         * 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.
+         *
+         * This error message overrides the error message displayed by
+         * `reportValidity()`.
+         */
+        this.errorText = '';
+        /**
+         * Conveys additional information below the select, such as how it should
+         * be used.
+         */
+        this.supportingText = '';
+        /**
+         * Gets or sets whether or not the select is in a visually invalid state.
+         *
+         * This error state overrides the error state controlled by
+         * `reportValidity()`.
+         */
+        this.error = false;
+        /**
+         * Text to display in the field. Only set for SSR.
+         */
+        this.displayText = '';
+        /**
+         * Name of icon. It is always a string.
+         */
+        this.leadingIcon = '';
+        /**
+         * Name of icon. It is always a string.
+         */
+        this.trailingIcon = '';
+        /**
+         * Whether or not the underlying md-menu should be position: fixed to display
+         * in a top-level manner, or position: absolute.
+         *
+         * position:fixed is useful for cases where select is inside of another
+         * element with stacking context and hidden overflows such as `md-dialog`.
+         */
+        this.menuPositioning = 'absolute';
+        /**
+         * The max time between the keystrokes of the typeahead select / menu behavior
+         * before it clears the typeahead buffer.
+         */
+        this.typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;
+        /**
+         * 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.
+         */
+        this.selectedIndex = -1;
+        this.nativeError = false;
+        this.nativeErrorText = '';
+        this.internals = this /* needed for closure */
+            .attachInternals();
+        this.customValidationMessage = '';
+        this[_a] = '';
+        this.handleResize = () => {
+            this.minWidth = 0;
+        };
+    }
+    get hasError() {
+        return this.error || this.nativeError;
+    }
+    get form() {
+        return this.internals.form;
+    }
+    get labels() {
+        return this.internals.labels;
+    }
+    get name() {
+        var _b;
+        return (_b = this.getAttribute('name')) !== null && _b !== void 0 ? _b : '';
+    }
+    set name(name) {
+        this.setAttribute('name', name);
+    }
+    get validity() {
+        this.syncValidity();
+        return this.internals.validity;
+    }
+    get value() {
+        this[VALUE] = this.component.value;
+        return this[VALUE];
+    }
+    set value(value) {
+        if (isServer)
+            return;
+        this.component.value = value;
+    }
+    get validationMessage() {
+        this.syncValidity();
+        return this.internals.validationMessage;
+    }
+    handleSelection() {
+        this.internals.setFormValue(this.component.value);
+        this.syncValidity();
+    }
+    setMenuSize() {
+        var _b, _c, _d, _e;
+        const select = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.select');
+        const menu = (_e = (_d = (_c = select === null || select === void 0 ? void 0 : select.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#listbox')) === null || _d === void 0 ? void 0 : _d.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('.menu');
+        // Set max-height to 70vh to prevent menus with many options from overflowing the viewport which
+        // can cause some options to become inaccessible: https://telxapp.atlassian.net/browse/IXUAT-9459
+        if (menu.style) {
+            menu.style.maxHeight = `70vh`;
+        }
+        if (this.wideMenu) {
+            this.minWidth = this.component.offsetWidth;
+        }
+    }
+    async getUpdateComplete() {
+        await super.getUpdateComplete();
+        await this.component.updateComplete;
+        this.setMenuSize();
+        this.internals.setFormValue(this.component.value);
+        return true;
+    }
+    async updated(changed) {
+        if (changed.has('required')) {
+            this.syncValidity();
+        }
+        await this.getUpdateComplete();
+    }
+    getErrorText() {
+        return this.error ? this.errorText : this.nativeErrorText;
+    }
+    async syncValidity() {
+        const valueMissing = this.required && !this.component.value;
+        const customError = !!this.customValidationMessage;
+        const validationMessage = this.customValidationMessage ||
+            (valueMissing && this.getRequiredValidationMessage()) ||
+            '';
+        this.internals.setValidity({ valueMissing, customError }, validationMessage, this.component);
+    }
+    // Returns the platform `<select>` validation message for i18n.
+    // eslint-disable-next-line class-methods-use-this
+    getRequiredValidationMessage() {
+        const select = document.createElement('select');
+        select.required = true;
+        return select.validationMessage;
+    }
+    checkValidity() {
+        this.syncValidity();
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        return this.component.reportValidity();
+    }
+    setCustomValidity(error) {
+        this.customValidationMessage = error;
+        this.syncValidity();
+    }
+    focus() {
+        var _b, _c;
+        (_c = (_b = this.component.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.field')) === null || _c === void 0 ? void 0 : _c.focus();
+    }
+    // eslint-disable-next-line class-methods-use-this
+    onBlur(e) {
+        // Prevent blur event from bubbling on focus in (when focus switches to options menu)
+        const el = e.relatedTarget;
+        if ((el === null || el === void 0 ? void 0 : el.tagName) === 'IX-SELECT-OPTION') {
+            e.stopPropagation();
+        }
+    }
+    /**
+     * Reset the select to its default value.
+     */
+    reset() {
+        this.component.reset();
+        this.internals.setFormValue(this.component.value);
+    }
+    /** @private */
+    formResetCallback() {
+        this.reset();
+    }
+    /** @private */
+    formStateRestoreCallback(newState) {
+        this.value = newState;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!isServer && this.wideMenu) {
+            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`
+            : literal `md-outlined-select`;
+        const ariaLabel = this.label || this.ariaLabel;
         return staticHtml `<${tag}
         ?disabled=${this.disabled}
         ?quick=${this.quick}
@@ -248,91 +256,91 @@ export class IxSelect extends LitElement {
         label=${this.label}
         name=${this.name}
         @request-selection=${this.handleSelection}
-        @opening=${this.setMenuWidth}
+        @opening=${this.setMenuSize}
         class="select"
         style="min-width:${this.minWidth}px"
         @focus=${this.focus}
         @blur=${this.onBlur}
       >
         <slot></slot>
-          ${this.leadingIcon
-            ? html `<ix-icon slot="leading-icon">${this.leadingIcon}</ix-icon>`
+          ${this.leadingIcon
+            ? html `<ix-icon slot="leading-icon">${this.leadingIcon}</ix-icon>`
             : nothing}
-          ${this.trailingIcon
+          ${this.trailingIcon
             ? html `<ix-icon slot="trailing-icon"
                   >${this.trailingIcon}</ix-icon
-                >`
+                >`
             : nothing}
          <slot slot="aria-describedby" name="aria-describedby"></slot>
-      </${tag}>`;
-    }
-}
-_a = VALUE;
-(() => {
-    requestUpdateOnAriaChange(IxSelect);
-})();
-/** @nocollapse */
-IxSelect.shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-};
-/** @nocollapse */
-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);
-__decorate([
-    property()
-], IxSelect.prototype, "label", void 0);
-__decorate([
-    property({ type: Boolean })
-], IxSelect.prototype, "quick", void 0);
-__decorate([
-    property({ type: Boolean })
-], IxSelect.prototype, "required", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IxSelect.prototype, "disabled", void 0);
-__decorate([
-    property({ type: String, attribute: 'error-text' })
-], IxSelect.prototype, "errorText", void 0);
-__decorate([
-    property({ type: String, attribute: 'supporting-text' })
-], IxSelect.prototype, "supportingText", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IxSelect.prototype, "error", void 0);
-__decorate([
-    property({ type: String, attribute: 'display-text' })
-], IxSelect.prototype, "displayText", void 0);
-__decorate([
-    property({ attribute: 'leading-icon', reflect: true })
-], IxSelect.prototype, "leadingIcon", void 0);
-__decorate([
-    property({ attribute: 'trailing-icon', reflect: true })
-], IxSelect.prototype, "trailingIcon", void 0);
-__decorate([
-    property({ attribute: 'menu-positioning' })
-], IxSelect.prototype, "menuPositioning", void 0);
-__decorate([
-    property({ type: Number, attribute: 'typeahead-delay' })
-], IxSelect.prototype, "typeaheadDelay", void 0);
-__decorate([
-    property({ type: Number, attribute: 'selected-index' })
-], IxSelect.prototype, "selectedIndex", void 0);
-__decorate([
-    state()
-], IxSelect.prototype, "nativeError", void 0);
-__decorate([
-    state()
-], IxSelect.prototype, "nativeErrorText", void 0);
+      </${tag}>`;
+    }
+}
+_a = VALUE;
+(() => {
+    requestUpdateOnAriaChange(IxSelect);
+})();
+/** @nocollapse */
+IxSelect.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+/** @nocollapse */
+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);
+__decorate([
+    property()
+], IxSelect.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxSelect.prototype, "quick", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxSelect.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IxSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, attribute: 'error-text' })
+], IxSelect.prototype, "errorText", void 0);
+__decorate([
+    property({ type: String, attribute: 'supporting-text' })
+], IxSelect.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IxSelect.prototype, "error", void 0);
+__decorate([
+    property({ type: String, attribute: 'display-text' })
+], IxSelect.prototype, "displayText", void 0);
+__decorate([
+    property({ attribute: 'leading-icon', reflect: true })
+], IxSelect.prototype, "leadingIcon", void 0);
+__decorate([
+    property({ attribute: 'trailing-icon', reflect: true })
+], IxSelect.prototype, "trailingIcon", void 0);
+__decorate([
+    property({ attribute: 'menu-positioning' })
+], IxSelect.prototype, "menuPositioning", void 0);
+__decorate([
+    property({ type: Number, attribute: 'typeahead-delay' })
+], IxSelect.prototype, "typeaheadDelay", void 0);
+__decorate([
+    property({ type: Number, attribute: 'selected-index' })
+], IxSelect.prototype, "selectedIndex", void 0);
+__decorate([
+    state()
+], IxSelect.prototype, "nativeError", void 0);
+__decorate([
+    state()
+], IxSelect.prototype, "nativeErrorText", void 0);
 //# sourceMappingURL=IxSelect.js.map