@material/web 1.0.1 → 1.0.2-nightly.6a1fb38.0

package/select/internal/select.d.ts

@@ -6,23 +6,25 @@
 import '../../menu/menu.js';
 import { LitElement, PropertyValues } from 'lit';
 import { StaticValue } from 'lit/static-html.js';
+import { getFormValue } from '../../labs/behaviors/form-associated.js';
 import { SelectOption } from './selectoption/selectOptionController.js';
 declare const VALUE: unique symbol;
+declare const selectBaseClass: import("../../labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../labs/behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../labs/behaviors/form-associated.js").FormAssociatedConstructor, import("../../labs/behaviors/form-associated.js").FormAssociated>;
 /**
- * @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.
- * @fires opening Fired when the select's menu is about to open.
- * @fires opened Fired when the select's menu has finished animations and
- * opened.
- * @fires closing Fired when the select's menu is about to close.
- * @fires closed Fired when the select's menu has finished animations and
- * closed.
+ * @fires change {Event} The native `change` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
+ * --bubbles
+ * @fires input {InputEvent} The native `input` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+ * --bubbles --composed
+ * @fires opening {Event} Fired when the select's menu is about to open.
+ * @fires opened {Event} Fired when the select's menu has finished animations
+ * and opened.
+ * @fires closing {Event} Fired when the select's menu is about to close.
+ * @fires closed {Event} Fired when the select's menu has finished animations
+ * and closed.
  */
