@acorex/cdk 21.0.2-next.31 → 21.0.2-next.33

package/fesm2022/acorex-cdk-uploader.mjs

@@ -7,6 +7,27 @@ import { AXFileService } from '@acorex/core/file';
 import { sumBy } from 'lodash-es';
 import { Subject, BehaviorSubject, map } from 'rxjs';
 
+/** DOM marker so browse handles can find a zone across content projection. */
+const AX_UPLOADER_ZONE_HOST = Symbol('AX_UPLOADER_ZONE_HOST');
+function bindUploaderZoneHost(element, zone) {
+    element[AX_UPLOADER_ZONE_HOST] = zone;
+}
+function unbindUploaderZoneHost(element) {
+    delete element[AX_UPLOADER_ZONE_HOST];
+}
+/** Walk ancestors to resolve the zone (works with projected browse handles). */
+function findUploaderZoneFromDom(start) {
+    let el = start;
+    while (el) {
+        const zone = el[AX_UPLOADER_ZONE_HOST];
+        if (zone) {
+            return zone;
+        }
+        el = el.parentElement;
+    }
+    return undefined;
+}
+
 class AXUploadRequest {
     get name() {
         return this.file.name;
@@ -29,16 +50,16 @@ class AXUploadRequest {
     }
     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._progress = signal(0, ...(ngDevMode ? [{ debugName: "_progress" }] : /* istanbul ignore next */ []));
+        this.progress = computed(() => this._progress(), ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+        this._estimateTime = signal(0, ...(ngDevMode ? [{ debugName: "_estimateTime" }] : /* istanbul ignore next */ []));
+        this.estimateTime = computed(() => this._estimateTime(), ...(ngDevMode ? [{ debugName: "estimateTime" }] : /* istanbul ignore next */ []));
+        this._status = signal('new', ...(ngDevMode ? [{ debugName: "_status" }] : /* istanbul ignore next */ []));
+        this.status = computed(() => this._status(), ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+        this._message = signal(null, ...(ngDevMode ? [{ debugName: "_message" }] : /* istanbul ignore next */ []));
+        this.message = computed(() => this._message(), ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+        this._isDetermined = signal(false, ...(ngDevMode ? [{ debugName: "_isDetermined" }] : /* istanbul ignore next */ []));
+        this.isDetermined = computed(() => this._isDetermined(), ...(ngDevMode ? [{ debugName: "isDetermined" }] : /* istanbul ignore next */ []));
         this.bytesTransferred = 0;
         this.onCancel = new Subject();
         this.onStart = new Subject();
@@ -106,76 +127,169 @@ class AXUploadRequest {
 }
 
 /**
- * Service for managing file uploads with drag-and-drop support, progress tracking, and dialog management.
+ * File upload queue and validation via {@link AXFileService}.
+ * Storage is implemented by subscribing to upload/resolve/delete events.
  * @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.
-         */
+        /** Subscribe to perform uploads (e.g. HTTP, IndexedDB). */
+        this.onUpload = new Subject();
+        /** Subscribe to resolve a stored reference to a playback URL. */
+        this.onResolveUrl = new Subject();
+        /** Subscribe to delete stored media. */
+        this.onDeleteMedia = new Subject();
         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);
+    isAnyDetermined() {
+        return this._files$.value.some((file) => file.isDetermined());
+    }
+    validateFiles(files, fileType) {
+        return this.fileService.validateMany(files, fileType);
+    }
+    async getAcceptAttribute(fileType) {
+        return this.fileService.getAcceptAttribute(fileType);
+    }
+    upload(options) {
+        return new Promise((resolve, reject) => {
+            if (!this.hasUploadHandler()) {
+                reject(new Error('No upload handler subscribed to AXUploaderService.onUpload. Provide a service that handles upload events.'));
+                return;
+            }
+            this.onUpload.next({
+                component: this,
+                options,
+                resolve,
+                reject,
+                isUserInteraction: false,
+            });
+        });
+    }
+    resolveUrl(reference, signal) {
+        return new Promise((resolve, reject) => {
+            if (!this.hasResolveUrlHandler()) {
+                reject(new Error('No handler subscribed to AXUploaderService.onResolveUrl. Provide a service that handles resolve events.'));
+                return;
+            }
+            this.onResolveUrl.next({
+                component: this,
+                reference,
+                signal,
+                resolve,
+                reject,
+                isUserInteraction: false,
+            });
+        });
+    }
+    async resolvePlaybackUrl(reference, signal) {
+        const direct = reference.url?.trim();
+        if (direct && !reference.mediaId) {
+            return direct;
+        }
+        if (direct && reference.mediaId) {
+            try {
+                return await this.resolveUrl(reference, signal);
+            }
+            catch {
+                return direct;
+            }
+        }
+        if (reference.mediaId) {
+            return this.resolveUrl(reference, signal);
+        }
+        if (direct) {
+            return direct;
+        }
+        throw new Error('Upload reference has no url or mediaId');
+    }
+    deleteMedia(reference) {
+        return new Promise((resolve, reject) => {
+            if (!this.hasDeleteMediaHandler()) {
+                reject(new Error('No handler subscribed to AXUploaderService.onDeleteMedia. Provide a service that handles delete events.'));
+                return;
+            }
+            this.onDeleteMedia.next({
+                component: this,
+                reference,
+                resolve,
+                reject,
+                isUserInteraction: false,
+            });
+        });
+    }
+    hasUploadHandler() {
+        return this.onUpload.observers.length > 0;
+    }
+    hasResolveUrlHandler() {
+        return this.onResolveUrl.observers.length > 0;
+    }
+    hasDeleteMediaHandler() {
+        return this.onDeleteMedia.observers.length > 0;
+    }
+    async add(files, options) {
+        const list = Array.from(files).map((f) => new AXUploadRequest(f));
+        await this.applyFileTypeValidation(list, options?.fileType);
+        const newFiles = [...this._files$.value, ...list];
+        this._files$.next(newFiles);
+        void this.startUpload();
+        return list;
     }
     /**
-     * Starts uploading files that are in 'new' status.
-     * @private
+     * Opens the file dialog and returns selected files without enqueueing uploads.
+     * With `fileType`, applies catalog validation; otherwise uses legacy accept-only selection.
      */
+    async chooseFiles(options = {}) {
+        try {
+            if (options.fileType) {
+                const accept = options.accept ?? (await this.fileService.getAcceptAttribute(options.fileType));
+                return this.fileService.chooseValidated({
+                    fileType: options.fileType,
+                    multiple: options.multiple ?? false,
+                    accept,
+                });
+            }
+            const accepted = await this.fileService.choose({
+                accept: options.accept,
+                multiple: options.multiple ?? false,
+            });
+            return { accepted, rejected: [] };
+        }
+        catch (error) {
+            console.error('File choose failed:', error);
+            return { accepted: [], rejected: [] };
+        }
+    }
+    async browse(options = { multiple: false }) {
+        const { accepted } = await this.chooseFiles(options);
+        if (!accepted.length) {
+            return [];
+        }
+        return this.add(accepted, { fileType: options.fileType });
+    }
+    async cancelAll() {
+        await Promise.all(this._files$.value.filter((c) => c.status() !== 'completed').map((c) => c.cancel()));
+    }
+    clearAll() {
+        const remainingFiles = this._files$.value.filter((c) => c.status() === 'inprogress');
+        this._files$.next(remainingFiles);
+    }
+    remove(item) {
+        const updatedFiles = this._files$.value.filter((c) => c !== item);
+        this._files$.next(updatedFiles);
+    }
     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({
@@ -208,62 +322,22 @@ class AXUploaderService {
             });
         });
     }
-    /**
-     * 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 [];
+    async applyFileTypeValidation(requests, fileType) {
+        if (!fileType) {
+            return requests;
         }
-        catch (error) {
-            // It's good practice to log the error.
-            console.error('File browse failed:', error);
-            return [];
+        for (const request of requests) {
+            const errors = await this.fileService.validate(request.file, fileType);
+            if (errors.length > 0) {
+                request.error(errors[0]?.message ?? 'Invalid file');
+            }
         }
+        return requests;
     }
-    /**
-     * 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.3", ngImport: i0, type: AXUploaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXUploaderService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXUploaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXUploaderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXUploaderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXUploaderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -292,26 +366,31 @@ class AXUploaderZoneDirective {
          * Whether multiple files can be selected.
          * @defaultValue true
          */
-        this.multiple = input(true, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+        this.multiple = input(true, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
         /**
          * File types that are accepted for upload.
          * @defaultValue null
          */
-        this.accept = input(null, ...(ngDevMode ? [{ debugName: "accept" }] : []));
+        this.accept = input(null, ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+        /**
+         * Logical file type name from {@link AXFileService} (e.g. `conversation-image`).
+         * Required for browse handles and validated selection.
+         */
+        this.fileType = input(null, ...(ngDevMode ? [{ debugName: "fileType" }] : /* istanbul ignore next */ []));
         /**
          * Custom template for the drag overlay. If provided, this will be used instead of the default overlay.
          */
-        this.overlayTemplate = input(...(ngDevMode ? [undefined, { debugName: "overlayTemplate" }] : []));
+        this.overlayTemplate = input(...(ngDevMode ? [undefined, { debugName: "overlayTemplate" }] : /* istanbul ignore next */ []));
         /**
          * Whether browsing files by clicking on the container is disabled.
          * @defaultValue false
          */
-        this.disableBrowse = input(false, ...(ngDevMode ? [{ debugName: "disableBrowse" }] : []));
+        this.disableBrowse = input(false, ...(ngDevMode ? [{ debugName: "disableBrowse" }] : /* istanbul ignore next */ []));
         /**
          * Whether drag and drop functionality is disabled.
          * @defaultValue false
          */
-        this.disableDragDrop = input(false, ...(ngDevMode ? [{ debugName: "disableDragDrop" }] : []));
+        this.disableDragDrop = input(false, ...(ngDevMode ? [{ debugName: "disableDragDrop" }] : /* istanbul ignore next */ []));
         /**
          * Change detector reference.
          * @ignore
@@ -391,13 +470,13 @@ class AXUploaderZoneDirective {
          * Flag to track if dragOver has been emitted for the current drag session.
          * @ignore
          */
-        this.dragOverEmitted = signal(false, ...(ngDevMode ? [{ debugName: "dragOverEmitted" }] : []));
+        this.dragOverEmitted = signal(false, ...(ngDevMode ? [{ debugName: "dragOverEmitted" }] : /* istanbul ignore next */ []));
         /**
          * 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" }] : []));
+        this.dragDepth = signal(0, ...(ngDevMode ? [{ debugName: "dragDepth" }] : /* istanbul ignore next */ []));
         /**
          * Animation end handler for cleanup.
          * @ignore
@@ -405,6 +484,7 @@ class AXUploaderZoneDirective {
         this.animationEndHandler = null;
         this.element = this.elementRef.nativeElement;
         this.element.style.position = 'relative';
+        bindUploaderZoneHost(this.element, this);
         //
         this.uploadService.onFileUploadComplete.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
             this.onFileUploadComplete.emit(c);
@@ -430,6 +510,7 @@ class AXUploaderZoneDirective {
      * Cleans up event listeners when the directive is destroyed.
      */
     ngOnDestroy() {
+        unbindUploaderZoneHost(this.element);
         this.element.removeEventListener('click', this.browser.bind(this));
         this.element.removeEventListener('dragenter', this.handleDragEnter.bind(this));
         this.element.removeEventListener('drop', this.handleOnDrop.bind(this));
@@ -467,16 +548,25 @@ class AXUploaderZoneDirective {
         // 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,
-            });
+            let files = Array.from(event.dataTransfer.files);
+            let rejected;
+            const catalog = this.fileType();
+            if (catalog) {
+                const result = await this.uploadService.validateFiles(files, catalog);
+                files = result.accepted;
+                rejected = result.rejected;
+            }
+            this.fileChange.emit({ event, files, rejected });
+            if (!this.disableBrowse()) {
+                const requests = await this.uploadService.add(files, { fileType: catalog ?? undefined });
+                if (requests.length > 0) {
+                    this.onChanged.emit({
+                        component: this,
+                        requests,
+                        isUserInteraction: true,
+                    });
+                }
+            }
         }
         this.removeZone();
         this.cdr.detectChanges();
@@ -640,32 +730,60 @@ class AXUploaderZoneDirective {
      * @returns Promise that resolves when files are processed
      */
     async browser() {
-        if (this.disableBrowse())
-            return;
-        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),
+        const catalog = this.fileType();
+        let selected = [];
+        let rejected;
+        if (catalog) {
+            const accept = this.accept() ?? (await this.uploadService.getAcceptAttribute(catalog));
+            const result = await this.uploadService.chooseFiles({
+                fileType: catalog,
+                multiple: this.multiple(),
+                accept,
+            });
+            selected = result.accepted;
+            rejected = result.rejected;
+        }
+        else if (!this.disableBrowse()) {
+            const requests = await this.uploadService.browse({
+                accept: this.accept() ?? undefined,
+                multiple: this.multiple(),
             });
-            // Also emit the old onChanged event for backward compatibility
+            selected = requests.map((r) => r.file);
+        }
+        else {
+            console.warn('AXUploaderZone.browser: fileType is required when disableBrowse is enabled (use axUploaderBrowseHandle).');
+            return;
+        }
+        if (selected.length === 0 && !(rejected?.length ?? 0)) {
+            return;
+        }
+        const syntheticEvent = new Event('change');
+        const target = Object.create(EventTarget.prototype);
+        target.files = selected;
+        Object.defineProperty(syntheticEvent, 'target', { value: target, writable: false });
+        this.fileChange.emit({
+            event: syntheticEvent,
+            files: selected,
+            rejected,
+        });
+        if (this.disableBrowse()) {
+            return;
+        }
+        const requests = catalog
+            ? await this.uploadService.add(selected, { fileType: catalog })
+            : await this.uploadService.add(selected);
+        if (requests.length > 0) {
             this.onChanged.emit({
                 component: this,
-                requests: files,
+                requests,
                 isUserInteraction: true,
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXUploaderZoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", 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 }, disableBrowse: { classPropertyName: "disableBrowse", publicName: "disableBrowse", isSignal: true, isRequired: false, transformFunction: null }, disableDragDrop: { classPropertyName: "disableDragDrop", publicName: "disableDragDrop", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXUploaderZoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.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 }, fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: false, transformFunction: null }, overlayTemplate: { classPropertyName: "overlayTemplate", publicName: "overlayTemplate", isSignal: true, isRequired: false, transformFunction: null }, disableBrowse: { classPropertyName: "disableBrowse", publicName: "disableBrowse", isSignal: true, isRequired: false, transformFunction: null }, disableDragDrop: { classPropertyName: "disableDragDrop", publicName: "disableDragDrop", 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.3", ngImport: i0, type: AXUploaderZoneDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXUploaderZoneDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axUploaderZone]',
@@ -674,66 +792,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         class: 'ax-drop-zone',
                     },
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], fileType: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileType", required: false }] }], overlayTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayTemplate", required: false }] }], disableBrowse: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableBrowse", required: false }] }], disableDragDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableDragDrop", 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.
+ * Triggers the nearest {@link AXUploaderZoneDirective} file dialog on click.
+ * Resolves the zone via DI when possible, otherwise walks the DOM (supports content projection).
  * @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.elementRef = inject(ElementRef);
         this.platformID = inject(PLATFORM_ID);
