@acorex/components 20.8.32 → 20.9.0

package/fesm2022/acorex-components-conversation-picker-toolbar.component-CpyS0j6P.mjs

@@ -0,0 +1,537 @@
+import * as i1 from '@acorex/components/text-box';
+import { AXTextBoxModule } from '@acorex/components/text-box';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import * as i0 from '@angular/core';
+import { inject, model, ChangeDetectionStrategy, Component, ElementRef, input, output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { AXUploaderBrowseDirective, AXUploaderZoneDirective } from '@acorex/cdk/uploader';
+import { AXToastService } from '@acorex/components/toast';
+import { n as notifyPickerValidationErrors } from './acorex-components-conversation-picker-upload-C-PlKPaU.mjs';
+import { AXButtonComponent } from '@acorex/components/button';
+import * as i1$1 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+
+/** Optional caption field shared by composer media pickers. */
+class AXConversationPickerCaptionComponent {
+    constructor() {
+        this.translation = inject(AXTranslationService);
+        this.caption = model('', ...(ngDevMode ? [{ debugName: "caption" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXConversationPickerCaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXConversationPickerCaptionComponent, isStandalone: true, selector: "ax-conversation-picker-caption", inputs: { caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { caption: "captionChange" }, ngImport: i0, template: `
+    <div class="ax-conversation-picker__caption-slot">
+      <ax-text-box
+        [(value)]="caption"
+        [placeholder]="translation.translateSync('@acorex:chat.pickers.common.caption-optional')"
+      />
+    </div>
+  `, isInline: true, styles: [":host{display:block;flex-shrink:0;width:100%}.ax-conversation-picker__caption-slot{padding:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXConversationPickerCaptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-conversation-picker-caption', imports: [AXTextBoxModule, AXTranslationModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ax-conversation-picker__caption-slot">
+      <ax-text-box
+        [(value)]="caption"
+        [placeholder]="translation.translateSync('@acorex:chat.pickers.common.caption-optional')"
+      />
+    </div>
+  `, styles: [":host{display:block;flex-shrink:0;width:100%}.ax-conversation-picker__caption-slot{padding:.5rem}\n"] }]
+        }] });
+
+/**
+ * Shell flex + max-height (on {@link AXConversationPickerShellComponent}).
+ * Styles here target projected content inside the shell.
+ */
+const AX_CONVERSATION_PICKER_SHELL_STYLES = `
+  :host {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    min-height: 0;
+    container-type: inline-size;
+    container-name: picker;
+  }
+
+  .ax-conversation-picker {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 100%;
+    max-height: min(32rem, 85dvh);
+    background: rgb(var(--ax-sys-color-lightest-surface));
+    border-radius: var(--ax-sys-border-radius, 0.5rem);
+    overflow: hidden;
+  }
+
+  .ax-conversation-picker__content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  @container picker (max-width: 480px) {
+    .ax-conversation-picker {
+      max-height: min(28rem, 90dvh);
+      border-radius: 0;
+    }
+  }
+`;
+/**
+ * Shared layout and surface styles for composer media pickers.
+ * Uses ACoreX system color tokens only.
+ */
+const AX_CONVERSATION_PICKER_SHARED_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: 0.375rem;
+    min-height: 8.5rem;
+    margin: 0.75rem;
+    padding: 1rem 0.75rem;
+    border: 1px dashed rgb(var(--ax-sys-color-border-surface));
+    border-radius: var(--ax-sys-border-radius, 0.5rem);
+    cursor: pointer;
+    transition: border-color 0.15s ease, background-color 0.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), 0.06);
+  }
+
+  .ax-conversation-picker__empty-icon {
+    font-size: 1.75rem;
+    line-height: 1;
+    color: rgba(var(--ax-sys-color-on-surface), 0.55);
+  }
+
+  .ax-conversation-picker__empty-title {
+    margin: 0;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: rgb(var(--ax-sys-color-on-surface));
+  }
+
+  .ax-conversation-picker__empty-hint {
+    margin: 0;
+    font-size: 0.75rem;
+    color: rgba(var(--ax-sys-color-on-surface), 0.6);
+  }
+
+  .ax-conversation-picker__body {
+    padding: 0 0.75rem 0.75rem;
+  }
+
+  .ax-conversation-picker__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding-top: 0.5rem;
+  }
+
+  .ax-conversation-picker__row {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    padding: 0.5rem 0.625rem;
+    border: 1px solid rgb(var(--ax-sys-color-border-light-surface));
+    border-radius: var(--ax-sys-border-radius, 0.375rem);
+    background: rgb(var(--ax-sys-color-surface));
+    transition: background-color 0.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, 0.375rem);
+    background: rgba(var(--ax-sys-color-primary-500), 0.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: rgb(0 0 0 / 0.32);
+    color: rgb(var(--ax-sys-color-light));
+    font-size: 0.625rem;
+    pointer-events: none;
+  }
+
+  .ax-conversation-picker__details {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .ax-conversation-picker__name {
+    font-size: 0.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: 0.375rem;
+    font-size: 0.6875rem;
+    color: rgba(var(--ax-sys-color-on-surface), 0.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: 0.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, 0.25rem);
+    background: transparent;
+    color: rgba(var(--ax-sys-color-on-surface), 0.55);
+    font-size: 1rem;
+    cursor: pointer;
+    touch-action: manipulation;
+    transition: background-color 0.15s ease, color 0.15s ease;
+  }
+
+  .ax-conversation-picker__remove:hover,
+  .ax-conversation-picker__remove:focus-visible {
+    background: rgba(var(--ax-sys-color-danger-500), 0.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: 0.5rem;
+  }
+
+  .ax-conversation-picker__tile {
+    position: relative;
+    aspect-ratio: 1;
+    border-radius: var(--ax-sys-border-radius, 0.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: 0.25rem;
+    inset-inline-end: 0.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: 0.6875rem;
+    cursor: pointer;
+    touch-action: manipulation;
+    box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
+  }
+
+  .ax-conversation-picker__tile-overlay {
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    padding: 0.25rem;
+    background: linear-gradient(transparent, rgb(0 0 0 / 0.55));
+  }
+
+  .ax-conversation-picker__tile-status {
+    font-size: 0.625rem;
+    color: rgb(var(--ax-sys-color-light));
+    line-height: 1.2;
+  }
+
+  .ax-conversation-picker__caption-slot {
+    flex-shrink: 0;
+    padding: 0.5rem 0.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: 0.375rem;
+    }
+
+    .ax-conversation-picker__row {
+      padding: 0.4375rem 0.5rem;
+      gap: 0.5rem;
+    }
+
+    .ax-conversation-picker__thumb {
+      width: 2.25rem;
+      height: 2.25rem;
+    }
+
+    .ax-conversation-picker__empty {
+      min-height: 7.5rem;
+      margin: 0.5rem;
+    }
+
+    .ax-conversation-picker__body {
+      padding-inline: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+  }
+`;
+
+class AXConversationPickerEmptyComponent {
+    constructor() {
+        this.host = inject((ElementRef));
+        this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.hint = input.required(...(ngDevMode ? [{ debugName: "hint" }] : []));
+        this.iconClass = input.required(...(ngDevMode ? [{ debugName: "iconClass" }] : []));
+        this.dragOver = input(false, ...(ngDevMode ? [{ debugName: "dragOver" }] : []));
+    }
+    onKeyboardActivate(event) {
+        event.preventDefault();
+        this.host.nativeElement.click();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXConversationPickerEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXConversationPickerEmptyComponent, isStandalone: true, selector: "ax-conversation-picker-empty", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: true, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: true, transformFunction: null }, dragOver: { classPropertyName: "dragOver", publicName: "dragOver", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="ax-conversation-picker__empty"
+      [class.ax-conversation-picker__empty--drag]="dragOver()"
+      role="button"
+      tabindex="0"
+      axUploaderBrowseHandle
+      (keydown.enter)="onKeyboardActivate($event)"
+      (keydown.space)="onKeyboardActivate($event)"
+    >
+      <i class="ax-conversation-picker__empty-icon" [class]="iconClass()"></i>
+      <p class="ax-conversation-picker__empty-title">{{ title() }}</p>
+      <p class="ax-conversation-picker__empty-hint">{{ hint() }}</p>
+    </div>
+  `, 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: "directive", type: AXUploaderBrowseDirective, selector: "[axUploaderBrowseHandle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXConversationPickerEmptyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-conversation-picker-empty', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXUploaderBrowseDirective], template: `
+    <div
+      class="ax-conversation-picker__empty"
+      [class.ax-conversation-picker__empty--drag]="dragOver()"
+      role="button"
+      tabindex="0"
+      axUploaderBrowseHandle
+      (keydown.enter)="onKeyboardActivate($event)"
+      (keydown.space)="onKeyboardActivate($event)"
+    >
+      <i class="ax-conversation-picker__empty-icon" [class]="iconClass()"></i>
+      <p class="ax-conversation-picker__empty-title">{{ title() }}</p>
+      <p class="ax-conversation-picker__empty-hint">{{ hint() }}</p>
+    </div>
+  `, 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"] }]
+        }] });
+
+/**
+ * Wraps composer pickers with {@link AXUploaderZoneDirective} for browse, drop, and validation.
+ */
+class AXConversationPickerShellComponent {
+    constructor() {
+        this.toast = inject(AXToastService);
+        this.translation = inject(AXTranslationService);
+        this.fileType = input.required(...(ngDevMode ? [{ debugName: "fileType" }] : []));
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+        this.filesSelected = output();
+        this.dragEnter = output();
+        this.dragLeave = output();
+        this.dragOver = output();
+    }
+    onZoneFileChange(event) {
+        if (event.rejected?.length) {
+            notifyPickerValidationErrors(this.toast, this.translation, event.rejected);
+        }
+        if (event.files.length > 0) {
+            this.filesSelected.emit(event.files);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXConversationPickerShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXConversationPickerShellComponent, isStandalone: true, selector: "ax-conversation-picker-shell", inputs: { fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesSelected: "filesSelected", dragEnter: "dragEnter", dragLeave: "dragLeave", dragOver: "dragOver" }, ngImport: i0, template: `
+    <div
+      class="ax-conversation-picker"
+      axUploaderZone
+      [fileType]="fileType()"
+      [multiple]="multiple()"
+      [disableBrowse]="true"
+      (fileChange)="onZoneFileChange($event)"
+      (dragEnter)="dragEnter.emit($event)"
+      (dragLeave)="dragLeave.emit($event)"
+      (dragOver)="dragOver.emit($event)"
+    >
+      <div class="ax-conversation-picker__content">
+        <ng-content />
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;max-width:100%;min-height:0;container-type:inline-size;container-name:picker}.ax-conversation-picker{display:flex;flex-direction:column;width:100%;max-width:100%;max-height:min(32rem,85dvh);background:rgb(var(--ax-sys-color-lightest-surface));border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden}.ax-conversation-picker__content{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden}@container picker (max-width: 480px){.ax-conversation-picker{max-height:min(28rem,90dvh);border-radius:0}}\n"], dependencies: [{ kind: "directive", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept", "fileType", "overlayTemplate", "disableBrowse", "disableDragDrop"], outputs: ["fileChange", "onChanged", "dragEnter", "dragLeave", "dragOver", "onFileUploadComplete", "onFilesUploadComplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXConversationPickerShellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-conversation-picker-shell', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXUploaderZoneDirective], template: `
+    <div
+      class="ax-conversation-picker"
+      axUploaderZone
+      [fileType]="fileType()"
+      [multiple]="multiple()"
+      [disableBrowse]="true"
+      (fileChange)="onZoneFileChange($event)"
+      (dragEnter)="dragEnter.emit($event)"
+      (dragLeave)="dragLeave.emit($event)"
+      (dragOver)="dragOver.emit($event)"
+    >
+      <div class="ax-conversation-picker__content">
+        <ng-content />
+      </div>
+    </div>
+  `, styles: [":host{display:block;width:100%;max-width:100%;min-height:0;container-type:inline-size;container-name:picker}.ax-conversation-picker{display:flex;flex-direction:column;width:100%;max-width:100%;max-height:min(32rem,85dvh);background:rgb(var(--ax-sys-color-lightest-surface));border-radius:var(--ax-sys-border-radius, .5rem);overflow:hidden}.ax-conversation-picker__content{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden}@container picker (max-width: 480px){.ax-conversation-picker{max-height:min(28rem,90dvh);border-radius:0}}\n"] }]
+        }] });
+
+const AX_CONVERSATION_PICKER_TOOLBAR_STYLES = `
+  :host {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    flex-shrink: 0;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    box-sizing: border-box;
+    width: calc(100% + 1.5rem);
+    margin-inline: -0.75rem;
+    padding: 0.375rem 0.75rem 0.5rem;
+    background: rgb(var(--ax-sys-color-lightest-surface));
+    border-bottom: 1px solid rgb(var(--ax-sys-color-border-light-surface));
+  }
+
+  .ax-conversation-picker__count {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: rgba(var(--ax-sys-color-on-surface), 0.65);
+  }
+
+  @container picker (max-width: 480px) {
+    :host {
+      width: calc(100% + 1rem);
+      margin-inline: -0.5rem;
+      padding-inline: 0.5rem;
+    }
+  }
+`;
+class AXConversationPickerToolbarComponent {
+    constructor() {
+        this.countLabel = input.required(...(ngDevMode ? [{ debugName: "countLabel" }] : []));
+        this.addMoreLabel = input.required(...(ngDevMode ? [{ debugName: "addMoreLabel" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXConversationPickerToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXConversationPickerToolbarComponent, isStandalone: true, selector: "ax-conversation-picker-toolbar", inputs: { countLabel: { classPropertyName: "countLabel", publicName: "countLabel", isSignal: true, isRequired: true, transformFunction: null }, addMoreLabel: { classPropertyName: "addMoreLabel", publicName: "addMoreLabel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <span class="ax-conversation-picker__count">{{ countLabel() }}</span>
+    <ax-button [text]="addMoreLabel()" [look]="'ghost'" axUploaderBrowseHandle>
+      <ax-prefix>
+        <ax-icon><i class="fa-light fa-plus"></i></ax-icon>
+      </ax-prefix>
+    </ax-button>
+  `, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-shrink:0;position:sticky;top:0;z-index:10;box-sizing:border-box;width:calc(100% + 1.5rem);margin-inline:-.75rem;padding:.375rem .75rem .5rem;background:rgb(var(--ax-sys-color-lightest-surface));border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.ax-conversation-picker__count{font-size:.75rem;font-weight:500;color:rgba(var(--ax-sys-color-on-surface),.65)}@container picker (max-width: 480px){:host{width:calc(100% + 1rem);margin-inline:-.5rem;padding-inline:.5rem}}\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "directive", type: AXUploaderBrowseDirective, selector: "[axUploaderBrowseHandle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXConversationPickerToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-conversation-picker-toolbar', imports: [AXButtonComponent, AXDecoratorModule, AXUploaderBrowseDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <span class="ax-conversation-picker__count">{{ countLabel() }}</span>
+    <ax-button [text]="addMoreLabel()" [look]="'ghost'" axUploaderBrowseHandle>
+      <ax-prefix>
+        <ax-icon><i class="fa-light fa-plus"></i></ax-icon>
+      </ax-prefix>
+    </ax-button>
+  `, styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-shrink:0;position:sticky;top:0;z-index:10;box-sizing:border-box;width:calc(100% + 1.5rem);margin-inline:-.75rem;padding:.375rem .75rem .5rem;background:rgb(var(--ax-sys-color-lightest-surface));border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.ax-conversation-picker__count{font-size:.75rem;font-weight:500;color:rgba(var(--ax-sys-color-on-surface),.65)}@container picker (max-width: 480px){:host{width:calc(100% + 1rem);margin-inline:-.5rem;padding-inline:.5rem}}\n"] }]
+        }] });
+
+export { AXConversationPickerEmptyComponent as A, AXConversationPickerToolbarComponent as a, AXConversationPickerCaptionComponent as b, AXConversationPickerShellComponent as c };
+//# sourceMappingURL=acorex-components-conversation-picker-toolbar.component-CpyS0j6P.mjs.map