npm - @acorex/components - Versions diffs - 21.0.0-next.14 → 21.0.0-next.16 - Mend

@acorex/components 21.0.0-next.14 → 21.0.0-next.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (221) hide show

package/fesm2022/acorex-components-uploader.mjs CHANGED Viewed

@@ -294,10 +294,10 @@ class AXUploaderService {
         const updatedFiles = this._files$.value.filter((c) => c !== item);
         this._files$.next(updatedFiles);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXUploaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXUploaderService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXUploaderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -485,10 +485,10 @@ class AXUploaderZoneDirective {
     get __hostClass() {
         return `ax-drop-zone`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXUploaderZoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: AXUploaderZoneDirective, isStandalone: true, selector: "[axUploaderZone]", inputs: { multiple: "multiple", accept: "accept" }, outputs: { onChanged: "onChanged", onFileUploadComplete: "onFileUploadComplete", onFilesUploadComplete: "onFilesUploadComplete" }, host: { properties: { "class": "this.__hostClass" } }, providers: [AXUnsubscriber], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderZoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: AXUploaderZoneDirective, isStandalone: true, selector: "[axUploaderZone]", inputs: { multiple: "multiple", accept: "accept" }, outputs: { onChanged: "onChanged", onFileUploadComplete: "onFileUploadComplete", onFilesUploadComplete: "onFilesUploadComplete" }, host: { properties: { "class": "this.__hostClass" } }, providers: [AXUnsubscriber], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXUploaderZoneDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderZoneDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axUploaderZone]',
@@ -547,10 +547,10 @@ class AXUploaderBrowseDirective {
     async handleClick() {
         await this.uploaderZone.browser();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXUploaderBrowseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: AXUploaderBrowseDirective, isStandalone: true, selector: "[axUploaderBrowseHandle]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderBrowseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: AXUploaderBrowseDirective, isStandalone: true, selector: "[axUploaderBrowseHandle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXUploaderBrowseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderBrowseDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axUploaderBrowseHandle]' }]
         }] });
