@haiilo/catalyst 8.1.1 → 8.2.0

package/dist/collection/components/cat-input/cat-input.js

@@ -17,788 +17,788 @@ let nextUniqueId = 0;
  * @part suffix - The text suffix.
  */
 export class CatInput {
-  constructor() {
-    this._id = `cat-input-${nextUniqueId++}`;
-    this.hasSlottedLabel = false;
-    this.hasSlottedHint = false;
-    this.errorMap = undefined;
-    this.requiredMarker = 'optional';
-    this.horizontal = false;
-    this.autoComplete = undefined;
-    this.clearable = false;
-    this.disabled = false;
-    this.hint = undefined;
-    this.icon = undefined;
-    this.iconRight = false;
-    this.identifier = undefined;
-    this.label = '';
-    this.labelHidden = false;
-    this.max = undefined;
-    this.maxLength = undefined;
-    this.min = undefined;
-    this.minLength = undefined;
-    this.name = undefined;
-    this.placeholder = undefined;
-    this.textPrefix = undefined;
-    this.textSuffix = undefined;
-    this.readonly = false;
-    this.required = false;
-    this.round = false;
-    this.type = 'text';
-    this.value = undefined;
-    this.errors = undefined;
-    this.errorUpdate = 0;
-    this.nativeAttributes = undefined;
-  }
-  get id() {
-    return this.identifier || this._id;
-  }
-  componentWillRender() {
-    this.onErrorsChanged(this.errors);
-    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
-    this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-    if (!this.label && !this.hasSlottedLabel) {
-      log.warn('[A11y] Missing ARIA label on input', this);
+    constructor() {
+        this._id = `cat-input-${nextUniqueId++}`;
+        this.hasSlottedLabel = false;
+        this.hasSlottedHint = false;
+        this.errorMap = undefined;
+        this.requiredMarker = 'optional';
+        this.horizontal = false;
+        this.autoComplete = undefined;
+        this.clearable = false;
+        this.disabled = false;
+        this.hint = undefined;
+        this.icon = undefined;
+        this.iconRight = false;
+        this.identifier = undefined;
+        this.label = '';
+        this.labelHidden = false;
+        this.max = undefined;
+        this.maxLength = undefined;
+        this.min = undefined;
+        this.minLength = undefined;
+        this.name = undefined;
+        this.placeholder = undefined;
+        this.textPrefix = undefined;
+        this.textSuffix = undefined;
+        this.readonly = false;
+        this.required = false;
+        this.round = false;
+        this.type = 'text';
+        this.value = undefined;
+        this.errors = undefined;
+        this.errorUpdate = 0;
+        this.nativeAttributes = undefined;
     }
-  }
-  /**
-   * Programmatically move focus to the input. Use this method instead of
-   * `input.focus()`.
-   *
-   * @param options An optional object providing options to control aspects of
-   * the focusing process.
-   */
-  async doFocus(options) {
-    // hack to make datepicker inputs focusable. The datepicker hides the input
-    // element and dynamically creates a sibling. We need to find the new input
-    // element and focus it instead.
-    const input = this.input.type === 'hidden' ? this.findSiblingInput(this.input.nextSibling) : this.input;
-    input?.focus(options);
-  }
-  /**
-   * Programmatically remove focus from the input. Use this method instead of
-   * `input.blur()`.
-   */
-  async doBlur() {
-    this.input.blur();
-  }
-  /**
-   * Clear the input.
-   */
-  async clear() {
-    this.value = '';
-    this.catChange.emit(this.value);
-  }
-  onErrorsChanged(value) {
-    if (!coerceBoolean(this.errorUpdate)) {
-      this.errorMap = undefined;
+    get id() {
+        return this.identifier || this._id;
     }
-    else {
-      this.errorMapSrc = Array.isArray(value)
-        ? value.reduce((acc, err) => ({ ...acc, [err]: undefined }), {})
-        : value === true
-          ? {}
-          : value || undefined;
-      this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();
+    componentWillRender() {
+        this.onErrorsChanged(this.errors);
+        this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+        this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+        if (!this.label && !this.hasSlottedLabel) {
+            log.warn('[A11y] Missing ARIA label on input', this);
+        }
     }
-  }
-  render() {
-    return (h("div", { class: {
-        'input-field': true,
-        'input-horizontal': this.horizontal
-      } }, h("div", { class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, part: "label" }, h("span", { class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, h("div", { class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")")), this.maxLength && (h("div", { class: "label-character-count", "aria-hidden": "true" }, this.value?.toString().length ?? 0, "/", this.maxLength))))))), h("div", { class: "input-container" }, h("div", { class: {
-        'input-wrapper': true,
-        'input-round': this.round,
-        'input-readonly': this.readonly,
-        'input-disabled': this.disabled,
-        'input-invalid': this.invalid
-      }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), h("div", { class: "input-inner-wrapper" }, h("input", { ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
-        'has-clearable': this.clearable && !this.disabled && !this.readonly
-      }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (h("cat-button", { class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true }))), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && h("cat-icon", { icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), this.hasHint && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
-  }
-  get hasHint() {
-    return !!this.hint || !!this.hasSlottedHint || this.invalid;
-  }
-  get invalid() {
-    return !!Object.keys(this.errorMap || {}).length;
-  }
-  onInput() {
-    this.value = this.input.value;
-    this.catChange.emit(this.value);
-    this.showErrorsIfTimeout();
-  }
-  onFocus(event) {
-    this.catFocus.emit(event);
-  }
-  onBlur(event) {
-    this.catBlur.emit(event);
-    if (coerceBoolean(this.errorUpdate)) {
-      this.showErrors();
+    /**
+     * Programmatically move focus to the input. Use this method instead of
+     * `input.focus()`.
+     *
+     * @param options An optional object providing options to control aspects of
+     * the focusing process.
+     */
+    async doFocus(options) {
+        // hack to make datepicker inputs focusable. The datepicker hides the input
+        // element and dynamically creates a sibling. We need to find the new input
+        // element and focus it instead.
+        const input = this.input.type === 'hidden' ? this.findSiblingInput(this.input.nextSibling) : this.input;
+        input?.focus(options);
     }
-  }
-  showErrors() {
-    this.errorMap = this.errorMapSrc;
-  }
-  showErrorsIfTimeout() {
-    const errorUpdate = coerceNumber(this.errorUpdate, null);
-    if (errorUpdate !== null) {
-      typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);
-      this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);
-      return true;
+    /**
+     * Programmatically remove focus from the input. Use this method instead of
+     * `input.blur()`.
+     */
+    async doBlur() {
+        this.input.blur();
     }
-    return false;
-  }
-  showErrorsIfNoFocus() {
-    const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;
-    if (!hasFocus) {
-      this.showErrors();
+    /**
+     * Clear the input.
+     */
+    async clear() {
+        this.value = '';
+        this.catChange.emit(this.value);
     }
-  }
-  findSiblingInput(node) {
-    if (node instanceof HTMLInputElement) {
-      return node;
+    onErrorsChanged(value) {
+        if (!coerceBoolean(this.errorUpdate)) {
+            this.errorMap = undefined;
+        }
+        else {
+            this.errorMapSrc = Array.isArray(value)
+                ? value.reduce((acc, err) => ({ ...acc, [err]: undefined }), {})
+                : value === true
+                    ? {}
+                    : value || undefined;
+            this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();
+        }
     }
-    else if (node?.nextSibling) {
-      return this.findSiblingInput(node.nextSibling);
+    render() {
+        return (h("div", { class: {
+                'input-field': true,
+                'input-horizontal': this.horizontal
+            } }, h("div", { class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, part: "label" }, h("span", { class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, h("div", { class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")")), this.maxLength && (h("div", { class: "label-character-count", "aria-hidden": "true" }, this.value?.toString().length ?? 0, "/", this.maxLength))))))), h("div", { class: "input-container" }, h("div", { class: {
+                'input-wrapper': true,
+                'input-round': this.round,
+                'input-readonly': this.readonly,
+                'input-disabled': this.disabled,
+                'input-invalid': this.invalid
+            }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), h("div", { class: "input-inner-wrapper" }, h("input", { ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
+                'has-clearable': this.clearable && !this.disabled && !this.readonly
+            }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (h("cat-button", { class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true }))), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && h("cat-icon", { icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), this.hasHint && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
     }
-    return undefined;
-  }
-  static get is() { return "cat-input"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cat-input.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cat-input.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "requiredMarker": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!'",
-          "resolved": "\"none!\" | \"none\" | \"optional!\" | \"optional\" | \"required!\" | \"required\" | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Whether the label need a marker to shown if the input is required or optional."
-        },
-        "attribute": "required-marker",
-        "reflect": false,
-        "defaultValue": "'optional'"
-      },
-      "horizontal": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the label is on top or left."
-        },
-        "attribute": "horizontal",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "autoComplete": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Hint for form autofill feature."
-        },
-        "attribute": "auto-complete",
-        "reflect": false
-      },
-      "clearable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the input should show a clear button."
-        },
-        "attribute": "clearable",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the input is disabled."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "hint": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | string[]",
-          "resolved": "string | string[] | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Optional hint text(s) to be displayed with the input."
-        },
-        "attribute": "hint",
-        "reflect": false
-      },
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The name of an icon to be displayed in the input."
-        },
-        "attribute": "icon",
-        "reflect": false
-      },
-      "iconRight": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Display the icon on the right."
-        },
-        "attribute": "icon-right",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A unique identifier for the input."
-        },
-        "attribute": "identifier",
-        "reflect": false
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label for the input."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "labelHidden": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Visually hide the label, but still show it to assistive technologies like screen readers."
-        },
-        "attribute": "label-hidden",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "max": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "number | string",
-          "resolved": "number | string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A maximum value for date, time and numeric values."
-        },
-        "attribute": "max",
-        "reflect": false
-      },
-      "maxLength": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A maximum length (number of characters) for textual values."
-        },
-        "attribute": "max-length",
-        "reflect": false
-      },
-      "min": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "number | string",
-          "resolved": "number | string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A minimum value for date, time and numeric values."
-        },
-        "attribute": "min",
-        "reflect": false
-      },
-      "minLength": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A minimum length (number of characters) for textual values."
-        },
-        "attribute": "min-length",
-        "reflect": false
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The name of the form control. Submitted with the form as part of a name/value pair."
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The placeholder text to display within the input."
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "textPrefix": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A textual prefix to be displayed in the input."
-        },
-        "attribute": "text-prefix",
-        "reflect": false
-      },
-      "textSuffix": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A textual suffix to be displayed in the input."
-        },
-        "attribute": "text-suffix",
-        "reflect": false
-      },
-      "readonly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The value is not editable."
-        },
-        "attribute": "readonly",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "A value is required or must be check for the form to be submittable."
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "round": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Use round input edges."
-        },
-        "attribute": "round",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "InputType",
-          "resolved": "\"color\" | \"email\" | \"file\" | \"number\" | \"password\" | \"range\" | \"search\" | \"tel\" | \"text\" | \"url\"",
-          "references": {
-            "InputType": {
-              "location": "import",
-              "path": "./input-type",
-              "id": "src/components/cat-input/input-type.ts::InputType"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Type of form control."
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'text'"
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The value of the control."
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "errors": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean | string[] | ErrorMap",
-          "resolved": "boolean | string[] | undefined | { [key: string]: any; }",
-          "references": {
-            "ErrorMap": {
-              "location": "import",
-              "path": "../cat-form-hint/cat-form-hint",
-              "id": "src/components/cat-form-hint/cat-form-hint.tsx::ErrorMap"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The validation errors for this input. Will render a hint under the input\nwith the translated error message(s) `error.${key}`. If an object is\npassed, the keys will be used as error keys and the values translation\nparameters.\nIf the value is `true`, the input will be marked as invalid without any\nhints under the input."
-        },
-        "attribute": "errors",
-        "reflect": false
-      },
-      "errorUpdate": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean | number",
-          "resolved": "boolean | number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Fine-grained control over when the errors are shown. Can be `false` to\nnever show errors, `true` to show errors on blur, or a number to show\nerrors on change with the given delay in milliseconds."
-        },
-        "attribute": "error-update",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "nativeAttributes": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "{ [key: string]: string }",
-          "resolved": "undefined | { [key: string]: string; }",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Attributes that will be added to the native HTML input element."
+    get hasHint() {
+        return !!this.hint || !!this.hasSlottedHint || this.invalid;
+    }
+    get invalid() {
+        return !!Object.keys(this.errorMap || {}).length;
+    }
+    onInput() {
+        this.value = this.input.value;
+        this.catChange.emit(this.value);
+        this.showErrorsIfTimeout();
+    }
+    onFocus(event) {
+        this.catFocus.emit(event);
+    }
+    onBlur(event) {
+        this.catBlur.emit(event);
+        if (coerceBoolean(this.errorUpdate)) {
+            this.showErrors();
         }
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasSlottedLabel": {},
-      "hasSlottedHint": {},
-      "errorMap": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "catChange",
-        "name": "catChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the value is changed."
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+    }
+    showErrors() {
+        this.errorMap = this.errorMapSrc;
+    }
+    showErrorsIfTimeout() {
+        const errorUpdate = coerceNumber(this.errorUpdate, null);
+        if (errorUpdate !== null) {
+            typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);
+            this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);
+            return true;
         }
