@cluetec/ngcx-tree 0.1.0-angular-15

package/lib/ngcx-tree/ngcx-tree.component.d.ts

@@ -0,0 +1,56 @@
+import { CdkDrag, CdkDragRelease, CdkDropList } from '@angular/cdk/drag-drop';
+import { NestedTreeControl } from '@angular/cdk/tree';
+import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { NgcxTreeDataSource } from './ngcx-tree-data.source';
+import { NgcxTreeApi, NgcxTreeConfig, NgcxTreeNode, NgcxTreeNodeMovedEvent, NgcxTreeNodeWrapper } from './ngcx-tree-models';
+import * as i0 from "@angular/core";
+export declare class NgcxTreeComponent implements OnChanges, OnInit {
+    nodes?: NgcxTreeNode[];
+    config?: NgcxTreeConfig<any>;
+    nodeMoved: EventEmitter<NgcxTreeNodeMovedEvent<any>>;
+    customEvent: EventEmitter<any>;
+    clickEvent: EventEmitter<NgcxTreeNodeWrapper<any>>;
+    selectEvent: EventEmitter<NgcxTreeNodeWrapper<any>>;
+    readonly api: NgcxTreeApi<any>;
+    dataSource: NgcxTreeDataSource<NgcxTreeNodeWrapper<any>>;
+    treeControl: NestedTreeControl<NgcxTreeNodeWrapper<any>, string>;
+    dragging?: NgcxTreeNodeWrapper<any>;
+    selectedNode?: NgcxTreeNodeWrapper<any>;
+    DropType: typeof DropType;
+    disable: () => boolean;
+    private canceledByEsq?;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    updateTree(): void;
+    createWrapperNodes(nodes: NgcxTreeNode[], parent?: NgcxTreeNodeWrapper<any>, depth?: number): NgcxTreeNodeWrapper<any>[];
+    hasChild: (_: number, node: NgcxTreeNodeWrapper<any>) => boolean;
+    allowDrop(dropNode: NgcxTreeNodeWrapper<any>, dropType: DropType): boolean;
+    sortPredicate(): (index: number, drag: CdkDrag, drop: CdkDropList) => boolean;
+    disableDrag(node: NgcxTreeNodeWrapper<any>): boolean;
+    keyDownArrowUp(event: Event): void;
+    keyDownArrowDown(event: Event): void;
+    keyDownArrowLeft(event: Event): void;
+    keyDownArrowRight(event: Event): void;
+    keyEscapeWhileDragging(): void;
+    handleDragRelease(event: CdkDragRelease<NgcxTreeNodeWrapper<any>>): void;
+    private findAddIndex;
+    private removeElementFromPreviousPosition;
+    nodeClicked(nodeWrapper: NgcxTreeNodeWrapper<any>): void;
+    selectNode(nodeWrapper: NgcxTreeNodeWrapper<any> | undefined): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgcxTreeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgcxTreeComponent, "ngcx-tree", never, { "nodes": "nodes"; "config": "config"; }, { "nodeMoved": "nodeMoved"; "customEvent": "customEvent"; "clickEvent": "clickEvent"; "selectEvent": "selectEvent"; }, never, never, true, never>;
+}
+declare enum DropType {
+    DROP_AFTER = "DROP_AFTER",
+    DROP_BEFORE = "DROP_BEFORE",
+    DROP_INTO = "DROP_INTO"
+}
+export declare class NgcxTreeControl implements NgcxTreeApi<any> {
+    private treeComponent;
+    constructor(treeComponent: NgcxTreeComponent);
+    get treeControl(): NestedTreeControl<NgcxTreeNodeWrapper<any>, string>;
+    selectNodeById(id: string): void;
+    findNodeById(id: string): NgcxTreeNodeWrapper<any> | undefined;
+    private findNodeByIdInNodes;
+}
+export {};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@cluetec/ngcx-tree",
+  "version": "0.1.0-angular-15",
+  "description": "An angular tree component that allows to move nodes by drag and drop.",
+  "author": "Michael Niedermaier <mn@cluetec.de>",
+  "repository": "https://github.com/cluetec/ngcx-tree",
+  "license": "MIT",
+  "private": false,
+  "bugs": {
+    "url": "https://github.com/cluetec/ngcx-tree/issues"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=15",
+    "@angular/core": ">=15",
+    "@angular/cdk": ">=15"
+  },
+  "dependencies": {
+    "tslib": "^2.6.1"
+  },
+  "sideEffects": false,
+  "keywords": [
+    "angular",
+    "ng",
+    "tree",
+    "dnd",
+    "d&d",
+    "drag",
+    "and",
+    "drop",
+    "drag and drop",
+    "cluetec"
+  ],
+  "module": "fesm2015/cluetec-ngcx-tree.mjs",
+  "es2020": "fesm2020/cluetec-ngcx-tree.mjs",
+  "esm2020": "esm2020/cluetec-ngcx-tree.mjs",
+  "fesm2020": "fesm2020/cluetec-ngcx-tree.mjs",
+  "fesm2015": "fesm2015/cluetec-ngcx-tree.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2020": "./esm2020/cluetec-ngcx-tree.mjs",
+      "es2020": "./fesm2020/cluetec-ngcx-tree.mjs",
+      "es2015": "./fesm2015/cluetec-ngcx-tree.mjs",
+      "node": "./fesm2015/cluetec-ngcx-tree.mjs",
+      "default": "./fesm2020/cluetec-ngcx-tree.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/ngcx-tree/ngcx-tree-models';
+export * from './lib/ngcx-tree/ngcx-tree.component';

