@life-cockpit/angular-ui-kit 1.11.9 → 1.11.10

package/fesm2022/life-cockpit-angular-ui-kit.mjs

@@ -12179,6 +12179,328 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 args: ['document:mouseup']
             }] } });
 
+/**
+ * File-type → icon mapping for the TreeView component.
+ *
+ * Icon names refer to Tabler Icons (the design system's icon source).
+ * Resolution order for a file node:
+ *   1. explicit `node.icon`
+ *   2. exact file name match (e.g. `package.json`, `Dockerfile`)
+ *   3. file extension match (e.g. `.ts`, `.png`)
+ *   4. generic file fallback
+ */
+/** Icon used for collapsed folders. */
+const FOLDER_ICON = 'folder';
+/** Icon used for expanded (open) folders. */
+const FOLDER_OPEN_ICON = 'folder-open';
+/** Generic fallback icon for files with no specific match. */
+const FILE_FALLBACK_ICON = 'file';
+/** Map of well-known file names (lower-cased) to icons. */
+const FILE_NAME_ICONS = {
+    'package.json': 'brand-npm',
+    'package-lock.json': 'brand-npm',
+    'yarn.lock': 'brand-yarn',
+    'pnpm-lock.yaml': 'brand-pnpm',
+    'dockerfile': 'brand-docker',
+    'docker-compose.yml': 'brand-docker',
+    'docker-compose.yaml': 'brand-docker',
+    '.gitignore': 'brand-git',
+    '.gitattributes': 'brand-git',
+    '.gitmodules': 'brand-git',
+    'readme.md': 'book',
+    'license': 'license',
+    'license.md': 'license',
+    '.env': 'key',
+    '.env.local': 'key',
+    '.editorconfig': 'settings',
+    '.prettierrc': 'settings',
+    '.eslintrc': 'settings',
+    'tsconfig.json': 'brand-typescript',
+    'angular.json': 'brand-angular',
+    'nx.json': 'settings',
+    'makefile': 'terminal',
+};
+/** Map of file extensions (without dot, lower-cased) to icons. */
+const FILE_EXT_ICONS = {
+    // Languages
+    ts: 'brand-typescript',
+    tsx: 'brand-typescript',
+    js: 'brand-javascript',
+    jsx: 'brand-javascript',
+    mjs: 'brand-javascript',
+    cjs: 'brand-javascript',
+    html: 'brand-html5',
+    htm: 'brand-html5',
+    css: 'brand-css3',
+    scss: 'brand-sass',
+    sass: 'brand-sass',
+    less: 'brand-css3',
+    py: 'brand-python',
+    rb: 'diamond',
+    go: 'brand-golang',
+    rs: 'brand-rust',
+    java: 'coffee',
+    kt: 'brand-kotlin',
+    swift: 'brand-swift',
+    c: 'file-code',
+    h: 'file-code',
+    cpp: 'brand-cpp',
+    cs: 'brand-c-sharp',
+    php: 'brand-php',
+    dart: 'brand-flutter',
+    sh: 'terminal-2',
+    bash: 'terminal-2',
+    zsh: 'terminal-2',
+    sql: 'database',
+    // Data / config
+    json: 'braces',
+    jsonc: 'braces',
+    yml: 'file-code',
+    yaml: 'file-code',
+    toml: 'file-code',
+    xml: 'file-code',
+    ini: 'settings',
+    env: 'key',
+    // Docs
+    md: 'markdown',
+    mdx: 'markdown',
+    txt: 'file-text',
+    pdf: 'file-type-pdf',
+    doc: 'file-text',
+    docx: 'file-text',
+    csv: 'file-spreadsheet',
+    xls: 'file-spreadsheet',
+    xlsx: 'file-spreadsheet',
+    // Images
+    png: 'photo',
+    jpg: 'photo',
+    jpeg: 'photo',
+    gif: 'photo',
+    webp: 'photo',
+    svg: 'file-vector',
+    ico: 'photo',
+    bmp: 'photo',
+    // Media
+    mp3: 'music',
+    wav: 'music',
+    mp4: 'video',
+    mov: 'video',
+    webm: 'video',
+    // Archives
+    zip: 'file-zip',
+    tar: 'file-zip',
+    gz: 'file-zip',
+    rar: 'file-zip',
+    '7z': 'file-zip',
+    // Fonts
+    woff: 'typography',
+    woff2: 'typography',
+    ttf: 'typography',
+    otf: 'typography',
+    // Misc
+    lock: 'lock',
+};
+/**
+ * Resolve the icon name for a file based on its name.
+ * Performs exact-name then extension lookup, falling back to a generic file icon.
+ */
+function resolveFileIcon(fileName) {
+    const lower = fileName.toLowerCase();
+    const byName = FILE_NAME_ICONS[lower];
+    if (byName)
+        return byName;
+    const dotIndex = lower.lastIndexOf('.');
+    if (dotIndex > 0 && dotIndex < lower.length - 1) {
+        const ext = lower.slice(dotIndex + 1);
+        const byExt = FILE_EXT_ICONS[ext];
+        if (byExt)
+            return byExt;
+    }
+    return FILE_FALLBACK_ICON;
+}
+
+const BADGE_STATUS_COLOR = {
+    default: 'var(--color-neutral-400)',
+    added: 'var(--color-success-default, #16a34a)',
+    modified: 'var(--color-warning-default, #d97706)',
+    removed: 'var(--color-error-default, #dc2626)',
+    muted: 'var(--color-neutral-300)',
+};
+function nodeType(node) {
+    return node.type ?? (node.children ? 'folder' : 'file');
+}
+/**
+ * Tree view component for visualizing file / folder hierarchies such as a
+ * complete GitHub project.
+ *
+ * Features:
+ * - Recursive folder / file rendering from a single `nodes` input
+ * - Automatic file-type icons by extension and well-known file name,
+ *   with open / closed folder icons
+ * - Expand / collapse folders, with expand-all / collapse-all helpers
+ * - Two-way bound selection and a `nodeClick` event
+ * - Indentation guide lines for readability
+ * - Optional per-node status badges (added / modified / removed)
+ * - Keyboard accessible (Enter / Space to toggle or select)
+ * - Dark / light theme support via design tokens
+ *
+ * @example
+ * ```html
+ * <lc-tree-view [nodes]="projectTree" [(selectedId)]="selected" />
+ * ```
+ */
+class TreeViewComponent {
+    /** The root-level nodes of the tree. */
+    nodes = input.required(...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    /** Id (or path) of the currently selected node (two-way bindable). */
+    selectedId = model(null, ...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
+    /** Show indentation guide lines. */
+    showGuides = input(true, ...(ngDevMode ? [{ debugName: "showGuides" }] : /* istanbul ignore next */ []));
+    /** Show the expand-all / collapse-all toolbar. */
+    showToolbar = input(true, ...(ngDevMode ? [{ debugName: "showToolbar" }] : /* istanbul ignore next */ []));
+    /** Icon size for node icons. */
+    iconSize = input('sm', ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    /** Emitted when a node is clicked / activated. */
+    nodeClick = output();
+    /** Set of node ids the user has explicitly expanded / collapsed. */
+    expandOverrides = signal(new Map(), ...(ngDevMode ? [{ debugName: "expandOverrides" }] : /* istanbul ignore next */ []));
+    /** Flattened, render-ready list of visible nodes. */
+    visibleNodes = computed(() => {
+        const out = [];
+        const overrides = this.expandOverrides();
+        this.flatten(this.nodes(), 0, '', [], overrides, out);
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "visibleNodes" }] : /* istanbul ignore next */ []));
+    badgeColor(status) {
+        return BADGE_STATUS_COLOR[status];
+    }
+    onNodeClick(flat) {
+        if (flat.disabled)
+            return;
+        if (flat.hasChildren) {
+            this.toggle(flat);
+        }
+        this.selectedId.set(flat.id);
+        const original = this.findNode(this.nodes(), '', flat.id);
+        if (original)
+            this.nodeClick.emit(original);
+    }
+    onToggleClick(flat, event) {
+        event.stopPropagation();
+        if (!flat.disabled)
+            this.toggle(flat);
+    }
+    onKeydown(flat, event) {
+        if (flat.disabled)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.onNodeClick(flat);
+        }
+        else if (event.key === 'ArrowRight' && flat.hasChildren && !flat.expanded) {
+            event.preventDefault();
+            this.setExpanded(flat.id, true);
+        }
+        else if (event.key === 'ArrowLeft' && flat.hasChildren && flat.expanded) {
+            event.preventDefault();
+            this.setExpanded(flat.id, false);
+        }
+    }
+    /** Expand every folder in the tree. */
+    expandAll() {
+        this.setAll(true);
+    }
+    /** Collapse every folder in the tree. */
+    collapseAll() {
+        this.setAll(false);
+    }
+    trackById = (_, n) => n.id;
+    // ── internals ──────────────────────────────────────────────────────────────
+    toggle(flat) {
+        this.setExpanded(flat.id, !flat.expanded);
+    }
+    setExpanded(id, value) {
+        this.expandOverrides.update((map) => {
+            const next = new Map(map);
+            next.set(id, value);
+            return next;
+        });
+    }
+    setAll(value) {
+        const next = new Map();
+        const walk = (nodes, parentPath) => {
+            for (const node of nodes) {
+                const id = node.id ?? `${parentPath}/${node.name}`;
+                if (nodeType(node) === 'folder') {
+                    next.set(id, value);
+                    if (node.children)
+                        walk(node.children, id);
+                }
+            }
+        };
+        walk(this.nodes(), '');
+        this.expandOverrides.set(next);
+    }
+    isExpanded(id, node, overrides) {
+        const override = overrides.get(id);
+        if (override !== undefined)
+            return override;
+        return node.expanded ?? false;
+    }
+    flatten(nodes, depth, parentPath, ancestorHasSibling, overrides, out) {
+        nodes.forEach((node, index) => {
+            const id = node.id ?? `${parentPath}/${node.name}`;
+            const type = nodeType(node);
+            const hasChildren = type === 'folder' && !!node.children?.length;
+            const expanded = hasChildren && this.isExpanded(id, node, overrides);
+            const isLast = index === nodes.length - 1;
+            out.push({
+                id,
+                name: node.name,
+                type,
+                depth,
+                hasChildren,
+                expanded,
+                icon: this.resolveIcon(node, type, expanded),
+                badge: node.badge,
+                status: node.status ?? 'default',
+                disabled: node.disabled ?? false,
+                ancestorHasSibling,
+                isLast,
+            });
+            if (expanded && node.children) {
+                this.flatten(node.children, depth + 1, id, [...ancestorHasSibling, !isLast], overrides, out);
+            }
+        });
+    }
+    resolveIcon(node, type, expanded) {
+        if (node.icon)
+            return node.icon;
+        if (type === 'folder')
+            return expanded ? FOLDER_OPEN_ICON : FOLDER_ICON;
+        return node.name ? resolveFileIcon(node.name) : FILE_FALLBACK_ICON;
+    }
+    findNode(nodes, parentPath, targetId) {
+        for (const node of nodes) {
+            const id = node.id ?? `${parentPath}/${node.name}`;
+            if (id === targetId)
+                return node;
+            if (node.children) {
+                const found = this.findNode(node.children, id, targetId);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TreeViewComponent, isStandalone: true, selector: "lc-tree-view", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, showGuides: { classPropertyName: "showGuides", publicName: "showGuides", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedId: "selectedIdChange", nodeClick: "nodeClick" }, host: { classAttribute: "lc-tree-view" }, ngImport: i0, template: "@if (showToolbar()) {\n  <div class=\"lc-tree-view__toolbar\">\n    <button type=\"button\" class=\"lc-tree-view__tool-btn\" (click)=\"expandAll()\" title=\"Expand all\">\n      <lc-icon name=\"fold-down\" size=\"xs\" [decorative]=\"true\" />\n      <span>Expand all</span>\n    </button>\n    <button type=\"button\" class=\"lc-tree-view__tool-btn\" (click)=\"collapseAll()\" title=\"Collapse all\">\n      <lc-icon name=\"fold-up\" size=\"xs\" [decorative]=\"true\" />\n      <span>Collapse all</span>\n    </button>\n  </div>\n}\n\n<ul class=\"lc-tree-view__list\" role=\"tree\">\n  @for (node of visibleNodes(); track trackById($index, node)) {\n    <li\n      class=\"lc-tree-view__item\"\n      [class.lc-tree-view__item--selected]=\"node.id === selectedId()\"\n      [class.lc-tree-view__item--disabled]=\"node.disabled\"\n      [class.lc-tree-view__item--folder]=\"node.type === 'folder'\"\n      role=\"treeitem\"\n      [attr.aria-level]=\"node.depth + 1\"\n      [attr.aria-expanded]=\"node.hasChildren ? node.expanded : null\"\n      [attr.aria-selected]=\"node.id === selectedId()\"\n      [attr.aria-disabled]=\"node.disabled ? true : null\"\n      [tabindex]=\"node.disabled ? -1 : 0\"\n      (click)=\"onNodeClick(node)\"\n      (keydown)=\"onKeydown(node, $event)\"\n    >\n      <!-- indentation + guide lines -->\n      @for (hasSibling of node.ancestorHasSibling; track $index) {\n        <span\n          class=\"lc-tree-view__indent\"\n          [class.lc-tree-view__indent--guide]=\"showGuides() && hasSibling\"\n        ></span>\n      }\n\n      <!-- expand / collapse chevron -->\n      <span class=\"lc-tree-view__chevron\">\n        @if (node.hasChildren) {\n          <button\n            type=\"button\"\n            class=\"lc-tree-view__chevron-btn\"\n            [class.lc-tree-view__chevron-btn--expanded]=\"node.expanded\"\n            (click)=\"onToggleClick(node, $event)\"\n            [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n            tabindex=\"-1\"\n          >\n            <lc-icon name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n          </button>\n        }\n      </span>\n\n      <!-- type / file icon -->\n      <span\n        class=\"lc-tree-view__icon\"\n        [style.color]=\"\n          node.status === 'default' ? null : badgeColor(node.status)\n        \"\n      >\n        <lc-icon [name]=\"node.icon\" [size]=\"iconSize()\" [decorative]=\"true\" />\n      </span>\n\n      <!-- label -->\n      <span class=\"lc-tree-view__label\">{{ node.name }}</span>\n\n      <!-- badge -->\n      @if (node.badge) {\n        <span\n          class=\"lc-tree-view__badge\"\n          [style.color]=\"badgeColor(node.status)\"\n          [style.border-color]=\"badgeColor(node.status)\"\n          >{{ node.badge }}</span\n        >\n      }\n    </li>\n  }\n</ul>\n", styles: [":host{display:block;border:1px solid var(--color-neutral-200);border-radius:8px;background:var(--color-neutral-0, #fff);overflow:hidden;font-size:13px;color:var(--color-neutral-900)}.lc-tree-view__toolbar{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-50);-webkit-user-select:none;user-select:none}.lc-tree-view__tool-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--color-neutral-600);font-size:12px;cursor:pointer;line-height:1}.lc-tree-view__tool-btn:hover{background:var(--color-neutral-100);color:var(--color-neutral-900)}.lc-tree-view__list{list-style:none;margin:0;padding:4px 0}.lc-tree-view__item{display:flex;align-items:center;height:26px;padding-right:8px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;outline:none}.lc-tree-view__item:hover{background:var(--color-neutral-100)}.lc-tree-view__item:focus-visible{box-shadow:inset 0 0 0 2px var(--color-primary-400)}.lc-tree-view__item--selected{background:var(--color-primary-50)}.lc-tree-view__item--selected:hover{background:var(--color-primary-100, var(--color-primary-50))}.lc-tree-view__item--selected .lc-tree-view__label{color:var(--color-primary-700);font-weight:500}.lc-tree-view__item--disabled{opacity:.5;cursor:not-allowed}.lc-tree-view__item--disabled:hover{background:transparent}.lc-tree-view__indent{flex:0 0 18px;width:18px;height:100%;position:relative}.lc-tree-view__indent--guide:before{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--color-neutral-200)}.lc-tree-view__chevron{flex:0 0 18px;width:18px;display:flex;align-items:center;justify-content:center;color:var(--color-neutral-500)}.lc-tree-view__chevron-btn{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:inherit;cursor:pointer;border-radius:3px;transition:transform .12s ease}.lc-tree-view__chevron-btn:hover{background:var(--color-neutral-200)}.lc-tree-view__chevron-btn--expanded{transform:rotate(90deg)}.lc-tree-view__icon{display:flex;align-items:center;margin-right:6px;color:var(--color-neutral-500)}.lc-tree-view__item--folder .lc-tree-view__icon{color:var(--color-primary-500, #6366f1)}.lc-tree-view__label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-neutral-800)}.lc-tree-view__badge{flex:0 0 auto;margin-left:8px;padding:1px 6px;border:1px solid;border-radius:10px;font-size:10px;line-height:1.4;font-weight:600;text-transform:uppercase;letter-spacing:.02em}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TreeViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lc-tree-view', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'lc-tree-view' }, template: "@if (showToolbar()) {\n  <div class=\"lc-tree-view__toolbar\">\n    <button type=\"button\" class=\"lc-tree-view__tool-btn\" (click)=\"expandAll()\" title=\"Expand all\">\n      <lc-icon name=\"fold-down\" size=\"xs\" [decorative]=\"true\" />\n      <span>Expand all</span>\n    </button>\n    <button type=\"button\" class=\"lc-tree-view__tool-btn\" (click)=\"collapseAll()\" title=\"Collapse all\">\n      <lc-icon name=\"fold-up\" size=\"xs\" [decorative]=\"true\" />\n      <span>Collapse all</span>\n    </button>\n  </div>\n}\n\n<ul class=\"lc-tree-view__list\" role=\"tree\">\n  @for (node of visibleNodes(); track trackById($index, node)) {\n    <li\n      class=\"lc-tree-view__item\"\n      [class.lc-tree-view__item--selected]=\"node.id === selectedId()\"\n      [class.lc-tree-view__item--disabled]=\"node.disabled\"\n      [class.lc-tree-view__item--folder]=\"node.type === 'folder'\"\n      role=\"treeitem\"\n      [attr.aria-level]=\"node.depth + 1\"\n      [attr.aria-expanded]=\"node.hasChildren ? node.expanded : null\"\n      [attr.aria-selected]=\"node.id === selectedId()\"\n      [attr.aria-disabled]=\"node.disabled ? true : null\"\n      [tabindex]=\"node.disabled ? -1 : 0\"\n      (click)=\"onNodeClick(node)\"\n      (keydown)=\"onKeydown(node, $event)\"\n    >\n      <!-- indentation + guide lines -->\n      @for (hasSibling of node.ancestorHasSibling; track $index) {\n        <span\n          class=\"lc-tree-view__indent\"\n          [class.lc-tree-view__indent--guide]=\"showGuides() && hasSibling\"\n        ></span>\n      }\n\n      <!-- expand / collapse chevron -->\n      <span class=\"lc-tree-view__chevron\">\n        @if (node.hasChildren) {\n          <button\n            type=\"button\"\n            class=\"lc-tree-view__chevron-btn\"\n            [class.lc-tree-view__chevron-btn--expanded]=\"node.expanded\"\n            (click)=\"onToggleClick(node, $event)\"\n            [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n            tabindex=\"-1\"\n          >\n            <lc-icon name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n          </button>\n        }\n      </span>\n\n      <!-- type / file icon -->\n      <span\n        class=\"lc-tree-view__icon\"\n        [style.color]=\"\n          node.status === 'default' ? null : badgeColor(node.status)\n        \"\n      >\n        <lc-icon [name]=\"node.icon\" [size]=\"iconSize()\" [decorative]=\"true\" />\n      </span>\n\n      <!-- label -->\n      <span class=\"lc-tree-view__label\">{{ node.name }}</span>\n\n      <!-- badge -->\n      @if (node.badge) {\n        <span\n          class=\"lc-tree-view__badge\"\n          [style.color]=\"badgeColor(node.status)\"\n          [style.border-color]=\"badgeColor(node.status)\"\n          >{{ node.badge }}</span\n        >\n      }\n    </li>\n  }\n</ul>\n", styles: [":host{display:block;border:1px solid var(--color-neutral-200);border-radius:8px;background:var(--color-neutral-0, #fff);overflow:hidden;font-size:13px;color:var(--color-neutral-900)}.lc-tree-view__toolbar{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-50);-webkit-user-select:none;user-select:none}.lc-tree-view__tool-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--color-neutral-600);font-size:12px;cursor:pointer;line-height:1}.lc-tree-view__tool-btn:hover{background:var(--color-neutral-100);color:var(--color-neutral-900)}.lc-tree-view__list{list-style:none;margin:0;padding:4px 0}.lc-tree-view__item{display:flex;align-items:center;height:26px;padding-right:8px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;outline:none}.lc-tree-view__item:hover{background:var(--color-neutral-100)}.lc-tree-view__item:focus-visible{box-shadow:inset 0 0 0 2px var(--color-primary-400)}.lc-tree-view__item--selected{background:var(--color-primary-50)}.lc-tree-view__item--selected:hover{background:var(--color-primary-100, var(--color-primary-50))}.lc-tree-view__item--selected .lc-tree-view__label{color:var(--color-primary-700);font-weight:500}.lc-tree-view__item--disabled{opacity:.5;cursor:not-allowed}.lc-tree-view__item--disabled:hover{background:transparent}.lc-tree-view__indent{flex:0 0 18px;width:18px;height:100%;position:relative}.lc-tree-view__indent--guide:before{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--color-neutral-200)}.lc-tree-view__chevron{flex:0 0 18px;width:18px;display:flex;align-items:center;justify-content:center;color:var(--color-neutral-500)}.lc-tree-view__chevron-btn{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:inherit;cursor:pointer;border-radius:3px;transition:transform .12s ease}.lc-tree-view__chevron-btn:hover{background:var(--color-neutral-200)}.lc-tree-view__chevron-btn--expanded{transform:rotate(90deg)}.lc-tree-view__icon{display:flex;align-items:center;margin-right:6px;color:var(--color-neutral-500)}.lc-tree-view__item--folder .lc-tree-view__icon{color:var(--color-primary-500, #6366f1)}.lc-tree-view__label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-neutral-800)}.lc-tree-view__badge{flex:0 0 auto;margin-left:8px;padding:1px 6px;border:1px solid;border-radius:10px;font-size:10px;line-height:1.4;font-weight:600;text-transform:uppercase;letter-spacing:.02em}\n"] }]
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }, { type: i0.Output, args: ["selectedIdChange"] }], showGuides: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGuides", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }] } });
+
 const DEFAULT_COLORS$1 = [
     'var(--color-primary-500)',
     'var(--color-secondary-500)',
@@ -14266,5 +14588,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionGroupComponent, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, ToolbarComponent, TooltipContentComponent, TooltipDirective, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent };
+export { AccordionComponent, AccordionGroupComponent, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FILE_FALLBACK_ICON, FOLDER_ICON, FOLDER_OPEN_ICON, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, ToolbarComponent, TooltipContentComponent, TooltipDirective, TreeViewComponent, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent, resolveFileIcon };
 //# sourceMappingURL=life-cockpit-angular-ui-kit.mjs.map