@spectrum-web-components/textfield 0.11.9 → 0.11.11-devmode.7

package/src/Textfield.js

@@ -1,153 +1,141 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { __decorate } from "tslib";
-import { html, nothing, } from '@spectrum-web-components/base';
-import { ifDefined, live, } from '@spectrum-web-components/base/src/directives.js';
-import { property, query, state, } from '@spectrum-web-components/base/src/decorators.js';
-import { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';
-import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
-import textfieldStyles from './textfield.css.js';
-import checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';
-const textfieldTypes = ['text', 'url', 'tel', 'email', 'password'];
-/**
- * @fires input - The value of the element has changed.
- * @fires change - An alteration to the value of the element has been committed by the user.
- */
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+import {
+  html,
+  nothing
+} from "@spectrum-web-components/base";
+import {
+  ifDefined,
+  live
+} from "@spectrum-web-components/base/src/directives.js";
+import {
+  property,
+  query,
+  state
+} from "@spectrum-web-components/base/src/decorators.js";
+import { ManageHelpText } from "@spectrum-web-components/help-text/src/manage-help-text.js";
+import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";
+import textfieldStyles from "./textfield.css.js";
+import checkmarkStyles from "@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";
+const textfieldTypes = ["text", "url", "tel", "email", "password"];
 export class TextfieldBase extends ManageHelpText(Focusable) {
-    constructor() {
-        super(...arguments);
-        this.allowedKeys = '';
-        this.focused = false;
-        this.invalid = false;
-        this.label = '';
-        this.placeholder = '';
-        this._type = 'text';
-        this.grows = false;
-        this.maxlength = -1;
-        this.minlength = -1;
-        this.multiline = false;
-        this.readonly = false;
-        this.valid = false;
-        this._value = '';
-        this.quiet = false;
-        this.required = false;
+  constructor() {
+    super(...arguments);
+    this.allowedKeys = "";
+    this.focused = false;
+    this.invalid = false;
+    this.label = "";
+    this.placeholder = "";
+    this._type = "text";
+    this.grows = false;
+    this.maxlength = -1;
+    this.minlength = -1;
+    this.multiline = false;
+    this.readonly = false;
+    this.valid = false;
+    this._value = "";
+    this.quiet = false;
+    this.required = false;
+  }
+  static get styles() {
+    return [textfieldStyles, checkmarkStyles];
+  }
+  get type() {
+    var _a;
+    return (_a = textfieldTypes.find((t) => t === this._type)) != null ? _a : "text";
+  }
+  set type(val) {
+    const prev = this._type;
+    this._type = val;
+    this.requestUpdate("type", prev);
+  }
+  set value(value) {
+    if (value === this.value) {
+      return;
     }
-    static get styles() {
-        return [textfieldStyles, checkmarkStyles];
+    const oldValue = this._value;
+    this._value = value;
+    this.requestUpdate("value", oldValue);
+  }
+  get value() {
+    return this._value;
+  }
+  get focusElement() {
+    return this.inputElement;
+  }
+  setSelectionRange(selectionStart, selectionEnd, selectionDirection = "none") {
+    this.inputElement.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
+  }
+  select() {
+    this.inputElement.select();
+  }
+  handleInput() {
+    if (this.allowedKeys && this.inputElement.value) {
+      const regExp = new RegExp(`^[${this.allowedKeys}]*$`, "u");
+      if (!regExp.test(this.inputElement.value)) {
+        const selectionStart = this.inputElement.selectionStart;
+        const nextSelectStart = selectionStart - 1;
+        this.inputElement.value = this.value.toString();
+        this.inputElement.setSelectionRange(nextSelectStart, nextSelectStart);
+        return;
+      }
     }
-    get type() {
-        var _a;
-        return (_a = textfieldTypes.find((t) => t === this._type)) !== null && _a !== void 0 ? _a : 'text';
-    }
-    set type(val) {
-        const prev = this._type;
-        this._type = val;
-        this.requestUpdate('type', prev);
-    }
-    set value(value) {
-        if (value === this.value) {
-            return;
-        }
-        const oldValue = this._value;
-        this._value = value;
-        this.requestUpdate('value', oldValue);
-    }
-    get value() {
-        return this._value;
-    }
-    get focusElement() {
-        return this.inputElement;
-    }
-    /**
-     * Sets the start and end positions of the current selection.
-     *
-     * @param selectionStart The 0-based index of the first selected character. An index greater than the length of the
-     *  element's value is treated as pointing to the end of the value.
-     * @param selectionEnd The 0-based index of the character after the last selected character. An index greater than
-     *  the length of the element's value is treated as pointing to the end of the value.
-     * @param [selectionDirection="none"] A string indicating the direction in which the selection is considered to
-     *  have been performed.
-     */
-    setSelectionRange(selectionStart, selectionEnd, selectionDirection = 'none') {
-        this.inputElement.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
-    }
-    /**
-     * Selects all the text.
-     */
-    select() {
-        this.inputElement.select();
-    }
-    handleInput() {
-        if (this.allowedKeys && this.inputElement.value) {
-            const regExp = new RegExp(`^[${this.allowedKeys}]*$`, 'u');
-            if (!regExp.test(this.inputElement.value)) {
-                const selectionStart = this.inputElement
-                    .selectionStart;
-                const nextSelectStart = selectionStart - 1;
-                this.inputElement.value = this.value.toString();
-                this.inputElement.setSelectionRange(nextSelectStart, nextSelectStart);
-                return;
-            }
-        }
-        this.value = this.inputElement.value;
-    }
-    handleChange() {
-        this.dispatchEvent(new Event('change', {
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    onFocus() {
-        this.focused = !this.readonly && true;
-    }
-    onBlur() {
-        this.focused = !this.readonly && false;
-    }
-    renderStateIcons() {
-        if (this.invalid) {
-            return html `
+    this.value = this.inputElement.value;
+  }
+  handleChange() {
+    this.dispatchEvent(new Event("change", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+  onFocus() {
+    this.focused = !this.readonly && true;
+  }
+  onBlur() {
+    this.focused = !this.readonly && false;
+  }
+  renderStateIcons() {
+    if (this.invalid) {
+      return html`
                 <sp-icon-alert id="invalid" class="icon"></sp-icon-alert>
             `;
-        }
-        else if (this.valid) {
-            return html `
+    } else if (this.valid) {
+      return html`
                 <sp-icon-checkmark100
                     id="valid"
                     class="icon spectrum-UIIcon-Checkmark100"
                 ></sp-icon-checkmark100>
             `;
-        }
-        return nothing;
-    }
-    get displayValue() {
-        return this.value.toString();
     }
-    get renderMultiline() {
-        return html `
-            ${this.grows && !this.quiet
-            ? html `
+    return nothing;
+  }
+  get displayValue() {
+    return this.value.toString();
+  }
+  get renderMultiline() {
+    return html`
+            ${this.grows && !this.quiet ? html`
                       <div id="sizer">${this.value}&#8203;</div>
-                  `
-            : nothing}
+                  ` : nothing}
             <!-- @ts-ignore -->
             <textarea
                 aria-describedby=${this.helpTextId}
                 aria-label=${this.label || this.placeholder}
-                aria-invalid=${ifDefined(this.invalid || undefined)}
+                aria-invalid=${ifDefined(this.invalid || void 0)}
                 class="input"
-                maxlength=${ifDefined(this.maxlength > -1 ? this.maxlength : undefined)}
-                minlength=${ifDefined(this.minlength > -1 ? this.minlength : undefined)}
+                maxlength=${ifDefined(this.maxlength > -1 ? this.maxlength : void 0)}
+                minlength=${ifDefined(this.minlength > -1 ? this.minlength : void 0)}
                 pattern=${ifDefined(this.pattern)}
                 placeholder=${this.placeholder}
                 .value=${this.displayValue}
@@ -161,18 +149,18 @@ export class TextfieldBase extends ManageHelpText(Focusable) {
                 autocomplete=${ifDefined(this.autocomplete)}
             ></textarea>
         `;
-    }
-    get renderInput() {
-        return html `
+  }
+  get renderInput() {
+    return html`
             <!-- @ts-ignore -->
             <input
                 type=${this.type}
                 aria-describedby=${this.helpTextId}
                 aria-label=${this.label || this.placeholder}
-                aria-invalid=${ifDefined(this.invalid || undefined)}
+                aria-invalid=${ifDefined(this.invalid || void 0)}
                 class="input"
-                maxlength=${ifDefined(this.maxlength > -1 ? this.maxlength : undefined)}
-                minlength=${ifDefined(this.minlength > -1 ? this.minlength : undefined)}
+                maxlength=${ifDefined(this.maxlength > -1 ? this.maxlength : void 0)}
+                minlength=${ifDefined(this.minlength > -1 ? this.minlength : void 0)}
                 pattern=${ifDefined(this.pattern)}
                 placeholder=${this.placeholder}
                 .value=${live(this.displayValue)}
@@ -186,125 +174,118 @@ export class TextfieldBase extends ManageHelpText(Focusable) {
                 autocomplete=${ifDefined(this.autocomplete)}
             />
         `;
-    }
-    renderField() {
-        return html `
+  }
+  renderField() {
+    return html`
             ${this.renderStateIcons()}
             ${this.multiline ? this.renderMultiline : this.renderInput}
         `;
-    }
-    render() {
-        return html `
+  }
+  render() {
+    return html`
             <div id="textfield">${this.renderField()}</div>
             ${this.renderHelpText(this.invalid)}
         `;
+  }
+  update(changedProperties) {
+    if (changedProperties.has("value") || changedProperties.has("required") && this.required) {
+      this.updateComplete.then(() => {
+        this.checkValidity();
+      });
     }
-    update(changedProperties) {
-        if (changedProperties.has('value') ||
-            (changedProperties.has('required') && this.required)) {
-            this.updateComplete.then(() => {
-                this.checkValidity();
-            });
-        }
-        super.update(changedProperties);
-    }
-    checkValidity() {
-        let validity = this.inputElement.checkValidity();
-        if (this.required || (this.value && this.pattern)) {
-            if ((this.disabled || this.multiline) && this.pattern) {
-                const regex = new RegExp(`^${this.pattern}$`, 'u');
-                validity = regex.test(this.value.toString());
-            }
-            if (typeof this.minlength !== 'undefined') {
-                validity =
-                    validity && this.value.toString().length > this.minlength;
-            }
-            this.valid = validity;
-            this.invalid = !validity;
-        }
-        return validity;
+    super.update(changedProperties);
+  }
+  checkValidity() {
+    let validity = this.inputElement.checkValidity();
+    if (this.required || this.value && this.pattern) {
+      if ((this.disabled || this.multiline) && this.pattern) {
+        const regex = new RegExp(`^${this.pattern}$`, "u");
+        validity = regex.test(this.value.toString());
+      }
+      if (typeof this.minlength !== "undefined") {
+        validity = validity && this.value.toString().length > this.minlength;
+      }
+      this.valid = validity;
+      this.invalid = !validity;
     }
+    return validity;
+  }
 }
-__decorate([
-    property({ attribute: 'allowed-keys' })
-], TextfieldBase.prototype, "allowedKeys", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TextfieldBase.prototype, "focused", void 0);
-__decorate([
-    query('.input')
-], TextfieldBase.prototype, "inputElement", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TextfieldBase.prototype, "invalid", void 0);
-__decorate([
-    property()
-], TextfieldBase.prototype, "label", void 0);
-__decorate([
-    property()
-], TextfieldBase.prototype, "placeholder", void 0);
-__decorate([
-    property({ attribute: 'type', reflect: true })
-], TextfieldBase.prototype, "_type", void 0);
-__decorate([
-    state()
-], TextfieldBase.prototype, "type", null);
-__decorate([
-    property()
-], TextfieldBase.prototype, "pattern", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TextfieldBase.prototype, "grows", void 0);
-__decorate([
-    property({ type: Number })
-], TextfieldBase.prototype, "maxlength", void 0);
-__decorate([
-    property({ type: Number })
-], TextfieldBase.prototype, "minlength", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TextfieldBase.prototype, "multiline", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TextfieldBase.prototype, "readonly", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TextfieldBase.prototype, "valid", void 0);
-__decorate([
-    property({ type: String })
-], TextfieldBase.prototype, "value", null);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TextfieldBase.prototype, "quiet", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TextfieldBase.prototype, "required", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], TextfieldBase.prototype, "autocomplete", void 0);
-/**
- * @element sp-textfield
- * @slot help-text - default or non-negative help text to associate to your form element
- * @slot negative-help-text - negative help text to associate to your form element when `invalid`
- */
+__decorateClass([
+  property({ attribute: "allowed-keys" })
+], TextfieldBase.prototype, "allowedKeys", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TextfieldBase.prototype, "focused", 2);
+__decorateClass([
+  query(".input")
+], TextfieldBase.prototype, "inputElement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TextfieldBase.prototype, "invalid", 2);
+__decorateClass([
+  property()
+], TextfieldBase.prototype, "label", 2);
+__decorateClass([
+  property()
+], TextfieldBase.prototype, "placeholder", 2);
+__decorateClass([
+  property({ attribute: "type", reflect: true })
+], TextfieldBase.prototype, "_type", 2);
+__decorateClass([
+  state()
+], TextfieldBase.prototype, "type", 1);
+__decorateClass([
+  property()
+], TextfieldBase.prototype, "pattern", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TextfieldBase.prototype, "grows", 2);
+__decorateClass([
+  property({ type: Number })
+], TextfieldBase.prototype, "maxlength", 2);
+__decorateClass([
+  property({ type: Number })
+], TextfieldBase.prototype, "minlength", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TextfieldBase.prototype, "multiline", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TextfieldBase.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TextfieldBase.prototype, "valid", 2);
+__decorateClass([
+  property({ type: String })
+], TextfieldBase.prototype, "value", 1);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TextfieldBase.prototype, "quiet", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], TextfieldBase.prototype, "required", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], TextfieldBase.prototype, "autocomplete", 2);
 export class Textfield extends TextfieldBase {
-    constructor() {
-        super(...arguments);
-        this._value = '';
-    }
-    set value(value) {
-        if (value === this.value) {
-            return;
-        }
-        const oldValue = this._value;
-        this._value = value;
-        this.requestUpdate('value', oldValue);
-    }
-    get value() {
-        return this._value;
+  constructor() {
+    super(...arguments);
+    this._value = "";
+  }
+  set value(value) {
+    if (value === this.value) {
+      return;
     }
+    const oldValue = this._value;
+    this._value = value;
+    this.requestUpdate("value", oldValue);
+  }
+  get value() {
+    return this._value;
+  }
 }
-__decorate([
-    property({ type: String })
-], Textfield.prototype, "value", null);
-//# sourceMappingURL=Textfield.js.map
+__decorateClass([
+  property({ type: String })
+], Textfield.prototype, "value", 1);
+//# sourceMappingURL=Textfield.js.map

package/src/Textfield.js.map

@@ -1 +1,7 @@
-{"version":3,"file":"Textfield.js","sourceRoot":"","sources":["Textfield.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    nothing,\n    PropertyValues,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    ifDefined,\n    live,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n    property,\n    query,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\n\nimport textfieldStyles from './textfield.css.js';\nimport checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\n\nconst textfieldTypes = ['text', 'url', 'tel', 'email', 'password'] as const;\nexport type TextfieldType = typeof textfieldTypes[number];\n\n/**\n * @fires input - The value of the element has changed.\n * @fires change - An alteration to the value of the element has been committed by the user.\n */\nexport class TextfieldBase extends ManageHelpText(Focusable) {\n    public static override get styles(): CSSResultArray {\n        return [textfieldStyles, checkmarkStyles];\n    }\n\n    @property({ attribute: 'allowed-keys' })\n    allowedKeys = '';\n\n    @property({ type: Boolean, reflect: true })\n    public focused = false;\n\n    @query('.input')\n    protected inputElement!: HTMLInputElement | HTMLTextAreaElement;\n\n    @property({ type: Boolean, reflect: true })\n    public invalid = false;\n\n    @property()\n    public label = '';\n\n    @property()\n    public placeholder = '';\n\n    @property({ attribute: 'type', reflect: true })\n    private _type: TextfieldType = 'text';\n\n    @state()\n    get type(): TextfieldType {\n        return textfieldTypes.find((t) => t === this._type) ?? 'text';\n    }\n\n    set type(val: TextfieldType) {\n        const prev = this._type;\n        this._type = val;\n        this.requestUpdate('type', prev);\n    }\n\n    @property()\n    public pattern?: string;\n\n    @property({ type: Boolean, reflect: true })\n    public grows = false;\n\n    @property({ type: Number })\n    public maxlength = -1;\n\n    @property({ type: Number })\n    public minlength = -1;\n\n    @property({ type: Boolean, reflect: true })\n    public multiline = false;\n\n    @property({ type: Boolean, reflect: true })\n    public readonly = false;\n\n    @property({ type: Boolean, reflect: true })\n    public valid = false;\n\n    @property({ type: String })\n    public set value(value: string | number) {\n        if (value === this.value) {\n            return;\n        }\n        const oldValue = this._value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    public get value(): string | number {\n        return this._value;\n    }\n\n    protected _value: string | number = '';\n\n    @property({ type: Boolean, reflect: true })\n    public quiet = false;\n\n    @property({ type: Boolean, reflect: true })\n    public required = false;\n\n    @property({ type: String, reflect: true })\n    public autocomplete?:\n        | HTMLInputElement['autocomplete']\n        | HTMLTextAreaElement['autocomplete'];\n\n    public override get focusElement(): HTMLInputElement | HTMLTextAreaElement {\n        return this.inputElement;\n    }\n\n    /**\n     * Sets the start and end positions of the current selection.\n     *\n     * @param selectionStart The 0-based index of the first selected character. An index greater than the length of the\n     *  element's value is treated as pointing to the end of the value.\n     * @param selectionEnd The 0-based index of the character after the last selected character. An index greater than\n     *  the length of the element's value is treated as pointing to the end of the value.\n     * @param [selectionDirection=\"none\"] A string indicating the direction in which the selection is considered to\n     *  have been performed.\n     */\n    public setSelectionRange(\n        selectionStart: number,\n        selectionEnd: number,\n        selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n    ): void {\n        this.inputElement.setSelectionRange(\n            selectionStart,\n            selectionEnd,\n            selectionDirection\n        );\n    }\n\n    /**\n     * Selects all the text.\n     */\n    public select(): void {\n        this.inputElement.select();\n    }\n\n    protected handleInput(): void {\n        if (this.allowedKeys && this.inputElement.value) {\n            const regExp = new RegExp(`^[${this.allowedKeys}]*$`, 'u');\n            if (!regExp.test(this.inputElement.value)) {\n                const selectionStart = this.inputElement\n                    .selectionStart as number;\n                const nextSelectStart = selectionStart - 1;\n                this.inputElement.value = this.value.toString();\n                this.inputElement.setSelectionRange(\n                    nextSelectStart,\n                    nextSelectStart\n                );\n                return;\n            }\n        }\n        this.value = this.inputElement.value;\n    }\n\n    protected handleChange(): void {\n        this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n    }\n\n    protected onFocus(): void {\n        this.focused = !this.readonly && true;\n    }\n\n    protected onBlur(): void {\n        this.focused = !this.readonly && false;\n    }\n\n    protected renderStateIcons(): TemplateResult | typeof nothing {\n        if (this.invalid) {\n            return html`\n                <sp-icon-alert id=\"invalid\" class=\"icon\"></sp-icon-alert>\n            `;\n        } else if (this.valid) {\n            return html`\n                <sp-icon-checkmark100\n                    id=\"valid\"\n                    class=\"icon spectrum-UIIcon-Checkmark100\"\n                ></sp-icon-checkmark100>\n            `;\n        }\n        return nothing;\n    }\n\n    protected get displayValue(): string {\n        return this.value.toString();\n    }\n\n    private get renderMultiline(): TemplateResult {\n        return html`\n            ${this.grows && !this.quiet\n                ? html`\n                      <div id=\"sizer\">${this.value}&#8203;</div>\n                  `\n                : nothing}\n            <!-- @ts-ignore -->\n            <textarea\n                aria-describedby=${this.helpTextId}\n                aria-label=${this.label || this.placeholder}\n                aria-invalid=${ifDefined(this.invalid || undefined)}\n                class=\"input\"\n                maxlength=${ifDefined(\n                    this.maxlength > -1 ? this.maxlength : undefined\n                )}\n                minlength=${ifDefined(\n                    this.minlength > -1 ? this.minlength : undefined\n                )}\n                pattern=${ifDefined(this.pattern)}\n                placeholder=${this.placeholder}\n                .value=${this.displayValue}\n                @change=${this.handleChange}\n                @input=${this.handleInput}\n                @focus=${this.onFocus}\n                @blur=${this.onBlur}\n                ?disabled=${this.disabled}\n                ?required=${this.required}\n                ?readonly=${this.readonly}\n                autocomplete=${ifDefined(this.autocomplete)}\n            ></textarea>\n        `;\n    }\n\n    private get renderInput(): TemplateResult {\n        return html`\n            <!-- @ts-ignore -->\n            <input\n                type=${this.type}\n                aria-describedby=${this.helpTextId}\n                aria-label=${this.label || this.placeholder}\n                aria-invalid=${ifDefined(this.invalid || undefined)}\n                class=\"input\"\n                maxlength=${ifDefined(\n                    this.maxlength > -1 ? this.maxlength : undefined\n                )}\n                minlength=${ifDefined(\n                    this.minlength > -1 ? this.minlength : undefined\n                )}\n                pattern=${ifDefined(this.pattern)}\n                placeholder=${this.placeholder}\n                .value=${live(this.displayValue)}\n                @change=${this.handleChange}\n                @input=${this.handleInput}\n                @focus=${this.onFocus}\n                @blur=${this.onBlur}\n                ?disabled=${this.disabled}\n                ?required=${this.required}\n                ?readonly=${this.readonly}\n                autocomplete=${ifDefined(this.autocomplete)}\n            />\n        `;\n    }\n\n    protected renderField(): TemplateResult {\n        return html`\n            ${this.renderStateIcons()}\n            ${this.multiline ? this.renderMultiline : this.renderInput}\n        `;\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <div id=\"textfield\">${this.renderField()}</div>\n            ${this.renderHelpText(this.invalid)}\n        `;\n    }\n\n    protected override update(changedProperties: PropertyValues): void {\n        if (\n            changedProperties.has('value') ||\n            (changedProperties.has('required') && this.required)\n        ) {\n            this.updateComplete.then(() => {\n                this.checkValidity();\n            });\n        }\n        super.update(changedProperties);\n    }\n\n    public checkValidity(): boolean {\n        let validity = this.inputElement.checkValidity();\n        if (this.required || (this.value && this.pattern)) {\n            if ((this.disabled || this.multiline) && this.pattern) {\n                const regex = new RegExp(`^${this.pattern}$`, 'u');\n                validity = regex.test(this.value.toString());\n            }\n            if (typeof this.minlength !== 'undefined') {\n                validity =\n                    validity && this.value.toString().length > this.minlength;\n            }\n            this.valid = validity;\n            this.invalid = !validity;\n        }\n        return validity;\n    }\n}\n\n/**\n * @element sp-textfield\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n */\nexport class Textfield extends TextfieldBase {\n    @property({ type: String })\n    public override set value(value: string) {\n        if (value === this.value) {\n            return;\n        }\n        const oldValue = this._value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    public override get value(): string {\n        return this._value;\n    }\n\n    protected override _value = '';\n}\n"]}
+{
+  "version": 3,
+  "sources": ["Textfield.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    nothing,\n    PropertyValues,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    ifDefined,\n    live,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n    property,\n    query,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\n\nimport textfieldStyles from './textfield.css.js';\nimport checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\n\nconst textfieldTypes = ['text', 'url', 'tel', 'email', 'password'] as const;\nexport type TextfieldType = typeof textfieldTypes[number];\n\n/**\n * @fires input - The value of the element has changed.\n * @fires change - An alteration to the value of the element has been committed by the user.\n */\nexport class TextfieldBase extends ManageHelpText(Focusable) {\n    public static override get styles(): CSSResultArray {\n        return [textfieldStyles, checkmarkStyles];\n    }\n\n    @property({ attribute: 'allowed-keys' })\n    allowedKeys = '';\n\n    @property({ type: Boolean, reflect: true })\n    public focused = false;\n\n    @query('.input')\n    protected inputElement!: HTMLInputElement | HTMLTextAreaElement;\n\n    @property({ type: Boolean, reflect: true })\n    public invalid = false;\n\n    @property()\n    public label = '';\n\n    @property()\n    public placeholder = '';\n\n    @property({ attribute: 'type', reflect: true })\n    private _type: TextfieldType = 'text';\n\n    @state()\n    get type(): TextfieldType {\n        return textfieldTypes.find((t) => t === this._type) ?? 'text';\n    }\n\n    set type(val: TextfieldType) {\n        const prev = this._type;\n        this._type = val;\n        this.requestUpdate('type', prev);\n    }\n\n    @property()\n    public pattern?: string;\n\n    @property({ type: Boolean, reflect: true })\n    public grows = false;\n\n    @property({ type: Number })\n    public maxlength = -1;\n\n    @property({ type: Number })\n    public minlength = -1;\n\n    @property({ type: Boolean, reflect: true })\n    public multiline = false;\n\n    @property({ type: Boolean, reflect: true })\n    public readonly = false;\n\n    @property({ type: Boolean, reflect: true })\n    public valid = false;\n\n    @property({ type: String })\n    public set value(value: string | number) {\n        if (value === this.value) {\n            return;\n        }\n        const oldValue = this._value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    public get value(): string | number {\n        return this._value;\n    }\n\n    protected _value: string | number = '';\n\n    @property({ type: Boolean, reflect: true })\n    public quiet = false;\n\n    @property({ type: Boolean, reflect: true })\n    public required = false;\n\n    @property({ type: String, reflect: true })\n    public autocomplete?:\n        | HTMLInputElement['autocomplete']\n        | HTMLTextAreaElement['autocomplete'];\n\n    public override get focusElement(): HTMLInputElement | HTMLTextAreaElement {\n        return this.inputElement;\n    }\n\n    /**\n     * Sets the start and end positions of the current selection.\n     *\n     * @param selectionStart The 0-based index of the first selected character. An index greater than the length of the\n     *  element's value is treated as pointing to the end of the value.\n     * @param selectionEnd The 0-based index of the character after the last selected character. An index greater than\n     *  the length of the element's value is treated as pointing to the end of the value.\n     * @param [selectionDirection=\"none\"] A string indicating the direction in which the selection is considered to\n     *  have been performed.\n     */\n    public setSelectionRange(\n        selectionStart: number,\n        selectionEnd: number,\n        selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n    ): void {\n        this.inputElement.setSelectionRange(\n            selectionStart,\n            selectionEnd,\n            selectionDirection\n        );\n    }\n\n    /**\n     * Selects all the text.\n     */\n    public select(): void {\n        this.inputElement.select();\n    }\n\n    protected handleInput(): void {\n        if (this.allowedKeys && this.inputElement.value) {\n            const regExp = new RegExp(`^[${this.allowedKeys}]*$`, 'u');\n            if (!regExp.test(this.inputElement.value)) {\n                const selectionStart = this.inputElement\n                    .selectionStart as number;\n                const nextSelectStart = selectionStart - 1;\n                this.inputElement.value = this.value.toString();\n                this.inputElement.setSelectionRange(\n                    nextSelectStart,\n                    nextSelectStart\n                );\n                return;\n            }\n        }\n        this.value = this.inputElement.value;\n    }\n\n    protected handleChange(): void {\n        this.dispatchEvent(\n            new Event('change', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n    }\n\n    protected onFocus(): void {\n        this.focused = !this.readonly && true;\n    }\n\n    protected onBlur(): void {\n        this.focused = !this.readonly && false;\n    }\n\n    protected renderStateIcons(): TemplateResult | typeof nothing {\n        if (this.invalid) {\n            return html`\n                <sp-icon-alert id=\"invalid\" class=\"icon\"></sp-icon-alert>\n            `;\n        } else if (this.valid) {\n            return html`\n                <sp-icon-checkmark100\n                    id=\"valid\"\n                    class=\"icon spectrum-UIIcon-Checkmark100\"\n                ></sp-icon-checkmark100>\n            `;\n        }\n        return nothing;\n    }\n\n    protected get displayValue(): string {\n        return this.value.toString();\n    }\n\n    private get renderMultiline(): TemplateResult {\n        return html`\n            ${this.grows && !this.quiet\n                ? html`\n                      <div id=\"sizer\">${this.value}&#8203;</div>\n                  `\n                : nothing}\n            <!-- @ts-ignore -->\n            <textarea\n                aria-describedby=${this.helpTextId}\n                aria-label=${this.label || this.placeholder}\n                aria-invalid=${ifDefined(this.invalid || undefined)}\n                class=\"input\"\n                maxlength=${ifDefined(\n                    this.maxlength > -1 ? this.maxlength : undefined\n                )}\n                minlength=${ifDefined(\n                    this.minlength > -1 ? this.minlength : undefined\n                )}\n                pattern=${ifDefined(this.pattern)}\n                placeholder=${this.placeholder}\n                .value=${this.displayValue}\n                @change=${this.handleChange}\n                @input=${this.handleInput}\n                @focus=${this.onFocus}\n                @blur=${this.onBlur}\n                ?disabled=${this.disabled}\n                ?required=${this.required}\n                ?readonly=${this.readonly}\n                autocomplete=${ifDefined(this.autocomplete)}\n            ></textarea>\n        `;\n    }\n\n    private get renderInput(): TemplateResult {\n        return html`\n            <!-- @ts-ignore -->\n            <input\n                type=${this.type}\n                aria-describedby=${this.helpTextId}\n                aria-label=${this.label || this.placeholder}\n                aria-invalid=${ifDefined(this.invalid || undefined)}\n                class=\"input\"\n                maxlength=${ifDefined(\n                    this.maxlength > -1 ? this.maxlength : undefined\n                )}\n                minlength=${ifDefined(\n                    this.minlength > -1 ? this.minlength : undefined\n                )}\n                pattern=${ifDefined(this.pattern)}\n                placeholder=${this.placeholder}\n                .value=${live(this.displayValue)}\n                @change=${this.handleChange}\n                @input=${this.handleInput}\n                @focus=${this.onFocus}\n                @blur=${this.onBlur}\n                ?disabled=${this.disabled}\n                ?required=${this.required}\n                ?readonly=${this.readonly}\n                autocomplete=${ifDefined(this.autocomplete)}\n            />\n        `;\n    }\n\n    protected renderField(): TemplateResult {\n        return html`\n            ${this.renderStateIcons()}\n            ${this.multiline ? this.renderMultiline : this.renderInput}\n        `;\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <div id=\"textfield\">${this.renderField()}</div>\n            ${this.renderHelpText(this.invalid)}\n        `;\n    }\n\n    protected override update(changedProperties: PropertyValues): void {\n        if (\n            changedProperties.has('value') ||\n            (changedProperties.has('required') && this.required)\n        ) {\n            this.updateComplete.then(() => {\n                this.checkValidity();\n            });\n        }\n        super.update(changedProperties);\n    }\n\n    public checkValidity(): boolean {\n        let validity = this.inputElement.checkValidity();\n        if (this.required || (this.value && this.pattern)) {\n            if ((this.disabled || this.multiline) && this.pattern) {\n                const regex = new RegExp(`^${this.pattern}$`, 'u');\n                validity = regex.test(this.value.toString());\n            }\n            if (typeof this.minlength !== 'undefined') {\n                validity =\n                    validity && this.value.toString().length > this.minlength;\n            }\n            this.valid = validity;\n            this.invalid = !validity;\n        }\n        return validity;\n    }\n}\n\n/**\n * @element sp-textfield\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n */\nexport class Textfield extends TextfieldBase {\n    @property({ type: String })\n    public override set value(value: string) {\n        if (value === this.value) {\n            return;\n        }\n        const oldValue = this._value;\n        this._value = value;\n        this.requestUpdate('value', oldValue);\n    }\n\n    public override get value(): string {\n        return this._value;\n    }\n\n    protected override _value = '';\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/src/index.dev.js

@@ -0,0 +1,2 @@
+export * from "./Textfield.dev.js";
+//# sourceMappingURL=index.dev.js.map

package/src/index.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["index.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nexport * from './Textfield.dev.js'\n"],
+  "mappings": "AAWA;",
+  "names": []
+}

package/src/index.js

@@ -1,13 +1,2 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-export * from './Textfield.js';
-//# sourceMappingURL=index.js.map
+export * from "./Textfield.js";
+//# sourceMappingURL=index.js.map