+        /** When browse + zone share the same host element. */
+        this.zoneFromInjector = inject(AXUploaderZoneDirective, { optional: true, self: true });
+        this.onClick = () => {
+            void this.handleClick();
+        };
     }
-    /**
-     * 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');
-            }
+        if (!isPlatformBrowser(this.platformID)) {
+            return;
+        }
+        const element = this.elementRef.nativeElement;
+        element.addEventListener('click', this.onClick);
+        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));
+        if (isPlatformBrowser(this.platformID)) {
+            this.elementRef.nativeElement.removeEventListener('click', this.onClick);
         }
     }
-    /**
-     * Handles the click event to trigger file browser.
-     * @private
-     */
+    resolveZone() {
+        return (this.zoneFromInjector ??
+            findUploaderZoneFromDom(this.elementRef.nativeElement) ??
+            undefined);
+    }
     async handleClick() {
-        await this.uploaderZone.browser();
+        const zone = this.resolveZone();
+        if (!zone) {
+            console.warn('[axUploaderBrowseHandle] No axUploaderZone found. Place axUploaderBrowseHandle inside an axUploaderZone.');
+            return;
+        }
+        await zone.browser();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXUploaderBrowseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: AXUploaderBrowseDirective, isStandalone: true, selector: "[axUploaderBrowseHandle]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXUploaderBrowseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: AXUploaderBrowseDirective, isStandalone: true, selector: "[axUploaderBrowseHandle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXUploaderBrowseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXUploaderBrowseDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axUploaderBrowseHandle]' }]
         }] });