@acorex/components 18.12.20 → 18.12.22

package/fesm2022/acorex-components-conversation.mjs

@@ -1,6 +1,6 @@
 import { AXEvent, MXInputBaseValueComponent, MXLookComponent, AXComponent, AXFocusableComponent, AXValuableComponent, MXBaseComponent, AXRippleDirective } from '@acorex/components/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, signal, Injectable, inject, computed, input, output, forwardRef, ChangeDetectionStrategy, ViewChild, viewChild, HostBinding, Renderer2, afterNextRender, ViewContainerRef, NgModule, Optional, Inject } from '@angular/core';
+import { Component, ViewEncapsulation, signal, Injectable, inject, computed, input, output, forwardRef, ChangeDetectionStrategy, ViewChild, viewChild, HostBinding, afterNextRender, ViewContainerRef, NgModule, Optional, Inject } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { classes } from 'polytype';
@@ -23,7 +23,6 @@ import * as i5 from '@acorex/components/popover';
 import { AXPopoverModule } from '@acorex/components/popover';
 import * as i5$1 from '@acorex/core/format';
 import { AXFormatModule } from '@acorex/core/format';
-import { fromEvent } from 'rxjs';
 import * as i3$1 from '@acorex/components/range-slider';
 import { AXRangeSliderModule } from '@acorex/components/range-slider';
 import { AXFileService, AXFileModule } from '@acorex/core/file';
@@ -458,11 +457,8 @@ class AXConversationMessageAudioComponent extends AXConversationMessageBaseCompo
         /**
          *  @ignore
          */
-        this.audioTag = viewChild('a');
-        /**
-         *  @ignore
-         */
-        this.renderer = inject(Renderer2);
+        // audioTag = viewChild<ElementRef<HTMLAudioElement>>('a');
+        this.audioTag = signal(new Audio());
         /**
          *  @ignore
          */
@@ -484,18 +480,26 @@ class AXConversationMessageAudioComponent extends AXConversationMessageBaseCompo
          */
         this.durationFormat = signal(0);
         afterNextRender(() => {
-            this.renderer.setAttribute(this.audioTag().nativeElement, 'src', this.message.content);
-            this.eventListeners();
+            this.audioTag().autoplay = false;
+            this.audioTag().src = this.message.content;
+            this.audioTag().addEventListener('ended', () => {
+                this.audioState.set('paused');
+                this.audioTag().pause();
+                this.audioTag().currentTime = 0;
+                this.currentTime.set(0);
+            });
+            this.audioTag().addEventListener('durationchange', () => {
+                if (this.audioTag().duration === Infinity)
+                    return;
+                this.duration.set(this.audioTag().duration);
+                this.durationFormat.set(Math.ceil(this.audioTag().duration) * 1000);
+            });
+            this.audioTag().addEventListener('timeupdate', () => {
+                this.currentTime.set(this.audioTag().currentTime);
+                this.currentTimeFormat.set(Math.ceil(this.audioTag().currentTime * 1000));
+            });
         });
     }
