@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

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

@@ -0,0 +1,616 @@
+import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
+import { FieldChip } from "../../utils/fieldChip";
+/**
+ * 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';
+        /** Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48. */
+        this.size = 'md';
+        /** 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: '1cef49a116560d7dbb9bf8d188fdc96361a57eb2', 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,
+                [`co-tags-field--${this.size}`]: true,
+            }, part: "wrapper" }, this.label && (h("div", { key: 'a4b799bdb15d8a64d86e9b3f367da4eb080a513a', class: "co-tags-field__labels" }, h("label", { key: '09b17b8888f9ab34ae6e52d6149f2234bab29cad', class: "co-tags-field__label", part: "label" }, this.label, h(RequiredMark, { key: '2e629eb73a4b76d7484f506edf26de88b13082b3', required: this.required })))), h("div", { key: 'd0f285b57c0d0dec34f5c62889c09eeb1b85d7f0', class: "co-tags-field__field-row" }, h("div", { key: '244270d7af8d9a615fa4e294d52986e470c71882', class: "co-tags-field__field", part: "field", onClick: this.handleFieldClick }, h("div", { key: '434c8fe594082e57a1bc84c83467041f9070cc8b', 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() })) : (
+        // Shared field-chip (utils/fieldChip.tsx) per the Figma
+        // "Tipo=Chips" spec — same look as co-ref-field's chips.
+        h(FieldChip, { key: `chip-${index}-${tag}`, baseClass: "co-tags-field__chip", label: tag, title: tag, onChipDblClick: () => this.startEdit(index), onRemove: !this.disabled && !this.readonly
+                ? (e) => {
+                    e.stopPropagation();
+                    this.removeTag(index);
+                }
+                : undefined }))), showInput && (h("input", { key: '2b425cbf2761cac6eb63bd9e6b27e5dcc082dc69', 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: 'a972a27e6b26d585e66a1d400e8af1da4571d12d', 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: '7d7286ed2c13129e40dd18e205626615d0b94022', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: 'd1538321cd3e330a54978424ec165fe8b9a533e4', type: "hidden", name: this.name, value: JSON.stringify(tags) }), helper && (h("div", { key: 'e74d2fcbe0c8355cb66becbe526d974f524acdfa', class: {
+                'co-tags-field__helper': true,
+                'co-tags-field__helper--error': this.isInvalid,
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '17642154cb83071f07819f98dccd866066d0eae1', name: "warning-circle", size: 14, class: "co-tags-field__helper-icon" })), h("span", { key: '1cf60e4b7f9eed91aacdb0ab4044b20a2971d57d', 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'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+    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"
+            }];
+    }
+}