@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

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

@@ -0,0 +1,443 @@
+'use strict';
+
+var index = require('./index-BumlM92r.js');
+var normalizeText = require('./normalizeText-B-v-XPKf.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.normalizeText(q);
+    return nodes
+        .map(node => {
+        const labelMatch = normalizeText.normalizeText(node.label).includes(nq);
+        const formattedMatch = normalizeText.normalizeText(formatLabel(node.label)).includes(nq);
+        const pathMatch = normalizeText.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.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.normalizeText(n.label).includes(nq) || normalizeText.normalizeText(formatLabel(n.label)).includes(nq);
+                if (cm || sm) {
+                    keys.add(n.key);
+                    any = true;
+                }
+            }
+            else {
+                if (normalizeText.normalizeText(n.label).includes(nq) || normalizeText.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 (index.h("div", { class: "co-column-picker__node" }, index.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) }, index.h("co-checkbox", { checked: isLeaf ? isSelected : allChildrenSelected, indeterminate: !isLeaf && someChildrenSelected && !allChildrenSelected, disabled: disabled, onClick: (e) => { e.stopPropagation(); isLeaf ? onOptionClick(node.fullPath) : onParentCheck(node); } }), index.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 && index.h("span", { class: "co-column-picker__self-tag" }, "self"), !isLeaf && (index.h("span", { class: "co-column-picker__node-counter" }, selectedChildCount > 0 && [index.h("span", { class: "co-column-picker__counter-selected" }, selectedChildCount), index.h("span", { class: "co-column-picker__counter-sep" }, "/")], index.h("span", { class: "co-column-picker__counter-total" }, totalLeafCount))), !isLeaf && (index.h("span", { class: { 'co-column-picker__chevron': true, 'co-column-picker__chevron--open': isExpanded }, onClick: (e) => onToggleExpand(node.key, e) }, index.h("co-icon", { name: "caret-right", size: 16 })))), !isLeaf && isExpanded && node.children && (index.h("div", { class: "co-column-picker__node-children", style: { '--guide-left': `${depth * 20 + 19}px` } }, node.children.map(child => (index.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) {
+        index.registerInstance(this, hostRef);
+        this.coChange = index.createEvent(this, "coChange", 7);
+        this.coClear = index.createEvent(this, "coClear", 7);
+        this.coSearch = index.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 (index.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 && (index.h("div", { class: "co-column-picker__field-chips" }, selected.map(val => (index.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 && (index.h("span", { class: "co-column-picker__field-text" }, selected.map(v => labelMap.get(v) || formatLabel(v.split('.').pop() || v)).join(', '))), selected.length === 0 && index.h("span", { class: "co-column-picker__field-placeholder" }, this.placeholder), index.h("div", { class: "co-column-picker__field-actions" }, this.clearable && this.hasValue && !this.disabled && (index.h("button", { class: "co-column-picker__field-clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, index.h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), index.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 (index.h("div", { class: "co-column-picker__tree" }, filtered.map(s => [
+                index.h("div", { class: "co-column-picker__section-header" }, index.h("span", { class: "co-column-picker__section-label" }, s.label), s.prefix && index.h("span", { class: "co-column-picker__section-prefix" }, "(", s.prefix, ")")),
+                ...s.nodes.map(n => index.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 (index.h("div", { class: "co-column-picker__tree" }, ft.map(n => index.h(ColumnPickerNode, Object.assign({ node: n, depth: 0 }, nodeProps)))));
+    }
+    renderEmpty() {
+        return (index.h("div", { class: "co-column-picker__empty" }, index.h("co-icon", { name: "magnifying-glass", size: 40, class: "co-column-picker__empty-icon" }), index.h("span", null, this.emptyText)));
+    }
+    render() {
+        return (index.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) && (index.h("div", { key: 'ffdbae01974d6cfbce8c7aad7916f4fee5c1cca6', class: "co-column-picker__labels" }, this.label && index.h("label", { key: '91b946cf1eb15a492bcadd4f8d11eabc9a59e1bf', class: "co-column-picker__label" }, this.label), this.secondaryLabel && index.h("span", { key: 'bef413d01940a40778eb35b629a189166f7fb93d', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (index.h("div", { key: '8d9f43f64177b13732432ef198b5e6b13cebd36b', class: "co-column-picker__dropdown" }, this.showSearch && (index.h("div", { key: '693aa4d44f2dbd543d5ad7c907518329c4e97025', class: "co-column-picker__search" }, index.h("co-icon", { key: '781810b8326fb46b99afa6bbacf2c3976647d98b', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), index.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 && (index.h("button", { key: '482bb56991aa527744df0e0619753e2696f00372', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, index.h("co-icon", { key: '68090fb612a2ba97836c1127368e60d671bbd489', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (index.h("div", { key: '9afe3b43c5d6bbf8625819487ebfa8559478a71c', class: "co-column-picker__toolbar" }, index.h("button", { key: '55407fa68c881f79c4ca43359241e9180d3bb94b', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), index.h("button", { key: '55805e5ae2f629a5bb5ca7782de90558bae7f190', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), index.h("span", { key: '04913ef71413f1ed8a1c3941c6408d3e1c97cbe7', class: "co-column-picker__toolbar-sep" }), index.h("button", { key: '0a5155f8930abf84d24d17b12a6b3861656d3d46', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), index.h("button", { key: '51f2b7a319030654ed4ca6991b796b3e7a49196a', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), index.h("span", { key: '1da451722bb9481a6518338afd32f797985ebd4f', style: { flex: '1' } }), this.selectedValues.length > 0 && index.h("span", { key: '4ac4f4a852c2079ccbf6ff2f89eb32fc0a5979f4', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), index.h("div", { key: 'dd4f250a9e91bdd35329970b2b5539ad8ce8b3cb', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (index.h("div", { key: 'dd362cadf9e34d97bb2a8a157d35e9d1f3b1dfaf', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: '7f156358ccf841c21f710d8d31770f75ccb5a947', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), index.h("span", { key: 'e1182644d6ad576951ca01dc57267529e0e6ea60', class: "co-column-picker__helper-text" }, this.helperText)))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "options": [{
+                "onOptionsChange": 0
+            }]
+    }; }
+};
+CoColumnPicker.style = coColumnPickerCss();
+
+exports.co_column_picker = CoColumnPicker;