@@ -567,12 +567,12 @@ class AXUploaderListComponent {
          */
         this.uploadService = inject(AXUploaderService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXUploaderListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: AXUploaderListComponent, isStandalone: true, selector: "ax-uploader-list", providers: [{ provide: AXComponent, useExisting: AXUploaderListComponent }], ngImport: i0, template: "<!-- @if ((uploadService.totalEstimateTime | async) > 0) { -->\n<div class=\"ax-uploader-progress-status\" [class.ax-hide]=\"(uploadService.totalEstimateTime | async) <= 0\">\n  @if (uploadService.isAnyDetermined()) {\n    <span>{{ '@acorex:common.status.processing' | translate | async }}</span>\n  } @else {\n    <div>{{ uploadService.totalEstimateTime | async | format: 'timeleft' | async }}</div>\n  }\n  <button (click)=\"uploadService.cancelAll()\">{{ '@acorex:common.actions.cancel' | translate | async }}</button>\n</div>\n<!-- } -->\n\n<ul class=\"ax-uploader-list-items\">\n  @for (item of uploadService.files | async; track item.name) {\n    <li>\n      <div class=\"ax-file\">\n        <span>{{ item.ext }}</span>\n      </div>\n      <div class=\"ax-item-container\">\n        <div class=\"ax-item-name\" [title]=\"item.name\">{{ item.name }}</div>\n        <div class=\"ax-status\">\n          @switch (item.status()) {\n            @case ('inprogress') {\n              <span>{{ item.size | format: 'filesize' | async }}</span> /\n              {{\n                item.isDetermined()\n                  ? (item.estimateTime() | format: 'timeleft' | async)\n                  : ('@acorex:common.status.processing' | translate | async)\n              }}\n            }\n            @case ('failed') {\n              <div class=\"ax-state-failed\">\n                <span>{{ item.message() }}</span>\n              </div>\n            }\n            @case ('completed') {\n              <div class=\"ax-state-completed\">\n                <span>{{ '@acorex:common.status.completed' | translate | async }}</span>\n              </div>\n            }\n          }\n        </div>\n      </div>\n      <div class=\"ax-status\">\n        @switch (item.status()) {\n          @case ('completed') {\n            <i class=\"ax-icon ax-icon-solid ax-icon-check-circle ax-state-completed\"></i>\n          }\n          @case ('canceled') {\n            <div>\n              <span class=\"ax-state-canceled\">{{ '@acorex:common.actions.canceled' | translate | async }}</span>\n              <!-- <i class=\"ax-icon ax-icon-solid ax-icon-redo\" (click)=\"item.redo()\" title=\"{{ 'retry' | translate | async }}\"></i> -->\n            </div>\n          }\n          @case ('failed') {\n            <div class=\"ax-state-failed\">\n              <span>{{ '@acorex:common.status.failed' | translate | async }}</span>\n              <i\n                class=\"ax-icon ax-icon-solid ax-icon-redo\"\n                (click)=\"item.redo()\"\n                title=\"{{ '@acorex:common.actions.retry' | translate | async }}\"\n              ></i>\n            </div>\n          }\n          @default {\n            <!-- <ax-circular-progress\n              [mode]=\"item.isDetermined() ? 'determinate' : 'indeterminate'\"\n              [size]=\"22\"\n              [stroke]=\"6\"\n              [progress]=\"item.isDetermined() ? item.progress() : 60\"\n              class=\"ax-show\"\n            >\n            </ax-circular-progress> -->\n            <i\n              class=\"ax-icon ax-icon-solid ax-icon-close\"\n              (click)=\"item.cancel()\"\n              title=\"{{ '@acorex:common.actions.cancel' | translate | async }}\"\n            ></i>\n          }\n        }\n      </div>\n    </li>\n    @let completed = item.status() === 'completed';\n    @if (item.status() === 'inprogress' || completed) {\n      <div class=\"ax-status-loading\" [class.ax-status-loading-hide]=\"completed\">\n        <ax-progress-bar\n          [height]=\"4\"\n          [mode]=\"completed ? 'determinate' : 'indeterminate'\"\n          [progress]=\"completed ? 100 : 60\"\n          [color]=\"completed ? 'success' : 'primary'\"\n        ></ax-progress-bar>\n      </div>\n    }\n  }\n</ul>\n", styles: ["ax-uploader-list .ax-uploader-progress-status{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;border-top-width:1px;border-color:rgba(var(--ax-sys-color-primary-lightest-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface));padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-primary-lightest-surface));transition:.3s ease-out}ax-uploader-list .ax-uploader-progress-status.ax-hide{opacity:0;overflow:hidden;height:0;padding-top:0;padding-bottom:0;transition:.3s ease-out}ax-uploader-list .ax-uploader-list-items{max-height:75vh;width:100%;overflow-y:auto;overflow-x:hidden;gap:.5rem;display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li{display:flex;padding:.5rem 1rem;align-items:center;font-size:.875rem;line-height:1.25rem;gap:1rem;width:100%}ax-uploader-list .ax-uploader-list-items li .ax-item-container{display:flex;flex-direction:column;flex:1;-webkit-user-select:none;user-select:none}ax-uploader-list .ax-uploader-list-items li .ax-item-container .ax-item-name{font-size:.875rem;line-height:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;width:12rem}ax-uploader-list .ax-uploader-list-items li .ax-status{position:relative;color:rgba(var(--ax-sys-color-on-surface),.5)}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-icon{font-size:1.375rem}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-icon-close{cursor:pointer}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-canceled span{color:rgba(var(--ax-sys-color-secondary-surface))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed{display:flex;align-items:center;gap:.5rem}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed span{color:rgba(var(--ax-sys-color-danger-surface))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed i{cursor:pointer}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-completed{color:rgba(var(--ax-sys-color-success-surface))}ax-uploader-list .ax-uploader-list-items li:hover .ax-hide{display:flex!important}ax-uploader-list .ax-uploader-list-items li:hover .ax-show{display:none!important}ax-uploader-list .ax-uploader-list-items li .ax-show{display:flex!important}ax-uploader-list .ax-uploader-list-items li .ax-hide{display:none!important}ax-uploader-list .ax-uploader-list-items .ax-status-loading.ax-status-loading-hide{transition:all 1s linear;opacity:0;overflow:hidden}.ax-file{position:relative;display:flex;align-items:center;justify-content:center;width:1.5rem;aspect-ratio:.7;border-radius:.25rem;color:rgba(var(--ax-sys-color-light-surface));background-color:rgba(var(--ax-sys-color-success-surface))!important}.ax-file>*{position:absolute;bottom:.3rem;font-weight:700;font-size:.65rem;line-height:.65rem}.ax-file:before{content:\"\";position:absolute;top:0;right:0;border-width:0 12px 12px 0;border-color:rgba(var(--ax-sys-color-surface)) rgba(var(--ax-sys-color-surface)) rgba(var(--ax-sys-color-on-surface),.3) rgba(var(--ax-sys-color-on-surface),.3)}\n"], dependencies: [{ kind: "component", type: AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXUploaderListComponent, isStandalone: true, selector: "ax-uploader-list", providers: [{ provide: AXComponent, useExisting: AXUploaderListComponent }], ngImport: i0, template: "<!-- @if ((uploadService.totalEstimateTime | async) > 0) { -->\n<div class=\"ax-uploader-progress-status\" [class.ax-hide]=\"(uploadService.totalEstimateTime | async) <= 0\">\n  @if (uploadService.isAnyDetermined()) {\n    <span>{{ '@acorex:common.status.processing' | translate | async }}</span>\n  } @else {\n    <div>{{ uploadService.totalEstimateTime | async | format: 'timeleft' | async }}</div>\n  }\n  <button (click)=\"uploadService.cancelAll()\">{{ '@acorex:common.actions.cancel' | translate | async }}</button>\n</div>\n<!-- } -->\n\n<ul class=\"ax-uploader-list-items\">\n  @for (item of uploadService.files | async; track item.name) {\n    <li>\n      <div class=\"ax-file\">\n        <span>{{ item.ext }}</span>\n      </div>\n      <div class=\"ax-item-container\">\n        <div class=\"ax-item-name\" [title]=\"item.name\">{{ item.name }}</div>\n        <div class=\"ax-status\">\n          @switch (item.status()) {\n            @case ('inprogress') {\n              <span>{{ item.size | format: 'filesize' | async }}</span> /\n              {{\n                item.isDetermined()\n                  ? (item.estimateTime() | format: 'timeleft' | async)\n                  : ('@acorex:common.status.processing' | translate | async)\n              }}\n            }\n            @case ('failed') {\n              <div class=\"ax-state-failed\">\n                <span>{{ item.message() }}</span>\n              </div>\n            }\n            @case ('completed') {\n              <div class=\"ax-state-completed\">\n                <span>{{ '@acorex:common.status.completed' | translate | async }}</span>\n              </div>\n            }\n          }\n        </div>\n      </div>\n      <div class=\"ax-status\">\n        @switch (item.status()) {\n          @case ('completed') {\n            <i class=\"ax-icon ax-icon-solid ax-icon-check-circle ax-state-completed\"></i>\n          }\n          @case ('canceled') {\n            <div>\n              <span class=\"ax-state-canceled\">{{ '@acorex:common.actions.canceled' | translate | async }}</span>\n              <!-- <i class=\"ax-icon ax-icon-solid ax-icon-redo\" (click)=\"item.redo()\" title=\"{{ 'retry' | translate | async }}\"></i> -->\n            </div>\n          }\n          @case ('failed') {\n            <div class=\"ax-state-failed\">\n              <span>{{ '@acorex:common.status.failed' | translate | async }}</span>\n              <i\n                class=\"ax-icon ax-icon-solid ax-icon-redo\"\n                (click)=\"item.redo()\"\n                title=\"{{ '@acorex:common.actions.retry' | translate | async }}\"\n              ></i>\n            </div>\n          }\n          @default {\n            <!-- <ax-circular-progress\n              [mode]=\"item.isDetermined() ? 'determinate' : 'indeterminate'\"\n              [size]=\"22\"\n              [stroke]=\"6\"\n              [progress]=\"item.isDetermined() ? item.progress() : 60\"\n              class=\"ax-show\"\n            >\n            </ax-circular-progress> -->\n            <i\n              class=\"ax-icon ax-icon-solid ax-icon-close\"\n              (click)=\"item.cancel()\"\n              title=\"{{ '@acorex:common.actions.cancel' | translate | async }}\"\n            ></i>\n          }\n        }\n      </div>\n    </li>\n    @let completed = item.status() === 'completed';\n    @if (item.status() === 'inprogress' || completed) {\n      <div class=\"ax-status-loading\" [class.ax-status-loading-hide]=\"completed\">\n        <ax-progress-bar\n          [height]=\"4\"\n          [mode]=\"completed ? 'determinate' : 'indeterminate'\"\n          [progress]=\"completed ? 100 : 60\"\n          [color]=\"completed ? 'success' : 'primary'\"\n        ></ax-progress-bar>\n      </div>\n    }\n  }\n</ul>\n", styles: ["@reference \"../../../../../styles/themes/default.css\";ax-uploader-list .ax-uploader-progress-status{@apply border-primary-lightest bg-primary-lightest text-on-primary-lightest flex items-center justify-between border-y px-3 py-2 text-sm transition;}ax-uploader-list .ax-uploader-progress-status.ax-hide{@apply h-0 overflow-hidden py-0 opacity-0 transition-all;}ax-uploader-list .ax-uploader-list-items{@apply flex max-h-[75vh] w-full flex-col gap-2 overflow-x-hidden overflow-y-auto;}ax-uploader-list .ax-uploader-list-items li{@apply flex w-full items-center gap-4 px-4 py-2 text-sm;}ax-uploader-list .ax-uploader-list-items li .ax-item-container{@apply flex flex-1 flex-col select-none;}ax-uploader-list .ax-uploader-list-items li .ax-item-container .ax-item-name{@apply inline-block w-32 overflow-hidden text-sm text-ellipsis whitespace-nowrap;}ax-uploader-list .ax-uploader-list-items li .ax-status{@apply text-on-surface/50 relative;}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-icon{@apply text-xl;}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-icon-close{@apply cursor-pointer;}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-canceled span{@apply text-secondary;}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed{@apply flex items-center gap-2;}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed span{@apply text-danger;}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed i{@apply cursor-pointer;}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-completed{@apply text-success;}ax-uploader-list .ax-uploader-list-items li:hover .ax-hide{@apply flex!;}ax-uploader-list .ax-uploader-list-items li:hover .ax-show{@apply hidden!;}ax-uploader-list .ax-uploader-list-items li .ax-show{@apply flex!;}ax-uploader-list .ax-uploader-list-items li .ax-hide{@apply hidden!;}ax-uploader-list .ax-uploader-list-items .ax-status-loading.ax-status-loading-hide{@apply overflow-hidden opacity-0 transition-all;}.ax-file{@apply text-light bg-success relative flex aspect-square w-4 items-center justify-center rounded-sm;}.ax-file>*{@apply text-on-surface absolute bottom-1.5 text-xs font-bold;}.ax-file:before{@apply border-surface border-t-surface/30 border-l-surface/30 absolute top-0 right-0 border-0 border-r-4 border-b-4 content-[\"\"];}\n"], dependencies: [{ kind: "component", type: AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXUploaderListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-uploader-list', encapsulation: ViewEncapsulation.None, imports: [AXProgressBarComponent, AsyncPipe, AXTranslatorPipe, AXFormatPipe], providers: [{ provide: AXComponent, useExisting: AXUploaderListComponent }], template: "<!-- @if ((uploadService.totalEstimateTime | async) > 0) { -->\n<div class=\"ax-uploader-progress-status\" [class.ax-hide]=\"(uploadService.totalEstimateTime | async) <= 0\">\n  @if (uploadService.isAnyDetermined()) {\n    <span>{{ '@acorex:common.status.processing' | translate | async }}</span>\n  } @else {\n    <div>{{ uploadService.totalEstimateTime | async | format: 'timeleft' | async }}</div>\n  }\n  <button (click)=\"uploadService.cancelAll()\">{{ '@acorex:common.actions.cancel' | translate | async }}</button>\n</div>\n<!-- } -->\n\n<ul class=\"ax-uploader-list-items\">\n  @for (item of uploadService.files | async; track item.name) {\n    <li>\n      <div class=\"ax-file\">\n        <span>{{ item.ext }}</span>\n      </div>\n      <div class=\"ax-item-container\">\n        <div class=\"ax-item-name\" [title]=\"item.name\">{{ item.name }}</div>\n        <div class=\"ax-status\">\n          @switch (item.status()) {\n            @case ('inprogress') {\n              <span>{{ item.size | format: 'filesize' | async }}</span> /\n              {{\n                item.isDetermined()\n                  ? (item.estimateTime() | format: 'timeleft' | async)\n                  : ('@acorex:common.status.processing' | translate | async)\n              }}\n            }\n            @case ('failed') {\n              <div class=\"ax-state-failed\">\n                <span>{{ item.message() }}</span>\n              </div>\n            }\n            @case ('completed') {\n              <div class=\"ax-state-completed\">\n                <span>{{ '@acorex:common.status.completed' | translate | async }}</span>\n              </div>\n            }\n          }\n        </div>\n      </div>\n      <div class=\"ax-status\">\n        @switch (item.status()) {\n          @case ('completed') {\n            <i class=\"ax-icon ax-icon-solid ax-icon-check-circle ax-state-completed\"></i>\n          }\n          @case ('canceled') {\n            <div>\n              <span class=\"ax-state-canceled\">{{ '@acorex:common.actions.canceled' | translate | async }}</span>\n              <!-- <i class=\"ax-icon ax-icon-solid ax-icon-redo\" (click)=\"item.redo()\" title=\"{{ 'retry' | translate | async }}\"></i> -->\n            </div>\n          }\n          @case ('failed') {\n            <div class=\"ax-state-failed\">\n              <span>{{ '@acorex:common.status.failed' | translate | async }}</span>\n              <i\n                class=\"ax-icon ax-icon-solid ax-icon-redo\"\n                (click)=\"item.redo()\"\n                title=\"{{ '@acorex:common.actions.retry' | translate | async }}\"\n              ></i>\n            </div>\n          }\n          @default {\n            <!-- <ax-circular-progress\n              [mode]=\"item.isDetermined() ? 'determinate' : 'indeterminate'\"\n              [size]=\"22\"\n              [stroke]=\"6\"\n              [progress]=\"item.isDetermined() ? item.progress() : 60\"\n              class=\"ax-show\"\n            >\n            </ax-circular-progress> -->\n            <i\n              class=\"ax-icon ax-icon-solid ax-icon-close\"\n              (click)=\"item.cancel()\"\n              title=\"{{ '@acorex:common.actions.cancel' | translate | async }}\"\n            ></i>\n          }\n        }\n      </div>\n    </li>\n    @let completed = item.status() === 'completed';\n    @if (item.status() === 'inprogress' || completed) {\n      <div class=\"ax-status-loading\" [class.ax-status-loading-hide]=\"completed\">\n        <ax-progress-bar\n          [height]=\"4\"\n          [mode]=\"completed ? 'determinate' : 'indeterminate'\"\n          [progress]=\"completed ? 100 : 60\"\n          [color]=\"completed ? 'success' : 'primary'\"\n        ></ax-progress-bar>\n      </div>\n    }\n  }\n</ul>\n", styles: ["ax-uploader-list .ax-uploader-progress-status{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;border-top-width:1px;border-color:rgba(var(--ax-sys-color-primary-lightest-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface));padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-primary-lightest-surface));transition:.3s ease-out}ax-uploader-list .ax-uploader-progress-status.ax-hide{opacity:0;overflow:hidden;height:0;padding-top:0;padding-bottom:0;transition:.3s ease-out}ax-uploader-list .ax-uploader-list-items{max-height:75vh;width:100%;overflow-y:auto;overflow-x:hidden;gap:.5rem;display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li{display:flex;padding:.5rem 1rem;align-items:center;font-size:.875rem;line-height:1.25rem;gap:1rem;width:100%}ax-uploader-list .ax-uploader-list-items li .ax-item-container{display:flex;flex-direction:column;flex:1;-webkit-user-select:none;user-select:none}ax-uploader-list .ax-uploader-list-items li .ax-item-container .ax-item-name{font-size:.875rem;line-height:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;width:12rem}ax-uploader-list .ax-uploader-list-items li .ax-status{position:relative;color:rgba(var(--ax-sys-color-on-surface),.5)}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-icon{font-size:1.375rem}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-icon-close{cursor:pointer}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-canceled span{color:rgba(var(--ax-sys-color-secondary-surface))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed{display:flex;align-items:center;gap:.5rem}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed span{color:rgba(var(--ax-sys-color-danger-surface))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed i{cursor:pointer}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-completed{color:rgba(var(--ax-sys-color-success-surface))}ax-uploader-list .ax-uploader-list-items li:hover .ax-hide{display:flex!important}ax-uploader-list .ax-uploader-list-items li:hover .ax-show{display:none!important}ax-uploader-list .ax-uploader-list-items li .ax-show{display:flex!important}ax-uploader-list .ax-uploader-list-items li .ax-hide{display:none!important}ax-uploader-list .ax-uploader-list-items .ax-status-loading.ax-status-loading-hide{transition:all 1s linear;opacity:0;overflow:hidden}.ax-file{position:relative;display:flex;align-items:center;justify-content:center;width:1.5rem;aspect-ratio:.7;border-radius:.25rem;color:rgba(var(--ax-sys-color-light-surface));background-color:rgba(var(--ax-sys-color-success-surface))!important}.ax-file>*{position:absolute;bottom:.3rem;font-weight:700;font-size:.65rem;line-height:.65rem}.ax-file:before{content:\"\";position:absolute;top:0;right:0;border-width:0 12px 12px 0;border-color:rgba(var(--ax-sys-color-surface)) rgba(var(--ax-sys-color-surface)) rgba(var(--ax-sys-color-on-surface),.3) rgba(var(--ax-sys-color-on-surface),.3)}\n"] }]
+            args: [{ selector: 'ax-uploader-list', encapsulation: ViewEncapsulation.None, imports: [AXProgressBarComponent, AsyncPipe, AXTranslatorPipe, AXFormatPipe], providers: [{ provide: AXComponent, useExisting: AXUploaderListComponent }], template: "<!-- @if ((uploadService.totalEstimateTime | async) > 0) { -->\n<div class=\"ax-uploader-progress-status\" [class.ax-hide]=\"(uploadService.totalEstimateTime | async) <= 0\">\n  @if (uploadService.isAnyDetermined()) {\n    <span>{{ '@acorex:common.status.processing' | translate | async }}</span>\n  } @else {\n    <div>{{ uploadService.totalEstimateTime | async | format: 'timeleft' | async }}</div>\n  }\n  <button (click)=\"uploadService.cancelAll()\">{{ '@acorex:common.actions.cancel' | translate | async }}</button>\n</div>\n<!-- } -->\n\n<ul class=\"ax-uploader-list-items\">\n  @for (item of uploadService.files | async; track item.name) {\n    <li>\n      <div class=\"ax-file\">\n        <span>{{ item.ext }}</span>\n      </div>\n      <div class=\"ax-item-container\">\n        <div class=\"ax-item-name\" [title]=\"item.name\">{{ item.name }}</div>\n        <div class=\"ax-status\">\n          @switch (item.status()) {\n            @case ('inprogress') {\n              <span>{{ item.size | format: 'filesize' | async }}</span> /\n              {{\n                item.isDetermined()\n                  ? (item.estimateTime() | format: 'timeleft' | async)\n                  : ('@acorex:common.status.processing' | translate | async)\n              }}\n            }\n            @case ('failed') {\n              <div class=\"ax-state-failed\">\n                <span>{{ item.message() }}</span>\n              </div>\n            }\n            @case ('completed') {\n              <div class=\"ax-state-completed\">\n                <span>{{ '@acorex:common.status.completed' | translate | async }}</span>\n              </div>\n            }\n          }\n        </div>\n      </div>\n      <div class=\"ax-status\">\n        @switch (item.status()) {\n          @case ('completed') {\n            <i class=\"ax-icon ax-icon-solid ax-icon-check-circle ax-state-completed\"></i>\n          }\n          @case ('canceled') {\n            <div>\n              <span class=\"ax-state-canceled\">{{ '@acorex:common.actions.canceled' | translate | async }}</span>\n              <!-- <i class=\"ax-icon ax-icon-solid ax-icon-redo\" (click)=\"item.redo()\" title=\"{{ 'retry' | translate | async }}\"></i> -->\n            </div>\n          }\n          @case ('failed') {\n            <div class=\"ax-state-failed\">\n              <span>{{ '@acorex:common.status.failed' | translate | async }}</span>\n              <i\n                class=\"ax-icon ax-icon-solid ax-icon-redo\"\n                (click)=\"item.redo()\"\n                title=\"{{ '@acorex:common.actions.retry' | translate | async }}\"\n              ></i>\n            </div>\n          }\n          @default {\n            <!-- <ax-circular-progress\n              [mode]=\"item.isDetermined() ? 'determinate' : 'indeterminate'\"\n              [size]=\"22\"\n              [stroke]=\"6\"\n              [progress]=\"item.isDetermined() ? item.progress() : 60\"\n              class=\"ax-show\"\n            >\n            </ax-circular-progress> -->\n            <i\n              class=\"ax-icon ax-icon-solid ax-icon-close\"\n              (click)=\"item.cancel()\"\n              title=\"{{ '@acorex:common.actions.cancel' | translate | async }}\"\n            ></i>\n          }\n        }\n      </div>\n    </li>\n    @let completed = item.status() === 'completed';\n    @if (item.status() === 'inprogress' || completed) {\n      <div class=\"ax-status-loading\" [class.ax-status-loading-hide]=\"completed\">\n        <ax-progress-bar\n          [height]=\"4\"\n          [mode]=\"completed ? 'determinate' : 'indeterminate'\"\n          [progress]=\"completed ? 100 : 60\"\n          [color]=\"completed ? 'success' : 'primary'\"\n        ></ax-progress-bar>\n      </div>\n    }\n  }\n</ul>\n", styles: ["@reference \"../../../../../styles/themes/default.css\";ax-uploader-list .ax-uploader-progress-status{@apply border-primary-lightest bg-primary-lightest text-on-primary-lightest flex items-center justify-between border-y px-3 py-2 text-sm transition;}ax-uploader-list .ax-uploader-progress-status.ax-hide{@apply h-0 overflow-hidden py-0 opacity-0 transition-all;}ax-uploader-list .ax-uploader-list-items{@apply flex max-h-[75vh] w-full flex-col gap-2 overflow-x-hidden overflow-y-auto;}ax-uploader-list .ax-uploader-list-items li{@apply flex w-full items-center gap-4 px-4 py-2 text-sm;}ax-uploader-list .ax-uploader-list-items li .ax-item-container{@apply flex flex-1 flex-col select-none;}ax-uploader-list .ax-uploader-list-items li .ax-item-container .ax-item-name{@apply inline-block w-32 overflow-hidden text-sm text-ellipsis whitespace-nowrap;}ax-uploader-list .ax-uploader-list-items li .ax-status{@apply text-on-surface/50 relative;}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-icon{@apply text-xl;}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-icon-close{@apply cursor-pointer;}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-canceled span{@apply text-secondary;}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed{@apply flex items-center gap-2;}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed span{@apply text-danger;}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed i{@apply cursor-pointer;}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-completed{@apply text-success;}ax-uploader-list .ax-uploader-list-items li:hover .ax-hide{@apply flex!;}ax-uploader-list .ax-uploader-list-items li:hover .ax-show{@apply hidden!;}ax-uploader-list .ax-uploader-list-items li .ax-show{@apply flex!;}ax-uploader-list .ax-uploader-list-items li .ax-hide{@apply hidden!;}ax-uploader-list .ax-uploader-list-items .ax-status-loading.ax-status-loading-hide{@apply overflow-hidden opacity-0 transition-all;}.ax-file{@apply text-light bg-success relative flex aspect-square w-4 items-center justify-center rounded-sm;}.ax-file>*{@apply text-on-surface absolute bottom-1.5 text-xs font-bold;}.ax-file:before{@apply border-surface border-t-surface/30 border-l-surface/30 absolute top-0 right-0 border-0 border-r-4 border-b-4 content-[\"\"];}\n"] }]
         }] });
 var uploaderList_component = /*#__PURE__*/Object.freeze({
@@ -609,12 +609,12 @@ class AXUploaderDialogContainerComponent {
     toggle() {
         this.isCollapsed = !this.isCollapsed;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXUploaderDialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: AXUploaderDialogContainerComponent, isStandalone: true, selector: "ax-uploader-dialog-container", providers: [{ provide: AXComponent, useExisting: AXUploaderDialogContainerComponent }], ngImport: i0, template: "<div class=\"ax-uploader-list-header\">\n  <div>{{ '@acorex:common.actions.uploading' | translate | async }}</div>\n  <div>\n    <i\n      class=\"ax-icon\"\n      [ngClass]=\"{ 'ax-icon-chevron-down': !isCollapsed, 'ax-icon-chevron-up': isCollapsed }\"\n      (click)=\"toggle()\"\n    ></i>\n    <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n  </div>\n</div>\n@if (isCollapsed) {\n  <div animate.enter=\"ax-fade-slide-in\" animate.leave=\"ax-fade-slide-out\">\n    <ax-uploader-list></ax-uploader-list>\n  </div>\n}\n", styles: ["ax-uploader-dialog-container{display:block;background-color:rgba(var(--ax-sys-color-surface));-webkit-border-top-left-radius:.75rem;-webkit-border-top-right-radius:.75rem;-moz-border-radius-topleft:.75rem;-moz-border-radius-topright:.75rem;border-top-left-radius:.75rem;border-top-right-radius:.75rem;overflow:hidden;box-shadow:-1px -1px 10px #00000029;border:1px solid;border-color:rgba(var(--ax-sys-color-border-lightest-surface));outline-color:rgba(var(--ax-sys-color-primary-surface))}ax-uploader-dialog-container .ax-uploader-list-header{display:flex;justify-content:space-between;background-color:rgba(var(--ax-sys-color-surface));padding:.75rem 1rem;font-weight:500;color:rgba(var(--ax-sys-color-surface-fore))}ax-uploader-dialog-container .ax-uploader-list-header .ax-icon{margin-inline-start:.5rem;cursor:pointer}ax-uploader-dialog-container .ax-uploader-list-header .ax-icon:hover{opacity:.75}@keyframes fadeSlideIn{0%{opacity:0;max-height:0}to{opacity:1;max-height:350px}}@keyframes fadeSlideOut{0%{opacity:1;max-height:350px}to{opacity:0;max-height:0}}ax-uploader-dialog-container .ax-fade-slide-in{animation:fadeSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-uploader-dialog-container .ax-fade-slide-out{animation:fadeSlideOut var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXUploaderListComponent, selector: "ax-uploader-list" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderDialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXUploaderDialogContainerComponent, isStandalone: true, selector: "ax-uploader-dialog-container", providers: [{ provide: AXComponent, useExisting: AXUploaderDialogContainerComponent }], ngImport: i0, template: "<div class=\"ax-uploader-list-header\">\n  <div>{{ '@acorex:common.actions.uploading' | translate | async }}</div>\n  <div>\n    <i\n      class=\"ax-icon\"\n      [ngClass]=\"{ 'ax-icon-chevron-down': !isCollapsed, 'ax-icon-chevron-up': isCollapsed }\"\n      (click)=\"toggle()\"\n    ></i>\n    <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n  </div>\n</div>\n@if (isCollapsed) {\n  <div animate.enter=\"ax-fade-slide-in\" animate.leave=\"ax-fade-slide-out\">\n    <ax-uploader-list></ax-uploader-list>\n  </div>\n}\n", styles: ["@reference \"../../../../../styles/themes/default.css\";ax-uploader-dialog-container{@apply bg-surface border-border-lightest outline-primary block overflow-hidden rounded-t-xl border shadow-md;}ax-uploader-dialog-container .ax-uploader-list-header{@apply bg-surface text-on-surface flex justify-between px-3 py-4 font-medium;}ax-uploader-dialog-container .ax-uploader-list-header .ax-icon{@apply ms-2 cursor-pointer;}ax-uploader-dialog-container .ax-uploader-list-header .ax-icon:hover{@apply opacity-75;}ax-uploader-dialog-container .ax-fade-slide-in{animation:fadeSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-uploader-dialog-container .ax-fade-slide-out{animation:fadeSlideOut var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}@keyframes fadeSlideIn{0%{opacity:0;max-height:0}to{opacity:1;max-height:350px}}@keyframes fadeSlideOut{0%{opacity:1;max-height:350px}to{opacity:0;max-height:0}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXUploaderListComponent, selector: "ax-uploader-list" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXUploaderDialogContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderDialogContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-uploader-dialog-container', encapsulation: ViewEncapsulation.None, imports: [NgClass, AXUploaderListComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXUploaderDialogContainerComponent }], template: "<div class=\"ax-uploader-list-header\">\n  <div>{{ '@acorex:common.actions.uploading' | translate | async }}</div>\n  <div>\n    <i\n      class=\"ax-icon\"\n      [ngClass]=\"{ 'ax-icon-chevron-down': !isCollapsed, 'ax-icon-chevron-up': isCollapsed }\"\n      (click)=\"toggle()\"\n    ></i>\n    <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n  </div>\n</div>\n@if (isCollapsed) {\n  <div animate.enter=\"ax-fade-slide-in\" animate.leave=\"ax-fade-slide-out\">\n    <ax-uploader-list></ax-uploader-list>\n  </div>\n}\n", styles: ["ax-uploader-dialog-container{display:block;background-color:rgba(var(--ax-sys-color-surface));-webkit-border-top-left-radius:.75rem;-webkit-border-top-right-radius:.75rem;-moz-border-radius-topleft:.75rem;-moz-border-radius-topright:.75rem;border-top-left-radius:.75rem;border-top-right-radius:.75rem;overflow:hidden;box-shadow:-1px -1px 10px #00000029;border:1px solid;border-color:rgba(var(--ax-sys-color-border-lightest-surface));outline-color:rgba(var(--ax-sys-color-primary-surface))}ax-uploader-dialog-container .ax-uploader-list-header{display:flex;justify-content:space-between;background-color:rgba(var(--ax-sys-color-surface));padding:.75rem 1rem;font-weight:500;color:rgba(var(--ax-sys-color-surface-fore))}ax-uploader-dialog-container .ax-uploader-list-header .ax-icon{margin-inline-start:.5rem;cursor:pointer}ax-uploader-dialog-container .ax-uploader-list-header .ax-icon:hover{opacity:.75}@keyframes fadeSlideIn{0%{opacity:0;max-height:0}to{opacity:1;max-height:350px}}@keyframes fadeSlideOut{0%{opacity:1;max-height:350px}to{opacity:0;max-height:0}}ax-uploader-dialog-container .ax-fade-slide-in{animation:fadeSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-uploader-dialog-container .ax-fade-slide-out{animation:fadeSlideOut var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}\n"] }]
+            args: [{ selector: 'ax-uploader-dialog-container', encapsulation: ViewEncapsulation.None, imports: [NgClass, AXUploaderListComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXUploaderDialogContainerComponent }], template: "<div class=\"ax-uploader-list-header\">\n  <div>{{ '@acorex:common.actions.uploading' | translate | async }}</div>\n  <div>\n    <i\n      class=\"ax-icon\"\n      [ngClass]=\"{ 'ax-icon-chevron-down': !isCollapsed, 'ax-icon-chevron-up': isCollapsed }\"\n      (click)=\"toggle()\"\n    ></i>\n    <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n  </div>\n</div>\n@if (isCollapsed) {\n  <div animate.enter=\"ax-fade-slide-in\" animate.leave=\"ax-fade-slide-out\">\n    <ax-uploader-list></ax-uploader-list>\n  </div>\n}\n", styles: ["@reference \"../../../../../styles/themes/default.css\";ax-uploader-dialog-container{@apply bg-surface border-border-lightest outline-primary block overflow-hidden rounded-t-xl border shadow-md;}ax-uploader-dialog-container .ax-uploader-list-header{@apply bg-surface text-on-surface flex justify-between px-3 py-4 font-medium;}ax-uploader-dialog-container .ax-uploader-list-header .ax-icon{@apply ms-2 cursor-pointer;}ax-uploader-dialog-container .ax-uploader-list-header .ax-icon:hover{@apply opacity-75;}ax-uploader-dialog-container .ax-fade-slide-in{animation:fadeSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-uploader-dialog-container .ax-fade-slide-out{animation:fadeSlideOut var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}@keyframes fadeSlideIn{0%{opacity:0;max-height:0}to{opacity:1;max-height:350px}}@keyframes fadeSlideOut{0%{opacity:1;max-height:350px}to{opacity:0;max-height:0}}\n"] }]
         }] });
 /**
@@ -637,12 +637,12 @@ class AXUploaderDropZoneComponent extends MXBaseComponent {
     preventRefresh() {
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXUploaderDropZoneComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: AXUploaderDropZoneComponent, isStandalone: true, selector: "ax-uploader-drop-zone", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXUploaderDropZoneComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-uploader-drop-zone-container\">\n  <ax-icon class=\"ax-icon ax-icon-upload\"></ax-icon>\n  <div class=\"ax-uploader-drop-zone-description\">\n    <span>\n      {{ '@acorex:uploader.zone.drag' | translate | async }}\n      <a href=\"\" (click)=\"preventRefresh()\">\n        {{ '@acorex:uploader.zone.choose' | translate | async }}\n      </a>\n      {{ '@acorex:uploader.zone.to-upload' | translate | async }}\n    </span>\n    <!-- <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p> -->\n    @if (description()) {\n      <p>{{ description() }}</p>\n    }\n  </div>\n</div>\n", styles: ["ax-uploader-drop-zone{width:100%;height:100%;display:block;cursor:pointer}ax-uploader-drop-zone .ax-uploader-drop-zone-container{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:.5rem;margin:1rem;padding:1rem;gap:1rem;border:2px dashed;border-color:rgba(var(--ax-sys-color-border-lightest-surface));pointer-events:none}ax-uploader-drop-zone .ax-uploader-drop-zone-container:hover{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}ax-uploader-drop-zone .ax-uploader-drop-zone-container ax-icon{font-size:1.875rem;line-height:2.25rem;color:#a3a3a3;width:1.75rem;height:2rem}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description{display:flex;flex-direction:column;gap:.5rem}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description a{color:rgba(var(--ax-sys-color-primary-surface))}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description p{font-size:.875rem;line-height:1.25rem;color:#a3a3a3}\n"], dependencies: [{ kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderDropZoneComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXUploaderDropZoneComponent, isStandalone: true, selector: "ax-uploader-drop-zone", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXUploaderDropZoneComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-uploader-drop-zone-container\">\n  <ax-icon class=\"ax-icon ax-icon-upload\"></ax-icon>\n  <div class=\"ax-uploader-drop-zone-description\">\n    <span>\n      {{ '@acorex:uploader.zone.drag' | translate | async }}\n      <a href=\"\" (click)=\"preventRefresh()\">\n        {{ '@acorex:uploader.zone.choose' | translate | async }}\n      </a>\n      {{ '@acorex:uploader.zone.to-upload' | translate | async }}\n    </span>\n    <!-- <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p> -->\n    @if (description()) {\n      <p>{{ description() }}</p>\n    }\n  </div>\n</div>\n", styles: ["@reference \"../../../../../styles/themes/default.css\";ax-uploader-drop-zone{@apply block h-full w-full cursor-pointer;}ax-uploader-drop-zone .ax-uploader-drop-zone-container{@apply border-border-lightest pointer-events-none m-4 flex flex-col items-center justify-center gap-4 rounded-md border-2 border-dashed p-4;}ax-uploader-drop-zone .ax-uploader-drop-zone-container:hover{@apply border-primary bg-primary-lightest;}ax-uploader-drop-zone .ax-uploader-drop-zone-container ax-icon{@apply text-on-surface/50 h-8 w-7 text-3xl;}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description{@apply flex flex-col gap-2;}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description a{@apply text-primary;}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description p{@apply text-on-surface/50 text-sm;}\n"], dependencies: [{ kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXUploaderDropZoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderDropZoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-uploader-drop-zone', encapsulation: ViewEncapsulation.None, imports: [AXDecoratorIconComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXUploaderDropZoneComponent }], template: "<div class=\"ax-uploader-drop-zone-container\">\n  <ax-icon class=\"ax-icon ax-icon-upload\"></ax-icon>\n  <div class=\"ax-uploader-drop-zone-description\">\n    <span>\n      {{ '@acorex:uploader.zone.drag' | translate | async }}\n      <a href=\"\" (click)=\"preventRefresh()\">\n        {{ '@acorex:uploader.zone.choose' | translate | async }}\n      </a>\n      {{ '@acorex:uploader.zone.to-upload' | translate | async }}\n    </span>\n    <!-- <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p> -->\n    @if (description()) {\n      <p>{{ description() }}</p>\n    }\n  </div>\n</div>\n", styles: ["ax-uploader-drop-zone{width:100%;height:100%;display:block;cursor:pointer}ax-uploader-drop-zone .ax-uploader-drop-zone-container{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:.5rem;margin:1rem;padding:1rem;gap:1rem;border:2px dashed;border-color:rgba(var(--ax-sys-color-border-lightest-surface));pointer-events:none}ax-uploader-drop-zone .ax-uploader-drop-zone-container:hover{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}ax-uploader-drop-zone .ax-uploader-drop-zone-container ax-icon{font-size:1.875rem;line-height:2.25rem;color:#a3a3a3;width:1.75rem;height:2rem}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description{display:flex;flex-direction:column;gap:.5rem}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description a{color:rgba(var(--ax-sys-color-primary-surface))}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description p{font-size:.875rem;line-height:1.25rem;color:#a3a3a3}\n"] }]
+            args: [{ selector: 'ax-uploader-drop-zone', encapsulation: ViewEncapsulation.None, imports: [AXDecoratorIconComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXUploaderDropZoneComponent }], template: "<div class=\"ax-uploader-drop-zone-container\">\n  <ax-icon class=\"ax-icon ax-icon-upload\"></ax-icon>\n  <div class=\"ax-uploader-drop-zone-description\">\n    <span>\n      {{ '@acorex:uploader.zone.drag' | translate | async }}\n      <a href=\"\" (click)=\"preventRefresh()\">\n        {{ '@acorex:uploader.zone.choose' | translate | async }}\n      </a>\n      {{ '@acorex:uploader.zone.to-upload' | translate | async }}\n    </span>\n    <!-- <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p> -->\n    @if (description()) {\n      <p>{{ description() }}</p>\n    }\n  </div>\n</div>\n", styles: ["@reference \"../../../../../styles/themes/default.css\";ax-uploader-drop-zone{@apply block h-full w-full cursor-pointer;}ax-uploader-drop-zone .ax-uploader-drop-zone-container{@apply border-border-lightest pointer-events-none m-4 flex flex-col items-center justify-center gap-4 rounded-md border-2 border-dashed p-4;}ax-uploader-drop-zone .ax-uploader-drop-zone-container:hover{@apply border-primary bg-primary-lightest;}ax-uploader-drop-zone .ax-uploader-drop-zone-container ax-icon{@apply text-on-surface/50 h-8 w-7 text-3xl;}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description{@apply flex flex-col gap-2;}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description a{@apply text-primary;}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description p{@apply text-on-surface/50 text-sm;}\n"] }]
         }], propDecorators: { description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
 const COMPONENTS = [
@@ -653,8 +653,8 @@ const COMPONENTS = [
     AXUploaderDialogContainerComponent,
 ];
 class AXUploaderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: AXUploaderModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderModule, imports: [CommonModule,
             AXDecoratorModule,
             AXButtonModule,
             AXTranslationModule,
@@ -672,7 +672,7 @@ class AXUploaderModule {
             AXUploaderZoneDirective,
             AXUploaderBrowseDirective,
             AXUploaderDialogContainerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXUploaderModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderModule, imports: [CommonModule,
             AXDecoratorModule,
             AXButtonModule,
             AXTranslationModule,
@@ -685,7 +685,7 @@ class AXUploaderModule {
             AXUploaderListComponent,
             AXUploaderDialogContainerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXUploaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [