@digital-realty/ix-textbox 2.1.4 → 2.1.6

package/dist/IxTextbox.d.ts

@@ -1,10 +1,11 @@
 import { LitElement } from 'lit';
 import '@material/web/textfield/filled-text-field.js';
 import '@material/web/textfield/outlined-text-field.js';
-import { TextFieldType, UnsupportedTextFieldType } from './types/index.js';
+import { TextFieldType, UnsupportedTextFieldType } from '@material/web/textfield/internal/text-field.js';
+import '@digital-realty/ix-icon/ix-icon.js';
 export declare class IxTextbox extends LitElement {
-    outlined: boolean;
-    type: TextFieldType | UnsupportedTextFieldType;
+    readonly component: HTMLInputElement;
+    filled: boolean;
     disabled: boolean;
     /**
      * Gets or sets whether or not the text field is in a visually invalid state.
@@ -27,6 +28,10 @@ export declare class IxTextbox extends LitElement {
      * The current value of the text field. It is always a string.
      */
     value: string;
+    /**
+     * The name of the text field. It is always a string.
+     */
+    name: string;
     /**
      * An optional prefix to display before the input value.
      */
@@ -36,13 +41,13 @@ export declare class IxTextbox extends LitElement {
      */
     suffixText: string;
     /**
-     * Whether or not the text field has a leading icon. Used for SSR.
+     * Name of icon. It is always a string.
      */
-    hasLeadingIcon: boolean;
+    leadingIcon: string;
     /**
-     * Whether or not the text field has a trailing icon. Used for SSR.
+     * Name of icon. It is always a string.
      */
-    hasTrailingIcon: boolean;
+    trailingIcon: string;
     /**
      * Conveys additional information below the text field, such as how it should
      * be used.
@@ -58,6 +63,7 @@ export declare class IxTextbox extends LitElement {
      * Defaults to 2.
      */
     rows: number;
+    inputMode: string;
     /**
      * Defines the greatest value in the range of permitted values.
      *
@@ -99,13 +105,46 @@ export declare class IxTextbox extends LitElement {
      * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
      */
     readOnly: boolean;
-    mdTextfield: HTMLInputElement;
-    handleChange(e: Event): void;
-    getValidityStatus(): boolean;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'ix-textbox': IxTextbox;
-    }
+    /**
+     * Indicates that input accepts multiple email addresses.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple
+     */
+    multiple: boolean;
+    /**
+     * 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
+     */
+    step: string;
+    /**
+     * The `<input>` type to use, defaults to "text". The type greatly changes how
+     * the text field behaves.
+     *
+     * Text fields support a limited number of `<input>` types:
+     *
+     * - text
+     * - textarea
+     * - email
+     * - number
+     * - password
+     * - search
+     * - tel
+     * - url
+     *
+     * See
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
+     * for more details on each input type.
+     */
+    type: TextFieldType | UnsupportedTextFieldType;
+    /**
+     * Describes what, if any, type of autocomplete functionality the input
+     * should provide.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+     */
+    autocomplete: string;
+    protected createRenderRoot(): this;
+    protected render(): import("lit-html").TemplateResult<2 | 1>;
 }

package/dist/IxTextbox.js

@@ -1,13 +1,14 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html, LitElement, nothing } from 'lit';
+import { html as staticHtml, literal } from 'lit/static-html.js';
 import { property, query } from 'lit/decorators.js';
 import '@material/web/textfield/filled-text-field.js';
 import '@material/web/textfield/outlined-text-field.js';
