@ship-ui/core 0.22.9 → 0.22.11

package/fesm2022/ship-ui-core-ship-tree.mjs

@@ -0,0 +1,238 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Directive, model, input, contentChild, computed, output, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { ShipIcon } from '@ship-ui/core/ship-icon';
+import { ShipSortable } from '@ship-ui/core/ship-sortable';
+
+class ShipTreeOpenIcon {
+    constructor() {
+        this.el = inject((ElementRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipTreeOpenIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: ShipTreeOpenIcon, isStandalone: true, selector: "sh-icon[openIcon]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipTreeOpenIcon, decorators: [{
+            type: Directive,
+            args: [{ selector: 'sh-icon[openIcon]', standalone: true }]
+        }] });
+class ShipTreeClosedIcon {
+    constructor() {
+        this.el = inject((ElementRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipTreeClosedIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: ShipTreeClosedIcon, isStandalone: true, selector: "sh-icon[closedIcon]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipTreeClosedIcon, decorators: [{
+            type: Directive,
+            args: [{ selector: 'sh-icon[closedIcon]', standalone: true }]
+        }] });
+class ShipTreeItemIcon {
+    constructor() {
+        this.el = inject((ElementRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipTreeItemIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: ShipTreeItemIcon, isStandalone: true, selector: "sh-icon[itemIcon]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipTreeItemIcon, decorators: [{
+            type: Directive,
+            args: [{ selector: 'sh-icon[itemIcon]', standalone: true }]
+        }] });
+class ShipTree {
+    constructor() {
+        /** The flat list of all tree nodes. */
+        this.items = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Optional Writable/Readable WritableSignal manager created by createTreeSortableManager. */
+        this.sortableManager = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sortableManager" }] : /* istanbul ignore next */ []));
+        /** Currently selected node ID. */
+        this.selectedId = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
+        // Mappings
+        this.getId = input((item) => item.id, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "getId" }] : /* istanbul ignore next */ []));
+        this.getName = input((item) => item.name, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "getName" }] : /* istanbul ignore next */ []));
+        this.getParentId = input((item) => item.parentId, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "getParentId" }] : /* istanbul ignore next */ []));
+        this.isFolder = input((item) => item.type === 'dir', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFolder" }] : /* istanbul ignore next */ []));
+        this.getIsOpen = input((item) => !!item.isOpen, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "getIsOpen" }] : /* istanbul ignore next */ []));
+        this.setIsOpen = input((item, open) => {
+            item.isOpen = open;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "setIsOpen" }] : /* istanbul ignore next */ []));
+        /** Function returning a custom icon name for a node. */
+        this.getIcon = input(() => null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "getIcon" }] : /* istanbul ignore next */ []));
+        // Read projected icons via lightweight directives
+        this.openIconDir = contentChild(ShipTreeOpenIcon, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openIconDir" }] : /* istanbul ignore next */ []));
+        this.closedIconDir = contentChild(ShipTreeClosedIcon, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closedIconDir" }] : /* istanbul ignore next */ []));
+        this.itemIconDir = contentChild(ShipTreeItemIcon, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemIconDir" }] : /* istanbul ignore next */ []));
+        this.openIconName = computed(() => this.openIconDir()?.el.nativeElement.textContent?.trim() || null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openIconName" }] : /* istanbul ignore next */ []));
+        this.closedIconName = computed(() => this.closedIconDir()?.el.nativeElement.textContent?.trim() || null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closedIconName" }] : /* istanbul ignore next */ []));
+        this.itemIconName = computed(() => this.itemIconDir()?.el.nativeElement.textContent?.trim() || null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemIconName" }] : /* istanbul ignore next */ []));
+        // Outputs
+        this.nodeClick = output();
+        this.nodeToggle = output();
+        this.nodeTemplate = contentChild('nodeTemplate', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodeTemplate" }] : /* istanbul ignore next */ []));
+        this.dirTemplate = contentChild('dirTemplate', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dirTemplate" }] : /* istanbul ignore next */ []));
+        /** Filter the full flat array down to only visible nodes (whose parents are all expanded). */
+        this.visibleNodes = computed(() => {
+            const manager = this.sortableManager();
+            if (manager && typeof manager.visibleNodes === 'function') {
+                return manager.visibleNodes();
+            }
+            const list = this.items();
+            const visible = [];
+            const isNodeVisible = (node) => {
+                let currentParentId = this.getParentId()(node);
+                while (currentParentId !== null && currentParentId !== undefined) {
+                    const parent = list.find((n) => this.getId()(n) === currentParentId);
+                    if (!parent || !this.getIsOpen()(parent)) {
+                        return false;
+                    }
+                    currentParentId = this.getParentId()(parent);
+                }
+                return true;
+            };
+            for (const node of list) {
+                const parentId = this.getParentId()(node);
+                if (parentId === null || parentId === undefined || isNodeVisible(node)) {
+                    visible.push(node);
+                }
+            }
+            return visible;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleNodes" }] : /* istanbul ignore next */ []));
+    }
+    toggleNode(node, event) {
+        event.stopPropagation();
+        const open = !this.getIsOpen()(node);
+        this.items.update((list) => list.map((item) => {
+            if (this.getId()(item) === this.getId()(node)) {
+                const updated = { ...item };
+                this.setIsOpen()(updated, open);
+                return updated;
+            }
+            return item;
+        }));
+        this.nodeToggle.emit({ node, isOpen: open });
+    }
+    handleNodeClick(node, event) {
+        const target = event.target;
+        const isIconClick = !!target.closest('sh-icon') && !target.closest('.sh-tree-node-actions') && !target.closest('sh-tree-node-actions') && !target.closest('.caret-container');
+        if (isIconClick && this.isFolder()(node)) {
+            this.toggleNode(node, event);
+        }
+        else {
+            this.selectNode(node);
+        }
+    }
+    selectNode(node) {
+        this.selectedId.set(this.getId()(node));
+        this.nodeClick.emit(node);
+    }
+    getDepthArray(depth) {
+        return Array.from({ length: depth }, (_, i) => i);
+    }
+    getNodeDepth(node) {
+        const list = this.items();
+        let depth = 0;
+        let currentParentId = this.getParentId()(node);
+        while (currentParentId !== null && currentParentId !== undefined) {
+            const parent = list.find((n) => this.getId()(n) === currentParentId);
+            if (!parent)
+                break;
+            depth++;
+            currentParentId = this.getParentId()(parent);
+        }
+        return depth;
+    }
+    getNodeIcon(node) {
+        const customIcon = this.getIcon()(node);
+        if (customIcon)
+            return customIcon;
+        if (this.isFolder()(node)) {
+            const open = this.getIsOpen()(node);
+            return open ? this.openIconName() : this.closedIconName();
+        }
+        return this.itemIconName() || 'file';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipTree, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ShipTree, isStandalone: true, selector: "sh-tree", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, sortableManager: { classPropertyName: "sortableManager", publicName: "sortableManager", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, getId: { classPropertyName: "getId", publicName: "getId", isSignal: true, isRequired: false, transformFunction: null }, getName: { classPropertyName: "getName", publicName: "getName", isSignal: true, isRequired: false, transformFunction: null }, getParentId: { classPropertyName: "getParentId", publicName: "getParentId", isSignal: true, isRequired: false, transformFunction: null }, isFolder: { classPropertyName: "isFolder", publicName: "isFolder", isSignal: true, isRequired: false, transformFunction: null }, getIsOpen: { classPropertyName: "getIsOpen", publicName: "getIsOpen", isSignal: true, isRequired: false, transformFunction: null }, setIsOpen: { classPropertyName: "setIsOpen", publicName: "setIsOpen", isSignal: true, isRequired: false, transformFunction: null }, getIcon: { classPropertyName: "getIcon", publicName: "getIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", selectedId: "selectedIdChange", nodeClick: "nodeClick", nodeToggle: "nodeToggle" }, host: { properties: { "class.sh-tree": "true" } }, queries: [{ propertyName: "openIconDir", first: true, predicate: ShipTreeOpenIcon, descendants: true, isSignal: true }, { propertyName: "closedIconDir", first: true, predicate: ShipTreeClosedIcon, descendants: true, isSignal: true }, { propertyName: "itemIconDir", first: true, predicate: ShipTreeItemIcon, descendants: true, isSignal: true }, { propertyName: "nodeTemplate", first: true, predicate: ["nodeTemplate"], descendants: true, isSignal: true }, { propertyName: "dirTemplate", first: true, predicate: ["dirTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (sortableManager()) {\n  <div\n    class=\"sh-tree-container\"\n    [shSortable]=\"sortableManager()\"\n    [treeItems]=\"visibleNodes()\"\n    sortingMode=\"tree\"\n  >\n    @for (node of visibleNodes(); track getId()(node)) {\n      <div\n        class=\"sh-tree-node\"\n        [class.is-folder]=\"isFolder()(node)\"\n        [class.is-expanded]=\"getIsOpen()(node)\"\n        [class.is-selected]=\"selectedId() === getId()(node)\"\n        draggable=\"true\"\n        [attr.sortable-dir]=\"isFolder()(node) ? 'true' : null\"\n        [style.--tree-depth]=\"getNodeDepth(node)\"\n        (click)=\"handleNodeClick(node, $event)\"\n      >\n        <!-- Indent guides -->\n        @for (i of getDepthArray(getNodeDepth(node)); track i) {\n          <div class=\"indent-guide\" [style.--guide-index]=\"i\"></div>\n        }\n\n        <!-- Folder Caret -->\n        @if (isFolder()(node) && !dirTemplate()) {\n          <span class=\"caret-container\">\n            <button class=\"caret-btn\" (click)=\"toggleNode(node, $event)\" type=\"button\">\n              @if (getIsOpen()(node)) {\n                <sh-icon size=\"small\">caret-down</sh-icon>\n              } @else {\n                <sh-icon size=\"small\">caret-right</sh-icon>\n              }\n            </button>\n          </span>\n        }\n\n        <!-- Node Icon -->\n        @if (getNodeIcon(node)) {\n          @if (getNodeIcon(node) === 'file') {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">file</sh-icon>\n          } @else if (getNodeIcon(node) === 'folder') {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">folder</sh-icon>\n          } @else if (getNodeIcon(node) === 'folder-open') {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">folder-open</sh-icon>\n          } @else {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">\n              {{ getNodeIcon(node) }}\n            </sh-icon>\n          }\n        }\n\n        <!-- Node Content -->\n        <div class=\"node-content\">\n          <ng-container *ngTemplateOutlet=\"isFolder()(node) && dirTemplate() ? dirTemplate() : (nodeTemplate() || defaultTemplate); context: { $implicit: node }\"></ng-container>\n        </div>\n      </div>\n    } @empty {\n      <div class=\"empty-state\">\n        <ng-content select=\"[emptyState]\">\n          No items in tree\n        </ng-content>\n      </div>\n    }\n  </div>\n} @else {\n  <div class=\"sh-tree-container\">\n    @for (node of visibleNodes(); track getId()(node)) {\n      <div\n        class=\"sh-tree-node\"\n        [class.is-folder]=\"isFolder()(node)\"\n        [class.is-expanded]=\"getIsOpen()(node)\"\n        [class.is-selected]=\"selectedId() === getId()(node)\"\n        [style.--tree-depth]=\"getNodeDepth(node)\"\n        (click)=\"handleNodeClick(node, $event)\"\n      >\n        <!-- Indent guides -->\n        @for (i of getDepthArray(getNodeDepth(node)); track i) {\n          <div class=\"indent-guide\" [style.--guide-index]=\"i\"></div>\n        }\n\n        <!-- Folder Caret -->\n        @if (isFolder()(node) && !dirTemplate()) {\n          <span class=\"caret-container\">\n            <button class=\"caret-btn\" (click)=\"toggleNode(node, $event)\" type=\"button\">\n              @if (getIsOpen()(node)) {\n                <sh-icon size=\"small\">caret-down</sh-icon>\n              } @else {\n                <sh-icon size=\"small\">caret-right</sh-icon>\n              }\n            </button>\n          </span>\n        }\n\n        <!-- Node Icon -->\n        @if (getNodeIcon(node)) {\n          @if (getNodeIcon(node) === 'file') {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">file</sh-icon>\n          } @else if (getNodeIcon(node) === 'folder') {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">folder</sh-icon>\n          } @else if (getNodeIcon(node) === 'folder-open') {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">folder-open</sh-icon>\n          } @else {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">\n              {{ getNodeIcon(node) }}\n            </sh-icon>\n          }\n        }\n\n        <!-- Node Content -->\n        <div class=\"node-content\">\n          <ng-container *ngTemplateOutlet=\"isFolder()(node) && dirTemplate() ? dirTemplate() : (nodeTemplate() || defaultTemplate); context: { $implicit: node }\"></ng-container>\n        </div>\n      </div>\n    } @empty {\n      <div class=\"empty-state\">\n        <ng-content select=\"[emptyState]\">\n          No items in tree\n        </ng-content>\n      </div>\n    }\n  </div>\n}\n\n<ng-template #defaultTemplate let-node>\n  <span class=\"node-name\">{{ getName()(node) }}</span>\n</ng-template>\n", styles: [".sh-sortable{position:relative}.sh-sortable.dragging [draggable],.sh-sortable.dragging .sortable-ghost{cursor:grabbing;transition:transform 40ms linear}.sh-sortable [draggable]{transform:translate(0);transition:none;z-index:2;-webkit-user-select:none;user-select:none}.sh-sortable:not(.sh-sortable-tree) [draggable]{background:var(--base-1)}.sh-sortable:not(.sh-sortable-tree) [draggable]:not(:has([sort-handle])){cursor:grab}.sh-sortable .sortable-ghost{opacity:.5;z-index:10}.sh-sortable.item-dragged-out .sortable-ghost{display:none}.sh-sortable [sort-handle]{cursor:grab}.sh-sortable.sh-sortable-tree [draggable]{transform:none!important;transition:none!important}.sh-sortable.sh-sortable-tree .drop-inside{background:var(--primary-3)!important;outline:2px solid var(--primary-8)!important;outline-offset:-2px;border-radius:var(--shape-1, 4px)}.sh-sortable.sh-sortable-tree .drop-inside .node-icon,.sh-sortable.sh-sortable-tree .drop-inside sh-tree-node .sh-tree-node-left sh-icon{color:var(--primary-8)!important}.sh-sortable.sh-sortable-tree .drop-before{position:relative;z-index:20}.sh-sortable.sh-sortable-tree .drop-before:before{content:\"\";position:absolute;top:-2px;left:calc(var(--tree-padding-left, 12px) + var(--tree-depth, 0) * var(--tree-indent-step, 12px));right:var(--tree-padding-right, 6px);height:6px;background-image:radial-gradient(circle at 3px 3px,var(--primary-8) 3px,transparent 3px),linear-gradient(to right,var(--primary-8),var(--primary-8));background-repeat:no-repeat,no-repeat;background-position:left center,6px center;background-size:6px 6px,100% 2px;z-index:10;pointer-events:none}.sh-sortable.sh-sortable-tree .drop-after{position:relative;z-index:20}.sh-sortable.sh-sortable-tree .drop-after:after{content:\"\";position:absolute;bottom:-2px;left:calc(var(--tree-padding-left, 12px) + var(--tree-depth, 0) * var(--tree-indent-step, 12px));right:var(--tree-padding-right, 6px);height:6px;background-image:radial-gradient(circle at 3px 3px,var(--primary-8) 3px,transparent 3px),linear-gradient(to right,var(--primary-8),var(--primary-8));background-repeat:no-repeat,no-repeat;background-position:left center,6px center;background-size:6px 6px,100% 2px;z-index:10;pointer-events:none}sh-tree{--tree-bg: var(--base-2);--tree-bc: var(--base-3);--tree-color: var(--base-12);--tree-hover-bg: var(--base-3);--tree-active-bg: var(--base-4);--tree-selected-bg: var(--base-4);--tree-guide-color: var(--base-4);--tree-caret-color: var(--base-9);--tree-caret-hover-color: var(--base-12);--tree-icon-color: var(--base-9);--tree-icon-folder-color: var(--primary-8);--tree-indent-step: .75rem;--tree-padding-left: .75rem;--tree-padding-right: .375rem;display:flex;flex-direction:column;width:100%;background:var(--tree-bg);border:1px solid var(--tree-bc);border-radius:var(--shape-2, .5rem);overflow:hidden;font-family:var(--font-family, sans-serif);box-shadow:var(--box-shadow-10)}sh-tree .sh-tree-container{flex:1;padding:.5rem 0;overflow-y:auto;position:relative}sh-tree .sh-tree-node{display:flex;align-items:center;height:32px;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--tree-color);font:var(--paragraph-20, 14px sans-serif);gap:6px;transition:background .12s ease;padding-left:calc(var(--tree-padding-left) + var(--tree-depth, 0) * var(--tree-indent-step));padding-right:var(--tree-padding-right);background:var(--tree-bg)}sh-tree .sh-tree-node:hover{background:var(--tree-hover-bg)}sh-tree .sh-tree-node.is-selected{background:var(--tree-selected-bg)}sh-tree .sh-tree-node.sortable-ghost{opacity:.4;background:var(--tree-active-bg)}sh-tree .sh-tree-node .indent-guide{position:absolute;top:0;bottom:0;width:1px;border-left:1px solid var(--tree-guide-color);opacity:.5;left:calc(var(--tree-padding-left) + var(--tree-indent-step) / 2 + var(--guide-index, 0) * var(--tree-indent-step))}sh-tree .sh-tree-node .caret-container{display:flex;align-items:center;justify-content:center;width:var(--tree-indent-step);height:16px;z-index:2}sh-tree .sh-tree-node .caret-container:has(+.node-icon){position:absolute;opacity:0;z-index:3;width:var(--tree-indent-step)}sh-tree .sh-tree-node .caret-container .caret-btn{background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--tree-caret-color);border-radius:var(--shape-1, 4px);width:100%;height:100%;position:relative;transition:background .15s ease,color .15s ease}sh-tree .sh-tree-node .caret-container .caret-btn:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;z-index:1}sh-tree .sh-tree-node .caret-container .caret-btn:hover{color:var(--tree-caret-hover-color)}sh-tree .sh-tree-node .node-icon{color:var(--tree-icon-color);display:inline-flex;align-items:center;justify-content:center;width:var(--tree-indent-step)}sh-tree .sh-tree-node .node-icon.folder{color:var(--tree-icon-folder-color)}sh-tree .sh-tree-node .node-icon:has(~.node-content sh-tree-node sh-icon){display:none}sh-tree .sh-tree-node.is-folder sh-tree-node .sh-tree-node-left sh-icon{color:var(--tree-icon-folder-color)}sh-tree .sh-tree-node:not(.is-folder) sh-tree-node .sh-tree-node-left sh-icon{color:var(--tree-icon-color)}sh-tree .sh-tree-node .node-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:2;display:flex;align-items:center}sh-tree .sh-tree-node .node-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sh-tree sh-tree-node{display:flex;align-items:center;width:100%;gap:.5rem;justify-content:space-between;min-width:0}sh-tree sh-tree-node .sh-tree-node-left{display:flex;align-items:center;gap:.25rem;padding-left:.25rem;overflow:hidden;min-width:0;flex:1}sh-tree sh-tree-node .sh-tree-node-left sh-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--tree-indent-step)}sh-tree sh-tree-node .sh-tree-node-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}sh-tree sh-tree-node .sh-tree-node-label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sh-tree sh-tree-node .sh-tree-node-actions,sh-tree sh-tree-node sh-tree-node-actions{display:flex;align-items:center;gap:.5rem}sh-tree sh-tree-node .status-badge{font-size:10px;padding:2px 6px;border-radius:var(--shape-1, 4px);text-transform:uppercase;font-weight:600}sh-tree sh-tree-node .status-badge.success{background:var(--success-3, #e6f4ea);color:var(--success-8, #137333)}sh-tree sh-tree-node .status-badge.warning{background:var(--warning-3, #fef7e0);color:var(--warning-8, #b06000)}sh-tree sh-tree-node .status-badge.error{background:var(--error-3, #fce8e6);color:var(--error-8, #c5221f)}sh-tree sh-tree-node .delete-btn{background:none;border:none;padding:2px;cursor:pointer;color:var(--base-9);border-radius:var(--shape-1, 4px);display:flex;opacity:0;transition:opacity .15s ease;align-items:center;justify-content:center}sh-tree sh-tree-node .delete-btn:hover{background:var(--base-4);color:var(--error-8, #c5221f)}sh-tree .sh-tree-node:hover .delete-btn{opacity:1}sh-tree .empty-state{padding:32px;text-align:center;color:var(--tree-caret-color);font:var(--paragraph-20, 14px sans-serif)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }, { kind: "directive", type: ShipSortable, selector: "[shSortable]", inputs: ["shSortable", "sortableGroup", "sortingMode", "treeItems"], outputs: ["treeItemsChange", "sortDrop", "afterDrop", "crossDrop", "treeDrop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipTree, decorators: [{
+            type: Component,
+            args: [{ selector: 'sh-tree', standalone: true, imports: [NgTemplateOutlet, ShipIcon, ShipSortable], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.sh-tree]': 'true',
+                    }, template: "@if (sortableManager()) {\n  <div\n    class=\"sh-tree-container\"\n    [shSortable]=\"sortableManager()\"\n    [treeItems]=\"visibleNodes()\"\n    sortingMode=\"tree\"\n  >\n    @for (node of visibleNodes(); track getId()(node)) {\n      <div\n        class=\"sh-tree-node\"\n        [class.is-folder]=\"isFolder()(node)\"\n        [class.is-expanded]=\"getIsOpen()(node)\"\n        [class.is-selected]=\"selectedId() === getId()(node)\"\n        draggable=\"true\"\n        [attr.sortable-dir]=\"isFolder()(node) ? 'true' : null\"\n        [style.--tree-depth]=\"getNodeDepth(node)\"\n        (click)=\"handleNodeClick(node, $event)\"\n      >\n        <!-- Indent guides -->\n        @for (i of getDepthArray(getNodeDepth(node)); track i) {\n          <div class=\"indent-guide\" [style.--guide-index]=\"i\"></div>\n        }\n\n        <!-- Folder Caret -->\n        @if (isFolder()(node) && !dirTemplate()) {\n          <span class=\"caret-container\">\n            <button class=\"caret-btn\" (click)=\"toggleNode(node, $event)\" type=\"button\">\n              @if (getIsOpen()(node)) {\n                <sh-icon size=\"small\">caret-down</sh-icon>\n              } @else {\n                <sh-icon size=\"small\">caret-right</sh-icon>\n              }\n            </button>\n          </span>\n        }\n\n        <!-- Node Icon -->\n        @if (getNodeIcon(node)) {\n          @if (getNodeIcon(node) === 'file') {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">file</sh-icon>\n          } @else if (getNodeIcon(node) === 'folder') {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">folder</sh-icon>\n          } @else if (getNodeIcon(node) === 'folder-open') {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">folder-open</sh-icon>\n          } @else {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">\n              {{ getNodeIcon(node) }}\n            </sh-icon>\n          }\n        }\n\n        <!-- Node Content -->\n        <div class=\"node-content\">\n          <ng-container *ngTemplateOutlet=\"isFolder()(node) && dirTemplate() ? dirTemplate() : (nodeTemplate() || defaultTemplate); context: { $implicit: node }\"></ng-container>\n        </div>\n      </div>\n    } @empty {\n      <div class=\"empty-state\">\n        <ng-content select=\"[emptyState]\">\n          No items in tree\n        </ng-content>\n      </div>\n    }\n  </div>\n} @else {\n  <div class=\"sh-tree-container\">\n    @for (node of visibleNodes(); track getId()(node)) {\n      <div\n        class=\"sh-tree-node\"\n        [class.is-folder]=\"isFolder()(node)\"\n        [class.is-expanded]=\"getIsOpen()(node)\"\n        [class.is-selected]=\"selectedId() === getId()(node)\"\n        [style.--tree-depth]=\"getNodeDepth(node)\"\n        (click)=\"handleNodeClick(node, $event)\"\n      >\n        <!-- Indent guides -->\n        @for (i of getDepthArray(getNodeDepth(node)); track i) {\n          <div class=\"indent-guide\" [style.--guide-index]=\"i\"></div>\n        }\n\n        <!-- Folder Caret -->\n        @if (isFolder()(node) && !dirTemplate()) {\n          <span class=\"caret-container\">\n            <button class=\"caret-btn\" (click)=\"toggleNode(node, $event)\" type=\"button\">\n              @if (getIsOpen()(node)) {\n                <sh-icon size=\"small\">caret-down</sh-icon>\n              } @else {\n                <sh-icon size=\"small\">caret-right</sh-icon>\n              }\n            </button>\n          </span>\n        }\n\n        <!-- Node Icon -->\n        @if (getNodeIcon(node)) {\n          @if (getNodeIcon(node) === 'file') {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">file</sh-icon>\n          } @else if (getNodeIcon(node) === 'folder') {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">folder</sh-icon>\n          } @else if (getNodeIcon(node) === 'folder-open') {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">folder-open</sh-icon>\n          } @else {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">\n              {{ getNodeIcon(node) }}\n            </sh-icon>\n          }\n        }\n\n        <!-- Node Content -->\n        <div class=\"node-content\">\n          <ng-container *ngTemplateOutlet=\"isFolder()(node) && dirTemplate() ? dirTemplate() : (nodeTemplate() || defaultTemplate); context: { $implicit: node }\"></ng-container>\n        </div>\n      </div>\n    } @empty {\n      <div class=\"empty-state\">\n        <ng-content select=\"[emptyState]\">\n          No items in tree\n        </ng-content>\n      </div>\n    }\n  </div>\n}\n\n<ng-template #defaultTemplate let-node>\n  <span class=\"node-name\">{{ getName()(node) }}</span>\n</ng-template>\n", styles: [".sh-sortable{position:relative}.sh-sortable.dragging [draggable],.sh-sortable.dragging .sortable-ghost{cursor:grabbing;transition:transform 40ms linear}.sh-sortable [draggable]{transform:translate(0);transition:none;z-index:2;-webkit-user-select:none;user-select:none}.sh-sortable:not(.sh-sortable-tree) [draggable]{background:var(--base-1)}.sh-sortable:not(.sh-sortable-tree) [draggable]:not(:has([sort-handle])){cursor:grab}.sh-sortable .sortable-ghost{opacity:.5;z-index:10}.sh-sortable.item-dragged-out .sortable-ghost{display:none}.sh-sortable [sort-handle]{cursor:grab}.sh-sortable.sh-sortable-tree [draggable]{transform:none!important;transition:none!important}.sh-sortable.sh-sortable-tree .drop-inside{background:var(--primary-3)!important;outline:2px solid var(--primary-8)!important;outline-offset:-2px;border-radius:var(--shape-1, 4px)}.sh-sortable.sh-sortable-tree .drop-inside .node-icon,.sh-sortable.sh-sortable-tree .drop-inside sh-tree-node .sh-tree-node-left sh-icon{color:var(--primary-8)!important}.sh-sortable.sh-sortable-tree .drop-before{position:relative;z-index:20}.sh-sortable.sh-sortable-tree .drop-before:before{content:\"\";position:absolute;top:-2px;left:calc(var(--tree-padding-left, 12px) + var(--tree-depth, 0) * var(--tree-indent-step, 12px));right:var(--tree-padding-right, 6px);height:6px;background-image:radial-gradient(circle at 3px 3px,var(--primary-8) 3px,transparent 3px),linear-gradient(to right,var(--primary-8),var(--primary-8));background-repeat:no-repeat,no-repeat;background-position:left center,6px center;background-size:6px 6px,100% 2px;z-index:10;pointer-events:none}.sh-sortable.sh-sortable-tree .drop-after{position:relative;z-index:20}.sh-sortable.sh-sortable-tree .drop-after:after{content:\"\";position:absolute;bottom:-2px;left:calc(var(--tree-padding-left, 12px) + var(--tree-depth, 0) * var(--tree-indent-step, 12px));right:var(--tree-padding-right, 6px);height:6px;background-image:radial-gradient(circle at 3px 3px,var(--primary-8) 3px,transparent 3px),linear-gradient(to right,var(--primary-8),var(--primary-8));background-repeat:no-repeat,no-repeat;background-position:left center,6px center;background-size:6px 6px,100% 2px;z-index:10;pointer-events:none}sh-tree{--tree-bg: var(--base-2);--tree-bc: var(--base-3);--tree-color: var(--base-12);--tree-hover-bg: var(--base-3);--tree-active-bg: var(--base-4);--tree-selected-bg: var(--base-4);--tree-guide-color: var(--base-4);--tree-caret-color: var(--base-9);--tree-caret-hover-color: var(--base-12);--tree-icon-color: var(--base-9);--tree-icon-folder-color: var(--primary-8);--tree-indent-step: .75rem;--tree-padding-left: .75rem;--tree-padding-right: .375rem;display:flex;flex-direction:column;width:100%;background:var(--tree-bg);border:1px solid var(--tree-bc);border-radius:var(--shape-2, .5rem);overflow:hidden;font-family:var(--font-family, sans-serif);box-shadow:var(--box-shadow-10)}sh-tree .sh-tree-container{flex:1;padding:.5rem 0;overflow-y:auto;position:relative}sh-tree .sh-tree-node{display:flex;align-items:center;height:32px;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--tree-color);font:var(--paragraph-20, 14px sans-serif);gap:6px;transition:background .12s ease;padding-left:calc(var(--tree-padding-left) + var(--tree-depth, 0) * var(--tree-indent-step));padding-right:var(--tree-padding-right);background:var(--tree-bg)}sh-tree .sh-tree-node:hover{background:var(--tree-hover-bg)}sh-tree .sh-tree-node.is-selected{background:var(--tree-selected-bg)}sh-tree .sh-tree-node.sortable-ghost{opacity:.4;background:var(--tree-active-bg)}sh-tree .sh-tree-node .indent-guide{position:absolute;top:0;bottom:0;width:1px;border-left:1px solid var(--tree-guide-color);opacity:.5;left:calc(var(--tree-padding-left) + var(--tree-indent-step) / 2 + var(--guide-index, 0) * var(--tree-indent-step))}sh-tree .sh-tree-node .caret-container{display:flex;align-items:center;justify-content:center;width:var(--tree-indent-step);height:16px;z-index:2}sh-tree .sh-tree-node .caret-container:has(+.node-icon){position:absolute;opacity:0;z-index:3;width:var(--tree-indent-step)}sh-tree .sh-tree-node .caret-container .caret-btn{background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--tree-caret-color);border-radius:var(--shape-1, 4px);width:100%;height:100%;position:relative;transition:background .15s ease,color .15s ease}sh-tree .sh-tree-node .caret-container .caret-btn:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;z-index:1}sh-tree .sh-tree-node .caret-container .caret-btn:hover{color:var(--tree-caret-hover-color)}sh-tree .sh-tree-node .node-icon{color:var(--tree-icon-color);display:inline-flex;align-items:center;justify-content:center;width:var(--tree-indent-step)}sh-tree .sh-tree-node .node-icon.folder{color:var(--tree-icon-folder-color)}sh-tree .sh-tree-node .node-icon:has(~.node-content sh-tree-node sh-icon){display:none}sh-tree .sh-tree-node.is-folder sh-tree-node .sh-tree-node-left sh-icon{color:var(--tree-icon-folder-color)}sh-tree .sh-tree-node:not(.is-folder) sh-tree-node .sh-tree-node-left sh-icon{color:var(--tree-icon-color)}sh-tree .sh-tree-node .node-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:2;display:flex;align-items:center}sh-tree .sh-tree-node .node-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sh-tree sh-tree-node{display:flex;align-items:center;width:100%;gap:.5rem;justify-content:space-between;min-width:0}sh-tree sh-tree-node .sh-tree-node-left{display:flex;align-items:center;gap:.25rem;padding-left:.25rem;overflow:hidden;min-width:0;flex:1}sh-tree sh-tree-node .sh-tree-node-left sh-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--tree-indent-step)}sh-tree sh-tree-node .sh-tree-node-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}sh-tree sh-tree-node .sh-tree-node-label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sh-tree sh-tree-node .sh-tree-node-actions,sh-tree sh-tree-node sh-tree-node-actions{display:flex;align-items:center;gap:.5rem}sh-tree sh-tree-node .status-badge{font-size:10px;padding:2px 6px;border-radius:var(--shape-1, 4px);text-transform:uppercase;font-weight:600}sh-tree sh-tree-node .status-badge.success{background:var(--success-3, #e6f4ea);color:var(--success-8, #137333)}sh-tree sh-tree-node .status-badge.warning{background:var(--warning-3, #fef7e0);color:var(--warning-8, #b06000)}sh-tree sh-tree-node .status-badge.error{background:var(--error-3, #fce8e6);color:var(--error-8, #c5221f)}sh-tree sh-tree-node .delete-btn{background:none;border:none;padding:2px;cursor:pointer;color:var(--base-9);border-radius:var(--shape-1, 4px);display:flex;opacity:0;transition:opacity .15s ease;align-items:center;justify-content:center}sh-tree sh-tree-node .delete-btn:hover{background:var(--base-4);color:var(--error-8, #c5221f)}sh-tree .sh-tree-node:hover .delete-btn{opacity:1}sh-tree .empty-state{padding:32px;text-align:center;color:var(--tree-caret-color);font:var(--paragraph-20, 14px sans-serif)}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], sortableManager: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortableManager", required: false }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }, { type: i0.Output, args: ["selectedIdChange"] }], getId: [{ type: i0.Input, args: [{ isSignal: true, alias: "getId", required: false }] }], getName: [{ type: i0.Input, args: [{ isSignal: true, alias: "getName", required: false }] }], getParentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "getParentId", required: false }] }], isFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFolder", required: false }] }], getIsOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "getIsOpen", required: false }] }], setIsOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "setIsOpen", required: false }] }], getIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "getIcon", required: false }] }], openIconDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ShipTreeOpenIcon), { isSignal: true }] }], closedIconDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ShipTreeClosedIcon), { isSignal: true }] }], itemIconDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ShipTreeItemIcon), { isSignal: true }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeToggle: [{ type: i0.Output, args: ["nodeToggle"] }], nodeTemplate: [{ type: i0.ContentChild, args: ['nodeTemplate', { isSignal: true }] }], dirTemplate: [{ type: i0.ContentChild, args: ['dirTemplate', { isSignal: true }] }] } });
+class ShipTreeNode {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipTreeNode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ShipTreeNode, isStandalone: true, selector: "sh-tree-node", host: { properties: { "class.sh-tree-node-layout": "true" } }, ngImport: i0, template: `
+    <div class="sh-tree-node-left">
+      <ng-content select="sh-icon" />
+      <span class="sh-tree-node-label">
+        <ng-content />
+      </span>
+    </div>
+    <div class="sh-tree-node-actions">
+      <ng-content select="[actions], sh-tree-node-actions" />
+    </div>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipTreeNode, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sh-tree-node',
+                    template: `
+    <div class="sh-tree-node-left">
+      <ng-content select="sh-icon" />
+      <span class="sh-tree-node-label">
+        <ng-content />
+      </span>
+    </div>
+    <div class="sh-tree-node-actions">
+      <ng-content select="[actions], sh-tree-node-actions" />
+    </div>
+  `,
+                    host: {
+                        '[class.sh-tree-node-layout]': 'true',
+                    },
+                }]
+        }] });
+class ShipTreeNodeActions {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipTreeNodeActions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ShipTreeNodeActions, isStandalone: true, selector: "sh-tree-node-actions", host: { properties: { "class.sh-tree-node-actions": "true" } }, ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipTreeNodeActions, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sh-tree-node-actions',
+                    template: `
+    <ng-content />
+  `,
+                    host: {
+                        '[class.sh-tree-node-actions]': 'true',
+                    },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ShipTree, ShipTreeClosedIcon, ShipTreeItemIcon, ShipTreeNode, ShipTreeNodeActions, ShipTreeOpenIcon };
+//# sourceMappingURL=ship-ui-core-ship-tree.mjs.map

package/fesm2022/ship-ui-core-ship-tree.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ship-ui-core-ship-tree.mjs","sources":["../../../projects/ship-ui/ship-tree/ship-tree.ts","../../../projects/ship-ui/ship-tree/ship-tree.html","../../../projects/ship-ui/ship-tree/ship-ui-core-ship-tree.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  model,\n  output,\n  TemplateRef,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { ShipIcon } from '@ship-ui/core/ship-icon';\nimport { ShipSortable } from '@ship-ui/core/ship-sortable';\n\n@Directive({ selector: 'sh-icon[openIcon]', standalone: true })\nexport class ShipTreeOpenIcon {\n  readonly el = inject(ElementRef<HTMLElement>);\n}\n\n@Directive({ selector: 'sh-icon[closedIcon]', standalone: true })\nexport class ShipTreeClosedIcon {\n  readonly el = inject(ElementRef<HTMLElement>);\n}\n\n@Directive({ selector: 'sh-icon[itemIcon]', standalone: true })\nexport class ShipTreeItemIcon {\n  readonly el = inject(ElementRef<HTMLElement>);\n}\n\n@Component({\n  selector: 'sh-tree',\n  standalone: true,\n  imports: [NgTemplateOutlet, ShipIcon, ShipSortable],\n  templateUrl: './ship-tree.html',\n  styleUrl: './ship-tree.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.sh-tree]': 'true',\n  },\n})\nexport class ShipTree {\n  /** The flat list of all tree nodes. */\n  readonly items = model<any[]>([]);\n\n  /** Optional Writable/Readable WritableSignal manager created by createTreeSortableManager. */\n  readonly sortableManager = input<any>(null);\n\n  /** Currently selected node ID. */\n  readonly selectedId = model<string | null>(null);\n\n  // Mappings\n  readonly getId = input<(item: any) => string>((item) => item.id);\n  readonly getName = input<(item: any) => string>((item) => item.name);\n  readonly getParentId = input<(item: any) => string | null>((item) => item.parentId);\n  readonly isFolder = input<(item: any) => boolean>((item) => item.type === 'dir');\n  readonly getIsOpen = input<(item: any) => boolean>((item) => !!item.isOpen);\n  readonly setIsOpen = input<(item: any, isOpen: boolean) => void>((item, open) => {\n    item.isOpen = open;\n  });\n\n  /** Function returning a custom icon name for a node. */\n  readonly getIcon = input<(item: any) => string | null>(() => null);\n\n  // Read projected icons via lightweight directives\n  readonly openIconDir = contentChild(ShipTreeOpenIcon);\n  readonly closedIconDir = contentChild(ShipTreeClosedIcon);\n  readonly itemIconDir = contentChild(ShipTreeItemIcon);\n\n  openIconName = computed(() => this.openIconDir()?.el.nativeElement.textContent?.trim() || null);\n  closedIconName = computed(() => this.closedIconDir()?.el.nativeElement.textContent?.trim() || null);\n  itemIconName = computed(() => this.itemIconDir()?.el.nativeElement.textContent?.trim() || null);\n\n  // Outputs\n  readonly nodeClick = output<any>();\n  readonly nodeToggle = output<{ node: any; isOpen: boolean }>();\n\n  readonly nodeTemplate = contentChild<TemplateRef<any>>('nodeTemplate');\n  readonly dirTemplate = contentChild<TemplateRef<any>>('dirTemplate');\n\n  /** Filter the full flat array down to only visible nodes (whose parents are all expanded). */\n  visibleNodes = computed(() => {\n    const manager = this.sortableManager();\n    if (manager && typeof manager.visibleNodes === 'function') {\n      return manager.visibleNodes();\n    }\n\n    const list = this.items();\n    const visible: any[] = [];\n\n    const isNodeVisible = (node: any): boolean => {\n      let currentParentId = this.getParentId()(node);\n      while (currentParentId !== null && currentParentId !== undefined) {\n        const parent = list.find((n) => this.getId()(n) === currentParentId);\n        if (!parent || !this.getIsOpen()(parent)) {\n          return false;\n        }\n        currentParentId = this.getParentId()(parent);\n      }\n      return true;\n    };\n\n    for (const node of list) {\n      const parentId = this.getParentId()(node);\n      if (parentId === null || parentId === undefined || isNodeVisible(node)) {\n        visible.push(node);\n      }\n    }\n    return visible;\n  });\n\n  toggleNode(node: any, event: MouseEvent) {\n    event.stopPropagation();\n    const open = !this.getIsOpen()(node);\n\n    this.items.update((list) =>\n      list.map((item) => {\n        if (this.getId()(item) === this.getId()(node)) {\n          const updated = { ...item };\n          this.setIsOpen()(updated, open);\n          return updated;\n        }\n        return item;\n      })\n    );\n\n    this.nodeToggle.emit({ node, isOpen: open });\n  }\n\n  handleNodeClick(node: any, event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const isIconClick = !!target.closest('sh-icon') && !target.closest('.sh-tree-node-actions') && !target.closest('sh-tree-node-actions') && !target.closest('.caret-container');\n\n    if (isIconClick && this.isFolder()(node)) {\n      this.toggleNode(node, event);\n    } else {\n      this.selectNode(node);\n    }\n  }\n\n  selectNode(node: any) {\n    this.selectedId.set(this.getId()(node));\n    this.nodeClick.emit(node);\n  }\n\n  getDepthArray(depth: number): number[] {\n    return Array.from({ length: depth }, (_, i) => i);\n  }\n\n  getNodeDepth(node: any): number {\n    const list = this.items();\n    let depth = 0;\n    let currentParentId = this.getParentId()(node);\n    while (currentParentId !== null && currentParentId !== undefined) {\n      const parent = list.find((n) => this.getId()(n) === currentParentId);\n      if (!parent) break;\n      depth++;\n      currentParentId = this.getParentId()(parent);\n    }\n    return depth;\n  }\n\n  getNodeIcon(node: any): string | null {\n    const customIcon = this.getIcon()(node);\n    if (customIcon) return customIcon;\n\n    if (this.isFolder()(node)) {\n      const open = this.getIsOpen()(node);\n      return open ? this.openIconName() : this.closedIconName();\n    }\n    return this.itemIconName() || 'file';\n  }\n}\n\n@Component({\n  selector: 'sh-tree-node',\n  template: `\n    <div class=\"sh-tree-node-left\">\n      <ng-content select=\"sh-icon\" />\n      <span class=\"sh-tree-node-label\">\n        <ng-content />\n      </span>\n    </div>\n    <div class=\"sh-tree-node-actions\">\n      <ng-content select=\"[actions], sh-tree-node-actions\" />\n    </div>\n  `,\n  host: {\n    '[class.sh-tree-node-layout]': 'true',\n  },\n})\nexport class ShipTreeNode {}\n\n@Component({\n  selector: 'sh-tree-node-actions',\n  template: `\n    <ng-content />\n  `,\n  host: {\n    '[class.sh-tree-node-actions]': 'true',\n  },\n})\nexport class ShipTreeNodeActions {}\n","@if (sortableManager()) {\n  <div\n    class=\"sh-tree-container\"\n    [shSortable]=\"sortableManager()\"\n    [treeItems]=\"visibleNodes()\"\n    sortingMode=\"tree\"\n  >\n    @for (node of visibleNodes(); track getId()(node)) {\n      <div\n        class=\"sh-tree-node\"\n        [class.is-folder]=\"isFolder()(node)\"\n        [class.is-expanded]=\"getIsOpen()(node)\"\n        [class.is-selected]=\"selectedId() === getId()(node)\"\n        draggable=\"true\"\n        [attr.sortable-dir]=\"isFolder()(node) ? 'true' : null\"\n        [style.--tree-depth]=\"getNodeDepth(node)\"\n        (click)=\"handleNodeClick(node, $event)\"\n      >\n        <!-- Indent guides -->\n        @for (i of getDepthArray(getNodeDepth(node)); track i) {\n          <div class=\"indent-guide\" [style.--guide-index]=\"i\"></div>\n        }\n\n        <!-- Folder Caret -->\n        @if (isFolder()(node) && !dirTemplate()) {\n          <span class=\"caret-container\">\n            <button class=\"caret-btn\" (click)=\"toggleNode(node, $event)\" type=\"button\">\n              @if (getIsOpen()(node)) {\n                <sh-icon size=\"small\">caret-down</sh-icon>\n              } @else {\n                <sh-icon size=\"small\">caret-right</sh-icon>\n              }\n            </button>\n          </span>\n        }\n\n        <!-- Node Icon -->\n        @if (getNodeIcon(node)) {\n          @if (getNodeIcon(node) === 'file') {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">file</sh-icon>\n          } @else if (getNodeIcon(node) === 'folder') {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">folder</sh-icon>\n          } @else if (getNodeIcon(node) === 'folder-open') {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">folder-open</sh-icon>\n          } @else {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">\n              {{ getNodeIcon(node) }}\n            </sh-icon>\n          }\n        }\n\n        <!-- Node Content -->\n        <div class=\"node-content\">\n          <ng-container *ngTemplateOutlet=\"isFolder()(node) && dirTemplate() ? dirTemplate() : (nodeTemplate() || defaultTemplate); context: { $implicit: node }\"></ng-container>\n        </div>\n      </div>\n    } @empty {\n      <div class=\"empty-state\">\n        <ng-content select=\"[emptyState]\">\n          No items in tree\n        </ng-content>\n      </div>\n    }\n  </div>\n} @else {\n  <div class=\"sh-tree-container\">\n    @for (node of visibleNodes(); track getId()(node)) {\n      <div\n        class=\"sh-tree-node\"\n        [class.is-folder]=\"isFolder()(node)\"\n        [class.is-expanded]=\"getIsOpen()(node)\"\n        [class.is-selected]=\"selectedId() === getId()(node)\"\n        [style.--tree-depth]=\"getNodeDepth(node)\"\n        (click)=\"handleNodeClick(node, $event)\"\n      >\n        <!-- Indent guides -->\n        @for (i of getDepthArray(getNodeDepth(node)); track i) {\n          <div class=\"indent-guide\" [style.--guide-index]=\"i\"></div>\n        }\n\n        <!-- Folder Caret -->\n        @if (isFolder()(node) && !dirTemplate()) {\n          <span class=\"caret-container\">\n            <button class=\"caret-btn\" (click)=\"toggleNode(node, $event)\" type=\"button\">\n              @if (getIsOpen()(node)) {\n                <sh-icon size=\"small\">caret-down</sh-icon>\n              } @else {\n                <sh-icon size=\"small\">caret-right</sh-icon>\n              }\n            </button>\n          </span>\n        }\n\n        <!-- Node Icon -->\n        @if (getNodeIcon(node)) {\n          @if (getNodeIcon(node) === 'file') {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">file</sh-icon>\n          } @else if (getNodeIcon(node) === 'folder') {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">folder</sh-icon>\n          } @else if (getNodeIcon(node) === 'folder-open') {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">folder-open</sh-icon>\n          } @else {\n            <sh-icon class=\"node-icon\" [class.folder]=\"isFolder()(node)\" size=\"small\">\n              {{ getNodeIcon(node) }}\n            </sh-icon>\n          }\n        }\n\n        <!-- Node Content -->\n        <div class=\"node-content\">\n          <ng-container *ngTemplateOutlet=\"isFolder()(node) && dirTemplate() ? dirTemplate() : (nodeTemplate() || defaultTemplate); context: { $implicit: node }\"></ng-container>\n        </div>\n      </div>\n    } @empty {\n      <div class=\"empty-state\">\n        <ng-content select=\"[emptyState]\">\n          No items in tree\n        </ng-content>\n      </div>\n    }\n  </div>\n}\n\n<ng-template #defaultTemplate let-node>\n  <span class=\"node-name\">{{ getName()(node) }}</span>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ship-ui/core",
   "license": "MIT",
-  "version": "0.22.9",
+  "version": "0.22.11",
   "peerDependencies": {
     "@angular/common": ">=20",
     "@angular/core": ">=20",
@@ -219,6 +219,10 @@
       "types": "./types/ship-ui-core-ship-toggle-card.d.ts",
       "default": "./fesm2022/ship-ui-core-ship-toggle-card.mjs"
     },
+    "./ship-tree": {
+      "types": "./types/ship-ui-core-ship-tree.d.ts",
+      "default": "./fesm2022/ship-ui-core-ship-tree.mjs"
+    },
     "./ship-virtual-scroll": {
       "types": "./types/ship-ui-core-ship-virtual-scroll.d.ts",
       "default": "./fesm2022/ship-ui-core-ship-virtual-scroll.mjs"

package/styles/index.scss

@@ -51,5 +51,5 @@ $shipTable: true !default;
 $shipTabs: true !default;
 $shipFileUpload: true !default;
 $shipAccordion: true !default;
-
+$shipTree: true !default;
 

package/types/ship-ui-core-ship-dialog.d.ts

@@ -2,7 +2,7 @@ import * as _angular_core from '@angular/core';
 import { ElementRef, TemplateRef, OutputEmitterRef, InputSignal, ComponentRef, EmbeddedViewRef, OutputRefSubscription, Type } from '@angular/core';
 
 type ShipDialogOptions = {
-    class?: 'default' | 'type-b' | string;
+    class?: 'default' | 'type-b' | 'type-c' | string;
     width?: string;
     maxWidth?: string;
     height?: string;
@@ -18,7 +18,7 @@ declare class ShipDialog {
     options: _angular_core.InputSignal<Partial<ShipDialogOptions> | undefined>;
     closed: _angular_core.OutputEmitterRef<void>;
     defaultOptionMerge: _angular_core.Signal<{
-        class: "default" | "type-b" | string;
+        class: "default" | "type-b" | "type-c" | string;
         width?: string;
         maxWidth?: string;
         height?: string;

package/types/ship-ui-core-ship-sortable.d.ts

@@ -18,6 +18,11 @@ type ShipDropEvent = {
     previousIndex: number;
     currentIndex: number;
 };
+type ShipTreeDropEvent = {
+    previousIndex: number;
+    currentIndex: number;
+    position: 'before' | 'after' | 'inside';
+};
 interface SortableManagerConfig {
     /**
      * If provided, this hook is evaluated before the Signals are modified.
@@ -32,11 +37,16 @@ declare class ShipSortable implements OnInit, OnDestroy {
     #private;
     shSortable: _angular_core.InputSignal<any>;
     sortableGroup: _angular_core.InputSignal<string | undefined>;
+    sortingMode: _angular_core.InputSignal<"list" | "grid" | "tree">;
+    treeItems: _angular_core.ModelSignal<any[]>;
     sortDrop: _angular_core.OutputEmitterRef<ShipDropEvent>;
     afterDrop: _angular_core.OutputEmitterRef<AfterDropResponse>;
     crossDrop: _angular_core.OutputEmitterRef<CrossDropResponse>;
+    treeDrop: _angular_core.OutputEmitterRef<ShipTreeDropEvent>;
     dragStartIndex: WritableSignal<number>;
     dragToIndex: WritableSignal<number>;
+    treeHoverIndex: WritableSignal<number>;
+    treeHoverPosition: WritableSignal<"before" | "after" | "inside" | null>;
     initialPositions: WritableSignal<{
         x: number;
         y: number;
@@ -63,10 +73,24 @@ declare class ShipSortable implements OnInit, OnDestroy {
     dragEnd(): void;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipSortable, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ShipSortable, "[shSortable]", never, { "shSortable": { "alias": "shSortable"; "required": false; "isSignal": true; }; "sortableGroup": { "alias": "sortableGroup"; "required": false; "isSignal": true; }; }, { "sortDrop": "sortDrop"; "afterDrop": "afterDrop"; "crossDrop": "crossDrop"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ShipSortable, "[shSortable]", never, { "shSortable": { "alias": "shSortable"; "required": false; "isSignal": true; }; "sortableGroup": { "alias": "sortableGroup"; "required": false; "isSignal": true; }; "sortingMode": { "alias": "sortingMode"; "required": false; "isSignal": true; }; "treeItems": { "alias": "treeItems"; "required": false; "isSignal": true; }; }, { "treeItems": "treeItemsChange"; "sortDrop": "sortDrop"; "afterDrop": "afterDrop"; "crossDrop": "crossDrop"; "treeDrop": "treeDrop"; }, never, never, true, never>;
 }
 declare function moveIndex<T = any>(array: T[], event: Pick<ShipDropEvent, 'previousIndex' | 'currentIndex'> | Pick<AfterDropResponse, 'fromIndex' | 'toIndex'>): T[];
 declare function transferArrayItem<T = any>(currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number): void;
+interface TreeSortableManagerConfig<T> {
+    getId?: (item: T) => string;
+    getParentId?: (item: T) => string | null;
+    setParentId?: (item: T, parentId: string | null) => void;
+    getDepth?: (item: T) => number;
+    setDepth?: (item: T, depth: number) => void;
+    isFolder?: (item: T) => boolean;
+    isOpen?: (item: T) => boolean;
+    setIsOpen?: (item: T, isOpen: boolean) => void;
+}
+declare function createTreeSortableManager<T>(nodesSignal: WritableSignal<T[]>, config?: TreeSortableManagerConfig<T>): {
+    visibleNodes: _angular_core.Signal<T[]>;
+    drop(event: ShipTreeDropEvent, visibleNodesList: T[]): void;
+};
 
-export { ShipSortable, createSortableManager, moveIndex, transferArrayItem };
-export type { AfterDropResponse, CrossDropResponse, ShipDropEvent, SortableManagerConfig };
+export { ShipSortable, createSortableManager, createTreeSortableManager, moveIndex, transferArrayItem };
+export type { AfterDropResponse, CrossDropResponse, ShipDropEvent, ShipTreeDropEvent, SortableManagerConfig, TreeSortableManagerConfig };

package/types/ship-ui-core-ship-spotlight.d.ts

@@ -16,10 +16,11 @@ interface ShipSpotlightServiceOptions {
     shortcut?: string;
     customFilter?: boolean;
     searchQuery?: string;
+    dialogClass?: string;
 }
 interface ShipSpotlightConfig {
     defaultItems?: ShipSpotlightItem[];
-    enableShortcuts?: boolean;
+    enableGlobalEventListener?: boolean;
 }
 declare const SHIP_SPOTLIGHT_CONFIG: InjectionToken<ShipSpotlightConfig>;
 declare function provideShipSpotlight(config: ShipSpotlightConfig): Provider;

package/types/ship-ui-core-ship-tree.d.ts

@@ -0,0 +1,67 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef, TemplateRef } from '@angular/core';
+
+declare class ShipTreeOpenIcon {
+    readonly el: ElementRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipTreeOpenIcon, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ShipTreeOpenIcon, "sh-icon[openIcon]", never, {}, {}, never, never, true, never>;
+}
+declare class ShipTreeClosedIcon {
+    readonly el: ElementRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipTreeClosedIcon, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ShipTreeClosedIcon, "sh-icon[closedIcon]", never, {}, {}, never, never, true, never>;
+}
+declare class ShipTreeItemIcon {
+    readonly el: ElementRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipTreeItemIcon, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ShipTreeItemIcon, "sh-icon[itemIcon]", never, {}, {}, never, never, true, never>;
+}
+declare class ShipTree {
+    /** The flat list of all tree nodes. */
+    readonly items: _angular_core.ModelSignal<any[]>;
+    /** Optional Writable/Readable WritableSignal manager created by createTreeSortableManager. */
+    readonly sortableManager: _angular_core.InputSignal<any>;
+    /** Currently selected node ID. */
+    readonly selectedId: _angular_core.ModelSignal<string | null>;
+    readonly getId: _angular_core.InputSignal<(item: any) => string>;
+    readonly getName: _angular_core.InputSignal<(item: any) => string>;
+    readonly getParentId: _angular_core.InputSignal<(item: any) => string | null>;
+    readonly isFolder: _angular_core.InputSignal<(item: any) => boolean>;
+    readonly getIsOpen: _angular_core.InputSignal<(item: any) => boolean>;
+    readonly setIsOpen: _angular_core.InputSignal<(item: any, isOpen: boolean) => void>;
+    /** Function returning a custom icon name for a node. */
+    readonly getIcon: _angular_core.InputSignal<(item: any) => string | null>;
+    readonly openIconDir: _angular_core.Signal<ShipTreeOpenIcon | undefined>;
+    readonly closedIconDir: _angular_core.Signal<ShipTreeClosedIcon | undefined>;
+    readonly itemIconDir: _angular_core.Signal<ShipTreeItemIcon | undefined>;
+    openIconName: _angular_core.Signal<any>;
+    closedIconName: _angular_core.Signal<any>;
+    itemIconName: _angular_core.Signal<any>;
+    readonly nodeClick: _angular_core.OutputEmitterRef<any>;
+    readonly nodeToggle: _angular_core.OutputEmitterRef<{
+        node: any;
+        isOpen: boolean;
+    }>;
+    readonly nodeTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    readonly dirTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    /** Filter the full flat array down to only visible nodes (whose parents are all expanded). */
+    visibleNodes: _angular_core.Signal<any>;
+    toggleNode(node: any, event: MouseEvent): void;
+    handleNodeClick(node: any, event: MouseEvent): void;
+    selectNode(node: any): void;
+    getDepthArray(depth: number): number[];
+    getNodeDepth(node: any): number;
+    getNodeIcon(node: any): string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipTree, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipTree, "sh-tree", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "sortableManager": { "alias": "sortableManager"; "required": false; "isSignal": true; }; "selectedId": { "alias": "selectedId"; "required": false; "isSignal": true; }; "getId": { "alias": "getId"; "required": false; "isSignal": true; }; "getName": { "alias": "getName"; "required": false; "isSignal": true; }; "getParentId": { "alias": "getParentId"; "required": false; "isSignal": true; }; "isFolder": { "alias": "isFolder"; "required": false; "isSignal": true; }; "getIsOpen": { "alias": "getIsOpen"; "required": false; "isSignal": true; }; "setIsOpen": { "alias": "setIsOpen"; "required": false; "isSignal": true; }; "getIcon": { "alias": "getIcon"; "required": false; "isSignal": true; }; }, { "items": "itemsChange"; "selectedId": "selectedIdChange"; "nodeClick": "nodeClick"; "nodeToggle": "nodeToggle"; }, ["openIconDir", "closedIconDir", "itemIconDir", "nodeTemplate", "dirTemplate"], ["[emptyState]", "[emptyState]"], true, never>;
+}
+declare class ShipTreeNode {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipTreeNode, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipTreeNode, "sh-tree-node", never, {}, {}, never, ["sh-icon", "*", "[actions], sh-tree-node-actions"], true, never>;
+}
+declare class ShipTreeNodeActions {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipTreeNodeActions, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipTreeNodeActions, "sh-tree-node-actions", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { ShipTree, ShipTreeClosedIcon, ShipTreeItemIcon, ShipTreeNode, ShipTreeNodeActions, ShipTreeOpenIcon };