@acorex/components 20.8.32 → 20.9.0

package/fesm2022/acorex-components-conversation-image-attachment.component-BZto5LFo.mjs

@@ -0,0 +1,77 @@
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, PLATFORM_ID, input, signal, computed, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { w as toUploaderReference, x as createResolvedMediaUrlSignal, y as pickDisplayMediaUrl } from './acorex-components-conversation-acorex-components-conversation-CjVDCoJw.mjs';
+
+class AXConversationImageAttachmentComponent {
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this.document = inject(DOCUMENT);
+        this.item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+        this.alt = input('Image', ...(ngDevMode ? [{ debugName: "alt" }] : []));
+        this.ready = signal(false, ...(ngDevMode ? [{ debugName: "ready" }] : []));
+        this.mediaReference = computed(() => toUploaderReference(this.item()), ...(ngDevMode ? [{ debugName: "mediaReference" }] : []));
+        this.resolvedUrl = createResolvedMediaUrlSignal(this.mediaReference);
+        this.displayUrl = computed(() => pickDisplayMediaUrl(this.resolvedUrl(), this.item().thumbnailUrl, this.item().url), ...(ngDevMode ? [{ debugName: "displayUrl" }] : []));
+        effect(() => {
+            this.displayUrl();
+            this.item().mediaId;
+            untracked(() => this.ready.set(false));
+        });
+    }
+    onImageLoad() {
+        this.ready.set(true);
+    }
+    onImageError() {
+        this.ready.set(false);
+    }
+    toggleFullscreen(event) {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        const img = event.currentTarget.querySelector('img');
+        if (!(img instanceof HTMLImageElement) || !img.requestFullscreen) {
+            return;
+        }
+        if (this.document.fullscreenElement === img) {
+            void this.document.exitFullscreen();
+            return;
+        }
+        void img.requestFullscreen();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXConversationImageAttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXConversationImageAttachmentComponent, isStandalone: true, selector: "ax-conversation-image-attachment", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="ax-conversation-image-attachment"
+      [class.ax-conversation-image-attachment--ready]="ready()"
+      [class.ax-conversation-image-attachment--loading]="!displayUrl()"
+      (click)="toggleFullscreen($event)"
+      [attr.aria-label]="alt()"
+    >
+      @if (displayUrl(); as src) {
+        <img [src]="src" [alt]="alt()" loading="lazy" (load)="onImageLoad()" (error)="onImageError()" />
+      }
+    </button>
+  `, isInline: true, styles: [":host{display:block;min-width:0;min-height:0}.ax-conversation-image-attachment{display:block;width:100%;height:100%;min-height:4.5rem;padding:0;border-radius:.5rem;border:none;background:rgb(var(--ax-sys-color-light-surface));overflow:hidden}.ax-conversation-image-attachment--loading{background:rgba(var(--ax-sys-color-on-surface),.06)}.ax-conversation-image-attachment img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s ease}.ax-conversation-image-attachment img:fullscreen{width:100%;height:100%;object-fit:contain;background:#000}.ax-conversation-image-attachment--ready img{opacity:1}.ax-conversation-image-attachment:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXConversationImageAttachmentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-conversation-image-attachment', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <button
+      type="button"
+      class="ax-conversation-image-attachment"
+      [class.ax-conversation-image-attachment--ready]="ready()"
+      [class.ax-conversation-image-attachment--loading]="!displayUrl()"
+      (click)="toggleFullscreen($event)"
+      [attr.aria-label]="alt()"
+    >
+      @if (displayUrl(); as src) {
+        <img [src]="src" [alt]="alt()" loading="lazy" (load)="onImageLoad()" (error)="onImageError()" />
+      }
+    </button>
+  `, styles: [":host{display:block;min-width:0;min-height:0}.ax-conversation-image-attachment{display:block;width:100%;height:100%;min-height:4.5rem;padding:0;border-radius:.5rem;border:none;background:rgb(var(--ax-sys-color-light-surface));overflow:hidden}.ax-conversation-image-attachment--loading{background:rgba(var(--ax-sys-color-on-surface),.06)}.ax-conversation-image-attachment img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s ease}.ax-conversation-image-attachment img:fullscreen{width:100%;height:100%;object-fit:contain;background:#000}.ax-conversation-image-attachment--ready img{opacity:1}.ax-conversation-image-attachment:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:2px}\n"] }]
+        }], ctorParameters: () => [] });
+
+export { AXConversationImageAttachmentComponent as A };
+//# sourceMappingURL=acorex-components-conversation-image-attachment.component-BZto5LFo.mjs.map

