@ng-nest/ui 20.1.6 → 20.1.7

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

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
 import { input, Component, computed, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
-import { XPropertyFunction, XToDataArray, XIsEmpty } from '@ng-nest/ui/core';
+import { XPropertyFunction, XToDataArray, XToBoolean, XIsEmpty } from '@ng-nest/ui/core';
 import { NgClass, DatePipe } from '@angular/common';
 import { XIconComponent } from '@ng-nest/ui/icon';
 import { XTimeAgoPipe } from '@ng-nest/ui/time-ago';
 import { XLinkComponent } from '@ng-nest/ui/link';
 import { XOutletDirective } from '@ng-nest/ui/outlet';
+import { XLoadingComponent } from '@ng-nest/ui/loading';
 
 /**
  * Timeline
@@ -30,14 +31,34 @@ class XTimelineProperty extends XPropertyFunction(X_TIMELINE_CONFIG_NAME) {
          * @en_US Content template
          */
         this.wrapper = input(...(ngDevMode ? [undefined, { debugName: "wrapper" }] : []));
+        /**
+         * @zh_CN 图标模板
+         * @en_US Icon template
+         */
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        /**
+         * @zh_CN 显示序号
+         * @en_US Show number
+         */
+        this.showNumber = input(this.config?.showNumber ?? false, ...(ngDevMode ? [{ debugName: "showNumber", transform: XToBoolean }] : [{ transform: XToBoolean }]));
         /**
          * @zh_CN 时间轴的相对位置
          * @en_US Content and timeline relative position
          */
         this.mode = input(this.config?.mode ?? 'left', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        /**
+         * @zh_CN loading 的类型样式
+         * @en_US Loading type style
+         */
+        this.loadingType = input(this.config?.loadingType ?? 'circular', ...(ngDevMode ? [{ debugName: "loadingType" }] : []));
+        /**
+         * @zh_CN 尺寸
+         * @en_US Size
+         */
+        this.size = input(this.config?.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XTimelineProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XTimelineProperty, isStandalone: true, selector: "x-timeline-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, wrapper: { classPropertyName: "wrapper", publicName: "wrapper", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XTimelineProperty, isStandalone: true, selector: "x-timeline-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, wrapper: { classPropertyName: "wrapper", publicName: "wrapper", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showNumber: { classPropertyName: "showNumber", publicName: "showNumber", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, loadingType: { classPropertyName: "loadingType", publicName: "loadingType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XTimelineProperty, decorators: [{
             type: Component,
@@ -48,7 +69,8 @@ class XTimelineComponent extends XTimelineProperty {
     constructor() {
         super(...arguments);
         this.classMap = computed(() => ({
-            [`${XTimelinePrefix}-${this.mode()}`]: !XIsEmpty(this.mode())
+            [`${XTimelinePrefix}-${this.mode()}`]: !XIsEmpty(this.mode()),
+            [`${XTimelinePrefix}-${this.size()}`]: !XIsEmpty(this.size())
         }), ...(ngDevMode ? [{ debugName: "classMap" }] : []));
         this.nodes = computed(() => {
             const data = this.data();
@@ -73,11 +95,11 @@ class XTimelineComponent extends XTimelineProperty {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XTimelineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XTimelineComponent, isStandalone: true, selector: "x-timeline", usesInheritance: true, ngImport: i0, template: "<div #timeline class=\"x-timeline\" [ngClass]=\"classMap()\">\r\n  <ul>\r\n    @for (node of nodes(); track node.id) {\r\n      <li [class.x-timeline-loading]=\"node.loading\">\r\n        <div class=\"x-timeline-tail\" [class.x-timeline-tail-dashed]=\"node.dashed\"></div>\r\n        <div\r\n          class=\"x-timeline-icon {{ node.type ? 'x-timeline-' + node.type : '' }} {{\r\n            node.size ? 'x-timeline-' + node.size : ''\r\n          }}\"\r\n          [style.background-color]=\"node.color\"\r\n        >\r\n          @if (node.icon && !node.loading) {\r\n            <x-icon [type]=\"node.icon\"></x-icon>\r\n          }\r\n          @if (node.loading) {\r\n            <x-icon type=\"fto-loader\" [spin]=\"true\"></x-icon>\r\n          }\r\n        </div>\r\n        <div class=\"x-timeline-wrapper\">\r\n          <ng-container *xOutlet=\"wrapper(); context: { $node: node }\">\r\n            <div class=\"x-timeline-label\">\r\n              @if (node.label) {\r\n                <x-link>{{ node.label }}</x-link>\r\n              }\r\n              <span class=\"x-timeline-time\" [title]=\"node.time | date: 'yyyy-MM-dd HH:mm:ss'\">{{\r\n                node.time | xTimeAgo\r\n              }}</span>\r\n            </div>\r\n            <div class=\"x-timeline-content\">{{ node.content }}</div>\r\n          </ng-container>\r\n        </div>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".x-timeline{margin:0;padding:0}.x-timeline{display:block}.x-timeline ul,.x-timeline li{margin:0;padding:0;list-style:none}.x-timeline>ul{padding-left:.625rem}.x-timeline>ul>li{padding-bottom:1rem;position:relative}.x-timeline>ul>li:last-child .x-timeline-tail{border-left-color:transparent}.x-timeline>ul>li:first-child .x-timeline-tail{top:1.25rem}.x-timeline-tail{position:absolute;height:100%;border-left:.125rem solid var(--x-border)}.x-timeline-tail-dashed{border-left-style:dashed}.x-timeline-icon{position:absolute;background-color:var(--x-border);border-radius:50%;display:flex;justify-content:center;align-items:center;color:var(--x-white);width:1.375rem;height:1.375rem;border:.0625rem solid var(--x-background-100)}.x-timeline-wrapper{position:relative}.x-timeline-label{display:flex;align-items:center;margin-bottom:.125rem}.x-timeline-label>x-link{margin-right:.325rem}.x-timeline-content{color:var(--x-text-300)}.x-timeline-time{font-size:var(--x-font-size);color:var(--x-text-400)}.x-timeline-loading .x-timeline-icon{color:var(--x-text-400);font-size:1.25rem;background-color:transparent!important}.x-timeline-left .x-timeline-icon{left:-.625rem}.x-timeline-left .x-timeline-wrapper{padding-left:1.625rem}.x-timeline-right .x-timeline-icon{right:-.625rem}.x-timeline-right .x-timeline-wrapper{padding-right:1.625rem;text-align:right}.x-timeline-right .x-timeline-tail{right:0}.x-timeline-right .x-timeline-label{justify-content:flex-end}.x-timeline-right .x-timeline-content{text-align:right}.x-timeline-alternate .x-timeline-icon{left:50%;margin-left:-.6875rem}.x-timeline-alternate .x-timeline-tail{left:50%;margin-left:-.0625rem}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{width:50%;padding-right:1.625rem;text-align:right}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-label{justify-content:flex-end}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-content{text-align:right}.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{left:50%;width:50%;padding-left:1.625rem}.x-timeline-primary{background-color:var(--x-primary)}.x-timeline-success{background-color:var(--x-success)}.x-timeline-warning{background-color:var(--x-warning)}.x-timeline-danger{background-color:var(--x-danger)}.x-timeline-info{background-color:var(--x-info)}.x-timeline-big{width:2.175rem;height:2.175rem;left:-1.025rem;font-size:1.55rem}.x-timeline-large{width:1.875rem;height:1.875rem;left:-.875rem;font-size:1.25rem}.x-timeline-medium{width:1.675rem;height:1.675rem;left:-.775rem;font-size:1.05rem}.x-timeline-small{width:1.5rem;height:1.5rem;left:-.6875rem;font-size:.875rem}.x-timeline-mini{width:1.375rem;height:1.375rem;left:-.625rem;font-size:.75rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: XTimeAgoPipe, name: "xTimeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XTimelineComponent, isStandalone: true, selector: "x-timeline", usesInheritance: true, ngImport: i0, template: "<div #timeline class=\"x-timeline\" [class.x-timeline-number]=\"showNumber()\" [ngClass]=\"classMap()\">\r\n  <ul>\r\n    @for (node of nodes(); track node.id) {\r\n      <li [class.x-timeline-loading]=\"node.loading\">\r\n        <div class=\"x-timeline-tail\" [class.x-timeline-tail-dashed]=\"node.dashed\"></div>\r\n        @if (icon()) {\r\n          <div class=\"x-timeline-icon\">\r\n            <ng-container *xOutlet=\"icon(); context: { $node: node, $index }\"></ng-container>\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"x-timeline-icon {{ node.type ? 'x-timeline-' + node.type : '' }}\"\r\n            [style.background-color]=\"node.color\"\r\n          >\r\n            @if (showNumber() && !node.icon && !node.loading) {\r\n              {{ $index + 1 }}\r\n            }\r\n            @if (node.icon && !node.loading) {\r\n              <x-icon [type]=\"node.icon\"></x-icon>\r\n            }\r\n            @if (node.loading) {\r\n              <x-loading inline [x-loading]=\"true\" [type]=\"loadingType()\"></x-loading>\r\n            }\r\n          </div>\r\n        }\r\n        <div class=\"x-timeline-wrapper\">\r\n          <ng-container *xOutlet=\"wrapper(); context: { $node: node, $index }\">\r\n            <div class=\"x-timeline-label\">\r\n              @if (node.label) {\r\n                <x-link>{{ node.label }}</x-link>\r\n              }\r\n              <span class=\"x-timeline-time\" [title]=\"node.time | date: 'yyyy-MM-dd HH:mm:ss'\">{{\r\n                node.time | xTimeAgo\r\n              }}</span>\r\n            </div>\r\n            <div class=\"x-timeline-content\">{{ node.content }}</div>\r\n          </ng-container>\r\n        </div>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".x-timeline{margin:0;padding:0}.x-timeline{display:block}.x-timeline ul,.x-timeline li{margin:0;padding:0;list-style:none}.x-timeline>ul{padding-left:.8125rem}.x-timeline>ul>li{position:relative}.x-timeline>ul>li:not(:last-child){padding-bottom:1rem}.x-timeline>ul>li:last-child .x-timeline-tail{border-left-color:transparent}.x-timeline>ul>li:first-child .x-timeline-tail{top:1.25rem}.x-timeline-tail{position:absolute;height:100%;border-left:.125rem solid var(--x-border)}.x-timeline-tail-dashed{border-left-style:dashed}.x-timeline-icon{position:absolute;background-color:var(--x-border);border-radius:50%;display:flex;justify-content:center;align-items:center;color:var(--x-white);width:1.75rem;height:1.75rem;border:.0625rem solid var(--x-background-100)}.x-timeline-wrapper{position:relative}.x-timeline-label{display:flex;align-items:center;margin-bottom:.125rem}.x-timeline-label>x-link{margin-right:.325rem}.x-timeline-content{color:var(--x-text-300)}.x-timeline-time{font-size:var(--x-font-size);color:var(--x-text-400)}.x-timeline-loading .x-timeline-icon{color:var(--x-text-400);font-size:1.25rem;background-color:transparent!important}.x-timeline-number .x-timeline-icon{background-color:var(--x-background-a900)}.x-timeline-primary{background-color:var(--x-primary)}.x-timeline-success{background-color:var(--x-success)}.x-timeline-warning{background-color:var(--x-warning)}.x-timeline-danger{background-color:var(--x-danger)}.x-timeline-info{background-color:var(--x-info)}.x-timeline-big .x-timeline-label{line-height:calc(var(--x-height-big) - .5rem)}.x-timeline-big .x-timeline-wrapper{padding-left:calc(var(--x-height-big) - .5rem)}.x-timeline-big .x-timeline-icon{width:calc(var(--x-height-big) - .5rem);height:calc(var(--x-height-big) - .5rem)}.x-timeline-big.x-timeline-left .x-timeline-icon{left:calc(.0625rem - (var(--x-height-big) - .5rem) * .5)}.x-timeline-big.x-timeline-left .x-timeline-wrapper{padding-left:calc(var(--x-height-big) - .5rem)}.x-timeline-big.x-timeline-right .x-timeline-icon{right:calc(.0625rem - (var(--x-height-big) - .5rem) * .5)}.x-timeline-big.x-timeline-right .x-timeline-wrapper{padding-right:calc(var(--x-height-big) - .5rem);text-align:right}.x-timeline-big.x-timeline-alternate .x-timeline-icon{margin-left:calc(.0625rem - (var(--x-height-big) - .5rem) * .5)}.x-timeline-big.x-timeline-alternate .x-timeline-tail{margin-left:-.0625rem}.x-timeline-big.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{padding-right:calc(var(--x-height-big) - .5rem)}.x-timeline-big.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{padding-left:calc(var(--x-height-big) - .5rem)}.x-timeline-large .x-timeline-label{line-height:calc(var(--x-height-large) - .5rem)}.x-timeline-large .x-timeline-wrapper{padding-left:calc(var(--x-height-large) - .5rem)}.x-timeline-large .x-timeline-icon{width:calc(var(--x-height-large) - .5rem);height:calc(var(--x-height-large) - .5rem)}.x-timeline-large.x-timeline-left .x-timeline-icon{left:calc(.0625rem - (var(--x-height-large) - .5rem) * .5)}.x-timeline-large.x-timeline-left .x-timeline-wrapper{padding-left:calc(var(--x-height-large) - .5rem)}.x-timeline-large.x-timeline-right .x-timeline-icon{right:calc(.0625rem - (var(--x-height-large) - .5rem) * .5)}.x-timeline-large.x-timeline-right .x-timeline-wrapper{padding-right:calc(var(--x-height-large) - .5rem);text-align:right}.x-timeline-large.x-timeline-alternate .x-timeline-icon{margin-left:calc(.0625rem - (var(--x-height-large) - .5rem) * .5)}.x-timeline-large.x-timeline-alternate .x-timeline-tail{margin-left:-.0625rem}.x-timeline-large.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{padding-right:calc(var(--x-height-large) - .5rem)}.x-timeline-large.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{padding-left:calc(var(--x-height-large) - .5rem)}.x-timeline-medium .x-timeline-label{line-height:calc(var(--x-height-medium) - .5rem)}.x-timeline-medium .x-timeline-wrapper{padding-left:calc(var(--x-height-medium) - .5rem)}.x-timeline-medium .x-timeline-icon{width:calc(var(--x-height-medium) - .5rem);height:calc(var(--x-height-medium) - .5rem)}.x-timeline-medium.x-timeline-left .x-timeline-icon{left:calc(.0625rem - (var(--x-height-medium) - .5rem) * .5)}.x-timeline-medium.x-timeline-left .x-timeline-wrapper{padding-left:calc(var(--x-height-medium) - .5rem)}.x-timeline-medium.x-timeline-right .x-timeline-icon{right:calc(.0625rem - (var(--x-height-medium) - .5rem) * .5)}.x-timeline-medium.x-timeline-right .x-timeline-wrapper{padding-right:calc(var(--x-height-medium) - .5rem);text-align:right}.x-timeline-medium.x-timeline-alternate .x-timeline-icon{margin-left:calc(.0625rem - (var(--x-height-medium) - .5rem) * .5)}.x-timeline-medium.x-timeline-alternate .x-timeline-tail{margin-left:-.0625rem}.x-timeline-medium.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{padding-right:calc(var(--x-height-medium) - .5rem)}.x-timeline-medium.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{padding-left:calc(var(--x-height-medium) - .5rem)}.x-timeline-small .x-timeline-label{line-height:calc(var(--x-height-small) - .5rem)}.x-timeline-small .x-timeline-wrapper{padding-left:calc(var(--x-height-small) - .5rem)}.x-timeline-small .x-timeline-icon{width:calc(var(--x-height-small) - .5rem);height:calc(var(--x-height-small) - .5rem)}.x-timeline-small.x-timeline-left .x-timeline-icon{left:calc(.0625rem - (var(--x-height-small) - .5rem) * .5)}.x-timeline-small.x-timeline-left .x-timeline-wrapper{padding-left:calc(var(--x-height-small) - .5rem)}.x-timeline-small.x-timeline-right .x-timeline-icon{right:calc(.0625rem - (var(--x-height-small) - .5rem) * .5)}.x-timeline-small.x-timeline-right .x-timeline-wrapper{padding-right:calc(var(--x-height-small) - .5rem);text-align:right}.x-timeline-small.x-timeline-alternate .x-timeline-icon{margin-left:calc(.0625rem - (var(--x-height-small) - .5rem) * .5)}.x-timeline-small.x-timeline-alternate .x-timeline-tail{margin-left:-.0625rem}.x-timeline-small.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{padding-right:calc(var(--x-height-small) - .5rem)}.x-timeline-small.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{padding-left:calc(var(--x-height-small) - .5rem)}.x-timeline-mini .x-timeline-label{line-height:calc(var(--x-height-mini) - .5rem)}.x-timeline-mini .x-timeline-wrapper{padding-left:calc(var(--x-height-mini) - .5rem)}.x-timeline-mini .x-timeline-icon{width:calc(var(--x-height-mini) - .5rem);height:calc(var(--x-height-mini) - .5rem)}.x-timeline-mini.x-timeline-left .x-timeline-icon{left:calc(.0625rem - (var(--x-height-mini) - .5rem) * .5)}.x-timeline-mini.x-timeline-left .x-timeline-wrapper{padding-left:calc(var(--x-height-mini) - .5rem)}.x-timeline-mini.x-timeline-right .x-timeline-icon{right:calc(.0625rem - (var(--x-height-mini) - .5rem) * .5)}.x-timeline-mini.x-timeline-right .x-timeline-wrapper{padding-right:calc(var(--x-height-mini) - .5rem);text-align:right}.x-timeline-mini.x-timeline-alternate .x-timeline-icon{margin-left:calc(.0625rem - (var(--x-height-mini) - .5rem) * .5)}.x-timeline-mini.x-timeline-alternate .x-timeline-tail{margin-left:-.0625rem}.x-timeline-mini.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{padding-right:calc(var(--x-height-mini) - .5rem)}.x-timeline-mini.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{padding-left:calc(var(--x-height-mini) - .5rem)}.x-timeline-right .x-timeline-tail{right:0}.x-timeline-right .x-timeline-label{justify-content:flex-end}.x-timeline-right .x-timeline-content{text-align:right}.x-timeline-alternate .x-timeline-icon,.x-timeline-alternate .x-timeline-tail{left:50%}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{width:50%;text-align:right}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-label{justify-content:flex-end}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-content{text-align:right}.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{left:50%;width:50%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XLinkComponent, selector: "x-link" }, { kind: "component", type: XLoadingComponent, selector: "x-loading, [x-loading]" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: XTimeAgoPipe, name: "xTimeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XTimelineComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XTimelinePrefix}`, imports: [NgClass, DatePipe, XIconComponent, XTimeAgoPipe, XLinkComponent, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #timeline class=\"x-timeline\" [ngClass]=\"classMap()\">\r\n  <ul>\r\n    @for (node of nodes(); track node.id) {\r\n      <li [class.x-timeline-loading]=\"node.loading\">\r\n        <div class=\"x-timeline-tail\" [class.x-timeline-tail-dashed]=\"node.dashed\"></div>\r\n        <div\r\n          class=\"x-timeline-icon {{ node.type ? 'x-timeline-' + node.type : '' }} {{\r\n            node.size ? 'x-timeline-' + node.size : ''\r\n          }}\"\r\n          [style.background-color]=\"node.color\"\r\n        >\r\n          @if (node.icon && !node.loading) {\r\n            <x-icon [type]=\"node.icon\"></x-icon>\r\n          }\r\n          @if (node.loading) {\r\n            <x-icon type=\"fto-loader\" [spin]=\"true\"></x-icon>\r\n          }\r\n        </div>\r\n        <div class=\"x-timeline-wrapper\">\r\n          <ng-container *xOutlet=\"wrapper(); context: { $node: node }\">\r\n            <div class=\"x-timeline-label\">\r\n              @if (node.label) {\r\n                <x-link>{{ node.label }}</x-link>\r\n              }\r\n              <span class=\"x-timeline-time\" [title]=\"node.time | date: 'yyyy-MM-dd HH:mm:ss'\">{{\r\n                node.time | xTimeAgo\r\n              }}</span>\r\n            </div>\r\n            <div class=\"x-timeline-content\">{{ node.content }}</div>\r\n          </ng-container>\r\n        </div>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".x-timeline{margin:0;padding:0}.x-timeline{display:block}.x-timeline ul,.x-timeline li{margin:0;padding:0;list-style:none}.x-timeline>ul{padding-left:.625rem}.x-timeline>ul>li{padding-bottom:1rem;position:relative}.x-timeline>ul>li:last-child .x-timeline-tail{border-left-color:transparent}.x-timeline>ul>li:first-child .x-timeline-tail{top:1.25rem}.x-timeline-tail{position:absolute;height:100%;border-left:.125rem solid var(--x-border)}.x-timeline-tail-dashed{border-left-style:dashed}.x-timeline-icon{position:absolute;background-color:var(--x-border);border-radius:50%;display:flex;justify-content:center;align-items:center;color:var(--x-white);width:1.375rem;height:1.375rem;border:.0625rem solid var(--x-background-100)}.x-timeline-wrapper{position:relative}.x-timeline-label{display:flex;align-items:center;margin-bottom:.125rem}.x-timeline-label>x-link{margin-right:.325rem}.x-timeline-content{color:var(--x-text-300)}.x-timeline-time{font-size:var(--x-font-size);color:var(--x-text-400)}.x-timeline-loading .x-timeline-icon{color:var(--x-text-400);font-size:1.25rem;background-color:transparent!important}.x-timeline-left .x-timeline-icon{left:-.625rem}.x-timeline-left .x-timeline-wrapper{padding-left:1.625rem}.x-timeline-right .x-timeline-icon{right:-.625rem}.x-timeline-right .x-timeline-wrapper{padding-right:1.625rem;text-align:right}.x-timeline-right .x-timeline-tail{right:0}.x-timeline-right .x-timeline-label{justify-content:flex-end}.x-timeline-right .x-timeline-content{text-align:right}.x-timeline-alternate .x-timeline-icon{left:50%;margin-left:-.6875rem}.x-timeline-alternate .x-timeline-tail{left:50%;margin-left:-.0625rem}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{width:50%;padding-right:1.625rem;text-align:right}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-label{justify-content:flex-end}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-content{text-align:right}.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{left:50%;width:50%;padding-left:1.625rem}.x-timeline-primary{background-color:var(--x-primary)}.x-timeline-success{background-color:var(--x-success)}.x-timeline-warning{background-color:var(--x-warning)}.x-timeline-danger{background-color:var(--x-danger)}.x-timeline-info{background-color:var(--x-info)}.x-timeline-big{width:2.175rem;height:2.175rem;left:-1.025rem;font-size:1.55rem}.x-timeline-large{width:1.875rem;height:1.875rem;left:-.875rem;font-size:1.25rem}.x-timeline-medium{width:1.675rem;height:1.675rem;left:-.775rem;font-size:1.05rem}.x-timeline-small{width:1.5rem;height:1.5rem;left:-.6875rem;font-size:.875rem}.x-timeline-mini{width:1.375rem;height:1.375rem;left:-.625rem;font-size:.75rem}\n"] }]
+            args: [{ selector: `${XTimelinePrefix}`, imports: [NgClass, DatePipe, XIconComponent, XTimeAgoPipe, XLinkComponent, XLoadingComponent, XOutletDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #timeline class=\"x-timeline\" [class.x-timeline-number]=\"showNumber()\" [ngClass]=\"classMap()\">\r\n  <ul>\r\n    @for (node of nodes(); track node.id) {\r\n      <li [class.x-timeline-loading]=\"node.loading\">\r\n        <div class=\"x-timeline-tail\" [class.x-timeline-tail-dashed]=\"node.dashed\"></div>\r\n        @if (icon()) {\r\n          <div class=\"x-timeline-icon\">\r\n            <ng-container *xOutlet=\"icon(); context: { $node: node, $index }\"></ng-container>\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"x-timeline-icon {{ node.type ? 'x-timeline-' + node.type : '' }}\"\r\n            [style.background-color]=\"node.color\"\r\n          >\r\n            @if (showNumber() && !node.icon && !node.loading) {\r\n              {{ $index + 1 }}\r\n            }\r\n            @if (node.icon && !node.loading) {\r\n              <x-icon [type]=\"node.icon\"></x-icon>\r\n            }\r\n            @if (node.loading) {\r\n              <x-loading inline [x-loading]=\"true\" [type]=\"loadingType()\"></x-loading>\r\n            }\r\n          </div>\r\n        }\r\n        <div class=\"x-timeline-wrapper\">\r\n          <ng-container *xOutlet=\"wrapper(); context: { $node: node, $index }\">\r\n            <div class=\"x-timeline-label\">\r\n              @if (node.label) {\r\n                <x-link>{{ node.label }}</x-link>\r\n              }\r\n              <span class=\"x-timeline-time\" [title]=\"node.time | date: 'yyyy-MM-dd HH:mm:ss'\">{{\r\n                node.time | xTimeAgo\r\n              }}</span>\r\n            </div>\r\n            <div class=\"x-timeline-content\">{{ node.content }}</div>\r\n          </ng-container>\r\n        </div>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: [".x-timeline{margin:0;padding:0}.x-timeline{display:block}.x-timeline ul,.x-timeline li{margin:0;padding:0;list-style:none}.x-timeline>ul{padding-left:.8125rem}.x-timeline>ul>li{position:relative}.x-timeline>ul>li:not(:last-child){padding-bottom:1rem}.x-timeline>ul>li:last-child .x-timeline-tail{border-left-color:transparent}.x-timeline>ul>li:first-child .x-timeline-tail{top:1.25rem}.x-timeline-tail{position:absolute;height:100%;border-left:.125rem solid var(--x-border)}.x-timeline-tail-dashed{border-left-style:dashed}.x-timeline-icon{position:absolute;background-color:var(--x-border);border-radius:50%;display:flex;justify-content:center;align-items:center;color:var(--x-white);width:1.75rem;height:1.75rem;border:.0625rem solid var(--x-background-100)}.x-timeline-wrapper{position:relative}.x-timeline-label{display:flex;align-items:center;margin-bottom:.125rem}.x-timeline-label>x-link{margin-right:.325rem}.x-timeline-content{color:var(--x-text-300)}.x-timeline-time{font-size:var(--x-font-size);color:var(--x-text-400)}.x-timeline-loading .x-timeline-icon{color:var(--x-text-400);font-size:1.25rem;background-color:transparent!important}.x-timeline-number .x-timeline-icon{background-color:var(--x-background-a900)}.x-timeline-primary{background-color:var(--x-primary)}.x-timeline-success{background-color:var(--x-success)}.x-timeline-warning{background-color:var(--x-warning)}.x-timeline-danger{background-color:var(--x-danger)}.x-timeline-info{background-color:var(--x-info)}.x-timeline-big .x-timeline-label{line-height:calc(var(--x-height-big) - .5rem)}.x-timeline-big .x-timeline-wrapper{padding-left:calc(var(--x-height-big) - .5rem)}.x-timeline-big .x-timeline-icon{width:calc(var(--x-height-big) - .5rem);height:calc(var(--x-height-big) - .5rem)}.x-timeline-big.x-timeline-left .x-timeline-icon{left:calc(.0625rem - (var(--x-height-big) - .5rem) * .5)}.x-timeline-big.x-timeline-left .x-timeline-wrapper{padding-left:calc(var(--x-height-big) - .5rem)}.x-timeline-big.x-timeline-right .x-timeline-icon{right:calc(.0625rem - (var(--x-height-big) - .5rem) * .5)}.x-timeline-big.x-timeline-right .x-timeline-wrapper{padding-right:calc(var(--x-height-big) - .5rem);text-align:right}.x-timeline-big.x-timeline-alternate .x-timeline-icon{margin-left:calc(.0625rem - (var(--x-height-big) - .5rem) * .5)}.x-timeline-big.x-timeline-alternate .x-timeline-tail{margin-left:-.0625rem}.x-timeline-big.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{padding-right:calc(var(--x-height-big) - .5rem)}.x-timeline-big.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{padding-left:calc(var(--x-height-big) - .5rem)}.x-timeline-large .x-timeline-label{line-height:calc(var(--x-height-large) - .5rem)}.x-timeline-large .x-timeline-wrapper{padding-left:calc(var(--x-height-large) - .5rem)}.x-timeline-large .x-timeline-icon{width:calc(var(--x-height-large) - .5rem);height:calc(var(--x-height-large) - .5rem)}.x-timeline-large.x-timeline-left .x-timeline-icon{left:calc(.0625rem - (var(--x-height-large) - .5rem) * .5)}.x-timeline-large.x-timeline-left .x-timeline-wrapper{padding-left:calc(var(--x-height-large) - .5rem)}.x-timeline-large.x-timeline-right .x-timeline-icon{right:calc(.0625rem - (var(--x-height-large) - .5rem) * .5)}.x-timeline-large.x-timeline-right .x-timeline-wrapper{padding-right:calc(var(--x-height-large) - .5rem);text-align:right}.x-timeline-large.x-timeline-alternate .x-timeline-icon{margin-left:calc(.0625rem - (var(--x-height-large) - .5rem) * .5)}.x-timeline-large.x-timeline-alternate .x-timeline-tail{margin-left:-.0625rem}.x-timeline-large.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{padding-right:calc(var(--x-height-large) - .5rem)}.x-timeline-large.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{padding-left:calc(var(--x-height-large) - .5rem)}.x-timeline-medium .x-timeline-label{line-height:calc(var(--x-height-medium) - .5rem)}.x-timeline-medium .x-timeline-wrapper{padding-left:calc(var(--x-height-medium) - .5rem)}.x-timeline-medium .x-timeline-icon{width:calc(var(--x-height-medium) - .5rem);height:calc(var(--x-height-medium) - .5rem)}.x-timeline-medium.x-timeline-left .x-timeline-icon{left:calc(.0625rem - (var(--x-height-medium) - .5rem) * .5)}.x-timeline-medium.x-timeline-left .x-timeline-wrapper{padding-left:calc(var(--x-height-medium) - .5rem)}.x-timeline-medium.x-timeline-right .x-timeline-icon{right:calc(.0625rem - (var(--x-height-medium) - .5rem) * .5)}.x-timeline-medium.x-timeline-right .x-timeline-wrapper{padding-right:calc(var(--x-height-medium) - .5rem);text-align:right}.x-timeline-medium.x-timeline-alternate .x-timeline-icon{margin-left:calc(.0625rem - (var(--x-height-medium) - .5rem) * .5)}.x-timeline-medium.x-timeline-alternate .x-timeline-tail{margin-left:-.0625rem}.x-timeline-medium.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{padding-right:calc(var(--x-height-medium) - .5rem)}.x-timeline-medium.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{padding-left:calc(var(--x-height-medium) - .5rem)}.x-timeline-small .x-timeline-label{line-height:calc(var(--x-height-small) - .5rem)}.x-timeline-small .x-timeline-wrapper{padding-left:calc(var(--x-height-small) - .5rem)}.x-timeline-small .x-timeline-icon{width:calc(var(--x-height-small) - .5rem);height:calc(var(--x-height-small) - .5rem)}.x-timeline-small.x-timeline-left .x-timeline-icon{left:calc(.0625rem - (var(--x-height-small) - .5rem) * .5)}.x-timeline-small.x-timeline-left .x-timeline-wrapper{padding-left:calc(var(--x-height-small) - .5rem)}.x-timeline-small.x-timeline-right .x-timeline-icon{right:calc(.0625rem - (var(--x-height-small) - .5rem) * .5)}.x-timeline-small.x-timeline-right .x-timeline-wrapper{padding-right:calc(var(--x-height-small) - .5rem);text-align:right}.x-timeline-small.x-timeline-alternate .x-timeline-icon{margin-left:calc(.0625rem - (var(--x-height-small) - .5rem) * .5)}.x-timeline-small.x-timeline-alternate .x-timeline-tail{margin-left:-.0625rem}.x-timeline-small.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{padding-right:calc(var(--x-height-small) - .5rem)}.x-timeline-small.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{padding-left:calc(var(--x-height-small) - .5rem)}.x-timeline-mini .x-timeline-label{line-height:calc(var(--x-height-mini) - .5rem)}.x-timeline-mini .x-timeline-wrapper{padding-left:calc(var(--x-height-mini) - .5rem)}.x-timeline-mini .x-timeline-icon{width:calc(var(--x-height-mini) - .5rem);height:calc(var(--x-height-mini) - .5rem)}.x-timeline-mini.x-timeline-left .x-timeline-icon{left:calc(.0625rem - (var(--x-height-mini) - .5rem) * .5)}.x-timeline-mini.x-timeline-left .x-timeline-wrapper{padding-left:calc(var(--x-height-mini) - .5rem)}.x-timeline-mini.x-timeline-right .x-timeline-icon{right:calc(.0625rem - (var(--x-height-mini) - .5rem) * .5)}.x-timeline-mini.x-timeline-right .x-timeline-wrapper{padding-right:calc(var(--x-height-mini) - .5rem);text-align:right}.x-timeline-mini.x-timeline-alternate .x-timeline-icon{margin-left:calc(.0625rem - (var(--x-height-mini) - .5rem) * .5)}.x-timeline-mini.x-timeline-alternate .x-timeline-tail{margin-left:-.0625rem}.x-timeline-mini.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{padding-right:calc(var(--x-height-mini) - .5rem)}.x-timeline-mini.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{padding-left:calc(var(--x-height-mini) - .5rem)}.x-timeline-right .x-timeline-tail{right:0}.x-timeline-right .x-timeline-label{justify-content:flex-end}.x-timeline-right .x-timeline-content{text-align:right}.x-timeline-alternate .x-timeline-icon,.x-timeline-alternate .x-timeline-tail{left:50%}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-wrapper{width:50%;text-align:right}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-label{justify-content:flex-end}.x-timeline-alternate>ul>li:nth-child(odd) .x-timeline-content{text-align:right}.x-timeline-alternate>ul>li:nth-child(2n) .x-timeline-wrapper{left:50%;width:50%}\n"] }]
         }] });
 
 class XTimelineModule {

package/fesm2022/ng-nest-ui-timeline.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-timeline.mjs","sources":["../../../../lib/ng-nest/ui/timeline/timeline.property.ts","../../../../lib/ng-nest/ui/timeline/timeline.component.ts","../../../../lib/ng-nest/ui/timeline/timeline.component.html","../../../../lib/ng-nest/ui/timeline/timeline.module.ts","../../../../lib/ng-nest/ui/timeline/ng-nest-ui-timeline.ts"],"sourcesContent":["import { XPropertyFunction, XToDataArray } from '@ng-nest/ui/core';\r\nimport { Component, input } from '@angular/core';\r\nimport type { XType, XSize, XTemplate, XIdentityProperty, XDate, XDataArray } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Timeline\r\n * @selector x-timeline\r\n * @decorator component\r\n */\r\nexport const XTimelinePrefix = 'x-timeline';\r\nconst X_TIMELINE_CONFIG_NAME = 'timeline';\r\n\r\n/**\r\n * Timeline Property\r\n */\r\n@Component({ selector: `${XTimelinePrefix}-property`, template: '' })\r\nexport class XTimelineProperty extends XPropertyFunction(X_TIMELINE_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 数据\r\n   * @en_US Date\r\n   */\r\n  readonly data = input<XTimelineNode[], XDataArray<XTimelineNode>>([], { transform: XToDataArray });\r\n  /**\r\n   * @zh_CN 内容模板\r\n   * @en_US Content template\r\n   */\r\n  readonly wrapper = input<XTemplate>();\r\n  /**\r\n   * @zh_CN 时间轴的相对位置\r\n   * @en_US Content and timeline relative position\r\n   */\r\n  readonly mode = input<XTimelineMode>(this.config?.mode ?? 'left');\r\n}\r\n\r\n/**\r\n * @zh_CN Timeline 数据对象\r\n * @en_US Timeline node data\r\n */\r\nexport interface XTimelineNode extends XIdentityProperty {\r\n  /**\r\n   * @zh_CN 时间\r\n   * @en_US Time\r\n   */\r\n  time?: XDate;\r\n  /**\r\n   * @zh_CN 内容\r\n   * @en_US Content\r\n   */\r\n  content?: string;\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   */\r\n  size?: XSize;\r\n  /**\r\n   * @zh_CN 类型\r\n   * @en_US Type\r\n   */\r\n  type?: XType;\r\n  /**\r\n   * @zh_CN 图标\r\n   * @en_US Icon\r\n   */\r\n  icon?: string;\r\n  /**\r\n   * @zh_CN 颜色\r\n   * @en_US Color\r\n   */\r\n  color?: string;\r\n  /**\r\n   * @zh_CN 加载中\r\n   * @en_US Loading\r\n   */\r\n  loading?: boolean;\r\n  /**\r\n   * @zh_CN 连接线显示虚线，针对下一个节点，下一个节点为 loading 状态也会显示虚线\r\n   * @en_US The connecting line displays a dotted line. For the next node, the dotted line will also be displayed when the next node is in loading status\r\n   */\r\n  dashed?: boolean;\r\n  /**\r\n   * @zh_CN 其它自定义属性\r\n   * @en_US Other property\r\n   */\r\n  [property: string]: any;\r\n}\r\n\r\n/**\r\n * @zh_CN 时间轴的相对位置\r\n * @en_US Content and timeline relative position\r\n */\r\nexport type XTimelineMode = 'left' | 'right' | 'alternate';\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, computed } from '@angular/core';\r\nimport { XTimelinePrefix, XTimelineNode, XTimelineProperty } from './timeline.property';\r\nimport { XIsEmpty } from '@ng-nest/ui/core';\r\nimport { DatePipe, NgClass } from '@angular/common';\r\nimport { XIconComponent } from '@ng-nest/ui/icon';\r\nimport { XTimeAgoPipe } from '@ng-nest/ui/time-ago';\r\nimport { XLinkComponent } from '@ng-nest/ui/link';\r\nimport { XOutletDirective } from '@ng-nest/ui/outlet';\r\n\r\n@Component({\r\n  selector: `${XTimelinePrefix}`,\r\n  imports: [NgClass, DatePipe, XIconComponent, XTimeAgoPipe, XLinkComponent, XOutletDirective],\r\n  templateUrl: './timeline.component.html',\r\n  styleUrls: ['./timeline.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XTimelineComponent extends XTimelineProperty {\r\n  classMap = computed(() => ({\r\n    [`${XTimelinePrefix}-${this.mode()}`]: !XIsEmpty(this.mode())\r\n  }));\r\n\r\n  nodes = computed(() => {\r\n    const data = this.data();\r\n    this.setDashed(data);\r\n    return data;\r\n  });\r\n\r\n  private setDashed(nodes: XTimelineNode[]) {\r\n    const len = nodes.length;\r\n    if (len <= 1) return;\r\n    for (let i = 0; i < nodes.length; i++) {\r\n      let node = nodes[i];\r\n      if (!node.loading) continue;\r\n      if (i === 0) {\r\n        node.dashed = true;\r\n      } else if (i > 0) {\r\n        nodes[i - 1].dashed = true;\r\n      }\r\n    }\r\n  }\r\n}\r\n","<div #timeline class=\"x-timeline\" [ngClass]=\"classMap()\">\r\n  <ul>\r\n    @for (node of nodes(); track node.id) {\r\n      <li [class.x-timeline-loading]=\"node.loading\">\r\n        <div class=\"x-timeline-tail\" [class.x-timeline-tail-dashed]=\"node.dashed\"></div>\r\n        <div\r\n          class=\"x-timeline-icon {{ node.type ? 'x-timeline-' + node.type : '' }} {{\r\n            node.size ? 'x-timeline-' + node.size : ''\r\n          }}\"\r\n          [style.background-color]=\"node.color\"\r\n        >\r\n          @if (node.icon && !node.loading) {\r\n            <x-icon [type]=\"node.icon\"></x-icon>\r\n          }\r\n          @if (node.loading) {\r\n            <x-icon type=\"fto-loader\" [spin]=\"true\"></x-icon>\r\n          }\r\n        </div>\r\n        <div class=\"x-timeline-wrapper\">\r\n          <ng-container *xOutlet=\"wrapper(); context: { $node: node }\">\r\n            <div class=\"x-timeline-label\">\r\n              @if (node.label) {\r\n                <x-link>{{ node.label }}</x-link>\r\n              }\r\n              <span class=\"x-timeline-time\" [title]=\"node.time | date: 'yyyy-MM-dd HH:mm:ss'\">{{\r\n                node.time | xTimeAgo\r\n              }}</span>\r\n            </div>\r\n            <div class=\"x-timeline-content\">{{ node.content }}</div>\r\n          </ng-container>\r\n        </div>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { XTimelineComponent } from './timeline.component';\r\n\r\n@NgModule({\r\n  exports: [XTimelineComponent],\r\n  imports: [XTimelineComponent]\r\n})\r\nexport class XTimelineModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-nest-ui-timeline.mjs","sources":["../../../../lib/ng-nest/ui/timeline/timeline.property.ts","../../../../lib/ng-nest/ui/timeline/timeline.component.ts","../../../../lib/ng-nest/ui/timeline/timeline.component.html","../../../../lib/ng-nest/ui/timeline/timeline.module.ts","../../../../lib/ng-nest/ui/timeline/ng-nest-ui-timeline.ts"],"sourcesContent":["import { XPropertyFunction, XToBoolean, XToDataArray } from '@ng-nest/ui/core';\r\nimport { Component, input } from '@angular/core';\r\nimport type { XType, XSize, XTemplate, XIdentityProperty, XDate, XDataArray, XBoolean } from '@ng-nest/ui/core';\r\nimport type { XLoadingType } from '@ng-nest/ui/loading';\r\n\r\n/**\r\n * Timeline\r\n * @selector x-timeline\r\n * @decorator component\r\n */\r\nexport const XTimelinePrefix = 'x-timeline';\r\nconst X_TIMELINE_CONFIG_NAME = 'timeline';\r\n\r\n/**\r\n * Timeline Property\r\n */\r\n@Component({ selector: `${XTimelinePrefix}-property`, template: '' })\r\nexport class XTimelineProperty extends XPropertyFunction(X_TIMELINE_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 数据\r\n   * @en_US Date\r\n   */\r\n  readonly data = input<XTimelineNode[], XDataArray<XTimelineNode>>([], { transform: XToDataArray });\r\n  /**\r\n   * @zh_CN 内容模板\r\n   * @en_US Content template\r\n   */\r\n  readonly wrapper = input<XTemplate>();\r\n  /**\r\n   * @zh_CN 图标模板\r\n   * @en_US Icon template\r\n   */\r\n  readonly icon = input<XTemplate>();\r\n  /**\r\n   * @zh_CN 显示序号\r\n   * @en_US Show number\r\n   */\r\n  readonly showNumber = input<boolean, XBoolean>(this.config?.showNumber ?? false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 时间轴的相对位置\r\n   * @en_US Content and timeline relative position\r\n   */\r\n  readonly mode = input<XTimelineMode>(this.config?.mode ?? 'left');\r\n  /**\r\n   * @zh_CN loading 的类型样式\r\n   * @en_US Loading type style\r\n   */\r\n  readonly loadingType = input<XLoadingType>(this.config?.loadingType ?? 'circular');\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   */\r\n  readonly size = input<XSize>(this.config?.size ?? 'medium');\r\n}\r\n\r\n/**\r\n * @zh_CN Timeline 数据对象\r\n * @en_US Timeline node data\r\n */\r\nexport interface XTimelineNode extends XIdentityProperty {\r\n  /**\r\n   * @zh_CN 时间\r\n   * @en_US Time\r\n   */\r\n  time?: XDate;\r\n  /**\r\n   * @zh_CN 内容\r\n   * @en_US Content\r\n   */\r\n  content?: string;\r\n  /**\r\n   * @zh_CN 类型\r\n   * @en_US Type\r\n   */\r\n  type?: XType;\r\n  /**\r\n   * @zh_CN 图标\r\n   * @en_US Icon\r\n   */\r\n  icon?: string;\r\n  /**\r\n   * @zh_CN 颜色\r\n   * @en_US Color\r\n   */\r\n  color?: string;\r\n  /**\r\n   * @zh_CN 加载中\r\n   * @en_US Loading\r\n   */\r\n  loading?: boolean;\r\n  /**\r\n   * @zh_CN 连接线显示虚线，针对下一个节点，下一个节点为 loading 状态也会显示虚线\r\n   * @en_US The connecting line displays a dotted line. For the next node, the dotted line will also be displayed when the next node is in loading status\r\n   */\r\n  dashed?: boolean;\r\n  /**\r\n   * @zh_CN 其它自定义属性\r\n   * @en_US Other property\r\n   */\r\n  [property: string]: any;\r\n}\r\n\r\n/**\r\n * @zh_CN 时间轴的相对位置\r\n * @en_US Content and timeline relative position\r\n */\r\nexport type XTimelineMode = 'left' | 'right' | 'alternate';\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, computed } from '@angular/core';\r\nimport { XTimelinePrefix, XTimelineNode, XTimelineProperty } from './timeline.property';\r\nimport { XIsEmpty } from '@ng-nest/ui/core';\r\nimport { DatePipe, NgClass } from '@angular/common';\r\nimport { XIconComponent } from '@ng-nest/ui/icon';\r\nimport { XTimeAgoPipe } from '@ng-nest/ui/time-ago';\r\nimport { XLinkComponent } from '@ng-nest/ui/link';\r\nimport { XOutletDirective } from '@ng-nest/ui/outlet';\r\nimport { XLoadingComponent } from '@ng-nest/ui/loading';\r\n\r\n@Component({\r\n  selector: `${XTimelinePrefix}`,\r\n  imports: [NgClass, DatePipe, XIconComponent, XTimeAgoPipe, XLinkComponent, XLoadingComponent, XOutletDirective],\r\n  templateUrl: './timeline.component.html',\r\n  styleUrls: ['./timeline.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XTimelineComponent extends XTimelineProperty {\r\n  classMap = computed(() => ({\r\n    [`${XTimelinePrefix}-${this.mode()}`]: !XIsEmpty(this.mode()),\r\n    [`${XTimelinePrefix}-${this.size()}`]: !XIsEmpty(this.size())\r\n  }));\r\n\r\n  nodes = computed(() => {\r\n    const data = this.data();\r\n    this.setDashed(data);\r\n    return data;\r\n  });\r\n\r\n  private setDashed(nodes: XTimelineNode[]) {\r\n    const len = nodes.length;\r\n    if (len <= 1) return;\r\n    for (let i = 0; i < nodes.length; i++) {\r\n      let node = nodes[i];\r\n      if (!node.loading) continue;\r\n      if (i === 0) {\r\n        node.dashed = true;\r\n      } else if (i > 0) {\r\n        nodes[i - 1].dashed = true;\r\n      }\r\n    }\r\n  }\r\n}\r\n","<div #timeline class=\"x-timeline\" [class.x-timeline-number]=\"showNumber()\" [ngClass]=\"classMap()\">\r\n  <ul>\r\n    @for (node of nodes(); track node.id) {\r\n      <li [class.x-timeline-loading]=\"node.loading\">\r\n        <div class=\"x-timeline-tail\" [class.x-timeline-tail-dashed]=\"node.dashed\"></div>\r\n        @if (icon()) {\r\n          <div class=\"x-timeline-icon\">\r\n            <ng-container *xOutlet=\"icon(); context: { $node: node, $index }\"></ng-container>\r\n          </div>\r\n        } @else {\r\n          <div\r\n            class=\"x-timeline-icon {{ node.type ? 'x-timeline-' + node.type : '' }}\"\r\n            [style.background-color]=\"node.color\"\r\n          >\r\n            @if (showNumber() && !node.icon && !node.loading) {\r\n              {{ $index + 1 }}\r\n            }\r\n            @if (node.icon && !node.loading) {\r\n              <x-icon [type]=\"node.icon\"></x-icon>\r\n            }\r\n            @if (node.loading) {\r\n              <x-loading inline [x-loading]=\"true\" [type]=\"loadingType()\"></x-loading>\r\n            }\r\n          </div>\r\n        }\r\n        <div class=\"x-timeline-wrapper\">\r\n          <ng-container *xOutlet=\"wrapper(); context: { $node: node, $index }\">\r\n            <div class=\"x-timeline-label\">\r\n              @if (node.label) {\r\n                <x-link>{{ node.label }}</x-link>\r\n              }\r\n              <span class=\"x-timeline-time\" [title]=\"node.time | date: 'yyyy-MM-dd HH:mm:ss'\">{{\r\n                node.time | xTimeAgo\r\n              }}</span>\r\n            </div>\r\n            <div class=\"x-timeline-content\">{{ node.content }}</div>\r\n          </ng-container>\r\n        </div>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { XTimelineComponent } from './timeline.component';\r\n\r\n@NgModule({\r\n  exports: [XTimelineComponent],\r\n  imports: [XTimelineComponent]\r\n})\r\nexport class XTimelineModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,19 +1,21 @@
 import { HttpClient, HttpRequest, HttpHeaders, HttpEventType } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { input, output, Component, computed, viewChild, signal, inject, Renderer2, ChangeDetectionStrategy, ViewEncapsulation, ViewContainerRef, NgModule } from '@angular/core';
-import { XToBoolean, XToNumber, XClamp, XIsTemplateRef, XIsEmpty, XIsArray } from '@ng-nest/ui/core';
+import { input, output, Component, computed, viewChild, signal, inject, Renderer2, ChangeDetectionStrategy, ViewEncapsulation, DOCUMENT as DOCUMENT$1, RendererFactory2, Injectable, ViewContainerRef, ElementRef, effect, untracked, HostBinding, NgModule } from '@angular/core';
+import { XToBoolean, XToNumber, XClamp, XComputedStyle, XIsTemplateRef, XIsEmpty, XIsArray } from '@ng-nest/ui/core';
 import { XFormControlFunction, XValueAccessor } from '@ng-nest/ui/base-form';
 import { takeUntil, map } from 'rxjs/operators';
 import { XI18nService, zh_CN } from '@ng-nest/ui/i18n';
 import { XPortalService } from '@ng-nest/ui/portal';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
-import { Subject, fromEvent } from 'rxjs';
+import { Subject, fromEvent, Subscription } from 'rxjs';
 import { XIconComponent } from '@ng-nest/ui/icon';
 import { XOutletDirective } from '@ng-nest/ui/outlet';
 import { XButtonComponent } from '@ng-nest/ui/button';
 import { XImageGroupComponent, XImageComponent } from '@ng-nest/ui/image';
 import { XProgressComponent } from '@ng-nest/ui/progress';
 import { toSignal } from '@angular/core/rxjs-interop';
+import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
 
 /**
  * Upload
@@ -38,6 +40,31 @@ class XUploadProperty extends XFormControlFunction(X_UPLOAD_CONFIG_NAME) {
          * @en_US Request address
          */
         this.action = input(...(ngDevMode ? [undefined, { debugName: "action" }] : []));
+        /**
+         * @zh_CN 可拖拽上传的区域
+         * @en_US Drag and drop upload area
+         */
+        this.dropContainer = input(...(ngDevMode ? [undefined, { debugName: "dropContainer" }] : []));
+        /**
+         * @zh_CN 可拖拽上传的区域的图标
+         * @en_US Drag and drop upload area icon
+         */
+        this.dropIcon = input(...(ngDevMode ? [undefined, { debugName: "dropIcon" }] : []));
+        /**
+         * @zh_CN 可拖拽上传的区域的标题
+         * @en_US Drag and drop upload area title
+         */
+        this.dropTitle = input(...(ngDevMode ? [undefined, { debugName: "dropTitle" }] : []));
+        /**
+         * @zh_CN 可拖拽上传的区域的描述
+         * @en_US Drag and drop upload area description
+         */
+        this.dropDescription = input(...(ngDevMode ? [undefined, { debugName: "dropDescription" }] : []));
+        /**
+         * @zh_CN 直接显示可拖拽上传的区域
+         * @en_US Show the drag and drop upload area directly
+         */
+        this.showDrop = input(false, ...(ngDevMode ? [{ debugName: "showDrop", transform: XToBoolean }] : [{ transform: XToBoolean }]));
         /**
          * @zh_CN 上传文件类型，与原生的 input file 组件一致
          * @en_US Upload file type, consistent with native input file component
@@ -115,7 +142,7 @@ class XUploadProperty extends XFormControlFunction(X_UPLOAD_CONFIG_NAME) {
         this.uploadError = output();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XUploadProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XUploadProperty, isStandalone: true, selector: "x-upload-property", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, imgFallback: { classPropertyName: "imgFallback", publicName: "imgFallback", isSignal: true, isRequired: false, transformFunction: null }, imgCut: { classPropertyName: "imgCut", publicName: "imgCut", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, download: { classPropertyName: "download", publicName: "download", isSignal: true, isRequired: false, transformFunction: null }, multipleModel: { classPropertyName: "multipleModel", publicName: "multipleModel", isSignal: true, isRequired: false, transformFunction: null }, filesTpl: { classPropertyName: "filesTpl", publicName: "filesTpl", isSignal: true, isRequired: false, transformFunction: null }, maxLimit: { classPropertyName: "maxLimit", publicName: "maxLimit", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeClick: "removeClick", uploadReady: "uploadReady", uploading: "uploading", uploadSuccess: "uploadSuccess", uploadError: "uploadError" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XUploadProperty, isStandalone: true, selector: "x-upload-property", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, dropContainer: { classPropertyName: "dropContainer", publicName: "dropContainer", isSignal: true, isRequired: false, transformFunction: null }, dropIcon: { classPropertyName: "dropIcon", publicName: "dropIcon", isSignal: true, isRequired: false, transformFunction: null }, dropTitle: { classPropertyName: "dropTitle", publicName: "dropTitle", isSignal: true, isRequired: false, transformFunction: null }, dropDescription: { classPropertyName: "dropDescription", publicName: "dropDescription", isSignal: true, isRequired: false, transformFunction: null }, showDrop: { classPropertyName: "showDrop", publicName: "showDrop", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, imgFallback: { classPropertyName: "imgFallback", publicName: "imgFallback", isSignal: true, isRequired: false, transformFunction: null }, imgCut: { classPropertyName: "imgCut", publicName: "imgCut", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, download: { classPropertyName: "download", publicName: "download", isSignal: true, isRequired: false, transformFunction: null }, multipleModel: { classPropertyName: "multipleModel", publicName: "multipleModel", isSignal: true, isRequired: false, transformFunction: null }, filesTpl: { classPropertyName: "filesTpl", publicName: "filesTpl", isSignal: true, isRequired: false, transformFunction: null }, maxLimit: { classPropertyName: "maxLimit", publicName: "maxLimit", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeClick: "removeClick", uploadReady: "uploadReady", uploading: "uploading", uploadSuccess: "uploadSuccess", uploadError: "uploadError" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XUploadProperty, decorators: [{
             type: Component,
@@ -317,7 +344,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             args: [{ selector: `${XUploadPortalPrefix}`, imports: [XIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-upload-portal {{ cutType() }}\" [class.x-upload-portal-ready]=\"ready()\">\r\n  <div class=\"x-upload-portal-tools\">\r\n    <div class=\"x-upload-portal-title\">\r\n      <x-icon type=\"fto-image\"></x-icon>\r\n      <span>{{ name() }}</span>\r\n    </div>\r\n    <x-icon class=\"x-upload-portal-close\" type=\"fto-x\" (click)=\"closePortal.emit()\"></x-icon>\r\n  </div>\r\n  <div class=\"x-upload-portal-img\">\r\n    <img #imgRef class=\"x-upload-portal-full-img\" [src]=\"url()\" />\r\n    <div #boundaryRef class=\"x-upload-portal-boundary\">\r\n      <img #imgClipRef class=\"x-upload-portal-clip-img\" [src]=\"url()\" />\r\n      <div #cutRef class=\"x-upload-portal-cut\">\r\n        <div class=\"x-upload-portal-cut-top-start\"></div>\r\n        <div class=\"x-upload-portal-cut-top\"></div>\r\n        <div class=\"x-upload-portal-cut-top-end\"></div>\r\n        <div class=\"x-upload-portal-cut-left\"></div>\r\n        <div class=\"x-upload-portal-cut-right\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom-start\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom\"></div>\r\n        <div class=\"x-upload-portal-cut-bottom-end\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"x-upload-portal-bottom-tools\">\r\n    <x-icon class=\"x-upload-portal-close\" type=\"fto-check\" (click)=\"sure()\"></x-icon>\r\n  </div>\r\n</div>\r\n", styles: ["x-upload-portal{width:100%;height:100%}.x-upload-portal{margin:0;padding:0}.x-upload-portal{display:flex;position:relative;width:100%;height:100%;flex-direction:column}.x-upload-portal-tools{width:100%;height:3.25rem;display:flex;align-items:center;justify-content:space-between;position:absolute;z-index:1;color:#fff}.x-upload-portal-bottom-tools{width:100%;height:3.25rem;position:absolute;display:flex;justify-content:center;align-items:center;z-index:1;color:#fff;bottom:0}.x-upload-portal-title{display:flex;align-items:center;margin:0 1rem}.x-upload-portal-title>x-icon{font-size:1.25rem}.x-upload-portal-title>span{margin-left:.5rem}.x-upload-portal-close{font-size:1.75rem;padding:0 1rem;color:#fffc;transition:color var(--x-animation-duration-base);cursor:pointer}.x-upload-portal-close:hover{color:#fff}.x-upload-portal-img{flex:1;width:100%;position:relative;overflow:auto}.x-upload-portal-full-img{max-width:85%;max-height:85%;width:auto;height:auto;position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0)}.x-upload-portal-clip-img{position:absolute}.x-upload-portal-ready .x-upload-portal-full-img{max-width:inherit;max-height:inherit}.x-upload-portal-boundary{width:0;height:0;left:50%;top:50%;transform:translate3d(-50%,-50%,0);position:relative;background-color:#00000080}.x-upload-portal-cut{width:0;height:0;border:.125rem var(--x-border-style) rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;position:relative;cursor:move}.x-upload-portal-cut-top-start,.x-upload-portal-cut-top,.x-upload-portal-cut-top-end,.x-upload-portal-cut-left,.x-upload-portal-cut-right,.x-upload-portal-cut-bottom-start,.x-upload-portal-cut-bottom,.x-upload-portal-cut-bottom-end{width:.825rem;height:.825rem;background:#fff;position:absolute;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius)}.x-upload-portal-cut-top-start{top:-.4125rem;left:-.4125rem;cursor:se-resize}.x-upload-portal-cut-top{top:-.4125rem;cursor:s-resize}.x-upload-portal-cut-top-end{top:-.4125rem;right:-.4125rem;cursor:ne-resize}.x-upload-portal-cut-left{left:-.4125rem;cursor:w-resize}.x-upload-portal-cut-right{right:-.4125rem;cursor:w-resize}.x-upload-portal-cut-bottom-start{left:-.4125rem;bottom:-.4125rem;cursor:ne-resize}.x-upload-portal-cut-bottom{bottom:-.4125rem;cursor:s-resize}.x-upload-portal-cut-bottom-end{right:-.4125rem;bottom:-.4125rem;cursor:se-resize}.x-upload-portal-top-start{cursor:se-resize}.x-upload-portal-top{cursor:s-resize}.x-upload-portal-top-end{cursor:ne-resize}.x-upload-portal-left,.x-upload-portal-right{cursor:w-resize}.x-upload-portal-bottom-start{cursor:ne-resize}.x-upload-portal-bottom{cursor:s-resize}.x-upload-portal-bottom-end{cursor:se-resize}\n"] }]
         }] });
 
+class XDragOverlayComponent {
+    constructor() {
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+        this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
+        this.iconString = computed(() => this.icon(), ...(ngDevMode ? [{ debugName: "iconString" }] : []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XDragOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XDragOverlayComponent, isStandalone: true, selector: "x-drag-overlay", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"x-drag-overlay\">\r\n  @if (icon()) {\r\n    <div class=\"x-drag-overlay-icon\">\r\n      <ng-container *xOutlet=\"icon()\">\r\n        <x-icon [type]=\"iconString()\"></x-icon>\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  @if (title()) {\r\n    <div class=\"x-drag-overlay-title\">\r\n      <ng-container *xOutlet=\"title()\">\r\n        {{ title() }}\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  @if (description()) {\r\n    <div class=\"x-drag-overlay-description\">\r\n      <ng-container *xOutlet=\"description()\">\r\n        {{ description() }}\r\n      </ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["x-drag-overlay{width:100%;height:100%}.x-drag-overlay{margin:0;padding:0}.x-drag-overlay{position:absolute;inset:0;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);border:var(--x-border-width) dashed var(--x-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.x-drag-overlay-icon{font-size:2rem}.x-drag-overlay-title{font-size:1rem}.x-drag-overlay-description{color:var(--x-text-400)}\n"], dependencies: [{ kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XDragOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'x-drag-overlay', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [XOutletDirective, XIconComponent], template: "<div class=\"x-drag-overlay\">\r\n  @if (icon()) {\r\n    <div class=\"x-drag-overlay-icon\">\r\n      <ng-container *xOutlet=\"icon()\">\r\n        <x-icon [type]=\"iconString()\"></x-icon>\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  @if (title()) {\r\n    <div class=\"x-drag-overlay-title\">\r\n      <ng-container *xOutlet=\"title()\">\r\n        {{ title() }}\r\n      </ng-container>\r\n    </div>\r\n  }\r\n  @if (description()) {\r\n    <div class=\"x-drag-overlay-description\">\r\n      <ng-container *xOutlet=\"description()\">\r\n        {{ description() }}\r\n      </ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["x-drag-overlay{width:100%;height:100%}.x-drag-overlay{margin:0;padding:0}.x-drag-overlay{position:absolute;inset:0;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);border:var(--x-border-width) dashed var(--x-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.x-drag-overlay-icon{font-size:2rem}.x-drag-overlay-title{font-size:1rem}.x-drag-overlay-description{color:var(--x-text-400)}\n"] }]
+        }] });
+
+class XDragOverlayService {
+    constructor() {
+        this.overlay = inject(Overlay);
+        this.document = inject(DOCUMENT$1);
+        this.overlayRef = null;
+        this.componentRef = null;
+        this.containerPosition = '';
+        this.factory = inject(RendererFactory2);
+        this.renderer = this.factory.createRenderer(null, null);
+    }
+    createOverlay(container, params) {
+        this.removeOverlay(container);
+        this.containerPosition = container.style.position;
+        this.renderer.setStyle(container, 'position', 'relative');
+        const overlayConfig = new OverlayConfig({
+            positionStrategy: this.overlay.position().global(),
+            hasBackdrop: false,
+            scrollStrategy: this.overlay.scrollStrategies.reposition()
+        });
+        this.overlayRef = this.overlay.create(overlayConfig);
+        if (this.overlayRef && this.overlayRef.overlayElement) {
+            this.renderer.setStyle(this.overlayRef.overlayElement, 'width', container.offsetWidth + 'px');
+            this.renderer.setStyle(this.overlayRef.overlayElement, 'height', container.offsetHeight + 'px');
+            this.renderer.setStyle(this.overlayRef.overlayElement, 'border-radius', XComputedStyle(container, 'border-radius'));
+            this.renderer.setStyle(this.overlayRef.overlayElement, 'position', 'absolute');
+            this.renderer.setStyle(this.overlayRef.overlayElement, 'pointer-events', 'none');
+            this.renderer.setStyle(this.overlayRef.overlayElement, 'z-index', 'none');
+        }
+        const portal = new ComponentPortal(XDragOverlayComponent);
+        this.componentRef = this.overlayRef.attach(portal);
+        this.componentRef.setInput('icon', params.icon);
+        this.componentRef.setInput('title', params.title);
+        this.componentRef.setInput('description', params.description);
+        if (this.overlayRef && this.overlayRef.overlayElement) {
+            container.appendChild(this.overlayRef.overlayElement);
+        }
+    }
+    removeOverlay(container) {
+        if (this.overlayRef) {
+            const resizeObserver = this.overlayRef.resizeObserver;
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+            if (this.overlayRef.overlayElement && this.overlayRef.overlayElement.parentNode) {
+                this.overlayRef.overlayElement.parentNode.removeChild(this.overlayRef.overlayElement);
+            }
+            this.renderer.setStyle(container, 'position', this.containerPosition);
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+            this.componentRef = null;
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XDragOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XDragOverlayService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XDragOverlayService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 class XUploadComponent extends XUploadProperty {
+    get getShowDrop() {
+        return this.showDrop();
+    }
     writeValue(value) {
         this.value.set(value);
         this.setFiles();
@@ -328,6 +435,10 @@ class XUploadComponent extends XUploadProperty {
         this.portalService = inject(XPortalService);
         this.viewContainerRef = inject(ViewContainerRef);
         this.i18n = inject(XI18nService);
+        this.renderer = inject(Renderer2);
+        this.dragOverlayService = inject(XDragOverlayService);
+        this.dragCounter = 0;
+        this.elementRef = inject(ElementRef);
         this.file = viewChild.required('file');
         this.files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : []));
         this.showUpload = signal(false, ...(ngDevMode ? [{ debugName: "showUpload" }] : []));
@@ -343,6 +454,82 @@ class XUploadComponent extends XUploadProperty {
         if (!this.http) {
             throw new Error(`${XUploadPrefix}: Not found 'HttpClient', You can import 'HttpClientModule' in your root module.`);
         }
+        effect(() => {
+            const container = this.dropContainer();
+            untracked(() => {
+                this.setupDropContainer(container);
+            });
+        });
+    }
+    ngAfterViewInit() {
+        if (this.showDrop() && this.dropContainer()) {
+            this.setupDropContainer(this.dropContainer());
+        }
+    }
+    ngOnDestory() {
+        if (this.dropSubscription) {
+            this.dropSubscription.unsubscribe();
+        }
+    }
+    setupDropContainer(container) {
+        if (this.dropSubscription) {
+            this.dropSubscription.unsubscribe();
+        }
+        if (!container)
+            return;
+        const element = container instanceof ElementRef ? container.nativeElement : container;
+        const dragEnter$ = fromEvent(element, 'dragenter');
+        const dragOver$ = fromEvent(element, 'dragover');
+        const dragLeave$ = fromEvent(element, 'dragleave');
+        const drop$ = fromEvent(element, 'drop');
+        this.dropSubscription = new Subscription();
+        this.dropSubscription.add(dragEnter$.subscribe((event) => {
+            event.preventDefault();
+            this.dragCounter++;
+            if (this.dragCounter === 1) {
+                this.addDragOverStyle(element);
+            }
+        }));
+        this.dropSubscription.add(dragOver$.subscribe((event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        }));
+        this.dropSubscription.add(dragLeave$.subscribe((event) => {
+            event.preventDefault();
+            this.dragCounter--;
+            if (this.dragCounter === 0) {
+                this.removeDragOverStyle(element);
+            }
+        }));
+        this.dropSubscription.add(drop$.subscribe((event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.dragCounter = 0;
+            this.removeDragOverStyle(element);
+            const files = event.dataTransfer?.files;
+            if (files && files.length > 0) {
+                this.handleFiles(files);
+            }
+        }));
+    }
+    addDragOverStyle(element) {
+        if (this.showDrop()) {
+            this.renderer.addClass(this.elementRef.nativeElement, 'x-upload-drag-over');
+        }
+        else {
+            const icon = this.dropIcon();
+            const title = this.dropTitle();
+            const description = this.dropDescription();
+            this.dragOverlayService.createOverlay(element, { icon, title, description });
+        }
+    }
+    removeDragOverStyle(element) {
+        if (this.showDrop()) {
+            this.renderer.removeClass(this.elementRef.nativeElement, 'x-upload-drag-over');
+        }
+        else {
+            this.dragOverlayService.removeOverlay(element);
+        }
     }
     setFiles() {
         if (!Array.isArray(this.value()))
@@ -357,10 +544,14 @@ class XUploadComponent extends XUploadProperty {
         let input = event.target;
         if (typeof input === 'undefined' || input.files?.length === 0)
             return;
+        this.handleFiles(input.files);
+        input.value = '';
+    }
+    handleFiles(fileList) {
         let files = [];
-        let max = this.maxLimit() > -1 ? this.maxLimit() : input.files.length;
+        let max = this.maxLimit() > -1 ? this.maxLimit() : fileList.length;
         for (let i = 0; i < max; i++) {
-            let file = input.files.item(i);
+            let file = fileList.item(i);
             file.state = 'ready';
             files = [...files, file];
         }
@@ -375,7 +566,6 @@ class XUploadComponent extends XUploadProperty {
         this.value.set(this.files());
         this.onChange && this.onChange(this.value());
         this.onUploading();
-        input.value = '';
     }
     remove(file, index) {
         this.files.update((x) => {
@@ -515,7 +705,7 @@ class XUploadComponent extends XUploadProperty {
         file.state = 'success';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XUploadComponent, isStandalone: true, selector: "x-upload", providers: [XValueAccessor(XUploadComponent)], viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #upload class=\"x-upload x-upload-{{ type() }}\" [class.x-disabled]=\"disabledComputed()\">\r\n  <input\r\n    class=\"x-upload-input\"\r\n    type=\"file\"\r\n    #file\r\n    (change)=\"change($event)\"\r\n    [attr.accept]=\"acceptSignal()\"\r\n    [multiple]=\"multiple()\"\r\n    style=\"display: none\"\r\n  />\r\n\r\n  @switch (type()) {\r\n    @case ('list') {\r\n      <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      <ng-container *xOutlet=\"filesTpl(); context: { $files: files() }\">\r\n        <ul class=\"x-upload-files\">\r\n          @for (file of files(); track file; let i = $index) {\r\n            <li [class.x-upload-disabled]=\"!download()\">\r\n              @if (download()) {\r\n                <a [href]=\"file.url\" target=\"_blank\" [title]=\"file.name\">\r\n                  <x-icon type=\"fto-file-text\"></x-icon>\r\n                  <span class=\"x-upload-filename\">{{ file.name }}</span>\r\n                </a>\r\n              } @else {\r\n                <a>\r\n                  <x-icon type=\"fto-file-text\"></x-icon>\r\n                  <span class=\"x-upload-filename\">{{ file.name }}</span>\r\n                </a>\r\n              }\r\n\r\n              @switch (file.state) {\r\n                @case ('ready') {\r\n                  <x-icon class=\"x-upload-state\" type=\"fto-clock\"></x-icon>\r\n                }\r\n                @case ('uploading') {\r\n                  <span class=\"x-upload-percent\">{{ file.percent }}%</span>\r\n                }\r\n                @case ('success') {\r\n                  <x-icon class=\"x-upload-state success\" type=\"fto-check\"></x-icon>\r\n                }\r\n                @case ('error') {\r\n                  <x-icon class=\"x-upload-state error\" type=\"fto-info\"></x-icon>\r\n                }\r\n              }\r\n              @if (file.state !== 'uploading') {\r\n                <x-button icon=\"fto-x\" (click)=\"remove(file, i)\" closable onlyIcon flat size=\"mini\"></x-button>\r\n              }\r\n            </li>\r\n          }\r\n        </ul>\r\n      </ng-container>\r\n    }\r\n    @case ('img') {\r\n      <x-image-group>\r\n        @for (file of files(); track file; let i = $index) {\r\n          <x-image\r\n            [src]=\"file.url\"\r\n            (load)=\"imgLoad(file)\"\r\n            (error)=\"imgError($event, file)\"\r\n            class=\"{{ file.state }}\"\r\n            [previewTpl]=\"previewTpl\"\r\n            [fallback]=\"imgFallback()\"\r\n          >\r\n          </x-image>\r\n          <ng-template #previewTpl let-image=\"$image\">\r\n            @if (file.state == 'uploading') {\r\n              <div class=\"x-upload-uploading\">\r\n                <x-progress [percent]=\"file.percent!\" info=\"false\"></x-progress>\r\n              </div>\r\n            }\r\n            <div class=\"x-image-overlay\">\r\n              @switch (file.state) {\r\n                @case ('ready') {\r\n                  <x-icon class=\"x-upload-state\" type=\"fto-clock\"></x-icon>\r\n                }\r\n                @case ('success') {\r\n                  <x-icon type=\"fto-eye\" (click)=\"image.onPreview()\"></x-icon>\r\n                }\r\n              }\r\n              @if (imgCut() && file.state === 'success') {\r\n                <x-icon type=\"fto-crop\" (click)=\"onImgCut(file, i)\"></x-icon>\r\n              }\r\n              @if (file.state !== 'uploading') {\r\n                <x-icon type=\"fto-trash-2\" (click)=\"remove(file, i)\"></x-icon>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n        }\r\n        <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      </x-image-group>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #uploadBtnTpl>\r\n  <div class=\"x-upload-buttons\" [class.x-upload-buttons-template]=\"isTemplateText()\" (click)=\"uploadClick()\">\r\n    <ng-container *xOutlet=\"getText()\">\r\n      <x-button icon=\"fto-upload\" class=\"x-upload-text\" [disabled]=\"disabledComputed()\" type=\"primary\">{{\r\n        getText()\r\n      }}</x-button>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-upload{margin:0;padding:0}.x-upload{color:var(--x-text);font-size:var(--x-font-size)}.x-upload-buttons{display:inline-flex}.x-upload-buttons>.x-button:not(:first-child){margin-left:.4rem}.x-upload-buttons-template{cursor:pointer}.x-upload-files{padding:0;margin:.4rem 0 0;list-style:none}.x-upload-files>li{margin:0;padding:0 .2rem;height:calc(var(--x-font-size) + .6rem);line-height:calc(var(--x-font-size) + .6rem);display:flex;align-items:center;overflow:hidden;cursor:pointer;border-radius:var(--x-border-radius)}.x-upload-files>li .x-icon{color:var(--x-text-400);font-size:1rem}.x-upload-files>li .x-icon.x-upload-state.success{color:var(--x-success)}.x-upload-files>li .x-icon.x-upload-state.error{color:var(--x-danger)}.x-upload-files>li a{flex:1;display:flex;align-items:center;height:calc(var(--x-font-size) + .6rem);line-height:calc(var(--x-font-size) + .6rem);color:inherit;text-decoration:none;overflow:hidden}.x-upload-files>li span.x-upload-filename{margin-left:.2rem;flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-upload-files>li span.x-upload-percent{color:var(--x-text-400)}.x-upload-files>li>.x-button{display:none;padding:0}.x-upload-files>li:not(:first-child){margin-top:.2rem}.x-upload-files>li.x-upload-disabled{cursor:default}.x-upload-files>li.x-upload-disabled>a{cursor:default}.x-upload-files>li:hover:not(.x-upload-disabled){color:var(--x-primary);background-color:var(--x-background)}.x-upload-files>li:hover>.x-button{display:inline-block}.x-upload-files>li:hover>.x-upload-state{display:none}.x-upload-img{display:flex;flex-wrap:wrap}.x-upload-img .x-upload-buttons-template{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;width:6.25rem;height:6.25rem;margin-right:.5rem;margin-bottom:.5rem;border:var(--x-border-width) dashed var(--x-border);background:var(--x-background);border-radius:var(--x-border-radius);transition:border-color var(--x-animation-duration-base)}.x-upload-img .x-upload-buttons-template:hover{border-color:var(--x-primary)}.x-upload-img .x-image{height:6.25rem;width:6.25rem;padding:.325rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);transition:border-color var(--x-animation-duration-base);margin-right:.5rem;margin-bottom:.5rem;position:relative;display:flex;align-items:center;justify-content:center}.x-upload-img .x-image-overlay{border-radius:var(--x-border-radius)}.x-upload-img .x-image-overlay x-icon{font-size:1rem;color:#fffc;padding:.25rem;transition:color var(--x-animation-duration-base)}.x-upload-img .x-image-overlay x-icon:hover{color:#fff}.x-upload-img x-image.error .x-image{border-color:var(--x-danger)}.x-upload-img x-image.error .x-image-error-icon{color:var(--x-danger)}.x-upload-uploading{position:absolute;margin-top:3rem;width:calc(100% - 1rem)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XImageGroupComponent, selector: "x-image-group" }, { kind: "component", type: XImageComponent, selector: "x-image" }, { kind: "component", type: XProgressComponent, selector: "x-progress" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XUploadComponent, isStandalone: true, selector: "x-upload", host: { properties: { "class.x-upload-show-drop": "this.getShowDrop" } }, providers: [XValueAccessor(XUploadComponent), XDragOverlayService], viewQueries: [{ propertyName: "file", first: true, predicate: ["file"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #upload class=\"x-upload x-upload-{{ type() }}\" [class.x-disabled]=\"disabledComputed()\">\r\n  <input\r\n    class=\"x-upload-input\"\r\n    type=\"file\"\r\n    #file\r\n    (change)=\"change($event)\"\r\n    [attr.accept]=\"acceptSignal()\"\r\n    [multiple]=\"multiple()\"\r\n    style=\"display: none\"\r\n  />\r\n\r\n  @switch (type()) {\r\n    @case ('list') {\r\n      <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      <ng-container *xOutlet=\"filesTpl(); context: { $files: files() }\">\r\n        @if (files() && files().length > 0) {\r\n          <ul class=\"x-upload-files\">\r\n            @for (file of files(); track file; let i = $index) {\r\n              <li [class.x-upload-disabled]=\"!download()\">\r\n                @if (download()) {\r\n                  <a [href]=\"file.url\" target=\"_blank\" [title]=\"file.name\">\r\n                    <x-icon type=\"fto-file-text\"></x-icon>\r\n                    <span class=\"x-upload-filename\">{{ file.name }}</span>\r\n                  </a>\r\n                } @else {\r\n                  <a>\r\n                    <x-icon type=\"fto-file-text\"></x-icon>\r\n                    <span class=\"x-upload-filename\">{{ file.name }}</span>\r\n                  </a>\r\n                }\r\n\r\n                @switch (file.state) {\r\n                  @case ('ready') {\r\n                    <x-icon class=\"x-upload-state\" type=\"fto-clock\"></x-icon>\r\n                  }\r\n                  @case ('uploading') {\r\n                    <span class=\"x-upload-percent\">{{ file.percent }}%</span>\r\n                  }\r\n                  @case ('success') {\r\n                    <x-icon class=\"x-upload-state success\" type=\"fto-check\"></x-icon>\r\n                  }\r\n                  @case ('error') {\r\n                    <x-icon class=\"x-upload-state error\" type=\"fto-info\"></x-icon>\r\n                  }\r\n                }\r\n                @if (file.state !== 'uploading') {\r\n                  <x-button icon=\"fto-x\" (click)=\"remove(file, i)\" closable onlyIcon flat size=\"mini\"></x-button>\r\n                }\r\n              </li>\r\n            }\r\n          </ul>\r\n        }\r\n      </ng-container>\r\n    }\r\n    @case ('img') {\r\n      <x-image-group>\r\n        @for (file of files(); track file; let i = $index) {\r\n          <x-image\r\n            [src]=\"file.url\"\r\n            (load)=\"imgLoad(file)\"\r\n            (error)=\"imgError($event, file)\"\r\n            class=\"{{ file.state }}\"\r\n            [previewTpl]=\"previewTpl\"\r\n            [fallback]=\"imgFallback()\"\r\n          >\r\n          </x-image>\r\n          <ng-template #previewTpl let-image=\"$image\">\r\n            @if (file.state == 'uploading') {\r\n              <div class=\"x-upload-uploading\">\r\n                <x-progress [percent]=\"file.percent!\" info=\"false\"></x-progress>\r\n              </div>\r\n            }\r\n            <div class=\"x-image-overlay\">\r\n              @switch (file.state) {\r\n                @case ('ready') {\r\n                  <x-icon class=\"x-upload-state\" type=\"fto-clock\"></x-icon>\r\n                }\r\n                @case ('success') {\r\n                  <x-icon type=\"fto-eye\" (click)=\"image.onPreview()\"></x-icon>\r\n                }\r\n              }\r\n              @if (imgCut() && file.state === 'success') {\r\n                <x-icon type=\"fto-crop\" (click)=\"onImgCut(file, i)\"></x-icon>\r\n              }\r\n              @if (file.state !== 'uploading') {\r\n                <x-icon type=\"fto-trash-2\" (click)=\"remove(file, i)\"></x-icon>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n        }\r\n        <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      </x-image-group>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #uploadBtnTpl>\r\n  @if (showDrop()) {\r\n    <x-drag-overlay\r\n      class=\"x-upload-drag-overlay\"\r\n      (click)=\"uploadClick()\"\r\n      [icon]=\"dropIcon()\"\r\n      [title]=\"dropTitle()\"\r\n      [description]=\"dropDescription()\"\r\n    ></x-drag-overlay>\r\n  } @else {\r\n    <div class=\"x-upload-buttons\" [class.x-upload-buttons-template]=\"isTemplateText()\" (click)=\"uploadClick()\">\r\n      <ng-container *xOutlet=\"getText()\">\r\n        <x-button icon=\"fto-upload\" class=\"x-upload-text\" [disabled]=\"disabledComputed()\" type=\"primary\">{{\r\n          getText()\r\n        }}</x-button>\r\n      </ng-container>\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [".x-upload{margin:0;padding:0}.x-upload{color:var(--x-text);font-size:var(--x-font-size)}.x-upload-buttons{display:inline-flex}.x-upload-buttons>.x-button:not(:first-child){margin-left:.4rem}.x-upload-buttons-template{cursor:pointer}.x-upload-files{padding:0;margin:.4rem 0 0;list-style:none}.x-upload-files>li{margin:0;padding:0 .2rem;height:calc(var(--x-font-size) + .6rem);line-height:calc(var(--x-font-size) + .6rem);display:flex;align-items:center;overflow:hidden;cursor:pointer;border-radius:var(--x-border-radius)}.x-upload-files>li .x-icon{color:var(--x-text-400);font-size:1rem}.x-upload-files>li .x-icon.x-upload-state.success{color:var(--x-success)}.x-upload-files>li .x-icon.x-upload-state.error{color:var(--x-danger)}.x-upload-files>li a{flex:1;display:flex;align-items:center;height:calc(var(--x-font-size) + .6rem);line-height:calc(var(--x-font-size) + .6rem);color:inherit;text-decoration:none;overflow:hidden}.x-upload-files>li span.x-upload-filename{margin-left:.2rem;flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-upload-files>li span.x-upload-percent{color:var(--x-text-400)}.x-upload-files>li>.x-button{display:none;padding:0}.x-upload-files>li:not(:first-child){margin-top:.2rem}.x-upload-files>li.x-upload-disabled{cursor:default}.x-upload-files>li.x-upload-disabled>a{cursor:default}.x-upload-files>li:hover:not(.x-upload-disabled){color:var(--x-primary);background-color:var(--x-background)}.x-upload-files>li:hover>.x-button{display:inline-block}.x-upload-files>li:hover>.x-upload-state{display:none}.x-upload-img{display:flex;flex-wrap:wrap}.x-upload-img .x-upload-buttons-template{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;width:6.25rem;height:6.25rem;margin-right:.5rem;margin-bottom:.5rem;border:var(--x-border-width) dashed var(--x-border);background:var(--x-background);border-radius:var(--x-border-radius);transition:border-color var(--x-animation-duration-base)}.x-upload-img .x-upload-buttons-template:hover{border-color:var(--x-primary)}.x-upload-img .x-image{height:6.25rem;width:6.25rem;padding:.325rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);transition:border-color var(--x-animation-duration-base);margin-right:.5rem;margin-bottom:.5rem;position:relative;display:flex;align-items:center;justify-content:center}.x-upload-img .x-image-overlay{border-radius:var(--x-border-radius)}.x-upload-img .x-image-overlay x-icon{font-size:1rem;color:#fffc;padding:.25rem;transition:color var(--x-animation-duration-base)}.x-upload-img .x-image-overlay x-icon:hover{color:#fff}.x-upload-img x-image.error .x-image{border-color:var(--x-danger)}.x-upload-img x-image.error .x-image-error-icon{color:var(--x-danger)}.x-upload-uploading{position:absolute;margin-top:3rem;width:calc(100% - 1rem)}.x-upload-show-drop{position:relative;display:block;width:100%;height:100%}.x-upload-drag-overlay .x-drag-overlay{border:var(--x-border-width) dashed var(--x-border);cursor:pointer;transition:all var(--x-animation-duration-base)}.x-upload-drag-overlay .x-drag-overlay:hover,.x-upload-drag-over .x-drag-overlay{border-color:var(--x-primary)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XImageGroupComponent, selector: "x-image-group" }, { kind: "component", type: XImageComponent, selector: "x-image" }, { kind: "component", type: XProgressComponent, selector: "x-progress" }, { kind: "component", type: XDragOverlayComponent, selector: "x-drag-overlay", inputs: ["icon", "title", "description"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XUploadComponent, decorators: [{
             type: Component,
@@ -526,9 +716,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         XButtonComponent,
                         XImageGroupComponent,
                         XImageComponent,
-                        XProgressComponent
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XUploadComponent)], template: "<div #upload class=\"x-upload x-upload-{{ type() }}\" [class.x-disabled]=\"disabledComputed()\">\r\n  <input\r\n    class=\"x-upload-input\"\r\n    type=\"file\"\r\n    #file\r\n    (change)=\"change($event)\"\r\n    [attr.accept]=\"acceptSignal()\"\r\n    [multiple]=\"multiple()\"\r\n    style=\"display: none\"\r\n  />\r\n\r\n  @switch (type()) {\r\n    @case ('list') {\r\n      <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      <ng-container *xOutlet=\"filesTpl(); context: { $files: files() }\">\r\n        <ul class=\"x-upload-files\">\r\n          @for (file of files(); track file; let i = $index) {\r\n            <li [class.x-upload-disabled]=\"!download()\">\r\n              @if (download()) {\r\n                <a [href]=\"file.url\" target=\"_blank\" [title]=\"file.name\">\r\n                  <x-icon type=\"fto-file-text\"></x-icon>\r\n                  <span class=\"x-upload-filename\">{{ file.name }}</span>\r\n                </a>\r\n              } @else {\r\n                <a>\r\n                  <x-icon type=\"fto-file-text\"></x-icon>\r\n                  <span class=\"x-upload-filename\">{{ file.name }}</span>\r\n                </a>\r\n              }\r\n\r\n              @switch (file.state) {\r\n                @case ('ready') {\r\n                  <x-icon class=\"x-upload-state\" type=\"fto-clock\"></x-icon>\r\n                }\r\n                @case ('uploading') {\r\n                  <span class=\"x-upload-percent\">{{ file.percent }}%</span>\r\n                }\r\n                @case ('success') {\r\n                  <x-icon class=\"x-upload-state success\" type=\"fto-check\"></x-icon>\r\n                }\r\n                @case ('error') {\r\n                  <x-icon class=\"x-upload-state error\" type=\"fto-info\"></x-icon>\r\n                }\r\n              }\r\n              @if (file.state !== 'uploading') {\r\n                <x-button icon=\"fto-x\" (click)=\"remove(file, i)\" closable onlyIcon flat size=\"mini\"></x-button>\r\n              }\r\n            </li>\r\n          }\r\n        </ul>\r\n      </ng-container>\r\n    }\r\n    @case ('img') {\r\n      <x-image-group>\r\n        @for (file of files(); track file; let i = $index) {\r\n          <x-image\r\n            [src]=\"file.url\"\r\n            (load)=\"imgLoad(file)\"\r\n            (error)=\"imgError($event, file)\"\r\n            class=\"{{ file.state }}\"\r\n            [previewTpl]=\"previewTpl\"\r\n            [fallback]=\"imgFallback()\"\r\n          >\r\n          </x-image>\r\n          <ng-template #previewTpl let-image=\"$image\">\r\n            @if (file.state == 'uploading') {\r\n              <div class=\"x-upload-uploading\">\r\n                <x-progress [percent]=\"file.percent!\" info=\"false\"></x-progress>\r\n              </div>\r\n            }\r\n            <div class=\"x-image-overlay\">\r\n              @switch (file.state) {\r\n                @case ('ready') {\r\n                  <x-icon class=\"x-upload-state\" type=\"fto-clock\"></x-icon>\r\n                }\r\n                @case ('success') {\r\n                  <x-icon type=\"fto-eye\" (click)=\"image.onPreview()\"></x-icon>\r\n                }\r\n              }\r\n              @if (imgCut() && file.state === 'success') {\r\n                <x-icon type=\"fto-crop\" (click)=\"onImgCut(file, i)\"></x-icon>\r\n              }\r\n              @if (file.state !== 'uploading') {\r\n                <x-icon type=\"fto-trash-2\" (click)=\"remove(file, i)\"></x-icon>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n        }\r\n        <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      </x-image-group>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #uploadBtnTpl>\r\n  <div class=\"x-upload-buttons\" [class.x-upload-buttons-template]=\"isTemplateText()\" (click)=\"uploadClick()\">\r\n    <ng-container *xOutlet=\"getText()\">\r\n      <x-button icon=\"fto-upload\" class=\"x-upload-text\" [disabled]=\"disabledComputed()\" type=\"primary\">{{\r\n        getText()\r\n      }}</x-button>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n", styles: [".x-upload{margin:0;padding:0}.x-upload{color:var(--x-text);font-size:var(--x-font-size)}.x-upload-buttons{display:inline-flex}.x-upload-buttons>.x-button:not(:first-child){margin-left:.4rem}.x-upload-buttons-template{cursor:pointer}.x-upload-files{padding:0;margin:.4rem 0 0;list-style:none}.x-upload-files>li{margin:0;padding:0 .2rem;height:calc(var(--x-font-size) + .6rem);line-height:calc(var(--x-font-size) + .6rem);display:flex;align-items:center;overflow:hidden;cursor:pointer;border-radius:var(--x-border-radius)}.x-upload-files>li .x-icon{color:var(--x-text-400);font-size:1rem}.x-upload-files>li .x-icon.x-upload-state.success{color:var(--x-success)}.x-upload-files>li .x-icon.x-upload-state.error{color:var(--x-danger)}.x-upload-files>li a{flex:1;display:flex;align-items:center;height:calc(var(--x-font-size) + .6rem);line-height:calc(var(--x-font-size) + .6rem);color:inherit;text-decoration:none;overflow:hidden}.x-upload-files>li span.x-upload-filename{margin-left:.2rem;flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-upload-files>li span.x-upload-percent{color:var(--x-text-400)}.x-upload-files>li>.x-button{display:none;padding:0}.x-upload-files>li:not(:first-child){margin-top:.2rem}.x-upload-files>li.x-upload-disabled{cursor:default}.x-upload-files>li.x-upload-disabled>a{cursor:default}.x-upload-files>li:hover:not(.x-upload-disabled){color:var(--x-primary);background-color:var(--x-background)}.x-upload-files>li:hover>.x-button{display:inline-block}.x-upload-files>li:hover>.x-upload-state{display:none}.x-upload-img{display:flex;flex-wrap:wrap}.x-upload-img .x-upload-buttons-template{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;width:6.25rem;height:6.25rem;margin-right:.5rem;margin-bottom:.5rem;border:var(--x-border-width) dashed var(--x-border);background:var(--x-background);border-radius:var(--x-border-radius);transition:border-color var(--x-animation-duration-base)}.x-upload-img .x-upload-buttons-template:hover{border-color:var(--x-primary)}.x-upload-img .x-image{height:6.25rem;width:6.25rem;padding:.325rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);transition:border-color var(--x-animation-duration-base);margin-right:.5rem;margin-bottom:.5rem;position:relative;display:flex;align-items:center;justify-content:center}.x-upload-img .x-image-overlay{border-radius:var(--x-border-radius)}.x-upload-img .x-image-overlay x-icon{font-size:1rem;color:#fffc;padding:.25rem;transition:color var(--x-animation-duration-base)}.x-upload-img .x-image-overlay x-icon:hover{color:#fff}.x-upload-img x-image.error .x-image{border-color:var(--x-danger)}.x-upload-img x-image.error .x-image-error-icon{color:var(--x-danger)}.x-upload-uploading{position:absolute;margin-top:3rem;width:calc(100% - 1rem)}\n"] }]
-        }], ctorParameters: () => [] });
+                        XProgressComponent,
+                        XDragOverlayComponent
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XUploadComponent), XDragOverlayService], template: "<div #upload class=\"x-upload x-upload-{{ type() }}\" [class.x-disabled]=\"disabledComputed()\">\r\n  <input\r\n    class=\"x-upload-input\"\r\n    type=\"file\"\r\n    #file\r\n    (change)=\"change($event)\"\r\n    [attr.accept]=\"acceptSignal()\"\r\n    [multiple]=\"multiple()\"\r\n    style=\"display: none\"\r\n  />\r\n\r\n  @switch (type()) {\r\n    @case ('list') {\r\n      <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      <ng-container *xOutlet=\"filesTpl(); context: { $files: files() }\">\r\n        @if (files() && files().length > 0) {\r\n          <ul class=\"x-upload-files\">\r\n            @for (file of files(); track file; let i = $index) {\r\n              <li [class.x-upload-disabled]=\"!download()\">\r\n                @if (download()) {\r\n                  <a [href]=\"file.url\" target=\"_blank\" [title]=\"file.name\">\r\n                    <x-icon type=\"fto-file-text\"></x-icon>\r\n                    <span class=\"x-upload-filename\">{{ file.name }}</span>\r\n                  </a>\r\n                } @else {\r\n                  <a>\r\n                    <x-icon type=\"fto-file-text\"></x-icon>\r\n                    <span class=\"x-upload-filename\">{{ file.name }}</span>\r\n                  </a>\r\n                }\r\n\r\n                @switch (file.state) {\r\n                  @case ('ready') {\r\n                    <x-icon class=\"x-upload-state\" type=\"fto-clock\"></x-icon>\r\n                  }\r\n                  @case ('uploading') {\r\n                    <span class=\"x-upload-percent\">{{ file.percent }}%</span>\r\n                  }\r\n                  @case ('success') {\r\n                    <x-icon class=\"x-upload-state success\" type=\"fto-check\"></x-icon>\r\n                  }\r\n                  @case ('error') {\r\n                    <x-icon class=\"x-upload-state error\" type=\"fto-info\"></x-icon>\r\n                  }\r\n                }\r\n                @if (file.state !== 'uploading') {\r\n                  <x-button icon=\"fto-x\" (click)=\"remove(file, i)\" closable onlyIcon flat size=\"mini\"></x-button>\r\n                }\r\n              </li>\r\n            }\r\n          </ul>\r\n        }\r\n      </ng-container>\r\n    }\r\n    @case ('img') {\r\n      <x-image-group>\r\n        @for (file of files(); track file; let i = $index) {\r\n          <x-image\r\n            [src]=\"file.url\"\r\n            (load)=\"imgLoad(file)\"\r\n            (error)=\"imgError($event, file)\"\r\n            class=\"{{ file.state }}\"\r\n            [previewTpl]=\"previewTpl\"\r\n            [fallback]=\"imgFallback()\"\r\n          >\r\n          </x-image>\r\n          <ng-template #previewTpl let-image=\"$image\">\r\n            @if (file.state == 'uploading') {\r\n              <div class=\"x-upload-uploading\">\r\n                <x-progress [percent]=\"file.percent!\" info=\"false\"></x-progress>\r\n              </div>\r\n            }\r\n            <div class=\"x-image-overlay\">\r\n              @switch (file.state) {\r\n                @case ('ready') {\r\n                  <x-icon class=\"x-upload-state\" type=\"fto-clock\"></x-icon>\r\n                }\r\n                @case ('success') {\r\n                  <x-icon type=\"fto-eye\" (click)=\"image.onPreview()\"></x-icon>\r\n                }\r\n              }\r\n              @if (imgCut() && file.state === 'success') {\r\n                <x-icon type=\"fto-crop\" (click)=\"onImgCut(file, i)\"></x-icon>\r\n              }\r\n              @if (file.state !== 'uploading') {\r\n                <x-icon type=\"fto-trash-2\" (click)=\"remove(file, i)\"></x-icon>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n        }\r\n        <ng-container *ngTemplateOutlet=\"uploadBtnTpl\"></ng-container>\r\n      </x-image-group>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #uploadBtnTpl>\r\n  @if (showDrop()) {\r\n    <x-drag-overlay\r\n      class=\"x-upload-drag-overlay\"\r\n      (click)=\"uploadClick()\"\r\n      [icon]=\"dropIcon()\"\r\n      [title]=\"dropTitle()\"\r\n      [description]=\"dropDescription()\"\r\n    ></x-drag-overlay>\r\n  } @else {\r\n    <div class=\"x-upload-buttons\" [class.x-upload-buttons-template]=\"isTemplateText()\" (click)=\"uploadClick()\">\r\n      <ng-container *xOutlet=\"getText()\">\r\n        <x-button icon=\"fto-upload\" class=\"x-upload-text\" [disabled]=\"disabledComputed()\" type=\"primary\">{{\r\n          getText()\r\n        }}</x-button>\r\n      </ng-container>\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [".x-upload{margin:0;padding:0}.x-upload{color:var(--x-text);font-size:var(--x-font-size)}.x-upload-buttons{display:inline-flex}.x-upload-buttons>.x-button:not(:first-child){margin-left:.4rem}.x-upload-buttons-template{cursor:pointer}.x-upload-files{padding:0;margin:.4rem 0 0;list-style:none}.x-upload-files>li{margin:0;padding:0 .2rem;height:calc(var(--x-font-size) + .6rem);line-height:calc(var(--x-font-size) + .6rem);display:flex;align-items:center;overflow:hidden;cursor:pointer;border-radius:var(--x-border-radius)}.x-upload-files>li .x-icon{color:var(--x-text-400);font-size:1rem}.x-upload-files>li .x-icon.x-upload-state.success{color:var(--x-success)}.x-upload-files>li .x-icon.x-upload-state.error{color:var(--x-danger)}.x-upload-files>li a{flex:1;display:flex;align-items:center;height:calc(var(--x-font-size) + .6rem);line-height:calc(var(--x-font-size) + .6rem);color:inherit;text-decoration:none;overflow:hidden}.x-upload-files>li span.x-upload-filename{margin-left:.2rem;flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-upload-files>li span.x-upload-percent{color:var(--x-text-400)}.x-upload-files>li>.x-button{display:none;padding:0}.x-upload-files>li:not(:first-child){margin-top:.2rem}.x-upload-files>li.x-upload-disabled{cursor:default}.x-upload-files>li.x-upload-disabled>a{cursor:default}.x-upload-files>li:hover:not(.x-upload-disabled){color:var(--x-primary);background-color:var(--x-background)}.x-upload-files>li:hover>.x-button{display:inline-block}.x-upload-files>li:hover>.x-upload-state{display:none}.x-upload-img{display:flex;flex-wrap:wrap}.x-upload-img .x-upload-buttons-template{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;width:6.25rem;height:6.25rem;margin-right:.5rem;margin-bottom:.5rem;border:var(--x-border-width) dashed var(--x-border);background:var(--x-background);border-radius:var(--x-border-radius);transition:border-color var(--x-animation-duration-base)}.x-upload-img .x-upload-buttons-template:hover{border-color:var(--x-primary)}.x-upload-img .x-image{height:6.25rem;width:6.25rem;padding:.325rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);transition:border-color var(--x-animation-duration-base);margin-right:.5rem;margin-bottom:.5rem;position:relative;display:flex;align-items:center;justify-content:center}.x-upload-img .x-image-overlay{border-radius:var(--x-border-radius)}.x-upload-img .x-image-overlay x-icon{font-size:1rem;color:#fffc;padding:.25rem;transition:color var(--x-animation-duration-base)}.x-upload-img .x-image-overlay x-icon:hover{color:#fff}.x-upload-img x-image.error .x-image{border-color:var(--x-danger)}.x-upload-img x-image.error .x-image-error-icon{color:var(--x-danger)}.x-upload-uploading{position:absolute;margin-top:3rem;width:calc(100% - 1rem)}.x-upload-show-drop{position:relative;display:block;width:100%;height:100%}.x-upload-drag-overlay .x-drag-overlay{border:var(--x-border-width) dashed var(--x-border);cursor:pointer;transition:all var(--x-animation-duration-base)}.x-upload-drag-overlay .x-drag-overlay:hover,.x-upload-drag-over .x-drag-overlay{border-color:var(--x-primary)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { getShowDrop: [{
+                type: HostBinding,
+                args: ['class.x-upload-show-drop']
+            }] } });
 
 class XUploadModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }