@styloviz/tree-view 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 StyloViz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,53 @@
+# @styloviz/tree-view
+
+> 8 premium variants: collapsible tree, file explorer, tri-state checkboxes, org chart, tree table, searchable, drag & drop reordering and lazy load.
+
+Part of the **StyloViz UI Kit** — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, `OnPush`, strongly typed, dark-mode ready.
+
+## Installation
+
+```bash
+npm install @styloviz/core @styloviz/tree-view
+```
+
+Requires `@angular/core` and `@angular/common` >= 21. `@styloviz/core` is a peer dependency shared by every component. Prefer everything at once? `@styloviz/all` installs the whole free tier in one command.
+
+## Usage
+
+```ts
+import { SvTreeViewComponent } from '@styloviz/tree-view';
+
+@Component({
+  standalone: true,
+  imports: [SvTreeViewComponent],
+  template: `
+    <sv-tree-view [nodes]="nodes" />
+  `,
+})
+export class DemoComponent {}
+```
+
+## Inputs
+
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `nodes` | `TreeNode[]` | `[]` | Tree node data (nested children, optional icons). |
+| `selectable` | `boolean` | `true` | Enable single-row selection highlight. |
+| `showLines` | `boolean` | `true` | Show vertical connector guide lines. |
+
+## Outputs
+
+| Output | Type | Description |
+| --- | --- | --- |
+| `nodeClick` | `TreeNodeClickEvent` | — |
+| `nodeExpand` | `TreeNode` | — |
+| `nodeCollapse` | `TreeNode` | — |
+| `nodeSelect` | `TreeNode` | — |
+
+## Documentation
+
+Full API reference and live demos: https://styloviz.dev/docs/tree-view
+
+## License
+
+MIT

package/fesm2022/styloviz-tree-view.mjs

