@acorex/components 20.9.0 → 20.9.2

package/fesm2022/acorex-components-conversation-file-picker.component-cmUkgSF3.mjs

@@ -1,468 +0,0 @@
-import { AXUploaderService } from '@acorex/cdk/uploader';
-import * as i1 from '@acorex/components/progress-bar';
-import { AXProgressBarModule } from '@acorex/components/progress-bar';
-import { AXToastService } from '@acorex/components/toast';
-import { AXFileService, AXFileTypeRegistryService, runFileTypeUtilityForFile, runFileTypeUtility } from '@acorex/core/file';
-import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
-import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, input, computed, signal, Component } from '@angular/core';
-import { o as AXConversationComposerService, q as AX_CONVERSATION_FILE_CATALOG } from './acorex-components-conversation-acorex-components-conversation-CjVDCoJw.mjs';
-import { A as AXConversationPickerHeaderComponent, a as AXConversationPickerFooterComponent } from './acorex-components-conversation-picker-header.component-BhTzlufI.mjs';
-import { A as AXConversationPickerEmptyComponent, a as AXConversationPickerToolbarComponent, b as AXConversationPickerCaptionComponent, c as AXConversationPickerShellComponent } from './acorex-components-conversation-picker-toolbar.component-CpyS0j6P.mjs';
-import { s as seedPickerInitialFiles, l as limitFilesToCapacity, a as notifyMaxFilesCapacityExceeded, n as notifyPickerValidationErrors, i as isUploadAborted, c as cleanupPickerUploads, p as pickerItemToUploadResult, d as dismissComposerPickerHost, u as uploadPickerFile, g as getPickerCancelUploadLabel } from './acorex-components-conversation-picker-upload-C-PlKPaU.mjs';
-import { fileItemFromUpload } from './acorex-components-conversation-file-composer.payload-azPSH99m.mjs';
-import { AX_CONVERSATION_FILE_PRESENTATION, createConversationFileFileType } from './acorex-components-conversation-conversation-file.file-type-DQUy3C64.mjs';
-
-/**
- * File Picker Component
- * General-purpose file attachment interface for the composer
- */
-class AXConversationFilePickerComponent {
-    get composerService() {
-        const svc = this.service() ?? this.composerServiceFromInjector;
-        if (!svc) {
-            throw new Error('AXConversationComposerService is required for the file picker');
-        }
-        return svc;
-    }
-    constructor() {
-        this.uploadsDismissed = false;
-        this.retainUploadedOnDismiss = false;
-        this.uploader = inject(AXUploaderService);
-        this.fileService = inject(AXFileService);
-        this.fileTypeRegistry = inject(AXFileTypeRegistryService);
-        this.platformId = inject(PLATFORM_ID);
-        this.service = input(...(ngDevMode ? [undefined, { debugName: "service" }] : []));
-        this.composerServiceFromInjector = inject(AXConversationComposerService, { optional: true });
-        this.toast = inject(AXToastService);
-        this.translation = inject(AXTranslationService);
-        this.conversation = input.required(...(ngDevMode ? [{ debugName: "conversation" }] : []));
-        this.maxFiles = input(10, ...(ngDevMode ? [{ debugName: "maxFiles" }] : []));
-        this.initialFiles = input([], ...(ngDevMode ? [{ debugName: "initialFiles" }] : []));
-        this.__popup__ = input(...(ngDevMode ? [undefined, { debugName: "__popup__" }] : []));
-        this.catalogFileType = AX_CONVERSATION_FILE_CATALOG;
-        this.allowMultiple = computed(() => this.maxFiles() > 1, ...(ngDevMode ? [{ debugName: "allowMultiple" }] : []));
-        this.files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : []));
-        this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
-        this.isUploading = signal(false, ...(ngDevMode ? [{ debugName: "isUploading" }] : []));
-        this.emptyIconClass = computed(() => this.isDragging() ? 'fa-light fa-cloud-arrow-up' : AX_CONVERSATION_FILE_PRESENTATION.icon, ...(ngDevMode ? [{ debugName: "emptyIconClass" }] : []));
-        this.caption = '';
-        this.fileTypeRegistry.registerTypes([createConversationFileFileType()]);
-        seedPickerInitialFiles(this.initialFiles, (files) => this.handleFiles(files));
-    }
-    createUtilityContext() {
-        return {
-            readAsDataUrl: (file) => this.fileService.blobToBase64(file),
-            platformId: this.platformId,
-        };
-    }
-    async getCatalogFileTypeDef() {
-        this.catalogFileTypeDef ??= await this.fileService.getFileType(this.catalogFileType);
-        return this.catalogFileTypeDef;
-    }
-    pickerKind(catalogName) {
-        if (catalogName === 'conversation-image')
-            return 'image';
-        if (catalogName === 'conversation-video')
-            return 'video';
-        if (catalogName === 'conversation-audio')
-            return 'audio';
-        return 'file';
-    }
-    async handleFiles(fileList) {
-        const max = this.maxFiles();
-        const capacity = limitFilesToCapacity(fileList, this.files().length, max);
-        if (capacity.length < fileList.length) {
-            notifyMaxFilesCapacityExceeded(this.toast, this.translation, max);
-        }
-        if (capacity.length === 0) {
-            return;
-        }
-        const { accepted, rejected } = await this.uploader.validateFiles(capacity, this.catalogFileType);
-        notifyPickerValidationErrors(this.toast, this.translation, rejected);
-        const fileType = await this.getCatalogFileTypeDef();
-        const ctx = this.createUtilityContext();
-        for (const file of accepted) {
-            try {
-                const previewResult = fileType
-                    ? await runFileTypeUtilityForFile(fileType, ctx, file, 'preview')
-                    : undefined;
-                const rowCatalogResult = fileType
-                    ? await runFileTypeUtilityForFile(fileType, ctx, file, 'pickerCatalog')
-                    : undefined;
-                const preview = typeof previewResult === 'string' ? previewResult : undefined;
-                const rowCatalog = typeof rowCatalogResult === 'string' ? rowCatalogResult : this.catalogFileType;
-                const rowType = await this.fileService.getFileType(rowCatalog);
-                const icon = rowType?.icon ?? fileType?.icon ?? 'fa-light fa-file';
-                const pickerKind = this.pickerKind(rowCatalog);
-                let fileIndex = -1;
-                this.files.update((files) => {
-                    fileIndex = files.length;
-                    return [...files, { file, preview, icon, type: pickerKind, uploadProgress: 0, uploading: true }];
-                });
-                if (fileIndex >= 0) {
-                    void this.uploadFile(fileIndex, file);
-                }
-            }
-            catch (error) {
-                console.error('Failed to process file:', error);
-            }
-        }
-    }
-    async uploadFile(index, file) {
-        const abortController = new AbortController();
-        this.files.update((files) => {
-            const updated = [...files];
-            updated[index] = { ...updated[index], abortController };
-            return updated;
-        });
-        try {
-            const result = await this.uploadFileWithProgress(file, (progress) => {
-                this.updateFileProgress(index, progress, true);
-            }, abortController.signal);
-            this.updateFileProgress(index, 100, false, true, result.url, result.mediaId);
-        }
-        catch (error) {
-            if (this.uploadsDismissed || isUploadAborted(error, abortController.signal)) {
-                return;
-            }
-            console.error('Failed to upload file:', error);
-            this.updateFileProgress(index, 0, false, false, undefined, undefined, this.translation.translateSync('@acorex:chat.errors.upload-failed'));
-        }
-    }
-    removeFile(index) {
-        const item = this.files()[index];
-        if (item) {
-            cleanupPickerUploads(this.uploader, [item]);
-        }
-        this.files.update((files) => files.filter((_, i) => i !== index));
-    }
-    async sendFiles() {
-        const fileList = this.files();
-        if (fileList.length === 0)
-            return;
-        // Check if all files are uploaded
-        const allUploaded = fileList.every((f) => f.uploaded && !f.error);
-        if (!allUploaded) {
-            console.warn('Some files are still uploading or failed');
-            return;
-        }
-        const files = fileList.flatMap((f) => {
-            const result = pickerItemToUploadResult(f);
-            return result ? [fileItemFromUpload(f.file, result)] : [];
-        });
-        if (files.length === 0) {
-            return;
-        }
-        const command = {
-            conversationId: this.conversation().id,
-            type: 'file',
-            payload: {
-                type: 'file',
-                files,
-                caption: this.caption.trim() || undefined,
-            },
-        };
-        this.retainUploadedOnDismiss = true;
-        const popup = this.__popup__();
-        this.dismissPicker();
-        dismissComposerPickerHost(this.composerService, popup);
-        void this.composerService.sendMessage(command).catch(() => {
-            this.retainUploadedOnDismiss = false;
-        });
-    }
-    updateFileProgress(index, progress, uploading, uploaded = false, uploadedUrl, mediaId, error) {
-        if (this.uploadsDismissed) {
-            return;
-        }
-        this.files.update((files) => {
-            const updated = [...files];
-            updated[index] = {
-                ...updated[index],
-                uploadProgress: progress,
-                uploading,
-                uploaded,
-                uploadedUrl,
-                mediaId,
-                error,
-            };
-            return updated;
-        });
-    }
-    async uploadFileWithProgress(file, onProgress, signal) {
-        return uploadPickerFile(this.uploader, this.conversation().id, file, onProgress, signal);
-    }
-    cancel() {
-        this.dismissPicker();
-        dismissComposerPickerHost(this.composerService, this.__popup__());
-    }
-    ngOnDestroy() {
-        this.dismissPicker();
-    }
-    dismissPicker() {
-        if (this.uploadsDismissed) {
-            return;
-        }
-        this.uploadsDismissed = true;
-        const snapshot = [...this.files()];
-        cleanupPickerUploads(this.uploader, snapshot, {
-            retainUploaded: this.retainUploadedOnDismiss,
-        });
-        this.retainUploadedOnDismiss = false;
-        this.files.set([]);
-        this.caption = '';
-    }
-    getCancelUploadLabel() {
-        return getPickerCancelUploadLabel(this.translation);
-    }
-    formatFileSize(bytes) {
-        const fileType = this.catalogFileTypeDef;
-        const result = fileType
-            ? runFileTypeUtility(fileType, this.createUtilityContext(), undefined, 'formatSize', bytes)
-            : undefined;
-        return typeof result === 'string' ? result : `${bytes} B`;
-    }
-    canSend() {
-        const fileList = this.files();
-        if (fileList.length === 0)
-            return false;
-        // Can send if all files are uploaded and no errors
-        return fileList.every((f) => f.uploaded && !f.error && !f.uploading);
-    }
-    getSendButtonText() {
-        const fileList = this.files();
-        const uploadingCount = fileList.filter((f) => f.uploading).length;
-        const uploadedCount = fileList.filter((f) => f.uploaded).length;
-        if (uploadingCount > 0) {
-            return this.translation.translateSync('@acorex:chat.pickers.files.uploading-count', {
-                params: { count: uploadingCount },
-            });
-        }
-        if (uploadedCount === fileList.length) {
-            return this.translation.translateSync('@acorex:chat.pickers.files.send-count', {
-                params: { count: fileList.length },
-            });
-        }
-        return this.translation.translateSync('@acorex:chat.pickers.files.ready-count', {
-            params: { ready: uploadedCount, total: fileList.length },
-        });
-    }
-    getEmptyTitle() {
-        return this.isDragging()
-            ? this.translation.translateSync('@acorex:chat.pickers.files.drop-here')
-            : this.translation.translateSync('@acorex:chat.pickers.files.select');
-    }
-    getEmptySubtitle() {
-        return this.isDragging()
-            ? this.translation.translateSync('@acorex:chat.pickers.common.release-to-upload')
-            : this.translation.translateSync('@acorex:chat.pickers.common.click-to-browse');
-    }
-    getSelectedCountText() {
-        return this.translation.translateSync('@acorex:chat.pickers.files.selected-count', {
-            params: { count: this.files().length },
-        });
-    }
-    getUploadingLabel(progress) {
-        return this.translation.translateSync('@acorex:chat.pickers.files.uploading-progress', {
-            params: { progress },
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXConversationFilePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXConversationFilePickerComponent, isStandalone: true, selector: "ax-conversation-file-picker", inputs: { service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: true, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, initialFiles: { classPropertyName: "initialFiles", publicName: "initialFiles", isSignal: true, isRequired: false, transformFunction: null }, __popup__: { classPropertyName: "__popup__", publicName: "__popup__", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <ax-conversation-picker-shell
-      [fileType]="catalogFileType"
-      [multiple]="allowMultiple()"
-      (filesSelected)="handleFiles($event)"
-      (dragEnter)="isDragging.set(true)"
-      (dragLeave)="isDragging.set(false)"
-    >
-      <ax-conversation-picker-header [title]="translation.translateSync('@acorex:chat.pickers.files.title')" (onClose)="cancel()" />
-
-      <div class="ax-conversation-picker__scroll">
-        @if (files().length === 0) {
-          <ax-conversation-picker-empty
-            [title]="getEmptyTitle()"
-            [hint]="getEmptySubtitle()"
-            [iconClass]="emptyIconClass()"
-            [dragOver]="isDragging()"
-          />
-        } @else {
-          <div class="ax-conversation-picker__body">
-            <ax-conversation-picker-toolbar
-              [countLabel]="getSelectedCountText()"
-              [addMoreLabel]="translation.translateSync('@acorex:chat.pickers.common.add-more')"
-            />
-
-            <div class="ax-conversation-picker__list">
-              @for (file of files(); track $index) {
-                <div class="ax-conversation-picker__row">
-                  <div class="ax-conversation-picker__thumb">
-                    @if (file.type === 'image' && file.preview) {
-                      <img [src]="file.preview" [alt]="file.file.name" />
-                    } @else {
-                      <i [class]="file.icon"></i>
-                    }
-                  </div>
-                  <div class="ax-conversation-picker__details">
-                    <div class="ax-conversation-picker__name">{{ file.file.name }}</div>
-                    <div class="ax-conversation-picker__status">
-                      @if (file.uploading) {
-                        <span>{{ getUploadingLabel(file.uploadProgress ?? 0) }}</span>
-                      } @else if (file.uploaded) {
-                        <span class="ax-conversation-picker__status--ok"
-                          ><i class="fa-light fa-check"></i>
-                          {{ translation.translateSync('@acorex:chat.pickers.files.uploaded') }}</span
-                        >
-                      } @else if (file.error) {
-                        <span class="ax-conversation-picker__status--err"
-                          ><i class="fa-light fa-xmark"></i> {{ file.error }}</span
-                        >
-                      } @else {
-                        <span>{{ formatFileSize(file.file.size) }}</span>
-                      }
-                    </div>
-                    @if (file.uploading || file.uploaded) {
-                      <div class="ax-conversation-picker__progress">
-                        <ax-progress-bar [progress]="file.uploadProgress || 0" [mode]="'determinate'" [height]="3" />
-                      </div>
-                    }
-                  </div>
-                  <button
-                    type="button"
-                    class="ax-conversation-picker__remove"
-                    (click)="removeFile($index)"
-                    [attr.aria-label]="
-                      file.uploading
-                        ? getCancelUploadLabel()
-                        : translation.translateSync('@acorex:chat.pickers.common.remove')
-                    "
-                  >
-                    <i class="fa-light fa-xmark"></i>
-                  </button>
-                </div>
-              }
-            </div>
-          </div>
-        }
-      </div>
-
-      <ax-conversation-picker-caption [(caption)]="caption" />
-
-      @if (files().length > 0) {
-        <ax-conversation-picker-footer
-          [sendText]="getSendButtonText()"
-          [sendDisabled]="!canSend()"
-          (onCancel)="cancel()"
-          (onSend)="sendFiles()"
-        />
-      }
-    </ax-conversation-picker-shell>
-  `, isInline: true, styles: [":host{display:block;width:100%;max-width:100%;min-height:0}.ax-conversation-picker__scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.ax-conversation-picker__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;min-height:8.5rem;margin:.75rem;padding:1rem .75rem;border:1px dashed rgb(var(--ax-sys-color-border-surface));border-radius:var(--ax-sys-border-radius, .5rem);cursor:pointer;transition:border-color .15s ease,background-color .15s ease;text-align:center;touch-action:manipulation}.ax-conversation-picker__empty:hover,.ax-conversation-picker__empty--drag{border-color:rgb(var(--ax-sys-color-primary-500));background:rgba(var(--ax-sys-color-primary-500),.06)}.ax-conversation-picker__empty-icon{font-size:1.75rem;line-height:1;color:rgba(var(--ax-sys-color-on-surface),.55)}.ax-conversation-picker__empty-title{margin:0;font-size:.8125rem;font-weight:600;color:rgb(var(--ax-sys-color-on-surface))}.ax-conversation-picker__empty-hint{margin:0;font-size:.75rem;color:rgba(var(--ax-sys-color-on-surface),.6)}.ax-conversation-picker__body{padding:0 .75rem .75rem}.ax-conversation-picker__list{display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem}.ax-conversation-picker__row{display:flex;align-items:center;gap:.625rem;padding:.5rem .625rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:var(--ax-sys-border-radius, .375rem);background:rgb(var(--ax-sys-color-surface));transition:background-color .15s ease}@media (hover: hover){.ax-conversation-picker__row:hover{background:rgb(var(--ax-sys-color-light-surface))}}.ax-conversation-picker__thumb{position:relative;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex-shrink:0;border-radius:var(--ax-sys-border-radius, .375rem);background:rgba(var(--ax-sys-color-primary-500),.08);color:rgb(var(--ax-sys-color-primary-500));font-size:1.125rem;overflow:hidden}.ax-conversation-picker__thumb img,.ax-conversation-picker__thumb video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.ax-conversation-picker__thumb-badge{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000052;color:rgb(var(--ax-sys-color-light));font-size:.625rem;pointer-events:none}.ax-conversation-picker__details{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.ax-conversation-picker__name{font-size:.8125rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-conversation-picker__status{display:flex;flex-wrap:wrap;gap:.375rem;font-size:.6875rem;color:rgba(var(--ax-sys-color-on-surface),.65)}.ax-conversation-picker__status--ok{color:rgb(var(--ax-sys-color-success-600));font-weight:500}.ax-conversation-picker__status--err{color:rgb(var(--ax-sys-color-danger-600));font-weight:500}.ax-conversation-picker__progress{width:100%;margin-top:.125rem}.ax-conversation-picker__remove{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;flex-shrink:0;border:none;border-radius:var(--ax-sys-border-radius, .25rem);background:transparent;color:rgba(var(--ax-sys-color-on-surface),.55);font-size:1rem;cursor:pointer;touch-action:manipulation;transition:background-color .15s ease,color .15s ease}.ax-conversation-picker__remove:hover,.ax-conversation-picker__remove:focus-visible{background:rgba(var(--ax-sys-color-danger-500),.1);color:rgb(var(--ax-sys-color-danger-500));outline:none}.ax-conversation-picker__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.25rem,1fr));gap:.5rem}.ax-conversation-picker__tile{position:relative;aspect-ratio:1;border-radius:var(--ax-sys-border-radius, .375rem);overflow:hidden;border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-light-surface))}.ax-conversation-picker__tile img{width:100%;height:100%;object-fit:cover;display:block}.ax-conversation-picker__tile-remove{position:absolute;top:.25rem;inset-inline-end:.25rem;z-index:2;display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;border-radius:50%;background:rgb(var(--ax-sys-color-danger-500));color:rgb(var(--ax-sys-color-light));font-size:.6875rem;cursor:pointer;touch-action:manipulation;box-shadow:0 1px 3px #0003}.ax-conversation-picker__tile-overlay{position:absolute;inset-inline:0;bottom:0;padding:.25rem;background:linear-gradient(transparent,#0000008c)}.ax-conversation-picker__tile-status{font-size:.625rem;color:rgb(var(--ax-sys-color-light));line-height:1.2}.ax-conversation-picker__caption-slot{flex-shrink:0;padding:.5rem .75rem;border-top:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-lightest-surface))}.ax-conversation-picker__input-hidden{display:none}@container picker (max-width: 480px){.ax-conversation-picker__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.375rem}.ax-conversation-picker__row{padding:.4375rem .5rem;gap:.5rem}.ax-conversation-picker__thumb{width:2.25rem;height:2.25rem}.ax-conversation-picker__empty{min-height:7.5rem;margin:.5rem}.ax-conversation-picker__body{padding-inline:.5rem;padding-bottom:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXProgressBarModule }, { kind: "component", type: i1.AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXConversationPickerHeaderComponent, selector: "ax-conversation-picker-header", inputs: ["title"], outputs: ["onClose"] }, { kind: "component", type: AXConversationPickerFooterComponent, selector: "ax-conversation-picker-footer", inputs: ["sendText", "sendDisabled"], outputs: ["onCancel", "onSend"] }, { kind: "component", type: AXConversationPickerEmptyComponent, selector: "ax-conversation-picker-empty", inputs: ["title", "hint", "iconClass", "dragOver"] }, { kind: "component", type: AXConversationPickerToolbarComponent, selector: "ax-conversation-picker-toolbar", inputs: ["countLabel", "addMoreLabel"] }, { kind: "component", type: AXConversationPickerCaptionComponent, selector: "ax-conversation-picker-caption", inputs: ["caption"], outputs: ["captionChange"] }, { kind: "component", type: AXConversationPickerShellComponent, selector: "ax-conversation-picker-shell", inputs: ["fileType", "multiple"], outputs: ["filesSelected", "dragEnter", "dragLeave", "dragOver"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXConversationFilePickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-conversation-file-picker', imports: [
-                        CommonModule,
-                        AXProgressBarModule,
-                        AXTranslationModule,
-                        AXConversationPickerHeaderComponent,
-                        AXConversationPickerFooterComponent,
-                        AXConversationPickerEmptyComponent,
-                        AXConversationPickerToolbarComponent,
-                        AXConversationPickerCaptionComponent,
-                        AXConversationPickerShellComponent,
-                    ], template: `
-    <ax-conversation-picker-shell
-      [fileType]="catalogFileType"
-      [multiple]="allowMultiple()"
-      (filesSelected)="handleFiles($event)"
-      (dragEnter)="isDragging.set(true)"
-      (dragLeave)="isDragging.set(false)"
-    >
-      <ax-conversation-picker-header [title]="translation.translateSync('@acorex:chat.pickers.files.title')" (onClose)="cancel()" />
-
-      <div class="ax-conversation-picker__scroll">
-        @if (files().length === 0) {
-          <ax-conversation-picker-empty
-            [title]="getEmptyTitle()"
-            [hint]="getEmptySubtitle()"
-            [iconClass]="emptyIconClass()"
-            [dragOver]="isDragging()"
-          />
-        } @else {
-          <div class="ax-conversation-picker__body">
-            <ax-conversation-picker-toolbar
-              [countLabel]="getSelectedCountText()"
-              [addMoreLabel]="translation.translateSync('@acorex:chat.pickers.common.add-more')"
-            />
-
-            <div class="ax-conversation-picker__list">
-              @for (file of files(); track $index) {
-                <div class="ax-conversation-picker__row">
-                  <div class="ax-conversation-picker__thumb">
-                    @if (file.type === 'image' && file.preview) {
-                      <img [src]="file.preview" [alt]="file.file.name" />
-                    } @else {
-                      <i [class]="file.icon"></i>
-                    }
-                  </div>
-                  <div class="ax-conversation-picker__details">
-                    <div class="ax-conversation-picker__name">{{ file.file.name }}</div>
-                    <div class="ax-conversation-picker__status">
-                      @if (file.uploading) {
-                        <span>{{ getUploadingLabel(file.uploadProgress ?? 0) }}</span>
-                      } @else if (file.uploaded) {
-                        <span class="ax-conversation-picker__status--ok"
-                          ><i class="fa-light fa-check"></i>
-                          {{ translation.translateSync('@acorex:chat.pickers.files.uploaded') }}</span
-                        >
-                      } @else if (file.error) {
-                        <span class="ax-conversation-picker__status--err"
-                          ><i class="fa-light fa-xmark"></i> {{ file.error }}</span
-                        >
-                      } @else {
-                        <span>{{ formatFileSize(file.file.size) }}</span>
-                      }
-                    </div>
-                    @if (file.uploading || file.uploaded) {
-                      <div class="ax-conversation-picker__progress">
-                        <ax-progress-bar [progress]="file.uploadProgress || 0" [mode]="'determinate'" [height]="3" />
-                      </div>
-                    }
-                  </div>
-                  <button
-                    type="button"
-                    class="ax-conversation-picker__remove"
-                    (click)="removeFile($index)"
-                    [attr.aria-label]="
-                      file.uploading
-                        ? getCancelUploadLabel()
-                        : translation.translateSync('@acorex:chat.pickers.common.remove')
-                    "
-                  >
-                    <i class="fa-light fa-xmark"></i>
-                  </button>
-                </div>
-              }
-            </div>
-          </div>
-        }
-      </div>
-
-      <ax-conversation-picker-caption [(caption)]="caption" />
-
-      @if (files().length > 0) {
-        <ax-conversation-picker-footer
-          [sendText]="getSendButtonText()"
-          [sendDisabled]="!canSend()"
-          (onCancel)="cancel()"
-          (onSend)="sendFiles()"
-        />
-      }
-    </ax-conversation-picker-shell>
-  `, styles: [":host{display:block;width:100%;max-width:100%;min-height:0}.ax-conversation-picker__scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.ax-conversation-picker__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;min-height:8.5rem;margin:.75rem;padding:1rem .75rem;border:1px dashed rgb(var(--ax-sys-color-border-surface));border-radius:var(--ax-sys-border-radius, .5rem);cursor:pointer;transition:border-color .15s ease,background-color .15s ease;text-align:center;touch-action:manipulation}.ax-conversation-picker__empty:hover,.ax-conversation-picker__empty--drag{border-color:rgb(var(--ax-sys-color-primary-500));background:rgba(var(--ax-sys-color-primary-500),.06)}.ax-conversation-picker__empty-icon{font-size:1.75rem;line-height:1;color:rgba(var(--ax-sys-color-on-surface),.55)}.ax-conversation-picker__empty-title{margin:0;font-size:.8125rem;font-weight:600;color:rgb(var(--ax-sys-color-on-surface))}.ax-conversation-picker__empty-hint{margin:0;font-size:.75rem;color:rgba(var(--ax-sys-color-on-surface),.6)}.ax-conversation-picker__body{padding:0 .75rem .75rem}.ax-conversation-picker__list{display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem}.ax-conversation-picker__row{display:flex;align-items:center;gap:.625rem;padding:.5rem .625rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:var(--ax-sys-border-radius, .375rem);background:rgb(var(--ax-sys-color-surface));transition:background-color .15s ease}@media (hover: hover){.ax-conversation-picker__row:hover{background:rgb(var(--ax-sys-color-light-surface))}}.ax-conversation-picker__thumb{position:relative;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex-shrink:0;border-radius:var(--ax-sys-border-radius, .375rem);background:rgba(var(--ax-sys-color-primary-500),.08);color:rgb(var(--ax-sys-color-primary-500));font-size:1.125rem;overflow:hidden}.ax-conversation-picker__thumb img,.ax-conversation-picker__thumb video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.ax-conversation-picker__thumb-badge{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000052;color:rgb(var(--ax-sys-color-light));font-size:.625rem;pointer-events:none}.ax-conversation-picker__details{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.ax-conversation-picker__name{font-size:.8125rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-conversation-picker__status{display:flex;flex-wrap:wrap;gap:.375rem;font-size:.6875rem;color:rgba(var(--ax-sys-color-on-surface),.65)}.ax-conversation-picker__status--ok{color:rgb(var(--ax-sys-color-success-600));font-weight:500}.ax-conversation-picker__status--err{color:rgb(var(--ax-sys-color-danger-600));font-weight:500}.ax-conversation-picker__progress{width:100%;margin-top:.125rem}.ax-conversation-picker__remove{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;flex-shrink:0;border:none;border-radius:var(--ax-sys-border-radius, .25rem);background:transparent;color:rgba(var(--ax-sys-color-on-surface),.55);font-size:1rem;cursor:pointer;touch-action:manipulation;transition:background-color .15s ease,color .15s ease}.ax-conversation-picker__remove:hover,.ax-conversation-picker__remove:focus-visible{background:rgba(var(--ax-sys-color-danger-500),.1);color:rgb(var(--ax-sys-color-danger-500));outline:none}.ax-conversation-picker__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.25rem,1fr));gap:.5rem}.ax-conversation-picker__tile{position:relative;aspect-ratio:1;border-radius:var(--ax-sys-border-radius, .375rem);overflow:hidden;border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-light-surface))}.ax-conversation-picker__tile img{width:100%;height:100%;object-fit:cover;display:block}.ax-conversation-picker__tile-remove{position:absolute;top:.25rem;inset-inline-end:.25rem;z-index:2;display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;border-radius:50%;background:rgb(var(--ax-sys-color-danger-500));color:rgb(var(--ax-sys-color-light));font-size:.6875rem;cursor:pointer;touch-action:manipulation;box-shadow:0 1px 3px #0003}.ax-conversation-picker__tile-overlay{position:absolute;inset-inline:0;bottom:0;padding:.25rem;background:linear-gradient(transparent,#0000008c)}.ax-conversation-picker__tile-status{font-size:.625rem;color:rgb(var(--ax-sys-color-light));line-height:1.2}.ax-conversation-picker__caption-slot{flex-shrink:0;padding:.5rem .75rem;border-top:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-lightest-surface))}.ax-conversation-picker__input-hidden{display:none}@container picker (max-width: 480px){.ax-conversation-picker__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.375rem}.ax-conversation-picker__row{padding:.4375rem .5rem;gap:.5rem}.ax-conversation-picker__thumb{width:2.25rem;height:2.25rem}.ax-conversation-picker__empty{min-height:7.5rem;margin:.5rem}.ax-conversation-picker__body{padding-inline:.5rem;padding-bottom:.5rem}}\n"] }]
-        }], ctorParameters: () => [] });
-
-export { AXConversationFilePickerComponent };
-//# sourceMappingURL=acorex-components-conversation-file-picker.component-cmUkgSF3.mjs.map