@acorex/components 21.0.0-next.19 → 21.0.0-next.20

package/fesm2022/acorex-components-uploader.mjs

@@ -1,559 +1,12 @@
-import * as i0 from '@angular/core';
-import { signal, computed, inject, Injectable, ElementRef, ChangeDetectorRef, DOCUMENT, PLATFORM_ID, EventEmitter, HostBinding, Output, Input, Directive, ViewEncapsulation, Component, input, NgModule } from '@angular/core';
-import { AXTranslationService, AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
-import { AXUnsubscriber } from '@acorex/core/utils';
-import { isPlatformBrowser, AsyncPipe, NgClass, CommonModule } from '@angular/common';
-import { AXPopupService, AXPopupModule } from '@acorex/components/popup';
-import { AXFileService, AXFileModule } from '@acorex/core/file';
-import { sumBy } from 'lodash-es';
-import { Subject, BehaviorSubject, map } from 'rxjs';
 import { AXComponent, AXClosableComponent, MXBaseComponent } from '@acorex/cdk/common';
-import { AXProgressBarComponent, AXProgressBarModule } from '@acorex/components/progress-bar';
-import { AXFormatPipe, AXFormatModule } from '@acorex/core/format';
-import { AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
-import { AXButtonModule } from '@acorex/components/button';
-import { AXCircularProgressModule } from '@acorex/components/circular-progress';
-import { AXDateTimeModule } from '@acorex/core/date-time';
-
-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;
-    }
-    get file() {
-        return this.uploadFile;
-    }
-    constructor(uploadFile) {
-        this.uploadFile = uploadFile;
-        this._progress = signal(0, ...(ngDevMode ? [{ debugName: "_progress" }] : []));
-        this.progress = computed(() => this._progress(), ...(ngDevMode ? [{ debugName: "progress" }] : []));
-        this._estimateTime = signal(0, ...(ngDevMode ? [{ debugName: "_estimateTime" }] : []));
-        this.estimateTime = computed(() => this._estimateTime(), ...(ngDevMode ? [{ debugName: "estimateTime" }] : []));
-        this._status = signal('new', ...(ngDevMode ? [{ debugName: "_status" }] : []));
-        this.status = computed(() => this._status(), ...(ngDevMode ? [{ debugName: "status" }] : []));
-        this._message = signal(null, ...(ngDevMode ? [{ debugName: "_message" }] : []));
-        this.message = computed(() => this._message(), ...(ngDevMode ? [{ debugName: "message" }] : []));
-        this._isDetermined = signal(false, ...(ngDevMode ? [{ debugName: "_isDetermined" }] : []));
-        this.isDetermined = computed(() => this._isDetermined(), ...(ngDevMode ? [{ debugName: "isDetermined" }] : []));
-        this.bytesTransferred = 0;
-        this.onCancel = new Subject();
-        this.onStart = new Subject();
-        this.onFailed = new Subject();
-        this.onComplete = new BehaviorSubject(null);
-    }
-    estimateTimeRemaining(bytesTransferred) {
-        const now = Date.now();
-        const elapsed = now - this.startTime; // Time in milliseconds
-        if (isNaN(elapsed) || elapsed === 0) {
-            return null; // Avoid division by zero
-        }
-        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() {
-        this._estimateTime.set(this.estimateTimeRemaining(this.bytesTransferred));
-        const progress = Math.floor((this.bytesTransferred / this.size) * 100);
-        this._progress.set(progress);
-    }
-    async upload() {
-        this.startTime = Date.now();
-        this._progress.set(0);
-        this._status.set('inprogress');
-        this.onStart.next();
-    }
-    cancel() {
-        this._status.set('canceled');
-        this.bytesTransferred = 0;
-        this._estimateTime.set(0);
-        this._progress.set(0);
-        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');
-        this.bytesTransferred = 0;
-        this._estimateTime.set(0);
-        this._progress.set(0);
-        this._message.set(message);
-        this.onFailed.next();
-    }
-    finish(data) {
-        this._status.set('completed');
-        this.bytesTransferred = this.size;
-        this._estimateTime.set(0);
-        this._progress.set(100);
-        this.onComplete.next(data);
-    }
-}
-
-/**
- * Service for managing file uploads with drag-and-drop support, progress tracking, and dialog management.
- * @category Services
- */
-class AXUploaderService {
-    constructor() {
-        /**
-         * Popup service for showing upload dialogs.
-         * @ignore
-         */
-        this.popupService = inject(AXPopupService);
-        /**
-         * Translation service for localized text.
-         * @ignore
-         */
-        this.translateService = inject(AXTranslationService);
-        /**
-         * File service for file operations.
-         * @ignore
-         */
-        this.fileService = inject(AXFileService);
-        /**
-         * Behavior subject for managing upload requests.
-         * @ignore
-         */
-        this._files$ = new BehaviorSubject([]);
-        /**
-         * Gets the files behavior subject for observing upload requests.
-         */
-        this.files = this._files$.asObservable();
-        /**
-         * Subject for file upload start events.
-         */
-        this.onFileUploadStart = new Subject();
-        /**
-         * Subject for file upload complete events.
-         */
-        this.onFileUploadComplete = new Subject();
-        /**
-         * Subject for all files upload complete events.
-         */
-        this.onFilesUploadComplete = new Subject();
-        /**
-         * Subject for file upload canceled events.
-         */
-        this.onFileUploadCanceled = new Subject();
-        /**
-         * Signal indicating if any upload has determined progress.
-         */
-        this.isAnyDetermined = computed(() => this._files$.value.some((file) => file.isDetermined()), ...(ngDevMode ? [{ debugName: "isAnyDetermined" }] : []));
-        /**
-         * Observable for total estimated upload time.
-         */
-        this.totalEstimateTime = this._files$.pipe(map((files) => sumBy(files, (file) => (file.status() === 'inprogress' ? file.estimateTime() : 0))));
-    }
-    /**
-     * Shows the upload dialog with the list of files.
-     * @private
-     */
-    async showDialog() {
-        const filesCount = this._files$.getValue().length;
-        Promise.resolve().then(function () { return uploaderList_component; }).then(async (c) => {
-            this.popupService
-                .open(c.AXUploaderListComponent, {
-                size: 'sm',
-                title: filesCount > 1
-                    ? await this.translateService.translateAsync('@acorex:uploader.zone.uploadFiles')
-                    : await this.translateService.translateAsync('@acorex:uploader.zone.uploadFile'),
-            })
-                .then(async () => {
-                await this.cancelAll();
-                this.clearAll();
-            });
-        });
-    }
-    /**
-     * Converts a File object to an AXUploadRequest.
-     * @private
-     */
-    convertFileToRequest(file) {
-        return new AXUploadRequest(file);
-    }
-    /**
-     * Starts uploading files that are in 'new' status.
-     * @private
-     */
-    async startUpload() {
-        const newFiles = this._files$.value.filter((c) => c.status() === 'new');
-        for (const file of newFiles) {
-            await this.bindEvents(file);
-        }
-    }
-    /**
-     * Binds event handlers to an upload request.
-     * @private
-     */
-    async bindEvents(c) {
-        c.onStart.subscribe(() => {
-            this.onFileUploadStart.next({
-                component: this,
-                uploadedFile: c,
-                isUserInteraction: false,
-            });
-        });
-        c.onComplete.subscribe((data) => {
-            Object.assign(c, { metaData: data });
-            this.onFileUploadComplete.next({
-                component: this,
-                uploadedFile: c,
-                isUserInteraction: false,
-            });
-            const isAllDone = this._files$.value.every((f) => f.status() === 'completed' || f.status() === 'canceled' || f.status() === 'failed');
-            if (isAllDone) {
-                this.onFilesUploadComplete.next({
-                    component: this,
-                    uploadedFiles: this._files$.value,
-                    isUserInteraction: false,
-                });
-            }
-        });
-        c.onCancel.subscribe(() => {
-            this.onFileUploadCanceled.next({
-                component: this,
-                uploadedFile: c,
-                isUserInteraction: false,
-            });
-        });
-    }
-    /**
-     * Opens the file browser dialog and returns selected files as upload requests.
-     * @param options - Configuration options for file selection
-     * @returns Promise that resolves to an array of upload requests
-     */
-    async browse(options = { multiple: false }) {
-        try {
-            const files = await this.fileService.choose({ multiple: options?.multiple || false, accept: options.accept });
-            if (files.length) {
-                return this.add(files);
-            }
-            return [];
-        }
-        catch (error) {
-            // It's good practice to log the error.
-            console.error('File browse failed:', error);
-            return [];
-        }
-    }
-    /**
-     * Adds files to the upload queue and starts the upload process.
-     * @param files - Files to add to the upload queue
-     * @returns Promise that resolves to an array of upload requests
-     */
-    async add(files) {
-        const list = Array.from(files).map((f) => this.convertFileToRequest(f));
-        const newFiles = [...this._files$.value, ...list];
-        this._files$.next(newFiles);
-        await this.showDialog();
-        this.startUpload();
-        return list;
-    }
-    /**
-     * Cancels all pending and in-progress uploads.
-     */
-    async cancelAll() {
-        await Promise.all(this._files$.value.filter((c) => c.status() !== 'completed').map((c) => c.cancel()));
-    }
-    /**
-     * Clears all completed uploads from the queue.
-     */
-    clearAll() {
-        const remainingFiles = this._files$.value.filter((c) => c.status() === 'inprogress');
-        this._files$.next(remainingFiles);
-    }
-    /**
-     * Removes a specific upload request from the queue.
-     * @param item - The upload request to remove
-     */
-    remove(item) {
-        const updatedFiles = this._files$.value.filter((c) => c !== item);
-        this._files$.next(updatedFiles);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-/**
- * A directive that provides drag-and-drop and file upload functionality.
- * When applied to an element, it enables drag-and-drop file uploads and file browsing.
- * @category Directives
- */
-class AXUploaderZoneDirective {
-    /**
-     * Initializes the directive with event listeners and service subscriptions.
-     */
-    constructor() {
-        /**
-         * The element reference for the directive host.
-         * @ignore
-         */
-        this.elementRef = inject(ElementRef);
-        /**
-         * Whether multiple files can be selected.
-         * @defaultValue true
-         */
-        this.multiple = true;
-        /**
-         * File types that are accepted for upload.
-         * @defaultValue null
-         */
-        this.accept = null;
-        /**
-         * Change detector reference.
-         * @ignore
-         */
-        this.cdr = inject(ChangeDetectorRef);
-        /**
-         * Document reference.
-         * @ignore
-         */
-        this.document = inject(DOCUMENT);
-        /**
-         * Platform ID for browser detection.
-         * @ignore
-         */
-        this.platformID = inject(PLATFORM_ID);
-        /**
-         * Upload service instance.
-         * @ignore
-         */
-        this.uploadService = inject(AXUploaderService);
-        /**
-         * Unsubscriber service instance.
-         * @ignore
-         */
-        this.unsubscriber = inject(AXUnsubscriber);
-        /**
-         * Translation service instance.
-         * @ignore
-         */
-        this.translateService = inject(AXTranslationService);
-        /**
-         * Emitted when files are changed (added, removed, etc.).
-         */
-        this.onChanged = new EventEmitter();
-        /**
-         * Emitted when a single file upload is completed.
-         */
-        this.onFileUploadComplete = new EventEmitter();
-        /**
-         * Emitted when all files upload is completed.
-         */
-        this.onFilesUploadComplete = new EventEmitter();
-        /**
-         * CSS class for the overlay state.
-         * @ignore
-         */
-        this.stateClass = 'ax-uploader-overlay-state';
-        this.element = this.elementRef.nativeElement;
-        this.element.style.position = 'relative';
-        //
-        this.uploadService.onFileUploadComplete.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
-            this.onFileUploadComplete.next(c);
-        });
-        this.uploadService.onFilesUploadComplete.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
-            this.onFilesUploadComplete.next(c);
-        });
-        //
-        setTimeout(() => {
-            const browseHandlers = this.element.querySelectorAll('[data-ax-uploader-browse-handle="true"]');
-            if (browseHandlers.length <= 0)
-                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);
-    }
-    /**
-     * Cleans up event listeners when the directive is destroyed.
-     */
-    ngOnDestroy() {
-        this.element.removeEventListener('click', this.browser.bind(this));
-        this.element.removeEventListener('dragenter', this.handleDragEnter.bind(this));
-        this.element.removeEventListener('drop', this.handleOnDrop.bind(this));
-        this.element.removeEventListener('dragover', this.handleDragOver.bind(this));
-        this.element.removeEventListener('dragleave', this.removeZone.bind(this));
-    }
-    /**
-     * Handles drag enter events to show the upload overlay.
-     * @private
-     */
-    async handleDragEnter(event) {
-        this.createZone();
-        event.preventDefault();
-        event.stopImmediatePropagation();
-    }
-    /**
-     * Handles drop events to process dropped files.
-     * @private
-     */
-    async handleOnDrop(event) {
-        event.preventDefault();
-        event.stopImmediatePropagation();
-        const requests = await this.uploadService.add(event.dataTransfer?.files);
-        this.onChanged.emit({
-            component: this,
-            requests,
-            isUserInteraction: true,
-        });
-        this.removeZone();
-        this.cdr.detectChanges();
-    }
-    /**
-     * Handles drag over events to allow dropping.
-     * @private
-     */
-    handleDragOver(event) {
-        event.preventDefault();
-        event.stopImmediatePropagation();
-    }
-    /**
-     * Creates the visual overlay for drag and drop feedback.
-     * @private
-     */
-    async createZone() {
-        if (isPlatformBrowser(this.platformID)) {
-            this.overlayElement = this.document.createElement('div');
-            this.overlayElement.classList.add('ax-uploader-overlay-state', '-ax-z-1');
-            this.overlayElement.id = 'ax-uploader-overlay-state';
-            const icon = this.document.createElement('span');
-            icon.classList.add('ax-icon', 'ax-icon-upload');
-            const text = this.document.createElement('span');
-            text.innerText = await this.translateService.translateAsync('@acorex:uploader.zone.text');
-            this.overlayElement.appendChild(icon);
-            this.overlayElement.appendChild(text);
-            this.element.appendChild(this.overlayElement);
-        }
-    }
-    /**
-     * Removes the visual overlay for drag and drop feedback.
-     * @private
-     */
-    removeZone() {
-        if (isPlatformBrowser(this.platformID)) {
-            this.element.removeChild(this.document.getElementById('ax-uploader-overlay-state'));
-            this.overlayElement.remove();
-            //console.log(this.overlayElement);
-        }
-    }
-    /**
-     * Opens the file browser dialog and processes selected files.
-     * @returns Promise that resolves when files are processed
-     */
-    async browser() {
-        const requests = await this.uploadService.browse({ accept: this.accept, multiple: this.multiple });
-        this.onChanged.emit({
-            component: this,
-            requests,
-            isUserInteraction: true,
-        });
-    }
-    /**
-     * Host binding for CSS class.
-     * @ignore
-     */
-    get __hostClass() {
-        return `ax-drop-zone`;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderZoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: AXUploaderZoneDirective, isStandalone: true, selector: "[axUploaderZone]", inputs: { multiple: "multiple", accept: "accept" }, outputs: { onChanged: "onChanged", onFileUploadComplete: "onFileUploadComplete", onFilesUploadComplete: "onFilesUploadComplete" }, host: { properties: { "class": "this.__hostClass" } }, providers: [AXUnsubscriber], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderZoneDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[axUploaderZone]',
-                    providers: [AXUnsubscriber],
-                }]
-        }], ctorParameters: () => [], propDecorators: { multiple: [{
-                type: Input
-            }], accept: [{
-                type: Input
-            }], onChanged: [{
-                type: Output
-            }], onFileUploadComplete: [{
-                type: Output
-            }], onFilesUploadComplete: [{
-                type: Output
-            }], __hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-/**
- * A directive that provides browse functionality for file uploads.
- * When applied to an element, clicking it will trigger the file browser dialog.
- * @category Directives
- */
-class AXUploaderBrowseDirective {
-    constructor() {
-        /**
-         * The uploader zone directive instance.
-         * @ignore
-         */
-        this.uploaderZone = inject(AXUploaderZoneDirective);
-        /**
-         * The element reference for the directive host.
-         * @ignore
-         */
-        this.elemenrRef = inject((ElementRef));
-    }
-    /**
-     * Initializes the directive by adding click event listener and data attribute.
-     */
-    ngOnInit() {
-        this.elemenrRef.nativeElement.addEventListener('click', this.handleClick.bind(this));
-        this.elemenrRef.nativeElement.dataset['axUploaderBrowseHandle'] = 'true';
-    }
-    /**
-     * Cleans up the directive by removing event listeners.
-     */
-    ngOnDestroy() {
-        this.elemenrRef.nativeElement.removeEventListener('click', this.handleClick.bind(this));
-    }
-    /**
-     * Handles the click event to trigger file browser.
-     * @private
-     */
-    async handleClick() {
-        await this.uploaderZone.browser();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderBrowseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: AXUploaderBrowseDirective, isStandalone: true, selector: "[axUploaderBrowseHandle]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderBrowseDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[axUploaderBrowseHandle]' }]
-        }] });
+import { AXTranslatorPipe } from '@acorex/core/translation';
+import { AsyncPipe, NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ViewEncapsulation, Component, input, NgModule } from '@angular/core';
+import { AXUploaderService } from '@acorex/cdk/uploader';
+import { AXProgressBarComponent } from '@acorex/components/progress-bar';
+import { AXFormatPipe } from '@acorex/core/format';
+import { AXDecoratorIconComponent } from '@acorex/components/decorators';
 
 /**
  * A component that displays a list of uploaded files.
@@ -575,11 +28,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
             args: [{ selector: 'ax-uploader-list', encapsulation: ViewEncapsulation.None, imports: [AXProgressBarComponent, AsyncPipe, AXTranslatorPipe, AXFormatPipe], providers: [{ provide: AXComponent, useExisting: AXUploaderListComponent }], template: "<!-- @if ((uploadService.totalEstimateTime | async) > 0) { -->\n<div class=\"ax-uploader-progress-status\" [class.ax-hide]=\"(uploadService.totalEstimateTime | async) <= 0\">\n  @if (uploadService.isAnyDetermined()) {\n    <span>{{ '@acorex:common.status.processing' | translate | async }}</span>\n  } @else {\n    <div>{{ uploadService.totalEstimateTime | async | format: 'timeleft' | async }}</div>\n  }\n  <button (click)=\"uploadService.cancelAll()\">{{ '@acorex:common.actions.cancel' | translate | async }}</button>\n</div>\n<!-- } -->\n\n<ul class=\"ax-uploader-list-items\">\n  @for (item of uploadService.files | async; track item.name) {\n    <li>\n      <div class=\"ax-file\">\n        <span>{{ item.ext }}</span>\n      </div>\n      <div class=\"ax-item-container\">\n        <div class=\"ax-item-name\" [title]=\"item.name\">{{ item.name }}</div>\n        <div class=\"ax-status\">\n          @switch (item.status()) {\n            @case ('inprogress') {\n              <span>{{ item.size | format: 'filesize' | async }}</span> /\n              {{\n                item.isDetermined()\n                  ? (item.estimateTime() | format: 'timeleft' | async)\n                  : ('@acorex:common.status.processing' | translate | async)\n              }}\n            }\n            @case ('failed') {\n              <div class=\"ax-state-failed\">\n                <span>{{ item.message() }}</span>\n              </div>\n            }\n            @case ('completed') {\n              <div class=\"ax-state-completed\">\n                <span>{{ '@acorex:common.status.completed' | translate | async }}</span>\n              </div>\n            }\n          }\n        </div>\n      </div>\n      <div class=\"ax-status\">\n        @switch (item.status()) {\n          @case ('completed') {\n            <i class=\"ax-icon ax-icon-solid ax-icon-check-circle ax-state-completed\"></i>\n          }\n          @case ('canceled') {\n            <div>\n              <span class=\"ax-state-canceled\">{{ '@acorex:common.actions.canceled' | translate | async }}</span>\n              <!-- <i class=\"ax-icon ax-icon-solid ax-icon-redo\" (click)=\"item.redo()\" title=\"{{ 'retry' | translate | async }}\"></i> -->\n            </div>\n          }\n          @case ('failed') {\n            <div class=\"ax-state-failed\">\n              <span>{{ '@acorex:common.status.failed' | translate | async }}</span>\n              <i\n                class=\"ax-icon ax-icon-solid ax-icon-redo\"\n                (click)=\"item.redo()\"\n                title=\"{{ '@acorex:common.actions.retry' | translate | async }}\"\n              ></i>\n            </div>\n          }\n          @default {\n            <!-- <ax-circular-progress\n              [mode]=\"item.isDetermined() ? 'determinate' : 'indeterminate'\"\n              [size]=\"22\"\n              [stroke]=\"6\"\n              [progress]=\"item.isDetermined() ? item.progress() : 60\"\n              class=\"ax-show\"\n            >\n            </ax-circular-progress> -->\n            <i\n              class=\"ax-icon ax-icon-solid ax-icon-close\"\n              (click)=\"item.cancel()\"\n              title=\"{{ '@acorex:common.actions.cancel' | translate | async }}\"\n            ></i>\n          }\n        }\n      </div>\n    </li>\n    @let completed = item.status() === 'completed';\n    @if (item.status() === 'inprogress' || completed) {\n      <div class=\"ax-status-loading\" [class.ax-status-loading-hide]=\"completed\">\n        <ax-progress-bar\n          [height]=\"4\"\n          [mode]=\"completed ? 'determinate' : 'indeterminate'\"\n          [progress]=\"completed ? 100 : 60\"\n          [color]=\"completed ? 'success' : 'primary'\"\n        ></ax-progress-bar>\n      </div>\n    }\n  }\n</ul>\n", styles: ["ax-uploader-list .ax-uploader-progress-status{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;border-top-width:1px;border-color:rgba(var(--ax-sys-color-primary-lightest-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface));padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-primary-lightest-surface));transition:.3s ease-out}ax-uploader-list .ax-uploader-progress-status.ax-hide{opacity:0;overflow:hidden;height:0;padding-top:0;padding-bottom:0;transition:.3s ease-out}ax-uploader-list .ax-uploader-list-items{max-height:75vh;width:100%;overflow-y:auto;overflow-x:hidden;gap:.5rem;display:flex;flex-direction:column}ax-uploader-list .ax-uploader-list-items li{display:flex;padding:.5rem 1rem;align-items:center;font-size:.875rem;line-height:1.25rem;gap:1rem;width:100%}ax-uploader-list .ax-uploader-list-items li .ax-item-container{display:flex;flex-direction:column;flex:1;-webkit-user-select:none;user-select:none}ax-uploader-list .ax-uploader-list-items li .ax-item-container .ax-item-name{font-size:.875rem;line-height:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;width:12rem}ax-uploader-list .ax-uploader-list-items li .ax-status{position:relative;color:rgba(var(--ax-sys-color-on-surface),.5)}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-icon{font-size:1.375rem}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-icon-close{cursor:pointer}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-canceled span{color:rgba(var(--ax-sys-color-secondary-surface))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed{display:flex;align-items:center;gap:.5rem}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed span{color:rgba(var(--ax-sys-color-danger-surface))}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-failed i{cursor:pointer}ax-uploader-list .ax-uploader-list-items li .ax-status .ax-state-completed{color:rgba(var(--ax-sys-color-success-surface))}ax-uploader-list .ax-uploader-list-items li:hover .ax-hide{display:flex!important}ax-uploader-list .ax-uploader-list-items li:hover .ax-show{display:none!important}ax-uploader-list .ax-uploader-list-items li .ax-show{display:flex!important}ax-uploader-list .ax-uploader-list-items li .ax-hide{display:none!important}ax-uploader-list .ax-uploader-list-items .ax-status-loading.ax-status-loading-hide{transition:all 1s linear;opacity:0;overflow:hidden}.ax-file{position:relative;display:flex;align-items:center;justify-content:center;width:1.5rem;aspect-ratio:.7;border-radius:.25rem;color:rgba(var(--ax-sys-color-light-surface));background-color:rgba(var(--ax-sys-color-success-surface))!important}.ax-file>*{position:absolute;bottom:.3rem;font-weight:700;font-size:.65rem;line-height:.65rem}.ax-file:before{content:\"\";position:absolute;top:0;right:0;border-width:0 12px 12px 0;border-color:rgba(var(--ax-sys-color-surface)) rgba(var(--ax-sys-color-surface)) rgba(var(--ax-sys-color-on-surface),.3) rgba(var(--ax-sys-color-on-surface),.3)}\n"] }]
         }] });
 
-var uploaderList_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXUploaderListComponent: AXUploaderListComponent
-});
-
 /**
  * A container for managing the uploader dialog with collapse and expand animations.
  * @category Components
@@ -645,62 +93,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
             args: [{ selector: 'ax-uploader-drop-zone', encapsulation: ViewEncapsulation.None, imports: [AXDecoratorIconComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXUploaderDropZoneComponent }], template: "<div class=\"ax-uploader-drop-zone-container\">\n  <ax-icon class=\"ax-icon ax-icon-upload\"></ax-icon>\n  <div class=\"ax-uploader-drop-zone-description\">\n    <span>\n      {{ '@acorex:uploader.zone.drag' | translate | async }}\n      <a href=\"\" (click)=\"preventRefresh()\">\n        {{ '@acorex:uploader.zone.choose' | translate | async }}\n      </a>\n      {{ '@acorex:uploader.zone.to-upload' | translate | async }}\n    </span>\n    <!-- <p>SVG, PNG, JPG or GIF (MAX. 800x400px)</p> -->\n    @if (description()) {\n      <p>{{ description() }}</p>\n    }\n  </div>\n</div>\n", styles: ["ax-uploader-drop-zone{width:100%;height:100%;display:block;cursor:pointer}ax-uploader-drop-zone .ax-uploader-drop-zone-container{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:.5rem;margin:1rem;padding:1rem;gap:1rem;border:2px dashed;border-color:rgba(var(--ax-sys-color-border-lightest-surface));pointer-events:none}ax-uploader-drop-zone .ax-uploader-drop-zone-container:hover{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}ax-uploader-drop-zone .ax-uploader-drop-zone-container ax-icon{font-size:1.875rem;line-height:2.25rem;color:#a3a3a3;width:1.75rem;height:2rem}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description{display:flex;flex-direction:column;gap:.5rem}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description a{color:rgba(var(--ax-sys-color-primary-surface))}ax-uploader-drop-zone .ax-uploader-drop-zone-container .ax-uploader-drop-zone-description p{font-size:.875rem;line-height:1.25rem;color:#a3a3a3}\n"] }]
         }], propDecorators: { description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
 
-const COMPONENTS = [
-    AXUploaderDropZoneComponent,
-    AXUploaderListComponent,
-    AXUploaderZoneDirective,
-    AXUploaderBrowseDirective,
-    AXUploaderDialogContainerComponent,
-];
+const COMPONENTS = [AXUploaderListComponent, AXUploaderDialogContainerComponent];
 class AXUploaderModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderModule, imports: [CommonModule,
-            AXDecoratorModule,
-            AXButtonModule,
-            AXTranslationModule,
-            AXProgressBarModule,
-            AXFormatModule,
-            AXFileModule,
-            AXDateTimeModule,
-            AXCircularProgressModule,
-            AXPopupModule, AXUploaderDropZoneComponent,
-            AXUploaderListComponent,
-            AXUploaderZoneDirective,
-            AXUploaderBrowseDirective,
-            AXUploaderDialogContainerComponent], exports: [AXUploaderDropZoneComponent,
-            AXUploaderListComponent,
-            AXUploaderZoneDirective,
-            AXUploaderBrowseDirective,
-            AXUploaderDialogContainerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderModule, imports: [CommonModule,
-            AXDecoratorModule,
-            AXButtonModule,
-            AXTranslationModule,
-            AXProgressBarModule,
-            AXFormatModule,
-            AXFileModule,
-            AXDateTimeModule,
-            AXCircularProgressModule,
-            AXPopupModule, AXUploaderDropZoneComponent,
-            AXUploaderListComponent,
-            AXUploaderDialogContainerComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderModule, imports: [AXUploaderListComponent, AXUploaderDialogContainerComponent], exports: [AXUploaderListComponent, AXUploaderDialogContainerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderModule, imports: [COMPONENTS] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXUploaderModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule,
-                        AXDecoratorModule,
-                        AXButtonModule,
-                        AXTranslationModule,
-                        AXProgressBarModule,
-                        AXFormatModule,
-                        AXFileModule,
-                        AXDateTimeModule,
-                        AXCircularProgressModule,
-                        AXPopupModule,
-                        ...COMPONENTS,
-                    ],
+                    imports: [...COMPONENTS],
                     exports: [...COMPONENTS],
                     providers: [],
                 }]
@@ -710,5 +112,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXUploadRequest, AXUploaderBrowseDirective, AXUploaderDialogContainerComponent, AXUploaderDropZoneComponent, AXUploaderListComponent, AXUploaderModule, AXUploaderService, AXUploaderZoneDirective };
+export { AXUploaderDialogContainerComponent, AXUploaderDropZoneComponent, AXUploaderListComponent, AXUploaderModule };
 //# sourceMappingURL=acorex-components-uploader.mjs.map