@haiilo/catalyst 8.1.0 → 8.2.0

package/dist/components/cat-icon2.js

@@ -4,40 +4,40 @@ import { c as catIconRegistry } from './cat-icon-registry.js';
 const catIconCss = ":host{display:inline-flex;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}span{display:inline-flex}svg{fill:currentColor;stroke:none;transform-origin:center center;height:1em;width:calc(var(--cat-icon-ratio, 1) * 1em)}.icon-xs svg{font-size:0.75rem}.icon-s svg{font-size:1rem}.icon-m svg{font-size:1.25rem}.icon-l svg{font-size:1.5rem}.icon-xl svg{font-size:1.75rem}";
 
 const CatIcon = /*@__PURE__*/ proxyCustomElement(class CatIcon extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.icon = undefined;
-    this.iconSrc = undefined;
-    this.size = 'm';
-    this.a11yLabel = undefined;
-  }
-  render() {
-    return (h("span", { innerHTML: this.iconSrc || (this.icon ? catIconRegistry.getIcon(this.icon) : ''), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
-        icon: true,
-        [`icon-${this.size}`]: this.size !== 'inline'
-      } }));
-  }
-  static get style() { return catIconCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.icon = undefined;
+        this.iconSrc = undefined;
+        this.size = 'm';
+        this.a11yLabel = undefined;
+    }
+    render() {
+        return (h("span", { innerHTML: this.iconSrc || (this.icon ? catIconRegistry.getIcon(this.icon) : ''), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
+                icon: true,
+                [`icon-${this.size}`]: this.size !== 'inline'
+            } }));
+    }
+    static get style() { return catIconCss; }
 }, [1, "cat-icon", {
-    "icon": [1],
-    "iconSrc": [1, "icon-src"],
-    "size": [1],
-    "a11yLabel": [1, "a11y-label"]
-  }]);
+        "icon": [1],
+        "iconSrc": [1, "icon-src"],
+        "size": [1],
+        "a11yLabel": [1, "a11y-label"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cat-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cat-icon":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CatIcon);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cat-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cat-icon":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CatIcon);
+            }
+            break;
+    } });
 }
 
 export { CatIcon as C, defineCustomElement as d };

package/dist/components/cat-icon2.js.map

