@acorex/components 7.17.14 → 7.17.16

package/fesm2022/acorex-components-uploader.mjs

@@ -1,133 +1,166 @@
-import { MXBaseComponent } from '@acorex/components/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, inject, Injectable, Directive, Input, HostBinding, NgModule } from '@angular/core';
-import * as i1 from '@acorex/components/decorators';
-import { AXDecoratorModule } from '@acorex/components/decorators';
+import { signal, inject, Injectable, Directive, Input, HostBinding, ElementRef, Component, ViewEncapsulation, NgModule } from '@angular/core';
+import { AXFileService, AXFileModule } from '@acorex/core/file';
+import * as i3 from '@acorex/core/translation';
+import { AXTranslator, AXTranslationModule } from '@acorex/core/translation';
+import { BehaviorSubject, switchMap, map, interval } from 'rxjs';
+import { sumBy } from 'lodash-es';
+import { AXPopupService, AXPopupModule } from '@acorex/components/popup';
 import { AUTO_STYLE, style, state, animate, transition, trigger } from '@angular/animations';
-import * as i1$1 from '@angular/cdk/dialog';
-import { Dialog, DIALOG_DATA } from '@angular/cdk/dialog';
-import { GlobalPositionStrategy } from '@angular/cdk/overlay';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { BehaviorSubject } from 'rxjs';
+import { AXClosbaleComponent, MXBaseComponent } from '@acorex/components/common';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@acorex/components/progress-bar';
-import { AXProgressBarModule } from '@acorex/components/progress-bar';
-import * as i4 from '@acorex/core/translation';
-import { AXTranslator, AXTranslationModule } from '@acorex/core/translation';
-import { AXFileService } from '@acorex/core/file';
+import { AXBasePageComponent } from '@acorex/components/page';
+import * as i1 from '@acorex/components/circular-progress';
+import { AXCircularProgressModule } from '@acorex/components/circular-progress';
+import * as i4 from '@acorex/core/format';
+import { AXFormatModule } from '@acorex/core/format';
+import * as i1$1 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
 import { AXButtonModule } from '@acorex/components/button';
+import { AXProgressBarModule } from '@acorex/components/progress-bar';
+import { AXDateTimeModule } from '@acorex/core/dateTime';
+import { HttpClientModule } from '@angular/common/http';
 
