@ng-nest/ui 20.2.6 → 21.0.1

package/fesm2022/ng-nest-ui-tree.mjs

@@ -244,10 +244,10 @@ class XTreeProperty extends XPropertyFunction(X_TREE_CONFIG_NAME) {
          */
         this.nodeDragMoved = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", 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 }, includeChildren: { classPropertyName: "includeChildren", publicName: "includeChildren", 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTreeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", 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 }, includeChildren: { classPropertyName: "includeChildren", publicName: "includeChildren", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTreeProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XTreePrefix}-property`, template: '' }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], checkbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkbox", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], activatedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activatedId", required: false }] }, { type: i0.Output, args: ["activatedIdChange"] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], expandedAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedAll", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], nodeOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeOpen", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], labelTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelTpl", required: false }] }], nodeHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeHeight", required: false }] }], allowManyActivated: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManyActivated", required: false }] }], drag: [{ type: i0.Input, args: [{ isSignal: true, alias: "drag", required: false }] }], activatedChange: [{ type: i0.Output, args: ["activatedChange"] }], checkboxChange: [{ type: i0.Output, args: ["checkboxChange"] }], manual: [{ type: i0.Input, args: [{ isSignal: true, alias: "manual", required: false }] }, { type: i0.Output, args: ["manualChange"] }], levelCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelCheck", required: false }] }], nodeNowrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeNowrap", required: false }] }], nodeAlignItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeAlignItems", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollHeight", required: false }] }], heightAdaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightAdaption", required: false }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], minBufferPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "minBufferPx", required: false }] }], maxBufferPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxBufferPx", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], objectArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectArray", required: false }] }], includeChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeChildren", required: false }] }], keywordText: [{ type: i0.Input, args: [{ isSignal: true, alias: "keywordText", required: false }] }], caseSensitive: [{ type: i0.Input, args: [{ isSignal: true, alias: "caseSensitive", required: false }] }], onlyLeaf: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyLeaf", required: false }] }], expandedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIcon", required: false }] }], showLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLine", required: false }] }], order: [{ type: i0.Input, args: [{ isSignal: true, alias: "order", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeDragStarted: [{ type: i0.Output, args: ["nodeDragStarted"] }], nodeDragEnded: [{ type: i0.Output, args: ["nodeDragEnded"] }], nodeDragMoved: [{ type: i0.Output, args: ["nodeDragMoved"] }] } });
@@ -364,10 +364,10 @@ class XTreeNodeProperty extends XProperty {
          */
         this.actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeNodeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XTreeNodeProperty, isStandalone: true, selector: "x-tree-node-property", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, nodeHeight: { classPropertyName: "nodeHeight", publicName: "nodeHeight", 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 }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, pid: { classPropertyName: "pid", publicName: "pid", isSignal: true, isRequired: false, transformFunction: null }, leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { level: "levelChange", nodeHeight: "nodeHeightChange", nodeNowrap: "nodeNowrapChange", nodeAlignItems: "nodeAlignItemsChange", virtualScroll: "virtualScrollChange", disabled: "disabledChange", id: "idChange", pid: "pidChange", leaf: "leafChange", height: "heightChange", alignItems: "alignItemsChange", loading: "loadingChange", open: "openChange", checked: "checkedChange", indeterminate: "indeterminateChange", label: "labelChange", nowrap: "nowrapChange", toggle: "toggle" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTreeNodeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: XTreeNodeProperty, isStandalone: true, selector: "x-tree-node-property", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, nodeHeight: { classPropertyName: "nodeHeight", publicName: "nodeHeight", 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 }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, pid: { classPropertyName: "pid", publicName: "pid", isSignal: true, isRequired: false, transformFunction: null }, leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { level: "levelChange", nodeHeight: "nodeHeightChange", nodeNowrap: "nodeNowrapChange", nodeAlignItems: "nodeAlignItemsChange", virtualScroll: "virtualScrollChange", disabled: "disabledChange", id: "idChange", pid: "pidChange", leaf: "leafChange", height: "heightChange", alignItems: "alignItemsChange", loading: "loadingChange", open: "openChange", checked: "checkedChange", indeterminate: "indeterminateChange", label: "labelChange", nowrap: "nowrapChange", toggle: "toggle" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeNodeProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTreeNodeProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XTreeNodePrefix}-property`, template: '' }]
         }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }, { type: i0.Output, args: ["levelChange"] }], nodeHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeHeight", required: false }] }, { type: i0.Output, args: ["nodeHeightChange"] }], nodeNowrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeNowrap", required: false }] }, { type: i0.Output, args: ["nodeNowrapChange"] }], nodeAlignItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeAlignItems", required: false }] }, { type: i0.Output, args: ["nodeAlignItemsChange"] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }, { type: i0.Output, args: ["virtualScrollChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }, { type: i0.Output, args: ["idChange"] }], pid: [{ type: i0.Input, args: [{ isSignal: true, alias: "pid", required: false }] }, { type: i0.Output, args: ["pidChange"] }], leaf: [{ type: i0.Input, args: [{ isSignal: true, alias: "leaf", required: false }] }, { type: i0.Output, args: ["leafChange"] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }, { type: i0.Output, args: ["heightChange"] }], alignItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignItems", required: false }] }, { type: i0.Output, args: ["alignItemsChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }, { type: i0.Output, args: ["loadingChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }, { type: i0.Output, args: ["labelChange"] }], nowrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "nowrap", required: false }] }, { type: i0.Output, args: ["nowrapChange"] }], toggle: [{ type: i0.Output, args: ["toggle"] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }] } });
@@ -463,10 +463,10 @@ class XTreeService {
             data.splice(pos === -1 ? index : index + 1, 0, from);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTreeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTreeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -759,10 +759,10 @@ class XTreeNodeComponent extends XTreeNodeProperty {
     trackByAction(_index, item) {
         return item.id;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XTreeNodeComponent, isStandalone: true, selector: "x-tree-node, [x-tree-node]", outputs: { nodeMouseenter: "nodeMouseenter" }, host: { listeners: { "mouseenter": "onMouseenter($event)", "mouseleave": "onMouseleave($event)" }, 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTreeNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: XTreeNodeComponent, isStandalone: true, selector: "x-tree-node, [x-tree-node]", outputs: { nodeMouseenter: "nodeMouseenter" }, host: { listeners: { "mouseenter": "onMouseenter($event)", "mouseleave": "onMouseleave($event)" }, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTreeNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XTreeNodePrefix}, [${XTreeNodePrefix}]`, imports: [
                         NgStyle,
@@ -1350,20 +1350,20 @@ class XTreeComponent extends XTreeProperty {
     trackByItem(_index, item) {
         return item;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: XTreeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XTreeComponent, isStandalone: true, selector: "x-tree", viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true, read: CdkVirtualScrollViewport, isSignal: true }, { propertyName: "dropList", first: true, predicate: ["dropList"], descendants: true, read: CdkDropList, isSignal: true }, { propertyName: "nodeComponents", predicate: XTreeNodeComponent, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #tree class=\"x-tree\" [class.x-tree-only-leaf]=\"onlyLeaf()\">\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      #virtualBody\r\n      [itemSize]=\"itemSize()\"\r\n      [minBufferPx]=\"minBufferPxSignal()\"\r\n      [maxBufferPx]=\"maxBufferPxSignal()\"\r\n      [style.height.px]=\"virtualScrollHeightSignal()\"\r\n    >\r\n      <div\r\n        class=\"x-tree-content\"\r\n        #dropList\r\n        cdkDropList\r\n        [cdkDropListDisabled]=\"!drag()\"\r\n        [cdkDropListSortingDisabled]=\"true\"\r\n        [hidden]=\"isEmpty()\"\r\n        [cdkDropListData]=\"nodes()\"\r\n        [cdkDropListEnterPredicate]=\"predicate\"\r\n      >\r\n        <x-tree-node\r\n          *cdkVirtualFor=\"let node of nodes(); templateCacheSize: 0; trackBy: trackByItem\"\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n          [node]=\"node\"\r\n          [nodeHeight]=\"nodeHeight()\"\r\n          [nodeNowrap]=\"nodeNowrap()\"\r\n          [nodeAlignItems]=\"nodeAlignItems()\"\r\n          [actions]=\"actions()\"\r\n          [(disabled)]=\"node.disabled!\"\r\n          [(id)]=\"node.id\"\r\n          [(pid)]=\"node.pid\"\r\n          [(leaf)]=\"node.leaf!\"\r\n          [(height)]=\"node.height!\"\r\n          [(alignItems)]=\"node.alignItems!\"\r\n          [(loading)]=\"node.loading!\"\r\n          [(level)]=\"node.level!\"\r\n          [(open)]=\"node.open\"\r\n          [(checked)]=\"node.checked!\"\r\n          [(indeterminate)]=\"node.indeterminate!\"\r\n          [(label)]=\"node.label!\"\r\n          [(nowrap)]=\"node.nowrap!\"\r\n          (toggle)=\"onToggle(null, $event)\"\r\n        ></x-tree-node>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div\r\n      class=\"x-tree-content\"\r\n      #dropList\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!drag()\"\r\n      [cdkDropListSortingDisabled]=\"true\"\r\n      [hidden]=\"isEmpty()\"\r\n      [cdkDropListData]=\"nodes()\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      @for (node of nodes(); track node.id + '' + $index) {\r\n        <x-tree-node\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n          [node]=\"node\"\r\n          [nodeHeight]=\"nodeHeight()\"\r\n          [nodeNowrap]=\"nodeNowrap()\"\r\n          [nodeAlignItems]=\"nodeAlignItems()\"\r\n          [actions]=\"actions()\"\r\n          [(disabled)]=\"node.disabled\"\r\n          [(id)]=\"node.id\"\r\n          [(pid)]=\"node.pid\"\r\n          [(leaf)]=\"node.leaf\"\r\n          [(height)]=\"node.height!\"\r\n          [(alignItems)]=\"node.alignItems\"\r\n          [(loading)]=\"node.loading\"\r\n          [(level)]=\"node.level\"\r\n          [(open)]=\"node.open\"\r\n          [(checked)]=\"node.checked\"\r\n          [(indeterminate)]=\"node.indeterminate\"\r\n          [(label)]=\"node.label\"\r\n          [(nowrap)]=\"node.nowrap\"\r\n          (toggle)=\"onToggle(null, $event)\"\r\n        ></x-tree-node>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n@if (lazy()) {\r\n  <x-icon [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\r\n}\r\n", styles: [".x-tree{margin:0;padding:0}.x-tree-only-leaf .x-tree-node-sub{color:var(--x-text-300)}.x-tree-content.cdk-drop-list-dragging x-tree-node .x-tree-node-content:not(.x-disabled):not(.x-activated):hover{background-color:transparent}.x-tree-content.cdk-drop-list-dragging x-tree-node.cdk-drag-placeholder .x-tree-node-content{color:var(--x-primary);background-color:var(--x-background-a200);opacity:.8}.x-tree-content.cdk-drop-list-dragging x-tree-node:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ 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.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: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: XTreeNodeComponent, selector: "x-tree-node, [x-tree-node]", outputs: ["nodeMouseenter"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTreeComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: XTreeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: XTreeComponent, isStandalone: true, selector: "x-tree", viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true, read: CdkVirtualScrollViewport, isSignal: true }, { propertyName: "dropList", first: true, predicate: ["dropList"], descendants: true, read: CdkDropList, isSignal: true }, { propertyName: "nodeComponents", predicate: XTreeNodeComponent, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #tree class=\"x-tree\" [class.x-tree-only-leaf]=\"onlyLeaf()\">\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      #virtualBody\r\n      [itemSize]=\"itemSize()\"\r\n      [minBufferPx]=\"minBufferPxSignal()\"\r\n      [maxBufferPx]=\"maxBufferPxSignal()\"\r\n      [style.height.px]=\"virtualScrollHeightSignal()\"\r\n    >\r\n      <div\r\n        class=\"x-tree-content\"\r\n        #dropList\r\n        cdkDropList\r\n        [cdkDropListDisabled]=\"!drag()\"\r\n        [cdkDropListSortingDisabled]=\"true\"\r\n        [hidden]=\"isEmpty()\"\r\n        [cdkDropListData]=\"nodes()\"\r\n        [cdkDropListEnterPredicate]=\"predicate\"\r\n      >\r\n        <x-tree-node\r\n          *cdkVirtualFor=\"let node of nodes(); templateCacheSize: 0; trackBy: trackByItem\"\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n          [node]=\"node\"\r\n          [nodeHeight]=\"nodeHeight()\"\r\n          [nodeNowrap]=\"nodeNowrap()\"\r\n          [nodeAlignItems]=\"nodeAlignItems()\"\r\n          [actions]=\"actions()\"\r\n          [(disabled)]=\"node.disabled!\"\r\n          [(id)]=\"node.id\"\r\n          [(pid)]=\"node.pid\"\r\n          [(leaf)]=\"node.leaf!\"\r\n          [(height)]=\"node.height!\"\r\n          [(alignItems)]=\"node.alignItems!\"\r\n          [(loading)]=\"node.loading!\"\r\n          [(level)]=\"node.level!\"\r\n          [(open)]=\"node.open\"\r\n          [(checked)]=\"node.checked!\"\r\n          [(indeterminate)]=\"node.indeterminate!\"\r\n          [(label)]=\"node.label!\"\r\n          [(nowrap)]=\"node.nowrap!\"\r\n          (toggle)=\"onToggle(null, $event)\"\r\n        ></x-tree-node>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div\r\n      class=\"x-tree-content\"\r\n      #dropList\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!drag()\"\r\n      [cdkDropListSortingDisabled]=\"true\"\r\n      [hidden]=\"isEmpty()\"\r\n      [cdkDropListData]=\"nodes()\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      @for (node of nodes(); track node.id + '' + $index) {\r\n        <x-tree-node\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n          [node]=\"node\"\r\n          [nodeHeight]=\"nodeHeight()\"\r\n          [nodeNowrap]=\"nodeNowrap()\"\r\n          [nodeAlignItems]=\"nodeAlignItems()\"\r\n          [actions]=\"actions()\"\r\n          [(disabled)]=\"node.disabled\"\r\n          [(id)]=\"node.id\"\r\n          [(pid)]=\"node.pid\"\r\n          [(leaf)]=\"node.leaf\"\r\n          [(height)]=\"node.height!\"\r\n          [(alignItems)]=\"node.alignItems\"\r\n          [(loading)]=\"node.loading\"\r\n          [(level)]=\"node.level\"\r\n          [(open)]=\"node.open\"\r\n          [(checked)]=\"node.checked\"\r\n          [(indeterminate)]=\"node.indeterminate\"\r\n          [(label)]=\"node.label\"\r\n          [(nowrap)]=\"node.nowrap\"\r\n          (toggle)=\"onToggle(null, $event)\"\r\n        ></x-tree-node>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n@if (lazy()) {\r\n  <x-icon [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\r\n}\r\n", styles: [".x-tree{margin:0;padding:0}.x-tree-only-leaf .x-tree-node-sub{color:var(--x-text-300)}.x-tree-content.cdk-drop-list-dragging x-tree-node .x-tree-node-content:not(.x-disabled):not(.x-activated):hover{background-color:transparent}.x-tree-content.cdk-drop-list-dragging x-tree-node.cdk-drag-placeholder .x-tree-node-content{color:var(--x-primary);background-color:var(--x-background-a200);opacity:.8}.x-tree-content.cdk-drop-list-dragging x-tree-node:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ 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.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: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: XTreeNodeComponent, selector: "x-tree-node, [x-tree-node]", outputs: ["nodeMouseenter"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XTreePrefix}`, imports: [DragDropModule, ScrollingModule, XTreeNodeComponent, XIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #tree class=\"x-tree\" [class.x-tree-only-leaf]=\"onlyLeaf()\">\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      #virtualBody\r\n      [itemSize]=\"itemSize()\"\r\n      [minBufferPx]=\"minBufferPxSignal()\"\r\n      [maxBufferPx]=\"maxBufferPxSignal()\"\r\n      [style.height.px]=\"virtualScrollHeightSignal()\"\r\n    >\r\n      <div\r\n        class=\"x-tree-content\"\r\n        #dropList\r\n        cdkDropList\r\n        [cdkDropListDisabled]=\"!drag()\"\r\n        [cdkDropListSortingDisabled]=\"true\"\r\n        [hidden]=\"isEmpty()\"\r\n        [cdkDropListData]=\"nodes()\"\r\n        [cdkDropListEnterPredicate]=\"predicate\"\r\n      >\r\n        <x-tree-node\r\n          *cdkVirtualFor=\"let node of nodes(); templateCacheSize: 0; trackBy: trackByItem\"\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n          [node]=\"node\"\r\n          [nodeHeight]=\"nodeHeight()\"\r\n          [nodeNowrap]=\"nodeNowrap()\"\r\n          [nodeAlignItems]=\"nodeAlignItems()\"\r\n          [actions]=\"actions()\"\r\n          [(disabled)]=\"node.disabled!\"\r\n          [(id)]=\"node.id\"\r\n          [(pid)]=\"node.pid\"\r\n          [(leaf)]=\"node.leaf!\"\r\n          [(height)]=\"node.height!\"\r\n          [(alignItems)]=\"node.alignItems!\"\r\n          [(loading)]=\"node.loading!\"\r\n          [(level)]=\"node.level!\"\r\n          [(open)]=\"node.open\"\r\n          [(checked)]=\"node.checked!\"\r\n          [(indeterminate)]=\"node.indeterminate!\"\r\n          [(label)]=\"node.label!\"\r\n          [(nowrap)]=\"node.nowrap!\"\r\n          (toggle)=\"onToggle(null, $event)\"\r\n        ></x-tree-node>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <div\r\n      class=\"x-tree-content\"\r\n      #dropList\r\n      cdkDropList\r\n      [cdkDropListDisabled]=\"!drag()\"\r\n      [cdkDropListSortingDisabled]=\"true\"\r\n      [hidden]=\"isEmpty()\"\r\n      [cdkDropListData]=\"nodes()\"\r\n      [cdkDropListEnterPredicate]=\"predicate\"\r\n    >\r\n      @for (node of nodes(); track node.id + '' + $index) {\r\n        <x-tree-node\r\n          cdkDrag\r\n          [cdkDragDisabled]=\"node.disabled\"\r\n          (cdkDragStarted)=\"cdkDragStarted($event)\"\r\n          (cdkDragEnded)=\"cdkDragEnded($event)\"\r\n          (cdkDragMoved)=\"cdkDragMoved($event)\"\r\n          [cdkDragData]=\"node\"\r\n          (nodeMouseenter)=\"nodeMouseenter($event)\"\r\n          [node]=\"node\"\r\n          [nodeHeight]=\"nodeHeight()\"\r\n          [nodeNowrap]=\"nodeNowrap()\"\r\n          [nodeAlignItems]=\"nodeAlignItems()\"\r\n          [actions]=\"actions()\"\r\n          [(disabled)]=\"node.disabled\"\r\n          [(id)]=\"node.id\"\r\n          [(pid)]=\"node.pid\"\r\n          [(leaf)]=\"node.leaf\"\r\n          [(height)]=\"node.height!\"\r\n          [(alignItems)]=\"node.alignItems\"\r\n          [(loading)]=\"node.loading\"\r\n          [(level)]=\"node.level\"\r\n          [(open)]=\"node.open\"\r\n          [(checked)]=\"node.checked\"\r\n          [(indeterminate)]=\"node.indeterminate\"\r\n          [(label)]=\"node.label\"\r\n          [(nowrap)]=\"node.nowrap\"\r\n          (toggle)=\"onToggle(null, $event)\"\r\n        ></x-tree-node>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n@if (lazy()) {\r\n  <x-icon [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\r\n}\r\n", styles: [".x-tree{margin:0;padding:0}.x-tree-only-leaf .x-tree-node-sub{color:var(--x-text-300)}.x-tree-content.cdk-drop-list-dragging x-tree-node .x-tree-node-content:not(.x-disabled):not(.x-activated):hover{background-color:transparent}.x-tree-content.cdk-drop-list-dragging x-tree-node.cdk-drag-placeholder .x-tree-node-content{color:var(--x-primary);background-color:var(--x-background-a200);opacity:.8}.x-tree-content.cdk-drop-list-dragging x-tree-node:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: XTreeService }], propDecorators: { tree: [{ type: i0.ViewChild, args: ['tree', { ...{ read: (ElementRef) }, isSignal: true }] }], virtualBody: [{ type: i0.ViewChild, args: ['virtualBody', { ...{ read: CdkVirtualScrollViewport }, isSignal: true }] }], dropList: [{ type: i0.ViewChild, args: ['dropList', { ...{ read: (CdkDropList) }, isSignal: true }] }], nodeComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => XTreeNodeComponent), { isSignal: true }] }] } });
 
 class XTreeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XTreeModule, imports: [XTreeComponent, XTreeNodeComponent], exports: [XTreeComponent, XTreeNodeComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeModule, imports: [XTreeComponent, XTreeNodeComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: XTreeModule, imports: [XTreeComponent, XTreeNodeComponent], exports: [XTreeComponent, XTreeNodeComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTreeModule, imports: [XTreeComponent, XTreeNodeComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTreeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTreeModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XTreeComponent, XTreeNodeComponent],

package/fesm2022/ng-nest-ui-typography.mjs

@@ -25,10 +25,10 @@ class XTypographyProperty extends XProperty {
          */
         this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTypographyProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XTypographyProperty, isStandalone: true, selector: "x-typography-property", inputs: { font: { classPropertyName: "font", publicName: "font", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTypographyProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: XTypographyProperty, isStandalone: true, selector: "x-typography-property", inputs: { font: { classPropertyName: "font", publicName: "font", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTypographyProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTypographyProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XTypographyPrefix}-property`, template: '' }]
         }], propDecorators: { font: [{ type: i0.Input, args: [{ isSignal: true, alias: "font", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
@@ -49,20 +49,20 @@ class XTypographyComponent extends XTypographyProperty {
         if (text && text.length > 0)
             this.firstText.set(text.slice(0, 1));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTypographyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.5", type: XTypographyComponent, isStandalone: true, selector: "x-typography", usesInheritance: true, ngImport: i0, template: "<h4>{{ font() }}</h4>\r\n<div class=\"x-typography-list\">\r\n  <div class=\"x-typography-item\">\r\n    <h1>{{ firstText() }}</h1>\r\n    <p>\r\n      <span>\u5E38\u89C4</span>\r\n      <span class=\"x-typography-blod\">\u7C97\u4F53</span>\r\n    </p>\r\n  </div>\r\n  <div class=\"x-typography-item\">\r\n    <h1>Aa</h1>\r\n    <p>\r\n      <span>Regular</span>\r\n      <span class=\"x-typography-blod\">Bold</span>\r\n    </p>\r\n  </div>\r\n</div>\r\n<p>{{ text() }}</p>\r\n<p>abcdefghijklmnopqrstuvwxyz</p>\r\n<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>\r\n<p>1234567890.:,;'\"(!?)+-*/=</p>\r\n", styles: [".x-typography{margin:0;padding:0}.x-typography{color:var(--x-text)}.x-typography h4,.x-typography h1,.x-typography p{margin:0;font-size:var(--x-font-size);line-height:1.5rem}.x-typography>h4{color:var(--x-text-300);font-weight:500}.x-typography-list{display:flex;margin:.5rem 0}.x-typography-item{display:flex;margin:.5rem 0 0 3rem}.x-typography-item:first-child{margin-left:0}.x-typography-item>h1{color:var(--x-text);font-size:3.75rem;font-weight:600}.x-typography-item>p{display:flex;flex-direction:column;padding:.75rem 0;margin-left:1.5rem}.x-typography-item>p>span{margin-top:.25rem}.x-typography-item>p>span:first-child{margin-top:0}.x-typography-blod{font-weight:600}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTypographyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: XTypographyComponent, isStandalone: true, selector: "x-typography", usesInheritance: true, ngImport: i0, template: "<h4>{{ font() }}</h4>\r\n<div class=\"x-typography-list\">\r\n  <div class=\"x-typography-item\">\r\n    <h1>{{ firstText() }}</h1>\r\n    <p>\r\n      <span>\u5E38\u89C4</span>\r\n      <span class=\"x-typography-blod\">\u7C97\u4F53</span>\r\n    </p>\r\n  </div>\r\n  <div class=\"x-typography-item\">\r\n    <h1>Aa</h1>\r\n    <p>\r\n      <span>Regular</span>\r\n      <span class=\"x-typography-blod\">Bold</span>\r\n    </p>\r\n  </div>\r\n</div>\r\n<p>{{ text() }}</p>\r\n<p>abcdefghijklmnopqrstuvwxyz</p>\r\n<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>\r\n<p>1234567890.:,;'\"(!?)+-*/=</p>\r\n", styles: [".x-typography{margin:0;padding:0}.x-typography{color:var(--x-text)}.x-typography h4,.x-typography h1,.x-typography p{margin:0;font-size:var(--x-font-size);line-height:1.5rem}.x-typography>h4{color:var(--x-text-300);font-weight:500}.x-typography-list{display:flex;margin:.5rem 0}.x-typography-item{display:flex;margin:.5rem 0 0 3rem}.x-typography-item:first-child{margin-left:0}.x-typography-item>h1{color:var(--x-text);font-size:3.75rem;font-weight:600}.x-typography-item>p{display:flex;flex-direction:column;padding:.75rem 0;margin-left:1.5rem}.x-typography-item>p>span{margin-top:.25rem}.x-typography-item>p>span:first-child{margin-top:0}.x-typography-blod{font-weight:600}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTypographyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTypographyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'x-typography', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<h4>{{ font() }}</h4>\r\n<div class=\"x-typography-list\">\r\n  <div class=\"x-typography-item\">\r\n    <h1>{{ firstText() }}</h1>\r\n    <p>\r\n      <span>\u5E38\u89C4</span>\r\n      <span class=\"x-typography-blod\">\u7C97\u4F53</span>\r\n    </p>\r\n  </div>\r\n  <div class=\"x-typography-item\">\r\n    <h1>Aa</h1>\r\n    <p>\r\n      <span>Regular</span>\r\n      <span class=\"x-typography-blod\">Bold</span>\r\n    </p>\r\n  </div>\r\n</div>\r\n<p>{{ text() }}</p>\r\n<p>abcdefghijklmnopqrstuvwxyz</p>\r\n<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>\r\n<p>1234567890.:,;'\"(!?)+-*/=</p>\r\n", styles: [".x-typography{margin:0;padding:0}.x-typography{color:var(--x-text)}.x-typography h4,.x-typography h1,.x-typography p{margin:0;font-size:var(--x-font-size);line-height:1.5rem}.x-typography>h4{color:var(--x-text-300);font-weight:500}.x-typography-list{display:flex;margin:.5rem 0}.x-typography-item{display:flex;margin:.5rem 0 0 3rem}.x-typography-item:first-child{margin-left:0}.x-typography-item>h1{color:var(--x-text);font-size:3.75rem;font-weight:600}.x-typography-item>p{display:flex;flex-direction:column;padding:.75rem 0;margin-left:1.5rem}.x-typography-item>p>span{margin-top:.25rem}.x-typography-item>p>span:first-child{margin-top:0}.x-typography-blod{font-weight:600}\n"] }]
         }] });
 
 class XTypographyModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTypographyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XTypographyModule, imports: [XTypographyComponent], exports: [XTypographyComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTypographyModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTypographyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: XTypographyModule, imports: [XTypographyComponent], exports: [XTypographyComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTypographyModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTypographyModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XTypographyModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XTypographyComponent],

package/fesm2022/ng-nest-ui-upload.mjs

@@ -141,10 +141,10 @@ class XUploadProperty extends XFormControlFunction(X_UPLOAD_CONFIG_NAME) {
          */
         this.uploadError = output();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XUploadProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XUploadProperty, isStandalone: true, selector: "x-upload-property", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, dropContainer: { classPropertyName: "dropContainer", publicName: "dropContainer", isSignal: true, isRequired: false, transformFunction: null }, dropIcon: { classPropertyName: "dropIcon", publicName: "dropIcon", isSignal: true, isRequired: false, transformFunction: null }, dropTitle: { classPropertyName: "dropTitle", publicName: "dropTitle", isSignal: true, isRequired: false, transformFunction: null }, dropDescription: { classPropertyName: "dropDescription", publicName: "dropDescription", isSignal: true, isRequired: false, transformFunction: null }, showDrop: { classPropertyName: "showDrop", publicName: "showDrop", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, imgFallback: { classPropertyName: "imgFallback", publicName: "imgFallback", isSignal: true, isRequired: false, transformFunction: null }, imgCut: { classPropertyName: "imgCut", publicName: "imgCut", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, download: { classPropertyName: "download", publicName: "download", isSignal: true, isRequired: false, transformFunction: null }, multipleModel: { classPropertyName: "multipleModel", publicName: "multipleModel", isSignal: true, isRequired: false, transformFunction: null }, filesTpl: { classPropertyName: "filesTpl", publicName: "filesTpl", isSignal: true, isRequired: false, transformFunction: null }, maxLimit: { classPropertyName: "maxLimit", publicName: "maxLimit", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeClick: "removeClick", uploadReady: "uploadReady", uploading: "uploading", uploadSuccess: "uploadSuccess", uploadError: "uploadError" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XUploadProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: XUploadProperty, isStandalone: true, selector: "x-upload-property", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, dropContainer: { classPropertyName: "dropContainer", publicName: "dropContainer", isSignal: true, isRequired: false, transformFunction: null }, dropIcon: { classPropertyName: "dropIcon", publicName: "dropIcon", isSignal: true, isRequired: false, transformFunction: null }, dropTitle: { classPropertyName: "dropTitle", publicName: "dropTitle", isSignal: true, isRequired: false, transformFunction: null }, dropDescription: { classPropertyName: "dropDescription", publicName: "dropDescription", isSignal: true, isRequired: false, transformFunction: null }, showDrop: { classPropertyName: "showDrop", publicName: "showDrop", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, imgFallback: { classPropertyName: "imgFallback", publicName: "imgFallback", isSignal: true, isRequired: false, transformFunction: null }, imgCut: { classPropertyName: "imgCut", publicName: "imgCut", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, download: { classPropertyName: "download", publicName: "download", isSignal: true, isRequired: false, transformFunction: null }, multipleModel: { classPropertyName: "multipleModel", publicName: "multipleModel", isSignal: true, isRequired: false, transformFunction: null }, filesTpl: { classPropertyName: "filesTpl", publicName: "filesTpl", isSignal: true, isRequired: false, transformFunction: null }, maxLimit: { classPropertyName: "maxLimit", publicName: "maxLimit", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeClick: "removeClick", uploadReady: "uploadReady", uploading: "uploading", uploadSuccess: "uploadSuccess", uploadError: "uploadError" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XUploadProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XUploadProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XUploadPrefix}-property`, template: '' }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], dropContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropContainer", required: false }] }], dropIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropIcon", required: false }] }], dropTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropTitle", required: false }] }], dropDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropDescription", required: false }] }], showDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDrop", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], imgFallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgFallback", required: false }] }], imgCut: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgCut", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], download: [{ type: i0.Input, args: [{ isSignal: true, alias: "download", required: false }] }], multipleModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "multipleModel", required: false }] }], filesTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "filesTpl", required: false }] }], maxLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLimit", required: false }] }], headers: [{ type: i0.Input, args: [{ isSignal: true, alias: "headers", required: false }] }], removeClick: [{ type: i0.Output, args: ["removeClick"] }], uploadReady: [{ type: i0.Output, args: ["uploadReady"] }], uploading: [{ type: i0.Output, args: ["uploading"] }], uploadSuccess: [{ type: i0.Output, args: ["uploadSuccess"] }], uploadError: [{ type: i0.Output, args: ["uploadError"] }] } });