package/fesm2022/acorex-components-conversation-image-attachment.component-BZto5LFo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-conversation-image-attachment.component-BZto5LFo.mjs","sources":["../tmp-esm2022/conversation/lib/plugins/message-list/components/shared/image-attachment.component.js"],"sourcesContent":["import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, PLATFORM_ID, computed, effect, inject, input, signal, untracked, } from '@angular/core';\nimport { pickDisplayMediaUrl } from '../../../composer/components/shared/persisted-media-url';\nimport { toUploaderReference } from './attachment-uploader-reference';\nimport { createResolvedMediaUrlSignal } from './media-url-resolve';\nimport * as i0 from \"@angular/core\";\nexport class AXConversationImageAttachmentComponent {\n    constructor() {\n        this.platformId = inject(PLATFORM_ID);\n        this.document = inject(DOCUMENT);\n        this.item = input.required(...(ngDevMode ? [{ debugName: \"item\" }] : []));\n        this.alt = input('Image', ...(ngDevMode ? [{ debugName: \"alt\" }] : []));\n        this.ready = signal(false, ...(ngDevMode ? [{ debugName: \"ready\" }] : []));\n        this.mediaReference = computed(() => toUploaderReference(this.item()), ...(ngDevMode ? [{ debugName: \"mediaReference\" }] : []));\n        this.resolvedUrl = createResolvedMediaUrlSignal(this.mediaReference);\n        this.displayUrl = computed(() => pickDisplayMediaUrl(this.resolvedUrl(), this.item().thumbnailUrl, this.item().url), ...(ngDevMode ? [{ debugName: \"displayUrl\" }] : []));\n        effect(() => {\n            this.displayUrl();\n            this.item().mediaId;\n            untracked(() => this.ready.set(false));\n        });\n    }\n    onImageLoad() {\n        this.ready.set(true);\n    }\n    onImageError() {\n        this.ready.set(false);\n    }\n    toggleFullscreen(event) {\n        if (!isPlatformBrowser(this.platformId)) {\n            return;\n        }\n        const img = event.currentTarget.querySelector('img');\n        if (!(img instanceof HTMLImageElement) || !img.requestFullscreen) {\n            return;\n        }\n        if (this.document.fullscreenElement === img) {\n            void this.document.exitFullscreen();\n            return;\n        }\n        void img.requestFullscreen();\n    }\n    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.3.3\", ngImport: i0, type: AXConversationImageAttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }\n    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"17.0.0\", version: \"20.3.3\", type: AXConversationImageAttachmentComponent, isStandalone: true, selector: \"ax-conversation-image-attachment\", inputs: { item: { classPropertyName: \"item\", publicName: \"item\", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: \"alt\", publicName: \"alt\", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `\n    <button\n      type=\"button\"\n      class=\"ax-conversation-image-attachment\"\n      [class.ax-conversation-image-attachment--ready]=\"ready()\"\n      [class.ax-conversation-image-attachment--loading]=\"!displayUrl()\"\n      (click)=\"toggleFullscreen($event)\"\n      [attr.aria-label]=\"alt()\"\n    >\n      @if (displayUrl(); as src) {\n        <img [src]=\"src\" [alt]=\"alt()\" loading=\"lazy\" (load)=\"onImageLoad()\" (error)=\"onImageError()\" />\n      }\n    </button>\n  `, isInline: true, styles: [\":host{display:block;min-width:0;min-height:0}.ax-conversation-image-attachment{display:block;width:100%;height:100%;min-height:4.5rem;padding:0;border-radius:.5rem;border:none;background:rgb(var(--ax-sys-color-light-surface));overflow:hidden}.ax-conversation-image-attachment--loading{background:rgba(var(--ax-sys-color-on-surface),.06)}.ax-conversation-image-attachment img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s ease}.ax-conversation-image-attachment img:fullscreen{width:100%;height:100%;object-fit:contain;background:#000}.ax-conversation-image-attachment--ready img{opacity:1}.ax-conversation-image-attachment:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:2px}\\n\"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.3.3\", ngImport: i0, type: AXConversationImageAttachmentComponent, decorators: [{\n            type: Component,\n            args: [{ selector: 'ax-conversation-image-attachment', changeDetection: ChangeDetectionStrategy.OnPush, template: `\n    <button\n      type=\"button\"\n      class=\"ax-conversation-image-attachment\"\n      [class.ax-conversation-image-attachment--ready]=\"ready()\"\n      [class.ax-conversation-image-attachment--loading]=\"!displayUrl()\"\n      (click)=\"toggleFullscreen($event)\"\n      [attr.aria-label]=\"alt()\"\n    >\n      @if (displayUrl(); as src) {\n        <img [src]=\"src\" [alt]=\"alt()\" loading=\"lazy\" (load)=\"onImageLoad()\" (error)=\"onImageError()\" />\n      }\n    </button>\n  `, styles: [\":host{display:block;min-width:0;min-height:0}.ax-conversation-image-attachment{display:block;width:100%;height:100%;min-height:4.5rem;padding:0;border-radius:.5rem;border:none;background:rgb(var(--ax-sys-color-light-surface));overflow:hidden}.ax-conversation-image-attachment--loading{background:rgba(var(--ax-sys-color-on-surface),.06)}.ax-conversation-image-attachment img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s ease}.ax-conversation-image-attachment img:fullscreen{width:100%;height:100%;object-fit:contain;background:#000}.ax-conversation-image-attachment--ready img{opacity:1}.ax-conversation-image-attachment:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:2px}\\n\"] }]\n        }], ctorParameters: () => [] });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2UtYXR0YWNobWVudC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9jb21wb25lbnRzL2NvbnZlcnNhdGlvbi9zcmMvbGliL3BsdWdpbnMvbWVzc2FnZS1saXN0L2NvbXBvbmVudHMvc2hhcmVkL2ltYWdlLWF0dGFjaG1lbnQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUM5RCxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxXQUFXLEVBQ1gsUUFBUSxFQUNSLE1BQU0sRUFDTixNQUFNLEVBQ04sS0FBSyxFQUNMLE1BQU0sRUFDTixTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0seURBQXlELENBQUM7QUFDOUYsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDdEUsT0FBTyxFQUFFLDRCQUE0QixFQUFFLE1BQU0scUJBQXFCLENBQUM7O0FBcUVuRSxNQUFNLE9BQU8sc0NBQXNDO0lBZ0JqRDtRQWZpQixlQUFVLEdBQUcsTUFBTSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQ2pDLGFBQVEsR0FBRyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUM7UUFFcEMsU0FBSSxHQUFHLEtBQUssQ0FBQyxRQUFRLCtDQUFnQyxDQUFDO1FBQ3RELFFBQUcsR0FBRyxLQUFLLENBQUMsT0FBTywrQ0FBQyxDQUFDO1FBRXJCLFVBQUssR0FBRyxNQUFNLENBQUMsS0FBSyxpREFBQyxDQUFDO1FBRWQsbUJBQWMsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDLDBEQUFDLENBQUM7UUFDbEUsZ0JBQVcsR0FBRyw0QkFBNEIsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7UUFFeEUsZUFBVSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FDbEMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxFQUFFLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxZQUFZLEVBQUUsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDLEdBQUcsQ0FBQyxzREFDbkYsQ0FBQztRQUdBLE1BQU0sQ0FBQyxHQUFHLEVBQUU7WUFDVixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7WUFDbEIsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDLE9BQU8sQ0FBQztZQUNwQixTQUFTLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztRQUN6QyxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDdkIsQ0FBQztJQUVELFlBQVk7UUFDVixJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN4QixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsS0FBaUI7UUFDaEMsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsRUFBRSxDQUFDO1lBQ3hDLE9BQU87UUFDVCxDQUFDO1FBQ0QsTUFBTSxHQUFHLEdBQUksS0FBSyxDQUFDLGFBQTZCLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3RFLElBQUksQ0FBQyxDQUFDLEdBQUcsWUFBWSxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLGlCQUFpQixFQUFFLENBQUM7WUFDakUsT0FBTztRQUNULENBQUM7UUFDRCxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsaUJBQWlCLEtBQUssR0FBRyxFQUFFLENBQUM7WUFDNUMsS0FBSyxJQUFJLENBQUMsUUFBUSxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3BDLE9BQU87UUFDVCxDQUFDO1FBQ0QsS0FBSyxHQUFHLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztJQUMvQixDQUFDOzhHQTdDVSxzQ0FBc0M7a0dBQXRDLHNDQUFzQyw4VUFoRXZDOzs7Ozs7Ozs7Ozs7O0dBYVQ7OzJGQW1EVSxzQ0FBc0M7a0JBbkVsRCxTQUFTOytCQUNFLGtDQUFrQyxtQkFDM0IsdUJBQXVCLENBQUMsTUFBTSxZQUNyQzs7Ozs7Ozs7Ozs7OztHQWFUIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRE9DVU1FTlQsIGlzUGxhdGZvcm1Ccm93c2VyIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIFBMQVRGT1JNX0lELFxuICBjb21wdXRlZCxcbiAgZWZmZWN0LFxuICBpbmplY3QsXG4gIGlucHV0LFxuICBzaWduYWwsXG4gIHVudHJhY2tlZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgdHlwZSB7IEFYQ29udmVyc2F0aW9uSW1hZ2VNZWRpYUl0ZW0gfSBmcm9tICcuLi8uLi8uLi8uLi9tb2RlbHMnO1xuaW1wb3J0IHsgcGlja0Rpc3BsYXlNZWRpYVVybCB9IGZyb20gJy4uLy4uLy4uL2NvbXBvc2VyL2NvbXBvbmVudHMvc2hhcmVkL3BlcnNpc3RlZC1tZWRpYS11cmwnO1xuaW1wb3J0IHsgdG9VcGxvYWRlclJlZmVyZW5jZSB9IGZyb20gJy4vYXR0YWNobWVudC11cGxvYWRlci1yZWZlcmVuY2UnO1xuaW1wb3J0IHsgY3JlYXRlUmVzb2x2ZWRNZWRpYVVybFNpZ25hbCB9IGZyb20gJy4vbWVkaWEtdXJsLXJlc29sdmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdheC1jb252ZXJzYXRpb24taW1hZ2UtYXR0YWNobWVudCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxidXR0b25cbiAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgY2xhc3M9XCJheC1jb252ZXJzYXRpb24taW1hZ2UtYXR0YWNobWVudFwiXG4gICAgICBbY2xhc3MuYXgtY29udmVyc2F0aW9uLWltYWdlLWF0dGFjaG1lbnQtLXJlYWR5XT1cInJlYWR5KClcIlxuICAgICAgW2NsYXNzLmF4LWNvbnZlcnNhdGlvbi1pbWFnZS1hdHRhY2htZW50LS1sb2FkaW5nXT1cIiFkaXNwbGF5VXJsKClcIlxuICAgICAgKGNsaWNrKT1cInRvZ2dsZUZ1bGxzY3JlZW4oJGV2ZW50KVwiXG4gICAgICBbYXR0ci5hcmlhLWxhYmVsXT1cImFsdCgpXCJcbiAgICA+XG4gICAgICBAaWYgKGRpc3BsYXlVcmwoKTsgYXMgc3JjKSB7XG4gICAgICAgIDxpbWcgW3NyY109XCJzcmNcIiBbYWx0XT1cImFsdCgpXCIgbG9hZGluZz1cImxhenlcIiAobG9hZCk9XCJvbkltYWdlTG9hZCgpXCIgKGVycm9yKT1cIm9uSW1hZ2VFcnJvcigpXCIgLz5cbiAgICAgIH1cbiAgICA8L2J1dHRvbj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgICAgOmhvc3Qge1xuICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgbWluLXdpZHRoOiAwO1xuICAgICAgICBtaW4taGVpZ2h0OiAwO1xuICAgICAgfVxuXG4gICAgICAuYXgtY29udmVyc2F0aW9uLWltYWdlLWF0dGFjaG1lbnQge1xuICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgICAgbWluLWhlaWdodDogNC41cmVtO1xuICAgICAgICBwYWRkaW5nOiAwO1xuICAgICAgICBib3JkZXItcmFkaXVzOiAwLjVyZW07XG4gICAgICAgIGJvcmRlcjogbm9uZTtcbiAgICAgICAgYmFja2dyb3VuZDogcmdiKHZhcigtLWF4LXN5cy1jb2xvci1saWdodC1zdXJmYWNlKSk7XG4gICAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICB9XG5cbiAgICAgIC5heC1jb252ZXJzYXRpb24taW1hZ2UtYXR0YWNobWVudC0tbG9hZGluZyB7XG4gICAgICAgIGJhY2tncm91bmQ6IHJnYmEodmFyKC0tYXgtc3lzLWNvbG9yLW9uLXN1cmZhY2UpLCAwLjA2KTtcbiAgICAgIH1cblxuICAgICAgLmF4LWNvbnZlcnNhdGlvbi1pbWFnZS1hdHRhY2htZW50IGltZyB7XG4gICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICAgIG9iamVjdC1maXQ6IGNvdmVyO1xuICAgICAgICBvcGFjaXR5OiAwO1xuICAgICAgICB0cmFuc2l0aW9uOiBvcGFjaXR5IDAuMTVzIGVhc2U7XG4gICAgICB9XG5cbiAgICAgIC5heC1jb252ZXJzYXRpb24taW1hZ2UtYXR0YWNobWVudCBpbWc6ZnVsbHNjcmVlbiB7XG4gICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICAgIG9iamVjdC1maXQ6IGNvbnRhaW47XG4gICAgICAgIGJhY2tncm91bmQ6ICMwMDA7XG4gICAgICB9XG5cbiAgICAgIC5heC1jb252ZXJzYXRpb24taW1hZ2UtYXR0YWNobWVudC0tcmVhZHkgaW1nIHtcbiAgICAgICAgb3BhY2l0eTogMTtcbiAgICAgIH1cblxuICAgICAgLmF4LWNvbnZlcnNhdGlvbi1pbWFnZS1hdHRhY2htZW50OmZvY3VzLXZpc2libGUge1xuICAgICAgICBvdXRsaW5lOiAycHggc29saWQgcmdiKHZhcigtLWF4LXN5cy1jb2xvci1wcmltYXJ5LTUwMCkpO1xuICAgICAgICBvdXRsaW5lLW9mZnNldDogMnB4O1xuICAgICAgfVxuICAgIGAsXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIEFYQ29udmVyc2F0aW9uSW1hZ2VBdHRhY2htZW50Q29tcG9uZW50IHtcbiAgcHJpdmF0ZSByZWFkb25seSBwbGF0Zm9ybUlkID0gaW5qZWN0KFBMQVRGT1JNX0lEKTtcbiAgcHJpdmF0ZSByZWFkb25seSBkb2N1bWVudCA9IGluamVjdChET0NVTUVOVCk7XG5cbiAgcmVhZG9ubHkgaXRlbSA9IGlucHV0LnJlcXVpcmVkPEFYQ29udmVyc2F0aW9uSW1hZ2VNZWRpYUl0ZW0+KCk7XG4gIHJlYWRvbmx5IGFsdCA9IGlucHV0KCdJbWFnZScpO1xuXG4gIHJlYWRvbmx5IHJlYWR5ID0gc2lnbmFsKGZhbHNlKTtcblxuICBwcml2YXRlIHJlYWRvbmx5IG1lZGlhUmVmZXJlbmNlID0gY29tcHV0ZWQoKCkgPT4gdG9VcGxvYWRlclJlZmVyZW5jZSh0aGlzLml0ZW0oKSkpO1xuICBwcml2YXRlIHJlYWRvbmx5IHJlc29sdmVkVXJsID0gY3JlYXRlUmVzb2x2ZWRNZWRpYVVybFNpZ25hbCh0aGlzLm1lZGlhUmVmZXJlbmNlKTtcblxuICByZWFkb25seSBkaXNwbGF5VXJsID0gY29tcHV0ZWQoKCkgPT5cbiAgICBwaWNrRGlzcGxheU1lZGlhVXJsKHRoaXMucmVzb2x2ZWRVcmwoKSwgdGhpcy5pdGVtKCkudGh1bWJuYWlsVXJsLCB0aGlzLml0ZW0oKS51cmwpLFxuICApO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIGVmZmVjdCgoKSA9PiB7XG4gICAgICB0aGlzLmRpc3BsYXlVcmwoKTtcbiAgICAgIHRoaXMuaXRlbSgpLm1lZGlhSWQ7XG4gICAgICB1bnRyYWNrZWQoKCkgPT4gdGhpcy5yZWFkeS5zZXQoZmFsc2UpKTtcbiAgICB9KTtcbiAgfVxuXG4gIG9uSW1hZ2VMb2FkKCk6IHZvaWQge1xuICAgIHRoaXMucmVhZHkuc2V0KHRydWUpO1xuICB9XG5cbiAgb25JbWFnZUVycm9yKCk6IHZvaWQge1xuICAgIHRoaXMucmVhZHkuc2V0KGZhbHNlKTtcbiAgfVxuXG4gIHRvZ2dsZUZ1bGxzY3JlZW4oZXZlbnQ6IE1vdXNlRXZlbnQpOiB2b2lkIHtcbiAgICBpZiAoIWlzUGxhdGZvcm1Ccm93c2VyKHRoaXMucGxhdGZvcm1JZCkpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgY29uc3QgaW1nID0gKGV2ZW50LmN1cnJlbnRUYXJnZXQgYXMgSFRNTEVsZW1lbnQpLnF1ZXJ5U2VsZWN0b3IoJ2ltZycpO1xuICAgIGlmICghKGltZyBpbnN0YW5jZW9mIEhUTUxJbWFnZUVsZW1lbnQpIHx8ICFpbWcucmVxdWVzdEZ1bGxzY3JlZW4pIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgaWYgKHRoaXMuZG9jdW1lbnQuZnVsbHNjcmVlbkVsZW1lbnQgPT09IGltZykge1xuICAgICAgdm9pZCB0aGlzLmRvY3VtZW50LmV4aXRGdWxsc2NyZWVuKCk7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHZvaWQgaW1nLnJlcXVlc3RGdWxsc2NyZWVuKCk7XG4gIH1cbn1cbiJdfQ=="],"names":[],"mappings":";;;;;AAMO,MAAM,sCAAsC,CAAC;AACpD,IAAI,WAAW,GAAG;AAClB,QAAQ,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC;AAC7C,QAAQ,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AACxC,QAAQ,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,SAAS,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;AACjF,QAAQ,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,OAAO,EAAE,IAAI,SAAS,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;AAC/E,QAAQ,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,EAAE,IAAI,SAAS,GAAG,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;AAClF,QAAQ,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,MAAM,mBAAmB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,SAAS,GAAG,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;AACvI,QAAQ,IAAI,CAAC,WAAW,GAAG,4BAA4B,CAAC,IAAI,CAAC,cAAc,CAAC;AAC5E,QAAQ,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,MAAM,mBAAmB,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,EAAE,IAAI,SAAS,GAAG,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;AACjL,QAAQ,MAAM,CAAC,MAAM;AACrB,YAAY,IAAI,CAAC,UAAU,EAAE;AAC7B,YAAY,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO;AAC/B,YAAY,SAAS,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AAClD,QAAQ,CAAC,CAAC;AACV,IAAI;AACJ,IAAI,WAAW,GAAG;AAClB,QAAQ,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AAC5B,IAAI;AACJ,IAAI,YAAY,GAAG;AACnB,QAAQ,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;AAC7B,IAAI;AACJ,IAAI,gBAAgB,CAAC,KAAK,EAAE;AAC5B,QAAQ,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;AACjD,YAAY;AACZ,QAAQ;AACR,QAAQ,MAAM,GAAG,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC;AAC5D,QAAQ,IAAI,EAAE,GAAG,YAAY,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE;AAC1E,YAAY;AACZ,QAAQ;AACR,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,iBAAiB,KAAK,GAAG,EAAE;AACrD,YAAY,KAAK,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE;AAC/C,YAAY;AACZ,QAAQ;AACR,QAAQ,KAAK,GAAG,CAAC,iBAAiB,EAAE;AACpC,IAAI;AACJ,IAAI,SAAS,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,kBAAkB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,sCAAsC,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,EAAE,CAAC,CAAC;AACxM,IAAI,SAAS,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,oBAAoB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,sCAAsC,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,kCAAkC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,iBAAiB,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,iBAAiB,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE;AACtd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,suBAAsuB,CAAC,EAAE,eAAe,EAAE,EAAE,CAAC,uBAAuB,CAAC,MAAM,EAAE,CAAC,CAAC;AAC7zB;AACA,EAAE,CAAC,wBAAwB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,sCAAsC,EAAE,UAAU,EAAE,CAAC;AAChJ,YAAY,IAAI,EAAE,SAAS;AAC3B,YAAY,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,kCAAkC,EAAE,eAAe,EAAE,uBAAuB,CAAC,MAAM,EAAE,QAAQ,EAAE;AAC9H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,suBAAsuB,CAAC,EAAE;AACvvB,SAAS,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,CAAC;;;;"}

