@ukic/canary-web-components 2.0.0-canary.3 → 2.0.0-canary.5

package/dist/components/ic-text-field2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as IcInformationStatus } from './types.js';
-import { x as debounceEvent, f as removeFormResetListener, a as inheritAttributes, e as addFormResetListener, r as removeDisabledFalse, o as onComponentRequiredPropUndefined, k as getInputDescribedByText, h as renderHiddenInput, i as isSlotUsed, y as isEmptyString, I as IC_INHERITED_ARIA } from './helpers.js';
+import { E as debounceEvent, n as removeFormResetListener, a as inheritAttributes, m as addFormResetListener, r as removeDisabledFalse, o as onComponentRequiredPropUndefined, s as getInputDescribedByText, p as renderHiddenInput, i as isSlotUsed, F as isEmptyString, I as IC_INHERITED_ARIA } from './helpers.js';
 import { d as defineCustomElement$5 } from './ic-input-component-container2.js';
 import { d as defineCustomElement$4 } from './ic-input-container2.js';
 import { d as defineCustomElement$3 } from './ic-input-label2.js';
@@ -11,316 +11,308 @@ const icTextFieldCss = "/*! normalize.css v8.0.1 | MIT License | github.com/neco
 
 let inputIds = 0;
 const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.getValidationText = createEvent(this, "getValidationText", 7);