@@ -0,0 +1,327 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, inject, ElementRef, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+
+// ─── Component ────────────────────────────────────────────────────────────────
+/**
+ * SvTreeViewComponent (Free) — Collapsible single-select tree.
+ *
+ * For the full 8-variant suite (file explorer, checkbox tri-state,
+ * org chart, tree table, searchable, draggable, lazy-load) upgrade to
+ * `@styloviz-pro/tree-view`.
+ *
+ * @example
+ * ```html
+ * <sv-tree-view [nodes]="nodes" (nodeClick)="onNodeClick($event)" />
+ * ```
+ */
+class SvTreeViewComponent {
+    /** Tree node data (nested children, optional icons). */
+    nodes = input([], ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    /** Enable single-row selection highlight. @default true */
+    selectable = input(true, ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
+    /** Show vertical connector guide lines. @default true */
+    showLines = input(true, ...(ngDevMode ? [{ debugName: "showLines" }] : /* istanbul ignore next */ []));
+    nodeClick = output();
+    nodeExpand = output();
+    nodeCollapse = output();
+    nodeSelect = output();
+    expandedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []));
+    selectedId = signal(null, ...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
+    /** The treeitem currently in the tab order (roving tabindex). */
+    activeId = signal(null, ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    _nodes = signal([], ...(ngDevMode ? [{ debugName: "_nodes" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    visibleNodes = computed(() => this._flatten(this._nodes(), 0, this.expandedIds()), ...(ngDevMode ? [{ debugName: "visibleNodes" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this._nodes.set(this.nodes());
+        const ids = new Set();
+        this._collectExpanded(this.nodes(), ids);
+        this.expandedIds.set(ids);
+        // Seed the roving tabindex on the first node so the tree is tab-reachable.
+        this.activeId.set(this.visibleNodes()[0]?.node.id ?? null);
+    }
+    toggle(node) {
+        if (node.disabled)
+            return;
+        const ids = new Set(this.expandedIds());
+        if (ids.has(node.id)) {
+            ids.delete(node.id);
+            this.nodeCollapse.emit(node);
+        }
+        else {
+            ids.add(node.id);
+            this.nodeExpand.emit(node);
+        }
+        this.expandedIds.set(ids);
+    }
+    select(node, depth) {
+        if (node.disabled || !this.selectable())
+            return;
+        this.selectedId.set(node.id);
+        this.nodeSelect.emit(node);
+        this.nodeClick.emit({ node, depth });
+    }
+    isSelected(id) { return this.selectedId() === id; }
+    // ── Keyboard navigation (WAI-ARIA tree) ─────────────────────────────────────
+    /** Roving tabindex: only the active treeitem is in the tab order. */
+    treeTabIndex(id) {
+        const active = this.activeId() ?? this.visibleNodes()[0]?.node.id ?? null;
+        return id === active ? 0 : -1;
+    }
+    setActive(id) { this.activeId.set(id); }
+    /**
+     * Arrow / Home / End / Enter / Space handling per the WAI-ARIA tree pattern.
+     * Arrow Up/Down move between visible rows; Right expands or steps into a
+     * child; Left collapses or steps to the parent; Enter/Space selects.
+     */
+    onKeydown(event, fn, index) {
+        const list = this.visibleNodes();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this._focusStep(list, index, +1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this._focusStep(list, index, -1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this._focusFrom(list, 0, +1);
+                break;
+            case 'End':
+                event.preventDefault();
+                this._focusFrom(list, list.length - 1, -1);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (fn.hasChildren && !fn.isExpanded) {
+                    this.toggle(fn.node);
+                }
+                else if (fn.hasChildren && fn.isExpanded) {
+                    this._focusStep(list, index, +1);
+                }
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (fn.hasChildren && fn.isExpanded) {
+                    this.toggle(fn.node);
+                }
+                else {
+                    this._focusParent(list, index, fn.depth);
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.select(fn.node, fn.depth);
+                this.setActive(fn.node.id);
+                break;
+            default:
+                return;
+        }
+    }
+    /** Move focus by `dir` steps from `from`, skipping disabled rows. */
+    _focusStep(list, from, dir) {
+        for (let i = from + dir; i >= 0 && i < list.length; i += dir) {
+            if (!list[i].node.disabled) {
+                this._focus(list[i].node.id);
+                return;
+            }
+        }
+    }
+    /** From `start`, find the first enabled row in direction `dir` and focus it. */
+    _focusFrom(list, start, dir) {
+        for (let i = start; i >= 0 && i < list.length; i += dir) {
+            if (!list[i].node.disabled) {
+                this._focus(list[i].node.id);
+                return;
+            }
+        }
+    }
+    /** Focus the parent row (nearest previous row with a smaller depth). */
+    _focusParent(list, index, depth) {
+        for (let i = index - 1; i >= 0; i--) {
+            if (list[i].depth < depth) {
+                this._focus(list[i].node.id);
+                return;
+            }
+        }
+    }
+    /** Set the active id and move DOM focus to that row (after any re-render). */
+    _focus(id) {
+        this.setActive(id);
+        queueMicrotask(() => {
+            const rows = this.host.nativeElement.querySelectorAll('[data-tree-id]');
+            rows.forEach(el => { if (el.dataset['treeId'] === id)
+                el.focus(); });
+        });
+    }
+    _flatten(nodes, depth, expanded) {
+        const result = [];
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            const hasChildren = !!node.children?.length;
+            const isExp = expanded.has(node.id);
+            result.push({ node, depth, isLast: i === nodes.length - 1, hasChildren, isExpanded: isExp });
+            if (isExp && node.children?.length) {
+                result.push(...this._flatten(node.children, depth + 1, expanded));
+            }
+        }
+        return result;
+    }
+    _collectExpanded(nodes, ids) {
+        for (const n of nodes) {
+            if (n.expanded)
+                ids.add(n.id);
+            if (n.children)
+                this._collectExpanded(n.children, ids);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvTreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SvTreeViewComponent, isStandalone: true, selector: "sv-tree-view", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, showLines: { classPropertyName: "showLines", publicName: "showLines", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", nodeSelect: "nodeSelect" }, ngImport: i0, template: `
+    <div class="sv-tree-view select-none" role="tree">
+      @for (fn of visibleNodes(); track fn.node.id) {
+        <div class="group flex items-center gap-1 rounded-lg px-1 outline-none transition-colors duration-100 cursor-pointer focus-visible:ring-2 focus-visible:ring-indigo-400"
+             [class]="fn.node.disabled
+                        ? 'opacity-40 cursor-not-allowed py-1.5'
+                        : isSelected(fn.node.id)
+                            ? 'py-1.5 bg-indigo-50 dark:bg-indigo-900/25'
+                            : 'py-1.5 hover:bg-gray-100/70 dark:hover:bg-gray-800/50'"
+             [style.paddingLeft.px]="fn.depth * 20 + 4"
+             (click)="select(fn.node, fn.depth); setActive(fn.node.id)"
+             (keydown)="onKeydown($event, fn, $index)"
+             role="treeitem"
+             [attr.data-tree-id]="fn.node.id"
+             [attr.tabindex]="treeTabIndex(fn.node.id)"
+             [attr.aria-level]="fn.depth + 1"
+             [attr.aria-expanded]="fn.hasChildren ? fn.isExpanded : null"
+             [attr.aria-selected]="isSelected(fn.node.id)">
+
+          <!-- Chevron toggle -->
+          <button type="button"
+                  class="flex h-5 w-5 shrink-0 items-center justify-center rounded
+                         text-gray-400 transition-all hover:text-gray-700 dark:hover:text-gray-200
+                         focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-indigo-400"
+                  [class.invisible]="!fn.hasChildren"
+                  (click)="toggle(fn.node); $event.stopPropagation()"
+                  [attr.aria-label]="fn.isExpanded ? 'Collapse' : 'Expand'">
+            <svg class="h-3.5 w-3.5 transition-transform duration-150"
+                 [class.rotate-90]="fn.isExpanded"
+                 fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/>
+            </svg>
+          </button>
+
+          <!-- Icon -->
+          @if (fn.node.icon) {
+            <span class="shrink-0 text-sm" aria-hidden="true">{{ fn.node.icon }}</span>
+          }
+
+          <!-- Label -->
+          <span class="flex-1 truncate text-[13px] font-medium"
+                [class]="isSelected(fn.node.id)
+                           ? 'text-indigo-700 dark:text-indigo-300'
+                           : 'text-gray-800 dark:text-gray-100'">
+            {{ fn.node.label }}
+          </span>
+
+          <!-- Badge -->
+          @if (fn.node.badge) {
+            <span class="ml-auto shrink-0 rounded-full bg-gray-100 px-1.5 py-px
+                         text-[10px] font-semibold text-gray-600
+                         dark:bg-gray-800 dark:text-gray-300">
+              {{ fn.node.badge }}
+            </span>
+          }
+        </div>
+      }
+
+      @if (!visibleNodes().length) {
+        <p class="py-8 text-center text-sm text-gray-500 dark:text-gray-400">
+          No items to display
+        </p>
+      }
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvTreeViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sv-tree-view',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div class="sv-tree-view select-none" role="tree">
+      @for (fn of visibleNodes(); track fn.node.id) {
+        <div class="group flex items-center gap-1 rounded-lg px-1 outline-none transition-colors duration-100 cursor-pointer focus-visible:ring-2 focus-visible:ring-indigo-400"
+             [class]="fn.node.disabled
+                        ? 'opacity-40 cursor-not-allowed py-1.5'
+                        : isSelected(fn.node.id)
+                            ? 'py-1.5 bg-indigo-50 dark:bg-indigo-900/25'
+                            : 'py-1.5 hover:bg-gray-100/70 dark:hover:bg-gray-800/50'"
+             [style.paddingLeft.px]="fn.depth * 20 + 4"
+             (click)="select(fn.node, fn.depth); setActive(fn.node.id)"
+             (keydown)="onKeydown($event, fn, $index)"
+             role="treeitem"
+             [attr.data-tree-id]="fn.node.id"
+             [attr.tabindex]="treeTabIndex(fn.node.id)"
+             [attr.aria-level]="fn.depth + 1"
+             [attr.aria-expanded]="fn.hasChildren ? fn.isExpanded : null"
+             [attr.aria-selected]="isSelected(fn.node.id)">
+
+          <!-- Chevron toggle -->
+          <button type="button"
+                  class="flex h-5 w-5 shrink-0 items-center justify-center rounded
+                         text-gray-400 transition-all hover:text-gray-700 dark:hover:text-gray-200
+                         focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-indigo-400"
+                  [class.invisible]="!fn.hasChildren"
+                  (click)="toggle(fn.node); $event.stopPropagation()"
+                  [attr.aria-label]="fn.isExpanded ? 'Collapse' : 'Expand'">
+            <svg class="h-3.5 w-3.5 transition-transform duration-150"
+                 [class.rotate-90]="fn.isExpanded"
+                 fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/>
+            </svg>
+          </button>
+
+          <!-- Icon -->
+          @if (fn.node.icon) {
+            <span class="shrink-0 text-sm" aria-hidden="true">{{ fn.node.icon }}</span>
+          }
+
+          <!-- Label -->
+          <span class="flex-1 truncate text-[13px] font-medium"
+                [class]="isSelected(fn.node.id)
+                           ? 'text-indigo-700 dark:text-indigo-300'
+                           : 'text-gray-800 dark:text-gray-100'">
+            {{ fn.node.label }}
+          </span>
+
+          <!-- Badge -->
+          @if (fn.node.badge) {
+            <span class="ml-auto shrink-0 rounded-full bg-gray-100 px-1.5 py-px
+                         text-[10px] font-semibold text-gray-600
+                         dark:bg-gray-800 dark:text-gray-300">
+              {{ fn.node.badge }}
+            </span>
+          }
+        </div>
+      }
+
+      @if (!visibleNodes().length) {
+        <p class="py-8 text-center text-sm text-gray-500 dark:text-gray-400">
+          No items to display
+        </p>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], showLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLines", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SvTreeViewComponent };
+//# sourceMappingURL=styloviz-tree-view.mjs.map

package/fesm2022/styloviz-tree-view.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styloviz-tree-view.mjs","sources":["../../../../projects/tree-view-free/src/lib/tree-view.component.ts","../../../../projects/tree-view-free/src/styloviz-tree-view.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  OnInit,\n  output,\n  signal,\n} from '@angular/core';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface TreeNode {\n  readonly id: string;\n  readonly label: string;\n  readonly icon?: string;\n  children?: TreeNode[];\n  readonly expanded?: boolean;\n  readonly disabled?: boolean;\n  readonly badge?: string;\n}\n\nexport interface FlatNode {\n  readonly node: TreeNode;\n  readonly depth: number;\n  readonly isLast: boolean;\n  readonly hasChildren: boolean;\n  readonly isExpanded: boolean;\n}\n\nexport interface TreeNodeClickEvent {\n  readonly node: TreeNode;\n  readonly depth: number;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * SvTreeViewComponent (Free) — Collapsible single-select tree.\n *\n * For the full 8-variant suite (file explorer, checkbox tri-state,\n * org chart, tree table, searchable, draggable, lazy-load) upgrade to\n * `@styloviz-pro/tree-view`.\n *\n * @example\n * ```html\n * <sv-tree-view [nodes]=\"nodes\" (nodeClick)=\"onNodeClick($event)\" />\n * ```\n */\n@Component({\n  selector: 'sv-tree-view',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div class=\"sv-tree-view select-none\" role=\"tree\">\n      @for (fn of visibleNodes(); track fn.node.id) {\n        <div class=\"group flex items-center gap-1 rounded-lg px-1 outline-none transition-colors duration-100 cursor-pointer focus-visible:ring-2 focus-visible:ring-indigo-400\"\n             [class]=\"fn.node.disabled\n                        ? 'opacity-40 cursor-not-allowed py-1.5'\n                        : isSelected(fn.node.id)\n                            ? 'py-1.5 bg-indigo-50 dark:bg-indigo-900/25'\n                            : 'py-1.5 hover:bg-gray-100/70 dark:hover:bg-gray-800/50'\"\n             [style.paddingLeft.px]=\"fn.depth * 20 + 4\"\n             (click)=\"select(fn.node, fn.depth); setActive(fn.node.id)\"\n             (keydown)=\"onKeydown($event, fn, $index)\"\n             role=\"treeitem\"\n             [attr.data-tree-id]=\"fn.node.id\"\n             [attr.tabindex]=\"treeTabIndex(fn.node.id)\"\n             [attr.aria-level]=\"fn.depth + 1\"\n             [attr.aria-expanded]=\"fn.hasChildren ? fn.isExpanded : null\"\n             [attr.aria-selected]=\"isSelected(fn.node.id)\">\n\n          <!-- Chevron toggle -->\n          <button type=\"button\"\n                  class=\"flex h-5 w-5 shrink-0 items-center justify-center rounded\n                         text-gray-400 transition-all hover:text-gray-700 dark:hover:text-gray-200\n                         focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-indigo-400\"\n                  [class.invisible]=\"!fn.hasChildren\"\n                  (click)=\"toggle(fn.node); $event.stopPropagation()\"\n                  [attr.aria-label]=\"fn.isExpanded ? 'Collapse' : 'Expand'\">\n            <svg class=\"h-3.5 w-3.5 transition-transform duration-150\"\n                 [class.rotate-90]=\"fn.isExpanded\"\n                 fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\"/>\n            </svg>\n          </button>\n\n          <!-- Icon -->\n          @if (fn.node.icon) {\n            <span class=\"shrink-0 text-sm\" aria-hidden=\"true\">{{ fn.node.icon }}</span>\n          }\n\n          <!-- Label -->\n          <span class=\"flex-1 truncate text-[13px] font-medium\"\n                [class]=\"isSelected(fn.node.id)\n                           ? 'text-indigo-700 dark:text-indigo-300'\n                           : 'text-gray-800 dark:text-gray-100'\">\n            {{ fn.node.label }}\n          </span>\n\n          <!-- Badge -->\n          @if (fn.node.badge) {\n            <span class=\"ml-auto shrink-0 rounded-full bg-gray-100 px-1.5 py-px\n                         text-[10px] font-semibold text-gray-600\n                         dark:bg-gray-800 dark:text-gray-300\">\n              {{ fn.node.badge }}\n            </span>\n          }\n        </div>\n      }\n\n      @if (!visibleNodes().length) {\n        <p class=\"py-8 text-center text-sm text-gray-500 dark:text-gray-400\">\n          No items to display\n        </p>\n      }\n    </div>\n  `,\n})\nexport class SvTreeViewComponent implements OnInit {\n  /** Tree node data (nested children, optional icons). */\n  readonly nodes      = input<TreeNode[]>([]);\n  /** Enable single-row selection highlight. @default true */\n  readonly selectable = input<boolean>(true);\n  /** Show vertical connector guide lines. @default true */\n  readonly showLines  = input<boolean>(true);\n\n  readonly nodeClick    = output<TreeNodeClickEvent>();\n  readonly nodeExpand   = output<TreeNode>();\n  readonly nodeCollapse = output<TreeNode>();\n  readonly nodeSelect   = output<TreeNode>();\n\n  readonly expandedIds = signal<Set<string>>(new Set());\n  readonly selectedId  = signal<string | null>(null);\n  /** The treeitem currently in the tab order (roving tabindex). */\n  readonly activeId    = signal<string | null>(null);\n\n  private readonly _nodes = signal<TreeNode[]>([]);\n  private readonly host   = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  readonly visibleNodes = computed<FlatNode[]>(() =>\n    this._flatten(this._nodes(), 0, this.expandedIds())\n  );\n\n  ngOnInit(): void {\n    this._nodes.set(this.nodes());\n    const ids = new Set<string>();\n    this._collectExpanded(this.nodes(), ids);\n    this.expandedIds.set(ids);\n    // Seed the roving tabindex on the first node so the tree is tab-reachable.\n    this.activeId.set(this.visibleNodes()[0]?.node.id ?? null);\n  }\n\n  toggle(node: TreeNode): void {\n    if (node.disabled) return;\n    const ids = new Set(this.expandedIds());\n    if (ids.has(node.id)) {\n      ids.delete(node.id);\n      this.nodeCollapse.emit(node);\n    } else {\n      ids.add(node.id);\n      this.nodeExpand.emit(node);\n    }\n    this.expandedIds.set(ids);\n  }\n\n  select(node: TreeNode, depth: number): void {\n    if (node.disabled || !this.selectable()) return;\n    this.selectedId.set(node.id);\n    this.nodeSelect.emit(node);\n    this.nodeClick.emit({ node, depth });\n  }\n\n  isSelected(id: string): boolean { return this.selectedId() === id; }\n\n  // ── Keyboard navigation (WAI-ARIA tree) ─────────────────────────────────────\n\n  /** Roving tabindex: only the active treeitem is in the tab order. */\n  treeTabIndex(id: string): number {\n    const active = this.activeId() ?? this.visibleNodes()[0]?.node.id ?? null;\n    return id === active ? 0 : -1;\n  }\n\n  setActive(id: string): void { this.activeId.set(id); }\n\n  /**\n   * Arrow / Home / End / Enter / Space handling per the WAI-ARIA tree pattern.\n   * Arrow Up/Down move between visible rows; Right expands or steps into a\n   * child; Left collapses or steps to the parent; Enter/Space selects.\n   */\n  onKeydown(event: KeyboardEvent, fn: FlatNode, index: number): void {\n    const list = this.visibleNodes();\n    switch (event.key) {\n      case 'ArrowDown': event.preventDefault(); this._focusStep(list, index, +1); break;\n      case 'ArrowUp':   event.preventDefault(); this._focusStep(list, index, -1); break;\n      case 'Home':      event.preventDefault(); this._focusFrom(list, 0, +1); break;\n      case 'End':       event.preventDefault(); this._focusFrom(list, list.length - 1, -1); break;\n      case 'ArrowRight':\n        event.preventDefault();\n        if (fn.hasChildren && !fn.isExpanded)      { this.toggle(fn.node); }\n        else if (fn.hasChildren && fn.isExpanded)  { this._focusStep(list, index, +1); }\n        break;\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (fn.hasChildren && fn.isExpanded) { this.toggle(fn.node); }\n        else                                 { this._focusParent(list, index, fn.depth); }\n        break;\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        this.select(fn.node, fn.depth);\n        this.setActive(fn.node.id);\n        break;\n      default:\n        return;\n    }\n  }\n\n  /** Move focus by `dir` steps from `from`, skipping disabled rows. */\n  private _focusStep(list: readonly FlatNode[], from: number, dir: 1 | -1): void {\n    for (let i = from + dir; i >= 0 && i < list.length; i += dir) {\n      if (!list[i].node.disabled) { this._focus(list[i].node.id); return; }\n    }\n  }\n\n  /** From `start`, find the first enabled row in direction `dir` and focus it. */\n  private _focusFrom(list: readonly FlatNode[], start: number, dir: 1 | -1): void {\n    for (let i = start; i >= 0 && i < list.length; i += dir) {\n      if (!list[i].node.disabled) { this._focus(list[i].node.id); return; }\n    }\n  }\n\n  /** Focus the parent row (nearest previous row with a smaller depth). */\n  private _focusParent(list: readonly FlatNode[], index: number, depth: number): void {\n    for (let i = index - 1; i >= 0; i--) {\n      if (list[i].depth < depth) { this._focus(list[i].node.id); return; }\n    }\n  }\n\n  /** Set the active id and move DOM focus to that row (after any re-render). */\n  private _focus(id: string): void {\n    this.setActive(id);\n    queueMicrotask(() => {\n      const rows = this.host.nativeElement.querySelectorAll<HTMLElement>('[data-tree-id]');\n      rows.forEach(el => { if (el.dataset['treeId'] === id) el.focus(); });\n    });\n  }\n\n  private _flatten(nodes: TreeNode[], depth: number, expanded: Set<string>): FlatNode[] {\n    const result: FlatNode[] = [];\n    for (let i = 0; i < nodes.length; i++) {\n      const node = nodes[i];\n      const hasChildren = !!node.children?.length;\n      const isExp = expanded.has(node.id);\n      result.push({ node, depth, isLast: i === nodes.length - 1, hasChildren, isExpanded: isExp });\n      if (isExp && node.children?.length) {\n        result.push(...this._flatten(node.children, depth + 1, expanded));\n      }\n    }\n    return result;\n  }\n\n  private _collectExpanded(nodes: TreeNode[], ids: Set<string>): void {\n    for (const n of nodes) {\n      if (n.expanded) ids.add(n.id);\n      if (n.children) this._collectExpanded(n.children, ids);\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@styloviz/tree-view",
+  "version": "0.1.1",
+  "description": "8 premium variants: collapsible tree, file explorer, tri-state checkboxes, org chart, tree table, searchable, drag & drop reordering and lazy load.",
+  "keywords": [
+    "angular",
+    "tailwind",
+    "tree-view",
+    "tree"
+  ],
+  "license": "MIT",
+  "author": "sazzad-bs23",
+  "homepage": "https://styloviz.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rhossain/angular-tailwind-dashboard-components.git",
+    "directory": "projects/tree-view-free"
+  },
+  "bugs": {
+    "url": "https://github.com/rhossain/angular-tailwind-dashboard-components/issues"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/styloviz-tree-view.mjs",
+  "typings": "types/styloviz-tree-view.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/styloviz-tree-view.d.ts",
+      "default": "./fesm2022/styloviz-tree-view.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/styloviz-tree-view.d.ts

@@ -0,0 +1,83 @@
+import * as _angular_core from '@angular/core';
+import { OnInit } from '@angular/core';
+
+interface TreeNode {
+    readonly id: string;
+    readonly label: string;
+    readonly icon?: string;
+    children?: TreeNode[];
+    readonly expanded?: boolean;
+    readonly disabled?: boolean;
+    readonly badge?: string;
+}
+interface FlatNode {
+    readonly node: TreeNode;
+    readonly depth: number;
+    readonly isLast: boolean;
+    readonly hasChildren: boolean;
+    readonly isExpanded: boolean;
+}
+interface TreeNodeClickEvent {
+    readonly node: TreeNode;
+    readonly depth: number;
+}
+/**
+ * SvTreeViewComponent (Free) — Collapsible single-select tree.
+ *
+ * For the full 8-variant suite (file explorer, checkbox tri-state,
+ * org chart, tree table, searchable, draggable, lazy-load) upgrade to
+ * `@styloviz-pro/tree-view`.
+ *
+ * @example
+ * ```html
+ * <sv-tree-view [nodes]="nodes" (nodeClick)="onNodeClick($event)" />
+ * ```
+ */
+declare class SvTreeViewComponent implements OnInit {
+    /** Tree node data (nested children, optional icons). */
+    readonly nodes: _angular_core.InputSignal<TreeNode[]>;
+    /** Enable single-row selection highlight. @default true */
+    readonly selectable: _angular_core.InputSignal<boolean>;
+    /** Show vertical connector guide lines. @default true */
+    readonly showLines: _angular_core.InputSignal<boolean>;
+    readonly nodeClick: _angular_core.OutputEmitterRef<TreeNodeClickEvent>;
+    readonly nodeExpand: _angular_core.OutputEmitterRef<TreeNode>;
+    readonly nodeCollapse: _angular_core.OutputEmitterRef<TreeNode>;
+    readonly nodeSelect: _angular_core.OutputEmitterRef<TreeNode>;
+    readonly expandedIds: _angular_core.WritableSignal<Set<string>>;
+    readonly selectedId: _angular_core.WritableSignal<string | null>;
+    /** The treeitem currently in the tab order (roving tabindex). */
+    readonly activeId: _angular_core.WritableSignal<string | null>;
+    private readonly _nodes;
+    private readonly host;
+    readonly visibleNodes: _angular_core.Signal<FlatNode[]>;
+    ngOnInit(): void;
+    toggle(node: TreeNode): void;
+    select(node: TreeNode, depth: number): void;
+    isSelected(id: string): boolean;
+    /** Roving tabindex: only the active treeitem is in the tab order. */
+    treeTabIndex(id: string): number;
+    setActive(id: string): void;
+    /**
+     * Arrow / Home / End / Enter / Space handling per the WAI-ARIA tree pattern.
+     * Arrow Up/Down move between visible rows; Right expands or steps into a
+     * child; Left collapses or steps to the parent; Enter/Space selects.
+     */
+    onKeydown(event: KeyboardEvent, fn: FlatNode, index: number): void;
+    /** Move focus by `dir` steps from `from`, skipping disabled rows. */
+    private _focusStep;
+    /** From `start`, find the first enabled row in direction `dir` and focus it. */
+    private _focusFrom;
+    /** Focus the parent row (nearest previous row with a smaller depth). */
+    private _focusParent;
+    /** Set the active id and move DOM focus to that row (after any re-render). */
+    private _focus;
+    private _flatten;
+    private _collectExpanded;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SvTreeViewComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SvTreeViewComponent, "sv-tree-view", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "showLines": { "alias": "showLines"; "required": false; "isSignal": true; }; }, { "nodeClick": "nodeClick"; "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; "nodeSelect": "nodeSelect"; }, never, never, true, never>;
+}
+
+export { SvTreeViewComponent };
+export type { FlatNode, TreeNode, TreeNodeClickEvent };
+//# sourceMappingURL=styloviz-tree-view.d.ts.map

package/types/styloviz-tree-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styloviz-tree-view.d.ts","sources":["../../../../projects/tree-view-free/src/lib/tree-view.component.ts"],"mappings":";;;UAciB,QAAQ;AACvB;AACA;AACA;AACA,eAAW,QAAQ;AACnB;AACA;AACA;AACD;UAEgB,QAAQ;AACvB,mBAAe,QAAQ;AACvB;AACA;AACA;AACA;AACD;UAEgB,kBAAkB;AACjC,mBAAe,QAAQ;AACvB;AACD;AAID;;;;;;;;;;;AAWG;AACH,cAsEa,mBAAoB,YAAW,MAAM;;oBAElC,aAAA,CAAA,WAAA,CAAA,QAAA;;yBAEK,aAAA,CAAA,WAAA;;wBAED,aAAA,CAAA,WAAA;wBAEA,aAAA,CAAA,gBAAA,CAAA,kBAAA;yBACC,aAAA,CAAA,gBAAA,CAAA,QAAA;2BACE,aAAA,CAAA,gBAAA,CAAA,QAAA;yBACF,aAAA,CAAA,gBAAA,CAAA,QAAA;0BAEC,aAAA,CAAA,cAAA,CAAA,GAAA;yBACD,aAAA,CAAA,cAAA;;uBAEF,aAAA,CAAA,cAAA;AAEjB;AACA;2BAEqB,aAAA,CAAA,MAAA,CAAA,QAAA;AAIrB;AASA,iBAAa,QAAQ;iBAaR,QAAQ;AAOrB;;AAKA;AAKA;AAEA;;;;AAIG;AACH,qBAAiB,aAAa,MAAM,QAAQ;;AA6B5C;;AAOA;;AAOA;;AAOA;AAQA;AAcA;oDA/IW,mBAAmB;sDAAnB,mBAAmB;AAqJ/B;;;;","names":[]}