@ship-ui/core 0.22.10 → 0.22.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ship-ui/core",
   "license": "MIT",
-  "version": "0.22.10",
+  "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-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-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 };