@acorex/components 18.5.17 → 18.7.1

package/fesm2022/acorex-components-uploader.mjs

@@ -1,25 +1,24 @@
 import * as i0 from '@angular/core';
-import { signal, computed, inject, Injectable, EventEmitter, Directive, Input, Output, HostBinding, ElementRef, Component, ViewEncapsulation, NgModule } from '@angular/core';
+import { signal, computed, inject, Injectable, ChangeDetectorRef, EventEmitter, Directive, Input, Output, HostBinding, ElementRef, Component, ViewEncapsulation, input, NgModule } from '@angular/core';
 import * as i3 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXPopupService, AXPopupModule } from '@acorex/components/popup';
 import { AXFileService, AXFileModule } from '@acorex/core/file';
 import { sumBy } from 'lodash-es';
-import { BehaviorSubject, Subject, interval, switchMap, map } from 'rxjs';
-import { AXUnsubscriber } from '@acorex/core/utils';
+import { Subject, BehaviorSubject, interval, switchMap, map } from 'rxjs';
 import { AXClosbaleComponent, MXBaseComponent } from '@acorex/components/common';
 import { trigger, state, style, AUTO_STYLE, transition, animate } from '@angular/animations';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { AXBasePageComponent } from '@acorex/components/page';
-import * as i1 from '@acorex/components/circular-progress';
-import { AXCircularProgressModule } from '@acorex/components/circular-progress';
+import * as i1 from '@acorex/components/progress-bar';
+import { AXProgressBarModule } from '@acorex/components/progress-bar';
 import * as i4 from '@acorex/core/format';
 import { AXFormatModule } from '@acorex/core/format';
 import * as i1$2 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import { AXButtonModule } from '@acorex/components/button';
