@acorex/components 21.0.3-next.8 → 21.1.0-next.0

package/fesm2022/acorex-components-conversation-composer-action-choice-dialog.component-C28hl7iD.mjs

@@ -0,0 +1,101 @@
+import { AXComponentCloseEvent, AXClosableComponent } from '@acorex/cdk/common';
+import { AXTranslationService } from '@acorex/core/translation';
+import * as i0 from '@angular/core';
+import { inject, input, computed, EventEmitter, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class AXConversationComposerActionChoiceDialogComponent {
+    constructor() {
+        this.translation = inject(AXTranslationService);
+        this.actions = input.required(...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+        this.fileCount = input(1, ...(ngDevMode ? [{ debugName: "fileCount" }] : /* istanbul ignore next */ []));
+        this.composerActionRegistry = input.required(...(ngDevMode ? [{ debugName: "composerActionRegistry" }] : /* istanbul ignore next */ []));
+        this.__popup__ = input(...(ngDevMode ? [undefined, { debugName: "__popup__" }] : /* istanbul ignore next */ []));
+        this.hintText = computed(() => {
+            const count = this.fileCount();
+            if (count === 1) {
+                return this.translation.translateSync('@acorex:chat.dialog.choose-send-option.hint-single');
+            }
+            return this.translation.translateSync('@acorex:chat.dialog.choose-send-option.hint-multiple', {
+                params: { count },
+            });
+        }, ...(ngDevMode ? [{ debugName: "hintText" }] : /* istanbul ignore next */ []));
+        this.onClosed = new EventEmitter();
+    }
+    getActionLabel(action) {
+        return this.composerActionRegistry().getActionLabel(action);
+    }
+    getActionTooltip(action) {
+        return this.composerActionRegistry().getActionTooltip(action);
+    }
+    choose(action) {
+        const event = new AXComponentCloseEvent();
+        event.component = this;
+        event.data = action;
+        this.onClosed.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXConversationComposerActionChoiceDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXConversationComposerActionChoiceDialogComponent, isStandalone: true, selector: "ax-conversation-composer-action-choice-dialog", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, fileCount: { classPropertyName: "fileCount", publicName: "fileCount", isSignal: true, isRequired: false, transformFunction: null }, composerActionRegistry: { classPropertyName: "composerActionRegistry", publicName: "composerActionRegistry", isSignal: true, isRequired: true, transformFunction: null }, __popup__: { classPropertyName: "__popup__", publicName: "__popup__", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXClosableComponent, useExisting: AXConversationComposerActionChoiceDialogComponent }], ngImport: i0, template: `
+    <div class="composer-action-choice" role="dialog" aria-modal="true">
+      <p class="composer-action-choice__hint">{{ hintText() }}</p>
+      <ul class="composer-action-choice__list" role="listbox">
+        @for (action of actions(); track action.id) {
+          <li role="presentation">
+            <button
+              type="button"
+              class="composer-action-choice__option"
+              role="option"
+              (click)="choose(action)"
+              [attr.aria-label]="getActionLabel(action)"
+            >
+              <span class="composer-action-choice__icon" aria-hidden="true">
+                <i [class]="action.icon"></i>
+              </span>
+              <span class="composer-action-choice__text">
+                <span class="composer-action-choice__title">{{ getActionLabel(action) }}</span>
+                @if (getActionTooltip(action); as tip) {
+                  <span class="composer-action-choice__subtitle">{{ tip }}</span>
+                }
+              </span>
+              <i class="fa-light fa-chevron-right composer-action-choice__chevron" aria-hidden="true"></i>
+            </button>
+          </li>
+        }
+      </ul>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.composer-action-choice{display:flex;flex-direction:column;gap:.75rem;padding:.5rem;min-width:16rem}.composer-action-choice__hint{margin:0;font-size:.8125rem;line-height:1.45;color:rgba(var(--ax-sys-color-on-surface),.7)}.composer-action-choice__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.composer-action-choice__option{display:flex;align-items:center;gap:.75rem;width:100%;padding:.625rem .75rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:var(--ax-sys-border-radius, .5rem);background:rgb(var(--ax-sys-color-surface));cursor:pointer;text-align:start;transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}.composer-action-choice__option:hover,.composer-action-choice__option:focus-visible{border-color:rgb(var(--ax-sys-color-primary-500));background:rgba(var(--ax-sys-color-primary-500),.06);outline:none;box-shadow:0 0 0 1px rgba(var(--ax-sys-color-primary-500),.25)}.composer-action-choice__icon{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),.1);color:rgb(var(--ax-sys-color-primary-600));font-size:1.125rem}.composer-action-choice__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.composer-action-choice__title{font-size:.875rem;font-weight:600;color:rgb(var(--ax-sys-color-on-surface))}.composer-action-choice__subtitle{font-size:.75rem;color:rgba(var(--ax-sys-color-on-surface),.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.composer-action-choice__chevron{flex-shrink:0;font-size:.75rem;color:rgba(var(--ax-sys-color-on-surface),.45)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXConversationComposerActionChoiceDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-conversation-composer-action-choice-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="composer-action-choice" role="dialog" aria-modal="true">
+      <p class="composer-action-choice__hint">{{ hintText() }}</p>
+      <ul class="composer-action-choice__list" role="listbox">
+        @for (action of actions(); track action.id) {
+          <li role="presentation">
+            <button
+              type="button"
+              class="composer-action-choice__option"
+              role="option"
+              (click)="choose(action)"
+              [attr.aria-label]="getActionLabel(action)"
+            >
+              <span class="composer-action-choice__icon" aria-hidden="true">
+                <i [class]="action.icon"></i>
+              </span>
+              <span class="composer-action-choice__text">
+                <span class="composer-action-choice__title">{{ getActionLabel(action) }}</span>
+                @if (getActionTooltip(action); as tip) {
+                  <span class="composer-action-choice__subtitle">{{ tip }}</span>
+                }
+              </span>
+              <i class="fa-light fa-chevron-right composer-action-choice__chevron" aria-hidden="true"></i>
+            </button>
+          </li>
+        }
+      </ul>
+    </div>
+  `, providers: [{ provide: AXClosableComponent, useExisting: AXConversationComposerActionChoiceDialogComponent }], styles: [":host{display:block}.composer-action-choice{display:flex;flex-direction:column;gap:.75rem;padding:.5rem;min-width:16rem}.composer-action-choice__hint{margin:0;font-size:.8125rem;line-height:1.45;color:rgba(var(--ax-sys-color-on-surface),.7)}.composer-action-choice__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.composer-action-choice__option{display:flex;align-items:center;gap:.75rem;width:100%;padding:.625rem .75rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:var(--ax-sys-border-radius, .5rem);background:rgb(var(--ax-sys-color-surface));cursor:pointer;text-align:start;transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}.composer-action-choice__option:hover,.composer-action-choice__option:focus-visible{border-color:rgb(var(--ax-sys-color-primary-500));background:rgba(var(--ax-sys-color-primary-500),.06);outline:none;box-shadow:0 0 0 1px rgba(var(--ax-sys-color-primary-500),.25)}.composer-action-choice__icon{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),.1);color:rgb(var(--ax-sys-color-primary-600));font-size:1.125rem}.composer-action-choice__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.composer-action-choice__title{font-size:.875rem;font-weight:600;color:rgb(var(--ax-sys-color-on-surface))}.composer-action-choice__subtitle{font-size:.75rem;color:rgba(var(--ax-sys-color-on-surface),.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.composer-action-choice__chevron{flex-shrink:0;font-size:.75rem;color:rgba(var(--ax-sys-color-on-surface),.45)}\n"] }]
+        }], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: true }] }], fileCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileCount", required: false }] }], composerActionRegistry: [{ type: i0.Input, args: [{ isSignal: true, alias: "composerActionRegistry", required: true }] }], __popup__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__popup__", required: false }] }] } });
+
+export { AXConversationComposerActionChoiceDialogComponent };
+//# sourceMappingURL=acorex-components-conversation-composer-action-choice-dialog.component-C28hl7iD.mjs.map

