npm - @haiilo/catalyst - Versions diffs - 4.1.2 → 5.0.0 - Mend

@haiilo/catalyst 4.1.2 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (276) hide show

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

@@ -1,6 +1,6 @@
-import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
+import { h } from '@stencil/core';
 import log from 'loglevel';
-import { buildHintSection } from '../cat-form-hint/cat-form-hint-utils';
+import { CatFormHint } from '../cat-form-hint/cat-form-hint';
 import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
 let nextUniqueId = 0;
 /**
@@ -18,52 +18,35 @@ export class CatInput {
   constructor() {
     this._id = `cat-input-${nextUniqueId++}`;
     this.hasSlottedLabel = false;
-    /**
-     * Whether the label need a marker to shown if the input is required or optional.
-     */
+    this.hasSlottedHint = false;
+    this.errorMap = undefined;
     this.requiredMarker = 'optional';
-    /**
-     * Whether the input should show a clear button.
-     */
+    this.horizontal = false;
+    this.autoComplete = undefined;
     this.clearable = false;
-    /**
-     * Whether the input is disabled.
-     */
     this.disabled = false;
-    /**
-     * Display the icon on the right.
-     */
+    this.hint = undefined;
+    this.icon = undefined;
     this.iconRight = false;
-    /**
-     * The label for the input.
-     */
+    this.identifier = undefined;
     this.label = '';
-    /**
-     * Visually hide the label, but still show it to assistive technologies like screen readers.
-     */
     this.labelHidden = false;
-    /**
-     * The value is not editable.
-     */
+    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;
-    /**
-     * A value is required or must be check for the form to be submittable.
-     */
     this.required = false;
-    /**
-     * Use round input edges.
-     */
     this.round = false;
-    /**
-     * Type of form control.
-     */
     this.type = 'text';
-    /**
-     * Fine-grained control over when the errors are shown. Can be `false` to
-     * never show errors, `true` to show errors on blur, or a number to show
-     * errors on change with the given delay in milliseconds.
-     */
+    this.value = undefined;
+    this.errors = undefined;
     this.errorUpdate = 0;
+    this.nativeAttributes = undefined;
   }
   get id() {
     return this.identifier || this._id;
@@ -71,6 +54,7 @@ export class CatInput {
   componentWillRender() {
     this.watchErrorsHandler(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);
     }
@@ -110,7 +94,7 @@ export class CatInput {
     }
     else {
       this.errorMapSrc = Array.isArray(value)
-        ? value.map(error => ({ [error]: undefined }))
+        ? value.reduce((acc, err) => (Object.assign(Object.assign({}, acc), { [err]: undefined })), {})
         : value === true
           ? {}
           : value || undefined;
@@ -118,35 +102,20 @@ export class CatInput {
   }
   render() {
     var _a;
-    return (h(Host, null,
-      (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } },
-        h("span", { part: "label" },
-          (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label,
-          !this.required && this.requiredMarker.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'),
-            ")"))))),
-      h("div", { class: {
-          'input-wrapper': true,
-          'input-round': this.round,
-          '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" }),
-        h("div", { class: "input-inner-wrapper" },
-          h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.id, class: {
-              'has-clearable': this.clearable && !this.disabled
-            }, 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": ((_a = this.hint) === null || _a === void 0 ? void 0 : _a.length) ? this.id + '-hint' : undefined })),
-          this.clearable && !this.disabled && this.value && (h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t('input.clear'), onClick: this.clear.bind(this) }))),
-        !this.invalid && this.icon && this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" })),
-        this.invalid && (h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l" })),
-        this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))),
-      buildHintSection(this.hostElement, this.id, this.hint, this.errorMap)));
+    return (h("div", { class: {
+        'input-field': true,
+        'input-horizontal': this.horizontal
+      } }, h("div", { class: {
+        hidden: this.labelHidden,
+        'label-container': true
+      } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id }, h("span", { class: "label-wrapper", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && this.requiredMarker.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'), ")")))))), h("div", { class: "input-container" }, h("div", { class: {
+        'input-wrapper': true,
+        'input-round': this.round,
+        '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" }), h("div", { class: "input-inner-wrapper" }, h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.id, class: {
+        'has-clearable': this.clearable && !this.disabled
+      }, 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": ((_a = this.hint) === null || _a === void 0 ? void 0 : _a.length) ? this.id + '-hint' : undefined })), this.clearable && !this.disabled && this.value && (h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t('input.clear'), onClick: this.clear.bind(this) }))), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" })), this.invalid && (h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), (this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
   }
   get invalid() {
     return !!this.errorMap;
@@ -170,615 +139,648 @@ export class CatInput {
   }
   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\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "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'"
-    },
-    "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": "\"button\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"month\" | \"number\" | \"password\" | \"range\" | \"reset\" | \"search\" | \"submit\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
-        "references": {
-          "InputType": {
-            "location": "import",
-            "path": "./input-type"
+  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\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "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": "\"button\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"month\" | \"number\" | \"password\" | \"range\" | \"reset\" | \"search\" | \"submit\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
+          "references": {
+            "InputType": {
+              "location": "import",
+              "path": "./input-type"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Type of form control."
-      },
-      "attribute": "type",
-      "reflect": false,
-      "defaultValue": "'text'"
-    },
-    "value": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "string | number",
-        "resolved": "number | 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-utils"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of form control."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'text'"
+      },
+      "value": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "string | number",
+          "resolved": "number | 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"
+            }
           }
+        },
+        "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."
         }
-      },
-      "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."
-      }
-    }
-  }; }
-  static get states() { return {
-    "hasSlottedLabel": {},
-    "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": "any",
-        "resolved": "any",
-        "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"
+    };
+  }
+  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": "any",
+          "resolved": "any",
+          "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"
+            }
           }
         }
-      }
-    }, {
-      "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"
+      }, {
+        "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"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "doFocus": {
-      "complexType": {
-        "signature": "(options?: FocusOptions | undefined) => 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"
+      }];
+  }
+  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"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
           },
-          "FocusOptions": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "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."
+            }]
+        }
       },
-      "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"
-          }
+      "doBlur": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Programmatically remove focus from the input. Use this method instead of\n`input.blur()`.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Programmatically remove focus from the input. Use this method instead of\n`input.blur()`.",
-        "tags": []
-      }
-    },
-    "doClick": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "doClick": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Programmatically simulate a click on the input.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Programmatically simulate a click on the input.",
-        "tags": []
-      }
-    },
-    "clear": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "clear": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Clear the input.",
-        "tags": []
+        "docs": {
+          "text": "Clear the input.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "hostElement"; }
-  static get watchers() { return [{
-      "propName": "errors",
-      "methodName": "watchErrorsHandler"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "errors",
+        "methodName": "watchErrorsHandler"
+      }];
+  }
 }
-//# sourceMappingURL=cat-input.js.map
+//# sourceMappingURL=cat-input.js.map