-class AXUploaderDropZoneComponent extends MXBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXUploaderDropZoneComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: AXUploaderDropZoneComponent, selector: "ax-uploader-drop-zone", 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>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>\n", styles: [""], dependencies: [{ kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
+class AXUploadRequest {
+    get name() {
+        return this.file.name;
+    }
+    get ext() {
+        const parts = this.name.split('.');
+        if (parts.length > 1) {
+            return parts[parts.length - 1];
+        }
+        else {
+            // No extension found
+            return '';
+        }
+    }
+    get size() {
+        return this.file.size;
+    }
+    constructor(file) {
+        this.file = file;
+        this.progress = signal(0);
+        this.estimateTime = signal(0);
+        this.status = signal('new');
+        this.bytesTransferred = 0;
+        this.uploadSpeed = 1000000; // Simulated upload speed in bytes per interval (e.g., 50KB per interval)
+        this.interval = 1000;
+        this.intervalId = -1;
+    }
+    estimateTimeRemaining(bytesTransferred) {
+        const now = Date.now();
+        const elapsed = now - this.startTime; // Time in milliseconds
+        if (elapsed === 0) {
+            return null; // Avoid division by zero
+        }
+        const speed = bytesTransferred / 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
+    }
+    async upload() {
+        this.startTime = Date.now();
+        this.progress.set(0);
+        this.status.set('inprogress');
+        this.intervalId = setInterval(() => {
+            this.bytesTransferred += this.uploadSpeed;
+            if (this.bytesTransferred > this.size) {
+                this.bytesTransferred = this.size;
+            }
+            const progress = Math.floor(this.bytesTransferred / this.size * 100);
+            this.progress.set(progress);
+            this.estimateTime.set(this.estimateTimeRemaining(this.bytesTransferred));
+            if (this.bytesTransferred === this.size) {
+                clearInterval(this.intervalId);
+                this.progress.set(100);
+                this.status.set('completed');
+            }
+        }, this.interval);
+    }
+    cancel() {
+        this.status.set('canceled');
+        this.bytesTransferred = 0;
+        this.estimateTime.set(0);
+        this.progress.set(0);
+        clearInterval(this.intervalId);
+        return Promise.resolve();
+    }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXUploaderDropZoneComponent, decorators: [{
-            type: Component,
-            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>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>\n" }]
-        }] });
 
 class AXUploaderService {
     constructor() {
-        this.dialog = inject(Dialog);
-        this.http = inject(HttpClient);
+        this.popupService = inject(AXPopupService);
+        this.fileService = inject(AXFileService);
         this.files$ = new BehaviorSubject([]);
+        this.totalEstimateTime = interval(500).pipe(switchMap(() => this.files$.asObservable()), map(f => sumBy(f, c => c.estimateTime())));
     }
-    openDialog() {
-        const positionStrategy = new GlobalPositionStrategy();
-        if (!this.dialogRef) {
-            this.dialogRef = this.dialog.open(AXUploaderListComponent, {
-                hasBackdrop: false,
-                closeOnNavigation: false,
-                width: '320px',
-                maxWidth: 320,
-                panelClass: [
-                    'ax-uploader-list-pane',
-                    'ax-animate-animated',
-                    'ax-animate-fadeIn',
-                    'ax-animate-faster',
-                ],
-                positionStrategy: positionStrategy.bottom().end('24px'),
-                data: {
-                    files: this.files$,
-                },
-            });
-        }
+    get files() {
+        return this.files$;
     }
-    closeDialog() {
-        this.dialogRef.close();
+    showDialog() {
+        Promise.resolve().then(function () { return uploaderList_component; }).then(c => {
+            this.popupService.open(c.AXUploaderListComponent, {
+                size: 'md',
+                title: "Upload File"
+            }).then(async () => {
+                await this.cancelAll();
+                this.clearAll();
+            });
+        });
     }
-    upload(requestUrl, file, options) {
-        const formData = new FormData();
-        formData.append(file.name, file);
-        return this.http.post(requestUrl, formData, options);
+    convertFileToRequest(file) {
+        return new AXUploadRequest(file);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXUploaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXUploaderService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXUploaderService, decorators: [{
-            type: Injectable
-        }] });
-
-class AXUploaderListComponent extends MXBaseComponent {
-    constructor(dialogRef) {
-        super();
-        this.dialogRef = dialogRef;
-        this.data = inject(DIALOG_DATA);
-        this.items = [];
-        this.leftTime = 5;
-        this.isCollapsed = false;
-        this.uploadService = inject(AXUploaderService);
-        this.uploadService.files$.subscribe({
-            next: (e) => {
-                this.items.push(...e);
-                // this.upload()
-            },
+    startUpload() {
+        this.files.value.filter(c => c.status() == 'new').forEach(c => {
+            c.upload();
         });
     }
-    upload(file) {
-        this.uploadService.upload('http://api.acorexui.com/api/v1/files', file).subscribe({
-            next: (e) => { },
-            error: (err) => {
-                console.error(err);
-            },
-        });
+    async browse() {
+        try {
+            const files = await this.fileService.choose();
+            if (files.length) {
+                return this.add(files);
+            }
+            return Promise.resolve([]);
+        }
+        catch (error) {
+            console.error(error);
+            return Promise.resolve([]);
+        }
     }
-    toggle() {
-        this.isCollapsed = !this.isCollapsed;
+    async add(files) {
+        const list = Array.from(files).map(f => this.convertFileToRequest(f));
+        const currentValue = this.files$.value;
+        currentValue.push(...list);
+        this.files$.next(currentValue);
+        this.showDialog();
+        this.startUpload();
+        return Promise.resolve(list);
     }
-    close() {
-        this.dialogRef.close();
+    upload() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXUploaderListComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: AXUploaderListComponent, selector: "ax-uploader-list", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-uploader-list-header\">\n  <div>Uploader list</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\n    <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n  </div>\n</div>\n\n<div [@collapse]=\"isCollapsed\">\n  <div class=\"ax-uploader-progress-status\">\n    <div>{{ leftTime }}min left</div>\n    <button>{{ 'common.cancel' | trans }}</button>\n  </div>\n  <ul class=\"ax-uploader-list-items\">\n    <ng-container *ngFor=\"let item of items\">\n      <li>\n        <div>\n          <i class=\"ax-icon ax-icon-inbox\"></i>\n          <div class=\"ax-uploader-item-text\">\n            <strong>{{ item.name }}</strong>\n            <small>{{ item.size }}</small>\n          </div>\n        </div>\n        <div>\n          <ax-progress-bar style=\"width: 48px\" color=\"primary\" [progress]=\"20\"></ax-progress-bar>\n        </div>\n      </li>\n    </ng-container>\n  </ul>\n</div>\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{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 rgba(0,0,0,.16);border:1px solid;border-color:rgba(var(--ax-color-border-default));outline-color:rgba(var(--ax-color-primary-500))}ax-uploader-list .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-list .ax-uploader-list-header .ax-icon{-webkit-margin-start:.5rem;margin-inline-start:.5rem;cursor:pointer;font-size:1.5rem;line-height:2rem;line-height:1}ax-uploader-list .ax-uploader-list-header .ax-icon:hover{opacity:.75}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{padding:.5rem 0;overflow-y:auto;overflow-x:hidden;max-height:75vh}ax-uploader-list .ax-uploader-list-items li{display:flex;align-items:center;justify-content:space-between;padding:.75rem;font-size:.875rem;line-height:1.25rem}ax-uploader-list .ax-uploader-list-items li>div{display:flex}ax-uploader-list .ax-uploader-list-items li>div .ax-icon{-webkit-margin-end:.5rem;margin-inline-end:.5rem;display:flex;font-size:1.5rem;line-height:1}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text{display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text strong{display:block;font-weight:500}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text small{color:rgb(var(--ax-color-text-default),.5)}.ax-uploader-list-pane .cdk-dialog-container:focus,.ax-uploader-list-pane .cdk-dialog-container:focus-visible,.ax-uploader-list-pane .cdk-dialog-container:focus-within{outline:2px solid transparent;outline-offset:2px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "trans" }], animations: [
-            trigger('collapse', [
-                state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
-                state('true', style({ height: '0', visibility: 'hidden' })),
-                transition('false => true', animate(150 + 'ms ease-in')),
-                transition('true => false', animate(150 + 'ms ease-out')),
-            ]),
-        ], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXUploaderListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-uploader-list', encapsulation: ViewEncapsulation.None, animations: [
-                        trigger('collapse', [
-                            state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
-                            state('true', style({ height: '0', visibility: 'hidden' })),
-                            transition('false => true', animate(150 + 'ms ease-in')),
-                            transition('true => false', animate(150 + 'ms ease-out')),
-                        ]),
-                    ], template: "<div class=\"ax-uploader-list-header\">\n  <div>Uploader list</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\n    <i class=\"ax-icon ax-icon-close\" (click)=\"close()\"></i>\n  </div>\n</div>\n\n<div [@collapse]=\"isCollapsed\">\n  <div class=\"ax-uploader-progress-status\">\n    <div>{{ leftTime }}min left</div>\n    <button>{{ 'common.cancel' | trans }}</button>\n  </div>\n  <ul class=\"ax-uploader-list-items\">\n    <ng-container *ngFor=\"let item of items\">\n      <li>\n        <div>\n          <i class=\"ax-icon ax-icon-inbox\"></i>\n          <div class=\"ax-uploader-item-text\">\n            <strong>{{ item.name }}</strong>\n            <small>{{ item.size }}</small>\n          </div>\n        </div>\n        <div>\n          <ax-progress-bar style=\"width: 48px\" color=\"primary\" [progress]=\"20\"></ax-progress-bar>\n        </div>\n      </li>\n    </ng-container>\n  </ul>\n</div>\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{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 rgba(0,0,0,.16);border:1px solid;border-color:rgba(var(--ax-color-border-default));outline-color:rgba(var(--ax-color-primary-500))}ax-uploader-list .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-list .ax-uploader-list-header .ax-icon{-webkit-margin-start:.5rem;margin-inline-start:.5rem;cursor:pointer;font-size:1.5rem;line-height:2rem;line-height:1}ax-uploader-list .ax-uploader-list-header .ax-icon:hover{opacity:.75}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{padding:.5rem 0;overflow-y:auto;overflow-x:hidden;max-height:75vh}ax-uploader-list .ax-uploader-list-items li{display:flex;align-items:center;justify-content:space-between;padding:.75rem;font-size:.875rem;line-height:1.25rem}ax-uploader-list .ax-uploader-list-items li>div{display:flex}ax-uploader-list .ax-uploader-list-items li>div .ax-icon{-webkit-margin-end:.5rem;margin-inline-end:.5rem;display:flex;font-size:1.5rem;line-height:1}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text{display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text strong{display:block;font-weight:500}ax-uploader-list .ax-uploader-list-items li>div .ax-uploader-item-text small{color:rgb(var(--ax-color-text-default),.5)}.ax-uploader-list-pane .cdk-dialog-container:focus,.ax-uploader-list-pane .cdk-dialog-container:focus-visible,.ax-uploader-list-pane .cdk-dialog-container:focus-within{outline:2px solid transparent;outline-offset:2px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.DialogRef }] });
-
-class AXUploaderOverlayComponent extends MXBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXUploaderOverlayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: AXUploaderOverlayComponent, selector: "ax-uploader-overlay", usesInheritance: true, ngImport: i0, template: "<div\n    class=\"ax-flex ax-flex-col ax-gap-4 ax-items-center ax-justify-center ax-h-[95vh] hover:ax-bg-primary-50 ax-m-2 hover:ax-border-2 ax-rounded-lg hover:ax-border-primary-500\">\n\n</div>", styles: [""], encapsulation: i0.ViewEncapsulation.None }); }
+    async cancelAll() {
+        await Promise.all(this.files$.value.filter(c => c.status() != 'completed').map(c => c.cancel()));
+    }
+    clearAll() {
+        this.files$.value
+            .filter(c => c.status() != 'inprogress')
+            .forEach(c => this.remove(c));
+    }
+    remove(item) {
+        let currentValue = this.files$.value;
+        currentValue = currentValue.filter(c => c != item);
+        this.files$.next(currentValue);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AXUploaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AXUploaderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXUploaderOverlayComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-uploader-overlay', encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"ax-flex ax-flex-col ax-gap-4 ax-items-center ax-justify-center ax-h-[95vh] hover:ax-bg-primary-50 ax-m-2 hover:ax-border-2 ax-rounded-lg hover:ax-border-primary-500\">\n\n</div>" }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AXUploaderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }] });
 
 class AXUploaderZoneDirective {
@@ -161,8 +194,7 @@ class AXUploaderZoneDirective {
     handleOnDrop(event) {
         event.preventDefault();
         event.stopImmediatePropagation();
-        this.uploadService.files$.next(event.dataTransfer?.files);
-        this.uploadService.openDialog();
+        this.uploadService.add(event.dataTransfer?.files);
         this.removeZone();
     }
     handleDragOver(event) {
@@ -183,13 +215,16 @@ class AXUploaderZoneDirective {
     removeZone() {
         this.overlayElement.remove();
     }
+    browser() {
+        this.uploadService.browse();
+    }
     get __hostClass() {
         return `ax-drop-zone`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXUploaderZoneDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: { multiple: "multiple" }, host: { properties: { "class": "this.__hostClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AXUploaderZoneDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.6", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: { multiple: "multiple" }, host: { properties: { "class": "this.__hostClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXUploaderZoneDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AXUploaderZoneDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axUploaderZone]',
@@ -201,35 +236,131 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                 args: ['class']
             }] } });
 
+class AXUploaderBrowseDirective {
+    constructor() {
+        this.uploaderZone = inject(AXUploaderZoneDirective);
+        this.elemenrRef = inject((ElementRef));
+    }
+    ngOnInit() {
+        this.elemenrRef.nativeElement.addEventListener('click', this.handleClick.bind(this));
+    }
+    ngOnDestroy() {
+        this.elemenrRef.nativeElement.removeEventListener('click', this.handleClick.bind(this));
+    }
+    handleClick() {
+        this.uploaderZone.browser();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AXUploaderBrowseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.6", type: AXUploaderBrowseDirective, selector: "[axUploaderBrowseHandle]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AXUploaderBrowseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axUploaderBrowseHandle]',
+                }]
+        }] });
+
+class AXUploaderListComponent extends AXBasePageComponent {
+    constructor() {
+        super(...arguments);
+        this.uploadService = inject(AXUploaderService);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AXUploaderListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.6", 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' }}</div>\n  <button (click)=\"uploadService.cancelAll()\">{{ 'common.cancel' | trans }}</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><span>{{ item.size | format: 'filesize' }}</span>\n        @switch (item.status()) {\n        @case ('inprogress') {\n        / {{ item.estimateTime() | format: 'timeleft' }}\n        }\n        }\n      </div>\n    </div>\n    @switch (item.status()) {\n    @case ('completed') {\n    <div class=\"ax-status\">\n      <i class=\"ax-icon ax-icon-solid ax-icon-check-circle ax-state-completed\"></i>\n    </div>\n    }\n    @case ('canceled') {\n    <span class=\"ax-state-canceled\">Canceled</span>\n    }\n    @case ('failed') {\n    <span class=\"ax-state-failed\">Failed</span>\n    }\n    @default {\n    <div class=\"ax-status\">\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=\"{{ 'common.cancel' | trans }}\"></i>\n    </div>\n    }\n    }\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;-moz-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: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "trans" }, { kind: "pipe", type: i4.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", 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' }}</div>\n  <button (click)=\"uploadService.cancelAll()\">{{ 'common.cancel' | trans }}</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><span>{{ item.size | format: 'filesize' }}</span>\n        @switch (item.status()) {\n        @case ('inprogress') {\n        / {{ item.estimateTime() | format: 'timeleft' }}\n        }\n        }\n      </div>\n    </div>\n    @switch (item.status()) {\n    @case ('completed') {\n    <div class=\"ax-status\">\n      <i class=\"ax-icon ax-icon-solid ax-icon-check-circle ax-state-completed\"></i>\n    </div>\n    }\n    @case ('canceled') {\n    <span class=\"ax-state-canceled\">Canceled</span>\n    }\n    @case ('failed') {\n    <span class=\"ax-state-failed\">Failed</span>\n    }\n    @default {\n    <div class=\"ax-status\">\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=\"{{ 'common.cancel' | trans }}\"></i>\n    </div>\n    }\n    }\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;-moz-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"] }]
+        }] });
+
+var uploaderList_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXUploaderListComponent: AXUploaderListComponent
+});
+
+class AXUploaderDialogContainerComponent {
+    constructor() {
+        this.parent = inject(AXClosbaleComponent);
+        this.isCollapsed = false;
+    }
+    close() {
+        this.parent.close();
+    }
+    toggle() {
+        this.isCollapsed = !this.isCollapsed;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AXUploaderDialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: AXUploaderDialogContainerComponent, selector: "ax-uploader-dialog-container", ngImport: i0, template: "<div class=\"ax-uploader-list-header\">\n    <div>Uploading</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 rgba(0,0,0,.16);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{-webkit-margin-start:.5rem;margin-inline-start:.5rem;cursor:pointer}ax-uploader-dialog-container .ax-uploader-list-header .ax-icon:hover{opacity:.75}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXUploaderListComponent, selector: "ax-uploader-list" }], animations: [
+            trigger('collapse', [
+                state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
+                state('true', style({ height: '0', visibility: 'hidden' })),
+                transition('false => true', animate(150 + 'ms ease-in')),
+                transition('true => false', animate(150 + 'ms ease-out')),
+            ]),
+        ], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AXUploaderDialogContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-uploader-dialog-container', encapsulation: ViewEncapsulation.None, animations: [
+                        trigger('collapse', [
+                            state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
+                            state('true', style({ height: '0', visibility: 'hidden' })),
+                            transition('false => true', animate(150 + 'ms ease-in')),
+                            transition('true => false', animate(150 + 'ms ease-out')),
+                        ]),
+                    ], template: "<div class=\"ax-uploader-list-header\">\n    <div>Uploading</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 rgba(0,0,0,.16);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{-webkit-margin-start:.5rem;margin-inline-start:.5rem;cursor:pointer}ax-uploader-dialog-container .ax-uploader-list-header .ax-icon:hover{opacity:.75}\n"] }]
+        }] });
+
+class AXUploaderDropZoneComponent extends MXBaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AXUploaderDropZoneComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", 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$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", 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"] }]
+        }] });
+
 class AXUploaderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: AXUploaderModule, declarations: [AXUploaderDropZoneComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AXUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: AXUploaderModule, declarations: [AXUploaderDropZoneComponent,
             AXUploaderListComponent,
-            AXUploaderOverlayComponent,
-            AXUploaderZoneDirective], imports: [CommonModule,
+            AXUploaderZoneDirective,
+            AXUploaderBrowseDirective,
+            AXUploaderDialogContainerComponent], imports: [CommonModule,
             HttpClientModule,
             AXDecoratorModule,
             AXButtonModule,
             AXTranslationModule,
-            AXProgressBarModule], exports: [AXUploaderDropZoneComponent,
-            AXUploaderListComponent,
-            AXUploaderOverlayComponent,
-            AXUploaderZoneDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXUploaderModule, providers: [AXUploaderService, AXFileService], imports: [CommonModule,
+            AXProgressBarModule,
+            AXFormatModule,
+            AXFileModule,
+            AXDateTimeModule,
+            AXCircularProgressModule,
+            AXPopupModule], exports: [AXUploaderDropZoneComponent,
+            AXUploaderZoneDirective,
+            AXUploaderBrowseDirective,
+            AXUploaderDialogContainerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AXUploaderModule, providers: [AXUploaderService], imports: [CommonModule,
             HttpClientModule,
             AXDecoratorModule,
             AXButtonModule,
             AXTranslationModule,
-            AXProgressBarModule] }); }
+            AXProgressBarModule,
+            AXFormatModule,
+            AXFileModule,
+            AXDateTimeModule,
+            AXCircularProgressModule,
+            AXPopupModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AXUploaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AXUploaderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
                         AXUploaderDropZoneComponent,
                         AXUploaderListComponent,
