@digital-realty/ix-textbox 2.0.1 → 2.0.5

package/dist/src/IxTextbox.js

@@ -1,240 +1,251 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-import '@material/web/textfield/filled-text-field.js';
-import '@material/web/textfield/outlined-text-field.js';
-export class IxTextbox extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.outlined = true;
-        this.type = 'text';
-        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 = '';
-        /**
-         * The number of rows to display for a `type="textarea"` text field.
-         * Defaults to 2.
-         */
-        this.rows = 2;
-        // <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;
-        this.onChange = () => { };
-    }
-    _handleChange(e) {
-        const inputElement = e.target;
-        this.onChange({ value: inputElement.value });
-    }
-    render() {
-        let comp;
-        if (this.outlined) {
-            comp = html `
-        <md-outlined-text-field
-          ?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
-          ?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.onChange}"
-        >
-        </md-filled-text-field>
-      `;
-        }
-        return html ` ${comp} `;
-    }
-}
-__decorate([
-    property({ type: Boolean })
-], IxTextbox.prototype, "outlined", void 0);
-__decorate([
-    property({ reflect: true })
-], IxTextbox.prototype, "type", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IxTextbox.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IxTextbox.prototype, "error", void 0);
-__decorate([
-    property({ attribute: 'error-text' })
-], IxTextbox.prototype, "errorText", void 0);
-__decorate([
-    property()
-], IxTextbox.prototype, "label", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IxTextbox.prototype, "required", void 0);
-__decorate([
-    property()
-], IxTextbox.prototype, "value", void 0);
-__decorate([
-    property({ attribute: 'prefix-text' })
-], IxTextbox.prototype, "prefixText", void 0);
-__decorate([
-    property({ attribute: 'suffix-text' })
-], IxTextbox.prototype, "suffixText", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'has-leading-icon' })
-], IxTextbox.prototype, "hasLeadingIcon", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'has-trailing-icon' })
-], IxTextbox.prototype, "hasTrailingIcon", void 0);
-__decorate([
-    property({ attribute: 'supporting-text' })
-], IxTextbox.prototype, "supportingText", void 0);
-__decorate([
-    property({ attribute: 'text-direction' })
-], IxTextbox.prototype, "textDirection", void 0);
-__decorate([
-    property({ type: Number })
-], IxTextbox.prototype, "rows", void 0);
-__decorate([
-    property()
-], IxTextbox.prototype, "max", void 0);
-__decorate([
-    property({ type: Number })
-], IxTextbox.prototype, "maxLength", void 0);
-__decorate([
-    property()
-], IxTextbox.prototype, "min", void 0);
-__decorate([
-    property({ type: Number })
-], IxTextbox.prototype, "minLength", void 0);
-__decorate([
-    property()
-], IxTextbox.prototype, "pattern", void 0);
-__decorate([
-    property({ reflect: true })
-], IxTextbox.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IxTextbox.prototype, "readOnly", void 0);
-__decorate([
-    property({ type: Function })
-], IxTextbox.prototype, "onChange", void 0);
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import '@material/web/textfield/filled-text-field.js';
+import '@material/web/textfield/outlined-text-field.js';
+export class IxTextbox extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.outlined = true;
+        this.type = 'text';
+        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 = '';
+        /**
+         * The number of rows to display for a `type="textarea"` text field.
+         * Defaults to 2.
+         */
+        this.rows = 2;
+        // <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;
+    }
+    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();
+    }
+    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}"
+        >
+        </md-filled-text-field>
+      `;
+        }
+        return html ` ${comp} `;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], IxTextbox.prototype, "outlined", void 0);
+__decorate([
+    property({ reflect: true })
+], IxTextbox.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IxTextbox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IxTextbox.prototype, "error", void 0);
+__decorate([
+    property({ attribute: 'error-text' })
+], IxTextbox.prototype, "errorText", void 0);
+__decorate([
+    property()
+], IxTextbox.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IxTextbox.prototype, "required", void 0);
+__decorate([
+    property()
+], IxTextbox.prototype, "value", void 0);
+__decorate([
+    property({ attribute: 'prefix-text' })
+], IxTextbox.prototype, "prefixText", void 0);
+__decorate([
+    property({ attribute: 'suffix-text' })
+], IxTextbox.prototype, "suffixText", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'has-leading-icon' })
+], IxTextbox.prototype, "hasLeadingIcon", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'has-trailing-icon' })
+], IxTextbox.prototype, "hasTrailingIcon", void 0);
+__decorate([
+    property({ attribute: 'supporting-text' })
+], IxTextbox.prototype, "supportingText", void 0);
+__decorate([
+    property({ attribute: 'text-direction' })
+], IxTextbox.prototype, "textDirection", void 0);
+__decorate([
+    property({ type: Number })
+], IxTextbox.prototype, "rows", void 0);
+__decorate([
+    property()
+], IxTextbox.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], IxTextbox.prototype, "maxLength", void 0);
+__decorate([
+    property()
+], IxTextbox.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], IxTextbox.prototype, "minLength", void 0);
+__decorate([
+    property()
+], IxTextbox.prototype, "pattern", void 0);
+__decorate([
+    property({ reflect: true })
+], IxTextbox.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IxTextbox.prototype, "readOnly", void 0);
+__decorate([
+    query('#md-textfield')
+], IxTextbox.prototype, "mdTextfield", void 0);
 //# sourceMappingURL=IxTextbox.js.map

package/dist/src/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 } from 'lit/decorators.js';\nimport '@material/web/textfield/filled-text-field.js';\nimport '@material/web/textfield/outlined-text-field.js';\nimport { TextFieldType, UnsupportedTextFieldType } 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  @property({ type: Function }) onChange: Function = () => {};\n\n  _handleChange(e: Event) {\n    const inputElement = e.target as HTMLInputElement;\n    this.onChange({ value: inputElement.value });\n  }\n\n  render() {\n    let comp;\n    if (this.outlined) {\n      comp = html`\n        <md-outlined-text-field\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          ?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.onChange}\"\n        >\n        </md-filled-text-field>\n      `;\n    }\n    return html` ${comp} `;\n  }\n}\n"]}
+{"version":3,"file":"IxTextbox.js","sourceRoot":"","sources":["../../src/IxTextbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\r\nimport { property, query } from 'lit/decorators.js';\r\nimport '@material/web/textfield/filled-text-field.js';\r\nimport '@material/web/textfield/outlined-text-field.js';\r\nimport {\r\n  TextFieldType,\r\n  UnsupportedTextFieldType,\r\n  TextChangeEvent,\r\n} from './types/index.js';\r\n\r\nexport class IxTextbox extends LitElement {\r\n  @property({ type: Boolean }) outlined = true;\r\n\r\n  @property({ reflect: true })\r\n  type: TextFieldType | UnsupportedTextFieldType = 'text';\r\n\r\n  @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n  /**\r\n   * Gets or sets whether or not the text field is in a visually invalid state.\r\n   *\r\n   * Calling `reportValidity()` will automatically update `error`.\r\n   */\r\n  @property({ type: Boolean, reflect: true }) error = false;\r\n\r\n  /**\r\n   * The error message that replaces supporting text when `error` is true. If\r\n   * `errorText` is an empty string, then the supporting text will continue to\r\n   * show.\r\n   *\r\n   * Calling `reportValidity()` will automatically update `errorText` to the\r\n   * native `validationMessage`.\r\n   */\r\n  @property({ attribute: 'error-text' }) errorText = '';\r\n\r\n  @property() label = '';\r\n\r\n  @property({ type: Boolean, reflect: true }) required = false;\r\n\r\n  /**\r\n   * The current value of the text field. It is always a string.\r\n   */\r\n  @property() value = '';\r\n\r\n  /**\r\n   * An optional prefix to display before the input value.\r\n   */\r\n  @property({ attribute: 'prefix-text' }) prefixText = '';\r\n\r\n  /**\r\n   * An optional suffix to display after the input value.\r\n   */\r\n  @property({ attribute: 'suffix-text' }) suffixText = '';\r\n\r\n  /**\r\n   * Whether or not the text field has a leading icon. Used for SSR.\r\n   */\r\n  @property({ type: Boolean, attribute: 'has-leading-icon' })\r\n  hasLeadingIcon = false;\r\n\r\n  /**\r\n   * Whether or not the text field has a trailing icon. Used for SSR.\r\n   */\r\n  @property({ type: Boolean, attribute: 'has-trailing-icon' })\r\n  hasTrailingIcon = false;\r\n\r\n  /**\r\n   * Conveys additional information below the text field, such as how it should\r\n   * be used.\r\n   */\r\n  @property({ attribute: 'supporting-text' }) supportingText = '';\r\n\r\n  /**\r\n   * Override the input text CSS `direction`. Useful for RTL languages that use\r\n   * LTR notation for fractions.\r\n   */\r\n  @property({ attribute: 'text-direction' }) textDirection = '';\r\n\r\n  /**\r\n   * The number of rows to display for a `type=\"textarea\"` text field.\r\n   * Defaults to 2.\r\n   */\r\n  @property({ type: Number }) rows = 2;\r\n\r\n  // <input> properties\r\n  /**\r\n   * Defines the greatest value in the range of permitted values.\r\n   *\r\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max\r\n   */\r\n  @property() max = '';\r\n\r\n  /**\r\n   * The maximum number of characters a user can enter into the text field. Set\r\n   * to -1 for none.\r\n   *\r\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength\r\n   */\r\n  @property({ type: Number }) maxLength = -1;\r\n\r\n  /**\r\n   * Defines the most negative value in the range of permitted values.\r\n   *\r\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min\r\n   */\r\n  @property() min = '';\r\n\r\n  /**\r\n   * The minimum number of characters a user can enter into the text field. Set\r\n   * to -1 for none.\r\n   *\r\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength\r\n   */\r\n  @property({ type: Number }) minLength = -1;\r\n\r\n  /**\r\n   * A regular expression that the text field's value must match to pass\r\n   * constraint validation.\r\n   *\r\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern\r\n   */\r\n  @property() pattern = '';\r\n\r\n  @property({ reflect: true }) placeholder = '';\r\n\r\n  /**\r\n   * Indicates whether or not a user should be able to edit the text field's\r\n   * value.\r\n   *\r\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly\r\n   */\r\n  @property({ type: Boolean, reflect: true }) readOnly = false;\r\n\r\n  @query('#md-textfield') mdTextfield!: HTMLInputElement;\r\n\r\n  handleChange(e: Event) {\r\n    const inputElement = e.target as HTMLInputElement;\r\n    const textChangeEvent = new CustomEvent('textChange', {\r\n      detail: {\r\n        value: inputElement.value,\r\n      },\r\n      composed: true,\r\n    } as TextChangeEvent);\r\n\r\n    this.dispatchEvent(textChangeEvent);\r\n  }\r\n\r\n  getValidityStatus() {\r\n    return this.mdTextfield?.reportValidity();\r\n  }\r\n\r\n  render() {\r\n    let comp;\r\n    if (this.outlined) {\r\n      comp = html`\r\n        <md-outlined-text-field\r\n          id=\"md-textfield\"\r\n          ?disabled=\"${this.disabled}\"\r\n          ?required=\"${this.required}\"\r\n          ?error=\"${this.error}\"\r\n          error-text=\"${this.errorText}\"\r\n          label=\"${this.label}\"\r\n          value=\"${this.value}\"\r\n          placeholder=\"${this.placeholder}\"\r\n          ?readOnly=\"${this.readOnly}\"\r\n          text-direction=\"${this.textDirection}\"\r\n          rows=\"${this.rows}\"\r\n          max=\"${this.max}\"\r\n          maxLength=\"${this.maxLength}\"\r\n          min=\"${this.min}\"\r\n          minLength=\"${this.minLength}\"\r\n          pattern=\"${this.pattern}\"\r\n          prefix-text=\"${this.prefixText}\"\r\n          suffix-text=\"${this.suffixText}\"\r\n          supporting-text=\"${this.supportingText}\"\r\n          type=\"${this.type}\"\r\n          @input=\"${this.handleChange}\"\r\n        >\r\n        </md-outlined-text-field>\r\n      `;\r\n    } else {\r\n      comp = html`\r\n        <md-filled-text-field\r\n          id=\"md-textfield\"\r\n          ?disabled=\"${this.disabled}\"\r\n          ?required=\"${this.required}\"\r\n          ?error=\"${this.error}\"\r\n          error-text=\"${this.errorText}\"\r\n          label=\"${this.label}\"\r\n          value=\"${this.value}\"\r\n          placeholder=\"${this.placeholder}\"\r\n          ?readOnly=\"${this.readOnly}\"\r\n          text-direction=\"${this.textDirection}\"\r\n          rows=\"${this.rows}\"\r\n          max=\"${this.max}\"\r\n          maxLength=\"${this.maxLength}\"\r\n          min=\"${this.min}\"\r\n          minLength=\"${this.minLength}\"\r\n          pattern=\"${this.pattern}\"\r\n          prefix-text=\"${this.prefixText}\"\r\n          suffix-text=\"${this.suffixText}\"\r\n          supporting-text=\"${this.supportingText}\"\r\n          type=\"${this.type}\"\r\n          @input=\"${this.handleChange}\"\r\n        >\r\n        </md-filled-text-field>\r\n      `;\r\n    }\r\n    return html` ${comp} `;\r\n  }\r\n}\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'ix-textbox': IxTextbox;\r\n  }\r\n}\r\n"]}

package/dist/src/index.d.ts

@@ -1 +1 @@
-export { IxTextbox } from './IxTextbox.js';
+export { IxTextbox } from './IxTextbox.js';

package/dist/src/index.js

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

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { IxTextbox } from './IxTextbox.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { IxTextbox } from './IxTextbox.js';\r\n"]}

package/dist/src/ix-textbox-styles.d.ts

@@ -1 +1 @@
-export declare const IxTextboxStyles: import("lit").CSSResult;
+export declare const IxTextboxStyles: import("lit").CSSResult;