@acorex/components 18.5.16 → 18.6.0

package/fesm2022/acorex-components-conversation.mjs

@@ -39,6 +39,10 @@ import { AXDateTimeModule } from '@acorex/core/date-time';
 class AXConversationActionEvent extends AXEvent {
 }
 
+/**
+ * A container for displaying and managing conversations.
+ * @category Components
+ */
 class AXConversationContainerComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXConversationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXConversationContainerComponent, selector: "ax-conversation-container", ngImport: i0, template: "<div class=\"ax-conversation-container\">\n  <ng-content> </ng-content>\n</div>\n", styles: ["ax-conversation-container{width:100%}\n"], encapsulation: i0.ViewEncapsulation.None }); }
@@ -134,31 +138,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             type: Injectable
         }] });
 
+/**
+ * An input component for entering conversation messages.
+ *
+ * @category Components
+ */
 class AXConversationInputComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
     constructor() {
         super(...arguments);
+        /**
+         *  @ignore
+         */
         this.conversationService = inject(AXConversationService);
+        /**
+         *  @ignore
+         */
         this.chats = computed(() => {
             return this.conversationService.chats();
         });
+        /**
+         *  @ignore
+         */
         this.replyChat = computed(() => {
             const findMessage = this.chats().find((item) => item.id === this.conversationService.replyId());
             return findMessage;
         });
+        /** Maximum length of input text */
         this.maxLength = input();
+        /** Indicates if an attachment is present */
         this.hasAttachment = input();
+        /** Indicates if voice recording is enabled */
         this.haVoice = input();
+        /** Acceptable file types for attachment */
         this.acceptFileType = input('*');
+        /**
+         * Emitted when the send button is clicked.
+         *
+         * @event
+         */
         this.onSendClick = output();
+        /**
+         * Emitted when recording starts.
+         *
+         * @event
+         */
         this.onStartRecording = output();
+        /**
+         * Emitted when recording is canceled.
+         *
+         * @event
+         */
         this.onCancelRecording = output();
+        /**
+         *  @ignore
+         */
         this.recording = signal(false);
+        /**
+         *  @ignore
+         */
         this.recordingService = inject(AXRecordingService);
+        /**
+         *  @ignore
+         */
         this._updateOn = 'change';
     }
+    /**
+     *  @ignore
+     */
     _handleModelChange(value) {
         this.commitValue(value, true);
     }
+    /**
+     * Initiates recording when the record button is clicked.
+     * Emits an event when recording starts.
+     * @ignore
+     */
     handleRecordClick() {
         this.recording.set(true);
         this.recordingService
@@ -174,6 +228,10 @@ class AXConversationInputComponent extends classes((MXInputBaseValueComponent),
             throw e;
         });
     }
+    /**
+     * Cancels the recording and emits an event to indicate cancellation.
+     * @ignore
+     */
     handleCancelRecordingClick() {
         this.recording.set(false);
         this.onCancelRecording.emit({
@@ -181,15 +239,27 @@ class AXConversationInputComponent extends classes((MXInputBaseValueComponent),
             data: { value: null },
         });
     }
+    /**
+     * Opens the file picker for attachment.
+     * @ignore
+     */
     handleAttachClick() {
         this.inputFile.nativeElement.click();
     }
+    /**
+     * Emits the selected files when the file input changes.
+     * @ignore
+     */
     handleChangeFile(event) {
         this.onSendClick.emit({
             component: this,
             data: { value: event.target.files, type: 'file' },
         });
     }
+    /**
+     * Emits the text value and optional replyChat when the send button is clicked.
+     * @ignore
+     */
     handleSendClick() {
         this.onSendClick.emit({
             component: this,
@@ -198,6 +268,10 @@ class AXConversationInputComponent extends classes((MXInputBaseValueComponent),
         });
         this.conversationService.replyId.set('');
     }
+    /**
+     * Ends recording and emits the recorded voice data when the send voice button is clicked.
+     * @ignore
+     */
     handleSendVoiceClick() {
         this.recordingService.endRecording().then((c) => {
             this.recording.set(false);
@@ -208,6 +282,10 @@ class AXConversationInputComponent extends classes((MXInputBaseValueComponent),
             });
         });
     }
+    /**
+     * Clears the reply ID when closing a reply.
+     * @ignore
+     */
     closeReplyHandler() {
         this.conversationService.replyId.set('');
     }
@@ -258,23 +336,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * A component for displaying individual conversation messages.
+ *
+ * @category Components
+ */
 class AXConversationMessageComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
+        /**
+         *  @ignore
+         */
         this.popover = viewChild('popover');
+        /**
+         *  @ignore
+         */
         this.conversationService = inject(AXConversationService);
+        /**
+         * The message data to display in the conversation.
+         */
         this.chatMessage = input();
+        /**
+         *  @ignore
+         */
         this.registryService = inject(AXConversationMessageTypeRegistryService);
     }
