@acorex/components 18.4.2 → 18.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/conversation/lib/conversation-message/conversation-message.component.d.ts +1 -1
- package/conversation/lib/conversation-messages/conversation-message-audio/conversation-message-audio.component.d.ts +3 -3
- package/conversation/lib/conversation-messages/conversation-message-image/conversation-message-image.component.d.ts +3 -3
- package/conversation/lib/conversation-messages/conversation-message-text/conversation-message-text.component.d.ts +7 -1
- package/conversation/lib/conversation-messages/conversation-message-video/conversation-message-video.component.d.ts +3 -3
- package/conversation/lib/conversation-messages/conversation-message-voice/conversation-message-voice.component.d.ts +3 -3
- package/conversation/lib/conversation.module.d.ts +1 -1
- package/conversation/lib/conversation.types.d.ts +1 -1
- package/esm2022/button/lib/button.component.mjs +2 -2
- package/esm2022/conversation/lib/conversation-message/conversation-message.component.mjs +4 -4
- package/esm2022/conversation/lib/conversation-messages/conversation-message-audio/conversation-message-audio.component.mjs +7 -7
- package/esm2022/conversation/lib/conversation-messages/conversation-message-file/conversation-message-file.component.mjs +9 -3
- package/esm2022/conversation/lib/conversation-messages/conversation-message-image/conversation-message-image.component.mjs +5 -5
- package/esm2022/conversation/lib/conversation-messages/conversation-message-text/conversation-message-text.component.mjs +85 -3
- package/esm2022/conversation/lib/conversation-messages/conversation-message-video/conversation-message-video.component.mjs +5 -5
- package/esm2022/conversation/lib/conversation-messages/conversation-message-voice/conversation-message-voice.component.mjs +5 -5
- package/esm2022/conversation/lib/conversation.module.mjs +21 -21
- package/esm2022/conversation/lib/conversation.types.mjs +1 -1
- package/fesm2022/acorex-components-button.mjs +2 -2
- package/fesm2022/acorex-components-button.mjs.map +1 -1
- package/fesm2022/acorex-components-conversation.mjs +129 -41
- package/fesm2022/acorex-components-conversation.mjs.map +1 -1
- package/package.json +53 -53
|
@@ -412,7 +412,7 @@ class AXConversationMessageComponent extends MXBaseComponent {
|
|
|
412
412
|
ngOnInit() {
|
|
413
413
|
this._portal = new ComponentPortal(this.registryService.resolve(this.chatMessage().type).component);
|
|
414
414
|
}
|
|
415
|
-
|
|
415
|
+
_handleAttached(ref) {
|
|
416
416
|
ref = ref;
|
|
417
417
|
if (ref.instance && isBrowser()) {
|
|
418
418
|
Object.assign(ref.instance, { message: this.chatMessage() });
|
|
@@ -443,11 +443,11 @@ class AXConversationMessageComponent extends MXBaseComponent {
|
|
|
443
443
|
this.conversationService.replyId.set(e);
|
|
444
444
|
}
|
|
445
445
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXConversationMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
446
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXConversationMessageComponent, selector: "ax-conversation-message", inputs: { chatMessage: { classPropertyName: "chatMessage", publicName: "chatMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (chatMessage().fromId) {\n <ax-avatar [size]=\"36\"></ax-avatar>\n}\n\n@if (isOwn) {\n <i (click)=\"replyHandler(chatMessage().id)\" class=\"fa-solid fa-reply ax-cursor-pointer\"></i>\n}\n\n<div class=\"ax-message-content\" [class.ax-state-own]=\"!chatMessage().fromId\" [class.ax-state-other]=\"chatMessage().fromId\">\n
|
|
446
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXConversationMessageComponent, selector: "ax-conversation-message", inputs: { chatMessage: { classPropertyName: "chatMessage", publicName: "chatMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (chatMessage().fromId) {\n <ax-avatar [size]=\"36\"></ax-avatar>\n}\n\n@if (isOwn) {\n <i (click)=\"replyHandler(chatMessage().id)\" class=\"fa-solid fa-reply ax-cursor-pointer\"></i>\n}\n\n<div class=\"ax-message-content\" [class.ax-state-own]=\"!chatMessage().fromId\" [class.ax-state-other]=\"chatMessage().fromId\">\n <ng-template [cdkPortalOutlet]=\"_portal\" (attached)=\"_handleAttached($event)\"></ng-template>\n\n <div class=\"ax-chat-message-status\">\n <div class=\"ax-message-prefix\"></div>\n <div>\n <div class=\"ax-message-suffix\"></div>\n <span>\n {{ chatMessage().sendTime | format: 'datetime' : 'HH:mm' | async }}\n </span>\n <span>\n @if (isOwn) {\n @if (chatMessage().deliverTime && chatMessage().sendTime) {\n <i class=\"ax-icon ax-icon-check ax-message-status\"></i>\n }\n @if (chatMessage().readTime && chatMessage().sendTime) {\n <i class=\"ax-icon ax-icon-dobble-check ax-message-status\"></i>\n }\n }\n </span>\n </div>\n </div>\n</div>\n\n@if (!chatMessage().sendTime) {\n <ax-button class=\"ax-resend-button ax-xs\" color=\"danger\" #b>\n <ax-icon class=\"ax-icon ax-icon-error\"></ax-icon>\n\n <ax-popover [target]=\"b\" placement=\"bottom-end\" #popover>\n <div class=\"ax-overlay-pane\">\n <ax-content> </ax-content>\n <ax-button-item-list>\n @if (chatMessage().onResendClick) {\n <ax-button-item text=\"Resend\" (onClick)=\"handleResendClick()\">\n <ax-icon class=\"ax-icon ax-icon-reload ax-bold\"></ax-icon>\n </ax-button-item>\n }\n @if (chatMessage().onDeleteClick) {\n <ax-button-item text=\"Delete\" color=\"danger\" (onClick)=\"handleDeleteClick()\">\n <ax-icon class=\"ax-icon ax-icon-clear ax-bold\"></ax-icon>\n </ax-button-item>\n }\n </ax-button-item-list>\n </div>\n </ax-popover>\n </ax-button>\n}\n", styles: [":root{--ax-message-other-color: rgba(var(--ax-color-primary-500));--ax-message-other-color-fore: rgba(var(--ax-color-primary-fore));--ax-message-status-color: rgba(var(--ax-color-primary-700));--ax-message-other-bar-color: rgba(var(--ax-color-primary-400));--ax-message-other-progress-color: rgba(var(--ax-color-primary-fore));--ax-message-own-color: rgba(var(--ax-color-primary-100));--ax-message-own-color-fore: rgba(var(--ax-color-primary-700));--ax-message-own-reply-color: rgba(var(--ax-color-primary-200));--ax-message-own-reply-color-fore: rgba(var(--ax-color-primary-800));--ax-message-other-reply-color: rgba(var(--ax-color-primary-700));--ax-message-other-reply-color-fore: white;--ax-message-border-color: rgba(var(--ax-color-primary-800));--ax-message-own-bar-color: rgba(var(--ax-color-primary-200));--ax-message-own-progress-color: rgba(var(--ax-color-primary-700))}ax-conversation-message{display:flex;gap:.5rem;align-items:flex-end}ax-conversation-message .ax-message-reply-container{border-left:.3rem solid var(--ax-message-border-color);border-radius:.75rem;padding:.75rem;margin-bottom:.25rem}ax-conversation-message .ax-message-reply-container .file{display:flex;align-items:center}ax-conversation-message .ax-message-reply-container .file i{margin-inline-end:.5rem}ax-conversation-message .ax-message-reply-container img,ax-conversation-message .ax-message-reply-container video{width:6rem}ax-conversation-message.ax-state-own{justify-content:flex-end}ax-conversation-message.ax-state-own .ax-conversation-controller button{background-color:var(--ax-message-own-color-fore);color:var(--ax-message-own-color)}ax-conversation-message.ax-state-own .ax-message-reply-container{background-color:var(--ax-message-own-reply-color);color:var(--ax-message-own-reply-color-fore)}ax-conversation-message.ax-state-other .ax-conversation-controller button{background-color:var(--ax-message-other-color-fore);color:var(--ax-message-other-color)}ax-conversation-message.ax-state-other .ax-message-reply-container{background-color:var(--ax-message-other-reply-color);color:var(--ax-message-other-reply-color-fore)}ax-conversation-message .ax-conversation-controller button{width:2.5rem;height:2.5rem;border-radius:999rem;display:flex;align-items:center;justify-content:center}ax-conversation-message .ax-conversation-controller button ax-loading-spinner{display:flex}ax-conversation-message .ax-conversation-controller button.ax-state-error{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-conversation-message .ax-conversation-controller button>i{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700}ax-conversation-message .ax-message-content{display:block;padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;border-radius:1rem;width:fit-content;max-width:50%}ax-conversation-message .ax-message-content.ax-state-own{border-end-end-radius:0!important;background-color:var(--ax-message-own-color);color:var(--ax-message-own-color-fore);justify-content:flex-end}ax-conversation-message .ax-message-content.ax-state-own .ax-chat-message-status{color:var(--ax-message-own-color-fore)}ax-conversation-message .ax-message-content.ax-state-other{border-end-start-radius:0!important;background-color:var(--ax-message-other-color);color:var(--ax-message-other-color-fore)}ax-conversation-message .ax-message-content.ax-state-other .ax-chat-message-status{color:var(--ax-message-other-color-fore)}ax-conversation-message .ax-message-content .ax-chat-message-status{display:flex;justify-content:space-between;align-items:center;font-size:.75rem}ax-conversation-message .ax-message-content .ax-chat-message-status>div{display:flex;gap:.125rem;align-items:center}ax-conversation-message .ax-message-content .ax-chat-message-status .ax-message-status{color:var(--ax-message-status-color)}ax-conversation-message .ax-message-content .ax-chat-message-status .ax-icon{font-weight:700;font-size:.875rem}ax-conversation-message .ax-message-content .ax-chat-message-status .ax-icon-error{color:rgba(var(--ax-color-danger-500))}ax-conversation-message .ax-message-content ax-prefix,ax-conversation-message .ax-message-content ax-suffix{display:none}ax-conversation-message .ax-resend-button{border-radius:999rem}ax-conversation-message .ax-cursor-pointer{cursor:pointer}ax-conversation-message .ax-rounded{border-radius:.75rem}ax-conversation-message .ax-message-content p{padding:.75rem;color:rgba(var(--ax-color-primary-fore))}@media (min-width: 320px) and (max-width: 600px){ax-conversation-message ax-avatar{display:none!important}ax-conversation-message .ax-message-content{max-width:100%}}\n"], dependencies: [{ kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i4$2.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "look"] }, { kind: "component", type: i5.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i4$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
447
447
|
}
|
|
448
448
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXConversationMessageComponent, decorators: [{
|
|
449
449
|
type: Component,
|
|
450
|
-
args: [{ selector: 'ax-conversation-message', encapsulation: ViewEncapsulation.None, template: "@if (chatMessage().fromId) {\n <ax-avatar [size]=\"36\"></ax-avatar>\n}\n\n@if (isOwn) {\n <i (click)=\"replyHandler(chatMessage().id)\" class=\"fa-solid fa-reply ax-cursor-pointer\"></i>\n}\n\n<div class=\"ax-message-content\" [class.ax-state-own]=\"!chatMessage().fromId\" [class.ax-state-other]=\"chatMessage().fromId\">\n
|
|
450
|
+
args: [{ selector: 'ax-conversation-message', encapsulation: ViewEncapsulation.None, template: "@if (chatMessage().fromId) {\n <ax-avatar [size]=\"36\"></ax-avatar>\n}\n\n@if (isOwn) {\n <i (click)=\"replyHandler(chatMessage().id)\" class=\"fa-solid fa-reply ax-cursor-pointer\"></i>\n}\n\n<div class=\"ax-message-content\" [class.ax-state-own]=\"!chatMessage().fromId\" [class.ax-state-other]=\"chatMessage().fromId\">\n <ng-template [cdkPortalOutlet]=\"_portal\" (attached)=\"_handleAttached($event)\"></ng-template>\n\n <div class=\"ax-chat-message-status\">\n <div class=\"ax-message-prefix\"></div>\n <div>\n <div class=\"ax-message-suffix\"></div>\n <span>\n {{ chatMessage().sendTime | format: 'datetime' : 'HH:mm' | async }}\n </span>\n <span>\n @if (isOwn) {\n @if (chatMessage().deliverTime && chatMessage().sendTime) {\n <i class=\"ax-icon ax-icon-check ax-message-status\"></i>\n }\n @if (chatMessage().readTime && chatMessage().sendTime) {\n <i class=\"ax-icon ax-icon-dobble-check ax-message-status\"></i>\n }\n }\n </span>\n </div>\n </div>\n</div>\n\n@if (!chatMessage().sendTime) {\n <ax-button class=\"ax-resend-button ax-xs\" color=\"danger\" #b>\n <ax-icon class=\"ax-icon ax-icon-error\"></ax-icon>\n\n <ax-popover [target]=\"b\" placement=\"bottom-end\" #popover>\n <div class=\"ax-overlay-pane\">\n <ax-content> </ax-content>\n <ax-button-item-list>\n @if (chatMessage().onResendClick) {\n <ax-button-item text=\"Resend\" (onClick)=\"handleResendClick()\">\n <ax-icon class=\"ax-icon ax-icon-reload ax-bold\"></ax-icon>\n </ax-button-item>\n }\n @if (chatMessage().onDeleteClick) {\n <ax-button-item text=\"Delete\" color=\"danger\" (onClick)=\"handleDeleteClick()\">\n <ax-icon class=\"ax-icon ax-icon-clear ax-bold\"></ax-icon>\n </ax-button-item>\n }\n </ax-button-item-list>\n </div>\n </ax-popover>\n </ax-button>\n}\n", styles: [":root{--ax-message-other-color: rgba(var(--ax-color-primary-500));--ax-message-other-color-fore: rgba(var(--ax-color-primary-fore));--ax-message-status-color: rgba(var(--ax-color-primary-700));--ax-message-other-bar-color: rgba(var(--ax-color-primary-400));--ax-message-other-progress-color: rgba(var(--ax-color-primary-fore));--ax-message-own-color: rgba(var(--ax-color-primary-100));--ax-message-own-color-fore: rgba(var(--ax-color-primary-700));--ax-message-own-reply-color: rgba(var(--ax-color-primary-200));--ax-message-own-reply-color-fore: rgba(var(--ax-color-primary-800));--ax-message-other-reply-color: rgba(var(--ax-color-primary-700));--ax-message-other-reply-color-fore: white;--ax-message-border-color: rgba(var(--ax-color-primary-800));--ax-message-own-bar-color: rgba(var(--ax-color-primary-200));--ax-message-own-progress-color: rgba(var(--ax-color-primary-700))}ax-conversation-message{display:flex;gap:.5rem;align-items:flex-end}ax-conversation-message .ax-message-reply-container{border-left:.3rem solid var(--ax-message-border-color);border-radius:.75rem;padding:.75rem;margin-bottom:.25rem}ax-conversation-message .ax-message-reply-container .file{display:flex;align-items:center}ax-conversation-message .ax-message-reply-container .file i{margin-inline-end:.5rem}ax-conversation-message .ax-message-reply-container img,ax-conversation-message .ax-message-reply-container video{width:6rem}ax-conversation-message.ax-state-own{justify-content:flex-end}ax-conversation-message.ax-state-own .ax-conversation-controller button{background-color:var(--ax-message-own-color-fore);color:var(--ax-message-own-color)}ax-conversation-message.ax-state-own .ax-message-reply-container{background-color:var(--ax-message-own-reply-color);color:var(--ax-message-own-reply-color-fore)}ax-conversation-message.ax-state-other .ax-conversation-controller button{background-color:var(--ax-message-other-color-fore);color:var(--ax-message-other-color)}ax-conversation-message.ax-state-other .ax-message-reply-container{background-color:var(--ax-message-other-reply-color);color:var(--ax-message-other-reply-color-fore)}ax-conversation-message .ax-conversation-controller button{width:2.5rem;height:2.5rem;border-radius:999rem;display:flex;align-items:center;justify-content:center}ax-conversation-message .ax-conversation-controller button ax-loading-spinner{display:flex}ax-conversation-message .ax-conversation-controller button.ax-state-error{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-conversation-message .ax-conversation-controller button>i{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700}ax-conversation-message .ax-message-content{display:block;padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;border-radius:1rem;width:fit-content;max-width:50%}ax-conversation-message .ax-message-content.ax-state-own{border-end-end-radius:0!important;background-color:var(--ax-message-own-color);color:var(--ax-message-own-color-fore);justify-content:flex-end}ax-conversation-message .ax-message-content.ax-state-own .ax-chat-message-status{color:var(--ax-message-own-color-fore)}ax-conversation-message .ax-message-content.ax-state-other{border-end-start-radius:0!important;background-color:var(--ax-message-other-color);color:var(--ax-message-other-color-fore)}ax-conversation-message .ax-message-content.ax-state-other .ax-chat-message-status{color:var(--ax-message-other-color-fore)}ax-conversation-message .ax-message-content .ax-chat-message-status{display:flex;justify-content:space-between;align-items:center;font-size:.75rem}ax-conversation-message .ax-message-content .ax-chat-message-status>div{display:flex;gap:.125rem;align-items:center}ax-conversation-message .ax-message-content .ax-chat-message-status .ax-message-status{color:var(--ax-message-status-color)}ax-conversation-message .ax-message-content .ax-chat-message-status .ax-icon{font-weight:700;font-size:.875rem}ax-conversation-message .ax-message-content .ax-chat-message-status .ax-icon-error{color:rgba(var(--ax-color-danger-500))}ax-conversation-message .ax-message-content ax-prefix,ax-conversation-message .ax-message-content ax-suffix{display:none}ax-conversation-message .ax-resend-button{border-radius:999rem}ax-conversation-message .ax-cursor-pointer{cursor:pointer}ax-conversation-message .ax-rounded{border-radius:.75rem}ax-conversation-message .ax-message-content p{padding:.75rem;color:rgba(var(--ax-color-primary-fore))}@media (min-width: 320px) and (max-width: 600px){ax-conversation-message ax-avatar{display:none!important}ax-conversation-message .ax-message-content{max-width:100%}}\n"] }]
|
|
451
451
|
}], propDecorators: { __hostClass: [{
|
|
452
452
|
type: HostBinding,
|
|
453
453
|
args: ['class']
|
|
@@ -461,7 +461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
|
|
|
461
461
|
type: Injectable
|
|
462
462
|
}] });
|
|
463
463
|
|
|
464
|
-
class
|
|
464
|
+
class AXConversationMessageAudioComponent extends AXConversationMessageBaseComponent {
|
|
465
465
|
constructor() {
|
|
466
466
|
super();
|
|
467
467
|
this.audioState = signal('paused');
|
|
@@ -530,12 +530,12 @@ class ConversationMessageAudioComponent extends AXConversationMessageBaseCompone
|
|
|
530
530
|
this.currentTimeFormat.set(Math.ceil(this.audioTag().nativeElement.currentTime * 1000));
|
|
531
531
|
});
|
|
532
532
|
}
|
|
533
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type:
|
|
534
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type:
|
|
533
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXConversationMessageAudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
534
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXConversationMessageAudioComponent, selector: "ax-conversation-message-audio", viewQueries: [{ propertyName: "audioTag", first: true, predicate: ["a"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<audio #a></audio>\n<ax-prefix>\n <div class=\"ax-time-rate\">\n @switch (audioState()) {\n @case ('paused') {\n {{ currentTimeFormat() | format: 'time-duration' | async }}\n }\n @case ('playing') {\n {{ currentTimeFormat() | format: 'time-duration' | async }}\n }\n @default {\n {{ durationFormat() | format: 'time-duration' | async }}\n }\n }\n <button class=\"ax-audio-speed\" (click)=\"handleRateClick()\">{{ audioRate() }}X</button>\n </div>\n</ax-prefix>\n<div class=\"ax-conversation-controller\">\n @switch (audioState()) {\n @case ('playing') {\n <button (click)=\"handlePauseClick()\">\n <i class=\"ax-icon ax-icon-pause\"></i>\n </button>\n }\n @case ('paused') {\n <button (click)=\"handlePlayClick()\">\n <i class=\"ax-icon ax-icon-play\"></i>\n </button>\n }\n }\n</div>\n<ax-slider\n class=\"ax-modify-bgSlider\"\n (onClick)=\"clickHandler($event)\"\n [maxValue]=\"duration()\"\n [minValue]=\"0\"\n [ngModel]=\"currentTime()\"\n color=\"secondary\"\n>\n</ax-slider>\n", styles: [".ax-time-rate button{margin-inline-start:.3rem;background-color:rgba(var(--ax-color-primary-fore));color:rgba(var(--ax-color-neutral-950));border-radius:.2rem;min-width:2rem}.ax-modify-bgSlider input[type=range]::-webkit-slider-runnable-track{background:rgba(var(--ax-color-primary-400));height:.5rem}.ax-modify-bgSlider input[type=range]::-moz-range-track{background:rgba(var(--ax-color-primary-400));height:.5rem}.ax-modify-bgSlider input[type=range]::-webkit-slider-thumb{margin-top:-.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i3$1.AXSliderComponent, selector: "ax-slider", inputs: ["readonly", "disabled", "value", "name", "color", "minValue", "maxValue", "step", "direction"], outputs: ["valueChange", "onValueChanged", "readonlyChange", "disabledChange", "onChange", "onClick"] }, { kind: "pipe", type: i4$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
535
535
|
}
|
|
536
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type:
|
|
536
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXConversationMessageAudioComponent, decorators: [{
|
|
537
537
|
type: Component,
|
|
538
|
-
args: [{ selector: 'ax-conversation-message-audio', template: "<audio #a></audio>\n<ax-prefix>\n <div class=\"ax-time-rate\">\n @switch (audioState()) {\n @case ('paused') {\n {{ currentTimeFormat() | format: 'time-duration' | async }}\n }\n @case ('playing') {\n {{ currentTimeFormat() | format: 'time-duration' | async }}\n }\n @default {\n {{ durationFormat() | format: 'time-duration' | async }}\n }\n }\n <button class=\"ax-audio-speed\" (click)=\"handleRateClick()\">{{ audioRate() }}X</button>\n </div>\n</ax-prefix>\n<div class=\"ax-conversation-controller\">\n @switch (audioState()) {\n @case ('playing') {\n <button (click)=\"handlePauseClick()\">\n <i class=\"ax-icon ax-icon-pause\"></i>\n </button>\n }\n @case ('paused') {\n <button (click)=\"handlePlayClick()\">\n <i class=\"ax-icon ax-icon-play\"></i>\n </button>\n }\n }\n</div>\n<ax-slider
|
|
538
|
+
args: [{ selector: 'ax-conversation-message-audio', encapsulation: ViewEncapsulation.None, template: "<audio #a></audio>\n<ax-prefix>\n <div class=\"ax-time-rate\">\n @switch (audioState()) {\n @case ('paused') {\n {{ currentTimeFormat() | format: 'time-duration' | async }}\n }\n @case ('playing') {\n {{ currentTimeFormat() | format: 'time-duration' | async }}\n }\n @default {\n {{ durationFormat() | format: 'time-duration' | async }}\n }\n }\n <button class=\"ax-audio-speed\" (click)=\"handleRateClick()\">{{ audioRate() }}X</button>\n </div>\n</ax-prefix>\n<div class=\"ax-conversation-controller\">\n @switch (audioState()) {\n @case ('playing') {\n <button (click)=\"handlePauseClick()\">\n <i class=\"ax-icon ax-icon-pause\"></i>\n </button>\n }\n @case ('paused') {\n <button (click)=\"handlePlayClick()\">\n <i class=\"ax-icon ax-icon-play\"></i>\n </button>\n }\n }\n</div>\n<ax-slider\n class=\"ax-modify-bgSlider\"\n (onClick)=\"clickHandler($event)\"\n [maxValue]=\"duration()\"\n [minValue]=\"0\"\n [ngModel]=\"currentTime()\"\n color=\"secondary\"\n>\n</ax-slider>\n", styles: [".ax-time-rate button{margin-inline-start:.3rem;background-color:rgba(var(--ax-color-primary-fore));color:rgba(var(--ax-color-neutral-950));border-radius:.2rem;min-width:2rem}.ax-modify-bgSlider input[type=range]::-webkit-slider-runnable-track{background:rgba(var(--ax-color-primary-400));height:.5rem}.ax-modify-bgSlider input[type=range]::-moz-range-track{background:rgba(var(--ax-color-primary-400));height:.5rem}.ax-modify-bgSlider input[type=range]::-webkit-slider-thumb{margin-top:-.5rem}\n"] }]
|
|
539
539
|
}], ctorParameters: () => [] });
|
|
540
540
|
|
|
541
541
|
class AXConversationViewComponent extends MXBaseComponent {
|
|
@@ -574,8 +574,14 @@ class AXConversationFileMessageComponent extends AXConversationMessageBaseCompon
|
|
|
574
574
|
this.http = inject(HttpClient);
|
|
575
575
|
this.parent = inject(AXConversationViewComponent);
|
|
576
576
|
afterNextRender(() => {
|
|
577
|
-
|
|
578
|
-
|
|
577
|
+
if (this.message.name) {
|
|
578
|
+
this.fileName.set(this.message.name);
|
|
579
|
+
this.fileSize.set(this.fileService.getSize(this.message.content));
|
|
580
|
+
}
|
|
581
|
+
else {
|
|
582
|
+
this.fileName.set(this.message.content[0].name);
|
|
583
|
+
this.fileSize.set(this.message.content[0].size);
|
|
584
|
+
}
|
|
579
585
|
});
|
|
580
586
|
}
|
|
581
587
|
handleDownloadFile() {
|
|
@@ -606,7 +612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
|
|
|
606
612
|
args: [{ selector: 'ax-conversation-message-image-popup', template: ` <div class="ax-image-popup-container"><img class="ax-image-popup" [src]="url" alt="" /></div>`, styles: [".ax-image-popup-container{display:flex;justify-content:center;align-items:center}.ax-image-popup{width:100%;height:auto;object-fit:cover}\n"] }]
|
|
607
613
|
}], ctorParameters: () => [] });
|
|
608
614
|
|
|
609
|
-
class
|
|
615
|
+
class AXConversationMessageImageComponent extends AXConversationMessageBaseComponent {
|
|
610
616
|
constructor() {
|
|
611
617
|
super();
|
|
612
618
|
this._imageUrl = signal('');
|
|
@@ -641,10 +647,10 @@ class ConversationMessageImageComponent extends AXConversationMessageBaseCompone
|
|
|
641
647
|
console.log(c);
|
|
642
648
|
});
|
|
643
649
|
}
|
|
644
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type:
|
|
645
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type:
|
|
650
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXConversationMessageImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
651
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXConversationMessageImageComponent, selector: "ax-conversation-message-image", inputs: { message: "message" }, usesInheritance: true, ngImport: i0, template: `<img (click)="openPopup()" [src]="_imageUrl()" alt="" /> `, isInline: true, styles: ["img{cursor:pointer;margin-bottom:.5rem;width:100%;border-radius:.75rem}\n"] }); }
|
|
646
652
|
}
|
|
647
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type:
|
|
653
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXConversationMessageImageComponent, decorators: [{
|
|
648
654
|
type: Component,
|
|
649
655
|
args: [{ selector: 'ax-conversation-message-image', template: `<img (click)="openPopup()" [src]="_imageUrl()" alt="" /> `, inputs: ['message'], styles: ["img{cursor:pointer;margin-bottom:.5rem;width:100%;border-radius:.75rem}\n"] }]
|
|
650
656
|
}], ctorParameters: () => [] });
|
|
@@ -653,19 +659,101 @@ class AXConversationTextMessageComponent extends AXConversationMessageBaseCompon
|
|
|
653
659
|
constructor() {
|
|
654
660
|
super(...arguments);
|
|
655
661
|
this._text = signal('');
|
|
662
|
+
this.replyText = signal(null);
|
|
663
|
+
this.replyImage = signal(null);
|
|
664
|
+
this.replyVideo = signal(null);
|
|
665
|
+
this.replyAudio = signal(null);
|
|
666
|
+
this.replyVoice = signal(null);
|
|
667
|
+
this.replyFile = signal(null);
|
|
656
668
|
}
|
|
657
669
|
ngOnInit() {
|
|
658
670
|
this._text.set(this.message?.content);
|
|
671
|
+
if (!this.message?.replyTo)
|
|
672
|
+
return;
|
|
673
|
+
switch (this.message.replyTo.type) {
|
|
674
|
+
case 'text':
|
|
675
|
+
this.replyText.set(this.message?.replyTo);
|
|
676
|
+
break;
|
|
677
|
+
case 'image':
|
|
678
|
+
this.replyImage.set(this.message?.replyTo);
|
|
679
|
+
break;
|
|
680
|
+
case 'video':
|
|
681
|
+
this.replyVideo.set(this.message?.replyTo);
|
|
682
|
+
break;
|
|
683
|
+
case 'audio':
|
|
684
|
+
this.replyAudio.set(this.message?.replyTo);
|
|
685
|
+
break;
|
|
686
|
+
case 'voice':
|
|
687
|
+
this.replyVoice.set(this.message?.replyTo);
|
|
688
|
+
break;
|
|
689
|
+
case 'file':
|
|
690
|
+
this.replyFile.set(this.message?.replyTo);
|
|
691
|
+
break;
|
|
692
|
+
}
|
|
659
693
|
}
|
|
660
694
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXConversationTextMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
661
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
695
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXConversationTextMessageComponent, selector: "ng-component", inputs: { message: "message" }, usesInheritance: true, ngImport: i0, template: `
|
|
696
|
+
@if (replyText()) {
|
|
697
|
+
<div class="ax-message-reply-container">{{ replyText().content }}</div>
|
|
698
|
+
}
|
|
699
|
+
|
|
700
|
+
@if (replyImage()) {
|
|
701
|
+
<div class="ax-message-reply-container"><img [src]="replyImage()" alt="" /></div>
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
@if (replyVideo()) {
|
|
705
|
+
<div class="ax-message-reply-container"><video [src]="replyVideo()"></video></div>
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
@if (replyFile()) {
|
|
709
|
+
<div class="ax-message-reply-container">
|
|
710
|
+
<div class="file">
|
|
711
|
+
<i class="fa-regular fa-folder-open"></i>
|
|
712
|
+
{{ replyFile().name }}
|
|
713
|
+
</div>
|
|
714
|
+
</div>
|
|
715
|
+
}
|
|
716
|
+
|
|
717
|
+
@if (replyAudio() || replyVoice()) {
|
|
718
|
+
<div class="ax-message-reply-container">{{ replyAudio().type }}</div>
|
|
719
|
+
}
|
|
720
|
+
|
|
721
|
+
<div class="ax-text-message" [innerHtml]="_text()"></div>
|
|
722
|
+
`, isInline: true, styles: [".ax-text-message{word-break:break-all;white-space:break-spaces}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
662
723
|
}
|
|
663
724
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXConversationTextMessageComponent, decorators: [{
|
|
664
725
|
type: Component,
|
|
665
|
-
args: [{ template:
|
|
726
|
+
args: [{ template: `
|
|
727
|
+
@if (replyText()) {
|
|
728
|
+
<div class="ax-message-reply-container">{{ replyText().content }}</div>
|
|
729
|
+
}
|
|
730
|
+
|
|
731
|
+
@if (replyImage()) {
|
|
732
|
+
<div class="ax-message-reply-container"><img [src]="replyImage()" alt="" /></div>
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
@if (replyVideo()) {
|
|
736
|
+
<div class="ax-message-reply-container"><video [src]="replyVideo()"></video></div>
|
|
737
|
+
}
|
|
738
|
+
|
|
739
|
+
@if (replyFile()) {
|
|
740
|
+
<div class="ax-message-reply-container">
|
|
741
|
+
<div class="file">
|
|
742
|
+
<i class="fa-regular fa-folder-open"></i>
|
|
743
|
+
{{ replyFile().name }}
|
|
744
|
+
</div>
|
|
745
|
+
</div>
|
|
746
|
+
}
|
|
747
|
+
|
|
748
|
+
@if (replyAudio() || replyVoice()) {
|
|
749
|
+
<div class="ax-message-reply-container">{{ replyAudio().type }}</div>
|
|
750
|
+
}
|
|
751
|
+
|
|
752
|
+
<div class="ax-text-message" [innerHtml]="_text()"></div>
|
|
753
|
+
`, encapsulation: ViewEncapsulation.None, inputs: ['message'], styles: [".ax-text-message{word-break:break-all;white-space:break-spaces}\n"] }]
|
|
666
754
|
}] });
|
|
667
755
|
|
|
668
|
-
class
|
|
756
|
+
class AXConversationMessageVideoComponent extends AXConversationMessageBaseComponent {
|
|
669
757
|
constructor() {
|
|
670
758
|
super(...arguments);
|
|
671
759
|
this._videoUrl = signal('');
|
|
@@ -674,15 +762,15 @@ class ConversationMessageVideoComponent extends AXConversationMessageBaseCompone
|
|
|
674
762
|
this._videoUrl.set(this.message?.content);
|
|
675
763
|
console.log(this._videoUrl());
|
|
676
764
|
}
|
|
677
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type:
|
|
678
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type:
|
|
765
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXConversationMessageVideoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
766
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXConversationMessageVideoComponent, selector: "ax-conversation-message-video", usesInheritance: true, ngImport: i0, template: `<video controls [src]="_videoUrl()"></video>`, isInline: true, styles: ["video{margin-bottom:.5rem;width:100%;border-radius:.75rem}\n"] }); }
|
|
679
767
|
}
|
|
680
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type:
|
|
768
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXConversationMessageVideoComponent, decorators: [{
|
|
681
769
|
type: Component,
|
|
682
770
|
args: [{ selector: 'ax-conversation-message-video', template: `<video controls [src]="_videoUrl()"></video>`, styles: ["video{margin-bottom:.5rem;width:100%;border-radius:.75rem}\n"] }]
|
|
683
771
|
}] });
|
|
684
772
|
|
|
685
|
-
class
|
|
773
|
+
class AXConversationVoiceMessageComponent extends AXConversationMessageBaseComponent {
|
|
686
774
|
constructor() {
|
|
687
775
|
super();
|
|
688
776
|
this.config = { url: '' };
|
|
@@ -775,10 +863,10 @@ class AXConversationAudioMessageComponent extends AXConversationMessageBaseCompo
|
|
|
775
863
|
get __hostClass() {
|
|
776
864
|
return `${this.message.fromId ? 'ax-state-other' : 'ax-state-own'}`;
|
|
777
865
|
}
|
|
778
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type:
|
|
779
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type:
|
|
866
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXConversationVoiceMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
867
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXConversationVoiceMessageComponent, selector: "ax-conversation-message-audio", inputs: { message: "message" }, host: { properties: { "class": "this.__hostClass" } }, viewQueries: [{ propertyName: "audio", first: true, predicate: ["a"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-prefix>\n @switch (audioState()) {\n @case ('paused') {\n {{ currentTime() | format: 'time-duration' | async }}\n }\n @case ('playing') {\n {{ currentTime() | format: 'time-duration' | async }}\n }\n @default {\n {{ duration() | format: 'time-duration' | async }}\n }\n }\n <button class=\"ax-audio-speed\" (click)=\"handleRateClick()\"></button>\n</ax-prefix>\n<div class=\"ax-conversation-controller\">\n @switch (audioState()) {\n @case ('playing') {\n <button (click)=\"handlePauseClick()\">\n <i class=\"ax-icon ax-icon-pause\"></i>\n </button>\n }\n\n @case ('ready') {\n <button (click)=\"handlePlayClick()\">\n <i class=\"ax-icon ax-icon-play\"></i>\n </button>\n }\n\n @case ('paused') {\n <button (click)=\"handlePlayClick()\">\n <i class=\"ax-icon ax-icon-play\"></i>\n </button>\n }\n\n @case ('error') {\n <button class=\"ax-state-error\" (click)=\"handleReloadClick()\">\n <i class=\"ax-icon ax-icon-reload\"></i>\n </button>\n }\n\n @default {\n <button (click)=\"handleCancelLoading()\">\n <ax-loading-spinner\n [size]=\"24\"\n [stroke]=\"2\"\n [color]=\"message.fromId ? 'var(--ax-other-color)' : 'var(--ax-own-color)'\"\n ></ax-loading-spinner>\n </button>\n }\n }\n</div>\n<ax-audio-wave #a [config]=\"config\" (onStatusChanged)=\"handleOnStatusChanged($event)\"></ax-audio-wave>\n<ax-suffix>\n <div class=\"ax-audio-rate-button\" [class.ax-state-own]=\"!message?.fromId\" (click)=\"handleRateClick()\">{{ selectedRate() }}X</div>\n</ax-suffix>\n", styles: ["ax-conversation-message-audio{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-width:18rem;max-width:100%}ax-conversation-message-audio .ax-audio-wave{flex:1}.ax-audio-rate-button{background-color:var(--ax-message-other-color-fore);color:var(--ax-message-other-color);border-radius:.5rem;padding:0 .5rem;font-weight:700;margin-inline-end:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.ax-audio-rate-button.ax-state-own{background-color:var(--ax-message-own-color-fore);color:var(--ax-message-own-color)}html[dir=rtl] ax-conversation-message-audio{flex-direction:row-reverse}\n"], dependencies: [{ kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i2$2.AXAudioWaveComponent, selector: "ax-audio-wave", inputs: ["config"], outputs: ["onStatusChanged"] }, { kind: "component", type: i2$1.AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["color", "size", "stroke"] }, { kind: "pipe", type: i4$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
780
868
|
}
|
|
781
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type:
|
|
869
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXConversationVoiceMessageComponent, decorators: [{
|
|
782
870
|
type: Component,
|
|
783
871
|
args: [{ selector: 'ax-conversation-message-audio', encapsulation: ViewEncapsulation.None, inputs: ['message'], template: "<ax-prefix>\n @switch (audioState()) {\n @case ('paused') {\n {{ currentTime() | format: 'time-duration' | async }}\n }\n @case ('playing') {\n {{ currentTime() | format: 'time-duration' | async }}\n }\n @default {\n {{ duration() | format: 'time-duration' | async }}\n }\n }\n <button class=\"ax-audio-speed\" (click)=\"handleRateClick()\"></button>\n</ax-prefix>\n<div class=\"ax-conversation-controller\">\n @switch (audioState()) {\n @case ('playing') {\n <button (click)=\"handlePauseClick()\">\n <i class=\"ax-icon ax-icon-pause\"></i>\n </button>\n }\n\n @case ('ready') {\n <button (click)=\"handlePlayClick()\">\n <i class=\"ax-icon ax-icon-play\"></i>\n </button>\n }\n\n @case ('paused') {\n <button (click)=\"handlePlayClick()\">\n <i class=\"ax-icon ax-icon-play\"></i>\n </button>\n }\n\n @case ('error') {\n <button class=\"ax-state-error\" (click)=\"handleReloadClick()\">\n <i class=\"ax-icon ax-icon-reload\"></i>\n </button>\n }\n\n @default {\n <button (click)=\"handleCancelLoading()\">\n <ax-loading-spinner\n [size]=\"24\"\n [stroke]=\"2\"\n [color]=\"message.fromId ? 'var(--ax-other-color)' : 'var(--ax-own-color)'\"\n ></ax-loading-spinner>\n </button>\n }\n }\n</div>\n<ax-audio-wave #a [config]=\"config\" (onStatusChanged)=\"handleOnStatusChanged($event)\"></ax-audio-wave>\n<ax-suffix>\n <div class=\"ax-audio-rate-button\" [class.ax-state-own]=\"!message?.fromId\" (click)=\"handleRateClick()\">{{ selectedRate() }}X</div>\n</ax-suffix>\n", styles: ["ax-conversation-message-audio{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-width:18rem;max-width:100%}ax-conversation-message-audio .ax-audio-wave{flex:1}.ax-audio-rate-button{background-color:var(--ax-message-other-color-fore);color:var(--ax-message-other-color);border-radius:.5rem;padding:0 .5rem;font-weight:700;margin-inline-end:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.ax-audio-rate-button.ax-state-own{background-color:var(--ax-message-own-color-fore);color:var(--ax-message-own-color)}html[dir=rtl] ax-conversation-message-audio{flex-direction:row-reverse}\n"] }]
|
|
784
872
|
}], ctorParameters: () => [], propDecorators: { audio: [{
|
|
@@ -794,12 +882,12 @@ const COMPONENT = [
|
|
|
794
882
|
AXConversationInputComponent,
|
|
795
883
|
AXConversationMessageComponent,
|
|
796
884
|
AXConversationTextMessageComponent,
|
|
797
|
-
|
|
885
|
+
AXConversationVoiceMessageComponent,
|
|
798
886
|
AXConversationFileMessageComponent,
|
|
799
887
|
AXConversationContainerComponent,
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
888
|
+
AXConversationMessageAudioComponent,
|
|
889
|
+
AXConversationMessageImageComponent,
|
|
890
|
+
AXConversationMessageVideoComponent,
|
|
803
891
|
];
|
|
804
892
|
const MODULES = [
|
|
805
893
|
CommonModule,
|
|
@@ -838,7 +926,7 @@ class AXConversationModule {
|
|
|
838
926
|
});
|
|
839
927
|
registry.register({
|
|
840
928
|
name: 'voice',
|
|
841
|
-
component:
|
|
929
|
+
component: AXConversationVoiceMessageComponent,
|
|
842
930
|
});
|
|
843
931
|
registry.register({
|
|
844
932
|
name: 'file',
|
|
@@ -846,15 +934,15 @@ class AXConversationModule {
|
|
|
846
934
|
});
|
|
847
935
|
registry.register({
|
|
848
936
|
name: 'audio',
|
|
849
|
-
component:
|
|
937
|
+
component: AXConversationMessageAudioComponent,
|
|
850
938
|
});
|
|
851
939
|
registry.register({
|
|
852
940
|
name: 'image',
|
|
853
|
-
component:
|
|
941
|
+
component: AXConversationMessageImageComponent,
|
|
854
942
|
});
|
|
855
943
|
registry.register({
|
|
856
944
|
name: 'video',
|
|
857
|
-
component:
|
|
945
|
+
component: AXConversationMessageVideoComponent,
|
|
858
946
|
});
|
|
859
947
|
},
|
|
860
948
|
deps: [AXConversationMessageTypeRegistryService],
|
|
@@ -893,12 +981,12 @@ class AXConversationModule {
|
|
|
893
981
|
AXConversationInputComponent,
|
|
894
982
|
AXConversationMessageComponent,
|
|
895
983
|
AXConversationTextMessageComponent,
|
|
896
|
-
|
|
984
|
+
AXConversationVoiceMessageComponent,
|
|
897
985
|
AXConversationFileMessageComponent,
|
|
898
986
|
AXConversationContainerComponent,
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
987
|
+
AXConversationMessageAudioComponent,
|
|
988
|
+
AXConversationMessageImageComponent,
|
|
989
|
+
AXConversationMessageVideoComponent], imports: [CommonModule,
|
|
902
990
|
FormsModule,
|
|
903
991
|
AsyncPipe,
|
|
904
992
|
AXRippleDirective,
|
|
@@ -919,12 +1007,12 @@ class AXConversationModule {
|
|
|
919
1007
|
AXConversationInputComponent,
|
|
920
1008
|
AXConversationMessageComponent,
|
|
921
1009
|
AXConversationTextMessageComponent,
|
|
922
|
-
|
|
1010
|
+
AXConversationVoiceMessageComponent,
|
|
923
1011
|
AXConversationFileMessageComponent,
|
|
924
1012
|
AXConversationContainerComponent,
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
1013
|
+
AXConversationMessageAudioComponent,
|
|
1014
|
+
AXConversationMessageImageComponent,
|
|
1015
|
+
AXConversationMessageVideoComponent] }); }
|
|
928
1016
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXConversationModule, providers: [AXRecordingService, AXConversationService, AXPopupService], imports: [CommonModule,
|
|
929
1017
|
FormsModule,
|
|
930
1018
|
AXButtonModule,
|
|
@@ -960,5 +1048,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
|
|
|
960
1048
|
* Generated bundle index. Do not edit.
|
|
961
1049
|
*/
|
|
962
1050
|
|
|
963
|
-
export { AXConversationActionEvent,
|
|
1051
|
+
export { AXConversationActionEvent, AXConversationContainerComponent, AXConversationFileMessageComponent, AXConversationInputComponent, AXConversationMessageAudioComponent, AXConversationMessageBaseComponent, AXConversationMessageComponent, AXConversationMessageImageComponent, AXConversationMessageTypeRegistryService, AXConversationMessageVideoComponent, AXConversationModule, AXConversationService, AXConversationTextMessageComponent, AXConversationViewComponent, AXConversationVoiceMessageComponent, AXRecordingService, ConversationMessageImagePopupComponent };
|
|
964
1052
|
//# sourceMappingURL=acorex-components-conversation.mjs.map
|