@acorex/components 19.0.0 → 19.1.0-next.0
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/color-box/lib/color-box.component.d.ts +2 -1
- package/color-palette/lib/color-palette-picker.component.d.ts +1 -1
- package/conversation/lib/conversation-message/conversation-message.component.d.ts +5 -9
- package/conversation/lib/conversation-view/conversation-view.component.d.ts +8 -21
- package/conversation/lib/conversation.module.d.ts +2 -1
- package/fesm2022/acorex-components-color-box.mjs +30 -4
- package/fesm2022/acorex-components-color-box.mjs.map +1 -1
- package/fesm2022/acorex-components-color-palette.mjs +4 -4
- package/fesm2022/acorex-components-color-palette.mjs.map +1 -1
- package/fesm2022/acorex-components-common.mjs +20 -8
- package/fesm2022/acorex-components-common.mjs.map +1 -1
- package/fesm2022/acorex-components-conversation.mjs +39 -45
- package/fesm2022/acorex-components-conversation.mjs.map +1 -1
- package/fesm2022/acorex-components-form.mjs +8 -6
- package/fesm2022/acorex-components-form.mjs.map +1 -1
- package/fesm2022/acorex-components-image-editor.mjs +1 -0
- package/fesm2022/acorex-components-image-editor.mjs.map +1 -1
- package/fesm2022/acorex-components-label.mjs +2 -2
- package/fesm2022/acorex-components-label.mjs.map +1 -1
- package/fesm2022/acorex-components-otp.mjs +12 -24
- package/fesm2022/acorex-components-otp.mjs.map +1 -1
- package/fesm2022/acorex-components-select-box.mjs.map +1 -1
- package/fesm2022/acorex-components-tabs.mjs +8 -3
- package/fesm2022/acorex-components-tabs.mjs.map +1 -1
- package/otp/lib/otp.component.d.ts +3 -11
- package/package.json +1 -1
- package/tabs/lib/tabs.component.d.ts +1 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { AXEvent, MXInputBaseValueComponent, MXLookComponent, AXComponent, AXFocusableComponent, AXValuableComponent, MXBaseComponent, AXRippleDirective } from '@acorex/components/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { Component, ViewEncapsulation, signal, Injectable, inject, computed, input, output, forwardRef, ChangeDetectionStrategy, ViewChild, viewChild, HostBinding, Renderer2, afterNextRender,
|
|
3
|
+
import { Component, ViewEncapsulation, signal, Injectable, inject, computed, input, output, forwardRef, ChangeDetectionStrategy, ViewChild, viewChild, HostBinding, Renderer2, afterNextRender, PLATFORM_ID, NgModule, Optional, Inject } from '@angular/core';
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
5
5
|
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
6
6
|
import { classes } from 'polytype';
|
|
@@ -27,6 +27,8 @@ import * as i3$1 from '@acorex/components/range-slider';
|
|
|
27
27
|
import { AXRangeSliderModule } from '@acorex/components/range-slider';
|
|
28
28
|
import { AXFileService, AXFileModule } from '@acorex/core/file';
|
|
29
29
|
import { HttpClient } from '@angular/common/http';
|
|
30
|
+
import * as i1$2 from '@acorex/cdk/virtual-scroll';
|
|
31
|
+
import { AXVirtualScrollModule } from '@acorex/cdk/virtual-scroll';
|
|
30
32
|
import * as i2$1 from '@acorex/components/loading';
|
|
31
33
|
import { AXLoadingModule } from '@acorex/components/loading';
|
|
32
34
|
import { AXPopupService } from '@acorex/components/popup';
|
|
@@ -359,6 +361,12 @@ class AXConversationMessageComponent extends MXBaseComponent {
|
|
|
359
361
|
* @ignore
|
|
360
362
|
*/
|
|
361
363
|
this.registryService = inject(AXConversationMessageTypeRegistryService);
|
|
364
|
+
/**
|
|
365
|
+
* @ignore
|
|
366
|
+
*/
|
|
367
|
+
this.portal = computed(() => {
|
|
368
|
+
return new ComponentPortal(this.registryService.resolve(this.chatMessage().type).component);
|
|
369
|
+
});
|
|
362
370
|
}
|
|
363
371
|
/**
|
|
364
372
|
* @ignore
|
|
@@ -372,12 +380,6 @@ class AXConversationMessageComponent extends MXBaseComponent {
|
|
|
372
380
|
get __hostClass() {
|
|
373
381
|
return `${this.isOwn ? 'ax-state-own' : ''} ${!this.isOwn ? 'ax-state-other' : ''}`;
|
|
374
382
|
}
|
|
375
|
-
/**
|
|
376
|
-
* @ignore
|
|
377
|
-
*/
|
|
378
|
-
ngOnInit() {
|
|
379
|
-
this._portal = new ComponentPortal(this.registryService.resolve(this.chatMessage().type).component);
|
|
380
|
-
}
|
|
381
383
|
/**
|
|
382
384
|
* @ignore
|
|
383
385
|
*/
|
|
@@ -385,11 +387,12 @@ class AXConversationMessageComponent extends MXBaseComponent {
|
|
|
385
387
|
ref = ref;
|
|
386
388
|
if (ref.instance && isBrowser()) {
|
|
387
389
|
Object.assign(ref.instance, { message: this.chatMessage() });
|
|
388
|
-
this.cdr.markForCheck();
|
|
389
|
-
const prefix = this.getHostElement().querySelector('ax-prefix');
|
|
390
|
-
const suffix = this.getHostElement().querySelector('ax-suffix');
|
|
391
390
|
const prefixContainer = this.getHostElement().querySelector('.ax-message-prefix');
|
|
392
391
|
const suffixContainer = this.getHostElement().querySelector('.ax-message-suffix');
|
|
392
|
+
prefixContainer.innerHTML = '';
|
|
393
|
+
suffixContainer.innerHTML = '';
|
|
394
|
+
const prefix = this.getHostElement().querySelector('ax-prefix');
|
|
395
|
+
const suffix = this.getHostElement().querySelector('ax-suffix');
|
|
393
396
|
if (prefix && prefixContainer) {
|
|
394
397
|
prefix.style.display = 'flex';
|
|
395
398
|
prefixContainer.append(prefix);
|
|
@@ -421,11 +424,11 @@ class AXConversationMessageComponent extends MXBaseComponent {
|
|
|
421
424
|
this.conversationService.replyId.set(e);
|
|
422
425
|
}
|
|
423
426
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXConversationMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
424
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXConversationMessageComponent, isStandalone: false, 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
|
|
427
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXConversationMessageComponent, isStandalone: false, 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\n class=\"ax-message-content\"\n [class.ax-state-own]=\"!chatMessage().fromId\"\n [class.ax-state-other]=\"chatMessage().fromId\"\n>\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;align-items:flex-end;margin-bottom:.5rem}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: 640px){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", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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"], outputs: ["sizeChange"] }, { kind: "component", type: i5.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i4$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
425
428
|
}
|
|
426
429
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXConversationMessageComponent, decorators: [{
|
|
427
430
|
type: Component,
|
|
428
|
-
args: [{ selector: 'ax-conversation-message', encapsulation: ViewEncapsulation.None, standalone: false, 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
|
|
431
|
+
args: [{ selector: 'ax-conversation-message', encapsulation: ViewEncapsulation.None, standalone: false, 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\n class=\"ax-message-content\"\n [class.ax-state-own]=\"!chatMessage().fromId\"\n [class.ax-state-other]=\"chatMessage().fromId\"\n>\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;align-items:flex-end;margin-bottom:.5rem}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: 640px){ax-conversation-message ax-avatar{display:none!important}ax-conversation-message .ax-message-content{max-width:100%}}\n"] }]
|
|
429
432
|
}], propDecorators: { __hostClass: [{
|
|
430
433
|
type: HostBinding,
|
|
431
434
|
args: ['class']
|
|
@@ -584,46 +587,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
584
587
|
* @category Components
|
|
585
588
|
*/
|
|
586
589
|
class AXConversationViewComponent extends MXBaseComponent {
|
|
587
|
-
/**
|
|
588
|
-
* @ignore
|
|
589
|
-
*/
|
|
590
590
|
constructor() {
|
|
591
|
-
super();
|
|
592
|
-
/**
|
|
593
|
-
* @ignore
|
|
594
|
-
*/
|
|
591
|
+
super(...arguments);
|
|
592
|
+
/** @ignore */
|
|
595
593
|
this.conversationService = inject(AXConversationService);
|
|
594
|
+
this.onScrollEnd = output();
|
|
596
595
|
/**
|
|
597
596
|
* Emits an event when an action is performed within the conversation view.
|
|
598
597
|
*
|
|
599
598
|
* @event
|
|
600
599
|
*/
|
|
601
600
|
this.onAction = output();
|
|
602
|
-
/**
|
|
603
|
-
* @ignore
|
|
604
|
-
*/
|
|
605
|
-
this.conversations = computed(() => {
|
|
606
|
-
return this.conversationService.chats();
|
|
607
|
-
});
|
|
608
|
-
this.viewRef = inject(ViewContainerRef);
|
|
609
|
-
afterNextRender(() => {
|
|
610
|
-
this.scrollIntoEndOfView();
|
|
611
|
-
});
|
|
612
601
|
}
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
*/
|
|
616
|
-
scrollIntoEndOfView() {
|
|
617
|
-
const el = this.viewRef.element.nativeElement;
|
|
618
|
-
el.scroll({ top: el.scrollHeight });
|
|
602
|
+
updatePrevItems(item) {
|
|
603
|
+
this.conversationService.chats.update((prev) => [...item, ...prev]);
|
|
619
604
|
}
|
|
620
|
-
|
|
621
|
-
|
|
605
|
+
callForUpdate() {
|
|
606
|
+
this.onScrollEnd.emit({ component: this });
|
|
607
|
+
}
|
|
608
|
+
addNewItem(item) {
|
|
609
|
+
this.conversationService.chats.update((prev) => [...prev, item]);
|
|
610
|
+
}
|
|
611
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXConversationViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
612
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXConversationViewComponent, isStandalone: false, selector: "ax-conversation-view", outputs: { onScrollEnd: "onScrollEnd", onAction: "onAction" }, usesInheritance: true, ngImport: i0, template: "<ax-virtual-scrolling-contianer (ScrollEnd)=\"callForUpdate()\" height=\"30vh\">\n @for (item of conversationService.chats(); track item.id) {\n <ax-virtual-scrolling-item>\n <ax-conversation-message [chatMessage]=\"item\"></ax-conversation-message>\n </ax-virtual-scrolling-item>\n }\n</ax-virtual-scrolling-contianer>\n", styles: ["ax-conversation-view{display:block}ax-conversation-view .ax-conversation-container{overflow-y:auto;height:100%}\n"], dependencies: [{ kind: "component", type: i1$2.AXVirtualScrollingContianerComponent, selector: "ax-virtual-scrolling-contianer", inputs: ["height"], outputs: ["ScrollEnd"] }, { kind: "component", type: i1$2.AXVirtualScrollingItemComponent, selector: "ax-virtual-scrolling-item" }, { kind: "component", type: AXConversationMessageComponent, selector: "ax-conversation-message", inputs: ["chatMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
622
613
|
}
|
|
623
614
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXConversationViewComponent, decorators: [{
|
|
624
615
|
type: Component,
|
|
625
|
-
args: [{ selector: 'ax-conversation-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "@for (item of
|
|
626
|
-
}]
|
|
616
|
+
args: [{ selector: 'ax-conversation-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<ax-virtual-scrolling-contianer (ScrollEnd)=\"callForUpdate()\" height=\"30vh\">\n @for (item of conversationService.chats(); track item.id) {\n <ax-virtual-scrolling-item>\n <ax-conversation-message [chatMessage]=\"item\"></ax-conversation-message>\n </ax-virtual-scrolling-item>\n }\n</ax-virtual-scrolling-contianer>\n", styles: ["ax-conversation-view{display:block}ax-conversation-view .ax-conversation-container{overflow-y:auto;height:100%}\n"] }]
|
|
617
|
+
}] });
|
|
627
618
|
|
|
628
619
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
629
620
|
/**
|
|
@@ -773,11 +764,11 @@ class AXConversationMessageImageComponent extends AXConversationMessageBaseCompo
|
|
|
773
764
|
});
|
|
774
765
|
}
|
|
775
766
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXConversationMessageImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
776
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXConversationMessageImageComponent, isStandalone: false, 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"] }); }
|
|
767
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXConversationMessageImageComponent, isStandalone: false, 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%;height:15rem;border-radius:.75rem}\n"] }); }
|
|
777
768
|
}
|
|
778
769
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXConversationMessageImageComponent, decorators: [{
|
|
779
770
|
type: Component,
|
|
780
|
-
args: [{ selector: 'ax-conversation-message-image', template: `<img (click)="openPopup()" [src]="_imageUrl()" alt="" /> `, inputs: ['message'], standalone: false, styles: ["img{cursor:pointer;margin-bottom:.5rem;width:100%;border-radius:.75rem}\n"] }]
|
|
771
|
+
args: [{ selector: 'ax-conversation-message-image', template: `<img (click)="openPopup()" [src]="_imageUrl()" alt="" /> `, inputs: ['message'], standalone: false, styles: ["img{cursor:pointer;margin-bottom:.5rem;width:100%;height:15rem;border-radius:.75rem}\n"] }]
|
|
781
772
|
}], ctorParameters: () => [] });
|
|
782
773
|
|
|
783
774
|
/**
|
|
@@ -928,11 +919,11 @@ class AXConversationMessageVideoComponent extends AXConversationMessageBaseCompo
|
|
|
928
919
|
console.log(this._videoUrl());
|
|
929
920
|
}
|
|
930
921
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXConversationMessageVideoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
931
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXConversationMessageVideoComponent, isStandalone: false, 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"] }); }
|
|
922
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXConversationMessageVideoComponent, isStandalone: false, selector: "ax-conversation-message-video", usesInheritance: true, ngImport: i0, template: `<video controls [src]="_videoUrl()"></video>`, isInline: true, styles: ["video{margin-bottom:.5rem;width:100%;height:15rem;border-radius:.75rem}\n"] }); }
|
|
932
923
|
}
|
|
933
924
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXConversationMessageVideoComponent, decorators: [{
|
|
934
925
|
type: Component,
|
|
935
|
-
args: [{ selector: 'ax-conversation-message-video', template: `<video controls [src]="_videoUrl()"></video>`, standalone: false, styles: ["video{margin-bottom:.5rem;width:100%;border-radius:.75rem}\n"] }]
|
|
926
|
+
args: [{ selector: 'ax-conversation-message-video', template: `<video controls [src]="_videoUrl()"></video>`, standalone: false, styles: ["video{margin-bottom:.5rem;width:100%;height:15rem;border-radius:.75rem}\n"] }]
|
|
936
927
|
}] });
|
|
937
928
|
|
|
938
929
|
/**
|
|
@@ -1145,6 +1136,7 @@ const MODULES = [
|
|
|
1145
1136
|
AXPopoverModule,
|
|
1146
1137
|
AXFileModule,
|
|
1147
1138
|
AXRangeSliderModule,
|
|
1139
|
+
AXVirtualScrollModule,
|
|
1148
1140
|
];
|
|
1149
1141
|
class AXConversationModule {
|
|
1150
1142
|
static forRoot(config) {
|
|
@@ -1240,7 +1232,8 @@ class AXConversationModule {
|
|
|
1240
1232
|
AXAvatarModule,
|
|
1241
1233
|
AXPopoverModule,
|
|
1242
1234
|
AXFileModule,
|
|
1243
|
-
AXRangeSliderModule
|
|
1235
|
+
AXRangeSliderModule,
|
|
1236
|
+
AXVirtualScrollModule], exports: [AXConversationViewComponent,
|
|
1244
1237
|
AXConversationInputComponent,
|
|
1245
1238
|
AXConversationMessageComponent,
|
|
1246
1239
|
AXConversationTextMessageComponent,
|
|
@@ -1264,7 +1257,8 @@ class AXConversationModule {
|
|
|
1264
1257
|
AXAvatarModule,
|
|
1265
1258
|
AXPopoverModule,
|
|
1266
1259
|
AXFileModule,
|
|
1267
|
-
AXRangeSliderModule
|
|
1260
|
+
AXRangeSliderModule,
|
|
1261
|
+
AXVirtualScrollModule] }); }
|
|
1268
1262
|
}
|
|
1269
1263
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXConversationModule, decorators: [{
|
|
1270
1264
|
type: NgModule,
|