@haiilo/catalyst 10.21.4 → 10.22.1

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

@@ -0,0 +1,490 @@
+import { Host, h } from "@stencil/core";
+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;
+export class CatTag {
+    constructor() {
+        this._id = `cat-input-${nextUniqueId++}`;
+        this.hasSlottedLabel = false;
+        this.hasSlottedHint = false;
+        this.tags = [];
+        this.errorMap = undefined;
+        this.requiredMarker = 'optional';
+        this.disabled = false;
+        this.placeholder = undefined;
+        this.hint = undefined;
+        this.identifier = undefined;
+        this.label = '';
+        this.name = undefined;
+        this.labelHidden = false;
+        this.required = false;
+        this.nativeAttributes = undefined;
+        this.value = undefined;
+        this.clearable = false;
+        this.errors = undefined;
+        this.errorUpdate = 0;
+        this.tagCreationChars = [' '];
+    }
+    get id() {
+        return this.identifier || this._id;
+    }
+    get invalid() {
+        return !!Object.keys(this.errorMap || {}).length;
+    }
+    get hasHint() {
+        return !!this.hint || this.invalid;
+    }
+    onKeyDown(event) {
+        const isInputFocused = this.hostElement.shadowRoot?.activeElement === this.input;
+        if (['Enter', ...this.tagCreationChars].includes(event.key) && isInputFocused) {
+            event.preventDefault();
+            if (this.input?.value.trim() && !this.value?.includes(this.input?.value.trim())) {
+                this.value = [...(this.value ?? []), this.input.value.trim()];
+                this.catChange.emit(this.value);
+            }
+            if (this.input) {
+                this.input.value = '';
+            }
+        }
+        else if (['Backspace'].includes(event.key) &&
+            this.input?.selectionStart === 0 &&
+            (this.value?.length ?? 0) > 0 &&
+            isInputFocused) {
+            this.value = this.value?.slice(0, -1) ?? [];
+            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();
+        }
+    }
+    componentWillRender() {
+        this.onErrorsChanged(this.errors);
+        this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+        this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+    }
+    render() {
+        return (h(Host, { key: '398a4b7c4e4083354f0c2d6e0224144938d13c91' }, h("div", { key: '05f5813a7d630e814abb7a2fe83cd43a5e88e1e3', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '4d4ddf228978a88f79ca6d0457e98ec13b260ff8', htmlFor: `tags-${this.id}-input`, part: "label" }, h("span", { key: '3d04af2eefcb408c2f9fc7345fc30babf1674002', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '7e0f92865f6a37c5b4702d3abd1d39e7e7c871ac', name: "label" })) || this.label, h("div", { key: '27f211e9409626760244007b1871deb78065b00c', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'cac179c8ab9d8fa28877fc619dacdf3890640b4c', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '0d7587cf3d5706846ec635b0e9762faf3b5acd18', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))))), h("div", { key: 'c26692159377a9f808f5052491eef1528d65c02e', class: { 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid } }, this.value?.map(value => (h("div", { class: "tag-pill" }, h("span", null, value), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(value), tabIndex: -1 }))))), h("div", { key: '843bc85ffc9ddb85612a2f7ad38a009fc90242f2', class: "input-inner-wrapper" }, h("input", { key: 'd952b031c057a055f4be1869ebdb9b9f33589120', ...this.nativeAttributes, part: "input", id: `tags-${this.id}-input`, class: "tags-input", role: "combobox", ref: el => (this.input = el), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), placeholder: this.placeholder, disabled: this.disabled }), this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (h("cat-button", { key: 'dc1cba0d616ad239c45b1db93c98bcd68b9c1cdd', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.invalid && h("cat-icon", { key: '62e89d1492b4c72a01c3d362171b76e7c9f9a9ae', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }))), this.hasHint && (h(CatFormHint, { key: 'f291d121c8aee0c871b4d72f497a83778d0165c1', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))));
+    }
+    onInput() {
+        const currentValue = [
+            ...new Set(this.input?.value?.split(this.createSplitRegex(this.tagCreationChars)) ?? [])
+        ].filter(value => !!value && !this.value?.includes(value));
+        if (currentValue.length > 1) {
+            this.value = [...(this.value ?? []), ...currentValue];
+            this.catChange.emit(this.value);
+            if (this.input) {
+                this.input.value = '';
+            }
+        }
+    }
+    clear() {
+        this.value = [];
+        this.catChange.emit(this.value);
+        if (this.input) {
+            this.input.value = '';
+        }
+    }
+    deselect(value) {
+        this.value = this.value?.filter(element => element !== value);
+    }
+    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();
+        }
+    }
+    createSplitRegex(delimiters) {
+        // Escape special regex characters in the array
+        const escapedDelimiters = delimiters.map(delimiter => delimiter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+        // Add newline characters to the list of delimiters
+        escapedDelimiters.push('\\n', '\\r');
+        // Join the escaped delimiters to create a character class
+        const regexPattern = `[${escapedDelimiters.join('')}]`;
+        return new RegExp(regexPattern, 'g');
+    }
+    static get is() { return "cat-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cat-tag.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cat-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "requiredMarker": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!'",
+                    "resolved": "\"none!\" | \"none\" | \"optional!\" | \"optional\" | \"required!\" | \"required\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the label need a marker to shown if the select is required or optional."
+                },
+                "attribute": "required-marker",
+                "reflect": false,
+                "defaultValue": "'optional'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the select is disabled."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder text to display within the select."
+                },
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional hint text(s) to be displayed with the select."
+                },
+                "attribute": "hint",
+                "reflect": false
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier for the input."
+                },
+                "attribute": "identifier",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the select."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the form control. Submitted with the form as part of a name/value pair."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "labelHidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hide the label, but still show it to assistive technologies like screen readers."
+                },
+                "attribute": "label-hidden",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A value is required or must be checked for the form to be submittable."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "nativeAttributes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: string }",
+                    "resolved": "undefined | { [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Attributes that will be added to the native HTML input element."
+                }
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the control."
+                }
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input should show a clear button."
+                },
+                "attribute": "clearable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "errors": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | string[] | ErrorMap",
+                    "resolved": "boolean | string[] | undefined | { [key: string]: any; }",
+                    "references": {
+                        "ErrorMap": {
+                            "location": "import",
+                            "path": "../cat-form-hint/cat-form-hint",
+                            "id": "src/components/cat-form-hint/cat-form-hint.tsx::ErrorMap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The validation errors for this input. Will render a hint under the input\nwith the translated error message(s) `error.${key}`. If an object is\npassed, the keys will be used as error keys and the values translation\nparameters.\nIf the value is `true`, the input will be marked as invalid without any\nhints under the input."
+                },
+                "attribute": "errors",
+                "reflect": false
+            },
+            "errorUpdate": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | number",
+                    "resolved": "boolean | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fine-grained control over when the errors are shown. Can be `false` to\nnever show errors, `true` to show errors on blur, or a number to show\nerrors on change with the given delay in milliseconds."
+                },
+                "attribute": "error-update",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "tagCreationChars": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "List of characters that should create a new tag. This need to be comparable to `keydownEvent.key`.\nPasted values will also be split by those chars.\nDefaults to `[' ']`."
+                },
+                "defaultValue": "[' ']"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasSlottedLabel": {},
+            "hasSlottedHint": {},
+            "tags": {},
+            "errorMap": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "catChange",
+                "name": "catChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value is changed."
+                },
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                }
+            }, {
+                "method": "catFocus",
+                "name": "catFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input received focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "catBlur",
+                "name": "catBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "errors",
+                "methodName": "onErrorsChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=cat-tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cat-tag.js","sourceRoot":"","sources":["../../../src/components/cat-tag/cat-tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, State, Prop, Event, EventEmitter, Listen, Element, Watch } from '@stencil/core';\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@Component({\n  tag: 'cat-tag',\n  styleUrl: 'cat-tag.scss',\n  shadow: true\n})\nexport class CatTag {\n  private readonly _id = `cat-input-${nextUniqueId++}`;\n\n  private input?: HTMLInputElement;\n  private errorMapSrc?: ErrorMap;\n\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private get invalid() {\n    return !!Object.keys(this.errorMap || {}).length;\n  }\n\n  private get hasHint() {\n    return !!this.hint || this.invalid;\n  }\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n  @State() hasSlottedHint = false;\n\n  @State() tags: string[] = [];\n\n  @State() errorMap?: ErrorMap;\n\n  /**\n   * Whether the label need a marker to shown if the select is required or optional.\n   */\n  @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the select is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The placeholder text to display within the select.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the select.\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 select.\n   */\n  @Prop() label = '';\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   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * A value is required or must be checked for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * The value of the control.\n   */\n  @Prop({ mutable: true }) value?: string[];\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\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   * List of characters that should create a new tag. This need to be comparable to `keydownEvent.key`.\n   * Pasted values will also be split by those chars.\n   * Defaults to `[' ']`.\n   */\n  @Prop() tagCreationChars: string[] = [' '];\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<string[]>;\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  @Listen('keydown')\n  onKeyDown(event: KeyboardEvent): void {\n    const isInputFocused = this.hostElement.shadowRoot?.activeElement === this.input;\n    if (['Enter', ...this.tagCreationChars].includes(event.key) && isInputFocused) {\n      event.preventDefault();\n      if (this.input?.value.trim() && !this.value?.includes(this.input?.value.trim())) {\n        this.value = [...(this.value ?? []), this.input.value.trim()];\n        this.catChange.emit(this.value);\n      }\n      if (this.input) {\n        this.input.value = '';\n      }\n    } else if (\n      ['Backspace'].includes(event.key) &&\n      this.input?.selectionStart === 0 &&\n      (this.value?.length ?? 0) > 0 &&\n      isInputFocused\n    ) {\n      this.value = this.value?.slice(0, -1) ?? [];\n      this.catChange.emit(this.value);\n    }\n  }\n\n  @Watch('errors')\n  onErrorsChanged(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  componentWillRender(): void {\n    this.onErrorsChanged(this.errors);\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n          {(this.hasSlottedLabel || this.label) && (\n            <label htmlFor={`tags-${this.id}-input`} part=\"label\">\n              <span class=\"label-wrapper\">\n                {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n                <div class=\"label-metadata\">\n                  {!this.required && (this.requiredMarker ?? 'optional').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                </div>\n              </span>\n            </label>\n          )}\n        </div>\n        <div class={{ 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid }}>\n          {this.value?.map(value => (\n            <div class=\"tag-pill\">\n              <span>{value}</span>\n              {!this.disabled && (\n                <cat-button\n                  size=\"xs\"\n                  variant=\"text\"\n                  icon=\"$cat:select-clear\"\n                  iconOnly\n                  a11yLabel={i18n.t('select.deselect')}\n                  onClick={() => this.deselect(value)}\n                  tabIndex={-1}\n                ></cat-button>\n              )}\n            </div>\n          ))}\n          <div class=\"input-inner-wrapper\">\n            <input\n              {...this.nativeAttributes}\n              part=\"input\"\n              id={`tags-${this.id}-input`}\n              class=\"tags-input\"\n              role=\"combobox\"\n              ref={el => (this.input = el)}\n              aria-invalid={this.invalid ? 'true' : undefined}\n              aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n              onInput={this.onInput.bind(this)}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n            ></input>\n            {this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (\n              <cat-button\n                class=\"clearable\"\n                icon=\"$cat:input-close\"\n                icon-only=\"true\"\n                size=\"s\"\n                variant=\"text\"\n                a11y-label={i18n.t('input.clear')}\n                onClick={this.clear.bind(this)}\n                data-dropdown-no-close\n              ></cat-button>\n            )}\n            {this.invalid && <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>}\n          </div>\n        </div>\n        {this.hasHint && (\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      </Host>\n    );\n  }\n\n  private onInput() {\n    const currentValue = [\n      ...new Set(this.input?.value?.split(this.createSplitRegex(this.tagCreationChars)) ?? [])\n    ].filter(value => !!value && !this.value?.includes(value));\n    if (currentValue.length > 1) {\n      this.value = [...(this.value ?? []), ...currentValue];\n      this.catChange.emit(this.value);\n      if (this.input) {\n        this.input.value = '';\n      }\n    }\n  }\n\n  private clear() {\n    this.value = [];\n    this.catChange.emit(this.value);\n    if (this.input) {\n      this.input.value = '';\n    }\n  }\n\n  private deselect(value: string) {\n    this.value = this.value?.filter(element => element !== value);\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  private createSplitRegex(delimiters: string[]): RegExp {\n    // Escape special regex characters in the array\n    const escapedDelimiters = delimiters.map(delimiter => delimiter.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'));\n\n    // Add newline characters to the list of delimiters\n    escapedDelimiters.push('\\\\n', '\\\\r');\n\n    // Join the escaped delimiters to create a character class\n    const regexPattern = `[${escapedDelimiters.join('')}]`;\n\n    return new RegExp(regexPattern, 'g');\n  }\n}\n"]}