package/styles/_ngcx-common.scss

@@ -0,0 +1,5 @@
+.ngcx-tree {
+  .cdk-drop-list {
+    width: 100%;
+  }
+}

package/styles/_ngcx-doted-tree-line.scss

@@ -0,0 +1,44 @@
+.tree-node-content-container,
+.tree-node-children-container {
+  position: relative;
+  cursor: default;
+
+  &::before {
+    content: '';
+    position: absolute;
+    border-left: 1px solid lightgrey;
+    top: 0;
+    bottom: 0px;
+    left: 25px;
+  }
+  .small-horizontal-tree-line {
+    width: 5px;
+    position: absolute;
+    left: 25px;
+    border-top: 1px solid lightgrey;
+  }
+}
+
+.tree-node-content-container {
+  &.first::before {
+    top: 5px;
+  }
+  &.last:not(.expanded)::before {
+    bottom: 14px;
+  }
+}
+
+.tree-node-children-container.last::before {
+  bottom: 14px;
+}
+
+.cdk-drag-preview {
+  .tree-node-content-container {
+    &::before {
+      border-left: none;
+    }
+    .small-horizontal-tree-line {
+      border-top: none;
+    }
+  }
+}

package/styles/_ngcx-icon-color.scss

@@ -0,0 +1,7 @@
+.ngcx-tree {
+  .tree-node-content-container {
+    .chevron {
+      --icon-color: #444;
+    }
+  }
+}

package/styles/_ngcx-selection.scss

@@ -0,0 +1,24 @@
+.ngcx-tree {
+  .tree-node-content-container {
+    &.selected {
+      .tree-node-content {
+        font-weight: 600;
+      }
+    }
+  }
+
+  &:not(.dragging) {
+    .tree-node-content-container.is-selectable:hover {
+      .tree-node-content {
+        font-weight: 600;
+      }
+    }
+  }
+}
+.cdk-drag-preview {
+  .ngcx-tree .tree-node-content-container.selected {
+    .tree-node-content {
+      background-color: inherit;
+    }
+  }
+}

package/styles/styles.scss

@@ -0,0 +1,4 @@
+@import 'ngcx-common';
+@import 'ngcx-doted-tree-line';
+@import 'ngcx-selection';
+@import 'ngcx-icon-color';