package/fesm2022/acorex-components-conversation-composer-action-choice-dialog.component-C28hl7iD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-conversation-composer-action-choice-dialog.component-C28hl7iD.mjs","sources":["../../../../packages/components/conversation/src/lib/components/message-list/composer-action-choice-dialog.component.ts"],"sourcesContent":["import { AXClosableComponent, AXComponentCloseEvent } from '@acorex/cdk/common';\nimport type { AXPopupRef } from '@acorex/components/popup';\nimport { AXTranslationService } from '@acorex/core/translation';\nimport { ChangeDetectionStrategy, Component, EventEmitter, computed, inject, input } from '@angular/core';\nimport type { AXConversationComposerAction, AXConversationComposerActionRegistry } from '../../registries/composer-action.registry';\n\n@Component({\n  selector: 'ax-conversation-composer-action-choice-dialog',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div class=\"composer-action-choice\" role=\"dialog\" aria-modal=\"true\">\n      <p class=\"composer-action-choice__hint\">{{ hintText() }}</p>\n      <ul class=\"composer-action-choice__list\" role=\"listbox\">\n        @for (action of actions(); track action.id) {\n          <li role=\"presentation\">\n            <button\n              type=\"button\"\n              class=\"composer-action-choice__option\"\n              role=\"option\"\n              (click)=\"choose(action)\"\n              [attr.aria-label]=\"getActionLabel(action)\"\n            >\n              <span class=\"composer-action-choice__icon\" aria-hidden=\"true\">\n                <i [class]=\"action.icon\"></i>\n              </span>\n              <span class=\"composer-action-choice__text\">\n                <span class=\"composer-action-choice__title\">{{ getActionLabel(action) }}</span>\n                @if (getActionTooltip(action); as tip) {\n                  <span class=\"composer-action-choice__subtitle\">{{ tip }}</span>\n                }\n              </span>\n              <i class=\"fa-light fa-chevron-right composer-action-choice__chevron\" aria-hidden=\"true\"></i>\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  `,\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n\n      .composer-action-choice {\n        display: flex;\n        flex-direction: column;\n        gap: 0.75rem;\n        padding: 0.5rem;\n        min-width: 16rem;\n      }\n\n      .composer-action-choice__hint {\n        margin: 0;\n        font-size: 0.8125rem;\n        line-height: 1.45;\n        color: rgba(var(--ax-sys-color-on-surface), 0.7);\n      }\n\n      .composer-action-choice__list {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        display: flex;\n        flex-direction: column;\n        gap: 0.5rem;\n      }\n\n      .composer-action-choice__option {\n        display: flex;\n        align-items: center;\n        gap: 0.75rem;\n        width: 100%;\n        padding: 0.625rem 0.75rem;\n        border: 1px solid rgb(var(--ax-sys-color-border-light-surface));\n        border-radius: var(--ax-sys-border-radius, 0.5rem);\n        background: rgb(var(--ax-sys-color-surface));\n        cursor: pointer;\n        text-align: start;\n        transition:\n          border-color 0.15s ease,\n          background-color 0.15s ease,\n          box-shadow 0.15s ease;\n      }\n\n      .composer-action-choice__option:hover,\n      .composer-action-choice__option:focus-visible {\n        border-color: rgb(var(--ax-sys-color-primary-500));\n        background: rgba(var(--ax-sys-color-primary-500), 0.06);\n        outline: none;\n        box-shadow: 0 0 0 1px rgba(var(--ax-sys-color-primary-500), 0.25);\n      }\n\n      .composer-action-choice__icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 2.5rem;\n        height: 2.5rem;\n        flex-shrink: 0;\n        border-radius: var(--ax-sys-border-radius, 0.375rem);\n        background: rgba(var(--ax-sys-color-primary-500), 0.1);\n        color: rgb(var(--ax-sys-color-primary-600));\n        font-size: 1.125rem;\n      }\n\n      .composer-action-choice__text {\n        flex: 1;\n        min-width: 0;\n        display: flex;\n        flex-direction: column;\n        gap: 0.125rem;\n      }\n\n      .composer-action-choice__title {\n        font-size: 0.875rem;\n        font-weight: 600;\n        color: rgb(var(--ax-sys-color-on-surface));\n      }\n\n      .composer-action-choice__subtitle {\n        font-size: 0.75rem;\n        color: rgba(var(--ax-sys-color-on-surface), 0.6);\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      .composer-action-choice__chevron {\n        flex-shrink: 0;\n        font-size: 0.75rem;\n        color: rgba(var(--ax-sys-color-on-surface), 0.45);\n      }\n    `,\n  ],\n  providers: [{ provide: AXClosableComponent, useExisting: AXConversationComposerActionChoiceDialogComponent }],\n})\nexport class AXConversationComposerActionChoiceDialogComponent {\n  private readonly translation = inject(AXTranslationService);\n\n  readonly actions = input.required<AXConversationComposerAction[]>();\n  readonly fileCount = input(1);\n  readonly composerActionRegistry = input.required<AXConversationComposerActionRegistry>();\n  readonly __popup__ = input<AXPopupRef | undefined>();\n\n  readonly hintText = computed(() => {\n    const count = this.fileCount();\n    if (count === 1) {\n      return this.translation.translateSync('@acorex:chat.dialog.choose-send-option.hint-single');\n    }\n    return this.translation.translateSync('@acorex:chat.dialog.choose-send-option.hint-multiple', {\n      params: { count },\n    });\n  });\n\n  readonly onClosed = new EventEmitter<AXComponentCloseEvent>();\n\n  getActionLabel(action: AXConversationComposerAction): string {\n    return this.composerActionRegistry().getActionLabel(action);\n  }\n\n  getActionTooltip(action: AXConversationComposerAction): string | undefined {\n    return this.composerActionRegistry().getActionTooltip(action);\n  }\n\n  choose(action: AXConversationComposerAction): void {\n    const event = new AXComponentCloseEvent();\n    event.component = this;\n    event.data = action;\n    this.onClosed.emit(event);\n  }\n}\n"],"names":[],"mappings":";;;;;MAyIa,iDAAiD,CAAA;AAnI9D,IAAA,WAAA,GAAA;AAoImB,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,oBAAoB,CAAC;AAElD,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,6EAAkC;AAC1D,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,CAAC,gFAAC;AACpB,QAAA,IAAA,CAAA,sBAAsB,GAAG,KAAK,CAAC,QAAQ,4FAAwC;QAC/E,IAAA,CAAA,SAAS,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAA0B;AAE3C,QAAA,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AAChC,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE;AAC9B,YAAA,IAAI,KAAK,KAAK,CAAC,EAAE;gBACf,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,oDAAoD,CAAC;YAC7F;AACA,YAAA,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,sDAAsD,EAAE;gBAC5F,MAAM,EAAE,EAAE,KAAK,EAAE;AAClB,aAAA,CAAC;AACJ,QAAA,CAAC,+EAAC;AAEO,QAAA,IAAA,CAAA,QAAQ,GAAG,IAAI,YAAY,EAAyB;AAgB9D,IAAA;AAdC,IAAA,cAAc,CAAC,MAAoC,EAAA;QACjD,OAAO,IAAI,CAAC,sBAAsB,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC;IAC7D;AAEA,IAAA,gBAAgB,CAAC,MAAoC,EAAA;QACnD,OAAO,IAAI,CAAC,sBAAsB,EAAE,CAAC,gBAAgB,CAAC,MAAM,CAAC;IAC/D;AAEA,IAAA,MAAM,CAAC,MAAoC,EAAA;AACzC,QAAA,MAAM,KAAK,GAAG,IAAI,qBAAqB,EAAE;AACzC,QAAA,KAAK,CAAC,SAAS,GAAG,IAAI;AACtB,QAAA,KAAK,CAAC,IAAI,GAAG,MAAM;AACnB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;IAC3B;8GAjCW,iDAAiD,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjD,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iDAAiD,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,+CAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,sBAAA,EAAA,EAAA,iBAAA,EAAA,wBAAA,EAAA,UAAA,EAAA,wBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,SAAA,EAFjD,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,iDAAiD,EAAE,CAAC,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA9HnG;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,6tDAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAoGU,iDAAiD,EAAA,UAAA,EAAA,CAAA;kBAnI7D,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,+CAA+C,EAAA,eAAA,EACxC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BT,EAAA,SAAA,EAkGU,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAA,iDAAmD,EAAE,CAAC,EAAA,MAAA,EAAA,CAAA,6tDAAA,CAAA,EAAA;;;;;"}