-      }, {
-        "method": "catFocus",
-        "name": "catFocus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the input received focus."
-        },
-        "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
-          "references": {
-            "FocusEvent": {
-              "location": "global",
-              "id": "global::FocusEvent"
-            }
-          }
+        return false;
+    }
+    showErrorsIfNoFocus() {
+        const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;
+        if (!hasFocus) {
+            this.showErrors();
         }
-      }, {
-        "method": "catBlur",
-        "name": "catBlur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the input loses focus."
-        },
-        "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
-          "references": {
-            "FocusEvent": {
-              "location": "global",
-              "id": "global::FocusEvent"
-            }
-          }
+    }
+    findSiblingInput(node) {
+        if (node instanceof HTMLInputElement) {
+            return node;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "doFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "options An optional object providing options to control aspects of\nthe focusing process."
-                }],
-              "text": "An optional object providing options to control aspects of\nthe focusing process."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "FocusOptions": {
-              "location": "global",
-              "id": "global::FocusOptions"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Programmatically move focus to the input. Use this method instead of\n`input.focus()`.",
-          "tags": [{
-              "name": "param",
-              "text": "options An optional object providing options to control aspects of\nthe focusing process."
-            }]
+        else if (node?.nextSibling) {
+            return this.findSiblingInput(node.nextSibling);
         }
-      },
-      "doBlur": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        return undefined;
+    }
+    static get is() { return "cat-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cat-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cat-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "requiredMarker": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!'",
+                    "resolved": "\"none!\" | \"none\" | \"optional!\" | \"optional\" | \"required!\" | \"required\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the label need a marker to shown if the input is required or optional."
+                },
+                "attribute": "required-marker",
+                "reflect": false,
+                "defaultValue": "'optional'"
+            },
+            "horizontal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the label is on top or left."
+                },
+                "attribute": "horizontal",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "autoComplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Hint for form autofill feature."
+                },
+                "attribute": "auto-complete",
+                "reflect": false
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input should show a clear button."
+                },
+                "attribute": "clearable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is disabled."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional hint text(s) to be displayed with the input."
+                },
+                "attribute": "hint",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of an icon to be displayed in the input."
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "iconRight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display the icon on the right."
+                },
+                "attribute": "icon-right",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier for the input."
+                },
+                "attribute": "identifier",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the input."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "labelHidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hide the label, but still show it to assistive technologies like screen readers."
+                },
+                "attribute": "label-hidden",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "max": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A maximum value for date, time and numeric values."
+                },
+                "attribute": "max",
+                "reflect": false
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A maximum length (number of characters) for textual values."
+                },
+                "attribute": "max-length",
+                "reflect": false
+            },
+            "min": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A minimum value for date, time and numeric values."
+                },
+                "attribute": "min",
+                "reflect": false
+            },
+            "minLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A minimum length (number of characters) for textual values."
+                },
+                "attribute": "min-length",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the form control. Submitted with the form as part of a name/value pair."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder text to display within the input."
+                },
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "textPrefix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A textual prefix to be displayed in the input."
+                },
+                "attribute": "text-prefix",
+                "reflect": false
+            },
+            "textSuffix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A textual suffix to be displayed in the input."
+                },
+                "attribute": "text-suffix",
+                "reflect": false
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value is not editable."
+                },
+                "attribute": "readonly",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A value is required or must be check for the form to be submittable."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "round": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use round input edges."
+                },
+                "attribute": "round",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputType",
+                    "resolved": "\"color\" | \"email\" | \"file\" | \"number\" | \"password\" | \"range\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {
+                        "InputType": {
+                            "location": "import",
+                            "path": "./input-type",
+                            "id": "src/components/cat-input/input-type.ts::InputType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of form control."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the control."
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "errors": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | string[] | ErrorMap",
+                    "resolved": "boolean | string[] | undefined | { [key: string]: any; }",
+                    "references": {
+                        "ErrorMap": {
+                            "location": "import",
+                            "path": "../cat-form-hint/cat-form-hint",
+                            "id": "src/components/cat-form-hint/cat-form-hint.tsx::ErrorMap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The validation errors for this input. Will render a hint under the input\nwith the translated error message(s) `error.${key}`. If an object is\npassed, the keys will be used as error keys and the values translation\nparameters.\nIf the value is `true`, the input will be marked as invalid without any\nhints under the input."
+                },
+                "attribute": "errors",
+                "reflect": false
+            },
+            "errorUpdate": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | number",
+                    "resolved": "boolean | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fine-grained control over when the errors are shown. Can be `false` to\nnever show errors, `true` to show errors on blur, or a number to show\nerrors on change with the given delay in milliseconds."
+                },
+                "attribute": "error-update",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "nativeAttributes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: string }",
+                    "resolved": "undefined | { [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Attributes that will be added to the native HTML input element."
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Programmatically remove focus from the input. Use this method instead of\n`input.blur()`.",
-          "tags": []
-        }
-      },
-      "clear": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+    }
+    static get states() {
+        return {
+            "hasSlottedLabel": {},
+            "hasSlottedHint": {},
+            "errorMap": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "catChange",
+                "name": "catChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value is changed."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "catFocus",
+                "name": "catFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input received focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "catBlur",
+                "name": "catBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "doFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "options An optional object providing options to control aspects of\nthe focusing process."
+                                }],
+                            "text": "An optional object providing options to control aspects of\nthe focusing process."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically move focus to the input. Use this method instead of\n`input.focus()`.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "options An optional object providing options to control aspects of\nthe focusing process."
+                        }]
+                }
+            },
+            "doBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically remove focus from the input. Use this method instead of\n`input.blur()`.",
+                    "tags": []
+                }
+            },
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clear the input.",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Clear the input.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "hostElement"; }
-  static get watchers() {
-    return [{
-        "propName": "errors",
-        "methodName": "onErrorsChanged"
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "errors",
+                "methodName": "onErrorsChanged"
+            }];
+    }
 }
 //# sourceMappingURL=cat-input.js.map