+    /**
+     *  @ignore
+     */
     get isOwn() {
         return !this.chatMessage().fromId;
     }
+    /**
+     *  @ignore
+     */
     get __hostClass() {
         return `${this.isOwn ? 'ax-state-own' : ''} ${!this.isOwn ? 'ax-state-other' : ''}`;
     }
+    /**
+     *  @ignore
+     */
     ngOnInit() {
         this._portal = new ComponentPortal(this.registryService.resolve(this.chatMessage().type).component);
     }
+    /**
+     *  @ignore
+     */
     _handleAttached(ref) {
         ref = ref;
         if (ref.instance && isBrowser()) {
@@ -294,14 +401,23 @@ class AXConversationMessageComponent extends MXBaseComponent {
             }
         }
     }
+    /**
+     *  @ignore
+     */
     handleResendClick() {
         this.popover()?.close();
         this.chatMessage().onResendClick();
     }
+    /**
+     *  @ignore
+     */
     handleDeleteClick() {
         this.popover()?.close();
         this.chatMessage().onDeleteClick();
     }
+    /**
+     *  @ignore
+     */
     replyHandler(e) {
         this.conversationService.replyId.set(e);
     }
@@ -324,40 +440,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             type: Injectable
         }] });
 
+/**
+ * Component for displaying audio messages in a conversation.
+ *
+ * @category Components
+ */
 class AXConversationMessageAudioComponent extends AXConversationMessageBaseComponent {
+    /**
+     *  @ignore
+     */
     constructor() {
         super();
+        /**
+         *  @ignore
+         */
         this.audioState = signal('paused');
+        /**
+         *  @ignore
+         */
         this.audioTag = viewChild('a');
+        /**
+         *  @ignore
+         */
         this.renderer = inject(Renderer2);
+        /**
+         *  @ignore
+         */
         this.audioRate = signal(1);
+        /**
+         *  @ignore
+         */
         this.currentTime = signal(0);
+        /**
+         *  @ignore
+         */
         this.duration = signal(0);
+        /**
+         *  @ignore
+         */
         this.currentTimeFormat = signal(0);
+        /**
+         *  @ignore
+         */
         this.durationFormat = signal(0);
         afterNextRender(() => {
             this.renderer.setAttribute(this.audioTag().nativeElement, 'src', this.message.content);
             this.eventListeners();
         });
     }
+    /**
+     *  @ignore
+     */
     eventListeners() {
         this.ended();
         this.durationChange();
         this.timeUpdate();
     }
+    /**
+     * Seeks to the specified time and resumes audio playback.
+     *
+     * @param e - Time in seconds to seek to.
+     * @ignore
+     */
     clickHandler(e) {
         this.audioTag().nativeElement.pause();
         this.audioTag().nativeElement.currentTime = e;
         this.audioTag().nativeElement.play();
     }
+    /**
+     * Pauses the audio and updates the state to 'paused'.
+     * @ignore
+     */
     handlePauseClick() {
         this.audioState.set('paused');
         this.audioTag().nativeElement.pause();
     }
+    /**
+     * Plays the audio and updates the state to 'playing'.\
+     * @ignore
+     */
     handlePlayClick() {
         this.audioState.set('playing');
         this.audioTag().nativeElement.play();
     }
+    /**
+     * Toggles the playback rate of the audio between 1x, 1.5x, and 2x.
+     * @ignore
+     */
     handleRateClick() {
         if (this.audioRate() === 1) {
             this.audioRate.set(1.5);
@@ -372,6 +541,9 @@ class AXConversationMessageAudioComponent extends AXConversationMessageBaseCompo
             this.audioTag().nativeElement.playbackRate = 1;
         }
     }
+    /**
+     *  @ignore
+     */
     ended() {
         fromEvent(this.audioTag().nativeElement, 'ended').subscribe((e) => {
             this.audioState.set('paused');
@@ -379,6 +551,9 @@ class AXConversationMessageAudioComponent extends AXConversationMessageBaseCompo
             this.audioTag().nativeElement.currentTime = 0;
         });
     }
+    /**
+     *  @ignore
+     */
     durationChange() {
         fromEvent(this.audioTag().nativeElement, 'durationchange').subscribe((e) => {
             if (this.audioTag().nativeElement.duration === Infinity)
@@ -387,6 +562,9 @@ class AXConversationMessageAudioComponent extends AXConversationMessageBaseCompo
             this.durationFormat.set(Math.ceil(this.audioTag().nativeElement.duration) * 1000);
         });
     }
+    /**
+     *  @ignore
+     */
     timeUpdate() {
         fromEvent(this.audioTag().nativeElement, 'timeupdate').subscribe((e) => {
             this.currentTime.set(this.audioTag().nativeElement.currentTime);
@@ -401,11 +579,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             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"] }]
         }], ctorParameters: () => [] });
 