+import '@digital-realty/ix-icon/ix-icon.js';
 export class IxTextbox extends LitElement {
     constructor() {
         super(...arguments);
-        this.outlined = true;
-        this.type = 'text';
+        this.filled = false;
         this.disabled = false;
         /**
          * Gets or sets whether or not the text field is in a visually invalid state.
@@ -30,6 +31,10 @@ export class IxTextbox extends LitElement {
          * The current value of the text field. It is always a string.
          */
         this.value = '';
+        /**
+         * The name of the text field. It is always a string.
+         */
+        this.name = '';
         /**
          * An optional prefix to display before the input value.
          */
@@ -39,13 +44,13 @@ export class IxTextbox extends LitElement {
          */
         this.suffixText = '';
         /**
-         * Whether or not the text field has a leading icon. Used for SSR.
+         * Name of icon. It is always a string.
          */
-        this.hasLeadingIcon = false;
+        this.leadingIcon = '';
         /**
-         * Whether or not the text field has a trailing icon. Used for SSR.
+         * Name of icon. It is always a string.
          */
-        this.hasTrailingIcon = false;
+        this.trailingIcon = '';
         /**
          * Conveys additional information below the text field, such as how it should
          * be used.
@@ -62,6 +67,7 @@ export class IxTextbox extends LitElement {
          */
         this.rows = 2;
         // <input> properties
+        this.inputMode = '';
         /**
          * Defines the greatest value in the range of permitted values.
          *
@@ -103,88 +109,102 @@ export class IxTextbox extends LitElement {
          * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
          */
         this.readOnly = false;
+        /**
+         * Indicates that input accepts multiple email addresses.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple
+         */
+        this.multiple = 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 = '';
+        /**
+         * The `<input>` type to use, defaults to "text". The type greatly changes how
+         * the text field behaves.
+         *
+         * Text fields support a limited number of `<input>` types:
+         *
+         * - text
+         * - textarea
+         * - email
+         * - number
+         * - password
+         * - search
+         * - tel
+         * - url
+         *
+         * See
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
+         * for more details on each input type.
+         */
+        this.type = 'text';
+        /**
+         * Describes what, if any, type of autocomplete functionality the input
+         * should provide.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+         */
+        this.autocomplete = '';
     }
-    handleChange(e) {
-        const inputElement = e.target;
-        const textChangeEvent = new CustomEvent('textChange', {
-            detail: {
-                value: inputElement.value,
-            },
-            composed: true,
-        });
-        this.dispatchEvent(textChangeEvent);
-    }
-    getValidityStatus() {
-        var _a;
-        return (_a = this.mdTextfield) === null || _a === void 0 ? void 0 : _a.reportValidity();
+    createRenderRoot() {
+        return this;
     }
     render() {
-        let comp;
-        if (this.outlined) {
-            comp = html `
-        <md-outlined-text-field
-          id="md-textfield"
-          ?disabled="${this.disabled}"
-          ?required="${this.required}"
-          ?error="${this.error}"
-          error-text="${this.errorText}"
-          label="${this.label}"
-          value="${this.value}"
-          placeholder="${this.placeholder}"
-          ?readOnly="${this.readOnly}"
-          text-direction="${this.textDirection}"
-          rows="${this.rows}"
-          max="${this.max}"
-          maxLength="${this.maxLength}"
-          min="${this.min}"
-          minLength="${this.minLength}"
-          pattern="${this.pattern}"
-          prefix-text="${this.prefixText}"
-          suffix-text="${this.suffixText}"
-          supporting-text="${this.supportingText}"
-          type="${this.type}"
-          @input="${this.handleChange}"
-        >
-        </md-outlined-text-field>
-      `;
-        }
-        else {
-            comp = html `
-        <md-filled-text-field
-          id="md-textfield"
-          ?disabled="${this.disabled}"
-          ?required="${this.required}"
-          ?error="${this.error}"
-          error-text="${this.errorText}"
-          label="${this.label}"
-          value="${this.value}"
-          placeholder="${this.placeholder}"
-          ?readOnly="${this.readOnly}"
-          text-direction="${this.textDirection}"
-          rows="${this.rows}"
-          max="${this.max}"
-          maxLength="${this.maxLength}"
-          min="${this.min}"
-          minLength="${this.minLength}"
-          pattern="${this.pattern}"
-          prefix-text="${this.prefixText}"
-          suffix-text="${this.suffixText}"
-          supporting-text="${this.supportingText}"
-          type="${this.type}"
-          @input="${this.handleChange}"
+        const tag = this.filled
+            ? literal `md-filled-text-field`
+            : literal `md-outlined-text-field`;
+        return staticHtml `
+        <${tag}
+          class="textfield"
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          ?error=${this.error}
+          ?multipule=${this.multiple}
+          ?readOnly=${this.readOnly}
+          ?has-leading-icon=${this.leadingIcon.length > 0}
+          ?has-trailing-icon=${this.trailingIcon.length > 0}
+          step=${this.step || nothing}
+          autocomplete=${this.autocomplete || nothing}
+          error-text=${this.errorText}
+          placeholder=${this.placeholder}
+          text-direction=${this.textDirection}
+          rows=${this.rows}
+          max=${this.max}
+          maxLength=${this.maxLength}
+          min=${this.min}
+          minLength=${this.minLength}
+          pattern=${this.pattern}
+          prefix-text=${this.prefixText}
+          suffix-text=${this.suffixText}
+          supporting-text=${this.supportingText}
+          inputMode=${this.inputMode}
+          type=${this.type}
+          label=${this.label}
+          name=${this.name}
+          value=${this.value}
         >
-        </md-filled-text-field>
+          ${this.leadingIcon
+            ? html `<ix-icon slot="leading-icon">${this.leadingIcon}</ix-icon>`
+            : nothing}
+          ${this.trailingIcon
+            ? html `<ix-icon slot="trailing-icon"
+                  >${this.trailingIcon}</ix-icon
+                >`
+            : nothing}
+        </${tag}>
       `;
-        }
-        return html ` ${comp} `;
     }
 }
 __decorate([
-    property({ type: Boolean })
-], IxTextbox.prototype, "outlined", void 0);
+    query('.textfield')
+], IxTextbox.prototype, "component", void 0);
 __decorate([
-    property({ reflect: true })
-], IxTextbox.prototype, "type", void 0);
+    property({ type: Boolean, reflect: true })
+], IxTextbox.prototype, "filled", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IxTextbox.prototype, "disabled", void 0);
@@ -203,6 +223,9 @@ __decorate([
 __decorate([
     property()
 ], IxTextbox.prototype, "value", void 0);
+__decorate([
+    property()
+], IxTextbox.prototype, "name", void 0);
 __decorate([
     property({ attribute: 'prefix-text' })
 ], IxTextbox.prototype, "prefixText", void 0);
@@ -210,11 +233,11 @@ __decorate([
     property({ attribute: 'suffix-text' })
 ], IxTextbox.prototype, "suffixText", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'has-leading-icon' })
-], IxTextbox.prototype, "hasLeadingIcon", void 0);
+    property({ attribute: 'leading-icon' })
+], IxTextbox.prototype, "leadingIcon", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'has-trailing-icon' })
-], IxTextbox.prototype, "hasTrailingIcon", void 0);
+    property({ attribute: 'trailing-icon' })
+], IxTextbox.prototype, "trailingIcon", void 0);
 __decorate([
     property({ attribute: 'supporting-text' })
 ], IxTextbox.prototype, "supportingText", void 0);
@@ -224,6 +247,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], IxTextbox.prototype, "rows", void 0);
+__decorate([
+    property({ reflect: true })
+], IxTextbox.prototype, "inputMode", void 0);
 __decorate([
     property()
 ], IxTextbox.prototype, "max", void 0);
@@ -246,6 +272,15 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], IxTextbox.prototype, "readOnly", void 0);
 __decorate([
-    query('#md-textfield')
-], IxTextbox.prototype, "mdTextfield", void 0);
+    property({ type: Boolean, reflect: true })
+], IxTextbox.prototype, "multiple", void 0);
+__decorate([
+    property()
+], IxTextbox.prototype, "step", void 0);
+__decorate([
+    property({ reflect: true })
+], IxTextbox.prototype, "type", void 0);
+__decorate([
+    property({ reflect: true })
+], IxTextbox.prototype, "autocomplete", void 0);
 //# sourceMappingURL=IxTextbox.js.map

package/dist/IxTextbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxTextbox.js","sourceRoot":"","sources":["../src/IxTextbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport '@material/web/textfield/filled-text-field.js';\nimport '@material/web/textfield/outlined-text-field.js';\nimport {\n  TextFieldType,\n  UnsupportedTextFieldType,\n  TextChangeEvent,\n} from './types/index.js';\n\nexport class IxTextbox extends LitElement {\n  @property({ type: Boolean }) outlined = true;\n\n  @property({ reflect: true })\n  type: TextFieldType | UnsupportedTextFieldType = 'text';\n\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Gets or sets whether or not the text field is in a visually invalid state.\n   *\n   * Calling `reportValidity()` will automatically update `error`.\n   */\n  @property({ type: Boolean, reflect: true }) error = false;\n\n  /**\n   * The error message that replaces supporting text when `error` is true. If\n   * `errorText` is an empty string, then the supporting text will continue to\n   * show.\n   *\n   * Calling `reportValidity()` will automatically update `errorText` to the\n   * native `validationMessage`.\n   */\n  @property({ attribute: 'error-text' }) errorText = '';\n\n  @property() label = '';\n\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /**\n   * The current value of the text field. It is always a string.\n   */\n  @property() value = '';\n\n  /**\n   * An optional prefix to display before the input value.\n   */\n  @property({ attribute: 'prefix-text' }) prefixText = '';\n\n  /**\n   * An optional suffix to display after the input value.\n   */\n  @property({ attribute: 'suffix-text' }) suffixText = '';\n\n  /**\n   * Whether or not the text field has a leading icon. Used for SSR.\n   */\n  @property({ type: Boolean, attribute: 'has-leading-icon' })\n  hasLeadingIcon = false;\n\n  /**\n   * Whether or not the text field has a trailing icon. Used for SSR.\n   */\n  @property({ type: Boolean, attribute: 'has-trailing-icon' })\n  hasTrailingIcon = false;\n\n  /**\n   * Conveys additional information below the text field, such as how it should\n   * be used.\n   */\n  @property({ attribute: 'supporting-text' }) supportingText = '';\n\n  /**\n   * Override the input text CSS `direction`. Useful for RTL languages that use\n   * LTR notation for fractions.\n   */\n  @property({ attribute: 'text-direction' }) textDirection = '';\n\n  /**\n   * The number of rows to display for a `type=\"textarea\"` text field.\n   * Defaults to 2.\n   */\n  @property({ type: Number }) rows = 2;\n\n  // <input> properties\n  /**\n   * Defines the greatest value in the range of permitted values.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max\n   */\n  @property() max = '';\n\n  /**\n   * The maximum number of characters a user can enter into the text field. Set\n   * to -1 for none.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength\n   */\n  @property({ type: Number }) maxLength = -1;\n\n  /**\n   * Defines the most negative value in the range of permitted values.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min\n   */\n  @property() min = '';\n\n  /**\n   * The minimum number of characters a user can enter into the text field. Set\n   * to -1 for none.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength\n   */\n  @property({ type: Number }) minLength = -1;\n\n  /**\n   * A regular expression that the text field's value must match to pass\n   * constraint validation.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern\n   */\n  @property() pattern = '';\n\n  @property({ reflect: true }) placeholder = '';\n\n  /**\n   * Indicates whether or not a user should be able to edit the text field's\n   * value.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly\n   */\n  @property({ type: Boolean, reflect: true }) readOnly = false;\n\n  @query('#md-textfield') mdTextfield!: HTMLInputElement;\n\n  handleChange(e: Event) {\n    const inputElement = e.target as HTMLInputElement;\n    const textChangeEvent = new CustomEvent('textChange', {\n      detail: {\n        value: inputElement.value,\n      },\n      composed: true,\n    } as TextChangeEvent);\n\n    this.dispatchEvent(textChangeEvent);\n  }\n\n  getValidityStatus() {\n    return this.mdTextfield?.reportValidity();\n  }\n\n  render() {\n    let comp;\n    if (this.outlined) {\n      comp = html`\n        <md-outlined-text-field\n          id=\"md-textfield\"\n          ?disabled=\"${this.disabled}\"\n          ?required=\"${this.required}\"\n          ?error=\"${this.error}\"\n          error-text=\"${this.errorText}\"\n          label=\"${this.label}\"\n          value=\"${this.value}\"\n          placeholder=\"${this.placeholder}\"\n          ?readOnly=\"${this.readOnly}\"\n          text-direction=\"${this.textDirection}\"\n          rows=\"${this.rows}\"\n          max=\"${this.max}\"\n          maxLength=\"${this.maxLength}\"\n          min=\"${this.min}\"\n          minLength=\"${this.minLength}\"\n          pattern=\"${this.pattern}\"\n          prefix-text=\"${this.prefixText}\"\n          suffix-text=\"${this.suffixText}\"\n          supporting-text=\"${this.supportingText}\"\n          type=\"${this.type}\"\n          @input=\"${this.handleChange}\"\n        >\n        </md-outlined-text-field>\n      `;\n    } else {\n      comp = html`\n        <md-filled-text-field\n          id=\"md-textfield\"\n          ?disabled=\"${this.disabled}\"\n          ?required=\"${this.required}\"\n          ?error=\"${this.error}\"\n          error-text=\"${this.errorText}\"\n          label=\"${this.label}\"\n          value=\"${this.value}\"\n          placeholder=\"${this.placeholder}\"\n          ?readOnly=\"${this.readOnly}\"\n          text-direction=\"${this.textDirection}\"\n          rows=\"${this.rows}\"\n          max=\"${this.max}\"\n          maxLength=\"${this.maxLength}\"\n          min=\"${this.min}\"\n          minLength=\"${this.minLength}\"\n          pattern=\"${this.pattern}\"\n          prefix-text=\"${this.prefixText}\"\n          suffix-text=\"${this.suffixText}\"\n          supporting-text=\"${this.supportingText}\"\n          type=\"${this.type}\"\n          @input=\"${this.handleChange}\"\n        >\n        </md-filled-text-field>\n      `;\n    }\n    return html` ${comp} `;\n  }\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ix-textbox': IxTextbox;\n  }\n}\n"]}
+{"version":3,"file":"IxTextbox.js","sourceRoot":"","sources":["../src/IxTextbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,IAAI,IAAI,UAAU,EAAe,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,8CAA8C,CAAC;AACtD,OAAO,gDAAgD,CAAC;AAKxD,OAAO,oCAAoC,CAAC;AAE5C,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QAI8C,WAAM,GAAG,KAAK,CAAC;QAEf,aAAQ,GAAG,KAAK,CAAC;QAE7D;;;;WAIG;QACyC,UAAK,GAAG,KAAK,CAAC;QAE1D;;;;;;;WAOG;QACoC,cAAS,GAAG,EAAE,CAAC;QAE1C,UAAK,GAAG,EAAE,CAAC;QAEqB,aAAQ,GAAG,KAAK,CAAC;QAE7D;;WAEG;QACS,UAAK,GAAG,EAAE,CAAC;QAEvB;;WAEG;QACS,SAAI,GAAG,EAAE,CAAC;QAEtB;;WAEG;QACqC,eAAU,GAAG,EAAE,CAAC;QAExD;;WAEG;QACqC,eAAU,GAAG,EAAE,CAAC;QAExD;;WAEG;QAEH,gBAAW,GAAG,EAAE,CAAC;QAEjB;;WAEG;QAEH,iBAAY,GAAG,EAAE,CAAC;QAElB;;;WAGG;QACyC,mBAAc,GAAG,EAAE,CAAC;QAEhE;;;WAGG;QACwC,kBAAa,GAAG,EAAE,CAAC;QAE9D;;;WAGG;QACyB,SAAI,GAAG,CAAC,CAAC;QAErC,qBAAqB;QACiB,cAAS,GAAG,EAAE,CAAC;QAErD;;;;WAIG;QACS,QAAG,GAAG,EAAE,CAAC;QAErB;;;;;WAKG;QACyB,cAAS,GAAG,CAAC,CAAC,CAAC;QAE3C;;;;WAIG;QACS,QAAG,GAAG,EAAE,CAAC;QAErB;;;;;WAKG;QACyB,cAAS,GAAG,CAAC,CAAC,CAAC;QAE3C;;;;;WAKG;QACS,YAAO,GAAG,EAAE,CAAC;QAEI,gBAAW,GAAG,EAAE,CAAC;QAE9C;;;;;WAKG;QACyC,aAAQ,GAAG,KAAK,CAAC;QAE7D;;;;WAIG;QACyC,aAAQ,GAAG,KAAK,CAAC;QAE7D;;;;;WAKG;QACS,SAAI,GAAG,EAAE,CAAC;QAEtB;;;;;;;;;;;;;;;;;;WAkBG;QAEH,SAAI,GAA6C,MAAM,CAAC;QAExD;;;;;WAKG;QAC0B,iBAAY,GAAG,EAAE,CAAC;IAwDjD,CAAC;IAtDW,gBAAgB;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAEkB,MAAM;QACvB,MAAM,GAAG,GAAgB,IAAI,CAAC,MAAM;YAClC,CAAC,CAAC,OAAO,CAAA,sBAAsB;YAC/B,CAAC,CAAC,OAAO,CAAA,wBAAwB,CAAC;QAEpC,OAAO,UAAU,CAAA;WACV,GAAG;;sBAEQ,IAAI,CAAC,QAAQ;sBACb,IAAI,CAAC,QAAQ;mBAChB,IAAI,CAAC,KAAK;uBACN,IAAI,CAAC,QAAQ;sBACd,IAAI,CAAC,QAAQ;8BACL,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC;+BAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;iBAC1C,IAAI,CAAC,IAAI,IAAI,OAAO;yBACZ,IAAI,CAAC,YAAY,IAAI,OAAO;uBAC9B,IAAI,CAAC,SAAS;wBACb,IAAI,CAAC,WAAW;2BACb,IAAI,CAAC,aAAa;iBAC5B,IAAI,CAAC,IAAI;gBACV,IAAI,CAAC,GAAG;sBACF,IAAI,CAAC,SAAS;gBACpB,IAAI,CAAC,GAAG;sBACF,IAAI,CAAC,SAAS;oBAChB,IAAI,CAAC,OAAO;wBACR,IAAI,CAAC,UAAU;wBACf,IAAI,CAAC,UAAU;4BACX,IAAI,CAAC,cAAc;sBACzB,IAAI,CAAC,SAAS;iBACnB,IAAI,CAAC,IAAI;kBACR,IAAI,CAAC,KAAK;iBACX,IAAI,CAAC,IAAI;kBACR,IAAI,CAAC,KAAK;;YAGhB,IAAI,CAAC,WAAW;YACd,CAAC,CAAC,IAAI,CAAA,gCAAgC,IAAI,CAAC,WAAW,YAAY;YAClE,CAAC,CAAC,OACN;YAEE,IAAI,CAAC,YAAY;YACf,CAAC,CAAC,IAAI,CAAA;qBACC,IAAI,CAAC,YAAY;kBACpB;YACJ,CAAC,CAAC,OACN;YACE,GAAG;OACR,CAAC;IACN,CAAC;CACF;AAnOC;IADC,KAAK,CAAC,YAAY,CAAC;4CACkB;AAEM;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAgB;AAEf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAkB;AAOjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAe;AAUnB;IAAtC,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;4CAAgB;AAE1C;IAAX,QAAQ,EAAE;wCAAY;AAEqB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAkB;AAKjD;IAAX,QAAQ,EAAE;wCAAY;AAKX;IAAX,QAAQ,EAAE;uCAAW;AAKkB;IAAvC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;6CAAiB;AAKhB;IAAvC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;6CAAiB;AAMxD;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;8CACvB;AAMjB;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;+CACvB;AAM0B;IAA3C,QAAQ,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;iDAAqB;AAMrB;IAA1C,QAAQ,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;gDAAoB;AAMlC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAU;AAGR;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAyB;AAOzC;IAAX,QAAQ,EAAE;sCAAU;AAQO;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAgB;AAO/B;IAAX,QAAQ,EAAE;sCAAU;AAQO;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAgB;AAQ/B;IAAX,QAAQ,EAAE;0CAAc;AAEI;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAkB;AAQF;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAkB;AAOjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAkB;AAQjD;IAAX,QAAQ,EAAE;uCAAW;AAsBtB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC4B;AAQ3B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAmB","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { html as staticHtml, StaticValue, literal } from 'lit/static-html.js';\nimport { property, query } from 'lit/decorators.js';\nimport '@material/web/textfield/filled-text-field.js';\nimport '@material/web/textfield/outlined-text-field.js';\nimport {\n  TextFieldType,\n  UnsupportedTextFieldType,\n} from '@material/web/textfield/internal/text-field.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\n\nexport class IxTextbox extends LitElement {\n  @query('.textfield')\n  readonly component!: HTMLInputElement;\n\n  @property({ type: Boolean, reflect: true }) filled = false;\n\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Gets or sets whether or not the text field is in a visually invalid state.\n   *\n   * Calling `reportValidity()` will automatically update `error`.\n   */\n  @property({ type: Boolean, reflect: true }) error = false;\n\n  /**\n   * The error message that replaces supporting text when `error` is true. If\n   * `errorText` is an empty string, then the supporting text will continue to\n   * show.\n   *\n   * Calling `reportValidity()` will automatically update `errorText` to the\n   * native `validationMessage`.\n   */\n  @property({ attribute: 'error-text' }) errorText = '';\n\n  @property() label = '';\n\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /**\n   * The current value of the text field. It is always a string.\n   */\n  @property() value = '';\n\n  /**\n   * The name of the text field. It is always a string.\n   */\n  @property() name = '';\n\n  /**\n   * An optional prefix to display before the input value.\n   */\n  @property({ attribute: 'prefix-text' }) prefixText = '';\n\n  /**\n   * An optional suffix to display after the input value.\n   */\n  @property({ attribute: 'suffix-text' }) suffixText = '';\n\n  /**\n   * Name of icon. It is always a string.\n   */\n  @property({ attribute: 'leading-icon' })\n  leadingIcon = '';\n\n  /**\n   * Name of icon. It is always a string.\n   */\n  @property({ attribute: 'trailing-icon' })\n  trailingIcon = '';\n\n  /**\n   * Conveys additional information below the text field, such as how it should\n   * be used.\n   */\n  @property({ attribute: 'supporting-text' }) supportingText = '';\n\n  /**\n   * Override the input text CSS `direction`. Useful for RTL languages that use\n   * LTR notation for fractions.\n   */\n  @property({ attribute: 'text-direction' }) textDirection = '';\n\n  /**\n   * The number of rows to display for a `type=\"textarea\"` text field.\n   * Defaults to 2.\n   */\n  @property({ type: Number }) rows = 2;\n\n  // <input> properties\n  @property({ reflect: true }) override inputMode = '';\n\n  /**\n   * Defines the greatest value in the range of permitted values.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max\n   */\n  @property() max = '';\n\n  /**\n   * The maximum number of characters a user can enter into the text field. Set\n   * to -1 for none.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength\n   */\n  @property({ type: Number }) maxLength = -1;\n\n  /**\n   * Defines the most negative value in the range of permitted values.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min\n   */\n  @property() min = '';\n\n  /**\n   * The minimum number of characters a user can enter into the text field. Set\n   * to -1 for none.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength\n   */\n  @property({ type: Number }) minLength = -1;\n\n  /**\n   * A regular expression that the text field's value must match to pass\n   * constraint validation.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern\n   */\n  @property() pattern = '';\n\n  @property({ reflect: true }) placeholder = '';\n\n  /**\n   * Indicates whether or not a user should be able to edit the text field's\n   * value.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly\n   */\n  @property({ type: Boolean, reflect: true }) readOnly = false;\n\n  /**\n   * Indicates that input accepts multiple email addresses.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple\n   */\n  @property({ type: Boolean, reflect: true }) multiple = false;\n\n  /**\n   * Returns or sets the element's step attribute, which works with min and max\n   * to limit the increments at which a numeric or date-time value can be set.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step\n   */\n  @property() step = '';\n\n  /**\n   * The `<input>` type to use, defaults to \"text\". The type greatly changes how\n   * the text field behaves.\n   *\n   * Text fields support a limited number of `<input>` types:\n   *\n   * - text\n   * - textarea\n   * - email\n   * - number\n   * - password\n   * - search\n   * - tel\n   * - url\n   *\n   * See\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\n   * for more details on each input type.\n   */\n  @property({ reflect: true })\n  type: TextFieldType | UnsupportedTextFieldType = 'text';\n\n  /**\n   * Describes what, if any, type of autocomplete functionality the input\n   * should provide.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n   */\n  @property({ reflect: true }) autocomplete = '';\n\n  protected createRenderRoot() {\n    return this;\n  }\n\n  protected override render() {\n    const tag: StaticValue = this.filled\n      ? literal`md-filled-text-field`\n      : literal`md-outlined-text-field`;\n\n    return staticHtml`\n        <${tag}\n          class=\"textfield\"\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          ?error=${this.error}\n          ?multipule=${this.multiple}\n          ?readOnly=${this.readOnly}\n          ?has-leading-icon=${this.leadingIcon.length > 0}\n          ?has-trailing-icon=${this.trailingIcon.length > 0}\n          step=${this.step || nothing}\n          autocomplete=${this.autocomplete || nothing}\n          error-text=${this.errorText}\n          placeholder=${this.placeholder}\n          text-direction=${this.textDirection}\n          rows=${this.rows}\n          max=${this.max}\n          maxLength=${this.maxLength}\n          min=${this.min}\n          minLength=${this.minLength}\n          pattern=${this.pattern}\n          prefix-text=${this.prefixText}\n          suffix-text=${this.suffixText}\n          supporting-text=${this.supportingText}\n          inputMode=${this.inputMode}\n          type=${this.type}\n          label=${this.label}\n          name=${this.name}\n          value=${this.value}\n        >\n          ${\n            this.leadingIcon\n              ? html`<ix-icon slot=\"leading-icon\">${this.leadingIcon}</ix-icon>`\n              : nothing\n          }\n          ${\n            this.trailingIcon\n              ? html`<ix-icon slot=\"trailing-icon\"\n                  >${this.trailingIcon}</ix-icon\n                >`\n              : nothing\n          }\n        </${tag}>\n      `;\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-realty/ix-textbox",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "description": "Webcomponent ix-textbox following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
@@ -26,6 +26,7 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
+    "@digital-realty/ix-icon": "^0.0.3",
     "@lit-labs/react": "^2.0.3",
     "@material/web": "^1.0.0-pre.15",
     "lit": "^2.7.6",
@@ -46,6 +47,7 @@
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
     "prettier": "^2.4.1",
+    "sinon": "^16.1.3",
     "tslib": "^2.3.1",
     "typescript": "^4.5.2"
   },
@@ -61,6 +63,7 @@
       "@typescript-eslint"
     ],
     "rules": {
+      "no-dupe-class-members": "off",
       "class-methods-use-this": "off",
       "no-unused-vars": "off",
       "@typescript-eslint/no-unused-vars": [
@@ -74,6 +77,10 @@
           "ignorePackages": true
         }
       ]
+    },
+    "globals": {
+      "ShadowRootInit": true,
+      "SelectionMode": true
     }
   },
   "prettier": {
@@ -98,5 +105,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "f487170ac27de967505c921dabf983d2a122e625"
+  "gitHead": "ed23dcb034e9d2a56ba58c27d995a737442e66ea"
 }

package/dist/types/index.d.ts

@@ -1,14 +0,0 @@
-/**
- * Input types that are compatible with the text field.
- */
-export type TextFieldType = 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'textarea';
-/**
- * Input types that are not fully supported for the text field.
- */
-export type UnsupportedTextFieldType = 'color' | 'date' | 'datetime-local' | 'file' | 'month' | 'time' | 'week';
-/**
- * The event that is fired when the text field's value changes.
- */
-export type TextChangeEvent = CustomEvent<{
-    value: string;
-}>;

package/dist/types/index.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Input types that are compatible with the text field.\n */\nexport type TextFieldType =\n  | 'email'\n  | 'number'\n  | 'password'\n  | 'search'\n  | 'tel'\n  | 'text'\n  | 'url'\n  | 'textarea';\n\n/**\n * Input types that are not fully supported for the text field.\n */\nexport type UnsupportedTextFieldType =\n  | 'color'\n  | 'date'\n  | 'datetime-local'\n  | 'file'\n  | 'month'\n  | 'time'\n  | 'week';\n\n/**\n * The event that is fired when the text field's value changes.\n */\nexport type TextChangeEvent = CustomEvent<{ value: string }>;\n"]}