@cluetec/ngcx-tree 19.2.0 → 19.2.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: "19.2.
|
|
47
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
46
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgcxTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
47
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", 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 <button\n *ngIf=\"nodeWrapper.children.length > 0\"\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 id=\"a\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 9\">\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 </div>\n <div class=\"small-horizontal-tree-line\"></div>\n <div class=\"tree-node-icon-container\" *ngIf=\"nodeWrapper.data.faIcon\">\n <i class=\"fa\" [class]=\"nodeWrapper.data.faIcon\"></i>\n </div>\n <div class=\"tree-node-content\">\n <span\n *ngIf=\"\n !treeConfig?.treeNodeContentComponent &&\n !treeConfig?.treeNodeContentTemplate\n \">\n {{ nodeWrapper.data.title }}\n </span>\n <ng-container #ref></ng-container>\n <ng-container *ngIf=\"treeConfig?.treeNodeContentTemplate as template\">\n <ng-container\n *ngTemplateOutlet=\"\n template;\n context: {\n nodeWrapper: nodeWrapper\n }\n \"></ng-container>\n </ng-container>\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}.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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
48
48
|
}
|
|
49
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
49
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgcxTreeNodeComponent, decorators: [{
|
|
50
50
|
type: Component,
|
|
51
51
|
args: [{ selector: 'ngcx-tree-node', imports: [CdkTreeModule, NgTemplateOutlet, NgIf], 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 <button\n *ngIf=\"nodeWrapper.children.length > 0\"\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 id=\"a\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 9\">\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 </div>\n <div class=\"small-horizontal-tree-line\"></div>\n <div class=\"tree-node-icon-container\" *ngIf=\"nodeWrapper.data.faIcon\">\n <i class=\"fa\" [class]=\"nodeWrapper.data.faIcon\"></i>\n </div>\n <div class=\"tree-node-content\">\n <span\n *ngIf=\"\n !treeConfig?.treeNodeContentComponent &&\n !treeConfig?.treeNodeContentTemplate\n \">\n {{ nodeWrapper.data.title }}\n </span>\n <ng-container #ref></ng-container>\n <ng-container *ngIf=\"treeConfig?.treeNodeContentTemplate as template\">\n <ng-container\n *ngTemplateOutlet=\"\n template;\n context: {\n nodeWrapper: nodeWrapper\n }\n \"></ng-container>\n </ng-container>\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}.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: "19.2.
|
|
339
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
338
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgcxTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
339
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", 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: "<cdk-tree\n #tree\n class=\"ngcx-tree\"\n *ngIf=\"dataSource\"\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 <div\n *ngIf=\"allowDrop(node, DropType.DROP_AFTER) as dropControl\"\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 <div *ngIf=\"dropControl.preventDropReason\" class=\"tooltip\">\n {{ dropControl.preventDropReason }}\n </div>\n </div>\n <div class=\"tree-node-container\">\n <div\n *ngIf=\"allowDrop(node, DropType.DROP_BEFORE) as dropControl\"\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 <div *ngIf=\"dropControl.preventDropReason\" class=\"tooltip\">\n {{ dropControl.preventDropReason }}\n </div>\n </div>\n <div\n *ngIf=\"allowDrop(node, DropType.DROP_INTO) as dropControl\"\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 <div *ngIf=\"dropControl.preventDropReason\" class=\"tooltip\">\n {{ dropControl.preventDropReason }}\n </div>\n </div>\n <div\n *ngIf=\"allowDrop(node, DropType.DROP_AFTER) as dropControl\"\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 <div *ngIf=\"dropControl.preventDropReason\" class=\"tooltip\">\n {{ dropControl.preventDropReason }}\n </div>\n </div>\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 <ngcx-tree-node\n *ngIf=\"node.id === dragging?.id\"\n [nodeWrapper]=\"node\"\n [treeControl]=\"treeControl\"\n [treeConfig]=\"config\"></ngcx-tree-node>\n </div>\n </div>\n <div\n *ngIf=\"treeControl.isExpanded(node)\"\n class=\"tree-node-children-container\"\n [class.first]=\"node.isFirstChild\"\n [class.last]=\"node.isLastChild\">\n <div cdkTreeNodeOutlet></div>\n </div>\n </cdk-nested-tree-node>\n</cdk-tree>\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"], 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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
340
340
|
}
|
|
341
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
341
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgcxTreeComponent, decorators: [{
|
|
342
342
|
type: Component,
|
|
343
343
|
args: [{ selector: 'ngcx-tree', imports: [CdkTreeModule, DragDropModule, NgcxTreeNodeComponent, NgIf], template: "<cdk-tree\n #tree\n class=\"ngcx-tree\"\n *ngIf=\"dataSource\"\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 <div\n *ngIf=\"allowDrop(node, DropType.DROP_AFTER) as dropControl\"\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 <div *ngIf=\"dropControl.preventDropReason\" class=\"tooltip\">\n {{ dropControl.preventDropReason }}\n </div>\n </div>\n <div class=\"tree-node-container\">\n <div\n *ngIf=\"allowDrop(node, DropType.DROP_BEFORE) as dropControl\"\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 <div *ngIf=\"dropControl.preventDropReason\" class=\"tooltip\">\n {{ dropControl.preventDropReason }}\n </div>\n </div>\n <div\n *ngIf=\"allowDrop(node, DropType.DROP_INTO) as dropControl\"\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 <div *ngIf=\"dropControl.preventDropReason\" class=\"tooltip\">\n {{ dropControl.preventDropReason }}\n </div>\n </div>\n <div\n *ngIf=\"allowDrop(node, DropType.DROP_AFTER) as dropControl\"\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 <div *ngIf=\"dropControl.preventDropReason\" class=\"tooltip\">\n {{ dropControl.preventDropReason }}\n </div>\n </div>\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 <ngcx-tree-node\n *ngIf=\"node.id === dragging?.id\"\n [nodeWrapper]=\"node\"\n [treeControl]=\"treeControl\"\n [treeConfig]=\"config\"></ngcx-tree-node>\n </div>\n </div>\n <div\n *ngIf=\"treeControl.isExpanded(node)\"\n class=\"tree-node-children-container\"\n [class.first]=\"node.isFirstChild\"\n [class.last]=\"node.isLastChild\">\n <div cdkTreeNodeOutlet></div>\n </div>\n </cdk-nested-tree-node>\n</cdk-tree>\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