@acorex/components 20.9.0 → 20.9.2

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

@@ -1,537 +0,0 @@
-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