package/dist/collection/components/cat-tag/cat-tag.spec.js

@@ -0,0 +1,23 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { CatTag } from "./cat-tag";
+describe('cat-tag', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [CatTag],
+            html: `<cat-tag></cat-tag>`
+        });
+        expect(page.root).toEqualHtml(`
+        <cat-tag>
+         <mock:shadow-root>
+           <div class="label-container"></div>
+           <div class="input-wrapper">
+            <div class="input-inner-wrapper">
+             <input class="tags-input" id="tags-cat-input-0-input" part="input" role="combobox">
+            </div>
+           </div>
+         </mock:shadow-root>
+        </cat-tag>
+    `);
+    });
+});
+//# sourceMappingURL=cat-tag.spec.js.map

package/dist/collection/components/cat-tag/cat-tag.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cat-tag.spec.js","sourceRoot":"","sources":["../../../src/components/cat-tag/cat-tag.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,qBAAqB;SAC5B,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CatTag } from './cat-tag';\n\ndescribe('cat-tag', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CatTag],\n      html: `<cat-tag></cat-tag>`\n    });\n    expect(page.root).toEqualHtml(`\n        <cat-tag>\n         <mock:shadow-root>\n           <div class=\"label-container\"></div>\n           <div class=\"input-wrapper\">\n            <div class=\"input-inner-wrapper\">\n             <input class=\"tags-input\" id=\"tags-cat-input-0-input\" part=\"input\" role=\"combobox\">\n            </div>\n           </div>\n         </mock:shadow-root>\n        </cat-tag>\n    `);\n  });\n});\n"]}

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

