@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

package/dist/esm/co-column-picker.entry.js

@@ -0,0 +1,441 @@
+import { h, r as registerInstance, c as createEvent, a as getElement } from './index-BKmfyPZK.js';
+import { n as normalizeText } from './normalizeText-CQY6Ul7q.js';
+
+/**
+ * Pure tree-building, filtering, and string utilities for co-column-picker.
+ * No Stencil dependency — fully unit-testable.
+ */
+// ── JSON parse helpers ─────────────────────────────────────────
+function parsePaths(raw) {
+    let parsed = raw;
+    if (typeof parsed === 'string') {
+        try {
+            parsed = JSON.parse(parsed);
+        }
+        catch (_a) {
+            return [];
+        }
+    }
+    if (!Array.isArray(parsed))
+        return [];
+    return parsed.map(item => typeof item === 'string' ? item : item.value);
+}
+function parseSections(raw) {
+    let parsed = raw;
+    if (typeof parsed === 'string') {
+        try {
+            parsed = JSON.parse(parsed);
+        }
+        catch (_a) {
+            return [];
+        }
+    }
+    return Array.isArray(parsed) ? parsed : [];
+}
+function parseValues(raw) {
+    if (typeof raw === 'string') {
+        try {
+            return JSON.parse(raw);
+        }
+        catch (_a) {
+            return raw ? [raw] : [];
+        }
+    }
+    return Array.isArray(raw) ? raw : [];
+}
+function buildLabelMap(raw) {
+    let parsed = raw;
+    if (typeof parsed === 'string') {
+        try {
+            parsed = JSON.parse(parsed);
+        }
+        catch (_a) {
+            return new Map();
+        }
+    }
+    if (!Array.isArray(parsed))
+        return new Map();
+    const map = new Map();
+    for (const item of parsed) {
+        if (typeof item === 'string') {
+            map.set(item, formatLabel(item.split('.').pop() || item));
+        }
+        else {
+            const o = item;
+            map.set(o.value, o.label || o.value);
+        }
+    }
+    return map;
+}
+function formatLabel(str) {
+    if (!str)
+        return '';
+    return str.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/[_-]+/g, ' ').replace(/^\w/, c => c.toUpperCase());
+}
+function escapeHtml(str) {
+    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+function highlightLabel(text, search) {
+    if (!search)
+        return escapeHtml(text);
+    const escaped = search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    return escapeHtml(text).replace(new RegExp(`(${escaped})`, 'gi'), '<mark>$1</mark>');
+}
+// ── Tree building ──────────────────────────────────────────────
+function buildTree(flatPaths, labelMap) {
+    const pathSet = new Set(flatPaths);
+    const rootMap = {};
+    for (const path of flatPaths) {
+        const parts = path.split('.');
+        let currentMap = rootMap;
+        for (let i = 0; i < parts.length; i++) {
+            const part = parts[i];
+            const key = parts.slice(0, i + 1).join('.');
+            if (!currentMap[part]) {
+                const isLeaf = i === parts.length - 1;
+                const nodeLabel = (isLeaf && (labelMap === null || labelMap === void 0 ? void 0 : labelMap.get(key))) || part;
+                currentMap[part] = { label: nodeLabel, key, childrenMap: {} };
+            }
+            if (i < parts.length - 1) {
+                currentMap = currentMap[part].childrenMap;
+            }
+        }
+    }
+    const mapToArray = (map) => {
+        return Object.values(map).map((node) => {
+            const children = mapToArray(node.childrenMap);
+            const hasChildren = children.length > 0;
+            const isSelfSelectable = hasChildren && pathSet.has(node.key);
+            const result = { label: node.label, key: node.key, fullPath: node.key, children: hasChildren ? children : null };
+            if (isSelfSelectable && result.children) {
+                result.children.unshift({ label: node.label, key: node.key + '.__self', fullPath: node.key, children: null, isSelf: true });
+            }
+            return result;
+        });
+    };
+    return sortNodes(mapToArray(rootMap));
+}
+function sortNodes(nodes) {
+    return [...nodes]
+        .sort((a, b) => {
+        if (a.isSelf)
+            return -1;
+        if (b.isSelf)
+            return 1;
+        const aP = a.children && a.children.length > 0;
+        const bP = b.children && b.children.length > 0;
+        if (!aP && bP)
+            return -1;
+        if (aP && !bP)
+            return 1;
+        return a.label.localeCompare(b.label);
+    })
+        .map(node => (Object.assign(Object.assign({}, node), { children: node.children ? sortNodes(node.children) : null })));
+}
+function filterTree(nodes, q) {
+    const nq = normalizeText(q);
+    return nodes
+        .map(node => {
+        const labelMatch = normalizeText(node.label).includes(nq);
+        const formattedMatch = normalizeText(formatLabel(node.label)).includes(nq);
+        const pathMatch = normalizeText(node.fullPath).includes(nq);
+        if (!node.children || node.children.length === 0) {
+            return (labelMatch || formattedMatch || pathMatch) ? node : null;
+        }
+        const filteredChildren = filterTree(node.children, q);
+        if (labelMatch || formattedMatch || filteredChildren.length > 0) {
+            return Object.assign(Object.assign({}, node), { children: filteredChildren.length > 0 ? filteredChildren : node.children });
+        }
+        return null;
+    })
+        .filter(Boolean);
+}
+function collectAllLeafPaths(nodes) {
+    const paths = [];
+    for (const node of nodes) {
+        if (!node.children || node.children.length === 0)
+            paths.push(node.fullPath);
+        else
+            paths.push(...collectAllLeafPaths(node.children));
+    }
+    return paths;
+}
+// ── Auto-expand ────────────────────────────────────────────────
+function expandForSelected(tree, selected, current) {
+    if (!selected.length)
+        return current;
+    const keys = new Set(current);
+    const walk = (nodes) => {
+        var _a;
+        for (const n of nodes) {
+            if ((_a = n.children) === null || _a === void 0 ? void 0 : _a.length) {
+                if (collectAllLeafPaths(n.children).some(p => selected.includes(p)))
+                    keys.add(n.key);
+                walk(n.children);
+            }
+        }
+    };
+    walk(tree);
+    return keys;
+}
+function expandForQuery(nodes, q, current) {
+    const nq = normalizeText(q);
+    const keys = new Set(current);
+    const walk = (ns) => {
+        var _a;
+        let any = false;
+        for (const n of ns) {
+            if ((_a = n.children) === null || _a === void 0 ? void 0 : _a.length) {
+                const cm = walk(n.children);
+                const sm = normalizeText(n.label).includes(nq) || normalizeText(formatLabel(n.label)).includes(nq);
+                if (cm || sm) {
+                    keys.add(n.key);
+                    any = true;
+                }
+            }
+            else {
+                if (normalizeText(n.label).includes(nq) || normalizeText(formatLabel(n.label)).includes(nq))
+                    any = true;
+            }
+        }
+        return any;
+    };
+    walk(nodes);
+    return keys;
+}
+function collectAllExpandableKeys(nodes) {
+    const keys = new Set();
+    const walk = (ns) => {
+        var _a;
+        for (const n of ns) {
+            if ((_a = n.children) === null || _a === void 0 ? void 0 : _a.length) {
+                keys.add(n.key);
+                walk(n.children);
+            }
+        }
+    };
+    walk(nodes);
+    return keys;
+}
+
+/**
+ * Stencil FunctionalComponent for rendering a single tree node
+ * in the column-picker dropdown.
+ */
+const ColumnPickerNode = (props) => {
+    const { node, depth, selected, expandedKeys, disabled, query, onOptionClick, onParentCheck, onToggleExpand } = props;
+    const isLeaf = !node.children || node.children.length === 0;
+    const isExpanded = expandedKeys.has(node.key);
+    const isSelected = isLeaf && selected.includes(node.fullPath);
+    let allChildrenSelected = false;
+    let someChildrenSelected = false;
+    let selectedChildCount = 0;
+    let totalLeafCount = 0;
+    if (!isLeaf && node.children) {
+        const lp = collectAllLeafPaths(node.children);
+        totalLeafCount = lp.length;
+        selectedChildCount = lp.filter(p => selected.includes(p)).length;
+        allChildrenSelected = totalLeafCount > 0 && selectedChildCount === totalLeafCount;
+        someChildrenSelected = selectedChildCount > 0;
+    }
+    return (h("div", { class: "co-column-picker__node" }, h("div", { class: {
+            'co-column-picker__node-row': true,
+            'co-column-picker__node-row--leaf': isLeaf,
+            'co-column-picker__node-row--parent': !isLeaf,
+            'co-column-picker__node-row--expanded': !isLeaf && isExpanded,
+            'co-column-picker__node-row--selected': isLeaf && isSelected,
+        }, style: { paddingLeft: `${depth * 20 + 10}px` }, onClick: (e) => isLeaf ? onOptionClick(node.fullPath) : onToggleExpand(node.key, e) }, h("co-checkbox", { checked: isLeaf ? isSelected : allChildrenSelected, indeterminate: !isLeaf && someChildrenSelected && !allChildrenSelected, disabled: disabled, onClick: (e) => { e.stopPropagation(); isLeaf ? onOptionClick(node.fullPath) : onParentCheck(node); } }), h("span", { class: {
+            'co-column-picker__node-label': true,
+            'co-column-picker__node-label--parent': !isLeaf,
+            'co-column-picker__node-label--self': !!node.isSelf,
+        }, innerHTML: highlightLabel(formatLabel(node.label), query) }), node.isSelf && h("span", { class: "co-column-picker__self-tag" }, "self"), !isLeaf && (h("span", { class: "co-column-picker__node-counter" }, selectedChildCount > 0 && [h("span", { class: "co-column-picker__counter-selected" }, selectedChildCount), h("span", { class: "co-column-picker__counter-sep" }, "/")], h("span", { class: "co-column-picker__counter-total" }, totalLeafCount))), !isLeaf && (h("span", { class: { 'co-column-picker__chevron': true, 'co-column-picker__chevron--open': isExpanded }, onClick: (e) => onToggleExpand(node.key, e) }, h("co-icon", { name: "caret-right", size: 16 })))), !isLeaf && isExpanded && node.children && (h("div", { class: "co-column-picker__node-children", style: { '--guide-left': `${depth * 20 + 19}px` } }, node.children.map(child => (h(ColumnPickerNode, { node: child, depth: depth + 1, selected: selected, expandedKeys: expandedKeys, disabled: disabled, query: query, onOptionClick: onOptionClick, onParentCheck: onParentCheck, onToggleExpand: onToggleExpand })))))));
+};
+
+const coColumnPickerCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;position:relative}.co-column-picker{display:flex;flex-direction:column;gap:var(--co-spacing-xs);position:relative}.co-column-picker__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-xs)}.co-column-picker__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-column-picker__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-column-picker--disabled .co-column-picker__label,.co-column-picker--disabled .co-column-picker__secondary-label{color:var(--co-semantic-text-disabled)}.co-column-picker__field{display:flex;align-items:center;flex-wrap:wrap;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs) var(--co-spacing-md);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease}.co-column-picker__field--focused{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-column-picker__field--disabled{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-column-picker--error .co-column-picker__field{border-color:var(--co-semantic-status-error)}.co-column-picker--success .co-column-picker__field{border-color:var(--co-semantic-status-success)}.co-column-picker--warning .co-column-picker__field{border-color:var(--co-color-status-review)}.co-column-picker--info .co-column-picker__field{border-color:var(--co-semantic-status-info)}.co-column-picker__field-text{flex:1;min-width:0;color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-column-picker__field-placeholder{flex:1;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400}.co-column-picker__field-chips{display:flex;flex-wrap:wrap;gap:var(--co-spacing-xs);flex:1}.co-column-picker__field-actions{display:flex;align-items:center;gap:var(--co-spacing-xs);flex-shrink:0;margin-left:auto}.co-column-picker__field-clear{display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-column-picker__field-clear:hover{color:var(--co-semantic-text-default)}.co-column-picker__field-caret{color:var(--co-semantic-text-muted);display:flex;align-items:center;transition:color 0.15s ease}.co-column-picker__field--open .co-column-picker__field-caret{color:var(--co-semantic-text-default)}.co-column-picker__dropdown{position:absolute;top:100%;left:0;right:0;z-index:100;margin-top:var(--co-spacing-xs);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-sm, 12px);box-shadow:0 4px 16px var(--co-color-opacity-negro-8);overflow:hidden}.co-column-picker__search{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs) var(--co-spacing-md);border-bottom:1px solid var(--co-semantic-border-subtle);transition:border-color 0.2s ease}.co-column-picker__search:focus-within{border-color:var(--co-semantic-border-focus)}.co-column-picker__search-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-column-picker__search-input{flex:1;border:none;outline:none;background:transparent;font-size:var(--co-font-size-14);font-family:inherit;color:var(--co-semantic-text-default);line-height:1.4;padding:0}.co-column-picker__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-column-picker__search-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:none;cursor:pointer;color:var(--co-semantic-text-muted);padding:0;border-radius:var(--co-border-radius-xxs);transition:all 0.15s ease}.co-column-picker__search-clear:hover{color:var(--co-semantic-text-default);background:var(--co-semantic-surface-hover)}.co-column-picker__toolbar{display:flex;align-items:center;gap:2px;padding:var(--co-spacing-xs) var(--co-spacing-md);border-bottom:1px solid var(--co-semantic-border-subtle)}.co-column-picker__toolbar-sep{width:1px;height:14px;background:var(--co-semantic-border-subtle);margin:0 var(--co-spacing-xs)}.co-column-picker__toolbar-btn{border:none;background:none;font-size:11.5px;font-family:inherit;color:var(--co-semantic-text-muted);cursor:pointer;padding:3px var(--co-spacing-xs);font-weight:500;transition:all 0.15s ease;border-radius:var(--co-border-radius-xxs);line-height:1.4}.co-column-picker__toolbar-btn:hover{color:var(--co-semantic-text-default);background:var(--co-semantic-surface-hover)}.co-column-picker__toolbar-counter{font-size:11.5px;font-weight:500;color:var(--co-semantic-text-muted);font-variant-numeric:tabular-nums;padding:2px var(--co-spacing-xs);background:var(--co-semantic-surface-muted);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xxs)}.co-column-picker__scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--co-semantic-border-default) transparent}.co-column-picker__scroll::-webkit-scrollbar{width:6px}.co-column-picker__scroll::-webkit-scrollbar-track{background:transparent}.co-column-picker__scroll::-webkit-scrollbar-thumb{background:var(--co-semantic-border-default);border-radius:var(--co-border-radius-full)}.co-column-picker__tree{padding:var(--co-spacing-xs) 0}.co-column-picker__node{user-select:none}.co-column-picker__node-row{display:flex;align-items:center;min-height:34px;padding:0 12px 0 10px;gap:var(--co-spacing-xs);cursor:pointer;transition:background-color 0.1s ease}.co-column-picker__node-row:hover{background-color:var(--co-semantic-surface-hover)}.co-column-picker__node-row--parent:hover{background-color:var(--co-semantic-surface-muted)}.co-column-picker__node-row--expanded{background-color:var(--co-semantic-surface-muted)}.co-column-picker__node-row--selected{background-color:var(--co-semantic-surface-muted)}.co-column-picker__node-label{flex:1;font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.co-column-picker__node-label--parent{font-weight:600;text-transform:capitalize}.co-column-picker__node-label--self{font-weight:400;color:var(--co-semantic-text-muted);text-transform:none}.co-column-picker__node-label mark{background:color-mix(in srgb, var(--co-color-primary-amarillo) 30%, transparent);color:inherit;padding:0 1px;border-radius:1px}.co-column-picker__self-tag{flex-shrink:0;font-size:10px;font-weight:500;color:var(--co-semantic-text-muted);background:var(--co-semantic-surface-muted);padding:1px 6px;border-radius:var(--co-border-radius-xxs);border:1px solid var(--co-semantic-border-subtle);text-transform:lowercase}.co-column-picker__node-counter{flex-shrink:0;font-size:11px;font-weight:400;color:var(--co-semantic-text-muted);font-variant-numeric:tabular-nums}.co-column-picker__counter-selected{font-weight:600;color:var(--co-semantic-text-default)}.co-column-picker__counter-sep{color:var(--co-semantic-border-default);margin:0 1px}.co-column-picker__counter-total{color:var(--co-semantic-text-muted)}.co-column-picker__chevron{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--co-semantic-text-muted);margin-left:var(--co-spacing-xs);transition:transform 0.2s ease, color 0.2s ease}.co-column-picker__chevron:hover{color:var(--co-semantic-text-default)}.co-column-picker__chevron--open{transform:rotate(90deg);color:var(--co-semantic-text-default)}.co-column-picker__node-children{position:relative}.co-column-picker__node-children::before{content:'';position:absolute;left:var(--guide-left, 19px);top:0;bottom:0;width:1px;background:var(--co-semantic-border-default)}.co-column-picker__section-header{display:flex;align-items:center;gap:6px;padding:var(--co-spacing-xs) var(--co-spacing-md) var(--co-spacing-xs);margin-top:var(--co-spacing-xs);border-top:1px solid var(--co-semantic-border-subtle)}.co-column-picker__section-header:first-child{margin-top:0;border-top:none}.co-column-picker__section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--co-semantic-text-secondary)}.co-column-picker__section-prefix{font-size:10px;font-weight:500;color:var(--co-semantic-text-muted);opacity:0.75}.co-column-picker__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-spacing-xs);padding:40px 16px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14)}.co-column-picker__empty-icon{color:var(--co-semantic-border-default)}.co-column-picker__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-column-picker__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-column-picker__helper-text{font-size:var(--co-font-size-12, 12px);font-weight:400;line-height:1.4;color:var(--co-semantic-text-muted)}.co-column-picker__helper--error .co-column-picker__helper-text,.co-column-picker__helper--error .co-column-picker__helper-icon{color:var(--co-semantic-status-error)}.co-column-picker__helper--success .co-column-picker__helper-text,.co-column-picker__helper--success .co-column-picker__helper-icon{color:var(--co-semantic-status-success)}.co-column-picker__helper--warning .co-column-picker__helper-text,.co-column-picker__helper--warning .co-column-picker__helper-icon{color:var(--co-color-status-review)}.co-column-picker__helper--info .co-column-picker__helper-text,.co-column-picker__helper--info .co-column-picker__helper-icon{color:var(--co-semantic-status-info)}`;
+
+const CoColumnPicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coChange = createEvent(this, "coChange", 7);
+        this.coClear = createEvent(this, "coClear", 7);
+        this.coSearch = createEvent(this, "coSearch", 7);
+        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: '49be1e863b1bf55a1c80cdb840a2df1abe863bf1', 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: 'ebd5ecc3f9b3445c78406dc9d6c8713b1286e03f', class: "co-column-picker__labels" }, this.label && h("label", { key: 'e397c8718a158311bc710d792007f2babe5a5195', class: "co-column-picker__label" }, this.label), this.secondaryLabel && h("span", { key: '242cd81ea707193f59f016da58739fee1bfd61c8', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (h("div", { key: '7a8cdc490af2be181d235a0a42a44386e5ce3a51', class: "co-column-picker__dropdown" }, this.showSearch && (h("div", { key: '957e1979f0a940ee12e21c5ca6ad5c2605057778', class: "co-column-picker__search" }, h("co-icon", { key: 'c828aa61afdb223205a4006ef7f7518be8f851da', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), h("input", { key: 'de96b64126a49ed365c6edda08503caabcd5f992', 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: 'a14e1afe2498edc0e3701a6f547ca99cc25f930a', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, h("co-icon", { key: 'da5ce1f1fe1660b6e9bc6cbfa1ebb6362a756e84', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (h("div", { key: 'a64cd6debf2a138e7262e0c94aafb4449d33df81', class: "co-column-picker__toolbar" }, h("button", { key: 'e5a337595da0f08efe81b89f41cd40dfee38568a', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), h("button", { key: '13c2914c19c8e61ffb9573f8483bd1b11d7e399c', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), h("span", { key: '1af20f2508a9f028d27b5736eaa89af8876153f6', class: "co-column-picker__toolbar-sep" }), h("button", { key: 'ae1736fca857c7a778a687f4e14e736c4560dc3f', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), h("button", { key: '13e0cd91b2611b436b44d851b57312bb4e517e3b', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), h("span", { key: 'fc6cc54ef7737a02922b0a0c12db64a52580b51a', style: { flex: '1' } }), this.selectedValues.length > 0 && h("span", { key: '63aeaef90a9b72c51c3bbd07da721d7c5391ddcb', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), h("div", { key: '9cd4f45dd0c182e50b219f5b6ff240a2e752ba94', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (h("div", { key: '09a43ae8972be6b03d1117a2116175ca59a95a68', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'f0fc5ff8125baf3412a90045b2c9bb7238a6c951', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), h("span", { key: '72de44605e22d553bd484b9dbd0c91f17e817f52', class: "co-column-picker__helper-text" }, this.helperText)))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "options": [{
+                "onOptionsChange": 0
+            }]
+    }; }
+};
+CoColumnPicker.style = coColumnPickerCss();
+
+export { CoColumnPicker as co_column_picker };