package/fesm2022/acorex-components-conversation-image-picker.component-G9EEOyDg.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-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, 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-Bd_SkwR0.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" }] : []));
+        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" }] : []));
+        this.maxFiles = input(10, ...(ngDevMode ? [{ debugName: "maxFiles" }] : []));
+        this.initialFiles = input([], ...(ngDevMode ? [{ debugName: "initialFiles" }] : []));
+        this.__popup__ = input(...(ngDevMode ? [undefined, { debugName: "__popup__" }] : []));
+        this.images = signal([], ...(ngDevMode ? [{ debugName: "images" }] : []));
+        this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+        this.emptyIconClass = computed(() => this.isDragging() ? 'fa-light fa-cloud-arrow-up' : AX_CONVERSATION_IMAGE_PRESENTATION.icon, ...(ngDevMode ? [{ debugName: "emptyIconClass" }] : []));
+        this.caption = '';
+        this.allowMultiple = computed(() => this.maxFiles() > 1, ...(ngDevMode ? [{ debugName: "allowMultiple" }] : []));
+        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: "20.3.3", ngImport: i0, type: AXConversationImagePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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;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: 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;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 { AXConversationImagePickerComponent };
+//# sourceMappingURL=acorex-components-conversation-image-picker.component-G9EEOyDg.mjs.map