@@ -88,15 +88,15 @@ export class CatTextarea {
         }
     }
     render() {
-        return (h(Host, { key: '3fb70b99dd5e227421428c44b4a2f1b78e3a9624' }, h("div", { key: '1779847f30a6f47cfe36565dc3a73f13c25efb74', class: {
+        return (h(Host, { key: 'a0869be16c6763ab0a53c176ca2c62f359ac5e1f' }, h("div", { key: '9287759dd8d94f3ce19d1d7a6fcc4a79ac2d93d1', class: {
                 'textarea-field': true,
                 'textarea-horizontal': this.horizontal
-            } }, h("div", { key: '3e52881679e5718256ae474de772e4ff6b7a6e04', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '5a91b34d85f90d4ae0c1430d4824f48dd6345e1d', htmlFor: this.id, part: "label" }, h("span", { key: 'da5084e4e79b564795e534f7ab4928ca6b660f0b', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '63caadae96c67353d319524bec69caa39aaed134', name: "label" })) || this.label, h("div", { key: '2487576ec974be3157ea2bd88b351a7a2c69549e', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'e79283c2e1776f88a64be12b56e9360a579ddb01', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '667b799f8d9650853bc9acc7be5fa2f5050b6533', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")")), this.maxLength && (h("div", { key: '715ff632acb1c2f33d3839ecbbf38b96ab0b1f94', class: "label-character-count", "aria-hidden": "true" }, this.value?.length ?? 0, "/", this.maxLength))))))), h("div", { key: '3c235dd0387974ec8319985a4faa14a62f130f5e', class: "textarea-container" }, h("div", { key: 'b57634d98428025e07df6a77e41545c08afa1d16', class: {
+            } }, h("div", { key: '9ea634678136006027e77c0c78f78d5e82d3b645', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '555c51a445aec5c7aef96005b64a8c72b7984e8b', htmlFor: this.id, part: "label" }, h("span", { key: '90c76a8ad82c5b76f107ece9903ede13c393f804', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'c3a63aa2bea65bda933b3d1b0da2020e838498e4', name: "label" })) || this.label, h("div", { key: 'd55eb901ef8ca67d039dfe35158e3b5368dfa45e', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'ff14b950bdf948f1722e317f7a8dd96acf74a3c4', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'b0aca208498cec359cd11ce4553d27d749f418da', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")")), this.maxLength && (h("div", { key: 'bf211a3f7947ea2b702253bf0cc526a4cb284d24', class: "label-character-count", "aria-hidden": "true" }, this.value?.length ?? 0, "/", this.maxLength))))))), h("div", { key: 'fc55f53090b133715cd25eaf01b4503b00978f9c', class: "textarea-container" }, h("div", { key: '7ae02ac97e0043845b07eec1a7db5c6ccde983e9', class: {
                 'textarea-wrapper': true,
                 'textarea-readonly': this.readonly,
                 'textarea-disabled': this.disabled,
                 'textarea-invalid': this.invalid
-            } }, h("textarea", { key: 'eea177cb65a95b65e95458056bc24af8879207ee', ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, 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.invalid && (h("cat-icon", { key: '9d21adf9b86a2c7487f7e3c976bd88773114322c', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (h(CatFormHint, { key: '04c7af649b204b083ea83cfdcaf9a05829de5671', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
+            } }, h("textarea", { key: 'e75a42ba20f04e17f2e463f75196530cbc197aec', ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, 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.invalid && (h("cat-icon", { key: 'd452062caeed39cf3cf9f06bcaeccb36d62ff5fe', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (h(CatFormHint, { key: '551c054a13ec4d51f43244b7215303ac5bcd1969', 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;

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

@@ -141,14 +141,14 @@ export class CatTime {
         this.input?.clear();
     }
     render() {
-        return (h(Host, { key: '4a30c978fb4c4aa6f1c412084013ab86316feb5a' }, h("cat-input", { key: 'a41b9ee3fde454364ef48689b12359e11ebb58c8', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, h("span", { key: '9d8f9b3984b2ad08c45dce0e24c0b70c1db0e4cd', slot: "label" }, this.hasSlottedLabel && h("slot", { key: '676c762a9769f97e1eb9df102fbbd72dfd1c54c2', name: "label" }), !this.hasSlottedLabel && this.label, h("span", { key: '4af7aa9f2ad7b46af678cfea678d86d9b0248739', class: "label-aria" }, " (HH:mm)")), h("div", { key: 'ac9ab4a5ff2fed403c013b99a96a9cc6f4f99f8c', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (h("cat-button", { key: '5ac32c5a59ac3bb4ca0489fda5fbbe4cf547901a', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), h("cat-dropdown", { key: 'e68a03d15d25585829ea5f9b5972c9b463709ac5', slot: "addon", placement: this.placement }, h("cat-button", { key: '36d65533a6a5081513350a3c52283477a96613b8', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), h("nav", { key: 'd90d221857f4c5508cdc68476a732f62ba7a1c04', slot: "content", class: "cat-nav" }, h("ul", { key: '255fe6f4fe316000b2b79ebb4638feec636ea230' }, this.timeArray().map(time => {
+        return (h(Host, { key: '55e285241d8a5bf961a080839bf70d795c7ab108' }, h("cat-input", { key: '6c5641ac8ad4d352f66920cef8611947b4619d92', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, h("span", { key: '3482556a1876b19688b4e103a13977af291bb44f', slot: "label" }, this.hasSlottedLabel && h("slot", { key: 'f095f65a021efcf4b96ecd53d9418039fd85935c', name: "label" }), !this.hasSlottedLabel && this.label, h("span", { key: '71287b6ed9276ecc58c40b5003feb5105550fddc', class: "label-aria" }, " (HH:mm)")), h("div", { key: '94fd09f72a3fb70e62b2108ada2b2bee616342d3', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (h("cat-button", { key: 'c86f00f677809baced1decc8be879830175365a0', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), h("cat-dropdown", { key: 'e01c696cbaac7fd5fd81d2fea42d1714478973f6', slot: "addon", placement: this.placement }, h("cat-button", { key: '2acde78757bc009b10a9ee77522d53c88b31e633', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), h("nav", { key: '07c46ce342cf7589f691336cf06ce6ca173b97ac', slot: "content", class: "cat-nav" }, h("ul", { key: '6132f2e1e0d65c960dbb8f2930dc2e80a145b30e' }, this.timeArray().map(time => {
             const isoTime = formatIso(time);
             const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);
             return (h("li", null, h("cat-button", { class: {
                     'cat-nav-item': true,
                     'time-disabled': disabled
                 }, disabled: disabled, active: isoTime === this.value, color: isoTime === this.value ? 'primary' : 'secondary', variant: isoTime === this.value ? 'filled' : 'outlined', onCatClick: () => this.select(time), "data-time": isoTime }, this.format(time))));
-        }))))), this.hasSlottedHint && (h("span", { key: '708612e8b91925ca2bce0c6e997fea9de5316ef2', slot: "hint" }, h("slot", { key: '13736745e51441ccfd65172a41b0aec13ec07d32', name: "hint" }))))));
+        }))))), this.hasSlottedHint && (h("span", { key: '0609dce2baff97ce679df5571e4f53ecf503bafd', slot: "hint" }, h("slot", { key: '8288f3f2bb0695edeba3e5f39a344e2364120ddd', name: "hint" }))))));
     }
     timeArray() {
         const result = [];

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

@@ -58,13 +58,13 @@ export class CatToggle {
         this.input.blur();
     }
     render() {
-        return (h(Host, { key: 'b906a3bd143e55e0863dc0ac70fc46a376f4db43' }, h("label", { key: 'b02e86fbbced890b105613308913e3cb6a6a4b6f', htmlFor: this.id, class: {
+        return (h(Host, { key: 'db30b9f0e1b56af56a9ca385f8dd6f4a458c6bfb' }, h("label", { key: '6aa4f65e9ffd8075214738dd31e7684ac451828a', htmlFor: this.id, class: {
                 'is-hidden': this.labelHidden,
                 'is-disabled': this.disabled,
                 'label-left': this.labelLeft,
                 'align-center': this.alignment === 'center',
                 'align-end': this.alignment === 'bottom'
-            } }, h("input", { key: '002b1e2d072dd6af928f8f5a2d7587e9aff5c0ef', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'de90b93a6b57dafbf9b94b2a703561fa2fc1ad35', class: "toggle" }), h("span", { key: '728a1e8610898618ec56477d9b00b558e9273c43', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: 'feb997c081900bc9fb9d6673b8c95309d1cd5fd5', name: "label" })) || this.label)), this.hasHint && (h("div", { key: '5c3836d9c44c4c69858afd27d9bddaaa88fc0ec8', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '72d2727df085f120545889f1742fdd8c5600c8d1', class: "toggle-placeholder" }), h(CatFormHint, { key: '30f07216d0c4b9b19c425089c8b009b5a8ee6d75', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+            } }, h("input", { key: '872bb5e3105a095254b2e98b21bf3718a238a98e', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'a828a70dfbcaee3cb8b8a63c046b99496c16c9f5', class: "toggle" }), h("span", { key: '560090efe2c053936d3274b11d8eeb9cb10ecaef', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: '5b5a246d71cb380eeb509db0de46a9a5f903ad01', name: "label" })) || this.label)), this.hasHint && (h("div", { key: 'a5686f0863a51f89515a1609f151b131858adda2', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '229ac1985dd48349756d899617fb083acff08f8b', class: "toggle-placeholder" }), h(CatFormHint, { key: '3da05ddafe48eca22e5abdb402021dff3a5660eb', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;