-    this.icBlur = createEvent(this, "icBlur", 7);
-    this.icChange = createEvent(this, "icChange", 7);
-    this.icFocus = createEvent(this, "icFocus", 7);
-    this.icInput = createEvent(this, "icInput", 7);
-    this.icKeydown = createEvent(this, "icKeydown", 7);
-    this.inheritedAttributes = {};
-    this.showLeftIcon = this.hasLeftIconSlot();
-    this.onInput = (ev) => {
-      this.value = ev.target.value;
-      this.icInput.emit({ value: this.value });
-    };
-    this.onBlur = (ev) => {
-      const value = ev.target.value;
-      this.icBlur.emit({ value: value });
-    };
-    this.onFocus = (ev) => {
-      const value = ev.target.value;
-      this.icFocus.emit({ value: value });
-    };
-    this.isTextArea = () => {
-      return this.rows > 1;
-    };
-    this.getInlineValidationText = () => {
-      this.getValidationText.emit({ value: this.validationText });
-    };
-    this.hasStatus = (status) => {
-      return status !== "" && !this.disabled;
-    };
-    this.showStatusText = (status) => {
-      return (this.hasStatus(status) &&
-        !(status == IcInformationStatus.Success && this.validationInline) &&
-        !this.validationInlineInternal);
-    };
-    this.handleFormReset = () => {
-      this.value = this.initialValue;
-    };
-    this.numChars = 0;
-    this.maxLengthExceeded = false;
-    this.maxValueExceeded = false;
-    this.minValueUnattained = false;
-    this.ariaActiveDescendant = undefined;
-    this.ariaAutocomplete = undefined;
-    this.ariaExpanded = undefined;
-    this.ariaOwns = undefined;
-    this.autocapitalize = "off";
-    this.autocomplete = "off";
-    this.autocorrect = "off";
-    this.autoFocus = false;
-    this.disabled = false;
-    this.fullWidth = false;
-    this.helperText = "";
-    this.hideLabel = false;
-    this.hiddenInput = true;
-    this.inputId = `ic-text-field-input-${inputIds++}`;
-    this.inputmode = "text";
-    this.label = undefined;
-    this.max = undefined;
-    this.maxLength = 0;
-    this.min = undefined;
-    this.name = this.inputId;
-    this.placeholder = "";
-    this.readonly = false;
-    this.required = false;
-    this.resize = false;
-    this.role = undefined;
-    this.rows = 1;
-    this.small = false;
-    this.spellcheck = false;
-    this.truncateValue = undefined;
-    this.type = "text";
-    this.validationInline = false;
-    this.validationInlineInternal = false;
-    this.validationStatus = "";
-    this.validationText = "";
-    this.debounce = 0;
-    this.value = "";
-    this.initialValue = this.value;
-  }
-  debounceChanged() {
-    this.icChange = debounceEvent(this.icChange, this.debounce);
-  }
-  watchValueHandler(newValue) {
-    if (this.inputEl && this.inputEl.value !== newValue) {
-      this.inputEl.value = newValue;
-    }
-    this.numChars = newValue.length;
-    if (this.type === "number") {
-      if (newValue && Number(newValue) < Number(this.min)) {
-        this.minValueUnattained = true;
-      }
-      else {
-        this.minValueUnattained = false;
-      }
-      if (Number(newValue) > Number(this.max)) {
-        this.maxValueExceeded = true;
-      }
-      else {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.getValidationText = createEvent(this, "getValidationText", 7);
+        this.icBlur = createEvent(this, "icBlur", 7);
+        this.icChange = createEvent(this, "icChange", 7);
+        this.icFocus = createEvent(this, "icFocus", 7);
+        this.icInput = createEvent(this, "icInput", 7);
+        this.icKeydown = createEvent(this, "icKeydown", 7);
+        this.inheritedAttributes = {};
+        this.showLeftIcon = this.hasLeftIconSlot();
+        this.getMaxLengthExceeded = (value) => {
+            this.numChars = value.length;
+            if (this.type === "number") {
+                this.minValueUnattained =
+                    value && Number(value) < Number(this.min) ? true : false;
+                this.maxValueExceeded = Number(value) > Number(this.max) ? true : false;
+            }
+            if (this.maxLength > 0) {
+                this.maxLengthExceeded = value.length > this.maxLength ? true : false;
+            }
+        };
+        this.onInput = (ev) => {
+            this.value = ev.target.value;
+            this.icInput.emit({ value: this.value });
+        };
+        this.onBlur = (ev) => {
+            const value = ev.target.value;
+            this.icBlur.emit({ value: value });
+        };
+        this.onFocus = (ev) => {
+            const value = ev.target.value;
+            this.icFocus.emit({ value: value });
+        };
+        this.isTextArea = () => {
+            return this.rows > 1;
+        };
+        this.getInlineValidationText = () => {
+            this.getValidationText.emit({ value: this.validationText });
+        };
+        this.hasStatus = (status) => {
+            return status !== "" && !this.disabled;
+        };
+        this.showStatusText = (status) => {
+            return (this.hasStatus(status) &&
+                !(status == IcInformationStatus.Success && this.validationInline) &&
+                !this.validationInlineInternal);
+        };
+        this.handleFormReset = () => {
+            this.value = this.initialValue;
+        };
+        this.numChars = 0;
+        this.maxLengthExceeded = false;
         this.maxValueExceeded = false;
-      }
+        this.minValueUnattained = false;
+        this.ariaActiveDescendant = undefined;
+        this.ariaAutocomplete = undefined;
+        this.ariaExpanded = undefined;
+        this.ariaOwns = undefined;
+        this.autocapitalize = "off";
+        this.autocomplete = "off";
+        this.autocorrect = "off";
+        this.autoFocus = false;
+        this.disabled = false;
+        this.fullWidth = false;
+        this.helperText = "";
+        this.hideLabel = false;
+        this.hiddenInput = true;
+        this.inputId = `ic-text-field-input-${inputIds++}`;
+        this.inputmode = "text";
+        this.label = undefined;
+        this.max = undefined;
+        this.maxLength = 0;
+        this.min = undefined;
+        this.name = this.inputId;
+        this.placeholder = "";
+        this.readonly = false;
+        this.required = false;
+        this.resize = false;
+        this.role = undefined;
+        this.rows = 1;
+        this.size = "default";
+        this.small = false;
+        this.spellcheck = false;
+        this.truncateValue = undefined;
+        this.type = "text";
+        this.validationInline = false;
+        this.validationInlineInternal = false;
+        this.validationStatus = "";
+        this.validationText = "";
+        this.debounce = 0;
+        this.value = "";
+        this.initialValue = this.value;
     }
-    if (this.maxLength > 0) {
-      if (newValue.length > this.maxLength) {
-        this.maxLengthExceeded = true;
-      }
-      else {
-        this.maxLengthExceeded = false;
-      }
+    debounceChanged() {
+        this.icChange = debounceEvent(this.icChange, this.debounce);
     }
-    this.icChange.emit({ value: newValue });
-  }
-  connectedCallback() {
-    this.debounceChanged();
-  }
-  disconnectedCallback() {
-    removeFormResetListener(this.el, this.handleFormReset);
-  }
-  componentWillLoad() {
-    this.watchValueHandler(this.value);
-    this.inheritedAttributes = inheritAttributes(this.el, [
-      ...IC_INHERITED_ARIA,
-      "title",
-      "aria-autocomplete",
-      "aria-haspopup",
-    ]);
-    if (this.readonly) {
-      this.maxLengthExceeded = false;
-      this.maxValueExceeded = false;
-      this.minValueUnattained = false;
+    watchValueHandler(newValue) {
+        if (this.inputEl && this.inputEl.value !== newValue) {
+            this.inputEl.value = newValue;
+        }
+        this.getMaxLengthExceeded(newValue);
+        this.icChange.emit({ value: newValue });
     }
-    addFormResetListener(this.el, this.handleFormReset);
-    removeDisabledFalse(this.disabled, this.el);
-  }
-  componentDidLoad() {
-    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Text Field");
-    if (this.validationInlineInternal) {
-      this.getInlineValidationText();
+    connectedCallback() {
+        this.debounceChanged();
     }
-  }
-  handleKeyDown(ev) {
-    this.icKeydown.emit({ event: ev });
-  }
-  /**
-   * Sets focus on the native `input`.
-   */
-  async setFocus() {
-    if (this.inputEl) {
-      this.inputEl.focus();
+    disconnectedCallback() {
+        removeFormResetListener(this.el, this.handleFormReset);
     }
-  }
-  hasLeftIconSlot() {
-    const iconEl = this.el.querySelector(`[slot="icon"]`);
-    return iconEl !== null;
-  }
-  render() {
-    const { inputId, name, label, required, small, placeholder, helperText, rows, resize, disabled, value, min, max, maxLength, numChars, readonly, maxLengthExceeded, minValueUnattained, maxValueExceeded, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, } = this;
-    const disabledMode = readonly ? true : disabled;
-    const placeholderText = disabled ? "" : placeholder;
-    const currentStatus = maxLengthExceeded || maxValueExceeded || minValueUnattained
-      ? IcInformationStatus.Error
-      : validationStatus;
-    const currentValidationText = maxLengthExceeded
-      ? "Maximum length exceeded"
-      : maxValueExceeded
-        ? `Maximum value of ${max} exceeded`
-        : minValueUnattained
-          ? `Minimum value of ${min} not met`
-          : validationText;
-    const maxNumChars = readonly ? 0 : maxLength;
-    const messageAriaLive = maxLengthExceeded ||
-      maxValueExceeded ||
-      minValueUnattained ||
-      (maxLength === 0 && currentStatus === IcInformationStatus.Error)
-      ? "assertive"
-      : "polite";
-    const showStatusText = this.showStatusText(currentStatus);
-    const multiline = this.isTextArea();
-    const hiddenCharCountDescId = maxLength > 0 ? inputId + "-charcount-desc" : "";
-    const describedBy = (hiddenCharCountDescId +
-      " " +
-      getInputDescribedByText(inputId, helperText !== "", showStatusText)).trim();
-    if (this.showLeftIcon && !readonly && disabledMode) {
-      this.showLeftIcon = false;
+    componentWillLoad() {
+        if (this.value !== this.initialValue) {
+            this.watchValueHandler(this.value);
+        }
+        this.getMaxLengthExceeded(this.value);
+        this.inheritedAttributes = inheritAttributes(this.el, [
+            ...IC_INHERITED_ARIA,
+            "title",
+        ]);
+        if (this.readonly) {
+            this.maxLengthExceeded = false;
+            this.maxValueExceeded = false;
+            this.minValueUnattained = false;
+        }
+        addFormResetListener(this.el, this.handleFormReset);
+        removeDisabledFalse(this.disabled, this.el);
     }
-    const invalid = currentStatus === IcInformationStatus.Error ? "true" : "false";
-    const disabledText = disabledMode && !readonly;
-    if (hiddenInput) {
-      renderHiddenInput(true, this.el, name, value, disabledMode);
+    componentDidLoad() {
+        onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Text Field");
+        if (this.validationInlineInternal) {
+            this.getInlineValidationText();
+        }
     }
-    return (h(Host, { class: { ["fullwidth"]: fullWidth } }, h("ic-input-container", { readonly: readonly, disabled: disabledMode }, !this.hideLabel && (h("ic-input-label", { for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly })), h("ic-input-component-container", { small: small, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, this.showLeftIcon && (h("span", { class: {
-        ["readonly"]: readonly,
-        ["has-value"]: value.length > 0,
-      }, slot: "left-icon" }, h("slot", { name: "icon" }))), !multiline && (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: this.type, min: min, max: max, value: value, class: {
-        ["no-left-pad"]: !this.showLeftIcon && readonly,
-        ["readonly"]: readonly,
-        ["truncate-value"]: truncateValue,
-      }, placeholder: placeholderText, required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-activedescendant": this.ariaActiveDescendant, "aria-expanded": this.ariaExpanded, "aria-owns": this.ariaOwns, autocomplete: this.autocomplete, autocapitalize: this.autocapitalize, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode, role: this.role }, this.inheritedAttributes))), multiline && (h("textarea", Object.assign({ id: inputId, class: {
-        ["no-resize"]: resize === false || readonly,
-        ["no-left-pad"]: !this.showLeftIcon && readonly,
-        ["readonly"]: readonly,
-      }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholderText, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: this.autocapitalize, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode }, this.inheritedAttributes))), isSlotUsed(this.el, "clear-button") && (h("slot", { name: "clear-button" })), isSlotUsed(this.el, "search-submit-button") && (h("slot", { name: "search-submit-button" }))), isSlotUsed(this.el, "menu") && h("slot", { name: "menu" }), (!isEmptyString(validationStatus) ||
-      !isEmptyString(validationText) ||
-      maxNumChars > 0 ||
-      maxValueExceeded ||
-      minValueUnattained) &&
-      !validationInlineInternal && (h("ic-input-validation", { status: this.hasStatus(currentStatus) === false ||
-        (currentStatus === IcInformationStatus.Success &&
-          validationInline) ||
-        validationInlineInternal
-        ? ""
-        : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (h("div", { slot: "validation-message-adornment" }, h("ic-typography", { variant: "caption", class: {
-        ["maxlengthtext"]: true,
-        ["error"]: maxLengthExceeded,
-        ["disabled"]: disabledText,
-      } }, h("span", { "aria-live": "polite", id: `${inputId}-charcount`, class: "charcount" }, numChars, "/", maxNumChars), h("span", { hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))))));
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "debounce": ["debounceChanged"],
-    "value": ["watchValueHandler"]
-  }; }
-  static get style() { return icTextFieldCss; }
+    handleKeyDown(ev) {
+        this.icKeydown.emit({ event: ev });
+    }
+    /**
+     * Sets focus on the native `input`.
+     */
+    async setFocus() {
+        if (this.inputEl) {
+            this.inputEl.focus();
+        }
+    }
+    hasLeftIconSlot() {
+        const iconEl = this.el.querySelector(`[slot="icon"]`);
+        return iconEl !== null;
+    }
+    render() {
+        const { inputId, name, label, required, size, small, placeholder, helperText, rows, resize, disabled, value, min, max, maxLength, numChars, readonly, maxLengthExceeded, minValueUnattained, maxValueExceeded, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, } = this;
+        const disabledMode = readonly ? true : disabled;
+        const placeholderText = disabled ? "" : placeholder;
+        const currentStatus = maxLengthExceeded || maxValueExceeded || minValueUnattained
+            ? IcInformationStatus.Error
+            : validationStatus;
+        const currentValidationText = maxLengthExceeded
+            ? "Maximum length exceeded"
+            : maxValueExceeded
+                ? `Maximum value of ${max} exceeded`
+                : minValueUnattained
+                    ? `Minimum value of ${min} not met`
+                    : validationText;
+        const maxNumChars = readonly ? 0 : maxLength;
+        const messageAriaLive = maxLengthExceeded ||
+            maxValueExceeded ||
+            minValueUnattained ||
+            (maxLength === 0 && currentStatus === IcInformationStatus.Error)
+            ? "assertive"
+            : "polite";
+        const showStatusText = this.showStatusText(currentStatus);
+        const multiline = this.isTextArea();
+        const hiddenCharCountDescId = maxLength > 0 ? inputId + "-charcount-desc" : "";
+        const describedBy = (hiddenCharCountDescId +
+            " " +
+            getInputDescribedByText(inputId, helperText !== "", showStatusText)).trim();
+        if (this.showLeftIcon && !readonly && disabledMode) {
+            this.showLeftIcon = false;
+        }
+        const invalid = currentStatus === IcInformationStatus.Error ? "true" : "false";
+        const disabledText = disabledMode && !readonly;
+        if (hiddenInput) {
+            renderHiddenInput(true, this.el, name, value, disabledMode);
+        }
+        return (h(Host, { class: { ["fullwidth"]: fullWidth } }, h("ic-input-container", { readonly: readonly, disabled: disabledMode }, !this.hideLabel && (h("ic-input-label", { for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly })), h("ic-input-component-container", { size: small ? "small" : size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, this.showLeftIcon && (h("span", { class: {
+                ["readonly"]: readonly,
+                ["has-value"]: value.length > 0,
+            }, slot: "left-icon" }, h("slot", { name: "icon" }))), !multiline && (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: this.type, min: min, max: max, value: value, class: {
+                ["no-left-pad"]: !this.showLeftIcon && readonly,
+                ["readonly"]: readonly,
+                ["truncate-value"]: truncateValue,
+            }, placeholder: placeholderText, required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-activedescendant": this.ariaActiveDescendant, "aria-expanded": this.ariaExpanded, "aria-owns": this.ariaOwns, autocomplete: this.autocomplete, autocapitalize: this.autocapitalize, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode, role: this.role }, this.inheritedAttributes))), multiline && (h("textarea", Object.assign({ id: inputId, class: {
+                ["no-resize"]: resize === false || readonly,
+                ["no-left-pad"]: !this.showLeftIcon && readonly,
+                ["readonly"]: readonly,
+            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholderText, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: this.autocapitalize, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode }, this.inheritedAttributes))), isSlotUsed(this.el, "clear-button") && (h("slot", { name: "clear-button" })), isSlotUsed(this.el, "search-submit-button") && (h("slot", { name: "search-submit-button" }))), isSlotUsed(this.el, "menu") && h("slot", { name: "menu" }), (!isEmptyString(validationStatus) ||
+            !isEmptyString(validationText) ||
+            maxNumChars > 0 ||
+            maxValueExceeded ||
+            minValueUnattained) &&
+            !validationInlineInternal && (h("ic-input-validation", { status: this.hasStatus(currentStatus) === false ||
+                (currentStatus === IcInformationStatus.Success &&
+                    validationInline) ||
+                validationInlineInternal
+                ? ""
+                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (h("div", { slot: "validation-message-adornment" }, h("ic-typography", { variant: "caption", class: {
+                ["maxlengthtext"]: true,
+                ["error"]: maxLengthExceeded,
+                ["disabled"]: disabledText,
+            } }, h("span", { "aria-live": "polite", id: `${inputId}-charcount`, class: "charcount" }, numChars, "/", maxNumChars), h("span", { hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "debounce": ["debounceChanged"],
+        "value": ["watchValueHandler"]
+    }; }
+    static get style() { return icTextFieldCss; }
 }, [1, "ic-text-field", {
-    "ariaActiveDescendant": [1, "aria-active-descendant"],
-    "ariaAutocomplete": [1, "aria-autocomplete"],
-    "ariaExpanded": [1, "aria-expanded"],
-    "ariaOwns": [1, "aria-owns"],
-    "autocapitalize": [1],
-    "autocomplete": [1],
-    "autocorrect": [1],
-    "autoFocus": [4, "auto-focus"],
-    "disabled": [4],
-    "fullWidth": [4, "full-width"],
-    "helperText": [1, "helper-text"],
-    "hideLabel": [4, "hide-label"],
-    "hiddenInput": [4, "hidden-input"],
-    "inputId": [1, "input-id"],
-    "inputmode": [1],
-    "label": [1],
-    "max": [8],
-    "maxLength": [2, "max-length"],
-    "min": [8],
-    "name": [1],
-    "placeholder": [1],
-    "readonly": [516],
-    "required": [4],
-    "resize": [4],
-    "role": [1],
-    "rows": [2],
-    "small": [516],
-    "spellcheck": [4],
-    "truncateValue": [4, "truncate-value"],
-    "type": [1],
-    "validationInline": [4, "validation-inline"],
-    "validationInlineInternal": [4, "validation-inline-internal"],
-    "validationStatus": [1, "validation-status"],
-    "validationText": [1, "validation-text"],
-    "debounce": [2],
-    "value": [1537],
-    "numChars": [32],
-    "maxLengthExceeded": [32],
-    "maxValueExceeded": [32],
-    "minValueUnattained": [32],
-    "initialValue": [32],
-    "setFocus": [64]
-  }, [[0, "keydown", "handleKeyDown"]], {
-    "debounce": ["debounceChanged"],
-    "value": ["watchValueHandler"]
-  }]);
+        "ariaActiveDescendant": [1, "aria-active-descendant"],
+        "ariaAutocomplete": [1, "aria-autocomplete"],
+        "ariaExpanded": [1, "aria-expanded"],
+        "ariaOwns": [1, "aria-owns"],
+        "autocapitalize": [1],
+        "autocomplete": [1],
+        "autocorrect": [1],
+        "autoFocus": [4, "auto-focus"],
+        "disabled": [4],
+        "fullWidth": [4, "full-width"],
+        "helperText": [1, "helper-text"],
+        "hideLabel": [4, "hide-label"],
+        "hiddenInput": [4, "hidden-input"],
+        "inputId": [1, "input-id"],
+        "inputmode": [1],
+        "label": [1],
+        "max": [8],
+        "maxLength": [2, "max-length"],
+        "min": [8],
+        "name": [1],
+        "placeholder": [1],
+        "readonly": [516],
+        "required": [4],
+        "resize": [4],
+        "role": [1],
+        "rows": [2],
+        "size": [1],
+        "small": [4],
+        "spellcheck": [4],
+        "truncateValue": [4, "truncate-value"],
+        "type": [1],
+        "validationInline": [4, "validation-inline"],
+        "validationInlineInternal": [4, "validation-inline-internal"],
+        "validationStatus": [1, "validation-status"],
+        "validationText": [1, "validation-text"],
+        "debounce": [2],
+        "value": [1537],
+        "numChars": [32],
+        "maxLengthExceeded": [32],
+        "maxValueExceeded": [32],
+        "minValueUnattained": [32],
+        "initialValue": [32],
+        "setFocus": [64]
+    }, [[0, "keydown", "handleKeyDown"]], {
+        "debounce": ["debounceChanged"],
+        "value": ["watchValueHandler"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ic-text-field", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-typography"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ic-text-field":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TextField);
-      }
-      break;
-    case "ic-input-component-container":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "ic-input-container":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "ic-input-label":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ic-input-validation":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "ic-typography":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-text-field", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-text-field":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TextField);
+            }
+            break;
+        case "ic-input-component-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ic-input-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ic-input-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ic-input-validation":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ic-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { TextField as T, defineCustomElement as d };