@acorex/components 21.0.3-next.38 → 21.0.3-next.40

package/fesm2022/acorex-components-conversation-image-picker.component-CS343UDa.mjs

@@ -0,0 +1,407 @@
+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 } from '@acorex/core/file';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, inject, PLATFORM_ID, signal, computed, Component } from '@angular/core';
+import { s as resolvePersistableMediaUrl, c as resolvePersistedThumbnailUrl, o as AXConversationComposerService, t as AX_CONVERSATION_IMAGE_CATALOG } from './acorex-components-conversation-acorex-components-conversation-YhVa42TC.mjs';
+import { A as AXConversationPickerHeaderComponent, a as AXConversationPickerFooterComponent } from './acorex-components-conversation-picker-header.component-BneIFjXq.mjs';
+import { A as AXConversationPickerEmptyComponent, a as AXConversationPickerToolbarComponent, b as AXConversationPickerCaptionComponent, c as AXConversationPickerShellComponent } from './acorex-components-conversation-picker-toolbar.component-BthRvEeE.mjs';
+import { s as seedPickerInitialFiles, l as limitFilesToCapacity, a as notifyMaxFilesCapacityExceeded, n as notifyPickerValidationErrors, u as uploadPickerFile, i as isUploadAborted, c as cleanupPickerUploads, p as pickerItemToUploadResult, d as dismissComposerPickerHost, g as getPickerCancelUploadLabel } from './acorex-components-conversation-picker-upload-C-PlKPaU.mjs';
+import { AX_CONVERSATION_IMAGE_PRESENTATION, createConversationImageFileType } from './acorex-components-conversation-conversation-image.file-type-C02OzZZB.mjs';
+
+/**
+ * Image Picker Component
+ * Full-width image selection and preview interface for the composer
+ */
+function imageItemFromUpload(file, result) {
+    const url = resolvePersistableMediaUrl(result.url);
+    const item = {
+        mediaId: result.mediaId,
+        mimeType: result.mimeType,
+        size: result.size,
+        thumbnailUrl: resolvePersistedThumbnailUrl(result.thumbnailUrl, url),
+        width: 0,
+        height: 0,
+        metadata: result.metadata,
+    };
+    if (url) {
+        item.url = url;
+    }
+    return item;
+}
+class AXConversationImagePickerComponent {
+    get composerService() {
+        const svc = this.service() ?? this.composerServiceFromInjector;
+        if (!svc) {
+            throw new Error('AXConversationComposerService is required for the image picker');
+        }
+        return svc;
+    }
+    constructor() {
+        this.uploadsDismissed = false;
+        /** Uploaded blobs are referenced by the sent message — do not delete on dismiss. */
+        this.retainUploadedOnDismiss = false;
+        this.service = input(...(ngDevMode ? [undefined, { debugName: "service" }] : /* istanbul ignore next */ []));
+        this.composerServiceFromInjector = inject(AXConversationComposerService, { optional: true });
+        this.uploader = inject(AXUploaderService);
+        this.fileService = inject(AXFileService);
+        this.fileTypeRegistry = inject(AXFileTypeRegistryService);
+        this.platformId = inject(PLATFORM_ID);
+        this.toast = inject(AXToastService);
+        this.translation = inject(AXTranslationService);
+        this.catalogFileType = AX_CONVERSATION_IMAGE_CATALOG;
+        this.conversation = input.required(...(ngDevMode ? [{ debugName: "conversation" }] : /* istanbul ignore next */ []));
+        this.maxFiles = input(10, ...(ngDevMode ? [{ debugName: "maxFiles" }] : /* istanbul ignore next */ []));
+        this.initialFiles = input([], ...(ngDevMode ? [{ debugName: "initialFiles" }] : /* istanbul ignore next */ []));
+        this.__popup__ = input(...(ngDevMode ? [undefined, { debugName: "__popup__" }] : /* istanbul ignore next */ []));
+        this.images = signal([], ...(ngDevMode ? [{ debugName: "images" }] : /* istanbul ignore next */ []));
+        this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+        this.emptyIconClass = computed(() => this.isDragging() ? 'fa-light fa-cloud-arrow-up' : AX_CONVERSATION_IMAGE_PRESENTATION.icon, ...(ngDevMode ? [{ debugName: "emptyIconClass" }] : /* istanbul ignore next */ []));
+        this.caption = '';
+        this.allowMultiple = computed(() => this.maxFiles() > 1, ...(ngDevMode ? [{ debugName: "allowMultiple" }] : /* istanbul ignore next */ []));
+        this.fileTypeRegistry.registerTypes([createConversationImageFileType()]);
+        seedPickerInitialFiles(this.initialFiles, (files) => this.handleFiles(files));
+    }
+    createUtilityContext() {
+        return {
+            readAsDataUrl: (file) => this.fileService.blobToBase64(file),
+            platformId: this.platformId,
+        };
+    }
+    async loadImageFileType() {
+        this.imageFileType ??= await this.fileService.getFileType(this.catalogFileType);
+        return this.imageFileType;
+    }
+    async handleFiles(files) {
+        const max = this.maxFiles();
+        const capacity = limitFilesToCapacity(files, this.images().length, max);
+        if (capacity.length < files.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.loadImageFileType();
+        const ctx = this.createUtilityContext();
+        for (const file of accepted) {
+            try {
+                const previewValue = fileType
+                    ? await runFileTypeUtilityForFile(fileType, ctx, file, 'preview')
+                    : undefined;
+                const preview = typeof previewValue === 'string' ? previewValue : '';
+                let index = -1;
+                this.images.update((images) => {
+                    index = images.length;
+                    return [...images, { file, preview, uploadProgress: 0, uploading: true }];
+                });
+                if (index >= 0) {
+                    void this.uploadImageAt(index, file);
+                }
+            }
+            catch (error) {
+                console.error('Failed to process image:', error);
+            }
+        }
+    }
+    async uploadImageAt(index, file) {
+        const abortController = new AbortController();
+        this.patchImage(index, { abortController });
+        try {
+            const result = await uploadPickerFile(this.uploader, this.conversation().id, file, (progress) => this.patchImage(index, { uploadProgress: progress, uploading: true }), abortController.signal);
+            this.patchImage(index, {
+                uploadProgress: 100,
+                uploading: false,
+                uploaded: true,
+                uploadedUrl: result.url,
+                mediaId: result.mediaId,
+            });
+        }
+        catch (err) {
+            if (this.uploadsDismissed || isUploadAborted(err, abortController.signal)) {
+                return;
+            }
+            this.patchImage(index, {
+                uploadProgress: 0,
+                uploading: false,
+                uploaded: false,
+                error: this.translation.translateSync('@acorex:chat.errors.upload-failed'),
+            });
+        }
+    }
+    patchImage(index, patch) {
+        if (this.uploadsDismissed) {
+            return;
+        }
+        this.images.update((items) => {
+            const next = [...items];
+            if (next[index]) {
+                next[index] = { ...next[index], ...patch };
+            }
+            return next;
+        });
+    }
+    removeImage(index) {
+        const item = this.images()[index];
+        if (item) {
+            cleanupPickerUploads(this.uploader, [item]);
+        }
+        this.images.update((images) => images.filter((_, i) => i !== index));
+    }
+    async sendImages() {
+        const imageList = this.images();
+        if (!this.canSend())
+            return;
+        const images = imageList.flatMap((image) => {
+            const result = pickerItemToUploadResult(image);
+            return result ? [imageItemFromUpload(image.file, result)] : [];
+        });
+        if (images.length === 0) {
+            return;
+        }
+        const command = {
+            conversationId: this.conversation().id,
+            type: 'image',
+            payload: {
+                type: 'image',
+                images,
+                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;
+        });
+    }
+    canSend() {
+        const list = this.images();
+        return list.length > 0 && list.every((i) => i.uploaded && !i.error && !i.uploading);
+    }
+    getUploadingLabel(progress) {
+        return this.translation.translateSync('@acorex:chat.pickers.files.uploading-progress', {
+            params: { progress },
+        });
+    }
+    getCancelUploadLabel() {
+        return getPickerCancelUploadLabel(this.translation);
+    }
+    cancel() {
+        this.dismissPicker();
+        dismissComposerPickerHost(this.composerService, this.__popup__());
+    }
+    ngOnDestroy() {
+        this.dismissPicker();
+    }
+    dismissPicker() {
+        if (this.uploadsDismissed) {
+            return;
+        }
+        this.uploadsDismissed = true;
+        const snapshot = [...this.images()];
+        cleanupPickerUploads(this.uploader, snapshot, {
+            retainUploaded: this.retainUploadedOnDismiss,
+        });
+        this.retainUploadedOnDismiss = false;
+        this.images.set([]);
+        this.caption = '';
+    }
+    getEmptyTitle() {
+        return this.isDragging()
+            ? this.translation.translateSync('@acorex:chat.pickers.images.drop-to-attach')
+            : this.translation.translateSync('@acorex:chat.pickers.images.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.images.selected-count', {
+            params: { count: this.images().length },
+        });
+    }
+    getSendText() {
+        return this.translation.translateSync('@acorex:chat.pickers.images.send-count', {
+            params: { count: this.images().length },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXConversationImagePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXConversationImagePickerComponent, isStandalone: true, selector: "ax-conversation-image-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.images.title')" (onClose)="cancel()" />
+
+      <div class="ax-conversation-picker__scroll">
+        @if (images().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__grid">
+              @for (image of images(); track $index) {
+                <div class="ax-conversation-picker__tile">
+                  <img [src]="image.preview" [alt]="image.file.name" />
+                  @if (image.uploading || image.uploaded || image.error) {
+                    <div class="ax-conversation-picker__tile-overlay">
+                      @if (image.uploading) {
+                        <span class="ax-conversation-picker__tile-status">{{
+                          getUploadingLabel(image.uploadProgress ?? 0)
+                        }}</span>
+                        <ax-progress-bar [progress]="image.uploadProgress || 0" [mode]="'determinate'" [height]="3" />
+                      } @else if (image.uploaded) {
+                        <span class="ax-conversation-picker__tile-status"
+                          ><i class="fa-light fa-check"></i>
+                          {{ translation.translateSync('@acorex:chat.pickers.files.uploaded') }}</span
+                        >
+                      } @else if (image.error) {
+                        <span class="ax-conversation-picker__tile-status">{{ image.error }}</span>
+                      }
+                    </div>
+                  }
+                  <button
+                    type="button"
+                    class="ax-conversation-picker__tile-remove"
+                    (click)="removeImage($index)"
+                    [attr.aria-label]="
+                      image.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 (images().length > 0) {
+        <ax-conversation-picker-footer
+          [sendText]="getSendText()"
+          [sendDisabled]="!canSend()"
+          (onCancel)="cancel()"
+          (onSend)="sendImages()"
+        />
+      }
+    </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;inset: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: "21.2.9", ngImport: i0, type: AXConversationImagePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-conversation-image-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.images.title')" (onClose)="cancel()" />
+
+      <div class="ax-conversation-picker__scroll">
+        @if (images().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__grid">
+              @for (image of images(); track $index) {
+                <div class="ax-conversation-picker__tile">
+                  <img [src]="image.preview" [alt]="image.file.name" />
+                  @if (image.uploading || image.uploaded || image.error) {
+                    <div class="ax-conversation-picker__tile-overlay">
+                      @if (image.uploading) {
+                        <span class="ax-conversation-picker__tile-status">{{
+                          getUploadingLabel(image.uploadProgress ?? 0)
+                        }}</span>
+                        <ax-progress-bar [progress]="image.uploadProgress || 0" [mode]="'determinate'" [height]="3" />
+                      } @else if (image.uploaded) {
+                        <span class="ax-conversation-picker__tile-status"
+                          ><i class="fa-light fa-check"></i>
+                          {{ translation.translateSync('@acorex:chat.pickers.files.uploaded') }}</span
+                        >
+                      } @else if (image.error) {
+                        <span class="ax-conversation-picker__tile-status">{{ image.error }}</span>
+                      }
+                    </div>
+                  }
+                  <button
+                    type="button"
+                    class="ax-conversation-picker__tile-remove"
+                    (click)="removeImage($index)"
+                    [attr.aria-label]="
+                      image.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 (images().length > 0) {
+        <ax-conversation-picker-footer
+          [sendText]="getSendText()"
+          [sendDisabled]="!canSend()"
+          (onCancel)="cancel()"
+          (onSend)="sendImages()"
+        />
+      }
+    </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;inset: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: () => [], propDecorators: { service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: false }] }], conversation: [{ type: i0.Input, args: [{ isSignal: true, alias: "conversation", required: true }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], initialFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFiles", required: false }] }], __popup__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__popup__", required: false }] }] } });
+
+export { AXConversationImagePickerComponent };
+//# sourceMappingURL=acorex-components-conversation-image-picker.component-CS343UDa.mjs.map

package/fesm2022/acorex-components-conversation-image-picker.component-CS343UDa.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-conversation-image-picker.component-CS343UDa.mjs","sources":["../../../../packages/components/conversation/src/lib/plugins/composer/components/image-picker/image-picker.component.ts"],"sourcesContent":["/**\n * Image Picker Component\n * Full-width image selection and preview interface for the composer\n */\n\nimport { AXUploaderService } from '@acorex/cdk/uploader';\nimport { AXProgressBarModule } from '@acorex/components/progress-bar';\nimport type { AXPopupRef } from '@acorex/components/popup';\nimport { AXToastService } from '@acorex/components/toast';\nimport { AXFileService, AXFileTypeRegistryService, runFileTypeUtilityForFile, type AXFileType } from '@acorex/core/file';\nimport { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';\nimport { CommonModule } from '@angular/common';\nimport { Component, OnDestroy, PLATFORM_ID, computed, inject, input, signal } from '@angular/core';\nimport { AXConversationComposerService } from '../../../../components/composer/composer.service';\nimport { AXConversation, AXConversationImageMediaItem, AXConversationSendMessageCommand } from '../../../../models';\nimport type { AXConversationUploaderResult } from '../../../../models/conversation-upload.types';\nimport { AXConversationPickerFooterComponent } from '../picker-footer/picker-footer.component';\nimport { AXConversationPickerHeaderComponent } from '../picker-header/picker-header.component';\nimport { AXConversationPickerCaptionComponent } from '../shared/picker-caption.component';\nimport { AXConversationPickerEmptyComponent } from '../shared/picker-empty.component';\nimport { AX_CONVERSATION_PICKER_SHARED_STYLES } from '../shared/picker-shared.styles';\nimport { AXConversationPickerShellComponent } from '../shared/picker-shell.component';\nimport { AXConversationPickerToolbarComponent } from '../shared/picker-toolbar.component';\nimport {\n  type AXConversationComposerPickerUploadItem,\n  cleanupPickerUploads,\n  dismissComposerPickerHost,\n  getPickerCancelUploadLabel,\n  isUploadAborted,\n  seedPickerInitialFiles,\n  limitFilesToCapacity,\n  notifyMaxFilesCapacityExceeded,\n  notifyPickerValidationErrors,\n  pickerItemToUploadResult,\n  uploadPickerFile,\n} from '../shared/picker-upload';\nimport { resolvePersistableMediaUrl, resolvePersistedThumbnailUrl } from '../shared/persisted-media-url';\nimport {\n  createConversationImageFileType,\n  AX_CONVERSATION_IMAGE_CATALOG,\n  AX_CONVERSATION_IMAGE_PRESENTATION,\n} from './conversation-image.file-type';\n\ninterface AXConversationImageFile extends AXConversationComposerPickerUploadItem {\n  preview: string;\n}\n\nfunction imageItemFromUpload(file: File, result: AXConversationUploaderResult): AXConversationImageMediaItem {\n  const url = resolvePersistableMediaUrl(result.url);\n  const item: AXConversationImageMediaItem = {\n    mediaId: result.mediaId,\n    mimeType: result.mimeType,\n    size: result.size,\n    thumbnailUrl: resolvePersistedThumbnailUrl(result.thumbnailUrl, url),\n    width: 0,\n    height: 0,\n    metadata: result.metadata,\n  };\n  if (url) {\n    item.url = url;\n  }\n  return item;\n}\n\n@Component({\n  selector: 'ax-conversation-image-picker',\n  imports: [\n    CommonModule,\n    AXProgressBarModule,\n    AXTranslationModule,\n    AXConversationPickerHeaderComponent,\n    AXConversationPickerFooterComponent,\n    AXConversationPickerEmptyComponent,\n    AXConversationPickerToolbarComponent,\n    AXConversationPickerCaptionComponent,\n    AXConversationPickerShellComponent,\n  ],\n  template: `\n    <ax-conversation-picker-shell\n      [fileType]=\"catalogFileType\"\n      [multiple]=\"allowMultiple()\"\n      (filesSelected)=\"handleFiles($event)\"\n      (dragEnter)=\"isDragging.set(true)\"\n      (dragLeave)=\"isDragging.set(false)\"\n    >\n      <ax-conversation-picker-header [title]=\"translation.translateSync('@acorex:chat.pickers.images.title')\" (onClose)=\"cancel()\" />\n\n      <div class=\"ax-conversation-picker__scroll\">\n        @if (images().length === 0) {\n          <ax-conversation-picker-empty\n            [title]=\"getEmptyTitle()\"\n            [hint]=\"getEmptySubtitle()\"\n            [iconClass]=\"emptyIconClass()\"\n            [dragOver]=\"isDragging()\"\n          />\n        } @else {\n          <div class=\"ax-conversation-picker__body\">\n            <ax-conversation-picker-toolbar\n              [countLabel]=\"getSelectedCountText()\"\n              [addMoreLabel]=\"translation.translateSync('@acorex:chat.pickers.common.add-more')\"\n            />\n\n            <div class=\"ax-conversation-picker__grid\">\n              @for (image of images(); track $index) {\n                <div class=\"ax-conversation-picker__tile\">\n                  <img [src]=\"image.preview\" [alt]=\"image.file.name\" />\n                  @if (image.uploading || image.uploaded || image.error) {\n                    <div class=\"ax-conversation-picker__tile-overlay\">\n                      @if (image.uploading) {\n                        <span class=\"ax-conversation-picker__tile-status\">{{\n                          getUploadingLabel(image.uploadProgress ?? 0)\n                        }}</span>\n                        <ax-progress-bar [progress]=\"image.uploadProgress || 0\" [mode]=\"'determinate'\" [height]=\"3\" />\n                      } @else if (image.uploaded) {\n                        <span class=\"ax-conversation-picker__tile-status\"\n                          ><i class=\"fa-light fa-check\"></i>\n                          {{ translation.translateSync('@acorex:chat.pickers.files.uploaded') }}</span\n                        >\n                      } @else if (image.error) {\n                        <span class=\"ax-conversation-picker__tile-status\">{{ image.error }}</span>\n                      }\n                    </div>\n                  }\n                  <button\n                    type=\"button\"\n                    class=\"ax-conversation-picker__tile-remove\"\n                    (click)=\"removeImage($index)\"\n                    [attr.aria-label]=\"\n                      image.uploading\n                        ? getCancelUploadLabel()\n                        : translation.translateSync('@acorex:chat.pickers.common.remove')\n                    \"\n                  >\n                    <i class=\"fa-light fa-xmark\"></i>\n                  </button>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n      <ax-conversation-picker-caption [(caption)]=\"caption\" />\n\n      @if (images().length > 0) {\n        <ax-conversation-picker-footer\n          [sendText]=\"getSendText()\"\n          [sendDisabled]=\"!canSend()\"\n          (onCancel)=\"cancel()\"\n          (onSend)=\"sendImages()\"\n        />\n      }\n    </ax-conversation-picker-shell>\n  `,\n  styles: [AX_CONVERSATION_PICKER_SHARED_STYLES],\n})\nexport class AXConversationImagePickerComponent implements OnDestroy {\n  private uploadsDismissed = false;\n  /** Uploaded blobs are referenced by the sent message — do not delete on dismiss. */\n  private retainUploadedOnDismiss = false;\n  readonly service = input<AXConversationComposerService | undefined>();\n  private readonly composerServiceFromInjector = inject(AXConversationComposerService, { optional: true });\n\n  private get composerService(): AXConversationComposerService {\n    const svc = this.service() ?? this.composerServiceFromInjector;\n    if (!svc) {\n      throw new Error('AXConversationComposerService is required for the image picker');\n    }\n    return svc;\n  }\n  private readonly uploader = inject(AXUploaderService);\n  private readonly fileService = inject(AXFileService);\n  private readonly fileTypeRegistry = inject(AXFileTypeRegistryService);\n  private readonly platformId = inject(PLATFORM_ID);\n  private readonly toast = inject(AXToastService);\n  readonly translation = inject(AXTranslationService);\n\n  readonly catalogFileType = AX_CONVERSATION_IMAGE_CATALOG;\n\n  readonly conversation = input.required<AXConversation>();\n  readonly maxFiles = input<number>(10);\n  readonly initialFiles = input<File[]>([]);\n  readonly __popup__ = input<AXPopupRef | undefined>();\n\n  readonly images = signal<AXConversationImageFile[]>([]);\n  readonly isDragging = signal(false);\n  readonly emptyIconClass = computed(() =>\n    this.isDragging() ? 'fa-light fa-cloud-arrow-up' : AX_CONVERSATION_IMAGE_PRESENTATION.icon,\n  );\n  caption = '';\n\n  readonly allowMultiple = computed(() => this.maxFiles() > 1);\n  private imageFileType?: AXFileType;\n\n  constructor() {\n    this.fileTypeRegistry.registerTypes([createConversationImageFileType()]);\n    seedPickerInitialFiles(this.initialFiles, (files) => this.handleFiles(files));\n  }\n\n  private createUtilityContext() {\n    return {\n      readAsDataUrl: (file: File | Blob) => this.fileService.blobToBase64(file),\n      platformId: this.platformId,\n    };\n  }\n\n  private async loadImageFileType(): Promise<AXFileType | undefined> {\n    this.imageFileType ??= await this.fileService.getFileType(this.catalogFileType);\n    return this.imageFileType;\n  }\n\n  async handleFiles(files: File[]): Promise<void> {\n    const max = this.maxFiles();\n    const capacity = limitFilesToCapacity(files, this.images().length, max);\n    if (capacity.length < files.length) {\n      notifyMaxFilesCapacityExceeded(this.toast, this.translation, max);\n    }\n    if (capacity.length === 0) {\n      return;\n    }\n\n    const { accepted, rejected } = await this.uploader.validateFiles(capacity, this.catalogFileType);\n    notifyPickerValidationErrors(this.toast, this.translation, rejected);\n\n    const fileType = await this.loadImageFileType();\n    const ctx = this.createUtilityContext();\n\n    for (const file of accepted) {\n      try {\n        const previewValue = fileType\n          ? await runFileTypeUtilityForFile(fileType, ctx, file, 'preview')\n          : undefined;\n        const preview = typeof previewValue === 'string' ? previewValue : '';\n        let index = -1;\n        this.images.update((images) => {\n          index = images.length;\n          return [...images, { file, preview, uploadProgress: 0, uploading: true }];\n        });\n        if (index >= 0) {\n          void this.uploadImageAt(index, file);\n        }\n      } catch (error) {\n        console.error('Failed to process image:', error);\n      }\n    }\n  }\n\n  private async uploadImageAt(index: number, file: File): Promise<void> {\n    const abortController = new AbortController();\n    this.patchImage(index, { abortController });\n\n    try {\n      const result = await uploadPickerFile(\n        this.uploader,\n        this.conversation().id,\n        file,\n        (progress) => this.patchImage(index, { uploadProgress: progress, uploading: true }),\n        abortController.signal,\n      );\n      this.patchImage(index, {\n        uploadProgress: 100,\n        uploading: false,\n        uploaded: true,\n        uploadedUrl: result.url,\n        mediaId: result.mediaId,\n      });\n    } catch (err) {\n      if (this.uploadsDismissed || isUploadAborted(err, abortController.signal)) {\n        return;\n      }\n      this.patchImage(index, {\n        uploadProgress: 0,\n        uploading: false,\n        uploaded: false,\n        error: this.translation.translateSync('@acorex:chat.errors.upload-failed'),\n      });\n    }\n  }\n\n  private patchImage(index: number, patch: Partial<AXConversationImageFile>): void {\n    if (this.uploadsDismissed) {\n      return;\n    }\n    this.images.update((items) => {\n      const next = [...items];\n      if (next[index]) {\n        next[index] = { ...next[index], ...patch };\n      }\n      return next;\n    });\n  }\n\n  removeImage(index: number): void {\n    const item = this.images()[index];\n    if (item) {\n      cleanupPickerUploads(this.uploader, [item]);\n    }\n    this.images.update((images) => images.filter((_, i) => i !== index));\n  }\n\n  async sendImages(): Promise<void> {\n    const imageList = this.images();\n    if (!this.canSend()) return;\n\n    const images = imageList.flatMap((image) => {\n      const result = pickerItemToUploadResult(image);\n      return result ? [imageItemFromUpload(image.file, result)] : [];\n    });\n\n    if (images.length === 0) {\n      return;\n    }\n\n    const command: AXConversationSendMessageCommand = {\n      conversationId: this.conversation().id,\n      type: 'image',\n      payload: {\n        type: 'image',\n        images,\n        caption: this.caption.trim() || undefined,\n      },\n    };\n\n    this.retainUploadedOnDismiss = true;\n    const popup = this.__popup__();\n    this.dismissPicker();\n    dismissComposerPickerHost(this.composerService, popup);\n\n    void this.composerService.sendMessage(command).catch(() => {\n      this.retainUploadedOnDismiss = false;\n    });\n  }\n\n  canSend(): boolean {\n    const list = this.images();\n    return list.length > 0 && list.every((i) => i.uploaded && !i.error && !i.uploading);\n  }\n\n  getUploadingLabel(progress: number): string {\n    return this.translation.translateSync('@acorex:chat.pickers.files.uploading-progress', {\n      params: { progress },\n    });\n  }\n\n  getCancelUploadLabel(): string {\n    return getPickerCancelUploadLabel(this.translation);\n  }\n\n  cancel(): void {\n    this.dismissPicker();\n    dismissComposerPickerHost(this.composerService, this.__popup__());\n  }\n\n  ngOnDestroy(): void {\n    this.dismissPicker();\n  }\n\n  private dismissPicker(): void {\n    if (this.uploadsDismissed) {\n      return;\n    }\n    this.uploadsDismissed = true;\n    const snapshot = [...this.images()];\n    cleanupPickerUploads(this.uploader, snapshot, {\n      retainUploaded: this.retainUploadedOnDismiss,\n    });\n    this.retainUploadedOnDismiss = false;\n    this.images.set([]);\n    this.caption = '';\n  }\n\n  getEmptyTitle(): string {\n    return this.isDragging()\n      ? this.translation.translateSync('@acorex:chat.pickers.images.drop-to-attach')\n      : this.translation.translateSync('@acorex:chat.pickers.images.select');\n  }\n\n  getEmptySubtitle(): string {\n    return this.isDragging()\n      ? this.translation.translateSync('@acorex:chat.pickers.common.release-to-upload')\n      : this.translation.translateSync('@acorex:chat.pickers.common.click-to-browse');\n  }\n\n  getSelectedCountText(): string {\n    return this.translation.translateSync('@acorex:chat.pickers.images.selected-count', {\n      params: { count: this.images().length },\n    });\n  }\n\n  getSendText(): string {\n    return this.translation.translateSync('@acorex:chat.pickers.images.send-count', {\n      params: { count: this.images().length },\n    });\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;;AAGG;AA4CH,SAAS,mBAAmB,CAAC,IAAU,EAAE,MAAoC,EAAA;IAC3E,MAAM,GAAG,GAAG,0BAA0B,CAAC,MAAM,CAAC,GAAG,CAAC;AAClD,IAAA,MAAM,IAAI,GAAiC;QACzC,OAAO,EAAE,MAAM,CAAC,OAAO;QACvB,QAAQ,EAAE,MAAM,CAAC,QAAQ;QACzB,IAAI,EAAE,MAAM,CAAC,IAAI;QACjB,YAAY,EAAE,4BAA4B,CAAC,MAAM,CAAC,YAAY,EAAE,GAAG,CAAC;AACpE,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,MAAM,CAAC,QAAQ;KAC1B;IACD,IAAI,GAAG,EAAE;AACP,QAAA,IAAI,CAAC,GAAG,GAAG,GAAG;IAChB;AACA,IAAA,OAAO,IAAI;AACb;MA8Fa,kCAAkC,CAAA;AAO7C,IAAA,IAAY,eAAe,GAAA;QACzB,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,2BAA2B;QAC9D,IAAI,CAAC,GAAG,EAAE;AACR,YAAA,MAAM,IAAI,KAAK,CAAC,gEAAgE,CAAC;QACnF;AACA,QAAA,OAAO,GAAG;IACZ;AAyBA,IAAA,WAAA,GAAA;QArCQ,IAAA,CAAA,gBAAgB,GAAG,KAAK;;QAExB,IAAA,CAAA,uBAAuB,GAAG,KAAK;QAC9B,IAAA,CAAA,OAAO,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAA6C;QACpD,IAAA,CAAA,2BAA2B,GAAG,MAAM,CAAC,6BAA6B,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AASvF,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,iBAAiB,CAAC;AACpC,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,aAAa,CAAC;AACnC,QAAA,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAC,yBAAyB,CAAC;AACpD,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC;AAChC,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,oBAAoB,CAAC;QAE1C,IAAA,CAAA,eAAe,GAAG,6BAA6B;AAE/C,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAC,QAAQ,kFAAkB;AAC/C,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAS,EAAE,+EAAC;AAC5B,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAS,EAAE,mFAAC;QAChC,IAAA,CAAA,SAAS,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAA0B;AAE3C,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAA4B,EAAE,6EAAC;AAC9C,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,KAAK,iFAAC;QAC1B,IAAA,CAAA,cAAc,GAAG,QAAQ,CAAC,MACjC,IAAI,CAAC,UAAU,EAAE,GAAG,4BAA4B,GAAG,kCAAkC,CAAC,IAAI,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAC3F;QACD,IAAA,CAAA,OAAO,GAAG,EAAE;AAEH,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,oFAAC;QAI1D,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,+BAA+B,EAAE,CAAC,CAAC;AACxE,QAAA,sBAAsB,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC/E;IAEQ,oBAAoB,GAAA;QAC1B,OAAO;AACL,YAAA,aAAa,EAAE,CAAC,IAAiB,KAAK,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC;YACzE,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B;IACH;AAEQ,IAAA,MAAM,iBAAiB,GAAA;AAC7B,QAAA,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,eAAe,CAAC;QAC/E,OAAO,IAAI,CAAC,aAAa;IAC3B;IAEA,MAAM,WAAW,CAAC,KAAa,EAAA;AAC7B,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC3B,QAAA,MAAM,QAAQ,GAAG,oBAAoB,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC;QACvE,IAAI,QAAQ,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,EAAE;YAClC,8BAA8B,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,GAAG,CAAC;QACnE;AACA,QAAA,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;YACzB;QACF;AAEA,QAAA,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC;QAChG,4BAA4B,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;AAEpE,QAAA,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,iBAAiB,EAAE;AAC/C,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,oBAAoB,EAAE;AAEvC,QAAA,KAAK,MAAM,IAAI,IAAI,QAAQ,EAAE;AAC3B,YAAA,IAAI;gBACF,MAAM,YAAY,GAAG;sBACjB,MAAM,yBAAyB,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS;sBAC9D,SAAS;AACb,gBAAA,MAAM,OAAO,GAAG,OAAO,YAAY,KAAK,QAAQ,GAAG,YAAY,GAAG,EAAE;AACpE,gBAAA,IAAI,KAAK,GAAG,CAAC,CAAC;gBACd,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,KAAI;AAC5B,oBAAA,KAAK,GAAG,MAAM,CAAC,MAAM;AACrB,oBAAA,OAAO,CAAC,GAAG,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC3E,gBAAA,CAAC,CAAC;AACF,gBAAA,IAAI,KAAK,IAAI,CAAC,EAAE;oBACd,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,IAAI,CAAC;gBACtC;YACF;YAAE,OAAO,KAAK,EAAE;AACd,gBAAA,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,KAAK,CAAC;YAClD;QACF;IACF;AAEQ,IAAA,MAAM,aAAa,CAAC,KAAa,EAAE,IAAU,EAAA;AACnD,QAAA,MAAM,eAAe,GAAG,IAAI,eAAe,EAAE;QAC7C,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,EAAE,eAAe,EAAE,CAAC;AAE3C,QAAA,IAAI;YACF,MAAM,MAAM,GAAG,MAAM,gBAAgB,CACnC,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE,EACtB,IAAI,EACJ,CAAC,QAAQ,KAAK,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EACnF,eAAe,CAAC,MAAM,CACvB;AACD,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;AACrB,gBAAA,cAAc,EAAE,GAAG;AACnB,gBAAA,SAAS,EAAE,KAAK;AAChB,gBAAA,QAAQ,EAAE,IAAI;gBACd,WAAW,EAAE,MAAM,CAAC,GAAG;gBACvB,OAAO,EAAE,MAAM,CAAC,OAAO;AACxB,aAAA,CAAC;QACJ;QAAE,OAAO,GAAG,EAAE;AACZ,YAAA,IAAI,IAAI,CAAC,gBAAgB,IAAI,eAAe,CAAC,GAAG,EAAE,eAAe,CAAC,MAAM,CAAC,EAAE;gBACzE;YACF;AACA,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;AACrB,gBAAA,cAAc,EAAE,CAAC;AACjB,gBAAA,SAAS,EAAE,KAAK;AAChB,gBAAA,QAAQ,EAAE,KAAK;gBACf,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mCAAmC,CAAC;AAC3E,aAAA,CAAC;QACJ;IACF;IAEQ,UAAU,CAAC,KAAa,EAAE,KAAuC,EAAA;AACvE,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB;QACF;QACA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,KAAI;AAC3B,YAAA,MAAM,IAAI,GAAG,CAAC,GAAG,KAAK,CAAC;AACvB,YAAA,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE;AACf,gBAAA,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE;YAC5C;AACA,YAAA,OAAO,IAAI;AACb,QAAA,CAAC,CAAC;IACJ;AAEA,IAAA,WAAW,CAAC,KAAa,EAAA;QACvB,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC;QACjC,IAAI,IAAI,EAAE;YACR,oBAAoB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;QAC7C;QACA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,CAAC;IACtE;AAEA,IAAA,MAAM,UAAU,GAAA;AACd,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE;AAC/B,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YAAE;QAErB,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACzC,YAAA,MAAM,MAAM,GAAG,wBAAwB,CAAC,KAAK,CAAC;AAC9C,YAAA,OAAO,MAAM,GAAG,CAAC,mBAAmB,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,GAAG,EAAE;AAChE,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;YACvB;QACF;AAEA,QAAA,MAAM,OAAO,GAAqC;AAChD,YAAA,cAAc,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE;AACtC,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE;AACP,gBAAA,IAAI,EAAE,OAAO;gBACb,MAAM;gBACN,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,SAAS;AAC1C,aAAA;SACF;AAED,QAAA,IAAI,CAAC,uBAAuB,GAAG,IAAI;AACnC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE;QAC9B,IAAI,CAAC,aAAa,EAAE;AACpB,QAAA,yBAAyB,CAAC,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC;AAEtD,QAAA,KAAK,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,MAAK;AACxD,YAAA,IAAI,CAAC,uBAAuB,GAAG,KAAK;AACtC,QAAA,CAAC,CAAC;IACJ;IAEA,OAAO,GAAA;AACL,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE;AAC1B,QAAA,OAAO,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IACrF;AAEA,IAAA,iBAAiB,CAAC,QAAgB,EAAA;AAChC,QAAA,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,+CAA+C,EAAE;YACrF,MAAM,EAAE,EAAE,QAAQ,EAAE;AACrB,SAAA,CAAC;IACJ;IAEA,oBAAoB,GAAA;AAClB,QAAA,OAAO,0BAA0B,CAAC,IAAI,CAAC,WAAW,CAAC;IACrD;IAEA,MAAM,GAAA;QACJ,IAAI,CAAC,aAAa,EAAE;QACpB,yBAAyB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;IACnE;IAEA,WAAW,GAAA;QACT,IAAI,CAAC,aAAa,EAAE;IACtB;IAEQ,aAAa,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB;QACF;AACA,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;QAC5B,MAAM,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;AACnC,QAAA,oBAAoB,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE;YAC5C,cAAc,EAAE,IAAI,CAAC,uBAAuB;AAC7C,SAAA,CAAC;AACF,QAAA,IAAI,CAAC,uBAAuB,GAAG,KAAK;AACpC,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;AACnB,QAAA,IAAI,CAAC,OAAO,GAAG,EAAE;IACnB;IAEA,aAAa,GAAA;QACX,OAAO,IAAI,CAAC,UAAU;cAClB,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,4CAA4C;cAC3E,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,oCAAoC,CAAC;IAC1E;IAEA,gBAAgB,GAAA;QACd,OAAO,IAAI,CAAC,UAAU;cAClB,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,+CAA+C;cAC9E,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,6CAA6C,CAAC;IACnF;IAEA,oBAAoB,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,4CAA4C,EAAE;YAClF,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE;AACxC,SAAA,CAAC;IACJ;IAEA,WAAW,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,wCAAwC,EAAE;YAC9E,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE;AACxC,SAAA,CAAC;IACJ;8GA7OW,kCAAkC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlC,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kCAAkC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA/EnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4ET,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,upKAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAtFC,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACZ,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,UAAA,EAAA,QAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACnB,mBAAmB,+BACnB,mCAAmC,EAAA,QAAA,EAAA,+BAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACnC,mCAAmC,EAAA,QAAA,EAAA,+BAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,cAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACnC,kCAAkC,EAAA,QAAA,EAAA,8BAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAClC,oCAAoC,EAAA,QAAA,EAAA,gCAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACpC,oCAAoC,4HACpC,kCAAkC,EAAA,QAAA,EAAA,8BAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,EAAA,WAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAiFzB,kCAAkC,EAAA,UAAA,EAAA,CAAA;kBA5F9C,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,8BAA8B,EAAA,OAAA,EAC/B;wBACP,YAAY;wBACZ,mBAAmB;wBACnB,mBAAmB;wBACnB,mCAAmC;wBACnC,mCAAmC;wBACnC,kCAAkC;wBAClC,oCAAoC;wBACpC,oCAAoC;wBACpC,kCAAkC;qBACnC,EAAA,QAAA,EACS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4ET,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,upKAAA,CAAA,EAAA;;;;;"}

package/fesm2022/acorex-components-conversation-image-renderer.component-Cy0TA6cL.mjs

@@ -0,0 +1,83 @@
+import { AXFileTypeRegistryService } from '@acorex/core/file';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { A as AXConversationImageAttachmentComponent } from './acorex-components-conversation-image-attachment.component-CLMGxXPl.mjs';
+import { A as AXConversationMessageRendererCopyHostComponent, m as mediaCopyText } from './acorex-components-conversation-message-renderer-copy-host.component-oXTr_Lfq.mjs';
+import { n as normalizeImagePayload, l as copyWithFileTypeFallback } from './acorex-components-conversation-acorex-components-conversation-YhVa42TC.mjs';
+import { A as AXConversationMessageRendererStateComponent } from './acorex-components-conversation-message-renderer-state.component-Dp-JdHWr.mjs';
+import './acorex-components-conversation-renderer-shared.styles-Digah3Zn.mjs';
+
+class AXConversationImageRendererComponent extends AXConversationMessageRendererCopyHostComponent {
+    constructor() {
+        super(...arguments);
+        this.fileTypes = inject(AXFileTypeRegistryService);
+        this.message = input.required(...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+        this.rendererState = computed(() => ({
+            deliveryStatus: this.message().status,
+            contentState: 'ready',
+        }), ...(ngDevMode ? [{ debugName: "rendererState" }] : /* istanbul ignore next */ []));
+        this.payload = computed(() => normalizeImagePayload(this.message().payload), ...(ngDevMode ? [{ debugName: "payload" }] : /* istanbul ignore next */ []));
+        this.images = computed(() => this.payload().images, ...(ngDevMode ? [{ debugName: "images" }] : /* istanbul ignore next */ []));
+        this.caption = computed(() => this.payload().caption?.trim() || '', ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+        this.gridModeClass = computed(() => {
+            const n = this.images().length;
+            if (n <= 1)
+                return 'ax-conversation-msg__grid--single';
+            if (n === 2)
+                return 'ax-conversation-msg__grid--dual';
+            return 'ax-conversation-msg__grid--multi';
+        }, ...(ngDevMode ? [{ debugName: "gridModeClass" }] : /* istanbul ignore next */ []));
+    }
+    copy() {
+        return copyWithFileTypeFallback(this.message(), this.fileTypes, () => {
+            const p = this.payload();
+            return mediaCopyText(p.caption, 'Image', 'images', p.images.length, p.images.map((item) => item.url?.trim() || item.thumbnailUrl?.trim()));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXConversationImageRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXConversationImageRendererComponent, isStandalone: true, selector: "ax-conversation-image-renderer", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-conversation-msg ax-conversation-msg--flush">
+      <div class="ax-conversation-msg__grid" [class]="gridModeClass()">
+        @for (image of images(); track image.mediaId ?? image.url) {
+          <ax-conversation-image-attachment [item]="image" [alt]="caption() || 'Image'" />
+        }
+      </div>
+      @if (caption()) {
+        <p class="ax-conversation-msg__caption">{{ caption() }}</p>
+      }
+      <ax-conversation-message-renderer-state
+        [rendererState]="rendererState()"
+        [message]="message()"
+        contentErrorLabel="Couldn't load image"
+        contentErrorStyle="inline"
+        placement="below"
+      />
+    </div>
+  `, isInline: true, styles: [":host{display:block;max-width:100%}.ax-conversation-msg,.ax-conversation-msg__stack{display:flex;flex-direction:column;gap:.375rem}.ax-conversation-msg__grid{display:grid;gap:2px;width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-border-light-surface))}.ax-conversation-msg__grid--single{grid-template-columns:1fr}.ax-conversation-msg__grid--single ::ng-deep .ax-conversation-image-attachment{max-height:min(50dvh,20rem)}.ax-conversation-msg__grid--dual{grid-template-columns:repeat(2,1fr)}.ax-conversation-msg__grid--multi{grid-template-columns:repeat(3,1fr);grid-auto-rows:10rem}@container (max-width: 380px){.ax-conversation-msg__grid--multi{grid-template-columns:repeat(2,1fr);grid-auto-rows:10rem}}.ax-conversation-msg__caption{margin:0;padding:0 .125rem;font-size:.8125rem;line-height:1.4;word-break:break-word;opacity:.88}.ax-conversation-msg--flush{width:100%;max-width:100%;gap:0}.ax-conversation-msg--flush .ax-conversation-msg__caption{padding:.375rem .625rem 0}.ax-conversation-msg--flush .ax-conversation-msg__grid{border-radius:0;background:transparent}.ax-conversation-msg--flush .ax-conversation-msg__stack{gap:2px}.ax-conversation-msg--flush ::ng-deep .ax-conversation-video{border-radius:0}.ax-conversation-msg__card{border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXConversationImageAttachmentComponent, selector: "ax-conversation-image-attachment", inputs: ["item", "alt"] }, { kind: "component", type: AXConversationMessageRendererStateComponent, selector: "ax-conversation-message-renderer-state", inputs: ["rendererState", "message", "contentErrorLabel", "deliveryFailedLabel", "showContentErrorChrome", "contentErrorStyle", "contentErrorIconClass", "placement", "contentRetryEnabled"], outputs: ["contentRetry"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXConversationImageRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-conversation-image-renderer', imports: [CommonModule, AXConversationImageAttachmentComponent, AXConversationMessageRendererStateComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ax-conversation-msg ax-conversation-msg--flush">
+      <div class="ax-conversation-msg__grid" [class]="gridModeClass()">
+        @for (image of images(); track image.mediaId ?? image.url) {
+          <ax-conversation-image-attachment [item]="image" [alt]="caption() || 'Image'" />
+        }
+      </div>
+      @if (caption()) {
+        <p class="ax-conversation-msg__caption">{{ caption() }}</p>
+      }
+      <ax-conversation-message-renderer-state
+        [rendererState]="rendererState()"
+        [message]="message()"
+        contentErrorLabel="Couldn't load image"
+        contentErrorStyle="inline"
+        placement="below"
+      />
+    </div>
+  `, styles: [":host{display:block;max-width:100%}.ax-conversation-msg,.ax-conversation-msg__stack{display:flex;flex-direction:column;gap:.375rem}.ax-conversation-msg__grid{display:grid;gap:2px;width:100%;border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden;background:rgb(var(--ax-sys-color-border-light-surface))}.ax-conversation-msg__grid--single{grid-template-columns:1fr}.ax-conversation-msg__grid--single ::ng-deep .ax-conversation-image-attachment{max-height:min(50dvh,20rem)}.ax-conversation-msg__grid--dual{grid-template-columns:repeat(2,1fr)}.ax-conversation-msg__grid--multi{grid-template-columns:repeat(3,1fr);grid-auto-rows:10rem}@container (max-width: 380px){.ax-conversation-msg__grid--multi{grid-template-columns:repeat(2,1fr);grid-auto-rows:10rem}}.ax-conversation-msg__caption{margin:0;padding:0 .125rem;font-size:.8125rem;line-height:1.4;word-break:break-word;opacity:.88}.ax-conversation-msg--flush{width:100%;max-width:100%;gap:0}.ax-conversation-msg--flush .ax-conversation-msg__caption{padding:.375rem .625rem 0}.ax-conversation-msg--flush .ax-conversation-msg__grid{border-radius:0;background:transparent}.ax-conversation-msg--flush .ax-conversation-msg__stack{gap:2px}.ax-conversation-msg--flush ::ng-deep .ax-conversation-video{border-radius:0}.ax-conversation-msg__card{border-radius:var(--ax-sys-border-radius, .5rem);border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));overflow:hidden}\n"] }]
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }] } });
+
+export { AXConversationImageRendererComponent };
+//# sourceMappingURL=acorex-components-conversation-image-renderer.component-Cy0TA6cL.mjs.map

package/fesm2022/acorex-components-conversation-image-renderer.component-Cy0TA6cL.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-conversation-image-renderer.component-Cy0TA6cL.mjs","sources":["../../../../packages/components/conversation/src/lib/plugins/message-list/components/image-renderer/image-renderer.component.ts"],"sourcesContent":["import { AXFileTypeRegistryService } from '@acorex/core/file';\nimport { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport type { AXConversationImagePayload, AXConversationMessage } from '../../../../models';\nimport { AXConversationImageAttachmentComponent } from '../shared/image-attachment.component';\nimport {\n  AXConversationMessageRendererCopyHostComponent,\n  mediaCopyText,\n} from '../shared/message-renderer-copy-host.component';\nimport { copyWithFileTypeFallback } from '../../../../utils/file-type-message.resolve';\nimport { AXConversationMessageRendererStateComponent } from '../shared/message-renderer-state.component';\nimport { AX_CONVERSATION_RENDERER_SHARED_STYLES } from '../shared/renderer-shared.styles';\nimport { normalizeImagePayload } from './image.payload';\n\n@Component({\n  selector: 'ax-conversation-image-renderer',\n  imports: [CommonModule, AXConversationImageAttachmentComponent, AXConversationMessageRendererStateComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div class=\"ax-conversation-msg ax-conversation-msg--flush\">\n      <div class=\"ax-conversation-msg__grid\" [class]=\"gridModeClass()\">\n        @for (image of images(); track image.mediaId ?? image.url) {\n          <ax-conversation-image-attachment [item]=\"image\" [alt]=\"caption() || 'Image'\" />\n        }\n      </div>\n      @if (caption()) {\n        <p class=\"ax-conversation-msg__caption\">{{ caption() }}</p>\n      }\n      <ax-conversation-message-renderer-state\n        [rendererState]=\"rendererState()\"\n        [message]=\"message()\"\n        contentErrorLabel=\"Couldn't load image\"\n        contentErrorStyle=\"inline\"\n        placement=\"below\"\n      />\n    </div>\n  `,\n  styles: [AX_CONVERSATION_RENDERER_SHARED_STYLES],\n})\nexport class AXConversationImageRendererComponent extends AXConversationMessageRendererCopyHostComponent {\n  private readonly fileTypes = inject(AXFileTypeRegistryService);\n\n  readonly message = input.required<AXConversationMessage>();\n  readonly rendererState = computed(() => ({\n    deliveryStatus: this.message().status,\n    contentState: 'ready' as const,\n  }));\n\n  readonly payload = computed(() => normalizeImagePayload(this.message().payload as AXConversationImagePayload));\n  readonly images = computed(() => this.payload().images);\n  readonly caption = computed(() => this.payload().caption?.trim() || '');\n\n  copy(): Promise<string> {\n    return copyWithFileTypeFallback(this.message(), this.fileTypes, () => {\n      const p = this.payload();\n      return mediaCopyText(\n        p.caption,\n        'Image',\n        'images',\n        p.images.length,\n        p.images.map((item) => item.url?.trim() || item.thumbnailUrl?.trim()),\n      );\n    });\n  }\n\n  readonly gridModeClass = computed(() => {\n    const n = this.images().length;\n    if (n <= 1) return 'ax-conversation-msg__grid--single';\n    if (n === 2) return 'ax-conversation-msg__grid--dual';\n    return 'ax-conversation-msg__grid--multi';\n  });\n}\n"],"names":[],"mappings":"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"}