@ng-nest/ui 19.0.3 → 19.0.5
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.
- package/color-picker/color-map.data.d.ts +3 -0
- package/color-picker/color-picker-portal.component.d.ts +6 -3
- package/color-picker/color-picker.component.d.ts +4 -4
- package/color-picker/color-picker.directive.d.ts +9 -0
- package/color-picker/color-picker.module.d.ts +2 -1
- package/color-picker/public-api.d.ts +1 -0
- package/core/interfaces/identify.type.d.ts +5 -0
- package/fesm2022/ng-nest-ui-color-picker.mjs +212 -18
- package/fesm2022/ng-nest-ui-color-picker.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-comment.mjs +7 -8
- package/fesm2022/ng-nest-ui-comment.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-core.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-icon.mjs +51 -40
- package/fesm2022/ng-nest-ui-icon.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-tooltip.mjs +0 -1
- package/fesm2022/ng-nest-ui-tooltip.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-tree.mjs +26 -9
- package/fesm2022/ng-nest-ui-tree.mjs.map +1 -1
- package/icon/icon.component.d.ts +4 -3
- package/icon/icon.service.d.ts +6 -2
- package/package.json +50 -50
- package/tree/tree.property.d.ts +28 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { input, model, output, Component, Injectable, inject, computed, signal, ChangeDetectorRef, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, HostListener, viewChild, viewChildren, effect, NgModule } from '@angular/core';
|
|
3
|
-
import { XPropertyFunction, XToBoolean, XToNumber, XToCssPixelValue, XProperty, XIsEmpty, XRemove, XComputedStyle, XToCssPx, XIsObjectArray, XIsArray, XIsChange, XResize, XIsFunction, XSetData, XIsUndefined } from '@ng-nest/ui/core';
|
|
3
|
+
import { XPropertyFunction, XToBoolean, XToNumber, XToCssPixelValue, XProperty, XIsEmpty, XRemove, XComputedStyle, XToCssPx, XIsObjectArray, XIsArray, XIsChange, XResize, XIsFunction, XSetData, XIsUndefined, XOrderBy } from '@ng-nest/ui/core';
|
|
4
4
|
import { Subject, debounceTime, map } from 'rxjs';
|
|
5
5
|
import * as i3 from '@angular/cdk/scrolling';
|
|
6
6
|
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
|
|
@@ -22,6 +22,14 @@ import { CdkDropList, DragDropModule } from '@angular/cdk/drag-drop';
|
|
|
22
22
|
*/
|
|
23
23
|
const XTreePrefix = 'x-tree';
|
|
24
24
|
const X_TREE_CONFIG_NAME = 'tree';
|
|
25
|
+
/**
|
|
26
|
+
* @zh_CN Tree 节点排序默认值
|
|
27
|
+
* @en_US Tree node order default value
|
|
28
|
+
*/
|
|
29
|
+
const X_TREE_ORDER_DEFAULT = [
|
|
30
|
+
{ property: 'sort', order: 'asc' },
|
|
31
|
+
{ property: 'label', order: 'asc' }
|
|
32
|
+
];
|
|
25
33
|
/**
|
|
26
34
|
* Tree Property
|
|
27
35
|
*/
|
|
@@ -205,6 +213,11 @@ class XTreeProperty extends XPropertyFunction(X_TREE_CONFIG_NAME) {
|
|
|
205
213
|
* @en_US Show line
|
|
206
214
|
*/
|
|
207
215
|
this.showLine = input(this.config?.showLine ?? false, { transform: XToBoolean });
|
|
216
|
+
/**
|
|
217
|
+
* @zh_CN 排序属性
|
|
218
|
+
* @en_US Order property
|
|
219
|
+
*/
|
|
220
|
+
this.order = input(X_TREE_ORDER_DEFAULT);
|
|
208
221
|
/**
|
|
209
222
|
* @zh_CN 节点点击事件
|
|
210
223
|
* @en_US Node click event
|
|
@@ -227,7 +240,7 @@ class XTreeProperty extends XPropertyFunction(X_TREE_CONFIG_NAME) {
|
|
|
227
240
|
this.nodeDragMoved = output();
|
|
228
241
|
}
|
|
229
242
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XTreeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
230
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: XTreeProperty, isStandalone: true, selector: "x-tree-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, activatedId: { classPropertyName: "activatedId", publicName: "activatedId", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, expandedAll: { classPropertyName: "expandedAll", publicName: "expandedAll", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null }, nodeOpen: { classPropertyName: "nodeOpen", publicName: "nodeOpen", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, labelTpl: { classPropertyName: "labelTpl", publicName: "labelTpl", isSignal: true, isRequired: false, transformFunction: null }, nodeHeight: { classPropertyName: "nodeHeight", publicName: "nodeHeight", isSignal: true, isRequired: false, transformFunction: null }, allowManyActivated: { classPropertyName: "allowManyActivated", publicName: "allowManyActivated", isSignal: true, isRequired: false, transformFunction: null }, drag: { classPropertyName: "drag", publicName: "drag", isSignal: true, isRequired: false, transformFunction: null }, manual: { classPropertyName: "manual", publicName: "manual", isSignal: true, isRequired: false, transformFunction: null }, levelCheck: { classPropertyName: "levelCheck", publicName: "levelCheck", isSignal: true, isRequired: false, transformFunction: null }, nodeNowrap: { classPropertyName: "nodeNowrap", publicName: "nodeNowrap", isSignal: true, isRequired: false, transformFunction: null }, nodeAlignItems: { classPropertyName: "nodeAlignItems", publicName: "nodeAlignItems", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, scrollElement: { classPropertyName: "scrollElement", publicName: "scrollElement", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollHeight: { classPropertyName: "virtualScrollHeight", publicName: "virtualScrollHeight", isSignal: true, isRequired: false, transformFunction: null }, heightAdaption: { classPropertyName: "heightAdaption", publicName: "heightAdaption", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, minBufferPx: { classPropertyName: "minBufferPx", publicName: "minBufferPx", isSignal: true, isRequired: false, transformFunction: null }, maxBufferPx: { classPropertyName: "maxBufferPx", publicName: "maxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, objectArray: { classPropertyName: "objectArray", publicName: "objectArray", isSignal: true, isRequired: false, transformFunction: null }, keywordText: { classPropertyName: "keywordText", publicName: "keywordText", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, onlyLeaf: { classPropertyName: "onlyLeaf", publicName: "onlyLeaf", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, showLine: { classPropertyName: "showLine", publicName: "showLine", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activatedId: "activatedIdChange", expanded: "expandedChange", checked: "checkedChange", activatedChange: "activatedChange", checkboxChange: "checkboxChange", manual: "manualChange", nodeClick: "nodeClick", nodeDragStarted: "nodeDragStarted", nodeDragEnded: "nodeDragEnded", nodeDragMoved: "nodeDragMoved" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
|
|
243
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: XTreeProperty, isStandalone: true, selector: "x-tree-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, activatedId: { classPropertyName: "activatedId", publicName: "activatedId", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, expandedAll: { classPropertyName: "expandedAll", publicName: "expandedAll", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null }, nodeOpen: { classPropertyName: "nodeOpen", publicName: "nodeOpen", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, labelTpl: { classPropertyName: "labelTpl", publicName: "labelTpl", isSignal: true, isRequired: false, transformFunction: null }, nodeHeight: { classPropertyName: "nodeHeight", publicName: "nodeHeight", isSignal: true, isRequired: false, transformFunction: null }, allowManyActivated: { classPropertyName: "allowManyActivated", publicName: "allowManyActivated", isSignal: true, isRequired: false, transformFunction: null }, drag: { classPropertyName: "drag", publicName: "drag", isSignal: true, isRequired: false, transformFunction: null }, manual: { classPropertyName: "manual", publicName: "manual", isSignal: true, isRequired: false, transformFunction: null }, levelCheck: { classPropertyName: "levelCheck", publicName: "levelCheck", isSignal: true, isRequired: false, transformFunction: null }, nodeNowrap: { classPropertyName: "nodeNowrap", publicName: "nodeNowrap", isSignal: true, isRequired: false, transformFunction: null }, nodeAlignItems: { classPropertyName: "nodeAlignItems", publicName: "nodeAlignItems", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, scrollElement: { classPropertyName: "scrollElement", publicName: "scrollElement", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollHeight: { classPropertyName: "virtualScrollHeight", publicName: "virtualScrollHeight", isSignal: true, isRequired: false, transformFunction: null }, heightAdaption: { classPropertyName: "heightAdaption", publicName: "heightAdaption", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, minBufferPx: { classPropertyName: "minBufferPx", publicName: "minBufferPx", isSignal: true, isRequired: false, transformFunction: null }, maxBufferPx: { classPropertyName: "maxBufferPx", publicName: "maxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, objectArray: { classPropertyName: "objectArray", publicName: "objectArray", isSignal: true, isRequired: false, transformFunction: null }, keywordText: { classPropertyName: "keywordText", publicName: "keywordText", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, onlyLeaf: { classPropertyName: "onlyLeaf", publicName: "onlyLeaf", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, showLine: { classPropertyName: "showLine", publicName: "showLine", isSignal: true, isRequired: false, transformFunction: null }, order: { classPropertyName: "order", publicName: "order", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activatedId: "activatedIdChange", expanded: "expandedChange", checked: "checkedChange", activatedChange: "activatedChange", checkboxChange: "checkboxChange", manual: "manualChange", nodeClick: "nodeClick", nodeDragStarted: "nodeDragStarted", nodeDragEnded: "nodeDragEnded", nodeDragMoved: "nodeDragMoved" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
|
|
231
244
|
}
|
|
232
245
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XTreeProperty, decorators: [{
|
|
233
246
|
type: Component,
|
|
@@ -711,7 +724,7 @@ class XTreeNodeComponent extends XTreeNodeProperty {
|
|
|
711
724
|
return item.id;
|
|
712
725
|
}
|
|
713
726
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XTreeNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
714
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: XTreeNodeComponent, isStandalone: true, selector: "x-tree-node, [x-tree-node]", outputs: { nodeMouseenter: "nodeMouseenter" }, host: { listeners: { "mouseenter": "onMouseenter($event)", "mouseleave": "onMouseleave()" }, properties: { "class.x-tree-node": "this.rootClass" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"x-tree-node-content\"\r\n [class.x-activated]=\"activated()\"\r\n [class.x-disabled]=\"disabled()\"\r\n [class.x-tree-node-sub]=\"!leaf()\"\r\n [class.x-tree-node-last]=\"isChildrenLast()\"\r\n [style.padding-left.px]=\"paddingLeft() + fontSize() / 2\"\r\n [style.height]=\"height() ? height() : nodeHeight() ? nodeHeight() : ''\"\r\n [style.align-items]=\"alignItems() ? alignItems() : nodeAlignItems()\"\r\n (click)=\"!disabled() && onActivate($event, node())\"\r\n>\r\n @if (tree.showLine() && level()! > 0) {\r\n <div class=\"x-tree-node-line\" [style.width.px]=\"paddingLeft()\">\r\n @for (i of verticalLevel(); track i) {\r\n <div\r\n class=\"x-tree-node-line-vertical\"\r\n [hidden]=\"isParentLast()[i - 1]\"\r\n [class.is-last]=\"i === verticalLevel().length\"\r\n [style.left.px]=\"getVerticalLeft(i)\"\r\n ></div>\r\n }\r\n <div\r\n class=\"x-tree-node-line-horizontal\"\r\n [style.width.px]=\"verticalWidth()\"\r\n [style.left.px]=\"getVerticalLeft(verticalLevel().length)\"\r\n ></div>\r\n </div>\r\n }\r\n @if (showDragIndicator()) {\r\n <div class=\"x-tree-node-drag-indicator\" [style.width]=\"indicatorWidth()\" [ngStyle]=\"indicatorStyle()\"></div>\r\n }\r\n @if (loading()) {\r\n <x-icon class=\"x-tree-node-loading\" type=\"fto-loader\" [spin]=\"loading()!\"></x-icon>\r\n } @else {\r\n <div\r\n class=\"x-tree-node-right\"\r\n [class.is-leaf]=\"leaf()\"\r\n [class.is-open]=\"open()\"\r\n [class.is-template]=\"tree.expandedIcon()\"\r\n [style.width.px]=\"verticalWidth() * 2\"\r\n (click)=\"!tree.nodeOpen() && onToggle($event, node())\"\r\n >\r\n @if (!leaf()) {\r\n @if (tree.expandedIcon()) {\r\n <ng-container *xOutlet=\"tree.expandedIcon(); context: { $node: node() }\"></ng-container>\r\n } @else {\r\n <x-icon type=\"fto-chevron-right\"></x-icon>\r\n }\r\n }\r\n </div>\r\n }\r\n @if (tree.checkbox()) {\r\n <x-checkbox\r\n [data]=\"[{ label: '', id: id() }]\"\r\n [(ngModel)]=\"checked\"\r\n (ngModelChange)=\"onCheckboxChange()\"\r\n [indeterminate]=\"indeterminate()!\"\r\n [disabled]=\"disabled()!\"\r\n (click)=\"$event.stopPropagation()\"\r\n single\r\n ></x-checkbox>\r\n }\r\n @if (!tree.labelTpl()) {\r\n <span\r\n class=\"x-tree-node-label\"\r\n [class.nowrap]=\"nowrap() === false || nowrap() === true ? nowrap() : nodeNowrap()\"\r\n [title]=\"label()\"\r\n x-keyword\r\n [text]=\"tree.keywordText()\"\r\n [caseSensitive]=\"tree.caseSensitive()\"\r\n >{{ label() }}</span\r\n >\r\n } @else {\r\n <ng-container *xOutlet=\"tree.labelTpl(); context: { $node: node() }\"></ng-container>\r\n }\r\n <span class=\"x-tree-node-operations\">\r\n @for (action of actions(); track action.id) {\r\n <x-link [icon]=\"action.icon\" [title]=\"action.label\" (click)=\"onAction($event, action, node())\">{{\r\n action.label\r\n }}</x-link>\r\n }\r\n </span>\r\n @if (tree.multiple() && activated()) {\r\n <x-icon class=\"x-tree-node-checked\" type=\"fto-check\"></x-icon>\r\n }\r\n</div>\r\n", styles: ["x-tree-node{display:block}.x-tree-node{display:block}.x-tree-node{margin:0;padding:0}.x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);margin:.125rem 0;padding-right:.5rem;line-height:var(--x-height-small);cursor:pointer}.x-tree-node-content x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}.x-tree-node-content x-icon:hover{color:var(--x-text-200)}.x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content.x-disabled{color:var(--x-text-400)}.x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}.x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}.x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-primary-900);color:var(--x-primary)}.x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}.x-tree-node-right,.x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}.x-tree-node-right{display:flex;align-items:center;justify-content:center}.x-tree-node-right.is-leaf{visibility:hidden}.x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}.x-tree-node-line{position:absolute;left:.5rem;height:calc(100% + .25rem);display:flex;align-items:center;justify-content:space-between}.x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}.x-tree-node-operations{display:none}.x-tree-node-operations .x-link{padding:0 .125rem}.x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}.x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}.x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node{display:block}body>x-tree-node.cdk-drag-preview .x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);margin:.125rem 0;padding-right:.5rem;line-height:var(--x-height-small);cursor:pointer}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon:hover{color:var(--x-text-200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}body>x-tree-node.cdk-drag-preview .x-tree-node-content.x-disabled{color:var(--x-text-400)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-primary-900);color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-right,body>x-tree-node.cdk-drag-preview .x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-right{display:flex;align-items:center;justify-content:center}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-leaf{visibility:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-line{position:absolute;left:.5rem;height:calc(100% + .25rem);display:flex;align-items:center;justify-content:space-between}body>x-tree-node.cdk-drag-preview .x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}body>x-tree-node.cdk-drag-preview .x-tree-node-operations{display:none}body>x-tree-node.cdk-drag-preview .x-tree-node-operations .x-link{padding:0 .125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}body>x-tree-node.cdk-drag-preview .x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-content{border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XCheckboxComponent, selector: "x-checkbox" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "directive", type: XKeywordDirective, selector: "[x-keyword]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
727
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: XTreeNodeComponent, isStandalone: true, selector: "x-tree-node, [x-tree-node]", outputs: { nodeMouseenter: "nodeMouseenter" }, host: { listeners: { "mouseenter": "onMouseenter($event)", "mouseleave": "onMouseleave()" }, properties: { "class.x-tree-node": "this.rootClass" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"x-tree-node-content\"\r\n [class.x-activated]=\"activated()\"\r\n [class.x-disabled]=\"disabled()\"\r\n [class.x-tree-node-sub]=\"!leaf()\"\r\n [class.x-tree-node-last]=\"isChildrenLast()\"\r\n [style.padding-left.px]=\"paddingLeft() + fontSize() / 2\"\r\n [style.height]=\"height() ? height() : nodeHeight() ? nodeHeight() : ''\"\r\n [style.align-items]=\"alignItems() ? alignItems() : nodeAlignItems()\"\r\n (click)=\"!disabled() && onActivate($event, node())\"\r\n>\r\n @if (tree.showLine() && level()! > 0) {\r\n <div class=\"x-tree-node-line\" [style.width.px]=\"paddingLeft()\">\r\n @for (i of verticalLevel(); track i) {\r\n <div\r\n class=\"x-tree-node-line-vertical\"\r\n [hidden]=\"isParentLast()[i - 1]\"\r\n [class.is-last]=\"i === verticalLevel().length\"\r\n [style.left.px]=\"getVerticalLeft(i)\"\r\n ></div>\r\n }\r\n <div\r\n class=\"x-tree-node-line-horizontal\"\r\n [style.width.px]=\"verticalWidth()\"\r\n [style.left.px]=\"getVerticalLeft(verticalLevel().length)\"\r\n ></div>\r\n </div>\r\n }\r\n @if (showDragIndicator()) {\r\n <div class=\"x-tree-node-drag-indicator\" [style.width]=\"indicatorWidth()\" [ngStyle]=\"indicatorStyle()\"></div>\r\n }\r\n @if (loading()) {\r\n <x-icon class=\"x-tree-node-loading\" type=\"fto-loader\" [spin]=\"loading()!\"></x-icon>\r\n } @else {\r\n <div\r\n class=\"x-tree-node-right\"\r\n [class.is-leaf]=\"leaf()\"\r\n [class.is-open]=\"open()\"\r\n [class.is-template]=\"tree.expandedIcon()\"\r\n [style.width.px]=\"verticalWidth() * 2\"\r\n (click)=\"!tree.nodeOpen() && onToggle($event, node())\"\r\n >\r\n @if (!leaf()) {\r\n @if (tree.expandedIcon()) {\r\n <ng-container *xOutlet=\"tree.expandedIcon(); context: { $node: node() }\"></ng-container>\r\n } @else {\r\n <x-icon class=\"x-tree-node-icon\" type=\"fto-chevron-right\"></x-icon>\r\n }\r\n }\r\n </div>\r\n }\r\n @if (tree.checkbox()) {\r\n <x-checkbox\r\n class=\"x-tree-node-checkbox\"\r\n [data]=\"[{ label: '', id: id() }]\"\r\n [(ngModel)]=\"checked\"\r\n (ngModelChange)=\"onCheckboxChange()\"\r\n [indeterminate]=\"indeterminate()!\"\r\n [disabled]=\"disabled()!\"\r\n (click)=\"$event.stopPropagation()\"\r\n single\r\n ></x-checkbox>\r\n }\r\n @if (!tree.labelTpl()) {\r\n <span\r\n class=\"x-tree-node-label\"\r\n [class.nowrap]=\"nowrap() === false || nowrap() === true ? nowrap() : nodeNowrap()\"\r\n [title]=\"label()\"\r\n x-keyword\r\n [text]=\"tree.keywordText()\"\r\n [caseSensitive]=\"tree.caseSensitive()\"\r\n >{{ label() }}</span\r\n >\r\n } @else {\r\n <ng-container *xOutlet=\"tree.labelTpl(); context: { $node: node() }\"></ng-container>\r\n }\r\n <span class=\"x-tree-node-operations\">\r\n @for (action of actions(); track action.id) {\r\n <x-link [icon]=\"action.icon\" [title]=\"action.label\" (click)=\"onAction($event, action, node())\">{{\r\n action.label\r\n }}</x-link>\r\n }\r\n </span>\r\n @if (tree.multiple() && activated()) {\r\n <x-icon class=\"x-tree-node-checked\" type=\"fto-check\"></x-icon>\r\n }\r\n</div>\r\n", styles: ["x-tree-node{display:block}.x-tree-node{display:block}.x-tree-node{margin:0;padding:0}.x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);margin:.125rem 0;padding-right:.5rem;line-height:var(--x-height-small);cursor:pointer}.x-tree-node-content .x-tree-node-icon,.x-tree-node-content .x-tree-node-right x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}.x-tree-node-content .x-tree-node-icon:hover,.x-tree-node-content .x-tree-node-right x-icon:hover{color:var(--x-text-200)}.x-tree-node-content .x-tree-node-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content.x-disabled{color:var(--x-text-400)}.x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}.x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}.x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-primary-900);color:var(--x-primary)}.x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}.x-tree-node x-icon.x-tree-node-loading{padding:.2rem;font-size:1.25rem;color:var(--x-text-300)}.x-tree-node-right{display:flex;align-items:center;justify-content:center;margin-right:.125rem}.x-tree-node-right.is-leaf{visibility:hidden}.x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}.x-tree-node-line{position:absolute;left:.5rem;height:calc(100% + .25rem);display:flex;align-items:center;justify-content:space-between}.x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}.x-tree-node-operations{display:none}.x-tree-node-operations .x-link{padding:0 .125rem}.x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}.x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}.x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node{display:block}body>x-tree-node.cdk-drag-preview .x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);margin:.125rem 0;padding-right:.5rem;line-height:var(--x-height-small);cursor:pointer}body>x-tree-node.cdk-drag-preview .x-tree-node-content .x-tree-node-icon,body>x-tree-node.cdk-drag-preview .x-tree-node-content .x-tree-node-right x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}body>x-tree-node.cdk-drag-preview .x-tree-node-content .x-tree-node-icon:hover,body>x-tree-node.cdk-drag-preview .x-tree-node-content .x-tree-node-right x-icon:hover{color:var(--x-text-200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content .x-tree-node-checkbox{margin-right:.325rem;padding:.25rem 0}body>x-tree-node.cdk-drag-preview .x-tree-node-content.x-disabled{color:var(--x-text-400)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-primary-900);color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node x-icon.x-tree-node-loading{padding:.2rem;font-size:1.25rem;color:var(--x-text-300)}body>x-tree-node.cdk-drag-preview .x-tree-node-right{display:flex;align-items:center;justify-content:center;margin-right:.125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-leaf{visibility:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-line{position:absolute;left:.5rem;height:calc(100% + .25rem);display:flex;align-items:center;justify-content:space-between}body>x-tree-node.cdk-drag-preview .x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}body>x-tree-node.cdk-drag-preview .x-tree-node-operations{display:none}body>x-tree-node.cdk-drag-preview .x-tree-node-operations .x-link{padding:0 .125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}body>x-tree-node.cdk-drag-preview .x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-content{border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.5}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XCheckboxComponent, selector: "x-checkbox" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "directive", type: XKeywordDirective, selector: "[x-keyword]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
715
728
|
}
|
|
716
729
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: XTreeNodeComponent, decorators: [{
|
|
717
730
|
type: Component,
|
|
@@ -723,7 +736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
723
736
|
XOutletDirective,
|
|
724
737
|
XLinkComponent,
|
|
725
738
|
XKeywordDirective
|
|
726
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"x-tree-node-content\"\r\n [class.x-activated]=\"activated()\"\r\n [class.x-disabled]=\"disabled()\"\r\n [class.x-tree-node-sub]=\"!leaf()\"\r\n [class.x-tree-node-last]=\"isChildrenLast()\"\r\n [style.padding-left.px]=\"paddingLeft() + fontSize() / 2\"\r\n [style.height]=\"height() ? height() : nodeHeight() ? nodeHeight() : ''\"\r\n [style.align-items]=\"alignItems() ? alignItems() : nodeAlignItems()\"\r\n (click)=\"!disabled() && onActivate($event, node())\"\r\n>\r\n @if (tree.showLine() && level()! > 0) {\r\n <div class=\"x-tree-node-line\" [style.width.px]=\"paddingLeft()\">\r\n @for (i of verticalLevel(); track i) {\r\n <div\r\n class=\"x-tree-node-line-vertical\"\r\n [hidden]=\"isParentLast()[i - 1]\"\r\n [class.is-last]=\"i === verticalLevel().length\"\r\n [style.left.px]=\"getVerticalLeft(i)\"\r\n ></div>\r\n }\r\n <div\r\n class=\"x-tree-node-line-horizontal\"\r\n [style.width.px]=\"verticalWidth()\"\r\n [style.left.px]=\"getVerticalLeft(verticalLevel().length)\"\r\n ></div>\r\n </div>\r\n }\r\n @if (showDragIndicator()) {\r\n <div class=\"x-tree-node-drag-indicator\" [style.width]=\"indicatorWidth()\" [ngStyle]=\"indicatorStyle()\"></div>\r\n }\r\n @if (loading()) {\r\n <x-icon class=\"x-tree-node-loading\" type=\"fto-loader\" [spin]=\"loading()!\"></x-icon>\r\n } @else {\r\n <div\r\n class=\"x-tree-node-right\"\r\n [class.is-leaf]=\"leaf()\"\r\n [class.is-open]=\"open()\"\r\n [class.is-template]=\"tree.expandedIcon()\"\r\n [style.width.px]=\"verticalWidth() * 2\"\r\n (click)=\"!tree.nodeOpen() && onToggle($event, node())\"\r\n >\r\n @if (!leaf()) {\r\n @if (tree.expandedIcon()) {\r\n <ng-container *xOutlet=\"tree.expandedIcon(); context: { $node: node() }\"></ng-container>\r\n } @else {\r\n <x-icon type=\"fto-chevron-right\"></x-icon>\r\n }\r\n }\r\n </div>\r\n }\r\n @if (tree.checkbox()) {\r\n <x-checkbox\r\n [data]=\"[{ label: '', id: id() }]\"\r\n [(ngModel)]=\"checked\"\r\n (ngModelChange)=\"onCheckboxChange()\"\r\n [indeterminate]=\"indeterminate()!\"\r\n [disabled]=\"disabled()!\"\r\n (click)=\"$event.stopPropagation()\"\r\n single\r\n ></x-checkbox>\r\n }\r\n @if (!tree.labelTpl()) {\r\n <span\r\n class=\"x-tree-node-label\"\r\n [class.nowrap]=\"nowrap() === false || nowrap() === true ? nowrap() : nodeNowrap()\"\r\n [title]=\"label()\"\r\n x-keyword\r\n [text]=\"tree.keywordText()\"\r\n [caseSensitive]=\"tree.caseSensitive()\"\r\n >{{ label() }}</span\r\n >\r\n } @else {\r\n <ng-container *xOutlet=\"tree.labelTpl(); context: { $node: node() }\"></ng-container>\r\n }\r\n <span class=\"x-tree-node-operations\">\r\n @for (action of actions(); track action.id) {\r\n <x-link [icon]=\"action.icon\" [title]=\"action.label\" (click)=\"onAction($event, action, node())\">{{\r\n action.label\r\n }}</x-link>\r\n }\r\n </span>\r\n @if (tree.multiple() && activated()) {\r\n <x-icon class=\"x-tree-node-checked\" type=\"fto-check\"></x-icon>\r\n }\r\n</div>\r\n", styles: ["x-tree-node{display:block}.x-tree-node{display:block}.x-tree-node{margin:0;padding:0}.x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);margin:.125rem 0;padding-right:.5rem;line-height:var(--x-height-small);cursor:pointer}.x-tree-node-content x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}.x-tree-node-content x-icon:hover{color:var(--x-text-200)}.x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content.x-disabled{color:var(--x-text-400)}.x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}.x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}.x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-primary-900);color:var(--x-primary)}.x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}.x-tree-node-
|
|
739
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"x-tree-node-content\"\r\n [class.x-activated]=\"activated()\"\r\n [class.x-disabled]=\"disabled()\"\r\n [class.x-tree-node-sub]=\"!leaf()\"\r\n [class.x-tree-node-last]=\"isChildrenLast()\"\r\n [style.padding-left.px]=\"paddingLeft() + fontSize() / 2\"\r\n [style.height]=\"height() ? height() : nodeHeight() ? nodeHeight() : ''\"\r\n [style.align-items]=\"alignItems() ? alignItems() : nodeAlignItems()\"\r\n (click)=\"!disabled() && onActivate($event, node())\"\r\n>\r\n @if (tree.showLine() && level()! > 0) {\r\n <div class=\"x-tree-node-line\" [style.width.px]=\"paddingLeft()\">\r\n @for (i of verticalLevel(); track i) {\r\n <div\r\n class=\"x-tree-node-line-vertical\"\r\n [hidden]=\"isParentLast()[i - 1]\"\r\n [class.is-last]=\"i === verticalLevel().length\"\r\n [style.left.px]=\"getVerticalLeft(i)\"\r\n ></div>\r\n }\r\n <div\r\n class=\"x-tree-node-line-horizontal\"\r\n [style.width.px]=\"verticalWidth()\"\r\n [style.left.px]=\"getVerticalLeft(verticalLevel().length)\"\r\n ></div>\r\n </div>\r\n }\r\n @if (showDragIndicator()) {\r\n <div class=\"x-tree-node-drag-indicator\" [style.width]=\"indicatorWidth()\" [ngStyle]=\"indicatorStyle()\"></div>\r\n }\r\n @if (loading()) {\r\n <x-icon class=\"x-tree-node-loading\" type=\"fto-loader\" [spin]=\"loading()!\"></x-icon>\r\n } @else {\r\n <div\r\n class=\"x-tree-node-right\"\r\n [class.is-leaf]=\"leaf()\"\r\n [class.is-open]=\"open()\"\r\n [class.is-template]=\"tree.expandedIcon()\"\r\n [style.width.px]=\"verticalWidth() * 2\"\r\n (click)=\"!tree.nodeOpen() && onToggle($event, node())\"\r\n >\r\n @if (!leaf()) {\r\n @if (tree.expandedIcon()) {\r\n <ng-container *xOutlet=\"tree.expandedIcon(); context: { $node: node() }\"></ng-container>\r\n } @else {\r\n <x-icon class=\"x-tree-node-icon\" type=\"fto-chevron-right\"></x-icon>\r\n }\r\n }\r\n </div>\r\n }\r\n @if (tree.checkbox()) {\r\n <x-checkbox\r\n class=\"x-tree-node-checkbox\"\r\n [data]=\"[{ label: '', id: id() }]\"\r\n [(ngModel)]=\"checked\"\r\n (ngModelChange)=\"onCheckboxChange()\"\r\n [indeterminate]=\"indeterminate()!\"\r\n [disabled]=\"disabled()!\"\r\n (click)=\"$event.stopPropagation()\"\r\n single\r\n ></x-checkbox>\r\n }\r\n @if (!tree.labelTpl()) {\r\n <span\r\n class=\"x-tree-node-label\"\r\n [class.nowrap]=\"nowrap() === false || nowrap() === true ? nowrap() : nodeNowrap()\"\r\n [title]=\"label()\"\r\n x-keyword\r\n [text]=\"tree.keywordText()\"\r\n [caseSensitive]=\"tree.caseSensitive()\"\r\n >{{ label() }}</span\r\n >\r\n } @else {\r\n <ng-container *xOutlet=\"tree.labelTpl(); context: { $node: node() }\"></ng-container>\r\n }\r\n <span class=\"x-tree-node-operations\">\r\n @for (action of actions(); track action.id) {\r\n <x-link [icon]=\"action.icon\" [title]=\"action.label\" (click)=\"onAction($event, action, node())\">{{\r\n action.label\r\n }}</x-link>\r\n }\r\n </span>\r\n @if (tree.multiple() && activated()) {\r\n <x-icon class=\"x-tree-node-checked\" type=\"fto-check\"></x-icon>\r\n }\r\n</div>\r\n", styles: ["x-tree-node{display:block}.x-tree-node{display:block}.x-tree-node{margin:0;padding:0}.x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);margin:.125rem 0;padding-right:.5rem;line-height:var(--x-height-small);cursor:pointer}.x-tree-node-content .x-tree-node-icon,.x-tree-node-content .x-tree-node-right x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}.x-tree-node-content .x-tree-node-icon:hover,.x-tree-node-content .x-tree-node-right x-icon:hover{color:var(--x-text-200)}.x-tree-node-content .x-tree-node-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content.x-disabled{color:var(--x-text-400)}.x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}.x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}.x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-primary-900);color:var(--x-primary)}.x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}.x-tree-node x-icon.x-tree-node-loading{padding:.2rem;font-size:1.25rem;color:var(--x-text-300)}.x-tree-node-right{display:flex;align-items:center;justify-content:center;margin-right:.125rem}.x-tree-node-right.is-leaf{visibility:hidden}.x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}.x-tree-node-line{position:absolute;left:.5rem;height:calc(100% + .25rem);display:flex;align-items:center;justify-content:space-between}.x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}.x-tree-node-operations{display:none}.x-tree-node-operations .x-link{padding:0 .125rem}.x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}.x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}.x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node{display:block}body>x-tree-node.cdk-drag-preview .x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);margin:.125rem 0;padding-right:.5rem;line-height:var(--x-height-small);cursor:pointer}body>x-tree-node.cdk-drag-preview .x-tree-node-content .x-tree-node-icon,body>x-tree-node.cdk-drag-preview .x-tree-node-content .x-tree-node-right x-icon{padding:.25rem;font-size:1.25rem;transition:var(--x-animation-duration-base)}body>x-tree-node.cdk-drag-preview .x-tree-node-content .x-tree-node-icon:hover,body>x-tree-node.cdk-drag-preview .x-tree-node-content .x-tree-node-right x-icon:hover{color:var(--x-text-200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content .x-tree-node-checkbox{margin-right:.325rem;padding:.25rem 0}body>x-tree-node.cdk-drag-preview .x-tree-node-content.x-disabled{color:var(--x-text-400)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover{background-color:var(--x-background-a200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled):hover .x-tree-node-operations{display:flex;align-items:center}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-activated{background-color:var(--x-primary-900);color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node x-icon.x-tree-node-loading{padding:.2rem;font-size:1.25rem;color:var(--x-text-300)}body>x-tree-node.cdk-drag-preview .x-tree-node-right{display:flex;align-items:center;justify-content:center;margin-right:.125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-leaf{visibility:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-line{position:absolute;left:.5rem;height:calc(100% + .25rem);display:flex;align-items:center;justify-content:space-between}body>x-tree-node.cdk-drag-preview .x-tree-node-line-vertical{position:absolute;height:100%;border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-line-horizontal{position:absolute;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}body>x-tree-node.cdk-drag-preview .x-tree-node-last .x-tree-node-line-vertical.is-last{height:50%;top:0}body>x-tree-node.cdk-drag-preview .x-tree-node-operations{display:none}body>x-tree-node.cdk-drag-preview .x-tree-node-operations .x-link{padding:0 .125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-label{flex:1;-webkit-user-select:none;user-select:none}body>x-tree-node.cdk-drag-preview .x-tree-node-label.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator{position:absolute;height:.0625rem;border-radius:var(--x-border-radius);background-color:var(--x-primary);right:0;z-index:1}body>x-tree-node.cdk-drag-preview .x-tree-node-drag-indicator:before{position:absolute;top:-.125rem;left:-.2625rem;width:.325rem;height:.325rem;background-color:transparent;border-color:var(--x-primary);border-style:solid;border-width:.0625rem .0625rem 0 0;content:\" \";transform:rotate(45deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-content{border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.5}\n"] }]
|
|
727
740
|
}], propDecorators: { rootClass: [{
|
|
728
741
|
type: HostBinding,
|
|
729
742
|
args: ['class.x-tree-node']
|
|
@@ -918,7 +931,7 @@ class XTreeComponent extends XTreeProperty {
|
|
|
918
931
|
node.childrenLoaded = node.open;
|
|
919
932
|
}
|
|
920
933
|
if (XIsUndefined(node.children) || regetChildren) {
|
|
921
|
-
node.children = value.filter((y) => y.pid === node.id);
|
|
934
|
+
node.children = XOrderBy(value.filter((y) => y.pid === node.id), this.order().map((x) => x.property), this.order().map((x) => x.order));
|
|
922
935
|
if (this.levelCheck() && node.children && node.checked) {
|
|
923
936
|
for (let nd of node.children) {
|
|
924
937
|
nd.checked = true;
|
|
@@ -937,7 +950,7 @@ class XTreeComponent extends XTreeProperty {
|
|
|
937
950
|
return node;
|
|
938
951
|
};
|
|
939
952
|
this.treeData.set(value);
|
|
940
|
-
this.nodes.set(value.filter((x) => XIsEmpty(x.pid)).map((x) => getChildren(x, 0)));
|
|
953
|
+
this.nodes.set(XOrderBy(value.filter((x) => XIsEmpty(x.pid)), this.order().map((x) => x.property), this.order().map((x) => x.order)).map((x) => getChildren(x, 0)));
|
|
941
954
|
if (parentOpen) {
|
|
942
955
|
for (let item of value) {
|
|
943
956
|
if (!item.leaf && item.open) {
|
|
@@ -1036,7 +1049,7 @@ class XTreeComponent extends XTreeProperty {
|
|
|
1036
1049
|
};
|
|
1037
1050
|
setChildren(this.nodes());
|
|
1038
1051
|
if (this.expandedAll() === false) {
|
|
1039
|
-
this.nodes.set(this.treeData().filter((x) => XIsEmpty(x.pid)));
|
|
1052
|
+
this.nodes.set(XOrderBy(this.treeData().filter((x) => XIsEmpty(x.pid)), this.order().map((x) => x.property), this.order().map((x) => x.order)));
|
|
1040
1053
|
}
|
|
1041
1054
|
else {
|
|
1042
1055
|
if (this.virtualNodes().length === 0) {
|
|
@@ -1240,7 +1253,8 @@ class XTreeComponent extends XTreeProperty {
|
|
|
1240
1253
|
node.level = 0;
|
|
1241
1254
|
node.leaf = true;
|
|
1242
1255
|
this.treeData.set([...this.treeData(), node]);
|
|
1243
|
-
this.
|
|
1256
|
+
this.setParentOpen(this.treeData(), node);
|
|
1257
|
+
this.setDataChange(this.treeData(), true, false, false);
|
|
1244
1258
|
this.setActivatedId(node);
|
|
1245
1259
|
this.setActivatedNode(this.nodes(), true, false);
|
|
1246
1260
|
node.change && node.change();
|
|
@@ -1292,6 +1306,9 @@ class XTreeComponent extends XTreeProperty {
|
|
|
1292
1306
|
}
|
|
1293
1307
|
updateNode(node, nowNode) {
|
|
1294
1308
|
Object.assign(node, nowNode);
|
|
1309
|
+
this.setDataChange(this.treeData(), true, false, false);
|
|
1310
|
+
this.setActivatedId(node);
|
|
1311
|
+
this.setActivatedNode(this.nodes(), true, false);
|
|
1295
1312
|
node.change && node.change();
|
|
1296
1313
|
}
|
|
1297
1314
|
trackByItem(_index, item) {
|
|
@@ -1322,5 +1339,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
1322
1339
|
* Generated bundle index. Do not edit.
|
|
1323
1340
|
*/
|
|
1324
1341
|
|
|
1325
|
-
export { XTreeComponent, XTreeModule, XTreeNodeComponent, XTreeNodePrefix, XTreeNodeProperty, XTreePrefix, XTreeProperty };
|
|
1342
|
+
export { XTreeComponent, XTreeModule, XTreeNodeComponent, XTreeNodePrefix, XTreeNodeProperty, XTreePrefix, XTreeProperty, X_TREE_ORDER_DEFAULT };
|
|
1326
1343
|
//# sourceMappingURL=ng-nest-ui-tree.mjs.map
|