@ng-nest/ui 16.0.4 → 16.0.5

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

@@ -127,8 +127,8 @@ class XTreeProperty extends XProperty {
          */
         this.nodeDragMoved = new EventEmitter();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: XTreeProperty, selector: "x-tree-property", inputs: { data: "data", checkbox: "checkbox", lazy: "lazy", activatedId: "activatedId", expanded: "expanded", checked: "checked", expandedAll: "expandedAll", expandedLevel: "expandedLevel", nodeOpen: "nodeOpen", spacing: "spacing", labelTpl: "labelTpl", nodeHeight: "nodeHeight", allowManyActivated: "allowManyActivated", drag: "drag", manual: "manual", levelCheck: "levelCheck", nodeNowrap: "nodeNowrap", nodeAlignItems: "nodeAlignItems", actions: "actions", scrollElement: "scrollElement", virtualScroll: "virtualScroll", virtualScrollHeight: "virtualScrollHeight", heightAdaption: "heightAdaption", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", multiple: "multiple", objectArray: "objectArray", keywordText: "keywordText", caseSensitive: "caseSensitive", onlyLeaf: "onlyLeaf", expandedIcon: "expandedIcon", showLine: "showLine" }, outputs: { activatedChange: "activatedChange", checkboxChange: "checkboxChange", manualChange: "manualChange", nodeClick: "nodeClick", activatedIdChange: "activatedIdChange", nodeDragStarted: "nodeDragStarted", nodeDragEnded: "nodeDragEnded", nodeDragMoved: "nodeDragMoved" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XTreeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: XTreeProperty, selector: "x-tree-property", inputs: { data: "data", checkbox: "checkbox", lazy: "lazy", activatedId: "activatedId", expanded: "expanded", checked: "checked", expandedAll: "expandedAll", expandedLevel: "expandedLevel", nodeOpen: "nodeOpen", spacing: "spacing", labelTpl: "labelTpl", nodeHeight: "nodeHeight", allowManyActivated: "allowManyActivated", drag: "drag", manual: "manual", levelCheck: "levelCheck", nodeNowrap: "nodeNowrap", nodeAlignItems: "nodeAlignItems", actions: "actions", scrollElement: "scrollElement", virtualScroll: "virtualScroll", virtualScrollHeight: "virtualScrollHeight", heightAdaption: "heightAdaption", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", multiple: "multiple", objectArray: "objectArray", keywordText: "keywordText", caseSensitive: "caseSensitive", onlyLeaf: "onlyLeaf", expandedIcon: "expandedIcon", showLine: "showLine" }, outputs: { activatedChange: "activatedChange", checkboxChange: "checkboxChange", manualChange: "manualChange", nodeClick: "nodeClick", activatedIdChange: "activatedIdChange", nodeDragStarted: "nodeDragStarted", nodeDragEnded: "nodeDragEnded", nodeDragMoved: "nodeDragMoved" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 __decorate([
     XDataConvert()
@@ -204,7 +204,7 @@ __decorate([
     XInputBoolean(),
     XWithConfig(X_CONFIG_NAME, false)
 ], XTreeProperty.prototype, "showLine", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XTreeProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XTreePrefix}-property`, template: '' }]
         }], propDecorators: { data: [{
@@ -318,8 +318,8 @@ class XTreeNodeProperty extends XProperty {
          */
         this.nodeAlignItems = 'center';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeNodeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: XTreeNodeProperty, selector: "x-tree-node-property", inputs: { node: "node", level: "level", lazy: "lazy", nodeHeight: "nodeHeight", nodeNowrap: "nodeNowrap", nodeAlignItems: "nodeAlignItems", lazyData: "lazyData", virtualScroll: "virtualScroll" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XTreeNodeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: XTreeNodeProperty, selector: "x-tree-node-property", inputs: { node: "node", level: "level", lazy: "lazy", nodeHeight: "nodeHeight", nodeNowrap: "nodeNowrap", nodeAlignItems: "nodeAlignItems", lazyData: "lazyData", virtualScroll: "virtualScroll" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 __decorate([
     XInputBoolean()
@@ -333,7 +333,7 @@ __decorate([
 __decorate([
     XInputBoolean()
 ], XTreeNodeProperty.prototype, "virtualScroll", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeNodeProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XTreeNodeProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XTreeNodePrefix}-property`, template: '' }]
         }], propDecorators: { node: [{
@@ -421,10 +421,10 @@ class XTreeService {
             data.splice(pos === -1 ? index : index + 1, 0, from);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XTreeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XTreeService, decorators: [{
             type: Injectable
         }] });
 
@@ -666,10 +666,10 @@ class XTreeNodeComponent extends XTreeNodeProperty {
     trackByAction(_index, item) {
         return item.id;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeNodeComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }, { token: i0.NgZone }, { token: XTreeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: XTreeNodeComponent, selector: "x-tree-node, [x-tree-node]", inputs: { tree: "tree" }, outputs: { nodeMouseenter: "nodeMouseenter" }, host: { listeners: { "mouseenter": "onMouseenter($event)", "mouseleave": "onMouseleave()" }, properties: { "class.x-tree-node": "this.rootClass" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"x-tree-node-content\"\r\n  [class.x-activated]=\"getActivated\"\r\n  [class.x-disabled]=\"node.disabled\"\r\n  [class.x-tree-node-sub]=\"!node.leaf\"\r\n  [class.x-tree-node-last]=\"isChildrenLast\"\r\n  [style.padding-left.rem]=\"paddingLeft\"\r\n  [style.height.rem]=\"node.height ? node.height : nodeHeight ? nodeHeight : ''\"\r\n  [style.align-items]=\"node.alignItems ? node.alignItems : nodeAlignItems\"\r\n  (click)=\"!node.disabled && onActivate($event, node)\"\r\n>\r\n  <div class=\"x-tree-node-line\" *ngIf=\"tree.showLine && numLevel > 0\" [style.width.rem]=\"paddingLeft\">\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.rem]=\"getVerticalLeft(i)\"\r\n      *ngFor=\"let i of verticalLevel\"\r\n    ></div>\r\n    <div\r\n      class=\"x-tree-node-line-horizontal\"\r\n      [style.width.rem]=\"verticalWidth\"\r\n      [style.left.rem]=\"getVerticalLeft(verticalLevel.length)\"\r\n    ></div>\r\n  </div>\r\n  <div class=\"x-tree-node-drag-indicator\" *ngIf=\"showDragIndicator\" [style.width]=\"indicatorWidth\" [ngStyle]=\"indicatorStyle\"></div>\r\n  <ng-container *ngIf=\"!node.loading\">\r\n    <div\r\n      class=\"x-tree-node-right\"\r\n      [class.is-leaf]=\"node.leaf\"\r\n      [class.is-open]=\"node.open\"\r\n      [class.is-template]=\"tree.expandedIcon\"\r\n      [style.width.rem]=\"verticalWidth * 2\"\r\n      (click)=\"!tree.nodeOpen && tree.onToggle($event, node)\"\r\n    >\r\n      <ng-container *ngIf=\"tree.expandedIcon; else defaultIconTpl\">\r\n        <ng-container *xOutlet=\"tree.expandedIcon; context: { $node: node }\"></ng-container>\r\n      </ng-container>\r\n      <ng-template #defaultIconTpl>\r\n        <x-icon type=\"fto-chevron-right\"></x-icon>\r\n      </ng-template>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <x-icon class=\"x-tree-node-loading\" *ngIf=\"node.loading\" type=\"fto-loader\" [spin]=\"node.loading\"></x-icon>\r\n  <x-checkbox\r\n    *ngIf=\"tree.checkbox\"\r\n    [data]=\"[{ label: '', id: node.id }]\"\r\n    [(ngModel)]=\"node.checked\"\r\n    (ngModelChange)=\"onCheckboxChange()\"\r\n    [indeterminate]=\"node.indeterminate\"\r\n    [disabled]=\"node.disabled!\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  ></x-checkbox>\r\n  <span\r\n    class=\"x-tree-node-label\"\r\n    [class.nowrap]=\"node.nowrap === false || node.nowrap === true ? node.nowrap : nodeNowrap\"\r\n    [title]=\"node.label\"\r\n    x-keyword\r\n    [text]=\"tree.keywordText\"\r\n    [caseSensitive]=\"tree.caseSensitive\"\r\n    *ngIf=\"!tree.labelTpl; else labelTpl\"\r\n    >{{ node.label }}</span\r\n  >\r\n  <ng-template #labelTpl>\r\n    <ng-container *xOutlet=\"tree.labelTpl; context: { $node: node }\"></ng-container>\r\n  </ng-template>\r\n  <span class=\"x-tree-node-operations\">\r\n    <x-link\r\n      *ngFor=\"let action of tree.actions; trackBy: trackByAction\"\r\n      [icon]=\"action.icon\"\r\n      [title]=\"action.label\"\r\n      (click)=\"onAction($event, action, node)\"\r\n    ></x-link>\r\n  </span>\r\n  <x-icon class=\"x-tree-node-checked\" type=\"fto-check\" *ngIf=\"tree.multiple && getActivated\"></x-icon>\r\n</div>\r\n", styles: ["x-tree-node{display:block}.x-tree-node{display:block;margin:0;padding:0}.x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);cursor:pointer}.x-tree-node-content x-icon{padding:.25rem;font-size:1rem;transition:var(--x-animation-duration-base)}.x-tree-node-content x-icon:hover{color:var(--x-text-200)}.x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content.x-disabled{color:var(--x-text-400);background-color:var(--x-background-a200)}.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-background-a400);color:var(--x-primary)}.x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}.x-tree-node-right,.x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}.x-tree-node-right{display:flex;align-items:center;justify-content:center}.x-tree-node-right.is-leaf{visibility:hidden}.x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}.x-tree-node-line{position:absolute;left:0;height:100%;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);cursor:pointer}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon{padding:.25rem;font-size:1rem;transition:var(--x-animation-duration-base)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon:hover{color:var(--x-text-200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}body>x-tree-node.cdk-drag-preview .x-tree-node-content.x-disabled{color:var(--x-text-400);background-color:var(--x-background-a200)}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-background-a400);color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-right,body>x-tree-node.cdk-drag-preview .x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-right{display:flex;align-items:center;justify-content:center}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-leaf{visibility:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-line{position:absolute;left:0;height:100%;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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.XIconComponent, selector: "x-icon" }, { kind: "component", type: i6.XCheckboxComponent, selector: "x-checkbox" }, { kind: "directive", type: i7.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: i8.XLinkComponent, selector: "x-link" }, { kind: "directive", type: i9.XKeywordDirective, selector: "[x-keyword]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XTreeNodeComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }, { token: i0.NgZone }, { token: XTreeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: XTreeNodeComponent, selector: "x-tree-node, [x-tree-node]", inputs: { tree: "tree" }, outputs: { nodeMouseenter: "nodeMouseenter" }, host: { listeners: { "mouseenter": "onMouseenter($event)", "mouseleave": "onMouseleave()" }, properties: { "class.x-tree-node": "this.rootClass" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"x-tree-node-content\"\r\n  [class.x-activated]=\"getActivated\"\r\n  [class.x-disabled]=\"node.disabled\"\r\n  [class.x-tree-node-sub]=\"!node.leaf\"\r\n  [class.x-tree-node-last]=\"isChildrenLast\"\r\n  [style.padding-left.rem]=\"paddingLeft\"\r\n  [style.height.rem]=\"node.height ? node.height : nodeHeight ? nodeHeight : ''\"\r\n  [style.align-items]=\"node.alignItems ? node.alignItems : nodeAlignItems\"\r\n  (click)=\"!node.disabled && onActivate($event, node)\"\r\n>\r\n  <div class=\"x-tree-node-line\" *ngIf=\"tree.showLine && numLevel > 0\" [style.width.rem]=\"paddingLeft\">\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.rem]=\"getVerticalLeft(i)\"\r\n      *ngFor=\"let i of verticalLevel\"\r\n    ></div>\r\n    <div\r\n      class=\"x-tree-node-line-horizontal\"\r\n      [style.width.rem]=\"verticalWidth\"\r\n      [style.left.rem]=\"getVerticalLeft(verticalLevel.length)\"\r\n    ></div>\r\n  </div>\r\n  <div class=\"x-tree-node-drag-indicator\" *ngIf=\"showDragIndicator\" [style.width]=\"indicatorWidth\" [ngStyle]=\"indicatorStyle\"></div>\r\n  <ng-container *ngIf=\"!node.loading\">\r\n    <div\r\n      class=\"x-tree-node-right\"\r\n      [class.is-leaf]=\"node.leaf\"\r\n      [class.is-open]=\"node.open\"\r\n      [class.is-template]=\"tree.expandedIcon\"\r\n      [style.width.rem]=\"verticalWidth * 2\"\r\n      (click)=\"!tree.nodeOpen && tree.onToggle($event, node)\"\r\n    >\r\n      <ng-container *ngIf=\"tree.expandedIcon; else defaultIconTpl\">\r\n        <ng-container *xOutlet=\"tree.expandedIcon; context: { $node: node }\"></ng-container>\r\n      </ng-container>\r\n      <ng-template #defaultIconTpl>\r\n        <x-icon type=\"fto-chevron-right\"></x-icon>\r\n      </ng-template>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <x-icon class=\"x-tree-node-loading\" *ngIf=\"node.loading\" type=\"fto-loader\" [spin]=\"node.loading\"></x-icon>\r\n  <x-checkbox\r\n    *ngIf=\"tree.checkbox\"\r\n    [data]=\"[{ label: '', id: node.id }]\"\r\n    [(ngModel)]=\"node.checked\"\r\n    (ngModelChange)=\"onCheckboxChange()\"\r\n    [indeterminate]=\"node.indeterminate\"\r\n    [disabled]=\"node.disabled!\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  ></x-checkbox>\r\n  <span\r\n    class=\"x-tree-node-label\"\r\n    [class.nowrap]=\"node.nowrap === false || node.nowrap === true ? node.nowrap : nodeNowrap\"\r\n    [title]=\"node.label\"\r\n    x-keyword\r\n    [text]=\"tree.keywordText\"\r\n    [caseSensitive]=\"tree.caseSensitive\"\r\n    *ngIf=\"!tree.labelTpl; else labelTpl\"\r\n    >{{ node.label }}</span\r\n  >\r\n  <ng-template #labelTpl>\r\n    <ng-container *xOutlet=\"tree.labelTpl; context: { $node: node }\"></ng-container>\r\n  </ng-template>\r\n  <span class=\"x-tree-node-operations\">\r\n    <x-link\r\n      *ngFor=\"let action of tree.actions; trackBy: trackByAction\"\r\n      [icon]=\"action.icon\"\r\n      [title]=\"action.label\"\r\n      (click)=\"onAction($event, action, node)\"\r\n    ></x-link>\r\n  </span>\r\n  <x-icon class=\"x-tree-node-checked\" type=\"fto-check\" *ngIf=\"tree.multiple && getActivated\"></x-icon>\r\n</div>\r\n", styles: ["x-tree-node{display:block}.x-tree-node{display:block;margin:0;padding:0}.x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);cursor:pointer}.x-tree-node-content x-icon{padding:.25rem;font-size:1rem;transition:var(--x-animation-duration-base)}.x-tree-node-content x-icon:hover{color:var(--x-text-200)}.x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content.x-disabled{color:var(--x-text-400);background-color:var(--x-background-a200)}.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-background-a400);color:var(--x-primary)}.x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}.x-tree-node-right,.x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}.x-tree-node-right{display:flex;align-items:center;justify-content:center}.x-tree-node-right.is-leaf{visibility:hidden}.x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}.x-tree-node-line{position:absolute;left:0;height:100%;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);cursor:pointer}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon{padding:.25rem;font-size:1rem;transition:var(--x-animation-duration-base)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon:hover{color:var(--x-text-200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}body>x-tree-node.cdk-drag-preview .x-tree-node-content.x-disabled{color:var(--x-text-400);background-color:var(--x-background-a200)}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-background-a400);color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-right,body>x-tree-node.cdk-drag-preview .x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-right{display:flex;align-items:center;justify-content:center}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-leaf{visibility:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-line{position:absolute;left:0;height:100%;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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.XIconComponent, selector: "x-icon" }, { kind: "component", type: i6.XCheckboxComponent, selector: "x-checkbox" }, { kind: "directive", type: i7.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: i8.XLinkComponent, selector: "x-link" }, { kind: "directive", type: i9.XKeywordDirective, selector: "[x-keyword]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XTreeNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XTreeNodePrefix}, [${XTreeNodePrefix}]`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"x-tree-node-content\"\r\n  [class.x-activated]=\"getActivated\"\r\n  [class.x-disabled]=\"node.disabled\"\r\n  [class.x-tree-node-sub]=\"!node.leaf\"\r\n  [class.x-tree-node-last]=\"isChildrenLast\"\r\n  [style.padding-left.rem]=\"paddingLeft\"\r\n  [style.height.rem]=\"node.height ? node.height : nodeHeight ? nodeHeight : ''\"\r\n  [style.align-items]=\"node.alignItems ? node.alignItems : nodeAlignItems\"\r\n  (click)=\"!node.disabled && onActivate($event, node)\"\r\n>\r\n  <div class=\"x-tree-node-line\" *ngIf=\"tree.showLine && numLevel > 0\" [style.width.rem]=\"paddingLeft\">\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.rem]=\"getVerticalLeft(i)\"\r\n      *ngFor=\"let i of verticalLevel\"\r\n    ></div>\r\n    <div\r\n      class=\"x-tree-node-line-horizontal\"\r\n      [style.width.rem]=\"verticalWidth\"\r\n      [style.left.rem]=\"getVerticalLeft(verticalLevel.length)\"\r\n    ></div>\r\n  </div>\r\n  <div class=\"x-tree-node-drag-indicator\" *ngIf=\"showDragIndicator\" [style.width]=\"indicatorWidth\" [ngStyle]=\"indicatorStyle\"></div>\r\n  <ng-container *ngIf=\"!node.loading\">\r\n    <div\r\n      class=\"x-tree-node-right\"\r\n      [class.is-leaf]=\"node.leaf\"\r\n      [class.is-open]=\"node.open\"\r\n      [class.is-template]=\"tree.expandedIcon\"\r\n      [style.width.rem]=\"verticalWidth * 2\"\r\n      (click)=\"!tree.nodeOpen && tree.onToggle($event, node)\"\r\n    >\r\n      <ng-container *ngIf=\"tree.expandedIcon; else defaultIconTpl\">\r\n        <ng-container *xOutlet=\"tree.expandedIcon; context: { $node: node }\"></ng-container>\r\n      </ng-container>\r\n      <ng-template #defaultIconTpl>\r\n        <x-icon type=\"fto-chevron-right\"></x-icon>\r\n      </ng-template>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <x-icon class=\"x-tree-node-loading\" *ngIf=\"node.loading\" type=\"fto-loader\" [spin]=\"node.loading\"></x-icon>\r\n  <x-checkbox\r\n    *ngIf=\"tree.checkbox\"\r\n    [data]=\"[{ label: '', id: node.id }]\"\r\n    [(ngModel)]=\"node.checked\"\r\n    (ngModelChange)=\"onCheckboxChange()\"\r\n    [indeterminate]=\"node.indeterminate\"\r\n    [disabled]=\"node.disabled!\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  ></x-checkbox>\r\n  <span\r\n    class=\"x-tree-node-label\"\r\n    [class.nowrap]=\"node.nowrap === false || node.nowrap === true ? node.nowrap : nodeNowrap\"\r\n    [title]=\"node.label\"\r\n    x-keyword\r\n    [text]=\"tree.keywordText\"\r\n    [caseSensitive]=\"tree.caseSensitive\"\r\n    *ngIf=\"!tree.labelTpl; else labelTpl\"\r\n    >{{ node.label }}</span\r\n  >\r\n  <ng-template #labelTpl>\r\n    <ng-container *xOutlet=\"tree.labelTpl; context: { $node: node }\"></ng-container>\r\n  </ng-template>\r\n  <span class=\"x-tree-node-operations\">\r\n    <x-link\r\n      *ngFor=\"let action of tree.actions; trackBy: trackByAction\"\r\n      [icon]=\"action.icon\"\r\n      [title]=\"action.label\"\r\n      (click)=\"onAction($event, action, node)\"\r\n    ></x-link>\r\n  </span>\r\n  <x-icon class=\"x-tree-node-checked\" type=\"fto-check\" *ngIf=\"tree.multiple && getActivated\"></x-icon>\r\n</div>\r\n", styles: ["x-tree-node{display:block}.x-tree-node{display:block;margin:0;padding:0}.x-tree-node-content{position:relative;display:flex;border-radius:var(--x-border-radius);cursor:pointer}.x-tree-node-content x-icon{padding:.25rem;font-size:1rem;transition:var(--x-animation-duration-base)}.x-tree-node-content x-icon:hover{color:var(--x-text-200)}.x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}.x-tree-node-content.x-disabled{color:var(--x-text-400);background-color:var(--x-background-a200)}.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-background-a400);color:var(--x-primary)}.x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}.x-tree-node-right,.x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}.x-tree-node-right{display:flex;align-items:center;justify-content:center}.x-tree-node-right.is-leaf{visibility:hidden}.x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}.x-tree-node-line{position:absolute;left:0;height:100%;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);cursor:pointer}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon{padding:.25rem;font-size:1rem;transition:var(--x-animation-duration-base)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-icon:hover{color:var(--x-text-200)}body>x-tree-node.cdk-drag-preview .x-tree-node-content x-checkbox{margin-right:.325rem;padding:.25rem 0}body>x-tree-node.cdk-drag-preview .x-tree-node-content.x-disabled{color:var(--x-text-400);background-color:var(--x-background-a200)}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-background-a400);color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-content:not(.x-disabled).x-tree-node-checked{color:var(--x-primary)}body>x-tree-node.cdk-drag-preview .x-tree-node-right,body>x-tree-node.cdk-drag-preview .x-tree-node-loading{color:var(--x-text-300);margin-right:.125rem}body>x-tree-node.cdk-drag-preview .x-tree-node-right{display:flex;align-items:center;justify-content:center}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-leaf{visibility:hidden}body>x-tree-node.cdk-drag-preview .x-tree-node-right.is-open:not(.is-template) x-icon{transform:rotate(90deg)}body>x-tree-node.cdk-drag-preview .x-tree-node-line{position:absolute;left:0;height:100%;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"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }, { type: i0.NgZone }, { type: XTreeService }]; }, propDecorators: { tree: [{
@@ -1207,10 +1207,10 @@ class XTreeComponent extends XTreeProperty {
     trackByItem(_index, item) {
         return `${item.id}-${item.level}`;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }, { token: i0.NgZone }, { token: XTreeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: XTreeComponent, selector: "x-tree", providers: [XTreeService], viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, static: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true }, { propertyName: "dropList", first: true, predicate: ["dropList"], descendants: true }, { propertyName: "_nodeComponents", predicate: XTreeNodeComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #tree class=\"x-tree\" [class.x-tree-only-leaf]=\"onlyLeaf\">\r\n  <ng-container *ngIf=\"!virtualScroll; else virtualScrollTpl\">\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        *ngFor=\"let node of nodes; 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        [lazy]=\"lazy\"\r\n        [lazyData]=\"data\"\r\n        [nodeHeight]=\"nodeHeight\"\r\n        [nodeNowrap]=\"nodeNowrap\"\r\n        [nodeAlignItems]=\"nodeAlignItems\"\r\n        [tree]=\"this\"\r\n      ></x-tree-node>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #virtualScrollTpl>\r\n  <cdk-virtual-scroll-viewport\r\n    #virtualBody\r\n    [itemSize]=\"itemSize\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [style.height.px]=\"virtualScrollHeight\"\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        [lazy]=\"lazy\"\r\n        [lazyData]=\"data\"\r\n        [nodeHeight]=\"nodeHeight\"\r\n        [nodeNowrap]=\"nodeNowrap\"\r\n        [nodeAlignItems]=\"nodeAlignItems\"\r\n        [tree]=\"this\"\r\n      ></x-tree-node>\r\n    </div>\r\n  </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n<x-icon *ngIf=\"lazy\" [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\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: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i5.XIconComponent, selector: "x-icon" }, { kind: "directive", type: i6$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: XTreeNodeComponent, selector: "x-tree-node, [x-tree-node]", inputs: ["tree"], outputs: ["nodeMouseenter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XTreeComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }, { token: i0.NgZone }, { token: XTreeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: XTreeComponent, selector: "x-tree", providers: [XTreeService], viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, static: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true }, { propertyName: "dropList", first: true, predicate: ["dropList"], descendants: true }, { propertyName: "_nodeComponents", predicate: XTreeNodeComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #tree class=\"x-tree\" [class.x-tree-only-leaf]=\"onlyLeaf\">\r\n  <ng-container *ngIf=\"!virtualScroll; else virtualScrollTpl\">\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        *ngFor=\"let node of nodes; 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        [lazy]=\"lazy\"\r\n        [lazyData]=\"data\"\r\n        [nodeHeight]=\"nodeHeight\"\r\n        [nodeNowrap]=\"nodeNowrap\"\r\n        [nodeAlignItems]=\"nodeAlignItems\"\r\n        [tree]=\"this\"\r\n      ></x-tree-node>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #virtualScrollTpl>\r\n  <cdk-virtual-scroll-viewport\r\n    #virtualBody\r\n    [itemSize]=\"itemSize\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [style.height.px]=\"virtualScrollHeight\"\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        [lazy]=\"lazy\"\r\n        [lazyData]=\"data\"\r\n        [nodeHeight]=\"nodeHeight\"\r\n        [nodeNowrap]=\"nodeNowrap\"\r\n        [nodeAlignItems]=\"nodeAlignItems\"\r\n        [tree]=\"this\"\r\n      ></x-tree-node>\r\n    </div>\r\n  </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n<x-icon *ngIf=\"lazy\" [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\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: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i5.XIconComponent, selector: "x-icon" }, { kind: "directive", type: i6$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: XTreeNodeComponent, selector: "x-tree-node, [x-tree-node]", inputs: ["tree"], outputs: ["nodeMouseenter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XTreePrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XTreeService], template: "<div #tree class=\"x-tree\" [class.x-tree-only-leaf]=\"onlyLeaf\">\r\n  <ng-container *ngIf=\"!virtualScroll; else virtualScrollTpl\">\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        *ngFor=\"let node of nodes; 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        [lazy]=\"lazy\"\r\n        [lazyData]=\"data\"\r\n        [nodeHeight]=\"nodeHeight\"\r\n        [nodeNowrap]=\"nodeNowrap\"\r\n        [nodeAlignItems]=\"nodeAlignItems\"\r\n        [tree]=\"this\"\r\n      ></x-tree-node>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #virtualScrollTpl>\r\n  <cdk-virtual-scroll-viewport\r\n    #virtualBody\r\n    [itemSize]=\"itemSize\"\r\n    [minBufferPx]=\"minBufferPx\"\r\n    [maxBufferPx]=\"maxBufferPx\"\r\n    [style.height.px]=\"virtualScrollHeight\"\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        [lazy]=\"lazy\"\r\n        [lazyData]=\"data\"\r\n        [nodeHeight]=\"nodeHeight\"\r\n        [nodeNowrap]=\"nodeNowrap\"\r\n        [nodeAlignItems]=\"nodeAlignItems\"\r\n        [tree]=\"this\"\r\n      ></x-tree-node>\r\n    </div>\r\n  </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n\r\n<!-- \u63D0\u524D\u52A0\u8F7Dloading\u7684\u56FE\u6807-->\r\n<x-icon *ngIf=\"lazy\" [style.display]=\"'none'\" type=\"fto-loader\"></x-icon>\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: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }, { type: i0.NgZone }, { type: XTreeService }]; }, propDecorators: { tree: [{
@@ -1228,8 +1228,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             }] } });
 
 class XTreeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: XTreeModule, declarations: [XTreeComponent, XTreeNodeComponent, XTreeProperty, XTreeNodeProperty], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.5", ngImport: i0, type: XTreeModule, declarations: [XTreeComponent, XTreeNodeComponent, XTreeProperty, XTreeNodeProperty], imports: [CommonModule,
             FormsModule,
             DragDropModule,
             XIconModule,
@@ -1238,7 +1238,7 @@ class XTreeModule {
             XLinkModule,
             ScrollingModule,
             XKeywordModule], exports: [XTreeComponent, XTreeNodeComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XTreeModule, imports: [CommonModule,
             FormsModule,
             DragDropModule,
             XIconModule,
@@ -1248,7 +1248,7 @@ class XTreeModule {
             ScrollingModule,
             XKeywordModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTreeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XTreeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [XTreeComponent, XTreeNodeComponent, XTreeProperty, XTreeNodeProperty],

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

@@ -21,10 +21,10 @@ class XTypographyProperty extends XProperty {
          */
         this.font = 'Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTypographyProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: XTypographyProperty, selector: "x-typography-property", inputs: { font: "font", text: "text" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XTypographyProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: XTypographyProperty, selector: "x-typography-property", inputs: { font: "font", text: "text" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTypographyProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XTypographyProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XTypographyPrefix}-property`, template: '' }]
         }], propDecorators: { font: [{
@@ -46,20 +46,20 @@ class XTypographyComponent extends XTypographyProperty {
         if (this.text && this.text.length > 0)
             this.firstText = this.text.slice(0, 1);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTypographyComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: XTypographyComponent, 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;color:var(--x-text)}.x-typography h4,.x-typography h1,.x-typography p{margin:0;font-size:.875rem;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: "16.0.5", ngImport: i0, type: XTypographyComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: XTypographyComponent, 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;color:var(--x-text)}.x-typography h4,.x-typography h1,.x-typography p{margin:0;font-size:.875rem;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: "16.0.0", ngImport: i0, type: XTypographyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", 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;color:var(--x-text)}.x-typography h4,.x-typography h1,.x-typography p{margin:0;font-size:.875rem;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"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; } });
 
 class XTypographyModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTypographyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: XTypographyModule, declarations: [XTypographyComponent, XTypographyProperty], imports: [CommonModule], exports: [XTypographyComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTypographyModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XTypographyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.5", ngImport: i0, type: XTypographyModule, declarations: [XTypographyComponent, XTypographyProperty], imports: [CommonModule], exports: [XTypographyComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XTypographyModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XTypographyModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XTypographyModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [XTypographyComponent, XTypographyProperty],

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

@@ -71,8 +71,8 @@ class XUploadProperty extends XControlValueAccessor {
          */
         this.uploadError = new EventEmitter();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XUploadProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: XUploadProperty, selector: "x-upload-property", inputs: { text: "text", action: "action", accept: "accept", type: "type", imgFallback: "imgFallback", imgCut: "imgCut", multiple: "multiple", download: "download", multipleModel: "multipleModel", filesTpl: "filesTpl", maxLimit: "maxLimit", headers: "headers" }, 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: "16.0.5", ngImport: i0, type: XUploadProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: XUploadProperty, selector: "x-upload-property", inputs: { text: "text", action: "action", accept: "accept", type: "type", imgFallback: "imgFallback", imgCut: "imgCut", multiple: "multiple", download: "download", multipleModel: "multipleModel", filesTpl: "filesTpl", maxLimit: "maxLimit", headers: "headers" }, outputs: { removeClick: "removeClick", uploadReady: "uploadReady", uploading: "uploading", uploadSuccess: "uploadSuccess", uploadError: "uploadError" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 __decorate([
     XInputBoolean()
@@ -90,7 +90,7 @@ __decorate([
 __decorate([
     XInputNumber()
 ], XUploadProperty.prototype, "maxLimit", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XUploadProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XUploadProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XUploadPrefix}-property`, template: '' }]
         }], propDecorators: { text: [{
@@ -307,10 +307,10 @@ class XUploadPortalComponent {
             });
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XUploadPortalComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: XUploadPortalComponent, selector: "x-upload-portal", viewQueries: [{ propertyName: "imgRef", first: true, predicate: ["imgRef"], descendants: true }, { propertyName: "imgClipRef", first: true, predicate: ["imgClipRef"], descendants: true }, { propertyName: "boundaryRef", first: true, predicate: ["boundaryRef"], descendants: true }, { propertyName: "cutRef", first: true, predicate: ["cutRef"], descendants: 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>{{ file?.name }}</span>\r\n    </div>\r\n    <x-icon class=\"x-upload-portal-close\" type=\"fto-x\" (click)=\"closePortal()\"></x-icon>\r\n  </div>\r\n  <div class=\"x-upload-portal-img\">\r\n    <img #imgRef class=\"x-upload-portal-full-img\" [src]=\"file?.url\" />\r\n    <div #boundaryRef class=\"x-upload-portal-boundary\">\r\n      <img #imgClipRef class=\"x-upload-portal-clip-img\" [src]=\"file?.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;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:rgb(255,255,255);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: i1.XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XUploadPortalComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: XUploadPortalComponent, selector: "x-upload-portal", viewQueries: [{ propertyName: "imgRef", first: true, predicate: ["imgRef"], descendants: true }, { propertyName: "imgClipRef", first: true, predicate: ["imgClipRef"], descendants: true }, { propertyName: "boundaryRef", first: true, predicate: ["boundaryRef"], descendants: true }, { propertyName: "cutRef", first: true, predicate: ["cutRef"], descendants: 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>{{ file?.name }}</span>\r\n    </div>\r\n    <x-icon class=\"x-upload-portal-close\" type=\"fto-x\" (click)=\"closePortal()\"></x-icon>\r\n  </div>\r\n  <div class=\"x-upload-portal-img\">\r\n    <img #imgRef class=\"x-upload-portal-full-img\" [src]=\"file?.url\" />\r\n    <div #boundaryRef class=\"x-upload-portal-boundary\">\r\n      <img #imgClipRef class=\"x-upload-portal-clip-img\" [src]=\"file?.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;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:rgb(255,255,255);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: i1.XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XUploadPortalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XUploadPortalComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XUploadPortalPrefix}`, 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>{{ file?.name }}</span>\r\n    </div>\r\n    <x-icon class=\"x-upload-portal-close\" type=\"fto-x\" (click)=\"closePortal()\"></x-icon>\r\n  </div>\r\n  <div class=\"x-upload-portal-img\">\r\n    <img #imgRef class=\"x-upload-portal-full-img\" [src]=\"file?.url\" />\r\n    <div #boundaryRef class=\"x-upload-portal-boundary\">\r\n      <img #imgClipRef class=\"x-upload-portal-clip-img\" [src]=\"file?.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;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:rgb(255,255,255);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"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { imgRef: [{
@@ -548,10 +548,10 @@ class XUploadComponent extends XUploadProperty {
         file.state = 'success';
         this.cdr.detectChanges();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XUploadComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1$1.HttpClient, optional: true }, { token: i0.ChangeDetectorRef }, { token: i2.XPortalService }, { token: i0.ViewContainerRef }, { token: i3.XI18nService }, { token: i4.XConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: XUploadComponent, selector: "x-upload", providers: [XValueAccessor(XUploadComponent)], viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div #upload class=\"x-upload x-upload-{{ type }}\" [class.x-disabled]=\"disabled\">\r\n  <input type=\"file\" #file (change)=\"change($event)\" [attr.accept]=\"accept\" [multiple]=\"multiple\" style=\"display: none\" />\r\n\r\n  <ng-container [ngSwitch]=\"type\">\r\n    <ng-container *ngSwitchCase=\"'list'\">\r\n      <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      <ng-container *xOutlet=\"filesTpl; context: { $files: files }\">\r\n        <ul class=\"x-upload-files\">\r\n          <li *ngFor=\"let file of files; index as i; trackBy: trackByItem\" [class.x-upload-disabled]=\"!download\">\r\n            <ng-container *ngIf=\"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            </ng-container>\r\n            <ng-container *ngIf=\"!download\">\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            </ng-container>\r\n\r\n            <ng-container [ngSwitch]=\"file.state\">\r\n              <x-icon class=\"x-upload-state\" *ngSwitchCase=\"'ready'\" type=\"fto-clock\"></x-icon>\r\n              <span class=\"x-upload-percent\" *ngSwitchCase=\"'uploading'\">{{ file.percent }}%</span>\r\n              <x-icon class=\"x-upload-state success\" *ngSwitchCase=\"'success'\" type=\"fto-check\"></x-icon>\r\n              <x-icon class=\"x-upload-state error\" *ngSwitchCase=\"'error'\" type=\"fto-info\"></x-icon>\r\n            </ng-container>\r\n            <x-button *ngIf=\"file.state !== 'uploading'\" icon=\"fto-x\" (click)=\"remove(file, i)\" onlyIcon closable size=\"mini\"></x-button>\r\n          </li>\r\n        </ul>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'img'\">\r\n      <x-image-group>\r\n        <ng-container *ngFor=\"let file of files; index as i; trackBy: trackByItem\">\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            <div class=\"x-upload-uploading\" *ngIf=\"file.state == 'uploading'\">\r\n              <x-progress [percent]=\"file.percent!\" info=\"false\"></x-progress>\r\n            </div>\r\n            <div class=\"x-image-overlay\">\r\n              <ng-container [ngSwitch]=\"file.state\">\r\n                <x-icon class=\"x-upload-state\" *ngSwitchCase=\"'ready'\" type=\"fto-clock\"></x-icon>\r\n                <x-icon type=\"fto-eye\" *ngSwitchCase=\"'success'\" (click)=\"image.onPreview()\"></x-icon>\r\n              </ng-container>\r\n              <x-icon *ngIf=\"imgCut && file.state === 'success'\" type=\"fto-crop\" (click)=\"onImgCut(file, i)\"></x-icon>\r\n              <x-icon *ngIf=\"file.state !== 'uploading'\" type=\"fto-trash-2\" (click)=\"remove(file, i)\"></x-icon>\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n        <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      </x-image-group>\r\n    </ng-container>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #uploadBtnTpl>\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\" [disabled]=\"disabled\" type=\"primary\">{{ getText }}</x-button>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-upload{margin:0;padding:0;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{margin-top:.4rem}.x-upload-files>li{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 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)}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i6.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: i7.XButtonComponent, selector: "x-button" }, { kind: "component", type: i1.XIconComponent, selector: "x-icon" }, { kind: "component", type: i9.XImageComponent, selector: "x-image" }, { kind: "component", type: i9.XImageGroupComponent, selector: "x-image-group" }, { kind: "component", type: i10.XProgressComponent, selector: "x-progress" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XUploadComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1$1.HttpClient, optional: true }, { token: i0.ChangeDetectorRef }, { token: i2.XPortalService }, { token: i0.ViewContainerRef }, { token: i3.XI18nService }, { token: i4.XConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.5", type: XUploadComponent, selector: "x-upload", providers: [XValueAccessor(XUploadComponent)], viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div #upload class=\"x-upload x-upload-{{ type }}\" [class.x-disabled]=\"disabled\">\r\n  <input type=\"file\" #file (change)=\"change($event)\" [attr.accept]=\"accept\" [multiple]=\"multiple\" style=\"display: none\" />\r\n\r\n  <ng-container [ngSwitch]=\"type\">\r\n    <ng-container *ngSwitchCase=\"'list'\">\r\n      <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      <ng-container *xOutlet=\"filesTpl; context: { $files: files }\">\r\n        <ul class=\"x-upload-files\">\r\n          <li *ngFor=\"let file of files; index as i; trackBy: trackByItem\" [class.x-upload-disabled]=\"!download\">\r\n            <ng-container *ngIf=\"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            </ng-container>\r\n            <ng-container *ngIf=\"!download\">\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            </ng-container>\r\n\r\n            <ng-container [ngSwitch]=\"file.state\">\r\n              <x-icon class=\"x-upload-state\" *ngSwitchCase=\"'ready'\" type=\"fto-clock\"></x-icon>\r\n              <span class=\"x-upload-percent\" *ngSwitchCase=\"'uploading'\">{{ file.percent }}%</span>\r\n              <x-icon class=\"x-upload-state success\" *ngSwitchCase=\"'success'\" type=\"fto-check\"></x-icon>\r\n              <x-icon class=\"x-upload-state error\" *ngSwitchCase=\"'error'\" type=\"fto-info\"></x-icon>\r\n            </ng-container>\r\n            <x-button *ngIf=\"file.state !== 'uploading'\" icon=\"fto-x\" (click)=\"remove(file, i)\" onlyIcon closable size=\"mini\"></x-button>\r\n          </li>\r\n        </ul>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'img'\">\r\n      <x-image-group>\r\n        <ng-container *ngFor=\"let file of files; index as i; trackBy: trackByItem\">\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            <div class=\"x-upload-uploading\" *ngIf=\"file.state == 'uploading'\">\r\n              <x-progress [percent]=\"file.percent!\" info=\"false\"></x-progress>\r\n            </div>\r\n            <div class=\"x-image-overlay\">\r\n              <ng-container [ngSwitch]=\"file.state\">\r\n                <x-icon class=\"x-upload-state\" *ngSwitchCase=\"'ready'\" type=\"fto-clock\"></x-icon>\r\n                <x-icon type=\"fto-eye\" *ngSwitchCase=\"'success'\" (click)=\"image.onPreview()\"></x-icon>\r\n              </ng-container>\r\n              <x-icon *ngIf=\"imgCut && file.state === 'success'\" type=\"fto-crop\" (click)=\"onImgCut(file, i)\"></x-icon>\r\n              <x-icon *ngIf=\"file.state !== 'uploading'\" type=\"fto-trash-2\" (click)=\"remove(file, i)\"></x-icon>\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n        <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      </x-image-group>\r\n    </ng-container>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #uploadBtnTpl>\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\" [disabled]=\"disabled\" type=\"primary\">{{ getText }}</x-button>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-upload{margin:0;padding:0;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{margin-top:.4rem}.x-upload-files>li{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 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)}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i6.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: i7.XButtonComponent, selector: "x-button" }, { kind: "component", type: i1.XIconComponent, selector: "x-icon" }, { kind: "component", type: i9.XImageComponent, selector: "x-image" }, { kind: "component", type: i9.XImageGroupComponent, selector: "x-image-group" }, { kind: "component", type: i10.XProgressComponent, selector: "x-progress" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XUploadPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XUploadComponent)], template: "<div #upload class=\"x-upload x-upload-{{ type }}\" [class.x-disabled]=\"disabled\">\r\n  <input type=\"file\" #file (change)=\"change($event)\" [attr.accept]=\"accept\" [multiple]=\"multiple\" style=\"display: none\" />\r\n\r\n  <ng-container [ngSwitch]=\"type\">\r\n    <ng-container *ngSwitchCase=\"'list'\">\r\n      <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      <ng-container *xOutlet=\"filesTpl; context: { $files: files }\">\r\n        <ul class=\"x-upload-files\">\r\n          <li *ngFor=\"let file of files; index as i; trackBy: trackByItem\" [class.x-upload-disabled]=\"!download\">\r\n            <ng-container *ngIf=\"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            </ng-container>\r\n            <ng-container *ngIf=\"!download\">\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            </ng-container>\r\n\r\n            <ng-container [ngSwitch]=\"file.state\">\r\n              <x-icon class=\"x-upload-state\" *ngSwitchCase=\"'ready'\" type=\"fto-clock\"></x-icon>\r\n              <span class=\"x-upload-percent\" *ngSwitchCase=\"'uploading'\">{{ file.percent }}%</span>\r\n              <x-icon class=\"x-upload-state success\" *ngSwitchCase=\"'success'\" type=\"fto-check\"></x-icon>\r\n              <x-icon class=\"x-upload-state error\" *ngSwitchCase=\"'error'\" type=\"fto-info\"></x-icon>\r\n            </ng-container>\r\n            <x-button *ngIf=\"file.state !== 'uploading'\" icon=\"fto-x\" (click)=\"remove(file, i)\" onlyIcon closable size=\"mini\"></x-button>\r\n          </li>\r\n        </ul>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'img'\">\r\n      <x-image-group>\r\n        <ng-container *ngFor=\"let file of files; index as i; trackBy: trackByItem\">\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            <div class=\"x-upload-uploading\" *ngIf=\"file.state == 'uploading'\">\r\n              <x-progress [percent]=\"file.percent!\" info=\"false\"></x-progress>\r\n            </div>\r\n            <div class=\"x-image-overlay\">\r\n              <ng-container [ngSwitch]=\"file.state\">\r\n                <x-icon class=\"x-upload-state\" *ngSwitchCase=\"'ready'\" type=\"fto-clock\"></x-icon>\r\n                <x-icon type=\"fto-eye\" *ngSwitchCase=\"'success'\" (click)=\"image.onPreview()\"></x-icon>\r\n              </ng-container>\r\n              <x-icon *ngIf=\"imgCut && file.state === 'success'\" type=\"fto-crop\" (click)=\"onImgCut(file, i)\"></x-icon>\r\n              <x-icon *ngIf=\"file.state !== 'uploading'\" type=\"fto-trash-2\" (click)=\"remove(file, i)\"></x-icon>\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n        <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      </x-image-group>\r\n    </ng-container>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #uploadBtnTpl>\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\" [disabled]=\"disabled\" type=\"primary\">{{ getText }}</x-button>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-upload{margin:0;padding:0;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{margin-top:.4rem}.x-upload-files>li{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 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)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1$1.HttpClient, decorators: [{
@@ -562,8 +562,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             }] } });
 
 class XUploadModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: XUploadModule, declarations: [XUploadComponent, XUploadPortalComponent, XUploadProperty], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.5", ngImport: i0, type: XUploadModule, declarations: [XUploadComponent, XUploadPortalComponent, XUploadProperty], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             DragDropModule,
@@ -575,7 +575,7 @@ class XUploadModule {
             XBaseFormModule,
             XImageModule,
             XProgressModule], exports: [XUploadComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XUploadModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XUploadModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             DragDropModule,
@@ -588,7 +588,7 @@ class XUploadModule {
             XImageModule,
             XProgressModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: XUploadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.5", ngImport: i0, type: XUploadModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [XUploadComponent, XUploadPortalComponent, XUploadProperty],