@cluetec/ngcx-tree 20.1.0 → 21.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -43,10 +43,10 @@ class NgcxTreeNodeComponent {
|
|
|
43
43
|
this.ngUnsubscribe.next(undefined);
|
|
44
44
|
this.ngUnsubscribe.complete();
|
|
45
45
|
}
|
|
46
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
47
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
46
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NgcxTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
47
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NgcxTreeNodeComponent, isStandalone: true, selector: "ngcx-tree-node", inputs: { nodeWrapper: "nodeWrapper", treeControl: "treeControl", treeConfig: "treeConfig", isSelected: "isSelected" }, outputs: { customEvent: "customEvent", clickEvent: "clickEvent" }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["ref"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n class=\"tree-node-content-container\"\n [class.selected]=\"isSelected\"\n [class.first]=\"nodeWrapper.isFirstChild\"\n [class.last]=\"nodeWrapper.isLastChild\"\n [class.is-selectable]=\"nodeWrapper.isSelectable\"\n (click)=\"clickEvent.emit()\">\n <div class=\"tree-node-expand-container\">\n @if (nodeWrapper.children.length > 0) {\n <button\n class=\"tree-node-expand\"\n cdkTreeNodeToggle\n [attr.aria-label]=\"'Toggle ' + nodeWrapper.data.title\"\n (click)=\"$event.preventDefault()\">\n <div class=\"chevron\" [class.rotate]=\"treeControl.isExpanded(nodeWrapper)\">\n <svg\n id=\"a\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 9 9\"\n height=\"10px\"\n width=\"10px\">\n <path\n d=\"m2.83.09l4.2,4.2c.05.05.09.14.09.21s-.04.15-.09.21l-4.2,4.2c-.05.05-.14.09-.21.09s-.15-.04-.21-.09l-.45-.45c-.05-.05-.09-.13-.09-.21,0-.07.04-.15.09-.21l3.54-3.54L1.97.96c-.05-.05-.09-.14-.09-.21s.04-.15.09-.21l.45-.45c.05-.05.14-.09.21-.09s.15.04.21.09Z\"\n style=\"fill: var(--icon-color, #333); stroke-width: 0px\" />\n </svg>\n </div>\n </button>\n }\n </div>\n <div class=\"small-horizontal-tree-line\"></div>\n @if (nodeWrapper.data.faIcon) {\n <div class=\"tree-node-icon-container\">\n <i class=\"fa\" [class]=\"nodeWrapper.data.faIcon\"></i>\n </div>\n }\n <div class=\"tree-node-content\">\n @if (\n !treeConfig?.treeNodeContentComponent &&\n !treeConfig?.treeNodeContentTemplate\n ) {\n <span\n >\n {{ nodeWrapper.data.title }}\n </span>\n }\n <ng-container #ref></ng-container>\n @if (treeConfig?.treeNodeContentTemplate; as template) {\n <ng-container\n *ngTemplateOutlet=\"\n template;\n context: {\n nodeWrapper: nodeWrapper,\n }\n \"></ng-container>\n }\n</div>\n</div>\n", styles: [".tree-node-content-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;width:100%}.tree-node-content-container.is-selectable{cursor:pointer}.tree-node-content-container .tree-node-expand-container{display:flex;flex-direction:row;justify-content:center;align-items:center;width:30px;height:30px;margin-right:5px;flex-shrink:0}.tree-node-content-container .tree-node-expand-container>.tree-node-expand{color:#2587be;background:none;border:none;font:inherit;cursor:pointer;outline:inherit;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.tree-node-content-container .tree-node-expand-container>.tree-node-expand .chevron{width:10px;transition:transform .1s ease-in-out}.tree-node-content-container .tree-node-expand-container>.tree-node-expand .chevron.rotate{transform:rotate(90deg)}.tree-node-content-container .tree-node-icon-container{margin-right:7px;color:#2587be}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i1.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
48
48
|
}
|
|
49
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
49
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NgcxTreeNodeComponent, decorators: [{
|
|
50
50
|
type: Component,
|
|
51
51
|
args: [{ selector: 'ngcx-tree-node', imports: [CdkTreeModule, NgTemplateOutlet], template: "<div\n class=\"tree-node-content-container\"\n [class.selected]=\"isSelected\"\n [class.first]=\"nodeWrapper.isFirstChild\"\n [class.last]=\"nodeWrapper.isLastChild\"\n [class.is-selectable]=\"nodeWrapper.isSelectable\"\n (click)=\"clickEvent.emit()\">\n <div class=\"tree-node-expand-container\">\n @if (nodeWrapper.children.length > 0) {\n <button\n class=\"tree-node-expand\"\n cdkTreeNodeToggle\n [attr.aria-label]=\"'Toggle ' + nodeWrapper.data.title\"\n (click)=\"$event.preventDefault()\">\n <div class=\"chevron\" [class.rotate]=\"treeControl.isExpanded(nodeWrapper)\">\n <svg\n id=\"a\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 9 9\"\n height=\"10px\"\n width=\"10px\">\n <path\n d=\"m2.83.09l4.2,4.2c.05.05.09.14.09.21s-.04.15-.09.21l-4.2,4.2c-.05.05-.14.09-.21.09s-.15-.04-.21-.09l-.45-.45c-.05-.05-.09-.13-.09-.21,0-.07.04-.15.09-.21l3.54-3.54L1.97.96c-.05-.05-.09-.14-.09-.21s.04-.15.09-.21l.45-.45c.05-.05.14-.09.21-.09s.15.04.21.09Z\"\n style=\"fill: var(--icon-color, #333); stroke-width: 0px\" />\n </svg>\n </div>\n </button>\n }\n </div>\n <div class=\"small-horizontal-tree-line\"></div>\n @if (nodeWrapper.data.faIcon) {\n <div class=\"tree-node-icon-container\">\n <i class=\"fa\" [class]=\"nodeWrapper.data.faIcon\"></i>\n </div>\n }\n <div class=\"tree-node-content\">\n @if (\n !treeConfig?.treeNodeContentComponent &&\n !treeConfig?.treeNodeContentTemplate\n ) {\n <span\n >\n {{ nodeWrapper.data.title }}\n </span>\n }\n <ng-container #ref></ng-container>\n @if (treeConfig?.treeNodeContentTemplate; as template) {\n <ng-container\n *ngTemplateOutlet=\"\n template;\n context: {\n nodeWrapper: nodeWrapper,\n }\n \"></ng-container>\n }\n</div>\n</div>\n", styles: [".tree-node-content-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;width:100%}.tree-node-content-container.is-selectable{cursor:pointer}.tree-node-content-container .tree-node-expand-container{display:flex;flex-direction:row;justify-content:center;align-items:center;width:30px;height:30px;margin-right:5px;flex-shrink:0}.tree-node-content-container .tree-node-expand-container>.tree-node-expand{color:#2587be;background:none;border:none;font:inherit;cursor:pointer;outline:inherit;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.tree-node-content-container .tree-node-expand-container>.tree-node-expand .chevron{width:10px;transition:transform .1s ease-in-out}.tree-node-content-container .tree-node-expand-container>.tree-node-expand .chevron.rotate{transform:rotate(90deg)}.tree-node-content-container .tree-node-icon-container{margin-right:7px;color:#2587be}\n"] }]
|
|
52
52
|
}], propDecorators: { nodeWrapper: [{
|
|
@@ -335,10 +335,10 @@ class NgcxTreeComponent {
|
|
|
335
335
|
this.selectEvent.emit(this.selectedNode);
|
|
336
336
|
}
|
|
337
337
|
}
|
|
338
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
339
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
338
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NgcxTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
339
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NgcxTreeComponent, isStandalone: true, selector: "ngcx-tree", inputs: { nodes: "nodes", config: "config" }, outputs: { nodeMoved: "nodeMoved", customEvent: "customEvent", clickEvent: "clickEvent", selectEvent: "selectEvent" }, host: { listeners: { "window:keydown.escape": "keyEscapeWhileDragging()" } }, usesOnChanges: true, ngImport: i0, template: "@if (dataSource) {\n <cdk-tree\n #tree\n class=\"ngcx-tree\"\n [dataSource]=\"dataSource\"\n [treeControl]=\"treeControl\"\n cdkDropListGroup\n [class.dragging]=\"dragging\"\n (keyup.arrowup)=\"keyDownArrowUp($event)\"\n (keydown.arrowdown)=\"keyDownArrowDown($event)\"\n (keydown.arrowleft)=\"keyDownArrowLeft($event)\"\n (keydown.arrowright)=\"keyDownArrowRight($event)\"\n tabindex=\"0\">\n <cdk-nested-tree-node *cdkTreeNodeDef=\"let node\" class=\"tree-node\">\n @if (allowDrop(node, DropType.DROP_AFTER); as dropControl) {\n <div\n cdkDropList\n [id]=\"node.id + '_' + DropType.DROP_AFTER\"\n class=\"tree-node-container-drop-zone after-expanded-node\"\n [class.hide]=\"dropControl.hideDrop || !treeControl.isExpanded(node)\"\n [class.no-drop]=\"dropControl.preventDrop\">\n <div class=\"drop-insert-line\"></div>\n @if (dropControl.preventDropReason) {\n <div class=\"tooltip\">\n {{ dropControl.preventDropReason }}\n </div>\n }\n </div>\n }\n <div class=\"tree-node-container\">\n @if (allowDrop(node, DropType.DROP_BEFORE); as dropControl) {\n <div\n cdkDropList\n [id]=\"node.id + '_' + DropType.DROP_BEFORE\"\n class=\"tree-node-container-drop-zone before-node\"\n [class.hide]=\"!node.isFirstChild || dropControl.hideDrop\"\n [class.no-drop]=\"dropControl.preventDrop\">\n <div class=\"drop-insert-line\"></div>\n @if (dropControl.preventDropReason) {\n <div class=\"tooltip\">\n {{ dropControl.preventDropReason }}\n </div>\n }\n </div>\n }\n @if (allowDrop(node, DropType.DROP_INTO); as dropControl) {\n <div\n cdkDropList\n [id]=\"node.id + '_' + DropType.DROP_INTO\"\n class=\"tree-node-container-drop-zone into-node\"\n [class.hide]=\"dropControl.hideDrop\"\n [class.no-drop]=\"dropControl.preventDrop\">\n @if (dropControl.preventDropReason) {\n <div class=\"tooltip\">\n {{ dropControl.preventDropReason }}\n </div>\n }\n </div>\n }\n @if (allowDrop(node, DropType.DROP_AFTER); as dropControl) {\n <div\n cdkDropList\n [id]=\"node.id + '_' + DropType.DROP_AFTER\"\n class=\"tree-node-container-drop-zone after-node\"\n [class.last]=\"node.isLastChild\"\n [class.hide]=\"treeControl.isExpanded(node) || dropControl.hideDrop\"\n [class.no-drop]=\"dropControl.preventDrop\">\n <div class=\"drop-insert-line\"></div>\n @if (dropControl.preventDropReason) {\n <div class=\"tooltip\">\n {{ dropControl.preventDropReason }}\n </div>\n }\n </div>\n }\n <div\n cdkDropList\n [cdkDropListData]=\"node\"\n [cdkDropListEnterPredicate]=\"disable\"\n [cdkDropListSortPredicate]=\"disable\">\n <div\n cdkDrag\n [cdkDragDisabled]=\"disableDrag(node)\"\n [cdkDragData]=\"node\"\n (cdkDragStarted)=\"dragging = node\"\n (cdkDragReleased)=\"handleDragRelease($event)\">\n <div *cdkDragPlaceholder></div>\n <div\n class=\"tree-node-content-container\"\n [class.first]=\"node.isFirstChild\"\n [class.last]=\"node.isLastChild\"\n [class.expanded]=\"treeControl.isExpanded(node)\">\n <ngcx-tree-node\n style=\"width: 100%\"\n [nodeWrapper]=\"node\"\n [isSelected]=\"node.id === selectedNode?.id\"\n [treeControl]=\"treeControl\"\n [treeConfig]=\"config\"\n (customEvent)=\"customEvent.emit($event)\"\n (clickEvent)=\"nodeClicked(node)\"></ngcx-tree-node>\n </div>\n </div>\n @if (node.id === dragging?.id) {\n <ngcx-tree-node\n [nodeWrapper]=\"node\"\n [treeControl]=\"treeControl\"\n [treeConfig]=\"config\"></ngcx-tree-node>\n }\n </div>\n </div>\n @if (treeControl.isExpanded(node)) {\n <div\n class=\"tree-node-children-container\"\n [class.first]=\"node.isFirstChild\"\n [class.last]=\"node.isLastChild\">\n <div cdkTreeNodeOutlet></div>\n </div>\n }\n </cdk-nested-tree-node>\n </cdk-tree>\n}\n", styles: [".ngcx-tree{height:auto}.ngcx-tree ul,.ngcx-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.tree-node{display:flex;flex-direction:column;position:relative}.tree-node .tree-node{margin-left:20px}.tree-node-container{width:100%;min-height:30px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;position:relative;cursor:default}.tree-node-container .tree-node-content-container{width:100%}.tree-node-container .cdk-drag{width:100%;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}.tree-node-container-drop-zone{height:100%;left:25px;right:5px;position:absolute;z-index:1001;display:flex;justify-content:center;flex-direction:column}.tree-node-container-drop-zone:hover.into-node,.tree-node-container-drop-zone.cdk-drop-list-dragging.into-node{border:1.5px dashed rgba(0,0,0,.5)}.tree-node-container-drop-zone:hover .drop-insert-line,.tree-node-container-drop-zone.cdk-drop-list-dragging .drop-insert-line{border-top:1.5px dashed rgba(0,0,0,.5)}.tree-node-container-drop-zone.hide{height:0!important}.tree-node-container-drop-zone.hide .drop-insert-line{border-top:solid transparent 0px!important}.tree-node-container-drop-zone.no-drop{cursor:no-drop;border-color:var(--ngcx-tree-color-no-drop, transparent)!important}.tree-node-container-drop-zone.no-drop .drop-insert-line{border-color:var(--ngcx-tree-color-no-drop, transparent)!important}.tree-node-container-drop-zone.before-node{height:20px;z-index:1002;top:-10px}.tree-node-container-drop-zone.after-node{height:20px;z-index:1003;top:calc(100% - 10px)}.tree-node-container-drop-zone.after-node.last{height:10px}.tree-node-container-drop-zone.after-expanded-node{position:absolute;height:20px;z-index:1003;bottom:-10px;display:flex;justify-content:center;flex-direction:column}.tree-node-container-drop-zone.cdk-drop-list-receiving:hover .tooltip,.tree-node-container-drop-zone.cdk-drop-list-dragging .tooltip{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i1.CdkNestedTreeNode, selector: "cdk-nested-tree-node", exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: i1.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "component", type: i1.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "levelAccessor", "childrenAccessor", "trackBy", "expansionKey"], exportAs: ["cdkTree"] }, { kind: "directive", type: i1.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: NgcxTreeNodeComponent, selector: "ngcx-tree-node", inputs: ["nodeWrapper", "treeControl", "treeConfig", "isSelected"], outputs: ["customEvent", "clickEvent"] }] }); }
|
|
340
340
|
}
|
|
341
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
341
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NgcxTreeComponent, decorators: [{
|
|
342
342
|
type: Component,
|
|
343
343
|
args: [{ selector: 'ngcx-tree', imports: [CdkTreeModule, DragDropModule, NgcxTreeNodeComponent], template: "@if (dataSource) {\n <cdk-tree\n #tree\n class=\"ngcx-tree\"\n [dataSource]=\"dataSource\"\n [treeControl]=\"treeControl\"\n cdkDropListGroup\n [class.dragging]=\"dragging\"\n (keyup.arrowup)=\"keyDownArrowUp($event)\"\n (keydown.arrowdown)=\"keyDownArrowDown($event)\"\n (keydown.arrowleft)=\"keyDownArrowLeft($event)\"\n (keydown.arrowright)=\"keyDownArrowRight($event)\"\n tabindex=\"0\">\n <cdk-nested-tree-node *cdkTreeNodeDef=\"let node\" class=\"tree-node\">\n @if (allowDrop(node, DropType.DROP_AFTER); as dropControl) {\n <div\n cdkDropList\n [id]=\"node.id + '_' + DropType.DROP_AFTER\"\n class=\"tree-node-container-drop-zone after-expanded-node\"\n [class.hide]=\"dropControl.hideDrop || !treeControl.isExpanded(node)\"\n [class.no-drop]=\"dropControl.preventDrop\">\n <div class=\"drop-insert-line\"></div>\n @if (dropControl.preventDropReason) {\n <div class=\"tooltip\">\n {{ dropControl.preventDropReason }}\n </div>\n }\n </div>\n }\n <div class=\"tree-node-container\">\n @if (allowDrop(node, DropType.DROP_BEFORE); as dropControl) {\n <div\n cdkDropList\n [id]=\"node.id + '_' + DropType.DROP_BEFORE\"\n class=\"tree-node-container-drop-zone before-node\"\n [class.hide]=\"!node.isFirstChild || dropControl.hideDrop\"\n [class.no-drop]=\"dropControl.preventDrop\">\n <div class=\"drop-insert-line\"></div>\n @if (dropControl.preventDropReason) {\n <div class=\"tooltip\">\n {{ dropControl.preventDropReason }}\n </div>\n }\n </div>\n }\n @if (allowDrop(node, DropType.DROP_INTO); as dropControl) {\n <div\n cdkDropList\n [id]=\"node.id + '_' + DropType.DROP_INTO\"\n class=\"tree-node-container-drop-zone into-node\"\n [class.hide]=\"dropControl.hideDrop\"\n [class.no-drop]=\"dropControl.preventDrop\">\n @if (dropControl.preventDropReason) {\n <div class=\"tooltip\">\n {{ dropControl.preventDropReason }}\n </div>\n }\n </div>\n }\n @if (allowDrop(node, DropType.DROP_AFTER); as dropControl) {\n <div\n cdkDropList\n [id]=\"node.id + '_' + DropType.DROP_AFTER\"\n class=\"tree-node-container-drop-zone after-node\"\n [class.last]=\"node.isLastChild\"\n [class.hide]=\"treeControl.isExpanded(node) || dropControl.hideDrop\"\n [class.no-drop]=\"dropControl.preventDrop\">\n <div class=\"drop-insert-line\"></div>\n @if (dropControl.preventDropReason) {\n <div class=\"tooltip\">\n {{ dropControl.preventDropReason }}\n </div>\n }\n </div>\n }\n <div\n cdkDropList\n [cdkDropListData]=\"node\"\n [cdkDropListEnterPredicate]=\"disable\"\n [cdkDropListSortPredicate]=\"disable\">\n <div\n cdkDrag\n [cdkDragDisabled]=\"disableDrag(node)\"\n [cdkDragData]=\"node\"\n (cdkDragStarted)=\"dragging = node\"\n (cdkDragReleased)=\"handleDragRelease($event)\">\n <div *cdkDragPlaceholder></div>\n <div\n class=\"tree-node-content-container\"\n [class.first]=\"node.isFirstChild\"\n [class.last]=\"node.isLastChild\"\n [class.expanded]=\"treeControl.isExpanded(node)\">\n <ngcx-tree-node\n style=\"width: 100%\"\n [nodeWrapper]=\"node\"\n [isSelected]=\"node.id === selectedNode?.id\"\n [treeControl]=\"treeControl\"\n [treeConfig]=\"config\"\n (customEvent)=\"customEvent.emit($event)\"\n (clickEvent)=\"nodeClicked(node)\"></ngcx-tree-node>\n </div>\n </div>\n @if (node.id === dragging?.id) {\n <ngcx-tree-node\n [nodeWrapper]=\"node\"\n [treeControl]=\"treeControl\"\n [treeConfig]=\"config\"></ngcx-tree-node>\n }\n </div>\n </div>\n @if (treeControl.isExpanded(node)) {\n <div\n class=\"tree-node-children-container\"\n [class.first]=\"node.isFirstChild\"\n [class.last]=\"node.isLastChild\">\n <div cdkTreeNodeOutlet></div>\n </div>\n }\n </cdk-nested-tree-node>\n </cdk-tree>\n}\n", styles: [".ngcx-tree{height:auto}.ngcx-tree ul,.ngcx-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.tree-node{display:flex;flex-direction:column;position:relative}.tree-node .tree-node{margin-left:20px}.tree-node-container{width:100%;min-height:30px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;position:relative;cursor:default}.tree-node-container .tree-node-content-container{width:100%}.tree-node-container .cdk-drag{width:100%;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}.tree-node-container-drop-zone{height:100%;left:25px;right:5px;position:absolute;z-index:1001;display:flex;justify-content:center;flex-direction:column}.tree-node-container-drop-zone:hover.into-node,.tree-node-container-drop-zone.cdk-drop-list-dragging.into-node{border:1.5px dashed rgba(0,0,0,.5)}.tree-node-container-drop-zone:hover .drop-insert-line,.tree-node-container-drop-zone.cdk-drop-list-dragging .drop-insert-line{border-top:1.5px dashed rgba(0,0,0,.5)}.tree-node-container-drop-zone.hide{height:0!important}.tree-node-container-drop-zone.hide .drop-insert-line{border-top:solid transparent 0px!important}.tree-node-container-drop-zone.no-drop{cursor:no-drop;border-color:var(--ngcx-tree-color-no-drop, transparent)!important}.tree-node-container-drop-zone.no-drop .drop-insert-line{border-color:var(--ngcx-tree-color-no-drop, transparent)!important}.tree-node-container-drop-zone.before-node{height:20px;z-index:1002;top:-10px}.tree-node-container-drop-zone.after-node{height:20px;z-index:1003;top:calc(100% - 10px)}.tree-node-container-drop-zone.after-node.last{height:10px}.tree-node-container-drop-zone.after-expanded-node{position:absolute;height:20px;z-index:1003;bottom:-10px;display:flex;justify-content:center;flex-direction:column}.tree-node-container-drop-zone.cdk-drop-list-receiving:hover .tooltip,.tree-node-container-drop-zone.cdk-drop-list-dragging .tooltip{display:block}\n"] }]
|
|
344
344
|
}], propDecorators: { nodes: [{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cluetec/ngcx-tree",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "21.0.1",
|
|
4
4
|
"description": "An angular tree component with drag and drop.",
|
|
5
5
|
"author": "Michael Niedermaier <mn@cluetec.de>",
|
|
6
6
|
"repository": {
|
|
@@ -17,9 +17,9 @@
|
|
|
17
17
|
"url": "https://github.com/cluetec/ngcx-tree/issues"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
|
-
"@angular/common": "^
|
|
21
|
-
"@angular/core": "^
|
|
22
|
-
"@angular/cdk": "^
|
|
20
|
+
"@angular/common": "^21.0.0",
|
|
21
|
+
"@angular/core": "^21.0.0",
|
|
22
|
+
"@angular/cdk": "^21.0.0"
|
|
23
23
|
},
|
|
24
24
|
"sideEffects": false,
|
|
25
25
|
"keywords": [
|
|
@@ -34,16 +34,17 @@
|
|
|
34
34
|
"drop"
|
|
35
35
|
],
|
|
36
36
|
"module": "fesm2022/cluetec-ngcx-tree.mjs",
|
|
37
|
-
"typings": "
|
|
37
|
+
"typings": "types/cluetec-ngcx-tree.d.ts",
|
|
38
38
|
"exports": {
|
|
39
39
|
"./package.json": {
|
|
40
40
|
"default": "./package.json"
|
|
41
41
|
},
|
|
42
42
|
".": {
|
|
43
|
-
"types": "./
|
|
43
|
+
"types": "./types/cluetec-ngcx-tree.d.ts",
|
|
44
44
|
"default": "./fesm2022/cluetec-ngcx-tree.mjs"
|
|
45
45
|
}
|
|
46
46
|
},
|
|
47
|
+
"type": "module",
|
|
47
48
|
"dependencies": {
|
|
48
49
|
"tslib": "^2.3.0"
|
|
49
50
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { EventEmitter, Type, TemplateRef, OnChanges } from '@angular/core';
|
|
3
3
|
import { CdkDrag, CdkDropList, CdkDragRelease } from '@angular/cdk/drag-drop';
|
|
4
4
|
import { NestedTreeControl, NestedTreeControlOptions } from '@angular/cdk/tree';
|
|
5
5
|
import { DataSource } from '@angular/cdk/collections';
|