@acorex/components 19.0.0 → 19.1.0-next.0
Sign up to get free protection for your applications and to get access to all the features.
- 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,
|