@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/collection/components/co-column-picker/co-column-picker.js

@@ -0,0 +1,675 @@
+import { h } from "@stencil/core";
+import { parsePaths, parseSections, parseValues, buildLabelMap, buildTree, sortNodes, filterTree, collectAllLeafPaths, formatLabel, expandForSelected, expandForQuery, collectAllExpandableKeys, } from "./utils/column-picker-tree";
+import { ColumnPickerNode } from "./column-picker-node";
+export class CoColumnPicker {
+    constructor() {
+        this.options = '[]';
+        this.value = '[]';
+        this.multiple = true;
+        this.disabled = false;
+        this.showToolbar = true;
+        this.showSearch = true;
+        this.clearable = true;
+        this.placeholder = 'Select…';
+        this.maxHeight = 220;
+        this.emptyText = 'No results found';
+        this.selectAllText = 'Select all';
+        this.clearText = 'Clear';
+        this.expandText = 'Expand';
+        this.collapseText = 'Collapse';
+        this.selectedText = 'selected';
+        this.sections = '[]';
+        this.status = 'default';
+        this.isOpen = false;
+        this.query = '';
+        this.expandedKeys = new Set();
+        this.focused = false;
+        // ── Event handlers ──
+        this.handleFieldClick = () => {
+            if (this.disabled)
+                return;
+            this.isOpen = !this.isOpen;
+            this.focused = true;
+            if (this.isOpen)
+                requestAnimationFrame(() => { var _a; return (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus(); });
+        };
+        this.handleSearchInput = (e) => {
+            this.query = e.target.value;
+            this.coSearch.emit(this.query);
+            if (this.query)
+                this.expandedKeys = expandForQuery(this.getTree(), this.query, this.expandedKeys);
+        };
+        this.handleSearchClear = (e) => { var _a; e.stopPropagation(); this.query = ''; this.coSearch.emit(''); (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus(); };
+        this.handleClear = (e) => { e.stopPropagation(); this.value = '[]'; this.coClear.emit(); this.coChange.emit([]); };
+        this.handleSelectAll = () => {
+            if (!this.disabled)
+                this.emitSelection(collectAllLeafPaths(this.getTree()));
+        };
+        this.handleDeselectAll = () => {
+            if (this.disabled)
+                return;
+            this.value = '[]';
+            this.coClear.emit();
+            this.coChange.emit([]);
+        };
+        this.handleExpandAll = () => { this.expandedKeys = collectAllExpandableKeys(this.getTree()); };
+        this.handleCollapseAll = () => { this.expandedKeys = new Set(); };
+        this.handleOptionClick = (path) => {
+            if (this.disabled)
+                return;
+            if (this.multiple) {
+                const selected = [...this.selectedValues];
+                const idx = selected.indexOf(path);
+                if (idx >= 0)
+                    selected.splice(idx, 1);
+                else
+                    selected.push(path);
+                this.emitSelection(selected);
+            }
+            else {
+                this.emitSelection([path]);
+                this.isOpen = false;
+            }
+        };
+        this.handleParentCheck = (node) => {
+            if (this.disabled)
+                return;
+            const leafPaths = collectAllLeafPaths(node.children || []);
+            const selected = [...this.selectedValues];
+            if (leafPaths.every(p => selected.includes(p))) {
+                this.emitSelection(selected.filter(v => !leafPaths.includes(v)));
+            }
+            else {
+                for (const p of leafPaths)
+                    if (!selected.includes(p))
+                        selected.push(p);
+                this.emitSelection(selected);
+            }
+        };
+        this.handleChipRemove = (path, e) => {
+            e.stopPropagation();
+            if (!this.disabled)
+                this.emitSelection(this.selectedValues.filter(v => v !== path));
+        };
+        this.handleToggleExpand = (key, e) => {
+            e.stopPropagation();
+            const next = new Set(this.expandedKeys);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            this.expandedKeys = next;
+        };
+    }
+    // ── Derived state ──
+    get parsedOptions() { return parsePaths(this.options); }
+    get parsedSections() { return parseSections(this.sections); }
+    get selectedValues() { return parseValues(this.value); }
+    get optionLabelMap() { return buildLabelMap(this.options); }
+    get hasValue() { return this.selectedValues.length > 0; }
+    get statusIcon() {
+        return { error: 'warning-circle', success: 'check-circle', warning: 'warning', info: 'info' }[this.status] || null;
+    }
+    emitSelection(selected) { this.value = JSON.stringify(selected); this.coChange.emit(selected); }
+    onOptionsChange() { this.expandedKeys = expandForSelected(this.getTree(), this.selectedValues, this.expandedKeys); }
+    handleDocumentClick(e) {
+        if (!this.el.contains(e.target)) {
+            this.isOpen = false;
+            this.focused = false;
+        }
+    }
+    // ── Computed tree ──
+    getTree() { return buildTree(this.parsedOptions, this.optionLabelMap); }
+    getSectionedTree() {
+        const sections = this.parsedSections;
+        if (!sections.length)
+            return [];
+        const options = this.parsedOptions;
+        return sections.map(section => {
+            const cols = options.filter(col => !section.prefix ? !sections.some(s => s.prefix && col.startsWith(s.prefix + '.')) : col.startsWith(section.prefix + '.'));
+            return Object.assign(Object.assign({}, section), { nodes: sortNodes(buildTree(cols, this.optionLabelMap)) });
+        }).filter(s => s.nodes.length > 0);
+    }
+    // ── Render helpers ──
+    renderField() {
+        const selected = this.selectedValues;
+        const labelMap = this.optionLabelMap;
+        return (h("div", { class: {
+                'co-column-picker__field': true,
+                'co-column-picker__field--focused': this.focused,
+                'co-column-picker__field--disabled': this.disabled,
+                'co-column-picker__field--open': this.isOpen,
+            }, onClick: this.handleFieldClick }, this.multiple && selected.length > 0 && (h("div", { class: "co-column-picker__field-chips" }, selected.map(val => (h("co-chip", { label: labelMap.get(val) || formatLabel(val.split('.').pop() || val), size: "small", removable: !this.disabled, onCoRemove: (e) => this.handleChipRemove(val, e) }))))), !this.multiple && selected.length > 0 && (h("span", { class: "co-column-picker__field-text" }, selected.map(v => labelMap.get(v) || formatLabel(v.split('.').pop() || v)).join(', '))), selected.length === 0 && h("span", { class: "co-column-picker__field-placeholder" }, this.placeholder), h("div", { class: "co-column-picker__field-actions" }, this.clearable && this.hasValue && !this.disabled && (h("button", { class: "co-column-picker__field-clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-column-picker__field-caret" }))));
+    }
+    renderTree() {
+        const selected = this.selectedValues;
+        const nodeProps = { selected, expandedKeys: this.expandedKeys, disabled: this.disabled, query: this.query, onOptionClick: this.handleOptionClick, onParentCheck: this.handleParentCheck, onToggleExpand: this.handleToggleExpand };
+        const sections = this.parsedSections;
+        if (sections.length > 0) {
+            const st = this.getSectionedTree();
+            const filtered = this.query ? st.map(s => (Object.assign(Object.assign({}, s), { nodes: filterTree(s.nodes, this.query) }))).filter(s => s.nodes.length > 0) : st;
+            if (!filtered.length)
+                return this.renderEmpty();
+            return (h("div", { class: "co-column-picker__tree" }, filtered.map(s => [
+                h("div", { class: "co-column-picker__section-header" }, h("span", { class: "co-column-picker__section-label" }, s.label), s.prefix && h("span", { class: "co-column-picker__section-prefix" }, "(", s.prefix, ")")),
+                ...s.nodes.map(n => h(ColumnPickerNode, Object.assign({ node: n, depth: 0 }, nodeProps))),
+            ])));
+        }
+        const tree = this.getTree();
+        const ft = this.query ? filterTree(tree, this.query) : tree;
+        if (!ft.length)
+            return this.renderEmpty();
+        return (h("div", { class: "co-column-picker__tree" }, ft.map(n => h(ColumnPickerNode, Object.assign({ node: n, depth: 0 }, nodeProps)))));
+    }
+    renderEmpty() {
+        return (h("div", { class: "co-column-picker__empty" }, h("co-icon", { name: "magnifying-glass", size: 40, class: "co-column-picker__empty-icon" }), h("span", null, this.emptyText)));
+    }
+    render() {
+        return (h("div", { key: '0097275adfbd4a8f61ecba251568914d02b18e24', class: {
+                'co-column-picker': true,
+                'co-column-picker--open': this.isOpen,
+                'co-column-picker--disabled': this.disabled,
+                'co-column-picker--focused': this.focused,
+                [`co-column-picker--${this.status}`]: this.status !== 'default',
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'ffdbae01974d6cfbce8c7aad7916f4fee5c1cca6', class: "co-column-picker__labels" }, this.label && h("label", { key: '91b946cf1eb15a492bcadd4f8d11eabc9a59e1bf', class: "co-column-picker__label" }, this.label), this.secondaryLabel && h("span", { key: 'bef413d01940a40778eb35b629a189166f7fb93d', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (h("div", { key: '8d9f43f64177b13732432ef198b5e6b13cebd36b', class: "co-column-picker__dropdown" }, this.showSearch && (h("div", { key: '693aa4d44f2dbd543d5ad7c907518329c4e97025', class: "co-column-picker__search" }, h("co-icon", { key: '781810b8326fb46b99afa6bbacf2c3976647d98b', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), h("input", { key: 'd76de6d826436e0dbe8c9f97edcd8e310b8dca54', ref: el => (this.searchInputEl = el), class: "co-column-picker__search-input", type: "text", value: this.query, placeholder: this.placeholder, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.query && (h("button", { key: '482bb56991aa527744df0e0619753e2696f00372', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, h("co-icon", { key: '68090fb612a2ba97836c1127368e60d671bbd489', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (h("div", { key: '9afe3b43c5d6bbf8625819487ebfa8559478a71c', class: "co-column-picker__toolbar" }, h("button", { key: '55407fa68c881f79c4ca43359241e9180d3bb94b', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), h("button", { key: '55805e5ae2f629a5bb5ca7782de90558bae7f190', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), h("span", { key: '04913ef71413f1ed8a1c3941c6408d3e1c97cbe7', class: "co-column-picker__toolbar-sep" }), h("button", { key: '0a5155f8930abf84d24d17b12a6b3861656d3d46', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), h("button", { key: '51f2b7a319030654ed4ca6991b796b3e7a49196a', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), h("span", { key: '1da451722bb9481a6518338afd32f797985ebd4f', style: { flex: '1' } }), this.selectedValues.length > 0 && h("span", { key: '4ac4f4a852c2079ccbf6ff2f89eb32fc0a5979f4', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), h("div", { key: 'dd4f250a9e91bdd35329970b2b5539ad8ce8b3cb', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (h("div", { key: 'dd362cadf9e34d97bb2a8a157d35e9d1f3b1dfaf', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '7f156358ccf841c21f710d8d31770f75ccb5a947', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), h("span", { key: 'e1182644d6ad576951ca01dc57267529e0e6ea60', class: "co-column-picker__helper-text" }, this.helperText)))));
+    }
+    static get is() { return "co-column-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-column-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-column-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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"
+            },
+            "secondaryLabel": {
+                "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": "secondary-label"
+            },
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColumnOption[] | string[] | string",
+                    "resolved": "ColumnOption[] | string | string[]",
+                    "references": {
+                        "ColumnOption": {
+                            "location": "import",
+                            "path": "./utils/column-picker-tree",
+                            "id": "src/components/co-column-picker/utils/column-picker-tree.ts::ColumnOption",
+                            "referenceLocation": "ColumnOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "defaultValue": "'[]'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'[]'"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "true"
+            },
+            "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"
+            },
+            "showToolbar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-toolbar",
+                "defaultValue": "true"
+            },
+            "showSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-search",
+                "defaultValue": "true"
+            },
+            "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"
+            },
+            "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": "'Select\u2026'"
+            },
+            "maxHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-height",
+                "defaultValue": "220"
+            },
+            "emptyText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-text",
+                "defaultValue": "'No results found'"
+            },
+            "selectAllText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "select-all-text",
+                "defaultValue": "'Select all'"
+            },
+            "clearText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear-text",
+                "defaultValue": "'Clear'"
+            },
+            "expandText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expand-text",
+                "defaultValue": "'Expand'"
+            },
+            "collapseText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapse-text",
+                "defaultValue": "'Collapse'"
+            },
+            "selectedText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-text",
+                "defaultValue": "'selected'"
+            },
+            "sections": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColumnSection[] | string",
+                    "resolved": "ColumnSection[] | string",
+                    "references": {
+                        "ColumnSection": {
+                            "location": "import",
+                            "path": "./utils/column-picker-tree",
+                            "id": "src/components/co-column-picker/utils/column-picker-tree.ts::ColumnSection",
+                            "referenceLocation": "ColumnSection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sections",
+                "defaultValue": "'[]'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'error' | 'success' | 'warning' | 'info'",
+                    "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'default'"
+            },
+            "helperText": {
+                "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": "helper-text"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "query": {},
+            "expandedKeys": {},
+            "focused": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coChange",
+                "name": "coChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                }
+            }, {
+                "method": "coClear",
+                "name": "coClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coSearch",
+                "name": "coSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "onOptionsChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}