@prolibu-suite/cobalt-core 0.1.1 → 0.2.0

package/dist/collection/components/co-tags-field/co-tags-field.js

@@ -0,0 +1,590 @@
+import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
+/**
+ * Free-text tags input — type a value and press Enter/Tab (or comma) to add it
+ * as a chip. Backspace on an empty input removes the last chip; double-click a
+ * chip to edit it inline. Unlike `co-combobox` (which selects from a fixed list
+ * of options), this field has no option list: every chip is arbitrary text the
+ * user typed. It is the renderer for schema fields whose Mongoose type is an
+ * array of primitives (e.g. `type: [String]`).
+ *
+ * The committed `value` is a JSON array of strings (or an actual `string[]` when
+ * set programmatically). `coChange` emits the array on every add/edit/remove/clear.
+ *
+ * Visually mirrors `co-date-field`/`co-input` so it sits flush with the rest of
+ * the form controls.
+ *
+ * @part wrapper - Root container
+ * @part label - The field label
+ * @part field - The bordered chip+input row
+ * @part input - The native text input
+ * @part clear - The clear-all button
+ * @part helper - The helper/error text row
+ */
+export class CoTagsField {
+    constructor() {
+        /** Committed value as a JSON array of strings (or an actual `string[]`). */
+        this.value = '[]';
+        this.placeholder = '';
+        this.required = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.clearable = true;
+        /** Allow the same value to be added more than once. */
+        this.allowDuplicates = false;
+        /** External invalid flag (e.g. from a form controller). */
+        this.invalid = false;
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
+        /** Raw text in the inline input. */
+        this.draft = '';
+        /** Index of the chip being edited inline, or null. */
+        this.editingIndex = null;
+        /** Draft text while editing a chip. */
+        this.editingDraft = '';
+        this.hasFocus = false;
+        this.handleClearAll = () => {
+            var _a;
+            if (!this.hasValue)
+                return;
+            this.commit([]);
+            this.coClear.emit();
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        this.handleInput = (e) => {
+            this.draft = e.target.value;
+            this.coInput.emit(this.draft);
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === 'Tab' || e.key === ',') {
+                if (this.draft.trim()) {
+                    e.preventDefault();
+                    this.addTag();
+                }
+                return;
+            }
+            if (e.key === 'Backspace' && this.draft === '' && this.hasValue) {
+                e.preventDefault();
+                this.removeTag(this.tags.length - 1);
+            }
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.coFocus.emit();
+        };
+        this.handleBlur = () => {
+            // Commit any pending text so a typed-but-not-entered value isn't lost.
+            if (this.draft.trim())
+                this.addTag();
+            this.hasFocus = false;
+            this.coBlur.emit();
+        };
+        this.handleEditKeyDown = (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                this.saveEdit();
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                this.cancelEdit();
+            }
+        };
+        this.handleFieldClick = () => {
+            var _a;
+            if (this.disabled || this.readonly)
+                return;
+            if (this.editingIndex === null)
+                (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    onEditingIndexChange(next) {
+        if (next !== null) {
+            // Focus the inline edit input after it renders.
+            requestAnimationFrame(() => { var _a; return (_a = this.editEl) === null || _a === void 0 ? void 0 : _a.focus(); });
+        }
+    }
+    get tags() {
+        if (Array.isArray(this.value))
+            return this.value.map((v) => String(v));
+        if (typeof this.value === 'string' && this.value.trim()) {
+            try {
+                const parsed = JSON.parse(this.value);
+                if (Array.isArray(parsed))
+                    return parsed.map((v) => String(v));
+            }
+            catch (_a) {
+                /* not JSON */
+            }
+        }
+        return [];
+    }
+    get hasValue() {
+        return this.tags.length > 0;
+    }
+    get isInvalid() {
+        return this.invalid;
+    }
+    get atCapacity() {
+        return typeof this.maxTags === 'number' && this.tags.length >= this.maxTags;
+    }
+    commit(next) {
+        this.value = JSON.stringify(next);
+        this.coChange.emit(next);
+    }
+    addTag() {
+        const raw = this.draft.trim();
+        this.draft = '';
+        if (!raw || this.atCapacity)
+            return;
+        const tags = this.tags;
+        if (!this.allowDuplicates && tags.includes(raw))
+            return;
+        this.commit([...tags, raw]);
+    }
+    removeTag(index) {
+        const next = this.tags.filter((_, i) => i !== index);
+        this.commit(next);
+    }
+    startEdit(index) {
+        var _a;
+        if (this.disabled || this.readonly)
+            return;
+        this.editingIndex = index;
+        this.editingDraft = (_a = this.tags[index]) !== null && _a !== void 0 ? _a : '';
+    }
+    saveEdit() {
+        if (this.editingIndex === null)
+            return;
+        const index = this.editingIndex;
+        const raw = this.editingDraft.trim();
+        const tags = this.tags;
+        this.editingIndex = null;
+        this.editingDraft = '';
+        if (!raw) {
+            // Empty edit removes the chip.
+            this.commit(tags.filter((_, i) => i !== index));
+            return;
+        }
+        if (!this.allowDuplicates && tags.some((t, i) => i !== index && t === raw)) {
+            // Collapsing onto an existing tag → just drop this one.
+            this.commit(tags.filter((_, i) => i !== index));
+            return;
+        }
+        const next = [...tags];
+        next[index] = raw;
+        this.commit(next);
+    }
+    cancelEdit() {
+        this.editingIndex = null;
+        this.editingDraft = '';
+    }
+    render() {
+        const tags = this.tags;
+        const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
+        const helper = this.isInvalid ? this.errorMessage : this.helperText;
+        const showInput = !this.readonly && !this.atCapacity;
+        return (h("div", { key: '6ddec5087eaf4b6cc662de1eebce5d936ec02964', class: {
+                'co-tags-field': true,
+                'co-tags-field--disabled': this.disabled,
+                'co-tags-field--focused': this.hasFocus,
+                'co-tags-field--filled': this.hasValue,
+                'co-tags-field--invalid': this.isInvalid,
+            }, part: "wrapper" }, this.label && (h("div", { key: '25cfd8aa738f620a86c3166d197bdee320427c18', class: "co-tags-field__labels" }, h("label", { key: '8aeeff373a2e565a20a6fa58e9f46214783b436a', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'b75ec517f2b6e0e7c16ec67a61764a0e3380a3ee', required: this.required })))), h("div", { key: '22ddf70f600f111ab5412a8fc132746a27068f9b', class: "co-tags-field__field-row" }, h("div", { key: 'd78e1d870904788dbe5fd9b2eb8e625f622c4b49', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: '6dd2c44651d9202083eda49de6b14fdc1c40a2f8', class: "co-tags-field__input-wrapper" }, tags.map((tag, index) => this.editingIndex === index ? (h("input", { key: `edit-${index}`, ref: (el) => (this.editEl = el), class: "co-tags-field__edit", type: "text", value: this.editingDraft, onInput: (e) => (this.editingDraft = e.target.value), onKeyDown: this.handleEditKeyDown, onBlur: () => this.saveEdit() })) : (
+        // Field-chip per the Figma "Tipo=Chips" spec (14px label,
+        // x-circle remove) — same look as co-ref-field's chips.
+        h("span", { key: `chip-${index}-${tag}`, class: "co-tags-field__chip", title: tag, onDblClick: () => this.startEdit(index) }, h("span", { class: "co-tags-field__chip-label" }, tag), !this.disabled && !this.readonly && (h("button", { class: "co-tags-field__chip-remove", type: "button", tabIndex: -1, onClick: (e) => {
+                e.stopPropagation();
+                this.removeTag(index);
+            } }, h("co-icon", { name: "x-circle", weight: "fill", size: 16 })))))), showInput && (h("input", { key: '0385de15c170ab25efdb51265745a583e0f89f4e', ref: (el) => (this.inputEl = el), class: "co-tags-field__native", type: "text", autocomplete: "off", value: this.draft, placeholder: tags.length === 0 ? this.placeholder : '', disabled: this.disabled, required: this.required && tags.length === 0, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'Tags' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }))), this.clearable && (h("button", { key: 'f3f6646342bbc87116dd381be8aab87e213ab53f', class: {
+                'co-tags-field__clear': true,
+                'co-tags-field__clear--hidden': !showClear,
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClearAll, "aria-label": "Clear all", part: "clear" }, h("co-icon", { key: 'fdd56eab3d6efe399ac074d363e24f34091b5eb0', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '15609d719a5db8cb05190b62e3600732b8a093b5', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: 'a41983aa2eea372fdd6bc7f3ea5578887f67e962', class: {
+                'co-tags-field__helper': true,
+                'co-tags-field__helper--error': this.isInvalid,
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'e8fae5a5fb653015e7aed92ba22ea10f8bdd2b64', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '39beac5b7f7576ed3c6c83a417c3736ca086c9a5', class: "co-tags-field__helper-text" }, helper)))));
+    }
+    static get is() { return "co-tags-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-tags-field.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-tags-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Committed value as a JSON array of strings (or an actual `string[]`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'[]'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clearable",
+                "defaultValue": "true"
+            },
+            "maxTags": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of tags allowed (no cap when undefined)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-tags"
+            },
+            "allowDuplicates": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow the same value to be added more than once."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-duplicates",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "External invalid flag (e.g. from a form controller)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Message shown when invalid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text shown when valid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label layout: vertical (label above) or horizontal (label beside)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'vertical'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "draft": {},
+            "editingIndex": {},
+            "editingDraft": {},
+            "hasFocus": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coChange",
+                "name": "coChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the full array on every add/edit/remove/clear."
+                },
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                }
+            }, {
+                "method": "coInput",
+                "name": "coInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on every keystroke of the inline input with the raw text."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "coClear",
+                "name": "coClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the clear-all button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coFocus",
+                "name": "coFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coBlur",
+                "name": "coBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "editingIndex",
+                "methodName": "onEditingIndexChange"
+            }];
+    }
+}