+/**
+ * Displays the conversation view with messages and interactions.
+ *
+ * @category Components
+ */
 class AXConversationViewComponent extends MXBaseComponent {
+    /**
+     *  @ignore
+     */
     constructor() {
         super();
+        /**
+         *  @ignore
+         */
         this.conversationService = inject(AXConversationService);
+        /**
+         * Emits an event when an action is performed within the conversation view.
+         *
+         * @event
+         */
         this.onAction = output();
+        /**
+         *  @ignore
+         */
         this.conversations = computed(() => {
             return this.conversationService.chats();
         });
@@ -414,6 +611,9 @@ class AXConversationViewComponent extends MXBaseComponent {
             this.scrollIntoEndOfView();
         });
     }
+    /**
+     *  @ignore
+     */
     scrollIntoEndOfView() {
         const el = this.viewRef.element.nativeElement;
         el.scroll({ top: el.scrollHeight });
@@ -427,14 +627,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
         }], ctorParameters: () => [] });
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
+/**
+ * Component for displaying file messages in a conversation.
+ *
+ * @category Components
+ */
 class AXConversationFileMessageComponent extends AXConversationMessageBaseComponent {
+    /**
+     *  @ignore
+     */
     constructor() {
         super();
+        /**
+         *  @ignore
+         */
         this.fileState = signal('ready');
+        /**
+         *  @ignore
+         */
         this.fileSize = signal(null);
+        /**
+         *  @ignore
+         */
         this.fileName = signal('');
+        /**
+         *  @ignore
+         */
         this.fileService = inject(AXFileService);
+        /**
+         *  @ignore
+         */
         this.http = inject(HttpClient);
+        /**
+         *  @ignore
+         */
         this.parent = inject(AXConversationViewComponent);
         afterNextRender(() => {
             if (this.message.name) {
@@ -447,9 +673,17 @@ class AXConversationFileMessageComponent extends AXConversationMessageBaseCompon
             }
         });
     }
+    /**
+     * Emits a download action event for the file.
+     * @ignore
+     */
     handleDownloadFile() {
         this.parent.onAction.emit({ component: this, data: this.message, isUserInteraction: true });
     }
+    /**
+     * Emits a cancel action event for the file loading.
+     * @ignore
+     */
     handleCancelLoading() {
         this.parent.onAction.emit({ component: this, data: this.message, isUserInteraction: true });
     }
@@ -461,7 +695,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             args: [{ selector: 'ax-conversation-message-file', encapsulation: ViewEncapsulation.None, template: "<ax-prefix>\n  {{ fileSize() | format: 'filesize' | async }}\n</ax-prefix>\n<div class=\"ax-file-container\">\n  <div class=\"ax-conversation-controller\">\n    @switch (fileState()) {\n      @case ('ready') {\n        <button (click)=\"handleDownloadFile()\">\n          <i class=\"ax-icon ax-icon-download\"></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\n  <div class=\"ax-file-name\">{{ fileName() }}</div>\n</div>\n", styles: ["ax-conversation-message-file .ax-file-container{display:flex;align-items:center;justify-content:center;gap:.5rem}ax-conversation-message-file .ax-file-container .ax-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [] });
 
+/**
+ * A popup component for displaying an image in full view.
+ *
+ * @category Components
+ */
 class ConversationMessageImagePopupComponent {
+    /**
+     *  @ignore
+     */
     constructor() {
         afterNextRender(() => {
             console.log(this.url);
@@ -475,11 +717,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             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"] }]
         }], ctorParameters: () => [] });
 
+/**
+ * A component for displaying an image within a conversation message.
+ *
+ * @category Components
+ */
 class AXConversationMessageImageComponent extends AXConversationMessageBaseComponent {
+    /**
+     *  @ignore
+     */
     constructor() {
         super();
+        /**
+         *  @ignore
+         */
         this._imageUrl = signal('');
+        /**
+         *  @ignore
+         */
         this.popup = inject(AXPopupService);
+        /**
+         *  @ignore
+         */
         this._options = {
             header: true,
             footer: false,
@@ -493,6 +752,10 @@ class AXConversationMessageImageComponent extends AXConversationMessageBaseCompo
             this._imageUrl.set(this.message?.content);
         });
     }
+    /**
+     * Opens a popup displaying the image with options for draggable, size, and backdrop.
+     * @ignore
+     */
     openPopup() {
         this.popup
             .open(ConversationMessageImagePopupComponent, {
@@ -518,17 +781,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             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"] }]
         }], ctorParameters: () => [] });
 
+/**
+ * A component for displaying a text message with optional reply content, including text, images, videos, files, and audio.
+ *
+ * @category Components
+ */
 class AXConversationTextMessageComponent extends AXConversationMessageBaseComponent {
     constructor() {
         super(...arguments);
+        /**
+         *  @ignore
+         */
         this._text = signal('');
+        /**
+         *  @ignore
+         */
         this.replyText = signal(null);
+        /**
+         *  @ignore
+         */
         this.replyImage = signal(null);
+        /**
+         *  @ignore
+         */
         this.replyVideo = signal(null);
+        /**
+         *  @ignore
+         */
         this.replyAudio = signal(null);
+        /**
+         *  @ignore
+         */
         this.replyVoice = signal(null);
+        /**
+         *  @ignore
+         */
         this.replyFile = signal(null);
     }
+    /**
+     *  @ignore
+     */
     ngOnInit() {
         this._text.set(this.message?.content);
         if (!this.message?.replyTo)
@@ -616,11 +908,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
   `, encapsulation: ViewEncapsulation.None, inputs: ['message'], styles: [".ax-text-message{word-break:break-all;white-space:break-spaces}\n"] }]
         }] });
 
+/**
+ * A component for displaying a video message with playback controls.
+ *
+ * @category Components
+ */
 class AXConversationMessageVideoComponent extends AXConversationMessageBaseComponent {
     constructor() {
         super(...arguments);
+        /**
+         *  @ignore
+         */
         this._videoUrl = signal('');
     }
+    /**
+     *  @ignore
+     */
     ngOnInit() {
         this._videoUrl.set(this.message?.content);
         console.log(this._videoUrl());
@@ -633,17 +936,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             args: [{ selector: 'ax-conversation-message-video', template: `<video controls [src]="_videoUrl()"></video>`, styles: ["video{margin-bottom:.5rem;width:100%;border-radius:.75rem}\n"] }]
         }] });
 
+/**
+ * A component for displaying and handling audio messages in a conversation.
+ *
+ * @category Components
+ */
 class AXConversationVoiceMessageComponent extends AXConversationMessageBaseComponent {
+    /**
+     *  @ignore
+     */
     constructor() {
         super();
+        /**
+         *  @ignore
+         */
         this.config = { url: '' };
+        /**
+         *  @ignore
+         */
         this.audioState = signal('paused');
+        /**
+         *  @ignore
+         */
         this.parent = inject(AXConversationViewComponent);
+        /**
+         *  @ignore
+         */
         this.selectedRate = signal(1);
+        /**
+         *  @ignore
+         */
         this.selectedRateIndex = signal(1);
+        /**
+         *  @ignore
+         */
         this.audioProgress = signal(0);
+        /**
+         *  @ignore
+         */
         this.timeLeft = signal(0);
+        /**
+         *  @ignore
+         */
         this.currentTime = signal(0);
+        /**
+         *  @ignore
+         */
         this.duration = signal(0);
         afterNextRender(() => {
             this.config.url = this.message?.content;
@@ -655,6 +993,9 @@ class AXConversationVoiceMessageComponent extends AXConversationMessageBaseCompo
             this.handleLoadingProgress();
         });
     }
+    /**
+     *  @ignore
+     */
     setWaveColor() {
         let waveColor = '';
         let progressColor = '';
@@ -669,15 +1010,28 @@ class AXConversationVoiceMessageComponent extends AXConversationMessageBaseCompo
         this.config.waveColor = waveColor;
         this.config.progressColor = progressColor;
     }
+    /**
+     * Pauses the audio playback and updates the audio state to 'paused'.
+     * @ignore
+     */
     handlePauseClick() {
         this.audio?.pause();
         this.audioState.set('paused');
     }
+    /**
+     * Plays the audio and updates the audio state to 'playing'.
+     * @ignore
+     */
     handlePlayClick() {
         this.audio?.play()?.then(() => {
             this.audioState.set('playing');
         });
     }
+    /**
+     * Updates audio state and progress based on status changes from the audio wave.
+     * @param e - The event containing status and data related to the audio.
+     * @ignore
+     */
     handleOnStatusChanged(e) {
         if (e.status === 'load' || e.status === 'loading') {
             this.audioState.set('loading');
@@ -701,17 +1055,32 @@ class AXConversationVoiceMessageComponent extends AXConversationMessageBaseCompo
             this.audioState.set('error');
         }
     }
+    /**
+     *  @ignore
+     */
     handleLoadingProgress() {
         // this.audioLoaderProgress?.nativeElement.style.cssText = `--ax-audio-progress: ${this.audioProgress()}`;
     }
+    /**
+     * Handles the cancellation of a loading operation.
+     * @ignore
+     */
     handleCancelLoading() {
         //
     }
+    /**
+     * Reloads the audio and updates the state to 'loading'.
+     * @ignore
+     */
     handleReloadClick() {
         //
         this.audioState.set('loading');
         this.audio.load();
     }
+    /**
+     * Cycles through predefined audio playback rates and updates the rate.
+     * @ignore
+     */
     handleRateClick() {
         const rates = [0.5, 1, 2, 4];
         if (this.selectedRateIndex() == rates.length - 1) {
@@ -723,6 +1092,9 @@ class AXConversationVoiceMessageComponent extends AXConversationMessageBaseCompo
         this.selectedRate.set(rates[this.selectedRateIndex()]);
         this.audio.setRate(this.selectedRate());
     }
+    /**
+     *  @ignore
+     */
     get __hostClass() {
         return `${this.message.fromId ? 'ax-state-other' : 'ax-state-own'}`;
     }