-import { AXProgressBarModule } from '@acorex/components/progress-bar';
+import { AXCircularProgressModule } from '@acorex/components/circular-progress';
 import { AXDateTimeModule } from '@acorex/core/date-time';
 
 class AXUploadRequest {
@@ -52,21 +51,31 @@ class AXUploadRequest {
         this.status = computed(() => this._status());
         this._message = signal(null);
         this.message = computed(() => this._message());
+        this._isDetermined = signal(false);
+        this.isDetermined = computed(() => this._isDetermined());
         this.bytesTransferred = 0;
+        this.onCancel = new Subject();
+        this.onStart = new Subject();
+        this.onFailed = new Subject();
+        this.onComplete = new Subject();
     }
     estimateTimeRemaining(bytesTransferred) {
+        // debugger;
         const now = Date.now();
         const elapsed = now - this.startTime; // Time in milliseconds
-        if (elapsed === 0) {
+        if (isNaN(elapsed) || elapsed === 0) {
             return null; // Avoid division by zero
         }
-        const speed = bytesTransferred / elapsed; // Bytes per millisecond
+        const speed = (bytesTransferred || 1) / elapsed; // Bytes per millisecond
         const remainingBytes = this.size - bytesTransferred;
         const estimatedTime = Math.ceil(remainingBytes / speed); // Time in milliseconds
         return estimatedTime; // Return the estimated time in milliseconds
     }
     setTransferredBytes(value) {
         this.bytesTransferred = value;
+        if (value > 0 && !this._isDetermined() && (this.status() == 'new' || this.status() == 'inprogress')) {
+            this._isDetermined.set(true);
+        }
         this.updateEstimateTime();
     }
     updateEstimateTime() {
@@ -75,19 +84,25 @@ class AXUploadRequest {
         this._progress.set(progress);
     }
     async upload() {
+        // debugger;
         this.startTime = Date.now();
         this._progress.set(0);
         this._status.set('inprogress');
-        if (this.onStart)
-            this.onStart(this);
+        this.onStart.next();
     }
     cancel() {
         this._status.set('canceled');
         this.bytesTransferred = 0;
         this._estimateTime.set(0);
         this._progress.set(0);
-        if (this.onCancel)
-            this.onCancel(this);
+        this.onCancel.next();
+    }
+    redo() {
+        // this.startTime = Date.now();
+        this._progress.set(0);
+        this._status.set('inprogress');
+        this._message.set(null);
+        this.onStart.next();
     }
     error(message) {
         this._status.set('failed');
@@ -95,37 +110,47 @@ class AXUploadRequest {
         this._estimateTime.set(0);
         this._progress.set(0);
         this._message.set(message);
-        if (this.onFailed)
-            this.onFailed(this);
+        this.onFailed.next();
     }
     finish(data) {
         this._status.set('completed');
         this.bytesTransferred = this.size;
         this._estimateTime.set(0);
         this._progress.set(100);
-        if (this.onComplete)
-            this.onComplete(this);
+        this.onComplete.next();
     }
 }
 
 class AXUploaderService {
     constructor() {
         this.popupService = inject(AXPopupService);
+        this.translateService = inject(AXTranslationService);
         this.fileService = inject(AXFileService);
         this.files$ = new BehaviorSubject([]);
+        this.onFileUploadStart = new Subject();
         this.onFileUploadComplete = new Subject();
         this.onFilesUploadComplete = new Subject();
-        this.totalEstimateTime = interval(500).pipe(switchMap(() => this.files$.asObservable()), map((f) => sumBy(f, (c) => c.estimateTime())));
+        this.onFileUploadCanceled = new Subject();
+        this.isAnyDetermined = signal(false);
+        this.totalEstimateTime = interval(500).pipe(switchMap(() => this.files$.asObservable()), map((f) => sumBy(f, (c) => {
+            if (c.isDetermined()) {
+                this.isAnyDetermined.set(true);
+            }
+            return c.status() === 'inprogress' ? c.estimateTime() : 0;
+        })));
     }
     get files() {
         return this.files$;
     }
     showDialog() {
+        const filesCount = this.files$.getValue().length;
         Promise.resolve().then(function () { return uploaderList_component; }).then((c) => {
             this.popupService
                 .open(c.AXUploaderListComponent, {
-                size: 'md',
-                title: 'Upload File',
+                size: 'sm',
+                title: filesCount > 1
+                    ? this.translateService.translateSync('uploader.zone.uploadFiles')
+                    : this.translateService.translateSync('uploader.zone.uploadFile'),
             })
                 .then(async () => {
                 await this.cancelAll();
@@ -139,22 +164,38 @@ class AXUploaderService {
     startUpload() {
         this.files.value
             .filter((c) => c.status() == 'new')
-            .forEach((c) => {
-            c.onComplete = () => {
-                this.onFileUploadComplete.next({
+            .forEach(async (c) => {
+            await this.bindEvents(c);
+        });
+    }
+    async bindEvents(c) {
+        c.onStart.subscribe(() => {
+            this.onFileUploadStart.next({
+                component: this,
+                uploadedFile: c,
+                isUserInteraction: false,
+            });
+        });
+        c.onComplete.subscribe(() => {
+            this.onFileUploadComplete.next({
+                component: this,
+                uploadedFile: c,
+                isUserInteraction: false,
+            });
+            if (this.files.value.every((c) => c.status() == 'completed')) {
+                this.onFilesUploadComplete.next({
                     component: this,
-                    uploadedFile: c,
-                    isUserInteraction: false
+                    uploadedFiles: this.files.value,
+                    isUserInteraction: false,
                 });
-                if (this.files.value.every(c => c.status() == 'completed')) {
-                    this.onFilesUploadComplete.next({
-                        component: this,
-                        uploadedFiles: this.files.value,
-                        isUserInteraction: false
-                    });
-                }
-            };
-            c.upload();
+            }
+        });
+        c.onCancel.subscribe(() => {
+            this.onFileUploadCanceled.next({
+                component: this,
+                uploadedFile: c,
+                isUserInteraction: false,
+            });
         });
     }
     async browse(options = { multiple: false }) {
@@ -189,10 +230,10 @@ class AXUploaderService {
         currentValue = currentValue.filter((c) => c != item);
         this.files$.next(currentValue);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXUploaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXUploaderService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXUploaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXUploaderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXUploaderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXUploaderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -202,6 +243,7 @@ class AXUploaderZoneDirective {
         this.elementRef = elementRef;
         this.multiple = true;
         this.accept = null;
+        this.cdr = inject(ChangeDetectorRef);
         this.uploadService = inject(AXUploaderService);
         this.unsubscriber = inject(AXUnsubscriber);
         this.translateService = inject(AXTranslationService);
@@ -212,25 +254,21 @@ class AXUploaderZoneDirective {
         this.element = this.elementRef.nativeElement;
         this.element.style.position = 'relative';
         //
-        this.uploadService
-            .onFileUploadComplete
-            .pipe(this.unsubscriber.takeUntilDestroy)
-            .subscribe(c => {
+        this.uploadService.onFileUploadComplete.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
             this.onFileUploadComplete.next(c);
         });
-        this.uploadService
-            .onFilesUploadComplete
-            .pipe(this.unsubscriber.takeUntilDestroy)
-            .subscribe(c => {
+        this.uploadService.onFilesUploadComplete.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
             this.onFilesUploadComplete.next(c);
         });
         //
+        this.element.addEventListener('click', this.browser.bind(this), true);
         this.element.addEventListener('dragenter', this.handleDragEnter.bind(this), true);
         this.element.addEventListener('dragover', this.handleDragOver.bind(this), true);
         this.element.addEventListener('drop', this.handleOnDrop.bind(this), true);
         this.element.addEventListener('dragleave', this.removeZone.bind(this), true);
     }
     ngOnDestroy() {
+        this.element.addEventListener('click', this.browser.bind(this), true);
         this.element.removeEventListener('dragenter', this.handleDragEnter.bind(this));
         this.element.removeEventListener('drop', this.handleOnDrop.bind(this));
         this.element.removeEventListener('dragover', this.handleDragOver.bind(this));
@@ -241,11 +279,18 @@ class AXUploaderZoneDirective {
         event.preventDefault();
         event.stopImmediatePropagation();
     }
-    handleOnDrop(event) {
+    async handleOnDrop(event) {
         event.preventDefault();
         event.stopImmediatePropagation();
-        this.uploadService.add(event.dataTransfer?.files);
+        const requests = await this.uploadService.add(event.dataTransfer?.files);
+        this.onChanged.emit({
+            component: this,
+            requests,
+            isUserInteraction: true,
+        });
+        // debugger;
         this.removeZone();
+        this.cdr.detectChanges();
     }
     handleDragOver(event) {
         event.preventDefault();
@@ -253,7 +298,8 @@ class AXUploaderZoneDirective {
     }
     createZone() {
         this.overlayElement = document.createElement('div');
-        this.overlayElement.classList.add('ax-uploader-overlay-state');
+        this.overlayElement.classList.add('ax-uploader-overlay-state', '-ax-z-1');
+        this.overlayElement.id = 'ax-uploader-overlay-state';
         const icon = document.createElement('span');
         icon.classList.add('ax-icon', 'ax-icon-upload');
         const text = document.createElement('span');
@@ -263,27 +309,29 @@ class AXUploaderZoneDirective {
         this.element.appendChild(this.overlayElement);
     }
     removeZone() {
+        this.element.removeChild(document.getElementById('ax-uploader-overlay-state'));
         this.overlayElement.remove();
+        console.log(this.overlayElement);
     }
     async browser() {
         const requests = await this.uploadService.browse({ accept: this.accept, multiple: this.multiple });
         this.onChanged.emit({
             component: this,
             requests,
-            isUserInteraction: true
+            isUserInteraction: true,
         });
     }
     get __hostClass() {
         return `ax-drop-zone`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXUploaderZoneDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.2", type: AXUploaderZoneDirective, 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: "18.2.0", ngImport: i0, type: AXUploaderZoneDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: AXUploaderZoneDirective, 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: "18.0.2", ngImport: i0, type: AXUploaderZoneDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXUploaderZoneDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axUploaderZone]',
-                    providers: [AXUnsubscriber]
+                    providers: [AXUnsubscriber],
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { multiple: [{
                 type: Input
@@ -314,10 +362,10 @@ class AXUploaderBrowseDirective {
     async handleClick() {
         await this.uploaderZone.browser();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXUploaderBrowseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.2", type: AXUploaderBrowseDirective, selector: "[axUploaderBrowseHandle]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXUploaderBrowseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: AXUploaderBrowseDirective, selector: "[axUploaderBrowseHandle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXUploaderBrowseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXUploaderBrowseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axUploaderBrowseHandle]',
@@ -328,18 +376,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
  * A component that displays a list of uploaded files.
  * @category Components
  */
-class AXUploaderListComponent extends AXBasePageComponent {
+class AXUploaderListComponent {
     constructor() {
-        super(...arguments);
         /** @ignore */
         this.uploadService = inject(AXUploaderService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXUploaderListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXUploaderListComponent, selector: "ax-uploader-list", usesInheritance: true, ngImport: i0, template: "@if((uploadService.totalEstimateTime | async) > 0)\n{\n<div class=\"ax-uploader-progress-status\">\n  <div>{{ (uploadService.totalEstimateTime | async) | format: 'timeleft' | async }}</div>\n  <button (click)=\"uploadService.cancelAll()\">{{ 'cancel' | translate | async }}</button>\n</div>\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 ax-bg-success-500\">\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> / {{ item.estimateTime() | format: 'timeleft' | async\n        }}\n        }\n        @case ('failed') {\n        <span class=\"ax-state-failed\">{{ item.message() }}</span>\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      <span class=\"ax-state-canceled\">{{ 'canceled' | translate | async }}</span>\n      }\n      @case ('failed') {\n      <span class=\"ax-state-failed\">{{ 'failed' | translate | async }}</span>\n      }\n      @default {\n      <ax-circular-progress [size]=\"22\" [stroke]=\"6\" [progress]=\"item.progress()\" class=\"ax-show\">\n      </ax-circular-progress>\n      <i class=\"ax-icon ax-icon-solid ax-icon-close ax-hide\" (click)=\"item.cancel()\"\n        title=\"{{ 'cancel' | translate | async  }}\"></i>\n      }\n      }\n    </div>\n  </li>\n  }\n</ul>", styles: [".ax-dark ax-uploader-list .ax-uploader-progress-status{border-color:rgba(var(--ax-color-primary-500));background-color:rgba(var(--ax-color-primary-500),.25);color:rgba(var(--ax-color-primary-fore))}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-color-primary-200));background-color:rgba(var(--ax-color-primary-200));padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-primary-fore-tint))}ax-uploader-list .ax-uploader-list-items{max-height:75vh;width:100%;overflow-y:auto;overflow-x:hidden;padding:.5rem 1rem;gap:.5rem;display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li{display:flex;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-color-black),.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{color:rgba(var(--ax-color-neutral-500))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed{color:rgba(var(--ax-color-danger-500))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-completed{color:rgba(var(--ax-color-success-500))}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-file{position:relative;display:flex;align-items:center;justify-content:center;width:1.5rem;aspect-ratio:.7;border-radius:.25rem;color:rgba(var(--ax-color-white))}.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-color-surface)) rgba(var(--ax-color-surface)) rgba(var(--ax-color-black),.3) rgba(var(--ax-color-black),.3)}\n"], dependencies: [{ kind: "component", type: i1.AXCircularProgressComponent, selector: "ax-circular-progress", inputs: ["color", "progress", "stroke", "size"], outputs: ["ValueChange", "strokeChange", "sizeChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXUploaderListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXUploaderListComponent, selector: "ax-uploader-list", 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>{{'processing' | translate| async}}</span>\n  }@else {\n    <div>{{ uploadService.totalEstimateTime | async | format: 'timeleft' | async }}</div>\n  }\n  <button (click)=\"uploadService.cancelAll()\">{{ '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> /  {{item.isDetermined()?( item.estimateTime() | format: 'timeleft' | async):('processing' | translate| async) }}\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>{{'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\">{{ '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>{{ 'failed' | 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          @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 class=\"ax-icon ax-icon-solid ax-icon-close\" (click)=\"item.cancel()\" title=\"{{ 'cancel' | translate | async }}\"></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-dark ax-uploader-list .ax-uploader-progress-status{border-color:rgba(var(--ax-color-primary-500));background-color:rgba(var(--ax-color-primary-500),.25);color:rgba(var(--ax-color-primary-fore))}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-color-primary-200));background-color:rgba(var(--ax-color-primary-200));padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-primary-fore-tint));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-color-black),.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-color-neutral-500))}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-color-danger-500))}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-color-success-500))}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-color-white));background-color:rgba(var(--ax-color-success-500))!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-color-surface)) rgba(var(--ax-color-surface)) rgba(var(--ax-color-black),.3) rgba(var(--ax-color-black),.3)}\n"], dependencies: [{ kind: "component", type: i1.AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXUploaderListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXUploaderListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-uploader-list', encapsulation: ViewEncapsulation.None, template: "@if((uploadService.totalEstimateTime | async) > 0)\n{\n<div class=\"ax-uploader-progress-status\">\n  <div>{{ (uploadService.totalEstimateTime | async) | format: 'timeleft' | async }}</div>\n  <button (click)=\"uploadService.cancelAll()\">{{ 'cancel' | translate | async }}</button>\n</div>\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 ax-bg-success-500\">\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> / {{ item.estimateTime() | format: 'timeleft' | async\n        }}\n        }\n        @case ('failed') {\n        <span class=\"ax-state-failed\">{{ item.message() }}</span>\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      <span class=\"ax-state-canceled\">{{ 'canceled' | translate | async }}</span>\n      }\n      @case ('failed') {\n      <span class=\"ax-state-failed\">{{ 'failed' | translate | async }}</span>\n      }\n      @default {\n      <ax-circular-progress [size]=\"22\" [stroke]=\"6\" [progress]=\"item.progress()\" class=\"ax-show\">\n      </ax-circular-progress>\n      <i class=\"ax-icon ax-icon-solid ax-icon-close ax-hide\" (click)=\"item.cancel()\"\n        title=\"{{ 'cancel' | translate | async  }}\"></i>\n      }\n      }\n    </div>\n  </li>\n  }\n</ul>", styles: [".ax-dark ax-uploader-list .ax-uploader-progress-status{border-color:rgba(var(--ax-color-primary-500));background-color:rgba(var(--ax-color-primary-500),.25);color:rgba(var(--ax-color-primary-fore))}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-color-primary-200));background-color:rgba(var(--ax-color-primary-200));padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-primary-fore-tint))}ax-uploader-list .ax-uploader-list-items{max-height:75vh;width:100%;overflow-y:auto;overflow-x:hidden;padding:.5rem 1rem;gap:.5rem;display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li{display:flex;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-color-black),.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{color:rgba(var(--ax-color-neutral-500))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed{color:rgba(var(--ax-color-danger-500))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-completed{color:rgba(var(--ax-color-success-500))}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-file{position:relative;display:flex;align-items:center;justify-content:center;width:1.5rem;aspect-ratio:.7;border-radius:.25rem;color:rgba(var(--ax-color-white))}.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-color-surface)) rgba(var(--ax-color-surface)) rgba(var(--ax-color-black),.3) rgba(var(--ax-color-black),.3)}\n"] }]
+            args: [{ selector: 'ax-uploader-list', encapsulation: ViewEncapsulation.None, 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>{{'processing' | translate| async}}</span>\n  }@else {\n    <div>{{ uploadService.totalEstimateTime | async | format: 'timeleft' | async }}</div>\n  }\n  <button (click)=\"uploadService.cancelAll()\">{{ '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> /  {{item.isDetermined()?( item.estimateTime() | format: 'timeleft' | async):('processing' | translate| async) }}\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>{{'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\">{{ '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>{{ 'failed' | 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          @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 class=\"ax-icon ax-icon-solid ax-icon-close\" (click)=\"item.cancel()\" title=\"{{ 'cancel' | translate | async }}\"></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-dark ax-uploader-list .ax-uploader-progress-status{border-color:rgba(var(--ax-color-primary-500));background-color:rgba(var(--ax-color-primary-500),.25);color:rgba(var(--ax-color-primary-fore))}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-color-primary-200));background-color:rgba(var(--ax-color-primary-200));padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-primary-fore-tint));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-color-black),.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-color-neutral-500))}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-color-danger-500))}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-color-success-500))}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-color-white));background-color:rgba(var(--ax-color-success-500))!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-color-surface)) rgba(var(--ax-color-surface)) rgba(var(--ax-color-black),.3) rgba(var(--ax-color-black),.3)}\n"] }]
         }] });
 
 var uploaderList_component = /*#__PURE__*/Object.freeze({
@@ -373,8 +420,8 @@ class AXUploaderDialogContainerComponent {
     toggle() {
         this.isCollapsed = !this.isCollapsed;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXUploaderDialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXUploaderDialogContainerComponent, selector: "ax-uploader-dialog-container", ngImport: i0, template: "<div class=\"ax-uploader-list-header\">\n    <div>{{'Uploading' | translate | async }}</div>\n    <div>\n        <i class=\"ax-icon\" [ngClass]=\"{ 'ax-icon-chevron-down': !isCollapsed, 'ax-icon-chevron-up': isCollapsed }\"\n            (click)=\"toggle()\"></i>\n        <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n    </div>\n</div>\n<div [@collapse]=\"isCollapsed\">\n    <ax-uploader-list></ax-uploader-list>\n</div>", styles: ["ax-uploader-dialog-container{display:block;background-color:rgba(var(--ax-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-color-border-default));outline-color:rgba(var(--ax-color-primary-500))}ax-uploader-dialog-container .ax-uploader-list-header{display:flex;justify-content:space-between;background-color:rgba(var(--ax-color-on-surface));padding:.75rem 1rem;font-weight:500;color:rgba(var(--ax-color-on-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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXUploaderListComponent, selector: "ax-uploader-list" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXUploaderDialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXUploaderDialogContainerComponent, selector: "ax-uploader-dialog-container", ngImport: i0, template: "<div class=\"ax-uploader-list-header\">\n    <div>{{'Uploading' | translate | async }}</div>\n    <div>\n        <i class=\"ax-icon\" [ngClass]=\"{ 'ax-icon-chevron-down': !isCollapsed, 'ax-icon-chevron-up': isCollapsed }\"\n            (click)=\"toggle()\"></i>\n        <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n    </div>\n</div>\n<div [@collapse]=\"isCollapsed\">\n    <ax-uploader-list></ax-uploader-list>\n</div>", styles: ["ax-uploader-dialog-container{display:block;background-color:rgba(var(--ax-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-color-border-default));outline-color:rgba(var(--ax-color-primary-500))}ax-uploader-dialog-container .ax-uploader-list-header{display:flex;justify-content:space-between;background-color:rgba(var(--ax-color-on-surface));padding:.75rem 1rem;font-weight:500;color:rgba(var(--ax-color-on-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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXUploaderListComponent, selector: "ax-uploader-list" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], animations: [
             trigger('collapse', [
                 state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
                 state('true', style({ height: '0', visibility: 'hidden' })),
@@ -383,7 +430,7 @@ class AXUploaderDialogContainerComponent {
             ]),
         ], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXUploaderDialogContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXUploaderDialogContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-uploader-dialog-container', encapsulation: ViewEncapsulation.None, animations: [
                         trigger('collapse', [
@@ -400,17 +447,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
  * @category Components
  */
 class AXUploaderDropZoneComponent extends MXBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXUploaderDropZoneComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXUploaderDropZoneComponent, selector: "ax-uploader-drop-zone", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-uploader-drop-zone-container\" axUploaderZone>\n  <ax-icon class=\"ax-icon ax-icon-upload\"></ax-icon>\n  <div class=\"ax-uploader-drop-zone-description\">\n    <span>Drag & Drop or <a href=\"#\">Choose file</a> to upload</span>\n    <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p>\n  </div>\n</div>", styles: [".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-color-border-default))}.ax-uploader-drop-zone-container:hover{border-color:rgba(var(--ax-color-primary-500));background-color:rgba(var(--ax-color-primary-50))}.ax-uploader-drop-zone-container ax-icon{font-size:1.875rem;line-height:2.25rem;color:#a3a3a3}.ax-uploader-drop-zone-container .ax-uploader-drop-zone-description{display:flex;flex-direction:column;gap:.5rem}.ax-uploader-drop-zone-container .ax-uploader-drop-zone-description a{color:rgba(var(--ax-color-primary-500))}.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: i1$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept"], outputs: ["onChanged", "onFileUploadComplete", "onFilesUploadComplete"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    constructor() {
+        super(...arguments);
+        this.description = input('');
+    }
+    preventRefresh() {
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXUploaderDropZoneComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: AXUploaderDropZoneComponent, selector: "ax-uploader-drop-zone", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, 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      >{{ 'uploader.zone.drag' | translate | async\n      }}<a href=\"\" (click)=\"preventRefresh()\" axUploaderBrowseHandle>{{ 'uploader.zone.choose' | translate | async }}</a>\n      {{ 'uploader.zone.to-upload' | translate | async }}</span\n    >\n    <!-- <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p> -->\n    <p>{{ description() }}</p>\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-color-border-default));pointer-events:none}ax-uploader-drop-zone .ax-uploader-drop-zone-container:hover{border-color:rgba(var(--ax-color-primary-500));background-color:rgba(var(--ax-color-primary-50))}ax-uploader-drop-zone .ax-uploader-drop-zone-container ax-icon{font-size:1.875rem;line-height:2.25rem;color:#a3a3a3}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-color-primary-500))}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: i1$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXUploaderBrowseDirective, selector: "[axUploaderBrowseHandle]" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXUploaderDropZoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXUploaderDropZoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-uploader-drop-zone', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-uploader-drop-zone-container\" axUploaderZone>\n  <ax-icon class=\"ax-icon ax-icon-upload\"></ax-icon>\n  <div class=\"ax-uploader-drop-zone-description\">\n    <span>Drag & Drop or <a href=\"#\">Choose file</a> to upload</span>\n    <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p>\n  </div>\n</div>", styles: [".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-color-border-default))}.ax-uploader-drop-zone-container:hover{border-color:rgba(var(--ax-color-primary-500));background-color:rgba(var(--ax-color-primary-50))}.ax-uploader-drop-zone-container ax-icon{font-size:1.875rem;line-height:2.25rem;color:#a3a3a3}.ax-uploader-drop-zone-container .ax-uploader-drop-zone-description{display:flex;flex-direction:column;gap:.5rem}.ax-uploader-drop-zone-container .ax-uploader-drop-zone-description a{color:rgba(var(--ax-color-primary-500))}.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, 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      >{{ 'uploader.zone.drag' | translate | async\n      }}<a href=\"\" (click)=\"preventRefresh()\" axUploaderBrowseHandle>{{ 'uploader.zone.choose' | translate | async }}</a>\n      {{ 'uploader.zone.to-upload' | translate | async }}</span\n    >\n    <!-- <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p> -->\n    <p>{{ description() }}</p>\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-color-border-default));pointer-events:none}ax-uploader-drop-zone .ax-uploader-drop-zone-container:hover{border-color:rgba(var(--ax-color-primary-500));background-color:rgba(var(--ax-color-primary-50))}ax-uploader-drop-zone .ax-uploader-drop-zone-container ax-icon{font-size:1.875rem;line-height:2.25rem;color:#a3a3a3}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-color-primary-500))}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"] }]
         }] });
 
+const COMPONENTS = [
+    AXUploaderDropZoneComponent,
+    AXUploaderListComponent,
+    AXUploaderZoneDirective,
+    AXUploaderBrowseDirective,
+    AXUploaderDialogContainerComponent,
+];
 class AXUploaderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: AXUploaderModule, declarations: [AXUploaderDropZoneComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXUploaderModule, declarations: [AXUploaderDropZoneComponent,
             AXUploaderListComponent,
             AXUploaderZoneDirective,
             AXUploaderBrowseDirective,
@@ -423,8 +484,12 @@ class AXUploaderModule {
             AXFileModule,
             AXDateTimeModule,
             AXCircularProgressModule,
-            AXPopupModule], exports: [AXUploaderDropZoneComponent, AXUploaderZoneDirective, AXUploaderBrowseDirective, AXUploaderDialogContainerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXUploaderModule, imports: [CommonModule,
+            AXPopupModule], exports: [AXUploaderDropZoneComponent,
+            AXUploaderListComponent,
+            AXUploaderZoneDirective,
+            AXUploaderBrowseDirective,
+            AXUploaderDialogContainerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXUploaderModule, imports: [CommonModule,
             AXDecoratorModule,
             AXButtonModule,
             AXTranslationModule,
@@ -435,16 +500,10 @@ class AXUploaderModule {
             AXCircularProgressModule,
             AXPopupModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXUploaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXUploaderModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        AXUploaderDropZoneComponent,
-                        AXUploaderListComponent,
-                        AXUploaderZoneDirective,
-                        AXUploaderBrowseDirective,
-                        AXUploaderDialogContainerComponent,
-                    ],
+                    declarations: [...COMPONENTS],
                     imports: [
                         CommonModule,
                         AXDecoratorModule,
@@ -457,7 +516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                         AXCircularProgressModule,
                         AXPopupModule,
                     ],
-                    exports: [AXUploaderDropZoneComponent, AXUploaderZoneDirective, AXUploaderBrowseDirective, AXUploaderDialogContainerComponent],
+                    exports: [...COMPONENTS],
                     providers: [],
                 }]
         }] });