@material/web 1.0.0-pre.13 → 1.0.0-pre.15

package/textfield/lib/text-field.js

@@ -1,641 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-var _a;
-import { __decorate } from "tslib";
-import { html, isServer, LitElement, nothing } from 'lit';
-import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { live } from 'lit/directives/live.js';
-import { styleMap } from 'lit/directives/style-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 { stringConverter } from '../../internal/controller/string-converter.js';
-/**
- * A text field component.
- */
-export class TextField extends LitElement {
-    /**
-     * 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;
-    }
-    /**
-     * The HTML name to use in form submission.
-     */
-    get name() {
-        return this.getAttribute('name') ?? '';
-    }
-    set name(name) {
-        this.setAttribute('name', name);
-    }
-    /**
-     * Gets or sets the direction in which selection occurred.
-     */
-    get selectionDirection() {
-        return this.getInput().selectionDirection;
-    }
-    set selectionDirection(value) {
-        this.getInput().selectionDirection = value;
-    }
-    /**
-     * Gets or sets the end position or offset of a text selection.
-     */
-    get selectionEnd() {
-        return this.getInput().selectionEnd;
-    }
-    set selectionEnd(value) {
-        this.getInput().selectionEnd = value;
-    }
-    /**
-     * Gets or sets the starting position or offset of a text selection.
-     */
-    get selectionStart() {
-        return this.getInput().selectionStart;
-    }
-    set selectionStart(value) {
-        this.getInput().selectionStart = value;
-    }
-    /**
-     * Returns the native validation error message that would be displayed upon
-     * calling `reportValidity()`.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage
-     */
-    get validationMessage() {
-        return this.getInput().validationMessage;
-    }
-    /**
-     * Returns a ValidityState object that represents the validity states of the
-     * text field.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
-     */
-    get validity() {
-        return this.getInput().validity;
-    }
-    /**
-     * The text field's value as a number.
-     */
-    get valueAsNumber() {
-        return this.getInput().valueAsNumber;
-    }
-    set valueAsNumber(value) {
-        this.getInput().valueAsNumber = value;
-        this.value = this.getInput().value;
-    }
-    /**
-     * The text field's value as a Date.
-     */
-    get valueAsDate() {
-        return this.getInput().valueAsDate;
-    }
-    set valueAsDate(value) {
-        this.getInput().valueAsDate = value;
-        this.value = this.getInput().value;
-    }
-    /**
-     * Returns whether an element will successfully validate based on forms
-     * validation rules and constraints.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/willValidate
-     */
-    get willValidate() {
-        return this.getInput().willValidate;
-    }
-    get hasError() {
-        return this.error || this.nativeError;
-    }
-    constructor() {
-        super();
-        this.disabled = false;
-        /**
-         * Gets or sets whether or not the text field is in a visually invalid state.
-         *
-         * Calling `reportValidity()` will automatically update `error`.
-         */
-        this.error = 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 = '';
-        this.label = '';
-        this.required = false;
-        /**
-         * The current value of the text field. It is always a string.
-         */
-        this.value = '';
-        /**
-         * An optional prefix to display before the input value.
-         */
-        this.prefixText = '';
-        /**
-         * An optional suffix to display after the input value.
-         */
-        this.suffixText = '';
-        /**
-         * 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;
-        /**
-         * Conveys additional information below the text field, such as how it should
-         * be used.
-         */
-        this.supportingText = '';
-        /**
-         * Override the input text CSS `direction`. Useful for RTL languages that use
-         * LTR notation for fractions.
-         */
-        this.textDirection = '';
-        // <input> properties
-        /**
-         * Defines the greatest value in the range of permitted values.
-         *
-         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
-         */
-        this.max = '';
-        /**
-         * The maximum number of characters a user can enter into the text field. Set
-         * to -1 for none.
-         *
-         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
-         */
-        this.maxLength = -1;
-        /**
-         * Defines the most negative value in the range of permitted values.
-         *
-         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
-         */
-        this.min = '';
-        /**
-         * The minimum number of characters a user can enter into the text field. Set
-         * to -1 for none.
-         *
-         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
-         */
-        this.minLength = -1;
-        /**
-         * A regular expression that the text field's value must match to pass
-         * constraint validation.
-         *
-         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
-         */
-        this.pattern = '';
-        this.placeholder = '';
-        /**
-         * Indicates whether or not a user should be able to edit the text field's
-         * value.
-         *
-         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
-         */
-        this.readOnly = false;
-        /**
-         * Returns or sets the element's step attribute, which works with min and max
-         * to limit the increments at which a numeric or date-time value can be set.
-         *
-         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
-         */
-        this.step = '';
-        this.type = 'text';
-        /**
-         * Returns true when the text field has been interacted with. Native
-         * validation errors only display in response to user interactions.
-         */
-        this.dirty = false;
-        this.focused = false;
-        /**
-         * Whether or not a native error has been reported via `reportValidity()`.
-         */
-        this.nativeError = false;
-        /**
-         * The validation message displayed from a native error via
-         * `reportValidity()`.
-         */
-        this.nativeErrorText = '';
-        this.internals = this /* needed for closure */.attachInternals();
-        if (!isServer) {
-            this.addEventListener('click', this.focus);
-            this.addEventListener('focusin', this.handleFocusin);
-            this.addEventListener('focusout', this.handleFocusout);
-        }
-    }
-    /**
-     * Checks the text field's native validation and returns whether or not the
-     * element is valid.
-     *
-     * If invalid, this method will dispatch the `invalid` event.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
-     *
-     * @return true if the text field is valid, or false if not.
-     */
-    checkValidity() {
-        const { valid } = this.checkValidityAndDispatch();
-        return valid;
-    }
-    /**
-     * Focuses the text field's input text.
-     */
-    focus() {
-        if (this.disabled || this.matches(':focus-within')) {
-            // Don't shift focus from an element within the text field, like an icon
-            // button, to the input when focus is requested.
-            return;
-        }
-        super.focus();
-    }
-    /**
-     * Checks the text field's native validation and returns whether or not the
-     * element is valid.
-     *
-     * If invalid, this method will dispatch the `invalid` event.
-     *
-     * This method will display or clear an error text message equal to the text
-     * field's `validationMessage`, unless the invalid event is canceled.
-     *
-     * Use `setCustomValidity()` to customize the `validationMessage`.
-     *
-     * This method can also be used to re-announce error messages to screen
-     * readers.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity
-     *
-     * @return true if the text field is valid, or false if not.
-     */
-    reportValidity() {
-        const { valid, canceled } = this.checkValidityAndDispatch();
-        if (!canceled) {
-            const prevMessage = this.getErrorText();
-            this.nativeError = !valid;
-            this.nativeErrorText = this.validationMessage;
-            if (prevMessage === this.getErrorText()) {
-                this.field?.reannounceError();
-            }
-        }
-        return valid;
-    }
-    /**
-     * Selects all the text in the text field.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select
-     */
-    select() {
-        this.getInput().select();
-    }
-    /**
-     * Sets the text field's native validation error message. This is used to
-     * customize `validationMessage`.
-     *
-     * When the error is not an empty string, the text field is considered invalid
-     * and `validity.customError` will be true.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
-     *
-     * @param error The error message to display.
-     */
-    setCustomValidity(error) {
-        this.getInput().setCustomValidity(error);
-    }
-    setRangeText(...args) {
-        // Calling setRangeText with 1 vs 3-4 arguments has different behavior.
-        // Use spread syntax and type casting to ensure correct usage.
-        this.getInput().setRangeText(...args);
-        this.value = this.getInput().value;
-    }
-    /**
-     * Sets the start and end positions of a selection in the text field.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
-     *
-     * @param start The offset into the text field for the start of the selection.
-     * @param end The offset into the text field for the end of the selection.
-     * @param direction The direction in which the selection is performed.
-     */
-    setSelectionRange(start, end, direction) {
-        this.getInput().setSelectionRange(start, end, direction);
-    }
-    /**
-     * Decrements the value of a numeric type text field by `step` or `n` `step`
-     * number of times.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown
-     *
-     * @param stepDecrement The number of steps to decrement, defaults to 1.
-     */
-    stepDown(stepDecrement) {
-        const input = this.getInput();
-        input.stepDown(stepDecrement);
-        this.value = input.value;
-    }
-    /**
-     * Increments the value of a numeric type text field by `step` or `n` `step`
-     * number of times.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp
-     *
-     * @param stepIncrement The number of steps to increment, defaults to 1.
-     */
-    stepUp(stepIncrement) {
-        const input = this.getInput();
-        input.stepUp(stepIncrement);
-        this.value = input.value;
-    }
-    /**
-     * Reset the text field to its default value.
-     */
-    reset() {
-        this.dirty = false;
-        this.value = this.getAttribute('value') ?? '';
-        this.nativeError = false;
-        this.nativeErrorText = '';
-    }
-    attributeChangedCallback(attribute, newValue, oldValue) {
-        if (attribute === 'value' && this.dirty) {
-            // After user input, changing the value attribute no longer updates the
-            // text field's value (until reset). This matches native <input> behavior.
-            return;
-        }
-        super.attributeChangedCallback(attribute, newValue, oldValue);
-    }
-    render() {
-        const classes = {
-            'disabled': this.disabled,
-            'error': !this.disabled && this.hasError,
-        };
-        return html `
-       <span class="text-field ${classMap(classes)}">
-         ${this.renderField()}
-       </span>
-     `;
-    }
-    updated(changedProperties) {
-        // Keep changedProperties arg so that subclasses may call it
-        // If a property such as `type` changes and causes the internal <input>
-        // value to change without dispatching an event, re-sync it.
-        const value = this.getInput().value;
-        this.internals.setFormValue(value);
-        if (this.value !== value) {
-            // Note this is typically inefficient in updated() since it schedules
-            // another update. However, it is needed for the <input> to fully render
-            // before checking its value.
-            this.value = value;
-        }
-    }
-    renderField() {
-        const prefix = this.renderPrefix();
-        const suffix = this.renderSuffix();
-        const input = this.renderInput();
-        return staticHtml `<${this.fieldTag}
-      class="field"
-      ?disabled=${this.disabled}
-      ?error=${this.hasError}
-      ?focused=${this.focused}
-      ?has-end=${this.hasTrailingIcon}
-      ?has-start=${this.hasLeadingIcon}
-      label=${this.label}
-      ?populated=${!!this.value}
-      ?required=${this.required}
-      supporting-text=${this.supportingText}
-      error-text=${this.getErrorText()}
-      count=${this.value.length}
-      max=${this.maxLength}
-    >
-      ${this.renderLeadingIcon()}
-      ${prefix}${input}${suffix}
-      ${this.renderTrailingIcon()}
-    </${this.fieldTag}>`;
-    }
-    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>
-     `;
-    }
-    renderInput() {
-        const style = { direction: this.textDirection };
-        // TODO(b/243805848): remove `as unknown as number` once lit analyzer is
-        // fixed
-        return html `
-      <input
-        style=${styleMap(style)}
-        aria-describedby="description"
-        aria-invalid=${this.hasError}
-        aria-label=${this.ariaLabel || this.label || nothing}
-        ?disabled=${this.disabled}
-        max=${(this.max || nothing)}
-        maxlength=${this.maxLength > -1 ? this.maxLength : nothing}
-        min=${(this.min || nothing)}
-        minlength=${this.minLength > -1 ? this.minLength : nothing}
-        pattern=${this.pattern || nothing}
-        placeholder=${this.placeholder || nothing}
-        ?readonly=${this.readOnly}
-        ?required=${this.required}
-        step=${(this.step || nothing)}
-        type=${this.type}
-        .value=${live(this.value)}
-        @change=${this.redispatchEvent}
-        @input=${this.handleInput}
-        @select=${this.redispatchEvent}
-      >
-      <div id="description" slot="aria-describedby"></div>
-    `;
-    }
-    renderPrefix() {
-        return this.renderAffix(this.prefixText, /* isSuffix */ false);
-    }
-    renderSuffix() {
-        return this.renderAffix(this.suffixText, /* isSuffix */ true);
-    }
-    renderAffix(text, isSuffix) {
-        if (!text) {
-            return nothing;
-        }
-        const classes = {
-            'suffix': isSuffix,
-            'prefix': !isSuffix,
-        };
-        return html `<span class="${classMap(classes)}">${text}</span>`;
-    }
-    getErrorText() {
-        return this.error ? this.errorText : this.nativeErrorText;
-    }
-    handleFocusin() {
-        this.focused = true;
-    }
-    handleFocusout() {
-        if (this.matches(':focus-within')) {
-            // Changing focus to another child within the text field, like a button
-            return;
-        }
-        this.focused = false;
-    }
-    handleInput(event) {
-        this.dirty = true;
-        this.value = event.target.value;
-        this.redispatchEvent(event);
-    }
-    redispatchEvent(event) {
-        redispatchEvent(this, event);
-    }
-    getInput() {
-        if (!this.input) {
-            // If the input is not yet defined, synchronously render.
-            // e.g.
-            // const textField = document.createElement('md-outlined-text-field');
-            // document.body.appendChild(textField);
-            // textField.focus(); // synchronously render
-            this.connectedCallback();
-            this.scheduleUpdate();
-        }
-        if (this.isUpdatePending) {
-            // If there are pending updates, synchronously perform them. This ensures
-            // that constraint validation properties (like `required`) are synced
-            // before interacting with input APIs that depend on them.
-            this.scheduleUpdate();
-        }
-        return this.input;
-    }
-    checkValidityAndDispatch() {
-        const valid = this.getInput().checkValidity();
-        let canceled = false;
-        if (!valid) {
-            canceled = !this.dispatchEvent(new Event('invalid', { cancelable: true }));
-        }
-        return { valid, canceled };
-    }
-    handleIconChange() {
-        this.hasLeadingIcon = this.leadingIcons.length > 0;
-        this.hasTrailingIcon = this.trailingIcons.length > 0;
-    }
-    /** @private */
-    formResetCallback() {
-        this.reset();
-    }
-    /** @private */
-    formStateRestoreCallback(state) {
-        this.value = state;
-    }
-}
-_a = TextField;
-(() => {
-    requestUpdateOnAriaChange(_a);
-})();
-/** @nocollapse */
-TextField.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
-/** @nocollapse  */
-TextField.formAssociated = true;
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TextField.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TextField.prototype, "error", void 0);
-__decorate([
-    property({ attribute: 'error-text' })
-], TextField.prototype, "errorText", void 0);
-__decorate([
-    property()
-], TextField.prototype, "label", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TextField.prototype, "required", void 0);
-__decorate([
-    property()
-], TextField.prototype, "value", void 0);
-__decorate([
-    property({ attribute: 'prefix-text' })
-], TextField.prototype, "prefixText", void 0);
-__decorate([
-    property({ attribute: 'suffix-text' })
-], TextField.prototype, "suffixText", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'has-leading-icon' })
-], TextField.prototype, "hasLeadingIcon", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'has-trailing-icon' })
-], TextField.prototype, "hasTrailingIcon", void 0);
-__decorate([
-    property({ attribute: 'supporting-text' })
-], TextField.prototype, "supportingText", void 0);
-__decorate([
-    property({ attribute: 'text-direction' })
-], TextField.prototype, "textDirection", void 0);
-__decorate([
-    property()
-], TextField.prototype, "max", void 0);
-__decorate([
-    property({ type: Number })
-], TextField.prototype, "maxLength", void 0);
-__decorate([
-    property()
-], TextField.prototype, "min", void 0);
-__decorate([
-    property({ type: Number })
-], TextField.prototype, "minLength", void 0);
-__decorate([
-    property()
-], TextField.prototype, "pattern", void 0);
-__decorate([
-    property({ reflect: true, converter: stringConverter })
-], TextField.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TextField.prototype, "readOnly", void 0);
-__decorate([
-    property()
-], TextField.prototype, "step", void 0);
-__decorate([
-    property({ reflect: true })
-], TextField.prototype, "type", void 0);
-__decorate([
-    state()
-], TextField.prototype, "dirty", void 0);
-__decorate([
-    state()
-], TextField.prototype, "focused", void 0);
-__decorate([
-    state()
-], TextField.prototype, "nativeError", void 0);
-__decorate([
-    state()
-], TextField.prototype, "nativeErrorText", void 0);
-__decorate([
-    query('input')
-], TextField.prototype, "input", void 0);
-__decorate([
-    query('.field')
-], TextField.prototype, "field", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'leadingicon' })
-], TextField.prototype, "leadingIcons", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'trailingicon' })
-], TextField.prototype, "trailingIcons", void 0);
-//# sourceMappingURL=text-field.js.map