@@ -1 +1 @@
-{"file":"cat-icon2.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,mbAAmb;;MCczb,OAAO;;;;;;;gBAcuC,GAAG;;;EAQ5D,MAAM;IACJ,QACE,YACE,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,GAAGA,eAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,gBAC1D,IAAI,CAAC,SAAS,iBACb,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,MAAM,EAC3C,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,IAAI,EAAE,IAAI;QACV,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ;OAC9C,GACK,EACR;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":["icons"],"sources":["src/components/cat-icon/cat-icon.scss?tag=cat-icon&encapsulation=shadow","src/components/cat-icon/cat-icon.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$icon-sizes: (\n  'xl': 1.75rem,\n  'l': 1.5rem,\n  'm': 1.25rem,\n  's': 1rem,\n  'xs': 0.75rem\n);\n\n:host {\n  /**\n   * @prop --cat-icon-ratio: The aspect ratio of the avatar.\n   */\n  display: inline-flex;\n  vertical-align: middle;\n  @include cat-select(none);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nspan {\n  display: inline-flex;\n}\n\nsvg {\n  fill: currentColor;\n  stroke: none;\n  transform-origin: center center;\n  height: 1em;\n  width: calc(var(--cat-icon-ratio, 1) * 1em);\n}\n\n// ----- size\n\n@mixin size($size) {\n  .icon-#{$size} svg {\n    font-size: map.get($icon-sizes, $size);\n  }\n}\n\n@include size('xs');\n@include size('s');\n@include size('m');\n@include size('l');\n@include size('xl');\n","import { Component, h, Prop } from '@stencil/core';\nimport { catIconRegistry as icons } from './cat-icon-registry';\n\n/**\n * Icons are used to provide additional meaning or in places where text label\n * doesn't fit.\n *\n * @part icon - The span element wrapping the SVG icon.\n */\n@Component({\n  tag: 'cat-icon',\n  styleUrl: 'cat-icon.scss',\n  shadow: true\n})\nexport class CatIcon {\n  /**\n   * The name of the icon.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * The SVG source of the icon. This takes precenedence over the `icon` name.\n   */\n  @Prop() iconSrc?: string;\n\n  /**\n   * The size of the icon.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline' = 'm';\n\n  /**\n   * Adds accessible label for the icon that is only shown for screen\n   * readers. The `aria-hidden` attribute will be set if no label is present.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  render() {\n    return (\n      <span\n        innerHTML={this.iconSrc || (this.icon ? icons.getIcon(this.icon) : '')}\n        aria-label={this.a11yLabel}\n        aria-hidden={this.a11yLabel ? null : 'true'}\n        part=\"icon\"\n        class={{\n          icon: true,\n          [`icon-${this.size}`]: this.size !== 'inline'\n        }}\n      ></span>\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-icon2.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,mbAAmb;;MCczb,OAAO;;;;;;;oBAcuC,GAAG;;;IAQ5D,MAAM;QACJ,QACE,YACE,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,GAAGA,eAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,gBAC1D,IAAI,CAAC,SAAS,iBACb,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,MAAM,EAC3C,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,IAAI,EAAE,IAAI;gBACV,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ;aAC9C,GACK,EACR;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":["icons"],"sources":["src/components/cat-icon/cat-icon.scss?tag=cat-icon&encapsulation=shadow","src/components/cat-icon/cat-icon.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$icon-sizes: (\n  'xl': 1.75rem,\n  'l': 1.5rem,\n  'm': 1.25rem,\n  's': 1rem,\n  'xs': 0.75rem\n);\n\n:host {\n  /**\n   * @prop --cat-icon-ratio: The aspect ratio of the avatar.\n   */\n  display: inline-flex;\n  vertical-align: middle;\n  @include cat-select(none);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nspan {\n  display: inline-flex;\n}\n\nsvg {\n  fill: currentColor;\n  stroke: none;\n  transform-origin: center center;\n  height: 1em;\n  width: calc(var(--cat-icon-ratio, 1) * 1em);\n}\n\n// ----- size\n\n@mixin size($size) {\n  .icon-#{$size} svg {\n    font-size: map.get($icon-sizes, $size);\n  }\n}\n\n@include size('xs');\n@include size('s');\n@include size('m');\n@include size('l');\n@include size('xl');\n","import { Component, h, Prop } from '@stencil/core';\nimport { catIconRegistry as icons } from './cat-icon-registry';\n\n/**\n * Icons are used to provide additional meaning or in places where text label\n * doesn't fit.\n *\n * @part icon - The span element wrapping the SVG icon.\n */\n@Component({\n  tag: 'cat-icon',\n  styleUrl: 'cat-icon.scss',\n  shadow: true\n})\nexport class CatIcon {\n  /**\n   * The name of the icon.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * The SVG source of the icon. This takes precenedence over the `icon` name.\n   */\n  @Prop() iconSrc?: string;\n\n  /**\n   * The size of the icon.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline' = 'm';\n\n  /**\n   * Adds accessible label for the icon that is only shown for screen\n   * readers. The `aria-hidden` attribute will be set if no label is present.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  render() {\n    return (\n      <span\n        innerHTML={this.iconSrc || (this.icon ? icons.getIcon(this.icon) : '')}\n        aria-label={this.a11yLabel}\n        aria-hidden={this.a11yLabel ? null : 'true'}\n        part=\"icon\"\n        class={{\n          icon: true,\n          [`icon-${this.size}`]: this.size !== 'inline'\n        }}\n      ></span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-input.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface CatInput extends Components.CatInput, HTMLElement {}
 export const CatInput: {
-  prototype: CatInput;
-  new (): CatInput;
+    prototype: CatInput;
+    new (): CatInput;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/cat-input2.js

@@ -11,227 +11,227 @@ const catInputCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-s
 
 let nextUniqueId = 0;
 const CatInput = /*@__PURE__*/ proxyCustomElement(class CatInput extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.catChange = createEvent(this, "catChange", 7);
-    this.catFocus = createEvent(this, "catFocus", 7);
-    this.catBlur = createEvent(this, "catBlur", 7);
-    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) {
-      loglevel.warn('[A11y] Missing ARIA label on input', this);
-    }
-  }
-  /**
-   * 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;
-    }
-    else {
-      this.errorMapSrc = Array.isArray(value)
-        ? value.reduce((acc, err) => ({ ...acc, [err]: undefined }), {})
-        : value === true
-          ? {}
-          : value || undefined;
-      this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();
-    }
-  }
-  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" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.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": catI18nRegistry.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();
-    }
-  }
-  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;
-    }
-    return false;
-  }
-  showErrorsIfNoFocus() {
-    const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;
-    if (!hasFocus) {
-      this.showErrors();
-    }
-  }
-  findSiblingInput(node) {
-    if (node instanceof HTMLInputElement) {
-      return node;
-    }
-    else if (node?.nextSibling) {
-      return this.findSiblingInput(node.nextSibling);
-    }
-    return undefined;
-  }
-  get hostElement() { return this; }
-  static get watchers() { return {
-    "errors": ["onErrorsChanged"]
-  }; }
-  static get style() { return catInputCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.catChange = createEvent(this, "catChange", 7);
+        this.catFocus = createEvent(this, "catFocus", 7);
+        this.catBlur = createEvent(this, "catBlur", 7);
+        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) {
+            loglevel.warn('[A11y] Missing ARIA label on input', this);
+        }
+    }
+    /**
+     * 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;
+        }
+        else {
+            this.errorMapSrc = Array.isArray(value)
+                ? value.reduce((acc, err) => ({ ...acc, [err]: undefined }), {})
+                : value === true
+                    ? {}
+                    : value || undefined;
+            this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();
+        }
+    }
+    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" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.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": catI18nRegistry.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();
+        }
+    }
+    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;
+        }
+        return false;
+    }
+    showErrorsIfNoFocus() {
+        const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;
+        if (!hasFocus) {
+            this.showErrors();
+        }
+    }
+    findSiblingInput(node) {
+        if (node instanceof HTMLInputElement) {
+            return node;
+        }
+        else if (node?.nextSibling) {
+            return this.findSiblingInput(node.nextSibling);
+        }
+        return undefined;
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "errors": ["onErrorsChanged"]
+    }; }
+    static get style() { return catInputCss; }
 }, [1, "cat-input", {
-    "requiredMarker": [1, "required-marker"],
-    "horizontal": [4],
-    "autoComplete": [1, "auto-complete"],
-    "clearable": [4],
-    "disabled": [4],
-    "hint": [1],
-    "icon": [1],
-    "iconRight": [4, "icon-right"],
-    "identifier": [1],
-    "label": [1],
-    "labelHidden": [4, "label-hidden"],
-    "max": [8],
-    "maxLength": [2, "max-length"],
-    "min": [8],
-    "minLength": [2, "min-length"],
-    "name": [1],
-    "placeholder": [1],
-    "textPrefix": [1, "text-prefix"],
-    "textSuffix": [1, "text-suffix"],
-    "readonly": [4],
-    "required": [4],
-    "round": [4],
-    "type": [1],
-    "value": [1025],
-    "errors": [4],
-    "errorUpdate": [8, "error-update"],
-    "nativeAttributes": [16],
-    "hasSlottedLabel": [32],
-    "hasSlottedHint": [32],
-    "errorMap": [32],
-    "doFocus": [64],
-    "doBlur": [64],
-    "clear": [64]
-  }, undefined, {
-    "errors": ["onErrorsChanged"]
-  }]);
+        "requiredMarker": [1, "required-marker"],
+        "horizontal": [4],
+        "autoComplete": [1, "auto-complete"],
+        "clearable": [4],
+        "disabled": [4],
+        "hint": [1],
+        "icon": [1],
+        "iconRight": [4, "icon-right"],
+        "identifier": [1],
+        "label": [1],
+        "labelHidden": [4, "label-hidden"],
+        "max": [8],
+        "maxLength": [2, "max-length"],
+        "min": [8],
+        "minLength": [2, "min-length"],
+        "name": [1],
+        "placeholder": [1],
+        "textPrefix": [1, "text-prefix"],
+        "textSuffix": [1, "text-suffix"],
+        "readonly": [4],
+        "required": [4],
+        "round": [4],
+        "type": [1],
+        "value": [1025],
+        "errors": [4],
+        "errorUpdate": [8, "error-update"],
+        "nativeAttributes": [16],
+        "hasSlottedLabel": [32],
+        "hasSlottedHint": [32],
+        "errorMap": [32],
+        "doFocus": [64],
+        "doBlur": [64],
+        "clear": [64]
+    }, undefined, {
+        "errors": ["onErrorsChanged"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cat-input", "cat-button", "cat-icon", "cat-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cat-input":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CatInput);
-      }
-      break;
-    case "cat-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "cat-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "cat-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cat-input", "cat-button", "cat-icon", "cat-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cat-input":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CatInput);
+            }
+            break;
+        case "cat-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "cat-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "cat-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { CatInput as C, defineCustomElement as d };