@@ -336,10 +336,10 @@ class XUploadPortalComponent {
             });
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XUploadPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.5", type: XUploadPortalComponent, isStandalone: true, selector: "x-upload-portal", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePortal: "closePortal", surePortal: "surePortal" }, viewQueries: [{ propertyName: "imgRef", first: true, predicate: ["imgRef"], descendants: true, isSignal: true }, { propertyName: "imgClipRef", first: true, predicate: ["imgClipRef"], descendants: true, isSignal: true }, { propertyName: "boundaryRef", first: true, predicate: ["boundaryRef"], descendants: true, isSignal: true }, { propertyName: "cutRef", first: true, predicate: ["cutRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"x-upload-portal {{ cutType() }}\" [class.x-upload-portal-ready]=\"ready()\">\r\n  <div class=\"x-upload-portal-tools\">\r\n    <div class=\"x-upload-portal-title\">\r\n      <x-icon type=\"fto-image\"></x-icon>\r\n      <span>{{ name() }}</span>\r\n    </div>\r\n    <x-icon class=\"x-upload-portal-close\" type=\"fto-x\" (click)=\"closePortal.emit()\"></x-icon>\r\n  </div>\r\n  <div class=\"x-upload-portal-img\">\r\n    <img #imgRef class=\"x-upload-portal-full-img\" [src]=\"url()\" />\r\n    <div #boundaryRef class=\"x-upload-portal-boundary\">\r\n      <img #imgClipRef class=\"x-upload-portal-clip-img\" [src]=\"url()\" />\r\n      <div #cutRef class=\"x-upload-portal-cut\">\r\n        <div class=\"x-upload-portal-cut-top-start\"></div>\r\n        <div class=\"x-upload-portal-cut-top\"></div>\r\n        <div class=\"x-upload-portal-cut-top-end\"></div>\r\n        <div class=\"x-upload-portal-cut-left\"></div>\r\n        <div class=\"x-upload-portal-cut-right\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom-start\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom-end\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"x-upload-portal-bottom-tools\">\r\n    <x-icon class=\"x-upload-portal-close\" type=\"fto-check\" (click)=\"sure()\"></x-icon>\r\n  </div>\r\n</div>\r\n", styles: ["x-upload-portal{width:100%;height:100%}.x-upload-portal{margin:0;padding:0}.x-upload-portal{display:flex;position:relative;width:100%;height:100%;flex-direction:column}.x-upload-portal-tools{width:100%;height:3.25rem;display:flex;align-items:center;justify-content:space-between;position:absolute;z-index:1;color:#fff}.x-upload-portal-bottom-tools{width:100%;height:3.25rem;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;color:#fff;bottom:0}.x-upload-portal-title{display:flex;align-items:center;margin:0 1rem}.x-upload-portal-title>x-icon{font-size:1.25rem}.x-upload-portal-title>span{margin-left:.5rem}.x-upload-portal-close{font-size:1.75rem;padding:0 1rem;color:#fffc;transition:color var(--x-animation-duration-base);cursor:pointer}.x-upload-portal-close:hover{color:#fff}.x-upload-portal-img{flex:1;width:100%;position:relative;overflow:auto}.x-upload-portal-full-img{max-width:85%;max-height:85%;width:auto;height:auto;position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0)}.x-upload-portal-clip-img{position:absolute}.x-upload-portal-ready .x-upload-portal-full-img{max-width:inherit;max-height:inherit}.x-upload-portal-boundary{width:0;height:0;left:50%;top:50%;transform:translate3d(-50%,-50%,0);position:relative;background-color:#00000080}.x-upload-portal-cut{width:0;height:0;border:.125rem var(--x-border-style) rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;position:relative;cursor:move}.x-upload-portal-cut-top-start,.x-upload-portal-cut-top,.x-upload-portal-cut-top-end,.x-upload-portal-cut-left,.x-upload-portal-cut-right,.x-upload-portal-cut-bottom-start,.x-upload-portal-cut-bottom,.x-upload-portal-cut-bottom-end{width:.825rem;height:.825rem;background:#fff;position:absolute;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius)}.x-upload-portal-cut-top-start{top:-.4125rem;left:-.4125rem;cursor:se-resize}.x-upload-portal-cut-top{top:-.4125rem;cursor:s-resize}.x-upload-portal-cut-top-end{top:-.4125rem;right:-.4125rem;cursor:ne-resize}.x-upload-portal-cut-left{left:-.4125rem;cursor:w-resize}.x-upload-portal-cut-right{right:-.4125rem;cursor:w-resize}.x-upload-portal-cut-bottom-start{left:-.4125rem;bottom:-.4125rem;cursor:ne-resize}.x-upload-portal-cut-bottom{bottom:-.4125rem;cursor:s-resize}.x-upload-portal-cut-bottom-end{right:-.4125rem;bottom:-.4125rem;cursor:se-resize}.x-upload-portal-top-start{cursor:se-resize}.x-upload-portal-top{cursor:s-resize}.x-upload-portal-top-end{cursor:ne-resize}.x-upload-portal-left,.x-upload-portal-right{cursor:w-resize}.x-upload-portal-bottom-start{cursor:ne-resize}.x-upload-portal-bottom{cursor:s-resize}.x-upload-portal-bottom-end{cursor:se-resize}\n"], dependencies: [{ kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XUploadPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.0", type: XUploadPortalComponent, isStandalone: true, selector: "x-upload-portal", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePortal: "closePortal", surePortal: "surePortal" }, viewQueries: [{ propertyName: "imgRef", first: true, predicate: ["imgRef"], descendants: true, isSignal: true }, { propertyName: "imgClipRef", first: true, predicate: ["imgClipRef"], descendants: true, isSignal: true }, { propertyName: "boundaryRef", first: true, predicate: ["boundaryRef"], descendants: true, isSignal: true }, { propertyName: "cutRef", first: true, predicate: ["cutRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"x-upload-portal {{ cutType() }}\" [class.x-upload-portal-ready]=\"ready()\">\r\n  <div class=\"x-upload-portal-tools\">\r\n    <div class=\"x-upload-portal-title\">\r\n      <x-icon type=\"fto-image\"></x-icon>\r\n      <span>{{ name() }}</span>\r\n    </div>\r\n    <x-icon class=\"x-upload-portal-close\" type=\"fto-x\" (click)=\"closePortal.emit()\"></x-icon>\r\n  </div>\r\n  <div class=\"x-upload-portal-img\">\r\n    <img #imgRef class=\"x-upload-portal-full-img\" [src]=\"url()\" />\r\n    <div #boundaryRef class=\"x-upload-portal-boundary\">\r\n      <img #imgClipRef class=\"x-upload-portal-clip-img\" [src]=\"url()\" />\r\n      <div #cutRef class=\"x-upload-portal-cut\">\r\n        <div class=\"x-upload-portal-cut-top-start\"></div>\r\n        <div class=\"x-upload-portal-cut-top\"></div>\r\n        <div class=\"x-upload-portal-cut-top-end\"></div>\r\n        <div class=\"x-upload-portal-cut-left\"></div>\r\n        <div class=\"x-upload-portal-cut-right\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom-start\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom-end\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"x-upload-portal-bottom-tools\">\r\n    <x-icon class=\"x-upload-portal-close\" type=\"fto-check\" (click)=\"sure()\"></x-icon>\r\n  </div>\r\n</div>\r\n", styles: ["x-upload-portal{width:100%;height:100%}.x-upload-portal{margin:0;padding:0}.x-upload-portal{display:flex;position:relative;width:100%;height:100%;flex-direction:column}.x-upload-portal-tools{width:100%;height:3.25rem;display:flex;align-items:center;justify-content:space-between;position:absolute;z-index:1;color:#fff}.x-upload-portal-bottom-tools{width:100%;height:3.25rem;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;color:#fff;bottom:0}.x-upload-portal-title{display:flex;align-items:center;margin:0 1rem}.x-upload-portal-title>x-icon{font-size:1.25rem}.x-upload-portal-title>span{margin-left:.5rem}.x-upload-portal-close{font-size:1.75rem;padding:0 1rem;color:#fffc;transition:color var(--x-animation-duration-base);cursor:pointer}.x-upload-portal-close:hover{color:#fff}.x-upload-portal-img{flex:1;width:100%;position:relative;overflow:auto}.x-upload-portal-full-img{max-width:85%;max-height:85%;width:auto;height:auto;position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0)}.x-upload-portal-clip-img{position:absolute}.x-upload-portal-ready .x-upload-portal-full-img{max-width:inherit;max-height:inherit}.x-upload-portal-boundary{width:0;height:0;left:50%;top:50%;transform:translate3d(-50%,-50%,0);position:relative;background-color:#00000080}.x-upload-portal-cut{width:0;height:0;border:.125rem var(--x-border-style) rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;position:relative;cursor:move}.x-upload-portal-cut-top-start,.x-upload-portal-cut-top,.x-upload-portal-cut-top-end,.x-upload-portal-cut-left,.x-upload-portal-cut-right,.x-upload-portal-cut-bottom-start,.x-upload-portal-cut-bottom,.x-upload-portal-cut-bottom-end{width:.825rem;height:.825rem;background:#fff;position:absolute;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius)}.x-upload-portal-cut-top-start{top:-.4125rem;left:-.4125rem;cursor:se-resize}.x-upload-portal-cut-top{top:-.4125rem;cursor:s-resize}.x-upload-portal-cut-top-end{top:-.4125rem;right:-.4125rem;cursor:ne-resize}.x-upload-portal-cut-left{left:-.4125rem;cursor:w-resize}.x-upload-portal-cut-right{right:-.4125rem;cursor:w-resize}.x-upload-portal-cut-bottom-start{left:-.4125rem;bottom:-.4125rem;cursor:ne-resize}.x-upload-portal-cut-bottom{bottom:-.4125rem;cursor:s-resize}.x-upload-portal-cut-bottom-end{right:-.4125rem;bottom:-.4125rem;cursor:se-resize}.x-upload-portal-top-start{cursor:se-resize}.x-upload-portal-top{cursor:s-resize}.x-upload-portal-top-end{cursor:ne-resize}.x-upload-portal-left,.x-upload-portal-right{cursor:w-resize}.x-upload-portal-bottom-start{cursor:ne-resize}.x-upload-portal-bottom{cursor:s-resize}.x-upload-portal-bottom-end{cursor:se-resize}\n"], dependencies: [{ kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XUploadPortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XUploadPortalComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XUploadPortalPrefix}`, imports: [XIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-upload-portal {{ cutType() }}\" [class.x-upload-portal-ready]=\"ready()\">\r\n  <div class=\"x-upload-portal-tools\">\r\n    <div class=\"x-upload-portal-title\">\r\n      <x-icon type=\"fto-image\"></x-icon>\r\n      <span>{{ name() }}</span>\r\n    </div>\r\n    <x-icon class=\"x-upload-portal-close\" type=\"fto-x\" (click)=\"closePortal.emit()\"></x-icon>\r\n  </div>\r\n  <div class=\"x-upload-portal-img\">\r\n    <img #imgRef class=\"x-upload-portal-full-img\" [src]=\"url()\" />\r\n    <div #boundaryRef class=\"x-upload-portal-boundary\">\r\n      <img #imgClipRef class=\"x-upload-portal-clip-img\" [src]=\"url()\" />\r\n      <div #cutRef class=\"x-upload-portal-cut\">\r\n        <div class=\"x-upload-portal-cut-top-start\"></div>\r\n        <div class=\"x-upload-portal-cut-top\"></div>\r\n        <div class=\"x-upload-portal-cut-top-end\"></div>\r\n        <div class=\"x-upload-portal-cut-left\"></div>\r\n        <div class=\"x-upload-portal-cut-right\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom-start\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom-end\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"x-upload-portal-bottom-tools\">\r\n    <x-icon class=\"x-upload-portal-close\" type=\"fto-check\" (click)=\"sure()\"></x-icon>\r\n  </div>\r\n</div>\r\n", styles: ["x-upload-portal{width:100%;height:100%}.x-upload-portal{margin:0;padding:0}.x-upload-portal{display:flex;position:relative;width:100%;height:100%;flex-direction:column}.x-upload-portal-tools{width:100%;height:3.25rem;display:flex;align-items:center;justify-content:space-between;position:absolute;z-index:1;color:#fff}.x-upload-portal-bottom-tools{width:100%;height:3.25rem;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;color:#fff;bottom:0}.x-upload-portal-title{display:flex;align-items:center;margin:0 1rem}.x-upload-portal-title>x-icon{font-size:1.25rem}.x-upload-portal-title>span{margin-left:.5rem}.x-upload-portal-close{font-size:1.75rem;padding:0 1rem;color:#fffc;transition:color var(--x-animation-duration-base);cursor:pointer}.x-upload-portal-close:hover{color:#fff}.x-upload-portal-img{flex:1;width:100%;position:relative;overflow:auto}.x-upload-portal-full-img{max-width:85%;max-height:85%;width:auto;height:auto;position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0)}.x-upload-portal-clip-img{position:absolute}.x-upload-portal-ready .x-upload-portal-full-img{max-width:inherit;max-height:inherit}.x-upload-portal-boundary{width:0;height:0;left:50%;top:50%;transform:translate3d(-50%,-50%,0);position:relative;background-color:#00000080}.x-upload-portal-cut{width:0;height:0;border:.125rem var(--x-border-style) rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;position:relative;cursor:move}.x-upload-portal-cut-top-start,.x-upload-portal-cut-top,.x-upload-portal-cut-top-end,.x-upload-portal-cut-left,.x-upload-portal-cut-right,.x-upload-portal-cut-bottom-start,.x-upload-portal-cut-bottom,.x-upload-portal-cut-bottom-end{width:.825rem;height:.825rem;background:#fff;position:absolute;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius)}.x-upload-portal-cut-top-start{top:-.4125rem;left:-.4125rem;cursor:se-resize}.x-upload-portal-cut-top{top:-.4125rem;cursor:s-resize}.x-upload-portal-cut-top-end{top:-.4125rem;right:-.4125rem;cursor:ne-resize}.x-upload-portal-cut-left{left:-.4125rem;cursor:w-resize}.x-upload-portal-cut-right{right:-.4125rem;cursor:w-resize}.x-upload-portal-cut-bottom-start{left:-.4125rem;bottom:-.4125rem;cursor:ne-resize}.x-upload-portal-cut-bottom{bottom:-.4125rem;cursor:s-resize}.x-upload-portal-cut-bottom-end{right:-.4125rem;bottom:-.4125rem;cursor:se-resize}.x-upload-portal-top-start{cursor:se-resize}.x-upload-portal-top{cursor:s-resize}.x-upload-portal-top-end{cursor:ne-resize}.x-upload-portal-left,.x-upload-portal-right{cursor:w-resize}.x-upload-portal-bottom-start{cursor:ne-resize}.x-upload-portal-bottom{cursor:s-resize}.x-upload-portal-bottom-end{cursor:se-resize}\n"] }]
         }], propDecorators: { file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: false }] }], imgRef: [{ type: i0.ViewChild, args: ['imgRef', { isSignal: true }] }], imgClipRef: [{ type: i0.ViewChild, args: ['imgClipRef', { isSignal: true }] }], boundaryRef: [{ type: i0.ViewChild, args: ['boundaryRef', { isSignal: true }] }], cutRef: [{ type: i0.ViewChild, args: ['cutRef', { isSignal: true }] }], closePortal: [{ type: i0.Output, args: ["closePortal"] }], surePortal: [{ type: i0.Output, args: ["surePortal"] }] } });
@@ -351,10 +351,10 @@ class XDragOverlayComponent {
         this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
         this.iconString = computed(() => this.icon(), ...(ngDevMode ? [{ debugName: "iconString" }] : []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XDragOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XDragOverlayComponent, isStandalone: true, selector: "x-drag-overlay", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"x-drag-overlay\">\r\n  @if (icon()) {\r\n    <div class=\"x-drag-overlay-icon\">\r\n      <ng-container *xOutlet=\"icon()\">\r\n        <x-icon [type]=\"iconString()\"></x-icon>\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  @if (title()) {\r\n    <div class=\"x-drag-overlay-title\">\r\n      <ng-container *xOutlet=\"title()\">\r\n        {{ title() }}\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  @if (description()) {\r\n    <div class=\"x-drag-overlay-description\">\r\n      <ng-container *xOutlet=\"description()\">\r\n        {{ description() }}\r\n      </ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["x-drag-overlay{width:100%;height:100%}.x-drag-overlay{margin:0;padding:0}.x-drag-overlay{position:absolute;inset:0;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);border:var(--x-border-width) dashed var(--x-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.x-drag-overlay-icon{font-size:2rem}.x-drag-overlay-title{font-size:1rem}.x-drag-overlay-description{color:var(--x-text-400)}\n"], dependencies: [{ kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDragOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: XDragOverlayComponent, isStandalone: true, selector: "x-drag-overlay", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"x-drag-overlay\">\r\n  @if (icon()) {\r\n    <div class=\"x-drag-overlay-icon\">\r\n      <ng-container *xOutlet=\"icon()\">\r\n        <x-icon [type]=\"iconString()\"></x-icon>\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  @if (title()) {\r\n    <div class=\"x-drag-overlay-title\">\r\n      <ng-container *xOutlet=\"title()\">\r\n        {{ title() }}\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  @if (description()) {\r\n    <div class=\"x-drag-overlay-description\">\r\n      <ng-container *xOutlet=\"description()\">\r\n        {{ description() }}\r\n      </ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["x-drag-overlay{width:100%;height:100%}.x-drag-overlay{margin:0;padding:0}.x-drag-overlay{position:absolute;inset:0;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);border:var(--x-border-width) dashed var(--x-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.x-drag-overlay-icon{font-size:2rem}.x-drag-overlay-title{font-size:1rem}.x-drag-overlay-description{color:var(--x-text-400)}\n"], dependencies: [{ kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XDragOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDragOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'x-drag-overlay', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [XOutletDirective, XIconComponent], template: "<div class=\"x-drag-overlay\">\r\n  @if (icon()) {\r\n    <div class=\"x-drag-overlay-icon\">\r\n      <ng-container *xOutlet=\"icon()\">\r\n        <x-icon [type]=\"iconString()\"></x-icon>\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  @if (title()) {\r\n    <div class=\"x-drag-overlay-title\">\r\n      <ng-container *xOutlet=\"title()\">\r\n        {{ title() }}\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  @if (description()) {\r\n    <div class=\"x-drag-overlay-description\">\r\n      <ng-container *xOutlet=\"description()\">\r\n        {{ description() }}\r\n      </ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["x-drag-overlay{width:100%;height:100%}.x-drag-overlay{margin:0;padding:0}.x-drag-overlay{position:absolute;inset:0;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);border:var(--x-border-width) dashed var(--x-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.x-drag-overlay-icon{font-size:2rem}.x-drag-overlay-title{font-size:1rem}.x-drag-overlay-description{color:var(--x-text-400)}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
@@ -414,10 +414,10 @@ class XDragOverlayService {
             this.componentRef = null;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XDragOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XDragOverlayService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDragOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDragOverlayService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XDragOverlayService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XDragOverlayService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -707,10 +707,10 @@ class XUploadComponent extends XUploadProperty {
     imgLoad(file) {
         file.state = 'success';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XUploadComponent, isStandalone: true, selector: "x-upload", host: { properties: { "class.x-upload-show-drop": "this.getShowDrop" } }, providers: [XValueAccessor(XUploadComponent), XDragOverlayService], viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #upload class=\"x-upload x-upload-{{ type() }}\" [class.x-disabled]=\"disabledComputed()\">\r\n  <input\r\n    class=\"x-upload-input\"\r\n    type=\"file\"\r\n    #file\r\n    (change)=\"change($event)\"\r\n    [attr.accept]=\"acceptSignal()\"\r\n    [multiple]=\"multiple()\"\r\n    style=\"display: none\"\r\n  />\r\n\r\n  @switch (type()) {\r\n    @case ('list') {\r\n      <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      <ng-container *xOutlet=\"filesTpl(); context: { $files: files() }\">\r\n        @if (files() && files().length > 0) {\r\n          <ul class=\"x-upload-files\">\r\n            @for (file of files(); track file; let i = $index) {\r\n              <li [class.x-upload-disabled]=\"!download()\">\r\n                @if (download()) {\r\n                  <a [href]=\"file.url\" target=\"_blank\" [title]=\"file.name\">\r\n                    <x-icon type=\"fto-file-text\"></x-icon>\r\n                    <span class=\"x-upload-filename\">{{ file.name }}</span>\r\n                  </a>\r\n                } @else {\r\n                  <a>\r\n                    <x-icon type=\"fto-file-text\"></x-icon>\r\n                    <span class=\"x-upload-filename\">{{ file.name }}</span>\r\n                  </a>\r\n                }\r\n\r\n                @switch (file.state) {\r\n                  @case ('ready') {\r\n                    <x-icon class=\"x-upload-state\" type=\"fto-clock\"></x-icon>\r\n                  }\r\n                  @case ('uploading') {\r\n                    <span class=\"x-upload-percent\">{{ file.percent }}%</span>\r\n                  }\r\n                  @case ('success') {\r\n                    <x-icon class=\"x-upload-state success\" type=\"fto-check\"></x-icon>\r\n                  }\r\n                  @case ('error') {\r\n                    <x-icon class=\"x-upload-state error\" type=\"fto-info\"></x-icon>\r\n                  }\r\n                }\r\n                @if (file.state !== 'uploading') {\r\n                  <x-button icon=\"fto-x\" (click)=\"remove(file, i)\" closable onlyIcon flat size=\"mini\"></x-button>\r\n                }\r\n              </li>\r\n            }\r\n          </ul>\r\n        }\r\n      </ng-container>\r\n    }\r\n    @case ('img') {\r\n      <x-image-group>\r\n        @for (file of files(); track file; let i = $index) {\r\n          <x-image\r\n            [src]=\"file.url\"\r\n            (load)=\"imgLoad(file)\"\r\n            (error)=\"imgError($event, file)\"\r\n            class=\"{{ file.state }}\"\r\n            [previewTpl]=\"previewTpl\"\r\n            [fallback]=\"imgFallback()\"\r\n          >\r\n          </x-image>\r\n          <ng-template #previewTpl let-image=\"$image\">\r\n            @if (file.state == 'uploading') {\r\n              <div class=\"x-upload-uploading\">\r\n                <x-progress [percent]=\"file.percent!\" info=\"false\"></x-progress>\r\n              </div>\r\n            }\r\n            <div class=\"x-image-overlay\">\r\n              @switch (file.state) {\r\n                @case ('ready') {\r\n                  <x-icon class=\"x-upload-state\" type=\"fto-clock\"></x-icon>\r\n                }\r\n                @case ('success') {\r\n                  <x-icon type=\"fto-eye\" (click)=\"image.onPreview()\"></x-icon>\r\n                }\r\n              }\r\n              @if (imgCut() && file.state === 'success') {\r\n                <x-icon type=\"fto-crop\" (click)=\"onImgCut(file, i)\"></x-icon>\r\n              }\r\n              @if (file.state !== 'uploading') {\r\n                <x-icon type=\"fto-trash-2\" (click)=\"remove(file, i)\"></x-icon>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n        }\r\n        <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      </x-image-group>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #uploadBtnTpl>\r\n  @if (showDrop()) {\r\n    <x-drag-overlay\r\n      class=\"x-upload-drag-overlay\"\r\n      (click)=\"uploadClick()\"\r\n      [icon]=\"dropIcon()\"\r\n      [title]=\"dropTitle()\"\r\n      [description]=\"dropDescription()\"\r\n    ></x-drag-overlay>\r\n  } @else {\r\n    <div class=\"x-upload-buttons\" [class.x-upload-buttons-template]=\"isTemplateText()\" (click)=\"uploadClick()\">\r\n      <ng-container *xOutlet=\"getText()\">\r\n        <x-button icon=\"fto-upload\" class=\"x-upload-text\" [disabled]=\"disabledComputed()\" type=\"primary\">{{\r\n          getText()\r\n        }}</x-button>\r\n      </ng-container>\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [".x-upload{margin:0;padding:0}.x-upload{color:var(--x-text);font-size:var(--x-font-size)}.x-upload-buttons{display:inline-flex}.x-upload-buttons>.x-button:not(:first-child){margin-left:.4rem}.x-upload-buttons-template{cursor:pointer}.x-upload-files{padding:0;margin:.4rem 0 0;list-style:none}.x-upload-files>li{margin:0;padding:0 .2rem;height:calc(var(--x-font-size) + .6rem);line-height:calc(var(--x-font-size) + .6rem);display:flex;align-items:center;overflow:hidden;cursor:pointer;border-radius:var(--x-border-radius)}.x-upload-files>li .x-icon{color:var(--x-text-400);font-size:1rem}.x-upload-files>li .x-icon.x-upload-state.success{color:var(--x-success)}.x-upload-files>li .x-icon.x-upload-state.error{color:var(--x-danger)}.x-upload-files>li a{flex:1;display:flex;align-items:center;height:calc(var(--x-font-size) + .6rem);line-height:calc(var(--x-font-size) + .6rem);color:inherit;text-decoration:none;overflow:hidden}.x-upload-files>li span.x-upload-filename{margin-left:.2rem;flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-upload-files>li span.x-upload-percent{color:var(--x-text-400)}.x-upload-files>li>.x-button{display:none;padding:0}.x-upload-files>li:not(:first-child){margin-top:.2rem}.x-upload-files>li.x-upload-disabled{cursor:default}.x-upload-files>li.x-upload-disabled>a{cursor:default}.x-upload-files>li:hover:not(.x-upload-disabled){color:var(--x-primary);background-color:var(--x-background)}.x-upload-files>li:hover>.x-button{display:inline-block}.x-upload-files>li:hover>.x-upload-state{display:none}.x-upload-img{display:flex;flex-wrap:wrap}.x-upload-img .x-upload-buttons-template{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;width:6.25rem;height:6.25rem;margin-right:.5rem;margin-bottom:.5rem;border:var(--x-border-width) dashed var(--x-border);background:var(--x-background);border-radius:var(--x-border-radius);transition:border-color var(--x-animation-duration-base)}.x-upload-img .x-upload-buttons-template:hover{border-color:var(--x-primary)}.x-upload-img .x-image{height:6.25rem;width:6.25rem;padding:.325rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);transition:border-color var(--x-animation-duration-base);margin-right:.5rem;margin-bottom:.5rem;position:relative;display:flex;align-items:center;justify-content:center}.x-upload-img .x-image-overlay{border-radius:var(--x-border-radius)}.x-upload-img .x-image-overlay x-icon{font-size:1rem;color:#fffc;padding:.25rem;transition:color var(--x-animation-duration-base)}.x-upload-img .x-image-overlay x-icon:hover{color:#fff}.x-upload-img x-image.error .x-image{border-color:var(--x-danger)}.x-upload-img x-image.error .x-image-error-icon{color:var(--x-danger)}.x-upload-uploading{position:absolute;margin-top:3rem;width:calc(100% - 1rem)}.x-upload-show-drop{position:relative;display:block;width:100%;height:100%}.x-upload-drag-overlay .x-drag-overlay{border:var(--x-border-width) dashed var(--x-border);cursor:pointer;transition:all var(--x-animation-duration-base)}.x-upload-drag-overlay .x-drag-overlay:hover,.x-upload-drag-over .x-drag-overlay{border-color:var(--x-primary)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XImageGroupComponent, selector: "x-image-group" }, { kind: "component", type: XImageComponent, selector: "x-image" }, { kind: "component", type: XProgressComponent, selector: "x-progress" }, { kind: "component", type: XDragOverlayComponent, selector: "x-drag-overlay", inputs: ["icon", "title", "description"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: XUploadComponent, isStandalone: true, selector: "x-upload", host: { properties: { "class.x-upload-show-drop": "this.getShowDrop" } }, providers: [XValueAccessor(XUploadComponent), XDragOverlayService], viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #upload class=\"x-upload x-upload-{{ type() }}\" [class.x-disabled]=\"disabledComputed()\">\r\n  <input\r\n    class=\"x-upload-input\"\r\n    type=\"file\"\r\n    #file\r\n    (change)=\"change($event)\"\r\n    [attr.accept]=\"acceptSignal()\"\r\n    [multiple]=\"multiple()\"\r\n    style=\"display: none\"\r\n  />\r\n\r\n  @switch (type()) {\r\n    @case ('list') {\r\n      <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      <ng-container *xOutlet=\"filesTpl(); context: { $files: files() }\">\r\n        @if (files() && files().length > 0) {\r\n          <ul class=\"x-upload-files\">\r\n            @for (file of files(); track file; let i = $index) {\r\n              <li [class.x-upload-disabled]=\"!download()\">\r\n                @if (download()) {\r\n                  <a [href]=\"file.url\" target=\"_blank\" [title]=\"file.name\">\r\n                    <x-icon type=\"fto-file-text\"></x-icon>\r\n                    <span class=\"x-upload-filename\">{{ file.name }}</span>\r\n                  </a>\r\n                } @else {\r\n                  <a>\r\n                    <x-icon type=\"fto-file-text\"></x-icon>\r\n                    <span class=\"x-upload-filename\">{{ file.name }}</span>\r\n                  </a>\r\n                }\r\n\r\n                @switch (file.state) {\r\n                  @case ('ready') {\r\n                    <x-icon class=\"x-upload-state\" type=\"fto-clock\"></x-icon>\r\n                  }\r\n                  @case ('uploading') {\r\n                    <span class=\"x-upload-percent\">{{ file.percent }}%</span>\r\n                  }\r\n                  @case ('success') {\r\n                    <x-icon class=\"x-upload-state success\" type=\"fto-check\"></x-icon>\r\n                  }\r\n                  @case ('error') {\r\n                    <x-icon class=\"x-upload-state error\" type=\"fto-info\"></x-icon>\r\n                  }\r\n                }\r\n                @if (file.state !== 'uploading') {\r\n                  <x-button icon=\"fto-x\" (click)=\"remove(file, i)\" closable onlyIcon flat size=\"mini\"></x-button>\r\n                }\r\n              </li>\r\n            }\r\n          </ul>\r\n        }\r\n      </ng-container>\r\n    }\r\n    @case ('img') {\r\n      <x-image-group>\r\n        @for (file of files(); track file; let i = $index) {\r\n          <x-image\r\n            [src]=\"file.url\"\r\n            (load)=\"imgLoad(file)\"\r\n            (error)=\"imgError($event, file)\"\r\n            class=\"{{ file.state }}\"\r\n            [previewTpl]=\"previewTpl\"\r\n            [fallback]=\"imgFallback()\"\r\n          >\r\n          </x-image>\r\n          <ng-template #previewTpl let-image=\"$image\">\r\n            @if (file.state == 'uploading') {\r\n              <div class=\"x-upload-uploading\">\r\n                <x-progress [percent]=\"file.percent!\" info=\"false\"></x-progress>\r\n              </div>\r\n            }\r\n            <div class=\"x-image-overlay\">\r\n              @switch (file.state) {\r\n                @case ('ready') {\r\n                  <x-icon class=\"x-upload-state\" type=\"fto-clock\"></x-icon>\r\n                }\r\n                @case ('success') {\r\n                  <x-icon type=\"fto-eye\" (click)=\"image.onPreview()\"></x-icon>\r\n                }\r\n              }\r\n              @if (imgCut() && file.state === 'success') {\r\n                <x-icon type=\"fto-crop\" (click)=\"onImgCut(file, i)\"></x-icon>\r\n              }\r\n              @if (file.state !== 'uploading') {\r\n                <x-icon type=\"fto-trash-2\" (click)=\"remove(file, i)\"></x-icon>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n        }\r\n        <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      </x-image-group>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #uploadBtnTpl>\r\n  @if (showDrop()) {\r\n    <x-drag-overlay\r\n      class=\"x-upload-drag-overlay\"\r\n      (click)=\"uploadClick()\"\r\n      [icon]=\"dropIcon()\"\r\n      [title]=\"dropTitle()\"\r\n      [description]=\"dropDescription()\"\r\n    ></x-drag-overlay>\r\n  } @else {\r\n    <div class=\"x-upload-buttons\" [class.x-upload-buttons-template]=\"isTemplateText()\" (click)=\"uploadClick()\">\r\n      <ng-container *xOutlet=\"getText()\">\r\n        <x-button icon=\"fto-upload\" class=\"x-upload-text\" [disabled]=\"disabledComputed()\" type=\"primary\">{{\r\n          getText()\r\n        }}</x-button>\r\n      </ng-container>\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [".x-upload{margin:0;padding:0}.x-upload{color:var(--x-text);font-size:var(--x-font-size)}.x-upload-buttons{display:inline-flex}.x-upload-buttons>.x-button:not(:first-child){margin-left:.4rem}.x-upload-buttons-template{cursor:pointer}.x-upload-files{padding:0;margin:.4rem 0 0;list-style:none}.x-upload-files>li{margin:0;padding:0 .2rem;height:calc(var(--x-font-size) + .6rem);line-height:calc(var(--x-font-size) + .6rem);display:flex;align-items:center;overflow:hidden;cursor:pointer;border-radius:var(--x-border-radius)}.x-upload-files>li .x-icon{color:var(--x-text-400);font-size:1rem}.x-upload-files>li .x-icon.x-upload-state.success{color:var(--x-success)}.x-upload-files>li .x-icon.x-upload-state.error{color:var(--x-danger)}.x-upload-files>li a{flex:1;display:flex;align-items:center;height:calc(var(--x-font-size) + .6rem);line-height:calc(var(--x-font-size) + .6rem);color:inherit;text-decoration:none;overflow:hidden}.x-upload-files>li span.x-upload-filename{margin-left:.2rem;flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-upload-files>li span.x-upload-percent{color:var(--x-text-400)}.x-upload-files>li>.x-button{display:none;padding:0}.x-upload-files>li:not(:first-child){margin-top:.2rem}.x-upload-files>li.x-upload-disabled{cursor:default}.x-upload-files>li.x-upload-disabled>a{cursor:default}.x-upload-files>li:hover:not(.x-upload-disabled){color:var(--x-primary);background-color:var(--x-background)}.x-upload-files>li:hover>.x-button{display:inline-block}.x-upload-files>li:hover>.x-upload-state{display:none}.x-upload-img{display:flex;flex-wrap:wrap}.x-upload-img .x-upload-buttons-template{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;width:6.25rem;height:6.25rem;margin-right:.5rem;margin-bottom:.5rem;border:var(--x-border-width) dashed var(--x-border);background:var(--x-background);border-radius:var(--x-border-radius);transition:border-color var(--x-animation-duration-base)}.x-upload-img .x-upload-buttons-template:hover{border-color:var(--x-primary)}.x-upload-img .x-image{height:6.25rem;width:6.25rem;padding:.325rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);transition:border-color var(--x-animation-duration-base);margin-right:.5rem;margin-bottom:.5rem;position:relative;display:flex;align-items:center;justify-content:center}.x-upload-img .x-image-overlay{border-radius:var(--x-border-radius)}.x-upload-img .x-image-overlay x-icon{font-size:1rem;color:#fffc;padding:.25rem;transition:color var(--x-animation-duration-base)}.x-upload-img .x-image-overlay x-icon:hover{color:#fff}.x-upload-img x-image.error .x-image{border-color:var(--x-danger)}.x-upload-img x-image.error .x-image-error-icon{color:var(--x-danger)}.x-upload-uploading{position:absolute;margin-top:3rem;width:calc(100% - 1rem)}.x-upload-show-drop{position:relative;display:block;width:100%;height:100%}.x-upload-drag-overlay .x-drag-overlay{border:var(--x-border-width) dashed var(--x-border);cursor:pointer;transition:all var(--x-animation-duration-base)}.x-upload-drag-overlay .x-drag-overlay:hover,.x-upload-drag-over .x-drag-overlay{border-color:var(--x-primary)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XImageGroupComponent, selector: "x-image-group" }, { kind: "component", type: XImageComponent, selector: "x-image" }, { kind: "component", type: XProgressComponent, selector: "x-progress" }, { kind: "component", type: XDragOverlayComponent, selector: "x-drag-overlay", inputs: ["icon", "title", "description"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XUploadPrefix}`, imports: [
                         NgTemplateOutlet,
@@ -728,11 +728,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImpor
             }], file: [{ type: i0.ViewChild, args: ['file', { isSignal: true }] }] } });
 
 class XUploadModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XUploadModule, imports: [XUploadComponent], exports: [XUploadComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XUploadModule, imports: [XUploadComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: XUploadModule, imports: [XUploadComponent], exports: [XUploadComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XUploadModule, imports: [XUploadComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XUploadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XUploadModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XUploadComponent],

package/fesm2022/ng-nest-ui-welcome.mjs

@@ -42,10 +42,10 @@ class XWelcomeProperty extends XPropertyFunction(X_WELCOME_CONFIG_NAME) {
          */
         this.style = input(...(ngDevMode ? [undefined, { debugName: "style" }] : []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XWelcomeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", type: XWelcomeProperty, isStandalone: true, selector: "x-welcome-property", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XWelcomeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: XWelcomeProperty, isStandalone: true, selector: "x-welcome-property", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XWelcomeProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XWelcomeProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XWelcomePrefix}-property`, template: '' }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }] } });
@@ -55,20 +55,20 @@ class XWelcomeComponent extends XWelcomeProperty {
         super(...arguments);
         this.isStringIcon = computed(() => XIsString(this.icon()), ...(ngDevMode ? [{ debugName: "isStringIcon" }] : []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XWelcomeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XWelcomeComponent, isStandalone: true, selector: "x-welcome", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"x-welcome\"\r\n  [class.x-welcome-outlined]=\"variant() === 'outlined'\"\r\n  [class.x-welcome-filled]=\"variant() === 'filled'\"\r\n  [class.x-welcome-borderless]=\"variant() === 'borderless'\"\r\n  [style]=\"style()\"\r\n>\r\n  <div class=\"x-welcome-icon\">\r\n    @if (isStringIcon()) {\r\n      <img alt=\"icon\" [src]=\"icon()\" />\r\n    } @else {\r\n      <ng-container *xOutlet=\"icon()!\"></ng-container>\r\n    }\r\n  </div>\r\n  <div class=\"x-welcome-wrapper\">\r\n    <span class=\"x-welcome-title\">\r\n      <ng-container *xOutlet=\"title()\">{{ title() }}</ng-container>\r\n    </span>\r\n    <p class=\"x-welcome-description\">\r\n      <ng-container *xOutlet=\"description()\">{{ description() }}</ng-container>\r\n    </p>\r\n  </div>\r\n</div>\r\n", styles: [".x-welcome{margin:0;padding:0}.x-welcome{width:100%;display:flex;gap:1rem;padding:1rem;border:var(--x-border-width) solid transparent;border-radius:var(--x-border-radius)}.x-welcome-icon img{max-width:6rem}.x-welcome-wrapper{flex:1;display:flex;flex-direction:column;gap:.5rem}.x-welcome-title{margin:0;font-size:var(--x-font-size-large)}.x-welcome-outlined{border-color:var(--x-border)}.x-welcome-filled{background-color:var(--x-background-a200);border-color:var(--x-background-a200)}.x-welcome-borderless{border-color:transparent}\n"], dependencies: [{ kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XWelcomeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: XWelcomeComponent, isStandalone: true, selector: "x-welcome", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"x-welcome\"\r\n  [class.x-welcome-outlined]=\"variant() === 'outlined'\"\r\n  [class.x-welcome-filled]=\"variant() === 'filled'\"\r\n  [class.x-welcome-borderless]=\"variant() === 'borderless'\"\r\n  [style]=\"style()\"\r\n>\r\n  <div class=\"x-welcome-icon\">\r\n    @if (isStringIcon()) {\r\n      <img alt=\"icon\" [src]=\"icon()\" />\r\n    } @else {\r\n      <ng-container *xOutlet=\"icon()!\"></ng-container>\r\n    }\r\n  </div>\r\n  <div class=\"x-welcome-wrapper\">\r\n    <span class=\"x-welcome-title\">\r\n      <ng-container *xOutlet=\"title()\">{{ title() }}</ng-container>\r\n    </span>\r\n    <p class=\"x-welcome-description\">\r\n      <ng-container *xOutlet=\"description()\">{{ description() }}</ng-container>\r\n    </p>\r\n  </div>\r\n</div>\r\n", styles: [".x-welcome{margin:0;padding:0}.x-welcome{width:100%;display:flex;gap:1rem;padding:1rem;border:var(--x-border-width) solid transparent;border-radius:var(--x-border-radius)}.x-welcome-icon img{max-width:6rem}.x-welcome-wrapper{flex:1;display:flex;flex-direction:column;gap:.5rem}.x-welcome-title{margin:0;font-size:var(--x-font-size-large)}.x-welcome-outlined{border-color:var(--x-border)}.x-welcome-filled{background-color:var(--x-background-a200);border-color:var(--x-background-a200)}.x-welcome-borderless{border-color:transparent}\n"], dependencies: [{ kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XWelcomeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XWelcomeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'x-welcome', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [XOutletDirective], template: "<div\r\n  class=\"x-welcome\"\r\n  [class.x-welcome-outlined]=\"variant() === 'outlined'\"\r\n  [class.x-welcome-filled]=\"variant() === 'filled'\"\r\n  [class.x-welcome-borderless]=\"variant() === 'borderless'\"\r\n  [style]=\"style()\"\r\n>\r\n  <div class=\"x-welcome-icon\">\r\n    @if (isStringIcon()) {\r\n      <img alt=\"icon\" [src]=\"icon()\" />\r\n    } @else {\r\n      <ng-container *xOutlet=\"icon()!\"></ng-container>\r\n    }\r\n  </div>\r\n  <div class=\"x-welcome-wrapper\">\r\n    <span class=\"x-welcome-title\">\r\n      <ng-container *xOutlet=\"title()\">{{ title() }}</ng-container>\r\n    </span>\r\n    <p class=\"x-welcome-description\">\r\n      <ng-container *xOutlet=\"description()\">{{ description() }}</ng-container>\r\n    </p>\r\n  </div>\r\n</div>\r\n", styles: [".x-welcome{margin:0;padding:0}.x-welcome{width:100%;display:flex;gap:1rem;padding:1rem;border:var(--x-border-width) solid transparent;border-radius:var(--x-border-radius)}.x-welcome-icon img{max-width:6rem}.x-welcome-wrapper{flex:1;display:flex;flex-direction:column;gap:.5rem}.x-welcome-title{margin:0;font-size:var(--x-font-size-large)}.x-welcome-outlined{border-color:var(--x-border)}.x-welcome-filled{background-color:var(--x-background-a200);border-color:var(--x-background-a200)}.x-welcome-borderless{border-color:transparent}\n"] }]
         }] });
 
 class XWelcomeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XWelcomeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XWelcomeModule, imports: [XWelcomeComponent], exports: [XWelcomeComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XWelcomeModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XWelcomeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: XWelcomeModule, imports: [XWelcomeComponent], exports: [XWelcomeComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XWelcomeModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XWelcomeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: XWelcomeModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XWelcomeComponent],