@acorex/cdk 21.0.0-next.2 → 21.0.0-next.20

package/fesm2022/acorex-cdk-uploader.mjs

@@ -0,0 +1,723 @@
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { signal, computed, inject, Injectable, ElementRef, ViewContainerRef, input, ChangeDetectorRef, DOCUMENT, PLATFORM_ID, output, Directive } from '@angular/core';
+import { AXTranslationService } from '@acorex/core/translation';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import { AXFileService } from '@acorex/core/file';
+import { sumBy } from 'lodash-es';
+import { Subject, BehaviorSubject, map } from 'rxjs';
+
+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() {
+        /**
+         * 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))));
+    }
+    /**
+     * 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);
+        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);
+        /**
+         * View container reference for rendering custom templates.
+         * @ignore
+         */
+        this.viewContainerRef = inject(ViewContainerRef);
+        /**
+         * Whether multiple files can be selected.
+         * @defaultValue true
+         */
+        this.multiple = input(true, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+        /**
+         * File types that are accepted for upload.
+         * @defaultValue null
+         */
+        this.accept = input(null, ...(ngDevMode ? [{ debugName: "accept" }] : []));
+        /**
+         * Custom template for the drag overlay. If provided, this will be used instead of the default overlay.
+         */
+        this.overlayTemplate = input(...(ngDevMode ? [undefined, { debugName: "overlayTemplate" }] : []));
+        /**
+         * 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);
+        /**
+         * Embedded view reference for custom template.
+         * @ignore
+         */
+        this.templateViewRef = null;
+        /**
+         * Emitted when files are selected or dropped (like HTML file input).
+         * Emits an event with files property containing the selected files.
+         */
+        this.fileChange = output();
+        /**
+         * Emitted when files are changed (added, removed, etc.).
+         * @deprecated Use fileChange instead for simpler file input-like behavior
+         */
+        this.onChanged = output();
+        /**
+         * Emitted on drag enter event.
+         */
+        this.dragEnter = output();
+        /**
+         * Emitted on drag leave event.
+         */
+        this.dragLeave = output();
+        /**
+         * Emitted on drag over event.
+         */
+        this.dragOver = output();
+        /**
+         * Emitted when a single file upload is completed.
+         */
+        this.onFileUploadComplete = output();
+        /**
+         * Emitted when all files upload is completed.
+         */
+        this.onFilesUploadComplete = output();
+        /**
+         * CSS class for the overlay state.
+         * @ignore
+         */
+        this.stateClass = 'ax-uploader-overlay-state';
+        /**
+         * The overlay element for drag and drop visual feedback.
+         * @ignore
+         */
+        this.overlayElement = null;
+        /**
+         * Flag to track if dragOver has been emitted for the current drag session.
+         * @ignore
+         */
+        this.dragOverEmitted = signal(false, ...(ngDevMode ? [{ debugName: "dragOverEmitted" }] : []));
+        /**
+         * Counter to track drag enter/leave depth to prevent false dragleave events.
+         * When moving from parent to child, dragleave fires even though we're still inside.
+         * @ignore
+         */
+        this.dragDepth = signal(0, ...(ngDevMode ? [{ debugName: "dragDepth" }] : []));
+        /**
+         * Animation end handler for cleanup.
+         * @ignore
+         */
+        this.animationEndHandler = null;
+        this.element = this.elementRef.nativeElement;
+        this.element.style.position = 'relative';
+        //
+        this.uploadService.onFileUploadComplete.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
+            this.onFileUploadComplete.emit(c);
+        });
+        this.uploadService.onFilesUploadComplete.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
+            this.onFilesUploadComplete.emit(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', (e) => this.removeZone(e), 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.dragOverEmitted.set(false); // Reset flag when entering
+        this.dragDepth.update((depth) => depth + 1); // Increment depth counter
+        // Only create overlay on first enter (when depth is 1)
+        if (this.dragDepth() === 1) {
+            // Cancel any pending exit animation
+            this.cancelExitAnimation();
+            await this.createZone();
+            this.dragEnter.emit(event);
+        }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    }
+    /**
+     * Handles drop events to process dropped files.
+     * @private
+     */
+    async handleOnDrop(event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        // Reset drag depth on drop
+        this.dragDepth.set(0);
+        if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
+            const files = Array.from(event.dataTransfer.files);
+            // Emit simple file change event (like HTML input)
+            this.fileChange.emit({ event, files });
+            // Also emit the old onChanged event for backward compatibility
+            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) {
+        // Only emit dragOver once per drag session to avoid spam
+        if (!this.dragOverEmitted()) {
+            this.dragOverEmitted.set(true);
+            this.dragOver.emit(event);
+        }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    }
+    /**
+     * Creates the visual overlay for drag and drop feedback.
+     * @private
+     */
+    async createZone() {
+        if (isPlatformBrowser(this.platformID)) {
+            // Check if overlay already exists (might be exiting)
+            let existingOverlay = this.document.getElementById('ax-uploader-overlay-state') || this.overlayElement;
+            // Verify the overlay is actually in the DOM (not removed after animation)
+            if (existingOverlay && existingOverlay.parentNode === this.element) {
+                // Remove exiting class to cancel exit animation and show overlay again
+                existingOverlay.classList.remove('ax-uploader-overlay-exiting');
+                // Clean up any pending animation handler
+                if (this.animationEndHandler) {
+                    existingOverlay.removeEventListener('animationend', this.animationEndHandler);
+                    this.animationEndHandler = null;
+                }
+                // Reset overlayElement reference if it was cleared
+                if (!this.overlayElement && existingOverlay) {
+                    this.overlayElement = existingOverlay;
+                }
+                return;
+            }
+            else if (existingOverlay && existingOverlay.parentNode !== this.element) {
+                // Overlay exists but is not in the DOM, clear the reference
+                this.overlayElement = null;
+                existingOverlay = null;
+            }
+            // Check if custom template is provided
+            const template = this.overlayTemplate();
+            if (template) {
+                // Create container for template
+                this.overlayElement = this.document.createElement('div');
+                this.overlayElement.classList.add('ax-uploader-overlay-state', '-ax-z-1');
+                this.overlayElement.id = 'ax-uploader-overlay-state';
+                // Create embedded view from template (will be inserted at directive anchor)
+                this.viewContainerRef.clear();
+                this.templateViewRef = this.viewContainerRef.createEmbeddedView(template);
+                this.templateViewRef.detectChanges();
+                // Get root nodes and move them to overlay element
+                const rootNodes = this.templateViewRef.rootNodes;
+                for (const node of rootNodes) {
+                    // Remove from current location if it has a parent
+                    if (node.parentNode) {
+                        node.parentNode.removeChild(node);
+                    }
+                    this.overlayElement.appendChild(node);
+                }
+                // Detach the view since we've moved the nodes
+                this.templateViewRef.detach();
+                this.element.appendChild(this.overlayElement);
+                this.cdr.detectChanges();
+                return;
+            }
+            // Use default overlay
+            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);
+        }
+    }
+    /**
+     * Cancels any pending exit animation and cleans up handlers.
+     * @private
+     */
+    cancelExitAnimation() {
+        if (isPlatformBrowser(this.platformID)) {
+            const overlay = this.document.getElementById('ax-uploader-overlay-state') || this.overlayElement;
+            if (overlay && this.animationEndHandler) {
+                // Remove exiting class to cancel animation
+                overlay.classList.remove('ax-uploader-overlay-exiting');
+                // Clean up the handler
+                overlay.removeEventListener('animationend', this.animationEndHandler);
+                this.animationEndHandler = null;
+            }
+        }
+    }
+    /**
+     * Removes the visual overlay for drag and drop feedback.
+     * @private
+     */
+    removeZone(event) {
+        this.dragDepth.update((depth) => Math.max(0, depth - 1)); // Decrement depth counter, ensure non-negative
+        // Only remove overlay when we've truly left the drop zone (depth reaches 0)
+        if (this.dragDepth() <= 0) {
+            this.dragDepth.set(0); // Ensure it's exactly 0
+            this.dragOverEmitted.set(false); // Reset flag when leaving
+            if (event) {
+                this.dragLeave.emit(event);
+            }
+            if (isPlatformBrowser(this.platformID)) {
+                const overlay = this.document.getElementById('ax-uploader-overlay-state') || this.overlayElement;
+                if (overlay) {
+                    // Clean up any existing handler first
+                    if (this.animationEndHandler) {
+                        overlay.removeEventListener('animationend', this.animationEndHandler);
+                    }
+                    // Add exiting class to trigger CSS animation
+                    overlay.classList.add('ax-uploader-overlay-exiting');
+                    // Wait for CSS animation to complete
+                    this.animationEndHandler = (e) => {
+                        if (e.target === overlay && e.animationName === 'fadeOutScale') {
+                            overlay.removeEventListener('animationend', this.animationEndHandler);
+                            this.animationEndHandler = null;
+                            if (overlay.parentNode === this.element) {
+                                this.element.removeChild(overlay);
+                            }
+                            if (this.overlayElement && this.overlayElement.parentNode) {
+                                this.overlayElement.remove();
+                            }
+                            // Clear the overlay element reference
+                            this.overlayElement = null;
+                            // Remove custom template view if it exists
+                            if (this.templateViewRef) {
+                                this.viewContainerRef.clear();
+                                this.templateViewRef = null;
+                            }
+                        }
+                    };
+                    overlay.addEventListener('animationend', this.animationEndHandler);
+                }
+                else {
+                    // If overlay doesn't exist, just clean up template view
+                    if (this.templateViewRef) {
+                        this.viewContainerRef.clear();
+                        this.templateViewRef = null;
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Opens the file browser dialog and processes selected files.
+     * @returns Promise that resolves when files are processed
+     */
+    async browser() {
+        const files = await this.uploadService.browse({ accept: this.accept() ?? undefined, multiple: this.multiple() });
+        if (files.length > 0) {
+            // Create a synthetic event for consistency
+            const syntheticEvent = new Event('change');
+            const target = Object.create(EventTarget.prototype);
+            target.files = files.map((r) => r.file);
+            Object.defineProperty(syntheticEvent, 'target', { value: target, writable: false });
+            // Emit simple file change event (like HTML input)
+            this.fileChange.emit({
+                event: syntheticEvent,
+                files: files.map((r) => r.file),
+            });
+            // Also emit the old onChanged event for backward compatibility
+            this.onChanged.emit({
+                component: this,
+                requests: files,
+                isUserInteraction: true,
+            });
+        }
+    }
+    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: "17.1.0", version: "20.3.9", type: AXUploaderZoneDirective, isStandalone: true, selector: "[axUploaderZone]", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, overlayTemplate: { classPropertyName: "overlayTemplate", publicName: "overlayTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChange: "fileChange", onChanged: "onChanged", dragEnter: "dragEnter", dragLeave: "dragLeave", dragOver: "dragOver", onFileUploadComplete: "onFileUploadComplete", onFilesUploadComplete: "onFilesUploadComplete" }, host: { classAttribute: "ax-drop-zone" }, 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],
+                    host: {
+                        class: 'ax-drop-zone',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], overlayTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayTemplate", required: false }] }], fileChange: [{ type: i0.Output, args: ["fileChange"] }], onChanged: [{ type: i0.Output, args: ["onChanged"] }], dragEnter: [{ type: i0.Output, args: ["dragEnter"] }], dragLeave: [{ type: i0.Output, args: ["dragLeave"] }], dragOver: [{ type: i0.Output, args: ["dragOver"] }], onFileUploadComplete: [{ type: i0.Output, args: ["onFileUploadComplete"] }], onFilesUploadComplete: [{ type: i0.Output, args: ["onFilesUploadComplete"] }] } });
+
+/**
+ * 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.elementRef = inject((ElementRef));
+        /**
+         * Platform ID for browser detection.
+         * @ignore
+         */
+        this.platformID = inject(PLATFORM_ID);
+    }
+    /**
+     * Initializes the directive by adding click event listener and data attribute.
+     */
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformID) && this.elementRef?.nativeElement) {
+            const element = this.elementRef.nativeElement;
+            element.addEventListener('click', this.handleClick.bind(this));
+            // Use setAttribute for SSR compatibility
+            if (element.dataset) {
+                element.dataset['axUploaderBrowseHandle'] = 'true';
+            }
+            else {
+                element.setAttribute('data-ax-uploader-browse-handle', 'true');
+            }
+        }
+    }
+    /**
+     * Cleans up the directive by removing event listeners.
+     */
+    ngOnDestroy() {
+        if (isPlatformBrowser(this.platformID) && this.elementRef.nativeElement) {
+            this.elementRef.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]' }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXUploadRequest, AXUploaderBrowseDirective, AXUploaderService, AXUploaderZoneDirective };
+//# sourceMappingURL=acorex-cdk-uploader.mjs.map