@haiilo/catalyst 5.2.1 → 5.2.3

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

@@ -1,6 +1,7 @@
 import { h, Host } from '@stencil/core';
 import autosize from 'autosize';
 import log from 'loglevel';
+import { coerceBoolean, coerceNumber } from '../../utils/coerce';
 import { CatFormHint } from '../cat-form-hint/cat-form-hint';
 import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
 let nextUniqueId = 0;
@@ -76,7 +77,7 @@ export class CatTextarea {
     this.textarea.click();
   }
   watchErrorsHandler(value) {
-    if (this.errorUpdate === false) {
+    if (!coerceBoolean(this.errorUpdate)) {
       this.errorMap = undefined;
     }
     else {
@@ -85,6 +86,7 @@ export class CatTextarea {
         : value === true
           ? {}
           : value || undefined;
+      this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();
     }
   }
   render() {
@@ -107,18 +109,33 @@ export class CatTextarea {
   onInput(event) {
     this.value = this.textarea.value;
     this.catChange.emit(event);
-    if (typeof this.errorUpdate === 'number') {
-      typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);
-      this.errorUpdateTimeoutId = window.setTimeout(() => (this.errorMap = this.errorMapSrc), this.errorUpdate);
-    }
+    this.showErrorsIfTimeout();
   }
   onFocus(event) {
     this.catFocus.emit(event);
   }
   onBlur(event) {
     this.catBlur.emit(event);
-    if (this.errorUpdate !== false) {
-      this.errorMap = this.errorMapSrc;
+    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.textarea;
+    if (!hasFocus) {
+      this.showErrors();
     }
   }
   static get is() { return "cat-textarea"; }

package/dist/collection/components/cat-textarea/cat-textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-textarea.js","sourceRoot":"","sources":["../../../src/components/cat-textarea/cat-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport autosize from 'autosize';\nimport log from 'loglevel';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\n/**\n * Textarea specifies a control that allows user to write text over multiple\n * rows. Used when the expected user input is long. For shorter input, use the\n * input component.\n *\n * @slot hint - Optional hint element to be displayed with the textarea.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-textarea',\n  styleUrl: 'cat-textarea.scss',\n  shadow: true\n})\nexport class CatTextarea {\n  private readonly _id = `cat-textarea-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private textarea!: HTMLTextAreaElement;\n  private errorMapSrc?: ErrorMap;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  @State() errorMap?: ErrorMap;\n\n  /**\n   * Whether the label need a marker to shown if the textarea is required or optional.\n   */\n  @Prop() requiredMarker: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * Whether the textarea is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the textarea.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label for the textarea.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * A maximum length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * A minimum length (number of characters) for textual values.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Specifies the initial number of lines in the textarea.\n   */\n  @Prop() rows = 3;\n\n  /**\n   * The initial value of the control.\n   */\n  @Prop({ mutable: true }) value?: string | number;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors on change with the given delay in milliseconds.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * Attributes that will be added to the native HTML textarea element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the textarea received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the textarea loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.watchErrorsHandler(this.errors);\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on textarea', this);\n    }\n  }\n\n  componentDidLoad(): void {\n    autosize(this.textarea);\n  }\n\n  /**\n   * Programmatically move focus to the textarea. Use this method instead of\n   * `textarea.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.textarea.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the textarea. Use this method instead of\n   * `textarea.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.textarea.blur();\n  }\n\n  /**\n   * Programmatically simulate a click on the textarea.\n   */\n  @Method()\n  async doClick(): Promise<void> {\n    this.textarea.click();\n  }\n\n  @Watch('errors')\n  watchErrorsHandler(value?: boolean | string[] | ErrorMap) {\n    if (this.errorUpdate === false) {\n      this.errorMap = undefined;\n    } else {\n      this.errorMapSrc = Array.isArray(value)\n        ? (value as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n        : value === true\n        ? {}\n        : value || undefined;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'textarea-field': true,\n            'textarea-horizontal': this.horizontal\n          }}\n        >\n          <div\n            class={{\n              hidden: this.labelHidden,\n              'label-container': true\n            }}\n          >\n            {(this.hasSlottedLabel || this.label) && (\n              <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n                <span class=\"label-wrapper\" part=\"label\">\n                  {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n                  <div class=\"label-metadata\">\n                    {!this.required && this.requiredMarker.startsWith('optional') && (\n                      <span class=\"label-optional\" aria-hidden=\"true\">\n                        ({i18n.t('input.optional')})\n                      </span>\n                    )}\n                    {this.required && this.requiredMarker.startsWith('required') && (\n                      <span class=\"label-optional\" aria-hidden=\"true\">\n                        ({i18n.t('input.required')})\n                      </span>\n                    )}\n                    {this.maxLength && (\n                      <div class=\"label-character-count\" aria-hidden=\"true\">\n                        {this.value?.toString().length ?? 0}/{this.maxLength}\n                      </div>\n                    )}\n                  </div>\n                </span>\n              </label>\n            )}\n          </div>\n          <div class=\"textarea-container\">\n            <div\n              class={{\n                'textarea-wrapper': true,\n                'textarea-disabled': this.disabled,\n                'textarea-invalid': this.invalid\n              }}\n            >\n              <textarea\n                {...this.nativeAttributes}\n                ref={el => (this.textarea = el as HTMLTextAreaElement)}\n                id={this.id}\n                disabled={this.disabled}\n                maxlength={this.maxLength}\n                minlength={this.minLength}\n                name={this.name}\n                placeholder={this.placeholder}\n                readonly={this.readonly}\n                required={this.required}\n                rows={this.rows}\n                value={this.value}\n                onInput={this.onInput.bind(this)}\n                onFocus={this.onFocus.bind(this)}\n                onBlur={this.onBlur.bind(this)}\n                aria-invalid={this.invalid ? 'true' : undefined}\n                aria-describedby={this.hint?.length ? this.id + '-hint' : undefined}\n              ></textarea>\n              {this.invalid && (\n                <cat-icon\n                  icon=\"alert-circle-outlined\"\n                  class=\"icon-suffix cat-text-danger\"\n                  size=\"l\"\n                  onClick={() => this.textarea.focus()}\n                ></cat-icon>\n              )}\n            </div>\n            {(this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (\n              <CatFormHint\n                id={this.id}\n                hint={this.hint}\n                slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n                errorMap={this.errorMap}\n              />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  private get invalid() {\n    return !!this.errorMap;\n  }\n\n  private errorUpdateTimeoutId?: number;\n  private onInput(event: InputEvent) {\n    this.value = this.textarea.value;\n    this.catChange.emit(event);\n    if (typeof this.errorUpdate === 'number') {\n      typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n      this.errorUpdateTimeoutId = window.setTimeout(() => (this.errorMap = this.errorMapSrc), this.errorUpdate);\n    }\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n    if (this.errorUpdate !== false) {\n      this.errorMap = this.errorMapSrc;\n    }\n  }\n}\n"]}
+{"version":3,"file":"cat-textarea.js","sourceRoot":"","sources":["../../../src/components/cat-textarea/cat-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport autosize from 'autosize';\nimport log from 'loglevel';\nimport { coerceBoolean, coerceNumber } from '../../utils/coerce';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\n/**\n * Textarea specifies a control that allows user to write text over multiple\n * rows. Used when the expected user input is long. For shorter input, use the\n * input component.\n *\n * @slot hint - Optional hint element to be displayed with the textarea.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-textarea',\n  styleUrl: 'cat-textarea.scss',\n  shadow: true\n})\nexport class CatTextarea {\n  private readonly _id = `cat-textarea-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private textarea!: HTMLTextAreaElement;\n  private errorMapSrc?: ErrorMap;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  @State() errorMap?: ErrorMap;\n\n  /**\n   * Whether the label need a marker to shown if the textarea is required or optional.\n   */\n  @Prop() requiredMarker: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * Whether the textarea is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the textarea.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label for the textarea.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * A maximum length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * A minimum length (number of characters) for textual values.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Specifies the initial number of lines in the textarea.\n   */\n  @Prop() rows = 3;\n\n  /**\n   * The initial value of the control.\n   */\n  @Prop({ mutable: true }) value?: string | number;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors on change with the given delay in milliseconds.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * Attributes that will be added to the native HTML textarea element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the textarea received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the textarea loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.watchErrorsHandler(this.errors);\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on textarea', this);\n    }\n  }\n\n  componentDidLoad(): void {\n    autosize(this.textarea);\n  }\n\n  /**\n   * Programmatically move focus to the textarea. Use this method instead of\n   * `textarea.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.textarea.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the textarea. Use this method instead of\n   * `textarea.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.textarea.blur();\n  }\n\n  /**\n   * Programmatically simulate a click on the textarea.\n   */\n  @Method()\n  async doClick(): Promise<void> {\n    this.textarea.click();\n  }\n\n  @Watch('errors')\n  watchErrorsHandler(value?: boolean | string[] | ErrorMap) {\n    if (!coerceBoolean(this.errorUpdate)) {\n      this.errorMap = undefined;\n    } else {\n      this.errorMapSrc = Array.isArray(value)\n        ? (value as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n        : value === true\n        ? {}\n        : value || undefined;\n      this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'textarea-field': true,\n            'textarea-horizontal': this.horizontal\n          }}\n        >\n          <div\n            class={{\n              hidden: this.labelHidden,\n              'label-container': true\n            }}\n          >\n            {(this.hasSlottedLabel || this.label) && (\n              <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n                <span class=\"label-wrapper\" part=\"label\">\n                  {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n                  <div class=\"label-metadata\">\n                    {!this.required && this.requiredMarker.startsWith('optional') && (\n                      <span class=\"label-optional\" aria-hidden=\"true\">\n                        ({i18n.t('input.optional')})\n                      </span>\n                    )}\n                    {this.required && this.requiredMarker.startsWith('required') && (\n                      <span class=\"label-optional\" aria-hidden=\"true\">\n                        ({i18n.t('input.required')})\n                      </span>\n                    )}\n                    {this.maxLength && (\n                      <div class=\"label-character-count\" aria-hidden=\"true\">\n                        {this.value?.toString().length ?? 0}/{this.maxLength}\n                      </div>\n                    )}\n                  </div>\n                </span>\n              </label>\n            )}\n          </div>\n          <div class=\"textarea-container\">\n            <div\n              class={{\n                'textarea-wrapper': true,\n                'textarea-disabled': this.disabled,\n                'textarea-invalid': this.invalid\n              }}\n            >\n              <textarea\n                {...this.nativeAttributes}\n                ref={el => (this.textarea = el as HTMLTextAreaElement)}\n                id={this.id}\n                disabled={this.disabled}\n                maxlength={this.maxLength}\n                minlength={this.minLength}\n                name={this.name}\n                placeholder={this.placeholder}\n                readonly={this.readonly}\n                required={this.required}\n                rows={this.rows}\n                value={this.value}\n                onInput={this.onInput.bind(this)}\n                onFocus={this.onFocus.bind(this)}\n                onBlur={this.onBlur.bind(this)}\n                aria-invalid={this.invalid ? 'true' : undefined}\n                aria-describedby={this.hint?.length ? this.id + '-hint' : undefined}\n              ></textarea>\n              {this.invalid && (\n                <cat-icon\n                  icon=\"alert-circle-outlined\"\n                  class=\"icon-suffix cat-text-danger\"\n                  size=\"l\"\n                  onClick={() => this.textarea.focus()}\n                ></cat-icon>\n              )}\n            </div>\n            {(this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (\n              <CatFormHint\n                id={this.id}\n                hint={this.hint}\n                slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n                errorMap={this.errorMap}\n              />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  private get invalid() {\n    return !!this.errorMap;\n  }\n\n  private onInput(event: InputEvent) {\n    this.value = this.textarea.value;\n    this.catChange.emit(event);\n    this.showErrorsIfTimeout();\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n    if (coerceBoolean(this.errorUpdate)) {\n      this.showErrors();\n    }\n  }\n\n  private showErrors() {\n    this.errorMap = this.errorMapSrc;\n  }\n\n  private errorUpdateTimeoutId?: number;\n  private showErrorsIfTimeout() {\n    const errorUpdate = coerceNumber(this.errorUpdate, null);\n    if (errorUpdate !== null) {\n      typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n      this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n      return true;\n    }\n    return false;\n  }\n\n  private showErrorsIfNoFocus() {\n    const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.textarea;\n    if (!hasFocus) {\n      this.showErrors();\n    }\n  }\n}\n"]}

package/dist/components/cat-input.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { l as loglevel } from './loglevel.js';
+import { c as coerceBoolean, a as coerceNumber } from './coerce.js';
 import { C as CatFormHint } from './cat-form-hint.js';
 import { c as catI18nRegistry } from './cat-i18n-registry.js';
 import { d as defineCustomElement$4 } from './cat-button2.js';
@@ -90,7 +91,7 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.value = '';
   }
   watchErrorsHandler(value) {
-    if (this.errorUpdate === false) {
+    if (!coerceBoolean(this.errorUpdate)) {
       this.errorMap = undefined;
     }
     else {
@@ -98,13 +99,8 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         ? value.reduce((acc, err) => (Object.assign(Object.assign({}, acc), { [err]: undefined })), {})
         : value === true
           ? {}
-          : Object.assign({}, value) || undefined;
-      if (typeof this.errorUpdate === 'number') {
-        this.showErrorAfterTimeout(this.errorUpdate);
-      }
-      else {
-        this.errorMap = this.errorMapSrc;
-      }
+          : value || undefined;
+      this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();
     }
   }
   render() {
@@ -130,22 +126,34 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   onInput(event) {
     this.value = this.input.value;
     this.catChange.emit(event);
-    if (typeof this.errorUpdate === 'number') {
-      this.showErrorAfterTimeout(this.errorUpdate);
-    }
+    this.showErrorsIfTimeout();
   }
   onFocus(event) {
     this.catFocus.emit(event);
   }
   onBlur(event) {
     this.catBlur.emit(event);
-    if (this.errorUpdate !== false) {
-      this.errorMap = this.errorMapSrc;
+    if (coerceBoolean(this.errorUpdate)) {
+      this.showErrors();
     }
   }
-  showErrorAfterTimeout(timeout) {
-    typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);
-    this.errorUpdateTimeoutId = window.setTimeout(() => (this.errorMap = this.errorMapSrc), timeout);
+  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();
+    }
   }
   get hostElement() { return this; }
   static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"cat-input.js","mappings":"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","names":["CatInput","log","i18n"],"sources":["./src/components/cat-input/cat-input.scss?tag=cat-input&encapsulation=shadow","./src/components/cat-input/cat-input.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n@use 'utils/color';\n@use '_snippets/form-label';\n\n:host {\n  display: flex;\n  @include cat-body('m');\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.input-field,\n.input-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  flex: 1 1 auto;\n}\n\n.input-field.input-horizontal {\n  flex-direction: row;\n  gap: 1rem;\n}\n\n.input-wrapper {\n  display: flex;\n  align-items: stretch;\n  gap: 0.75rem;\n  padding: 0 0.75rem;\n  height: form-label.$cat-input-height;\n  overflow: hidden;\n  background: cat-token('color.ui.background.input');\n  border-radius: cat-border-radius('m');\n  box-shadow: 0 0 0 1px cat-token('color.ui.border.dark');\n  transition: box-shadow cat-token('time.transition.s') linear;\n\n  &.input-round {\n    border-radius: 10rem;\n  }\n\n  &.input-disabled {\n    background: cat-token('color.ui.background.muted');\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &:not(.input-disabled):hover {\n    box-shadow: 0 0 0 2px cat-token('color.ui.border.dark');\n\n    &.input-invalid {\n      box-shadow: 0 0 0 2px cat-token('color.theme.danger.bg', 0.2);\n    }\n  }\n\n  &:not(.input-disabled):focus-within {\n    outline: 2px solid cat-token('color.ui.border.focus');\n\n    &.input-invalid {\n      outline: 2px solid cat-token('color.theme.danger.bg', 0.2);\n    }\n  }\n\n  &.input-invalid {\n    box-shadow: 0 0 0 1px cat-token('color.theme.danger.bg', 0.2);\n  }\n\n  /* stylelint-disable property-no-vendor-prefix */\n  &:has(input:-webkit-autofill) {\n    &,\n    &:hover,\n    &:focus {\n      background-color: cat-token('color.ui.background.inputAutofill');\n    }\n  }\n  /* stylelint-enable property-no-vendor-prefix */\n}\n\n.text-prefix,\n.text-suffix {\n  display: inline-flex;\n  align-items: center;\n  @include cat-select(none);\n}\n\n.text-prefix {\n  border-right: 1px solid cat-token('color.ui.border.dark');\n  padding-right: 0.75rem;\n}\n\n.text-suffix {\n  border-left: 1px solid cat-token('color.ui.border.dark');\n  padding-left: 0.75rem;\n}\n\n.icon-prefix,\n.icon-suffix {\n  align-self: center;\n}\n\n.input-inner-wrapper {\n  display: flex;\n  align-items: center;\n  position: relative;\n  flex: 1 1 auto;\n}\n\ninput {\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  min-width: 0;\n  border: none;\n  outline: none;\n  background: none;\n\n  .input-disabled & {\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &.has-clearable {\n    padding-right: 1.5rem;\n  }\n\n  &::placeholder {\n    color: cat-token('color.ui.font.muted');\n  }\n\n  /* stylelint-disable property-no-vendor-prefix */\n  &:-webkit-autofill {\n    &,\n    &:hover,\n    &:focus {\n      -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset;\n    }\n  }\n  /* stylelint-enable property-no-vendor-prefix */\n}\n\n.clearable {\n  position: absolute;\n  top: calc(50% - 1rem);\n  right: -0.5rem;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\n\nlet nextUniqueId = 0;\n\n/**\n * Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n *\n * @slot hint - Optional hint element to be displayed with the input.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n */\n@Component({\n  tag: 'cat-input',\n  styleUrl: 'cat-input.scss',\n  shadow: true\n})\nexport class CatInput {\n  private readonly _id = `cat-input-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n  private errorMapSrc?: ErrorMap;\n  private errorUpdateTimeoutId?: number;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  @State() errorMap?: ErrorMap;\n\n  /**\n   * Whether the label need a marker to shown if the input is required or optional.\n   */\n  @Prop() requiredMarker: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * Hint for form autofill feature.\n   */\n  @Prop() autoComplete?: string;\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the input.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * The name of an icon to be displayed in the input.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * A maximum value for date, time and numeric values.\n   */\n  @Prop() max?: number | string;\n\n  /**\n   * A maximum length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * A minimum value for date, time and numeric values.\n   */\n  @Prop() min?: number | string;\n\n  /**\n   * A minimum length (number of characters) for textual values.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * A textual prefix to be displayed in the input.\n   */\n  @Prop() textPrefix?: string;\n\n  /**\n   * A textual suffix to be displayed in the input.\n   */\n  @Prop() textSuffix?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Use round input edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Type of form control.\n   */\n  @Prop() type: InputType = 'text';\n\n  /**\n   * The value of the control.\n   */\n  @Prop({ mutable: true }) value?: string | number;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors on change with the given delay in milliseconds.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the input received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.watchErrorsHandler(this.errors);\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on input', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the input. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the input. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  /**\n   * Programmatically simulate a click on the input.\n   */\n  @Method()\n  async doClick(): Promise<void> {\n    this.input.click();\n  }\n\n  /**\n   * Clear the input.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.value = '';\n  }\n\n  @Watch('errors')\n  watchErrorsHandler(value?: boolean | string[] | ErrorMap) {\n    if (this.errorUpdate === false) {\n      this.errorMap = undefined;\n    } else {\n      this.errorMapSrc = Array.isArray(value)\n        ? (value as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n        : value === true\n        ? {}\n        : { ...value } || undefined;\n      if (typeof this.errorUpdate === 'number') {\n        this.showErrorAfterTimeout(this.errorUpdate);\n      } else {\n        this.errorMap = this.errorMapSrc;\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class={{\n          'input-field': true,\n          'input-horizontal': this.horizontal\n        }}\n      >\n        <div\n          class={{\n            hidden: this.labelHidden,\n            'label-container': true\n          }}\n        >\n          {(this.hasSlottedLabel || this.label) && (\n            <label htmlFor={this.id}>\n              <span class=\"label-wrapper\" part=\"label\">\n                {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n                <div class=\"label-metadata\">\n                  {!this.required && this.requiredMarker.startsWith('optional') && (\n                    <span class=\"label-optional\" aria-hidden=\"true\">\n                      ({i18n.t('input.optional')})\n                    </span>\n                  )}\n                  {this.required && this.requiredMarker.startsWith('required') && (\n                    <span class=\"label-optional\" aria-hidden=\"true\">\n                      ({i18n.t('input.required')})\n                    </span>\n                  )}\n                  {this.maxLength && (\n                    <div class=\"label-character-count\" aria-hidden=\"true\">\n                      {this.value?.toString().length ?? 0}/{this.maxLength}\n                    </div>\n                  )}\n                </div>\n              </span>\n            </label>\n          )}\n        </div>\n        <div class=\"input-container\">\n          <div\n            class={{\n              'input-wrapper': true,\n              'input-round': this.round,\n              'input-disabled': this.disabled,\n              'input-invalid': this.invalid\n            }}\n            onClick={() => this.input.focus()}\n          >\n            {this.textPrefix && (\n              <span class=\"text-prefix\" part=\"prefix\">\n                {this.textPrefix}\n              </span>\n            )}\n            {this.icon && !this.iconRight && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n            <div class=\"input-inner-wrapper\">\n              <input\n                {...this.nativeAttributes}\n                ref={el => (this.input = el as HTMLInputElement)}\n                id={this.id}\n                class={{\n                  'has-clearable': this.clearable && !this.disabled\n                }}\n                autocomplete={this.autoComplete}\n                disabled={this.disabled}\n                max={this.max}\n                maxlength={this.maxLength}\n                min={this.min}\n                minlength={this.minLength}\n                name={this.name}\n                placeholder={this.placeholder}\n                readonly={this.readonly}\n                required={this.required}\n                type={this.type}\n                value={this.value}\n                onInput={this.onInput.bind(this)}\n                onFocus={this.onFocus.bind(this)}\n                onBlur={this.onBlur.bind(this)}\n                aria-invalid={this.invalid ? 'true' : undefined}\n                aria-describedby={this.hint?.length ? this.id + '-hint' : undefined}\n              ></input>\n              {this.clearable && !this.disabled && this.value && (\n                <cat-button\n                  class=\"clearable\"\n                  icon=\"cross-circle-outlined\"\n                  icon-only=\"true\"\n                  size=\"s\"\n                  variant=\"text\"\n                  a11y-label={i18n.t('input.clear')}\n                  onClick={this.clear.bind(this)}\n                ></cat-button>\n              )}\n            </div>\n            {!this.invalid && this.icon && this.iconRight && (\n              <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>\n            )}\n            {this.invalid && (\n              <cat-icon icon=\"alert-circle-outlined\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>\n            )}\n            {this.textSuffix && (\n              <span class=\"text-suffix\" part=\"suffix\">\n                {this.textSuffix}\n              </span>\n            )}\n          </div>\n          {(this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (\n            <CatFormHint\n              id={this.id}\n              hint={this.hint}\n              slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n              errorMap={this.errorMap}\n            />\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  private get invalid() {\n    return !!this.errorMap;\n  }\n\n  private onInput(event: InputEvent) {\n    this.value = this.input.value;\n    this.catChange.emit(event);\n    if (typeof this.errorUpdate === 'number') {\n      this.showErrorAfterTimeout(this.errorUpdate);\n    }\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n    if (this.errorUpdate !== false) {\n      this.errorMap = this.errorMapSrc;\n    }\n  }\n\n  private showErrorAfterTimeout(timeout: number) {\n    typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n    this.errorUpdateTimeoutId = window.setTimeout(() => (this.errorMap = this.errorMapSrc), timeout);\n  }\n}\n"],"version":3}
+{"file":"cat-input.js","mappings":"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","names":["CatInput","log","i18n"],"sources":["./src/components/cat-input/cat-input.scss?tag=cat-input&encapsulation=shadow","./src/components/cat-input/cat-input.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n@use 'utils/color';\n@use '_snippets/form-label';\n\n:host {\n  display: flex;\n  @include cat-body('m');\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.input-field,\n.input-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  flex: 1 1 auto;\n}\n\n.input-field.input-horizontal {\n  flex-direction: row;\n  gap: 1rem;\n}\n\n.input-wrapper {\n  display: flex;\n  align-items: stretch;\n  gap: 0.75rem;\n  padding: 0 0.75rem;\n  height: form-label.$cat-input-height;\n  overflow: hidden;\n  background: cat-token('color.ui.background.input');\n  border-radius: cat-border-radius('m');\n  box-shadow: 0 0 0 1px cat-token('color.ui.border.dark');\n  transition: box-shadow cat-token('time.transition.s') linear;\n\n  &.input-round {\n    border-radius: 10rem;\n  }\n\n  &.input-disabled {\n    background: cat-token('color.ui.background.muted');\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &:not(.input-disabled):hover {\n    box-shadow: 0 0 0 2px cat-token('color.ui.border.dark');\n\n    &.input-invalid {\n      box-shadow: 0 0 0 2px cat-token('color.theme.danger.bg', 0.2);\n    }\n  }\n\n  &:not(.input-disabled):focus-within {\n    outline: 2px solid cat-token('color.ui.border.focus');\n\n    &.input-invalid {\n      outline: 2px solid cat-token('color.theme.danger.bg', 0.2);\n    }\n  }\n\n  &.input-invalid {\n    box-shadow: 0 0 0 1px cat-token('color.theme.danger.bg', 0.2);\n  }\n\n  /* stylelint-disable property-no-vendor-prefix */\n  &:has(input:-webkit-autofill) {\n    &,\n    &:hover,\n    &:focus {\n      background-color: cat-token('color.ui.background.inputAutofill');\n    }\n  }\n  /* stylelint-enable property-no-vendor-prefix */\n}\n\n.text-prefix,\n.text-suffix {\n  display: inline-flex;\n  align-items: center;\n  @include cat-select(none);\n}\n\n.text-prefix {\n  border-right: 1px solid cat-token('color.ui.border.dark');\n  padding-right: 0.75rem;\n}\n\n.text-suffix {\n  border-left: 1px solid cat-token('color.ui.border.dark');\n  padding-left: 0.75rem;\n}\n\n.icon-prefix,\n.icon-suffix {\n  align-self: center;\n}\n\n.input-inner-wrapper {\n  display: flex;\n  align-items: center;\n  position: relative;\n  flex: 1 1 auto;\n}\n\ninput {\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  min-width: 0;\n  border: none;\n  outline: none;\n  background: none;\n\n  .input-disabled & {\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &.has-clearable {\n    padding-right: 1.5rem;\n  }\n\n  &::placeholder {\n    color: cat-token('color.ui.font.muted');\n  }\n\n  /* stylelint-disable property-no-vendor-prefix */\n  &:-webkit-autofill {\n    &,\n    &:hover,\n    &:focus {\n      -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset;\n    }\n  }\n  /* stylelint-enable property-no-vendor-prefix */\n}\n\n.clearable {\n  position: absolute;\n  top: calc(50% - 1rem);\n  right: -0.5rem;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { coerceBoolean, coerceNumber } from '../../utils/coerce';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\n\nlet nextUniqueId = 0;\n\n/**\n * Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n *\n * @slot hint - Optional hint element to be displayed with the input.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n */\n@Component({\n  tag: 'cat-input',\n  styleUrl: 'cat-input.scss',\n  shadow: true\n})\nexport class CatInput {\n  private readonly _id = `cat-input-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n  private errorMapSrc?: ErrorMap;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  @State() errorMap?: ErrorMap;\n\n  /**\n   * Whether the label need a marker to shown if the input is required or optional.\n   */\n  @Prop() requiredMarker: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * Hint for form autofill feature.\n   */\n  @Prop() autoComplete?: string;\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the input.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * The name of an icon to be displayed in the input.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * A maximum value for date, time and numeric values.\n   */\n  @Prop() max?: number | string;\n\n  /**\n   * A maximum length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * A minimum value for date, time and numeric values.\n   */\n  @Prop() min?: number | string;\n\n  /**\n   * A minimum length (number of characters) for textual values.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * A textual prefix to be displayed in the input.\n   */\n  @Prop() textPrefix?: string;\n\n  /**\n   * A textual suffix to be displayed in the input.\n   */\n  @Prop() textSuffix?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Use round input edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Type of form control.\n   */\n  @Prop() type: InputType = 'text';\n\n  /**\n   * The value of the control.\n   */\n  @Prop({ mutable: true }) value?: string | number;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors on change with the given delay in milliseconds.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the input received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.watchErrorsHandler(this.errors);\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on input', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the input. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the input. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  /**\n   * Programmatically simulate a click on the input.\n   */\n  @Method()\n  async doClick(): Promise<void> {\n    this.input.click();\n  }\n\n  /**\n   * Clear the input.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.value = '';\n  }\n\n  @Watch('errors')\n  watchErrorsHandler(value?: boolean | string[] | ErrorMap) {\n    if (!coerceBoolean(this.errorUpdate)) {\n      this.errorMap = undefined;\n    } else {\n      this.errorMapSrc = Array.isArray(value)\n        ? (value as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n        : value === true\n        ? {}\n        : value || undefined;\n      this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class={{\n          'input-field': true,\n          'input-horizontal': this.horizontal\n        }}\n      >\n        <div\n          class={{\n            hidden: this.labelHidden,\n            'label-container': true\n          }}\n        >\n          {(this.hasSlottedLabel || this.label) && (\n            <label htmlFor={this.id}>\n              <span class=\"label-wrapper\" part=\"label\">\n                {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n                <div class=\"label-metadata\">\n                  {!this.required && this.requiredMarker.startsWith('optional') && (\n                    <span class=\"label-optional\" aria-hidden=\"true\">\n                      ({i18n.t('input.optional')})\n                    </span>\n                  )}\n                  {this.required && this.requiredMarker.startsWith('required') && (\n                    <span class=\"label-optional\" aria-hidden=\"true\">\n                      ({i18n.t('input.required')})\n                    </span>\n                  )}\n                  {this.maxLength && (\n                    <div class=\"label-character-count\" aria-hidden=\"true\">\n                      {this.value?.toString().length ?? 0}/{this.maxLength}\n                    </div>\n                  )}\n                </div>\n              </span>\n            </label>\n          )}\n        </div>\n        <div class=\"input-container\">\n          <div\n            class={{\n              'input-wrapper': true,\n              'input-round': this.round,\n              'input-disabled': this.disabled,\n              'input-invalid': this.invalid\n            }}\n            onClick={() => this.input.focus()}\n          >\n            {this.textPrefix && (\n              <span class=\"text-prefix\" part=\"prefix\">\n                {this.textPrefix}\n              </span>\n            )}\n            {this.icon && !this.iconRight && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n            <div class=\"input-inner-wrapper\">\n              <input\n                {...this.nativeAttributes}\n                ref={el => (this.input = el as HTMLInputElement)}\n                id={this.id}\n                class={{\n                  'has-clearable': this.clearable && !this.disabled\n                }}\n                autocomplete={this.autoComplete}\n                disabled={this.disabled}\n                max={this.max}\n                maxlength={this.maxLength}\n                min={this.min}\n                minlength={this.minLength}\n                name={this.name}\n                placeholder={this.placeholder}\n                readonly={this.readonly}\n                required={this.required}\n                type={this.type}\n                value={this.value}\n                onInput={this.onInput.bind(this)}\n                onFocus={this.onFocus.bind(this)}\n                onBlur={this.onBlur.bind(this)}\n                aria-invalid={this.invalid ? 'true' : undefined}\n                aria-describedby={this.hint?.length ? this.id + '-hint' : undefined}\n              ></input>\n              {this.clearable && !this.disabled && this.value && (\n                <cat-button\n                  class=\"clearable\"\n                  icon=\"cross-circle-outlined\"\n                  icon-only=\"true\"\n                  size=\"s\"\n                  variant=\"text\"\n                  a11y-label={i18n.t('input.clear')}\n                  onClick={this.clear.bind(this)}\n                ></cat-button>\n              )}\n            </div>\n            {!this.invalid && this.icon && this.iconRight && (\n              <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>\n            )}\n            {this.invalid && (\n              <cat-icon icon=\"alert-circle-outlined\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>\n            )}\n            {this.textSuffix && (\n              <span class=\"text-suffix\" part=\"suffix\">\n                {this.textSuffix}\n              </span>\n            )}\n          </div>\n          {(this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (\n            <CatFormHint\n              id={this.id}\n              hint={this.hint}\n              slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n              errorMap={this.errorMap}\n            />\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  private get invalid() {\n    return !!this.errorMap;\n  }\n\n  private onInput(event: InputEvent) {\n    this.value = this.input.value;\n    this.catChange.emit(event);\n    this.showErrorsIfTimeout();\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n    if (coerceBoolean(this.errorUpdate)) {\n      this.showErrors();\n    }\n  }\n\n  private showErrors() {\n    this.errorMap = this.errorMapSrc;\n  }\n\n  private errorUpdateTimeoutId?: number;\n  private showErrorsIfTimeout() {\n    const errorUpdate = coerceNumber(this.errorUpdate, null);\n    if (errorUpdate !== null) {\n      typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n      this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n      return true;\n    }\n    return false;\n  }\n\n  private showErrorsIfNoFocus() {\n    const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;\n    if (!hasFocus) {\n      this.showErrors();\n    }\n  }\n}\n"],"version":3}

package/dist/components/cat-select2.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as autoUpdate, c as computePosition, o as offset } from './floating-ui.dom.esm.js';
 import { l as loglevel } from './loglevel.js';
+import { c as coerceBoolean, a as coerceNumber } from './coerce.js';
 import { C as CatFormHint } from './cat-form-hint.js';
 import { c as catI18nRegistry } from './cat-i18n-registry.js';
 import { d as defineCustomElement$7 } from './cat-avatar2.js';
@@ -319,17 +320,6 @@ var autosizeInput = function (element, options) {
   }
 };
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-function coerceBoolean(value) {
-  return value != null && `${value}` !== 'false';
-}
-function coerceNumber(value, fallbackValue = 0) {
-  return isNumberValue(value) ? Number(value) : fallbackValue;
-}
-function isNumberValue(value) {
-  return !isNaN(parseFloat(value)) && !isNaN(Number(value));
-}
-
 const catSelectCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.cat-bg-primary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 0.13s}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important}.cat-bg-primaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 0.13s}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important}.cat-bg-secondary-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 0.13s}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important}.cat-bg-secondaryInverted-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 0.13s}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg-, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important}.cat-bg-success-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 0.13s}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important}.cat-bg-warning-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 0.13s}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important}.cat-bg-danger-hover{transition:background-color 0.13s, color 0.13s}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 0.13s}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}:host{display:flex;flex-direction:column;gap:0.5rem;line-height:1.25rem;position:relative;margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.select-wrapper{display:flex;align-items:flex-start;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear;padding:0.25rem;}.select-wrapper:not(.select-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.select-wrapper:not(.select-disabled):hover.select-invalid{box-shadow:0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.select-wrapper:not(.select-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}.select-wrapper:not(.select-disabled):focus-within.select-invalid{outline:2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.select-wrapper.select-invalid{box-shadow:0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}.select-wrapper:has(input:-webkit-autofill),.select-wrapper:has(input:-webkit-autofill):hover,.select-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}:host(.cat-error) .select-wrapper{box-shadow:0 0 0 1px rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .select-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-danger-bg, 217, 52, 13))}.select-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108));pointer-events:none}.select-wrapper-inner{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:0.25rem;min-width:0}.select-wrapper-inner>cat-avatar{display:inline-block;padding-left:0.5rem}.select-wrapper-inner>cat-avatar+.select-input{padding-left:0.25rem}.select-wrapper-inner cat-avatar{--cat-avatar-size:1.25rem;--cat-avatar-font-size:0.5rem}.select-input{font:inherit;background:none;border:none;outline:none;padding:0.375rem 0.5rem;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.select-disabled .select-input{cursor:inherit}.select-pills{display:contents}.pill{display:inline-flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;background:#f2f4f7;border-radius:var(--cat-border-radius-s, 0.125rem);white-space:nowrap;min-width:0}.pill>span{overflow:hidden;text-overflow:ellipsis;flex:1 1 0%}.pill>cat-button{margin-right:-0.25rem;margin-left:-0.25rem}.select-btn{transition:transform 0.13s linear}.select-btn::part(button){outline:none}cat-spinner{padding:0.375rem}.icon-suffix{padding:0.25rem}.select-btn-open{transform:rotate(180deg)}.select-dropdown{position:absolute;right:0;background:white;display:none;overflow:auto;box-shadow:0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);border-radius:var(--cat-border-radius-m, 0.25rem);z-index:100}.select-options-wrapper{max-height:16rem;width:100%}.select-empty{margin:1rem 0;padding:0 1.25rem}.select-options{list-style-type:none;margin:0;padding:0.5rem 0}.select-options cat-checkbox,.select-options .select-option-single{margin:0;padding:0.5rem 1rem}.select-option-inner{display:flex;gap:0.5rem}.select-option-inner cat-avatar{--cat-avatar-size:1.25rem;--cat-avatar-font-size:0.5rem}.select-option-text{flex:1 1 0%;min-width:0}.select-option-single{cursor:pointer}.select-input-transparent-caret{caret-color:transparent}.select-option-empty,.select-option-loading{padding:0.5rem 1rem}.select-option:hover{background-color:rgba(var(--cat-secondary-bg, 105, 118, 135), 0.05)}.select-option-active{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-2px}.select-option-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-wrap:break-word;word-break:break-word}.select-option-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}";
 
 const INIT_STATE = {
@@ -393,7 +383,7 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     !this.valueChangedBySelection ? this.resolve() : (this.valueChangedBySelection = false);
   }
   watchErrorsHandler(value) {
-    if (coerceBoolean(this.errorUpdate) === false) {
+    if (!coerceBoolean(this.errorUpdate)) {
       this.errorMap = undefined;
     }
     else {
@@ -402,6 +392,7 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         : value === true
           ? {}
           : value || undefined;
+      this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();
     }
   }
   onStateChange(newState, oldState) {
@@ -444,11 +435,7 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.value = newValue;
       }
       this.catChange.emit();
-      const errorUpdate = coerceNumber(this.errorUpdate, null);
-      if (errorUpdate !== null) {
-        typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);
-        this.errorUpdateTimeoutId = window.setTimeout(() => (this.errorMap = this.errorMapSrc), errorUpdate);
-      }
+      this.showErrorsIfTimeout();
     }
   }
   componentDidLoad() {
@@ -479,8 +466,8 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.hide();
     this.patchState({ activeSelectionIndex: -1 });
     this.catBlur.emit(event);
-    if (`${this.errorUpdate}` !== 'false') {
-      this.errorMap = this.errorMapSrc;
+    if (coerceBoolean(this.errorUpdate)) {
+      this.showErrors();
     }
   }
   onKeyDown(event) {
@@ -924,6 +911,24 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       (_a = this.input) === null || _a === void 0 ? void 0 : _a.classList.add('select-input-transparent-caret');
     }
   }
+  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();
+    }
+  }
   get hostElement() { return this; }
   static get watchers() { return {
     "connector": ["onConnectorChange"],