-    /**
-     *  @ignore
-     */
-    eventListeners() {
-        this.ended();
-        this.durationChange();
-        this.timeUpdate();
-    }
     /**
      * Seeks to the specified time and resumes audio playback.
      *
@@ -503,9 +507,7 @@ class AXConversationMessageAudioComponent extends AXConversationMessageBaseCompo
      * @ignore
      */
     clickHandler(e) {
-        this.audioTag().nativeElement.pause();
-        this.audioTag().nativeElement.currentTime = e;
-        this.audioTag().nativeElement.play();
+        this.audioTag().currentTime = e;
     }
     /**
      * Pauses the audio and updates the state to 'paused'.
@@ -513,7 +515,7 @@ class AXConversationMessageAudioComponent extends AXConversationMessageBaseCompo
      */
     handlePauseClick() {
         this.audioState.set('paused');
-        this.audioTag().nativeElement.pause();
+        this.audioTag().pause();
     }
     /**
      * Plays the audio and updates the state to 'playing'.\
@@ -521,7 +523,7 @@ class AXConversationMessageAudioComponent extends AXConversationMessageBaseCompo
      */
     handlePlayClick() {
         this.audioState.set('playing');
-        this.audioTag().nativeElement.play();
+        this.audioTag().play();
     }
     /**
      * Toggles the playback rate of the audio between 1x, 1.5x, and 2x.
@@ -530,53 +532,23 @@ class AXConversationMessageAudioComponent extends AXConversationMessageBaseCompo
     handleRateClick() {
         if (this.audioRate() === 1) {
             this.audioRate.set(1.5);
-            this.audioTag().nativeElement.playbackRate = 1.5;
+            this.audioTag().playbackRate = 1.5;
         }
         else if (this.audioRate() === 1.5) {
             this.audioRate.set(2);
-            this.audioTag().nativeElement.playbackRate = 2;
+            this.audioTag().playbackRate = 2;
         }
         else if (this.audioRate() === 2) {
             this.audioRate.set(1);
-            this.audioTag().nativeElement.playbackRate = 1;
+            this.audioTag().playbackRate = 1;
         }
     }
-    /**
-     *  @ignore
-     */
-    ended() {
-        fromEvent(this.audioTag().nativeElement, 'ended').subscribe((e) => {
-            this.audioState.set('paused');
-            this.audioTag().nativeElement.pause();
-            this.audioTag().nativeElement.currentTime = 0;
-        });
-    }
-    /**
-     *  @ignore
-     */
-    durationChange() {
-        fromEvent(this.audioTag().nativeElement, 'durationchange').subscribe((e) => {
-            if (this.audioTag().nativeElement.duration === Infinity)
-                return;
-            this.duration.set(this.audioTag().nativeElement.duration);
-            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);
-            this.currentTimeFormat.set(Math.ceil(this.audioTag().nativeElement.currentTime * 1000));
-        });
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXConversationMessageAudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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-range-slider\n  class=\"ax-modify-bgSlider\"\n  (ngModelChange)=\"clickHandler($event)\"\n  [max]=\"duration()\"\n  [min]=\"0\"\n  mode=\"single\"\n  [ngModel]=\"currentTime()\"\n  color=\"secondary\"\n>\n</ax-range-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{width:14rem;margin:0 1rem}\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.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "pipe", type: i4$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXConversationMessageAudioComponent, selector: "ax-conversation-message-audio", usesInheritance: true, ngImport: i0, template: "<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-range-slider\n  class=\"ax-modify-bgSlider\"\n  (ngModelChange)=\"clickHandler($event)\"\n  [max]=\"duration()\"\n  [min]=\"0\"\n  mode=\"single\"\n  [ngModel]=\"currentTime()\"\n  color=\"secondary\"\n>\n</ax-range-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{width:14rem;margin:0 1rem}\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.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "pipe", type: i4$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXConversationMessageAudioComponent, decorators: [{
             type: Component,
-            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-range-slider\n  class=\"ax-modify-bgSlider\"\n  (ngModelChange)=\"clickHandler($event)\"\n  [max]=\"duration()\"\n  [min]=\"0\"\n  mode=\"single\"\n  [ngModel]=\"currentTime()\"\n  color=\"secondary\"\n>\n</ax-range-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{width:14rem;margin:0 1rem}\n"] }]
+            args: [{ selector: 'ax-conversation-message-audio', encapsulation: ViewEncapsulation.None, template: "<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-range-slider\n  class=\"ax-modify-bgSlider\"\n  (ngModelChange)=\"clickHandler($event)\"\n  [max]=\"duration()\"\n  [min]=\"0\"\n  mode=\"single\"\n  [ngModel]=\"currentTime()\"\n  color=\"secondary\"\n>\n</ax-range-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{width:14rem;margin:0 1rem}\n"] }]
         }], ctorParameters: () => [] });
 
 /**