-export declare abstract class Select extends LitElement {
-    /** @nocollapse  */
-    static readonly formAssociated = true;
+export declare abstract class Select extends selectBaseClass {
     /**
      * Opens the menu synchronously with no animation.
      */
@@ -31,10 +33,6 @@ export declare abstract class Select extends LitElement {
      * Whether or not the select is required.
      */
     required: boolean;
-    /**
-     * Disables the select.
-     */
-    disabled: boolean;
     /**
      * The error message that replaces supporting text when `error` is true. If
      * `errorText` is an empty string, then the supporting text will continue to
@@ -67,7 +65,7 @@ export declare abstract class Select extends LitElement {
      * position:fixed is useful for cases where select is inside of another
      * element with stacking context and hidden overflows such as `md-dialog`.
      */
-    menuPositioning: 'absolute' | 'fixed';
+    menuPositioning: 'absolute' | 'fixed' | 'popover';
     /**
      * The max time between the keystrokes of the typeahead select / menu behavior
      * before it clears the typeahead buffer.
@@ -106,19 +104,6 @@ export declare abstract class Select extends LitElement {
      * NOTE: md-select only suppoprts single selection.
      */
     get selectedOptions(): SelectOption[];
-    /**
-     * The HTML name to use in form submission.
-     */
-    get name(): string;
-    set name(name: string);
-    /**
-     * The associated form element with which this element's value will submit.
-     */
-    get form(): HTMLFormElement;
-    /**
-     * The labels this element is associated with.
-     */
-    get labels(): NodeList;
     /**
      * Returns a ValidityState object that represents the validity states of the
      * checkbox.
@@ -171,8 +156,9 @@ export declare abstract class Select extends LitElement {
     private readonly menu;
     private readonly labelEl;
     private readonly leadingIcons;
+    private isCheckingValidity;
+    private isReportingValidity;
     private customValidationMessage;
-    private readonly internals;
     /**
      * Selects an option given the value of the option, and updates MdSelect's
      * value.
@@ -215,6 +201,7 @@ export declare abstract class Select extends LitElement {
      * @return true if the select is valid, or false if not.
      */
     reportValidity(): boolean;
+    private showErrorMessage;
     /**
      * Sets the select's native validation error message. This is used to
      * customize `validationMessage`.
@@ -305,9 +292,13 @@ export declare abstract class Select extends LitElement {
     private getErrorText;
     private syncValidity;
     private getRequiredValidationMessage;
-    /** @private */
+    private readonly onInvalid;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    disabled: boolean;
+    name: string;
+    [getFormValue](): string;
     formResetCallback(): void;
-    /** @private */
     formStateRestoreCallback(state: string): void;
 }
 export {};

package/select/internal/select.js

@@ -12,25 +12,31 @@ import { classMap } from 'lit/directives/class-map.js';
 import { html as staticHtml } from 'lit/static-html.js';
 import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
 import { redispatchEvent } from '../../internal/controller/events.js';
+import { internals, mixinElementInternals, } from '../../labs/behaviors/element-internals.js';
+import { getFormValue, mixinFormAssociated, } from '../../labs/behaviors/form-associated.js';
 import { getActiveItem } from '../../list/internal/list-navigation-helpers.js';
-import { isElementInSubtree, isSelectableKey } from '../../menu/internal/controllers/shared.js';
+import { isElementInSubtree, isSelectableKey, } from '../../menu/internal/controllers/shared.js';
 import { TYPEAHEAD_RECORD } from '../../menu/internal/controllers/typeaheadController.js';
 import { DEFAULT_TYPEAHEAD_BUFFER_TIME } from '../../menu/internal/menu.js';
 import { getSelectedItems } from './shared.js';
 const VALUE = Symbol('value');
+// Separate variable needed for closure.
+const selectBaseClass = mixinFormAssociated(mixinElementInternals(LitElement));
 /**
- * @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.
- * @fires opening Fired when the select's menu is about to open.
- * @fires opened Fired when the select's menu has finished animations and
- * opened.
- * @fires closing Fired when the select's menu is about to close.
- * @fires closed Fired when the select's menu has finished animations and
- * closed.
+ * @fires change {Event} The native `change` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
+ * --bubbles
+ * @fires input {InputEvent} The native `input` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+ * --bubbles --composed
+ * @fires opening {Event} Fired when the select's menu is about to open.
+ * @fires opened {Event} Fired when the select's menu has finished animations
+ * and opened.
+ * @fires closing {Event} Fired when the select's menu is about to close.
+ * @fires closed {Event} Fired when the select's menu has finished animations
+ * and closed.
  */
-export class Select extends LitElement {
+export class Select extends selectBaseClass {
     constructor() {
         super(...arguments);
         /**
@@ -41,10 +47,6 @@ export class Select extends LitElement {
          * 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
@@ -77,7 +79,7 @@ export class Select extends LitElement {
          * 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';
+        this.menuPositioning = 'popover';
         /**
          * The max time between the keystrokes of the typeahead select / menu behavior
          * before it clears the typeahead buffer.
@@ -118,8 +120,15 @@ export class Select extends LitElement {
         this.nativeErrorText = '';
         this.focused = false;
         this.open = false;
+        this.isCheckingValidity = false;
+        this.isReportingValidity = false;
         this.customValidationMessage = '';
-        this.internals = this /* needed for closure */.attachInternals();
+        this.onInvalid = (invalidEvent) => {
+            if (this.isCheckingValidity || this.isReportingValidity) {
+                return;
+            }
+            this.showErrorMessage(false, invalidEvent);
+        };
     }
     /**
      * The value of the currently selected option.
@@ -164,27 +173,6 @@ export class Select extends LitElement {
     get selectedOptions() {
         return (this.getSelectedOptions() ?? []).map(([option]) => option);
     }
-    /**
-     * The HTML name to use in form submission.
-     */
-    get name() {
-        return this.getAttribute('name') ?? '';
-    }
-    set name(name) {
-        this.setAttribute('name', name);
-    }
-    /**
-     * The associated form element with which this element's value will submit.
-     */
-    get form() {
-        return this.internals.form;
-    }
-    /**
-     * The labels this element is associated with.
-     */
-    get labels() {
-        return this.internals.labels;
-    }
     /**
      * Returns a ValidityState object that represents the validity states of the
      * checkbox.
@@ -194,7 +182,7 @@ export class Select extends LitElement {
      */
     get validity() {
         this.syncValidity();
-        return this.internals.validity;
+        return this[internals].validity;
     }
     /**
      * Returns the native validation error message.
@@ -203,7 +191,7 @@ export class Select extends LitElement {
      */
     get validationMessage() {
         this.syncValidity();
-        return this.internals.validationMessage;
+        return this[internals].validationMessage;
     }
     /**
      * Returns whether an element will successfully validate based on forms
@@ -213,7 +201,7 @@ export class Select extends LitElement {
      */
     get willValidate() {
         this.syncValidity();
-        return this.internals.willValidate;
+        return this[internals].willValidate;
     }
     get hasError() {
         return this.error || this.nativeError;
@@ -223,7 +211,7 @@ export class Select extends LitElement {
      * value.
      */
     select(value) {
-        const optionToSelect = this.options.find(option => option.value === value);
+        const optionToSelect = this.options.find((option) => option.value === value);
         if (optionToSelect) {
             this.selectItem(optionToSelect);
         }
@@ -260,8 +248,11 @@ export class Select extends LitElement {
      * @return true if the select is valid, or false if not.
      */
     checkValidity() {
+        this.isCheckingValidity = true;
         this.syncValidity();
-        return this.internals.checkValidity();
+        const isValid = this[internals].checkValidity();
+        this.isCheckingValidity = false;
+        return isValid;
     }
     /**
      * Checks the select's native validation and returns whether or not the
@@ -280,11 +271,17 @@ export class Select extends LitElement {
      * @return true if the select is valid, or false if not.
      */
     reportValidity() {
+        this.isReportingValidity = true;
         let invalidEvent;
-        this.addEventListener('invalid', event => {
+        this.addEventListener('invalid', (event) => {
             invalidEvent = event;
         }, { once: true });
         const valid = this.checkValidity();
+        this.showErrorMessage(valid, invalidEvent);
+        this.isReportingValidity = false;
+        return valid;
+    }
+    showErrorMessage(valid, invalidEvent) {
         if (invalidEvent?.defaultPrevented) {
             return valid;
         }
@@ -322,10 +319,9 @@ export class Select extends LitElement {
     render() {
         return html `
       <span
-          class="select ${classMap(this.getRenderClasses())}"
-          @focusout=${this.handleFocusout}>
-        ${this.renderField()}
-        ${this.renderMenu()}
+        class="select ${classMap(this.getRenderClasses())}"
+        @focusout=${this.handleFocusout}>
+        ${this.renderField()} ${this.renderMenu()}
       </span>
     `;
     }
@@ -342,7 +338,8 @@ export class Select extends LitElement {
         }
         // Case for when the DOM is streaming, there are no children, and a child
         // has [selected] set on it, we need to wait for DOM to render something.
-        if (!this.lastSelectedOptionRecords.length && !isServer &&
+        if (!this.lastSelectedOptionRecords.length &&
+            !isServer &&
             !this.options.length) {
             setTimeout(() => {
                 this.updateValueAndDisplayText();
@@ -399,21 +396,29 @@ export class Select extends LitElement {
     renderLeadingIcon() {
         return html `
       <span class="icon leading" slot="start">
-         <slot name="leading-icon" @slotchange=${this.handleIconChange}></slot>
+        <slot name="leading-icon" @slotchange=${this.handleIconChange}></slot>
       </span>
-     `;
+    `;
     }
     renderTrailingIcon() {
         return html `
       <span class="icon trailing" slot="end">
         <slot name="trailing-icon" @slotchange=${this.handleIconChange}>
           <svg height="5" viewBox="7 10 10 5" focusable="false">
-            <polygon class="down" stroke="none" fill-rule="evenodd" points="7 10 12 15 17 10"></polygon>
-            <polygon class="up" stroke="none" fill-rule="evenodd" points="7 15 12 10 17 15"></polygon>
+            <polygon
+              class="down"
+              stroke="none"
+              fill-rule="evenodd"
+              points="7 10 12 15 17 10"></polygon>
+            <polygon
+              class="up"
+              stroke="none"
+              fill-rule="evenodd"
+              points="7 15 12 10 17 15"></polygon>
           </svg>
         </slot>
       </span>
-     `;
+    `;
     }
     renderLabel() {
         // need to render &nbsp; so that line-height can apply and give it a
@@ -422,30 +427,29 @@ export class Select extends LitElement {
     }
     renderMenu() {
         const ariaLabel = this.label || this.ariaLabel;
-        return html `
-      <md-menu
-          id="listbox"
-          default-focus="none"
-          role="listbox"
-          tabindex="-1"
-          aria-label=${ariaLabel || nothing}
-          stay-open-on-focusout
-          part="menu"
-          exportparts="focus-ring: menu-focus-ring"
-          anchor="field"
-          .open=${this.open}
-          .quick=${this.quick}
-          .positioning=${this.menuPositioning}
-          .typeaheadDelay=${this.typeaheadDelay}
-          @opening=${this.handleOpening}
-          @opened=${this.redispatchEvent}
-          @closing=${this.redispatchEvent}
-          @closed=${this.handleClosed}
-          @close-menu=${this.handleCloseMenu}
-          @request-selection=${this.handleRequestSelection}
-          @request-deselection=${this.handleRequestDeselection}>
-        ${this.renderMenuContent()}
-      </md-menu>`;
+        return html ` <md-menu
+      id="listbox"
+      default-focus="none"
+      role="listbox"
+      tabindex="-1"
+      aria-label=${ariaLabel || nothing}
+      stay-open-on-focusout
+      part="menu"
+      exportparts="focus-ring: menu-focus-ring"
+      anchor="field"
+      .open=${this.open}
+      .quick=${this.quick}
+      .positioning=${this.menuPositioning}
+      .typeaheadDelay=${this.typeaheadDelay}
+      @opening=${this.handleOpening}
+      @opened=${this.redispatchEvent}
+      @closing=${this.redispatchEvent}
+      @closed=${this.handleClosed}
+      @close-menu=${this.handleCloseMenu}
+      @request-selection=${this.handleRequestSelection}
+      @request-deselection=${this.handleRequestDeselection}>
+      ${this.renderMenuContent()}
+    </md-menu>`;
     }
     renderMenuContent() {
         return html `<slot></slot>`;
@@ -459,7 +463,8 @@ export class Select extends LitElement {
             return;
         }
         const typeaheadController = this.menu.typeaheadController;
-        const isOpenKey = event.code === 'Space' || event.code === 'ArrowDown' ||
+        const isOpenKey = event.code === 'Space' ||
+            event.code === 'ArrowDown' ||
             event.code === 'Enter';
         // Do not open if currently typing ahead because the user may be typing the
         // spacebar to match a word with a space
@@ -549,7 +554,6 @@ export class Select extends LitElement {
             this[VALUE] = '';
             this.displayText = '';
         }
-        this.internals.setFormValue(this.value);
         this.syncValidity();
         return hasSelectedOptionChanged;
     }
@@ -683,8 +687,9 @@ export class Select extends LitElement {
         const valueMissing = this.required && !this.value;
         const customError = !!this.customValidationMessage;
         const validationMessage = this.customValidationMessage ||
-            valueMissing && this.getRequiredValidationMessage() || '';
-        this.internals.setValidity({ valueMissing, customError }, validationMessage);
+            (valueMissing && this.getRequiredValidationMessage()) ||
+            '';
+        this[internals].setValidity({ valueMissing, customError }, validationMessage, this.field ?? undefined);
     }
     // Returns the platform `<select>` validation message for i18n.
     getRequiredValidationMessage() {
@@ -692,30 +697,35 @@ export class Select extends LitElement {
         select.required = true;
         return select.validationMessage;
     }
-    /** @private */
+    connectedCallback() {
+        super.connectedCallback();
+        // Handles the case where the user submits the form and native validation
+        // error pops up. We want the error styles to show.
+        this.addEventListener('invalid', this.onInvalid);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('invalid', this.onInvalid);
+    }
+    [(_a = VALUE, getFormValue)]() {
+        return this.value;
+    }
     formResetCallback() {
         this.reset();
     }
-    /** @private */
     formStateRestoreCallback(state) {
         this.value = state;
     }
 }
-_a = VALUE;
 (() => {
     requestUpdateOnAriaChange(Select);
 })();
-/** @nocollapse  */
-Select.formAssociated = true;
 __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, attribute: 'error-text' })
 ], Select.prototype, "errorText", void 0);