-                        AXUploaderOverlayComponent,
                         AXUploaderZoneDirective,
+                        AXUploaderBrowseDirective,
+                        AXUploaderDialogContainerComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -238,14 +369,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                         AXButtonModule,
                         AXTranslationModule,
                         AXProgressBarModule,
+                        AXFormatModule,
+                        AXFileModule,
+                        AXDateTimeModule,
+                        AXCircularProgressModule,
+                        AXPopupModule,
                     ],
                     exports: [
                         AXUploaderDropZoneComponent,
-                        AXUploaderListComponent,
-                        AXUploaderOverlayComponent,
                         AXUploaderZoneDirective,
+                        AXUploaderBrowseDirective,
+                        AXUploaderDialogContainerComponent,
                     ],
-                    providers: [AXUploaderService, AXFileService],
+                    providers: [AXUploaderService],
                 }]
         }] });
 
@@ -253,5 +389,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXUploaderDropZoneComponent, AXUploaderListComponent, AXUploaderModule, AXUploaderOverlayComponent, AXUploaderService, AXUploaderZoneDirective };
+export { AXUploaderBrowseDirective, AXUploaderDialogContainerComponent, AXUploaderDropZoneComponent, AXUploaderListComponent, AXUploaderModule, AXUploaderService, AXUploaderZoneDirective };
 //# sourceMappingURL=acorex-components-uploader.mjs.map