@libs-ui/components-audio 0.1.1-1

package/README.md

@@ -0,0 +1,347 @@
+# Audio Component
+
+## Giới thiệu
+
+`audio` là một component mạnh mẽ dùng để phát âm thanh trong ứng dụng Angular. Component này cung cấp giao diện đơn giản để phát, tạm dừng và điều khiển các tệp âm thanh với nhiều tính năng.
+
+## Tính năng
+
+- Phát/tạm dừng âm thanh
+- Điều chỉnh âm lượng với chức năng tắt/bật tiếng
+- Hiển thị thời gian theo định dạng HH:MM:SS
+- Thanh tiến độ với chức năng tua nhanh/tua lại
+- Tải xuống audio với kiểm soát quyền
+- Function Control API cho phép điều khiển từ bên ngoài
+- Thiết kế responsive
+- Source audio có thể cấu hình
+
+## Cài đặt
+
+Để cài đặt component `audio`, sử dụng npm hoặc yarn:
+
+```bash
+npm install @libs-ui/components-audio
+```
+
+hoặc
+
+```bash
+yarn add @libs-ui/components-audio
+```
+
+## Sử dụng
+
+### Import module
+
+```typescript
+import { LibsUiComponentsAudioComponent } from '@libs-ui/components-audio';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, LibsUiComponentsAudioComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+Hoặc trong component standalone:
+
+```typescript
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LibsUiComponentsAudioComponent } from '@libs-ui/components-audio';
+import { IAudioFunctionControlEvent } from '@libs-ui/components-audio';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [CommonModule, LibsUiComponentsAudioComponent],
+  template: `
+    <libs_ui-components-audio
+      [fileAudio]="audioSource"
+      [checkPermissionDownloadAudio]="checkDownloadPermission"
+      (outFunctionsControl)="registerFunctions($event)"></libs_ui-components-audio>
+
+    <div class="controls">
+      <button (click)="playAudio()">Phát/Tạm dừng</button>
+      <button (click)="toggleMute()">Bật/Tắt tiếng</button>
+    </div>
+  `,
+})
+export class ExampleComponent {
+  audioSource = 'path/to/audio/file.mp3';
+  functionControls: IAudioFunctionControlEvent | null = null;
+
+  checkDownloadPermission(): Promise<boolean> {
+    // Kiểm tra quyền download
+    return Promise.resolve(true);
+  }
+
+  registerFunctions(event: IAudioFunctionControlEvent) {
+    this.functionControls = event;
+  }
+
+  playAudio() {
+    if (this.functionControls) {
+      this.functionControls.playPause();
+    }
+  }
+
+  toggleMute() {
+    if (this.functionControls) {
+      this.functionControls.toggleMute();
+    }
+  }
+}
+```
+
+## API Reference
+
+### Inputs
+
+| Tên                          | Kiểu                     | Mặc định | Mô tả                                                                        |
+| ---------------------------- | ------------------------ | -------- | ---------------------------------------------------------------------------- |
+| fileAudio                    | `string`                 | required | URL của file audio cần phát.                                                 |
+| checkPermissionDownloadAudio | `() => Promise<boolean>` | required | Function trả về promise với kết quả boolean cho biết nếu được phép download. |
+
+### Outputs
+
+| Tên                 | Kiểu                                        | Mô tả                                                   |
+| ------------------- | ------------------------------------------- | ------------------------------------------------------- |
+| outFunctionsControl | `IAudioFunctionControlEvent`                | Event chứa các hàm điều khiển của audio component.      |
+| outVolumeControl    | `number`                                    | Phát ra giá trị âm lượng hiện tại (0-100).              |
+| outTimeUpdate       | `{ currentTime: string, duration: string }` | Phát ra thông tin thời gian hiện tại và tổng thời gian. |
+| outEnded            | `void`                                      | Phát ra khi audio kết thúc phát.                        |
+| outMute             | `boolean`                                   | Phát ra trạng thái tắt/bật tiếng.                       |
+| outPlay             | `boolean`                                   | Phát ra trạng thái phát/tạm dừng.                       |
+
+### Các phương thức (qua outFunctionsControl)
+
+| Tên phương thức | Tham số         | Kiểu trả về | Mô tả                                            |
+| --------------- | --------------- | ----------- | ------------------------------------------------ |
+| playPause       | `event?: Event` | `void`      | Bắt đầu/tạm dừng phát audio.                     |
+| toggleMute      | `event?: Event` | `void`      | Bật/tắt âm thanh.                                |
+| setVolume       | `value: number` | `void`      | Điều chỉnh âm lượng (0-100).                     |
+| seekTo          | `value: number` | `void`      | Di chuyển đến vị trí cụ thể trong audio (0-100). |
+| download        | `event?: Event` | `void`      | Tải xuống file audio.                            |
+| isPlaying       | `-`             | `boolean`   | Kiểm tra trạng thái đang phát audio.             |
+| isMuted         | `-`             | `boolean`   | Kiểm tra trạng thái tắt tiếng.                   |
+
+## Interfaces
+
+```typescript
+// Audio Function Control Event
+interface IAudioFunctionControlEvent {
+  playPause: (event?: Event) => void;
+  toggleMute: (event?: Event) => void;
+  setVolume: (value: number) => void;
+  seekTo: (value: number) => void;
+  download: (event?: Event) => void;
+  isPlaying: () => boolean;
+  isMuted: () => boolean;
+}
+```
+
+## Styling Volume Slider
+
+Để tạo hiệu ứng thanh trượt âm lượng có màu nền thay đổi theo giá trị, bạn có thể sử dụng CSS variables:
+
+```css
+/* Định nghĩa thanh trượt âm lượng */
+input[type='range'].volume-slider {
+  background: linear-gradient(to right, #3b82f6 var(--volume-percent, 50%), #e5e7eb var(--volume-percent, 50%));
+}
+
+/* Track styling cho WebKit browsers */
+input[type='range'].volume-slider::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, #3b82f6 var(--volume-percent, 50%), #e5e7eb var(--volume-percent, 50%));
+}
+
+/* Track styling cho Firefox */
+input[type='range'].volume-slider::-moz-range-track {
+  background: linear-gradient(to right, #3b82f6 var(--volume-percent, 50%), #e5e7eb var(--volume-percent, 50%));
+}
+```
+
+Và trong template:
+
+```html
+<input
+  type="range"
+  min="0"
+  max="100"
+  [value]="volumePercent()"
+  (input)="changeVolume($event)"
+  class="volume-slider"
+  [style.--volume-percent.%]="volumePercent()" />
+```
+
+## Ví dụ
+
+### Sử dụng Function Control
+
+```typescript
+import { Component, signal, computed } from '@angular/core';
+import { IAudioFunctionControlEvent } from '@libs-ui/components-audio';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <libs_ui-components-audio
+      [fileAudio]="audioSource()"
+      [checkPermissionDownloadAudio]="checkDownloadPermission"
+      (outFunctionsControl)="registerFunctions($event)"></libs_ui-components-audio>
+
+    <div class="audio-controls">
+      <button (click)="playPauseAudio()">{{ isPlaying() ? 'Tạm dừng' : 'Phát' }}</button>
+      <button (click)="toggleMuteAudio()">{{ isMuted() ? 'Bật tiếng' : 'Tắt tiếng' }}</button>
+      <div class="volume-control">
+        <span>Âm lượng:</span>
+        <input
+          type="range"
+          min="0"
+          max="100"
+          [value]="volumePercent()"
+          (input)="changeVolume($event)"
+          class="volume-slider"
+          [style.--volume-percent.%]="volumePercent()" />
+        <span>{{ volumePercent() }}%</span>
+      </div>
+      <div class="progress-control">
+        <span>Tiến độ:</span>
+        <input
+          type="range"
+          min="0"
+          max="100"
+          [value]="progress()"
+          (input)="changeProgress($event)" />
+        <span>{{ progress() }}%</span>
+      </div>
+      <button (click)="downloadAudio()">Tải xuống</button>
+    </div>
+  `,
+})
+export class ExampleComponent {
+  audioSource = signal('path/to/audio.mp3');
+  functionControls: IAudioFunctionControlEvent | null = null;
+  isPlaying = signal(false);
+  isMuted = signal(false);
+  volume = signal(80);
+  progress = signal(0);
+
+  // Computed properties
+  volumePercent = computed(() => Math.round(this.volume()));
+
+  checkDownloadPermission = (): Promise<boolean> => {
+    return Promise.resolve(true);
+  };
+
+  registerFunctions(event: IAudioFunctionControlEvent) {
+    this.functionControls = event;
+
+    // Initialize state
+    if (this.functionControls) {
+      this.isPlaying.set(this.functionControls.isPlaying());
+      this.isMuted.set(this.functionControls.isMuted());
+    }
+  }
+
+  playPauseAudio() {
+    if (this.functionControls) {
+      this.functionControls.playPause();
+      this.isPlaying.set(this.functionControls.isPlaying());
+    }
+  }
+
+  toggleMuteAudio() {
+    if (this.functionControls) {
+      this.functionControls.toggleMute();
+      this.isMuted.set(this.functionControls.isMuted());
+    }
+  }
+
+  changeVolume(event: Event) {
+    if (this.functionControls && event.target) {
+      const value = parseInt((event.target as HTMLInputElement).value);
+      this.volume.set(value);
+      this.functionControls.setVolume(value / 100); // Convert to 0-1 range
+    }
+  }
+
+  changeProgress(event: Event) {
+    if (this.functionControls && event.target) {
+      const value = parseInt((event.target as HTMLInputElement).value);
+      this.progress.set(value);
+      this.functionControls.seekTo(value);
+    }
+  }
+
+  downloadAudio() {
+    if (this.functionControls) {
+      this.functionControls.download();
+    }
+  }
+}
+```
+
+### Sử dụng Events
+
+Sử dụng các events để phản ứng với thay đổi từ audio player:
+
+```typescript
+import { Component, signal } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <libs_ui-components-audio
+      [fileAudio]="audioSource()"
+      [checkPermissionDownloadAudio]="checkPermission"
+      (outTimeUpdate)="handleTimeUpdate($event)"
+      (outVolumeControl)="handleVolumeChange($event)"
+      (outPlay)="handlePlayChange($event)"
+      (outMute)="handleMuteChange($event)"
+      (outEnded)="handleEnded()"></libs_ui-components-audio>
+
+    <div class="audio-info">
+      <p>Trạng thái: {{ isPlaying() ? 'Đang phát' : 'Tạm dừng' }}</p>
+      <p>Thời gian hiện tại: {{ currentTime() }}</p>
+      <p>Tổng thời gian: {{ duration() }}</p>
+      <p>Âm lượng: {{ volumeLevel() }}%</p>
+    </div>
+  `,
+})
+export class ExampleComponent {
+  audioSource = signal('path/to/audio.mp3');
+  isPlaying = signal(false);
+  isMuted = signal(false);
+  currentTime = signal('00:00:00');
+  duration = signal('00:00:00');
+  volumeLevel = signal(100);
+
+  checkPermission = (): Promise<boolean> => {
+    return Promise.resolve(true);
+  };
+
+  handleTimeUpdate(timeInfo: { currentTime: string; duration: string }) {
+    this.currentTime.set(timeInfo.currentTime);
+    this.duration.set(timeInfo.duration);
+  }
+
+  handleVolumeChange(volume: number) {
+    this.volumeLevel.set(volume);
+  }
+
+  handlePlayChange(isPlaying: boolean) {
+    this.isPlaying.set(isPlaying);
+  }
+
+  handleMuteChange(isMuted: boolean) {
+    this.isMuted.set(isMuted);
+  }
+
+  handleEnded() {
+    this.isPlaying.set(false);
+  }
+}
+```

package/audio.component.d.ts

@@ -0,0 +1,45 @@
+import { AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
+import { IAudioFunctionControlEvent } from './interfaces/function-control-event.interface';
+import * as i0 from "@angular/core";
+export declare class LibsUiComponentsAudioComponent implements AfterViewInit, OnDestroy {
+    protected audioRatioValue: import("@angular/core").WritableSignal<number>;
+    protected volumeRatioValue: import("@angular/core").WritableSignal<number>;
+    protected isPlay: import("@angular/core").WritableSignal<boolean>;
+    protected isMute: import("@angular/core").WritableSignal<boolean>;
+    protected isSliderAudioPress: import("@angular/core").WritableSignal<boolean>;
+    protected isDisable: import("@angular/core").WritableSignal<boolean>;
+    protected audioTimeCurrent: import("@angular/core").WritableSignal<string>;
+    protected audioTimeDuration: import("@angular/core").WritableSignal<string>;
+    protected showFullControlVolume: import("@angular/core").WritableSignal<boolean>;
+    private onDestroy;
+    readonly fileAudio: import("@angular/core").InputSignal<string>;
+    readonly checkPermissionDownloadAudio: import("@angular/core").InputSignal<() => Promise<boolean>>;
+    readonly audioRef: import("@angular/core").Signal<ElementRef<any>>;
+    readonly volumeControlRef: import("@angular/core").Signal<ElementRef<any>>;
+    readonly outFunctionsControl: import("@angular/core").OutputEmitterRef<IAudioFunctionControlEvent>;
+    readonly outVolumeControl: import("@angular/core").OutputEmitterRef<number>;
+    readonly outTimeUpdate: import("@angular/core").OutputEmitterRef<{
+        currentTime: string;
+        duration: string;
+    }>;
+    readonly outEnded: import("@angular/core").OutputEmitterRef<void>;
+    readonly outMute: import("@angular/core").OutputEmitterRef<boolean>;
+    readonly outPlay: import("@angular/core").OutputEmitterRef<boolean>;
+    constructor();
+    ngAfterViewInit(): void;
+    get FunctionsControl(): IAudioFunctionControlEvent;
+    private initObservable;
+    protected handlerKeyPressAudio(): Promise<void>;
+    protected handlerAudioMuteMuted(event?: Event): Promise<void>;
+    protected handlerAudioPausePlay(event?: Event): Promise<void>;
+    protected handlerLoadedData(event: Event): Promise<void>;
+    protected handlerTimeUpdate(event?: Event): Promise<void>;
+    private toHHMMSS;
+    protected handlerChangeAudio(value: number): Promise<void>;
+    protected handlerChangeVolume(value: number): Promise<void>;
+    protected handlerEnded(event: Event): Promise<void>;
+    protected handlerDownload(e?: Event): Promise<void>;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsAudioComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsAudioComponent, "libs_ui-components-audio", never, { "fileAudio": { "alias": "fileAudio"; "required": true; "isSignal": true; }; "checkPermissionDownloadAudio": { "alias": "checkPermissionDownloadAudio"; "required": true; "isSignal": true; }; }, { "outFunctionsControl": "outFunctionsControl"; "outVolumeControl": "outVolumeControl"; "outTimeUpdate": "outTimeUpdate"; "outEnded": "outEnded"; "outMute": "outMute"; "outPlay": "outPlay"; }, never, never, true, never>;
+}

package/esm2022/audio.component.mjs

@@ -0,0 +1,198 @@
+import { ChangeDetectionStrategy, Component, effect, input, output, signal, viewChild } from '@angular/core';
+import { LibsUiComponentsInputsRangeSliderComponent } from '@libs-ui/components-inputs-range-slider';
+import { fromEvent, merge, Subject, takeUntil, tap } from 'rxjs';
+import * as i0 from "@angular/core";
+export class LibsUiComponentsAudioComponent {
+    // #region PROPERTY
+    audioRatioValue = signal(0);
+    volumeRatioValue = signal(100);
+    isPlay = signal(false);
+    isMute = signal(false);
+    isSliderAudioPress = signal(false);
+    isDisable = signal(true);
+    audioTimeCurrent = signal('_:_:_');
+    audioTimeDuration = signal('_:_:_');
+    showFullControlVolume = signal(false);
+    onDestroy = new Subject();
+    // #region INPUT
+    fileAudio = input.required();
+    checkPermissionDownloadAudio = input.required();
+    /* VIEW CHILD */
+    audioRef = viewChild.required('audioRef');
+    volumeControlRef = viewChild.required('volumeControlRef');
+    /* OUTPUTS */
+    outFunctionsControl = output();
+    outVolumeControl = output();
+    outTimeUpdate = output();
+    outEnded = output();
+    outMute = output();
+    outPlay = output();
+    constructor() {
+        // Watch for file audio changes
+        effect(() => {
+            if (this.fileAudio() && this.audioRef()) {
+                // Skip initial setup, only reload on changes
+                setTimeout(() => {
+                    this.audioRef().nativeElement.load();
+                }, 0);
+            }
+        });
+        effect(() => {
+            this.outVolumeControl.emit(this.volumeRatioValue());
+        });
+        effect(() => {
+            this.outTimeUpdate.emit({ currentTime: this.audioTimeCurrent(), duration: this.audioTimeDuration() });
+        });
+        effect(() => {
+            this.outMute.emit(this.isMute());
+        });
+        effect(() => {
+            this.outPlay.emit(this.isPlay());
+        });
+    }
+    ngAfterViewInit() {
+        merge(this.initObservable(this.volumeControlRef().nativeElement, 'mouseenter').pipe(tap(() => this.showFullControlVolume.set(true))), this.initObservable(this.volumeControlRef().nativeElement, 'mouseleave').pipe(tap(() => this.showFullControlVolume.set(false))))
+            .pipe(takeUntil(this.onDestroy))
+            .subscribe();
+        // Emit function control event after view is initialized
+        this.outFunctionsControl.emit(this.FunctionsControl);
+    }
+    get FunctionsControl() {
+        return {
+            playPause: (event) => this.handlerAudioPausePlay(event),
+            toggleMute: (event) => this.handlerAudioMuteMuted(event),
+            seekTo: this.handlerChangeAudio.bind(this),
+            setVolume: this.handlerChangeVolume.bind(this),
+            download: (event) => this.handlerDownload(event),
+            isPlaying: () => this.isPlay(),
+            isMuted: () => this.isMute(),
+        };
+    }
+    /* FUNCTIONS */
+    initObservable(el, eventName) {
+        return fromEvent(el, eventName).pipe(tap((e) => e.stopPropagation()), takeUntil(this.onDestroy));
+    }
+    async handlerKeyPressAudio() {
+        this.isSliderAudioPress.set(true);
+    }
+    async handlerAudioMuteMuted(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        if (this.audioRef().nativeElement.muted === true) {
+            this.audioRef().nativeElement.muted = false;
+            this.isMute.set(false);
+            this.volumeRatioValue.set(50);
+            return;
+        }
+        this.volumeRatioValue.set(0);
+        this.isMute.set(true);
+        this.audioRef().nativeElement.muted = true;
+    }
+    async handlerAudioPausePlay(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        const audioElement = this.audioRef().nativeElement;
+        if (!audioElement.paused) {
+            audioElement.pause();
+            this.isPlay.set(false);
+            return;
+        }
+        try {
+            await audioElement.play();
+            this.isPlay.set(true);
+        }
+        catch (error) {
+            console.error('Error playing audio:', error);
+        }
+    }
+    async handlerLoadedData(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        if (this.audioRef().nativeElement) {
+            this.audioTimeDuration.set(await this.toHHMMSS(Math.floor(this.audioRef().nativeElement.duration)));
+            this.audioTimeCurrent.set(await this.toHHMMSS(Math.floor(this.audioRef().nativeElement.currentTime || 0)));
+            this.isDisable.set(false);
+            this.isPlay.set(false);
+            this.audioRatioValue.set(0);
+            this.audioRef().nativeElement.pause();
+        }
+    }
+    async handlerTimeUpdate(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this.isDisable.set(!(this.audioRef().nativeElement.duration || 0));
+        if (!this.audioRef().nativeElement) {
+            return;
+        }
+        this.audioTimeDuration.set(await this.toHHMMSS(Math.floor(this.audioRef().nativeElement.duration)));
+        this.audioTimeCurrent.set(await this.toHHMMSS(Math.floor(this.audioRef().nativeElement.currentTime || 0)));
+        if (this.isSliderAudioPress()) {
+            this.audioRef().nativeElement.currentTime = (this.audioRatioValue() * Math.floor(this.audioRef().nativeElement.duration || 0)) / 100;
+            return;
+        }
+        this.audioRatioValue.set(Math.floor(((this.audioRef().nativeElement.currentTime || 0) / (this.audioRef().nativeElement.duration || 1)) * 100));
+    }
+    async toHHMMSS(time) {
+        const hours = Math.floor(time / 3600);
+        const minutes = Math.floor((time - hours * 3600) / 60);
+        const seconds = time - hours * 3600 - minutes * 60;
+        const getLabel = (val) => {
+            val = val || 0;
+            return `${val < 10 ? '0' : ''}${val}`;
+        };
+        return `${getLabel(hours)}:${getLabel(minutes)}:${getLabel(seconds)}`;
+    }
+    async handlerChangeAudio(value) {
+        if (value === this.audioRatioValue()) {
+            return;
+        }
+        this.audioRef().nativeElement.currentTime = ((value || 0) * (this.audioRef().nativeElement.duration || 0)) / 100;
+        this.audioRatioValue.set(value);
+        this.isSliderAudioPress.set(false);
+    }
+    async handlerChangeVolume(value) {
+        this.audioRef().nativeElement.volume = value / 100;
+        this.volumeRatioValue.set(value);
+        if (this.audioRef().nativeElement.volume) {
+            this.audioRef().nativeElement.muted = false;
+            this.isMute.set(false);
+            return;
+        }
+        this.audioRef().nativeElement.muted = true;
+        this.isMute.set(true);
+    }
+    async handlerEnded(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this.isPlay.set(false);
+        this.outEnded.emit();
+    }
+    async handlerDownload(e) {
+        if (!this.checkPermissionDownloadAudio() || !(await this.checkPermissionDownloadAudio()())) {
+            return;
+        }
+        if (e) {
+            e.stopPropagation();
+        }
+        if (!this.fileAudio()) {
+            return;
+        }
+        window.open(this.fileAudio(), `_blank`);
+    }
+    ngOnDestroy() {
+        this.onDestroy.next();
+        this.onDestroy.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsAudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: LibsUiComponentsAudioComponent, isStandalone: true, selector: "libs_ui-components-audio", inputs: { fileAudio: { classPropertyName: "fileAudio", publicName: "fileAudio", isSignal: true, isRequired: true, transformFunction: null }, checkPermissionDownloadAudio: { classPropertyName: "checkPermissionDownloadAudio", publicName: "checkPermissionDownloadAudio", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { outFunctionsControl: "outFunctionsControl", outVolumeControl: "outVolumeControl", outTimeUpdate: "outTimeUpdate", outEnded: "outEnded", outMute: "outMute", outPlay: "outPlay" }, viewQueries: [{ propertyName: "audioRef", first: true, predicate: ["audioRef"], descendants: true, isSignal: true }, { propertyName: "volumeControlRef", first: true, predicate: ["volumeControlRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<audio\n  controls\n  #audioRef\n  class=\"hidden\"\n  (timeupdate)=\"handlerTimeUpdate($event)\"\n  (loadeddata)=\"handlerLoadedData($event)\"\n  (ended)=\"handlerEnded($event)\">\n  <source\n    [src]=\"fileAudio()\"\n    type=\"audio/mpeg\" />\n</audio>\n<div\n  [class.libs-ui-disable]=\"isDisable()\"\n  [class.pointer-events-none]=\"isDisable()\">\n  <div class=\"flex justify-between items-center\">\n    <div class=\"w-[70%] flex p-0 items-center\">\n      <div\n        class=\"flex mr-[16px] cursor-pointer\"\n        (click)=\"handlerAudioPausePlay($event)\">\n        <i\n          class=\"text-[16px]\"\n          [class.libs-ui-icon-play-solid]=\"!isPlay()\"\n          [class.libs-ui-icon-pause-solid]=\"isPlay()\"></i>\n      </div>\n      <div class=\"libs-ui-font-h5r mr-[16px]\">{{ audioTimeCurrent() }} /{{ audioTimeDuration() }}</div>\n    </div>\n    <div class=\"w-[30%] flex p-0 items-center justify-end\">\n      <div\n        #volumeControlRef\n        class=\"flex py-[3px] items-center rounded-[12px] h-[28px]\"\n        [class.bg-[#e6e7ea]]=\"showFullControlVolume()\"\n        [class.px-[12px]]=\"showFullControlVolume()\">\n        <i\n          class=\"text-[16px] cursor-pointer\"\n          [class.libs-ui-icon-speaker-on-solid]=\"!isMute()\"\n          [class.libs-ui-icon-speaker-off-solid]=\"isMute()\"\n          (click)=\"handlerAudioMuteMuted($event)\"></i>\n        <libs_ui-components-inputs-range_slider\n          [class.hidden]=\"!showFullControlVolume()\"\n          [mode]=\"'audio'\"\n          classInclude=\"flex items-center !w-[54px] cursor-pointer ml-[8px]\"\n          [value]=\"volumeRatioValue()\"\n          (outChange)=\"handlerChangeVolume($event)\" />\n      </div>\n\n      <i\n        class=\"libs-ui-icon-download-solid ml-[16px] cursor-pointer\"\n        (click)=\"handlerDownload($event)\"></i>\n    </div>\n  </div>\n  <div class=\"h-[24px]\">\n    <libs_ui-components-inputs-range_slider\n      [mode]=\"'audio'\"\n      [value]=\"audioRatioValue()\"\n      [disable]=\"isDisable()\"\n      (outChange)=\"handlerChangeAudio($event)\" />\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: LibsUiComponentsInputsRangeSliderComponent, selector: "libs_ui-components-inputs-range_slider", inputs: ["mode", "min", "max", "value", "classInclude", "disable", "unit", "step", "hideProgressingValue", "formatNumber"], outputs: ["valueChange", "outChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsAudioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-audio', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LibsUiComponentsInputsRangeSliderComponent], template: "<audio\n  controls\n  #audioRef\n  class=\"hidden\"\n  (timeupdate)=\"handlerTimeUpdate($event)\"\n  (loadeddata)=\"handlerLoadedData($event)\"\n  (ended)=\"handlerEnded($event)\">\n  <source\n    [src]=\"fileAudio()\"\n    type=\"audio/mpeg\" />\n</audio>\n<div\n  [class.libs-ui-disable]=\"isDisable()\"\n  [class.pointer-events-none]=\"isDisable()\">\n  <div class=\"flex justify-between items-center\">\n    <div class=\"w-[70%] flex p-0 items-center\">\n      <div\n        class=\"flex mr-[16px] cursor-pointer\"\n        (click)=\"handlerAudioPausePlay($event)\">\n        <i\n          class=\"text-[16px]\"\n          [class.libs-ui-icon-play-solid]=\"!isPlay()\"\n          [class.libs-ui-icon-pause-solid]=\"isPlay()\"></i>\n      </div>\n      <div class=\"libs-ui-font-h5r mr-[16px]\">{{ audioTimeCurrent() }} /{{ audioTimeDuration() }}</div>\n    </div>\n    <div class=\"w-[30%] flex p-0 items-center justify-end\">\n      <div\n        #volumeControlRef\n        class=\"flex py-[3px] items-center rounded-[12px] h-[28px]\"\n        [class.bg-[#e6e7ea]]=\"showFullControlVolume()\"\n        [class.px-[12px]]=\"showFullControlVolume()\">\n        <i\n          class=\"text-[16px] cursor-pointer\"\n          [class.libs-ui-icon-speaker-on-solid]=\"!isMute()\"\n          [class.libs-ui-icon-speaker-off-solid]=\"isMute()\"\n          (click)=\"handlerAudioMuteMuted($event)\"></i>\n        <libs_ui-components-inputs-range_slider\n          [class.hidden]=\"!showFullControlVolume()\"\n          [mode]=\"'audio'\"\n          classInclude=\"flex items-center !w-[54px] cursor-pointer ml-[8px]\"\n          [value]=\"volumeRatioValue()\"\n          (outChange)=\"handlerChangeVolume($event)\" />\n      </div>\n\n      <i\n        class=\"libs-ui-icon-download-solid ml-[16px] cursor-pointer\"\n        (click)=\"handlerDownload($event)\"></i>\n    </div>\n  </div>\n  <div class=\"h-[24px]\">\n    <libs_ui-components-inputs-range_slider\n      [mode]=\"'audio'\"\n      [value]=\"audioRatioValue()\"\n      [disable]=\"isDisable()\"\n      (outChange)=\"handlerChangeAudio($event)\" />\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXVkaW8uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2F1ZGlvL3NyYy9hdWRpby5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYXVkaW8vc3JjL2F1ZGlvLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBaUIsdUJBQXVCLEVBQUUsU0FBUyxFQUFjLE1BQU0sRUFBRSxLQUFLLEVBQWEsTUFBTSxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbkosT0FBTyxFQUFFLDBDQUEwQyxFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFDckcsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQWMsT0FBTyxFQUFFLFNBQVMsRUFBRSxHQUFHLEVBQUUsTUFBTSxNQUFNLENBQUM7O0FBVzdFLE1BQU0sT0FBTyw4QkFBOEI7SUFDekMsbUJBQW1CO0lBQ1QsZUFBZSxHQUFHLE1BQU0sQ0FBUyxDQUFDLENBQUMsQ0FBQztJQUNwQyxnQkFBZ0IsR0FBRyxNQUFNLENBQVMsR0FBRyxDQUFDLENBQUM7SUFDdkMsTUFBTSxHQUFHLE1BQU0sQ0FBVSxLQUFLLENBQUMsQ0FBQztJQUNoQyxNQUFNLEdBQUcsTUFBTSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQ2hDLGtCQUFrQixHQUFHLE1BQU0sQ0FBVSxLQUFLLENBQUMsQ0FBQztJQUM1QyxTQUFTLEdBQUcsTUFBTSxDQUFVLElBQUksQ0FBQyxDQUFDO0lBQ2xDLGdCQUFnQixHQUFHLE1BQU0sQ0FBUyxPQUFPLENBQUMsQ0FBQztJQUMzQyxpQkFBaUIsR0FBRyxNQUFNLENBQVMsT0FBTyxDQUFDLENBQUM7SUFDNUMscUJBQXFCLEdBQUcsTUFBTSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQ2pELFNBQVMsR0FBRyxJQUFJLE9BQU8sRUFBUSxD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QUFFLFFBQVEsQ0FBQyxDQUFDO0lBQzFDLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN0QixJQUFJLENBQUMsU0FBUyxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQzVCLENBQUM7d0dBN05VLDhCQUE4Qjs0RkFBOUIsOEJBQThCLHkwQkNiM0MsNmtFQTBEQSw0Q0QvQ1ksMENBQTBDOzs0RkFFekMsOEJBQThCO2tCQVIxQyxTQUFTOytCQUVFLDBCQUEwQixjQUV4QixJQUFJLG1CQUNDLHVCQUF1QixDQUFDLE1BQU0sV0FDdEMsQ0FBQywwQ0FBMEMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFmdGVyVmlld0luaXQsIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIGVmZmVjdCwgaW5wdXQsIE9uRGVzdHJveSwgb3V0cHV0LCBzaWduYWwsIHZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTGlic1VpQ29tcG9uZW50c0lucHV0c1JhbmdlU2xpZGVyQ29tcG9uZW50IH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1pbnB1dHMtcmFuZ2Utc2xpZGVyJztcbmltcG9ydCB7IGZyb21FdmVudCwgbWVyZ2UsIE9ic2VydmFibGUsIFN1YmplY3QsIHRha2VVbnRpbCwgdGFwIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBJQXVkaW9GdW5jdGlvbkNvbnRyb2xFdmVudCB9IGZyb20gJy4vaW50ZXJmYWNlcy9mdW5jdGlvbi1jb250cm9sLWV2ZW50LmludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L2NvbXBvbmVudC1zZWxlY3RvclxuICBzZWxlY3RvcjogJ2xpYnNfdWktY29tcG9uZW50cy1hdWRpbycsXG4gIHRlbXBsYXRlVXJsOiAnLi9hdWRpby5jb21wb25lbnQuaHRtbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBpbXBvcnRzOiBbTGlic1VpQ29tcG9uZW50c0lucHV0c1JhbmdlU2xpZGVyQ29tcG9uZW50XSxcbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c0F1ZGlvQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcbiAgLy8gI3JlZ2lvbiBQUk9QRVJUWVxuICBwcm90ZWN0ZWQgYXVkaW9SYXRpb1ZhbHVlID0gc2lnbmFsPG51bWJlcj4oMCk7XG4gIHByb3RlY3RlZCB2b2x1bWVSYXRpb1ZhbHVlID0gc2lnbmFsPG51bWJlcj4oMTAwKTtcbiAgcHJvdGVjdGVkIGlzUGxheSA9IHNpZ25hbDxib29sZWFuPihmYWxzZSk7XG4gIHByb3RlY3RlZCBpc011dGUgPSBzaWduYWw8Ym9vbGVhbj4oZmFsc2UpO1xuICBwcm90ZWN0ZWQgaXNTbGlkZXJBdWRpb1ByZXNzID0gc2lnbmFsPGJvb2xlYW4+KGZhbHNlKTtcbiAgcHJvdGVjdGVkIGlzRGlzYWJsZSA9IHNpZ25hbDxib29sZWFuPih0cnVlKTtcbiAgcHJvdGVjdGVkIGF1ZGlvVGltZUN1cnJlbnQgPSBzaWduYWw8c3RyaW5nPignXzpfOl8nKTtcbiAgcHJvdGVjdGVkIGF1ZGlvVGltZUR1cmF0aW9uID0gc2lnbmFsPHN0cmluZz4oJ186XzpfJyk7XG4gIHByb3RlY3RlZCBzaG93RnVsbENvbnRyb2xWb2x1bWUgPSBzaWduYWw8Ym9vbGVhbj4oZmFsc2UpO1xuICBwcml2YXRlIG9uRGVzdHJveSA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG5cbiAgLy8gI3JlZ2lvbiBJTlBVVFxuICByZWFkb25seSBmaWxlQXVkaW8gPSBpbnB1dC5yZXF1aXJlZDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IGNoZWNrUGVybWlzc2lvbkRvd25sb2FkQXVkaW8gPSBpbnB1dC5yZXF1aXJlZDwoKSA9PiBQcm9taXNlPGJvb2xlYW4+PigpO1xuXG4gIC8qIFZJRVcgQ0hJTEQgKi9cbiAgcmVhZG9ubHkgYXVkaW9SZWYgPSB2aWV3Q2hpbGQucmVxdWlyZWQ8RWxlbWVudFJlZj4oJ2F1ZGlvUmVmJyk7XG4gIHJlYWRvbmx5IHZvbHVtZUNvbnRyb2xSZWYgPSB2aWV3Q2hpbGQucmVxdWlyZWQ8RWxlbWVudFJlZj4oJ3ZvbHVtZUNvbnRyb2xSZWYnKTtcblxuICAvKiBPVVRQVVRTICovXG4gIHJlYWRvbmx5IG91dEZ1bmN0aW9uc0NvbnRyb2wgPSBvdXRwdXQ8SUF1ZGlvRnVuY3Rpb25Db250cm9sRXZlbnQ+KCk7XG4gIHJlYWRvbmx5IG91dFZvbHVtZUNvbnRyb2wgPSBvdXRwdXQ8bnVtYmVyPigpO1xuICByZWFkb25seSBvdXRUaW1lVXBkYXRlID0gb3V0cHV0PHsgY3VycmVudFRpbWU6IHN0cmluZzsgZHVyYXRpb246IHN0cmluZyB9PigpO1xuICByZWFkb25seSBvdXRFbmRlZCA9IG91dHB1dDx2b2lkPigpO1xuICByZWFkb25seSBvdXRNdXRlID0gb3V0cHV0PGJvb2xlYW4+KCk7XG4gIHJlYWRvbmx5IG91dFBsYXkgPSBvdXRwdXQ8Ym9vbGVhbj4oKTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICAvLyBXYXRjaCBmb3IgZmlsZSBhdWRpbyBjaGFuZ2VzXG4gICAgZWZmZWN0KCgpID0+IHtcbiAgICAgIGlmICh0aGlzLmZpbGVBdWRpbygpICYmIHRoaXMuYXVkaW9SZWYoKSkge1xuICAgICAgICAvLyBTa2lwIGluaXRpYWwgc2V0dXAsIG9ubHkgcmVsb2FkIG9uIGNoYW5nZXNcbiAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgdGhpcy5hdWRpb1JlZigpLm5hdGl2ZUVsZW1lbnQubG9hZCgpO1xuICAgICAgICB9LCAwKTtcbiAgICAgIH1cbiAgICB9KTtcbiAgICBlZmZlY3QoKCkgPT4ge1xuICAgICAgdGhpcy5vdXRWb2x1bWVDb250cm9sLmVtaXQodGhpcy52b2x1bWVSYXRpb1ZhbHVlKCkpO1xuICAgIH0pO1xuICAgIGVmZmVjdCgoKSA9PiB7XG4gICAgICB0aGlzLm91dFRpbWVVcGRhdGUuZW1pdCh7IGN1cnJlbnRUaW1lOiB0aGlzLmF1ZGlvVGltZUN1cnJlbnQoKSwgZHVyYXRpb246IHRoaXMuYXVkaW9UaW1lRHVyYXRpb24oKSB9KTtcbiAgICB9KTtcbiAgICBlZmZlY3QoKCkgPT4ge1xuICAgICAgdGhpcy5vdXRNdXRlLmVtaXQodGhpcy5pc011dGUoKSk7XG4gICAgfSk7XG4gICAgZWZmZWN0KCgpID0+IHtcbiAgICAgIHRoaXMub3V0UGxheS5lbWl0KHRoaXMuaXNQbGF5KCkpO1xuICAgIH0pO1xuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIG1lcmdlKFxuICAgICAgdGhpcy5pbml0T2JzZXJ2YWJsZSh0aGlzLnZvbHVtZUNvbnRyb2xSZWYoKS5uYXRpdmVFbGVtZW50LCAnbW91c2VlbnRlcicpLnBpcGUodGFwKCgpID0+IHRoaXMuc2hvd0Z1bGxDb250cm9sVm9sdW1lLnNldCh0cnVlKSkpLFxuICAgICAgdGhpcy5pbml0T2JzZXJ2YWJsZSh0aGlzLnZvbHVtZUNvbnRyb2xSZWYoKS5uYXRpdmVFbGVtZW50LCAnbW91c2VsZWF2ZScpLnBpcGUodGFwKCgpID0+IHRoaXMuc2hvd0Z1bGxDb250cm9sVm9sdW1lLnNldChmYWxzZSkpKVxuICAgIClcbiAgICAgIC5waXBlKHRha2VVbnRpbCh0aGlzLm9uRGVzdHJveSkpXG4gICAgICAuc3Vic2NyaWJlKCk7XG5cbiAgICAvLyBFbWl0IGZ1bmN0aW9uIGNvbnRyb2wgZXZlbnQgYWZ0ZXIgdmlldyBpcyBpbml0aWFsaXplZFxuICAgIHRoaXMub3V0RnVuY3Rpb25zQ29udHJvbC5lbWl0KHRoaXMuRnVuY3Rpb25zQ29udHJvbCk7XG4gIH1cblxuICBwdWJsaWMgZ2V0IEZ1bmN0aW9uc0NvbnRyb2woKTogSUF1ZGlvRnVuY3Rpb25Db250cm9sRXZlbnQge1xuICAgIHJldHVybiB7XG4gICAgICBwbGF5UGF1c2U6IChldmVudD86IEV2ZW50KSA9PiB0aGlzLmhhbmRsZXJBdWRpb1BhdXNlUGxheShldmVudCksXG4gICAgICB0b2dnbGVNdXRlOiAoZXZlbnQ/OiBFdmVudCkgPT4gdGhpcy5oYW5kbGVyQXVkaW9NdXRlTXV0ZWQoZXZlbnQpLFxuICAgICAgc2Vla1RvOiB0aGlzLmhhbmRsZXJDaGFuZ2VBdWRpby5iaW5kKHRoaXMpLFxuICAgICAgc2V0Vm9sdW1lOiB0aGlzLmhhbmRsZXJDaGFuZ2VWb2x1bWUuYmluZCh0aGlzKSxcbiAgICAgIGRvd25sb2FkOiAoZXZlbnQ/OiBFdmVudCkgPT4gdGhpcy5oYW5kbGVyRG93bmxvYWQoZXZlbnQpLFxuICAgICAgaXNQbGF5aW5nOiAoKSA9PiB0aGlzLmlzUGxheSgpLFxuICAgICAgaXNNdXRlZDogKCkgPT4gdGhpcy5pc011dGUoKSxcbiAgICB9O1xuICB9XG5cbiAgLyogRlVOQ1RJT05TICovXG4gIHByaXZhdGUgaW5pdE9ic2VydmFibGUoZWw6IEhUTUxFbGVtZW50LCBldmVudE5hbWU6IHN0cmluZyk6IE9ic2VydmFibGU8TW91c2VFdmVudD4ge1xuICAgIHJldHVybiBmcm9tRXZlbnQ8TW91c2VFdmVudD4oZWwsIGV2ZW50TmFtZSkucGlwZShcbiAgICAgIHRhcCgoZSkgPT4gZS5zdG9wUHJvcGFnYXRpb24oKSksXG4gICAgICB0YWtlVW50aWwodGhpcy5vbkRlc3Ryb3kpXG4gICAgKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBhc3luYyBoYW5kbGVyS2V5UHJlc3NBdWRpbygpIHtcbiAgICB0aGlzLmlzU2xpZGVyQXVkaW9QcmVzcy5zZXQodHJ1ZSk7XG4gIH1cblxuICBwcm90ZWN0ZWQgYXN5bmMgaGFuZGxlckF1ZGlvTXV0ZU11dGVkKGV2ZW50PzogRXZlbnQpIHtcbiAgICBpZiAoZXZlbnQpIHtcbiAgICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIH1cblxuICAgIGlmICh0aGlzLmF1ZGlvUmVmKCkubmF0aXZlRWxlbWVudC5tdXRlZCA9PT0gdHJ1ZSkge1xuICAgICAgdGhpcy5hdWRpb1JlZigpLm5hdGl2ZUVsZW1lbnQubXV0ZWQgPSBmYWxzZTtcbiAgICAgIHRoaXMuaXNNdXRlLnNldChmYWxzZSk7XG4gICAgICB0aGlzLnZvbHVtZVJhdGlvVmFsdWUuc2V0KDUwKTtcblxuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLnZvbHVtZVJhdGlvVmFsdWUuc2V0KDApO1xuICAgIHRoaXMuaXNNdXRlLnNldCh0cnVlKTtcbiAgICB0aGlzLmF1ZGlvUmVmKCkubmF0aXZlRWxlbWVudC5tdXRlZCA9IHRydWU7XG4gIH1cblxuICBwcm90ZWN0ZWQgYXN5bmMgaGFuZGxlckF1ZGlvUGF1c2VQbGF5KGV2ZW50PzogRXZlbnQpIHtcbiAgICBpZiAoZXZlbnQpIHtcbiAgICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIH1cblxuICAgIGNvbnN0IGF1ZGlvRWxlbWVudCA9IHRoaXMuYXVkaW9SZWYoKS5uYXRpdmVFbGVtZW50O1xuICAgIGlmICghYXVkaW9FbGVtZW50LnBhdXNlZCkge1xuICAgICAgYXVkaW9FbGVtZW50LnBhdXNlKCk7XG4gICAgICB0aGlzLmlzUGxheS5zZXQoZmFsc2UpO1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHRyeSB7XG4gICAgICBhd2FpdCBhdWRpb0VsZW1lbnQucGxheSgpO1xuICAgICAgdGhpcy5pc1BsYXkuc2V0KHRydWUpO1xuICAgIH0gY2F0Y2ggKGVycm9yKSB7XG4gICAgICBjb25zb2xlLmVycm9yKCdFcnJvciBwbGF5aW5nIGF1ZGlvOicsIGVycm9yKTtcbiAgICB9XG4gIH1cblxuICBwcm90ZWN0ZWQgYXN5bmMgaGFuZGxlckxvYWRlZERhdGEoZXZlbnQ6IEV2ZW50KSB7XG4gICAgaWYgKGV2ZW50KSB7XG4gICAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICB9XG5cbiAgICBpZiAodGhpcy5hdWRpb1JlZigpLm5hdGl2ZUVsZW1lbnQpIHtcbiAgICAgIHRoaXMuYXVkaW9UaW1lRHVyYXRpb24uc2V0KGF3YWl0IHRoaXMudG9ISE1NU1MoTWF0aC5mbG9vcih0aGlzLmF1ZGlvUmVmKCkubmF0aXZlRWxlbWVudC5kdXJhdGlvbikpKTtcbiAgICAgIHRoaXMuYXVkaW9UaW1lQ3VycmVudC5zZXQoYXdhaXQgdGhpcy50b0hITU1TUyhNYXRoLmZsb29yKHRoaXMuYXVkaW9SZWYoKS5uYXRpdmVFbGVtZW50LmN1cnJlbnRUaW1lIHx8IDApKSk7XG4gICAgICB0aGlzLmlzRGlzYWJsZS5zZXQoZmFsc2UpO1xuICAgICAgdGhpcy5pc1BsYXkuc2V0KGZhbHNlKTtcbiAgICAgIHRoaXMuYXVkaW9SYXRpb1ZhbHVlLnNldCgwKTtcbiAgICAgIHRoaXMuYXVkaW9SZWYoKS5uYXRpdmVFbGVtZW50LnBhdXNlKCk7XG4gICAgfVxuICB9XG5cbiAgcHJvdGVjdGVkIGFzeW5jIGhhbmRsZXJUaW1lVXBkYXRlKGV2ZW50PzogRXZlbnQpIHtcbiAgICBpZiAoZXZlbnQpIHtcbiAgICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIH1cbiAgICB0aGlzLmlzRGlzYWJsZS5zZXQoISh0aGlzLmF1ZGlvUmVmKCkubmF0aXZlRWxlbWVudC5kdXJhdGlvbiB8fCAwKSk7XG4gICAgaWYgKCF0aGlzLmF1ZGlvUmVmKCkubmF0aXZlRWxlbWVudCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLmF1ZGlvVGltZUR1cmF0aW9uLnNldChhd2FpdCB0aGlzLnRvSEhNTVNTKE1hdGguZmxvb3IodGhpcy5hdWRpb1JlZigpLm5hdGl2ZUVsZW1lbnQuZHVyYXRpb24pKSk7XG4gICAgdGhpcy5hdWRpb1RpbWVDdXJyZW50LnNldChhd2FpdCB0aGlzLnRvSEhNTVNTKE1hdGguZmxvb3IodGhpcy5hdWRpb1JlZigpLm5hdGl2ZUVsZW1lbnQuY3VycmVudFRpbWUgfHwgMCkpKTtcbiAgICBpZiAodGhpcy5pc1NsaWRlckF1ZGlvUHJlc3MoKSkge1xuICAgICAgdGhpcy5hdWRpb1JlZigpLm5hdGl2ZUVsZW1lbnQuY3VycmVudFRpbWUgPSAodGhpcy5hdWRpb1JhdGlvVmFsdWUoKSAqIE1hdGguZmxvb3IodGhpcy5hdWRpb1JlZigpLm5hdGl2ZUVsZW1lbnQuZHVyYXRpb24gfHwgMCkpIC8gMTAwO1xuXG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMuYXVkaW9SYXRpb1ZhbHVlLnNldChNYXRoLmZsb29yKCgodGhpcy5hdWRpb1JlZigpLm5hdGl2ZUVsZW1lbnQuY3VycmVudFRpbWUgfHwgMCkgLyAodGhpcy5hdWRpb1JlZigpLm5hdGl2ZUVsZW1lbnQuZHVyYXRpb24gfHwgMSkpICogMTAwKSk7XG4gIH1cblxuICBwcml2YXRlIGFzeW5jIHRvSEhNTVNTKHRpbWU6IG51bWJlcikge1xuICAgIGNvbnN0IGhvdXJzID0gTWF0aC5mbG9vcih0aW1lIC8gMzYwMCk7XG4gICAgY29uc3QgbWludXRlcyA9IE1hdGguZmxvb3IoKHRpbWUgLSBob3VycyAqIDM2MDApIC8gNjApO1xuICAgIGNvbnN0IHNlY29uZHMgPSB0aW1lIC0gaG91cnMgKiAzNjAwIC0gbWludXRlcyAqIDYwO1xuXG4gICAgY29uc3QgZ2V0TGFiZWwgPSAodmFsOiBudW1iZXIpID0+IHtcbiAgICAgIHZhbCA9IHZhbCB8fCAwO1xuICAgICAgcmV0dXJuIGAke3ZhbCA8IDEwID8gJzAnIDogJyd9JHt2YWx9YDtcbiAgICB9O1xuXG4gICAgcmV0dXJuIGAke2dldExhYmVsKGhvdXJzKX06JHtnZXRMYWJlbChtaW51dGVzKX06JHtnZXRMYWJlbChzZWNvbmRzKX1gO1xuICB9XG5cbiAgcHJvdGVjdGVkIGFzeW5jIGhhbmRsZXJDaGFuZ2VBdWRpbyh2YWx1ZTogbnVtYmVyKSB7XG4gICAgaWYgKHZhbHVlID09PSB0aGlzLmF1ZGlvUmF0aW9WYWx1ZSgpKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMuYXVkaW9SZWYoKS5uYXRpdmVFbGVtZW50LmN1cnJlbnRUaW1lID0gKCh2YWx1ZSB8fCAwKSAqICh0aGlzLmF1ZGlvUmVmKCkubmF0aXZlRWxlbWVudC5kdXJhdGlvbiB8fCAwKSkgLyAxMDA7XG4gICAgdGhpcy5hdWRpb1JhdGlvVmFsdWUuc2V0KHZhbHVlKTtcbiAgICB0aGlzLmlzU2xpZGVyQXVkaW9QcmVzcy5zZXQoZmFsc2UpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGFzeW5jIGhhbmRsZXJDaGFuZ2VWb2x1bWUodmFsdWU6IG51bWJlcikge1xuICAgIHRoaXMuYXVkaW9SZWYoKS5uYXRpdmVFbGVtZW50LnZvbHVtZSA9IHZhbHVlIC8gMTAwO1xuICAgIHRoaXMudm9sdW1lUmF0aW9WYWx1ZS5zZXQodmFsdWUpO1xuICAgIGlmICh0aGlzLmF1ZGlvUmVmKCkubmF0aXZlRWxlbWVudC52b2x1bWUpIHtcbiAgICAgIHRoaXMuYXVkaW9SZWYoKS5uYXRpdmVFbGVtZW50Lm11dGVkID0gZmFsc2U7XG4gICAgICB0aGlzLmlzTXV0ZS5zZXQoZmFsc2UpO1xuXG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMuYXVkaW9SZWYoKS5uYXRpdmVFbGVtZW50Lm11dGVkID0gdHJ1ZTtcbiAgICB0aGlzLmlzTXV0ZS5zZXQodHJ1ZSk7XG4gIH1cblxuICBwcm90ZWN0ZWQgYXN5bmMgaGFuZGxlckVuZGVkKGV2ZW50OiBFdmVudCkge1xuICAgIGlmIChldmVudCkge1xuICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgfVxuXG4gICAgdGhpcy5pc1BsYXkuc2V0KGZhbHNlKTtcbiAgICB0aGlzLm91dEVuZGVkLmVtaXQoKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBhc3luYyBoYW5kbGVyRG93bmxvYWQoZT86IEV2ZW50KSB7XG4gICAgaWYgKCF0aGlzLmNoZWNrUGVybWlzc2lvbkRvd25sb2FkQXVkaW8oKSB8fCAhKGF3YWl0IHRoaXMuY2hlY2tQZXJtaXNzaW9uRG93bmxvYWRBdWRpbygpKCkpKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgaWYgKGUpIHtcbiAgICAgIGUuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgfVxuXG4gICAgaWYgKCF0aGlzLmZpbGVBdWRpbygpKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHdpbmRvdy5vcGVuKHRoaXMuZmlsZUF1ZGlvKCksIGBfYmxhbmtgKTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMub25EZXN0cm95Lm5leHQoKTtcbiAgICB0aGlzLm9uRGVzdHJveS5jb21wbGV0ZSgpO1xuICB9XG59XG4iLCI8YXVkaW9cbiAgY29udHJvbHNcbiAgI2F1ZGlvUmVmXG4gIGNsYXNzPVwiaGlkZGVuXCJcbiAgKHRpbWV1cGRhdGUpPVwiaGFuZGxlclRpbWVVcGRhdGUoJGV2ZW50KVwiXG4gIChsb2FkZWRkYXRhKT1cImhhbmRsZXJMb2FkZWREYXRhKCRldmVudClcIlxuICAoZW5kZWQpPVwiaGFuZGxlckVuZGVkKCRldmVudClcIj5cbiAgPHNvdXJjZVxuICAgIFtzcmNdPVwiZmlsZUF1ZGlvKClcIlxuICAgIHR5cGU9XCJhdWRpby9tcGVnXCIgLz5cbjwvYXVkaW8+XG48ZGl2XG4gIFtjbGFzcy5saWJzLXVpLWRpc2FibGVdPVwiaXNEaXNhYmxlKClcIlxuICBbY2xhc3MucG9pbnRlci1ldmVudHMtbm9uZV09XCJpc0Rpc2FibGUoKVwiPlxuICA8ZGl2IGNsYXNzPVwiZmxleCBqdXN0aWZ5LWJldHdlZW4gaXRlbXMtY2VudGVyXCI+XG4gICAgPGRpdiBjbGFzcz1cInctWzcwJV0gZmxleCBwLTAgaXRlbXMtY2VudGVyXCI+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzPVwiZmxleCBtci1bMTZweF0gY3Vyc29yLXBvaW50ZXJcIlxuICAgICAgICAoY2xpY2spPVwiaGFuZGxlckF1ZGlvUGF1c2VQbGF5KCRldmVudClcIj5cbiAgICAgICAgPGlcbiAgICAgICAgICBjbGFzcz1cInRleHQtWzE2cHhdXCJcbiAgICAgICAgICBbY2xhc3MubGlicy11aS1pY29uLXBsYXktc29saWRdPVwiIWlzUGxheSgpXCJcbiAgICAgICAgICBbY2xhc3MubGlicy11aS1pY29uLXBhdXNlLXNvbGlkXT1cImlzUGxheSgpXCI+PC9pPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwibGlicy11aS1mb250LWg1ciBtci1bMTZweF1cIj57eyBhdWRpb1RpbWVDdXJyZW50KCkgfX0gL3t7IGF1ZGlvVGltZUR1cmF0aW9uKCkgfX08L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwidy1bMzAlXSBmbGV4IHAtMCBpdGVtcy1jZW50ZXIganVzdGlmeS1lbmRcIj5cbiAgICAgIDxkaXZcbiAgICAgICAgI3ZvbHVtZUNvbnRyb2xSZWZcbiAgICAgICAgY2xhc3M9XCJmbGV4IHB5LVszcHhdIGl0ZW1zLWNlbnRlciByb3VuZGVkLVsxMnB4XSBoLVsyOHB4XVwiXG4gICAgICAgIFtjbGFzcy5iZy1bI2U2ZTdlYV1dPVwic2hvd0Z1bGxDb250cm9sVm9sdW1lKClcIlxuICAgICAgICBbY2xhc3MucHgtWzEycHhdXT1cInNob3dGdWxsQ29udHJvbFZvbHVtZSgpXCI+XG4gICAgICAgIDxpXG4gICAgICAgICAgY2xhc3M9XCJ0ZXh0LVsxNnB4XSBjdXJzb3ItcG9pbnRlclwiXG4gICAgICAgICAgW2NsYXNzLmxpYnMtdWktaWNvbi1zcGVha2VyLW9uLXNvbGlkXT1cIiFpc011dGUoKVwiXG4gICAgICAgICAgW2NsYXNzLmxpYnMtdWktaWNvbi1zcGVha2VyLW9mZi1zb2xpZF09XCJpc011dGUoKVwiXG4gICAgICAgICAgKGNsaWNrKT1cImhhbmRsZXJBdWRpb011dGVNdXRlZCgkZXZlbnQpXCI+PC9pPlxuICAgICAgICA8bGlic191aS1jb21wb25lbnRzLWlucHV0cy1yYW5nZV9zbGlkZXJcbiAgICAgICAgICBbY2xhc3MuaGlkZGVuXT1cIiFzaG93RnVsbENvbnRyb2xWb2x1bWUoKVwiXG4gICAgICAgICAgW21vZGVdPVwiJ2F1ZGlvJ1wiXG4gICAgICAgICAgY2xhc3NJbmNsdWRlPVwiZmxleCBpdGVtcy1jZW50ZXIgIXctWzU0cHhdIGN1cnNvci1wb2ludGVyIG1sLVs4cHhdXCJcbiAgICAgICAgICBbdmFsdWVdPVwidm9sdW1lUmF0aW9WYWx1ZSgpXCJcbiAgICAgICAgICAob3V0Q2hhbmdlKT1cImhhbmRsZXJDaGFuZ2VWb2x1bWUoJGV2ZW50KVwiIC8+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPGlcbiAgICAgICAgY2xhc3M9XCJsaWJzLXVpLWljb24tZG93bmxvYWQtc29saWQgbWwtWzE2cHhdIGN1cnNvci1wb2ludGVyXCJcbiAgICAgICAgKGNsaWNrKT1cImhhbmRsZXJEb3dubG9hZCgkZXZlbnQpXCI+PC9pPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cImgtWzI0cHhdXCI+XG4gICAgPGxpYnNfdWktY29tcG9uZW50cy1pbnB1dHMtcmFuZ2Vfc2xpZGVyXG4gICAgICBbbW9kZV09XCInYXVkaW8nXCJcbiAgICAgIFt2YWx1ZV09XCJhdWRpb1JhdGlvVmFsdWUoKVwiXG4gICAgICBbZGlzYWJsZV09XCJpc0Rpc2FibGUoKVwiXG4gICAgICAob3V0Q2hhbmdlKT1cImhhbmRsZXJDaGFuZ2VBdWRpbygkZXZlbnQpXCIgLz5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==

package/esm2022/index.mjs

@@ -0,0 +1,3 @@
+export * from './audio.component';
+export * from './interfaces/function-control-event.interface';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYXVkaW8vc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYywrQ0FBK0MsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vYXVkaW8uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vaW50ZXJmYWNlcy9mdW5jdGlvbi1jb250cm9sLWV2ZW50LmludGVyZmFjZSc7XG4iXX0=

package/esm2022/interfaces/function-control-event.interface.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnVuY3Rpb24tY29udHJvbC1ldmVudC5pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYXVkaW8vc3JjL2ludGVyZmFjZXMvZnVuY3Rpb24tY29udHJvbC1ldmVudC5pbnRlcmZhY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogSW50ZXJmYWNlIGNobyBjw6FjIGNo4bupYyBuxINuZyDEkWnhu4F1IGtoaeG7g24gYXVkaW8gxJHGsOG7o2MgY3VuZyBj4bqlcCBxdWEgb3V0cHV0IGV2ZW50XG4gKiBAZGVzY3JpcHRpb24gQ3VuZyBj4bqlcCBjw6FjIG1ldGhvZCDEkeG7gyDEkWnhu4F1IGtoaeG7g24gYXVkaW8gcGxheWVyIHThu6sgY29tcG9uZW50IGNoYVxuICovXG5leHBvcnQgaW50ZXJmYWNlIElBdWRpb0Z1bmN0aW9uQ29udHJvbEV2ZW50IHtcbiAgLyoqXG4gICAqIEtleSDEkeG7gyDEkWnhu4F1IGtoaeG7g24gYXVkaW9cbiAgICogQHJldHVybnMgdm9pZFxuICAgKi9cblxuICAvKipcbiAgICogQuG6r3QgxJHhuqd1IGhv4bq3YyB04bqhbSBk4burbmcgcGjDoXQgYXVkaW9cbiAgICogQHBhcmFtIGV2ZW50IE9wdGlvbmFsIGV2ZW50IG9iamVjdFxuICAgKiBAcmV0dXJucyB2b2lkXG4gICAqL1xuICBwbGF5UGF1c2U6IChldmVudD86IEV2ZW50KSA9PiB2b2lkO1xuXG4gIC8qKlxuICAgKiBC4bqtdCBob+G6t2MgdOG6r3Qgw6JtIHRoYW5oXG4gICAqIEBwYXJhbSBldmVudCBPcHRpb25hbCBldmVudCBvYmplY3RcbiAgICogQHJldHVybnMgdm9pZFxuICAgKi9cbiAgdG9nZ2xlTXV0ZTogKGV2ZW50PzogRXZlbnQpID0+IHZvaWQ7XG5cbiAgLyoqXG4gICAqIMSQaeG7gXUgY2jhu4luaCDDom0gbMaw4bujbmdcbiAgICogQHBhcmFtIHZhbHVlIEdpw6EgdHLhu4sgw6JtIGzGsOG7o25nIHThu6sgMCDEkeG6v24gMTAwXG4gICAqIEByZXR1cm5zIHZvaWRcbiAgICovXG4gIHNldFZvbHVtZTogKHZhbHVlOiBudW1iZXIpID0+IHZvaWQ7XG5cbiAgLyoqXG4gICAqIERpIGNodXnhu4NuIMSR4bq/biB24buLIHRyw60gY+G7pSB0aOG7gyB0cm9uZyBhdWRpb1xuICAgKiBAcGFyYW0gdmFsdWUgR2nDoSB0cuG7iyBwaOG6p24gdHLEg20gdOG7qyAwIMSR4bq/biAxMDBcbiAgICogQHJldHVybnMgdm9pZFxuICAgKi9cbiAgc2Vla1RvOiAodmFsdWU6IG51bWJlcikgPT4gdm9pZDtcblxuICAvKipcbiAgICogVOG6o2kgeHXhu5FuZyBmaWxlIGF1ZGlvXG4gICAqIEBwYXJhbSBldmVudCBPcHRpb25hbCBldmVudCBvYmplY3RcbiAgICogQHJldHVybnMgdm9pZFxuICAgKi9cbiAgZG93bmxvYWQ6IChldmVudD86IEV2ZW50KSA9PiB2b2lkO1xuXG4gIC8qKlxuICAgKiBLaeG7g20gdHJhIHRy4bqhbmcgdGjDoWkgxJFhbmcgcGjDoXQgYXVkaW9cbiAgICogQHJldHVybnMgYm9vbGVhbiBUcnVlIG7hur91IMSRYW5nIHBow6F0LCBGYWxzZSBu4bq/dSDEkWFuZyB04bqhbSBk4burbmdcbiAgICovXG4gIGlzUGxheWluZzogKCkgPT4gYm9vbGVhbjtcblxuICAvKipcbiAgICogS2nhu4NtIHRyYSB0cuG6oW5nIHRow6FpIHThuq90IHRp4bq/bmdcbiAgICogQHJldHVybnMgYm9vbGVhbiBUcnVlIG7hur91IMSRYW5nIHThuq90IHRp4bq/bmcsIEZhbHNlIG7hur91IMSRYW5nIGLhuq10IHRp4bq/bmdcbiAgICovXG4gIGlzTXV0ZWQ6ICgpID0+IGJvb2xlYW47XG59XG4iXX0=

package/esm2022/libs-ui-components-audio.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlicy11aS1jb21wb25lbnRzLWF1ZGlvLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2F1ZGlvL3NyYy9saWJzLXVpLWNvbXBvbmVudHMtYXVkaW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLFNBQVMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9pbmRleCc7XG4iXX0=

package/fesm2022/libs-ui-components-audio.mjs

@@ -0,0 +1,205 @@
+import * as i0 from '@angular/core';
+import { signal, input, viewChild, output, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { LibsUiComponentsInputsRangeSliderComponent } from '@libs-ui/components-inputs-range-slider';
+import { Subject, merge, tap, takeUntil, fromEvent } from 'rxjs';
+
+class LibsUiComponentsAudioComponent {
+    // #region PROPERTY
+    audioRatioValue = signal(0);
+    volumeRatioValue = signal(100);
+    isPlay = signal(false);
+    isMute = signal(false);
+    isSliderAudioPress = signal(false);
+    isDisable = signal(true);
+    audioTimeCurrent = signal('_:_:_');
+    audioTimeDuration = signal('_:_:_');
+    showFullControlVolume = signal(false);
+    onDestroy = new Subject();
+    // #region INPUT
+    fileAudio = input.required();
+    checkPermissionDownloadAudio = input.required();
+    /* VIEW CHILD */
+    audioRef = viewChild.required('audioRef');
+    volumeControlRef = viewChild.required('volumeControlRef');
+    /* OUTPUTS */
+    outFunctionsControl = output();
+    outVolumeControl = output();
+    outTimeUpdate = output();
+    outEnded = output();
+    outMute = output();
+    outPlay = output();
+    constructor() {
+        // Watch for file audio changes
+        effect(() => {
+            if (this.fileAudio() && this.audioRef()) {
+                // Skip initial setup, only reload on changes
+                setTimeout(() => {
+                    this.audioRef().nativeElement.load();
+                }, 0);
+            }
+        });
+        effect(() => {
+            this.outVolumeControl.emit(this.volumeRatioValue());
+        });
+        effect(() => {
+            this.outTimeUpdate.emit({ currentTime: this.audioTimeCurrent(), duration: this.audioTimeDuration() });
+        });
+        effect(() => {
+            this.outMute.emit(this.isMute());
+        });
+        effect(() => {
+            this.outPlay.emit(this.isPlay());
+        });
+    }
+    ngAfterViewInit() {
+        merge(this.initObservable(this.volumeControlRef().nativeElement, 'mouseenter').pipe(tap(() => this.showFullControlVolume.set(true))), this.initObservable(this.volumeControlRef().nativeElement, 'mouseleave').pipe(tap(() => this.showFullControlVolume.set(false))))
+            .pipe(takeUntil(this.onDestroy))
+            .subscribe();
+        // Emit function control event after view is initialized
+        this.outFunctionsControl.emit(this.FunctionsControl);
+    }
+    get FunctionsControl() {
+        return {
+            playPause: (event) => this.handlerAudioPausePlay(event),
+            toggleMute: (event) => this.handlerAudioMuteMuted(event),
+            seekTo: this.handlerChangeAudio.bind(this),
+            setVolume: this.handlerChangeVolume.bind(this),
+            download: (event) => this.handlerDownload(event),
+            isPlaying: () => this.isPlay(),
+            isMuted: () => this.isMute(),
+        };
+    }
+    /* FUNCTIONS */
+    initObservable(el, eventName) {
+        return fromEvent(el, eventName).pipe(tap((e) => e.stopPropagation()), takeUntil(this.onDestroy));
+    }
+    async handlerKeyPressAudio() {
+        this.isSliderAudioPress.set(true);
+    }
+    async handlerAudioMuteMuted(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        if (this.audioRef().nativeElement.muted === true) {
+            this.audioRef().nativeElement.muted = false;
+            this.isMute.set(false);
+            this.volumeRatioValue.set(50);
+            return;
+        }
+        this.volumeRatioValue.set(0);
+        this.isMute.set(true);
+        this.audioRef().nativeElement.muted = true;
+    }
+    async handlerAudioPausePlay(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        const audioElement = this.audioRef().nativeElement;
+        if (!audioElement.paused) {
+            audioElement.pause();
+            this.isPlay.set(false);
+            return;
+        }
+        try {
+            await audioElement.play();
+            this.isPlay.set(true);
+        }
+        catch (error) {
+            console.error('Error playing audio:', error);
+        }
+    }
+    async handlerLoadedData(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        if (this.audioRef().nativeElement) {
+            this.audioTimeDuration.set(await this.toHHMMSS(Math.floor(this.audioRef().nativeElement.duration)));
+            this.audioTimeCurrent.set(await this.toHHMMSS(Math.floor(this.audioRef().nativeElement.currentTime || 0)));
+            this.isDisable.set(false);
+            this.isPlay.set(false);
+            this.audioRatioValue.set(0);
+            this.audioRef().nativeElement.pause();
+        }
+    }
+    async handlerTimeUpdate(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this.isDisable.set(!(this.audioRef().nativeElement.duration || 0));
+        if (!this.audioRef().nativeElement) {
+            return;
+        }
+        this.audioTimeDuration.set(await this.toHHMMSS(Math.floor(this.audioRef().nativeElement.duration)));
+        this.audioTimeCurrent.set(await this.toHHMMSS(Math.floor(this.audioRef().nativeElement.currentTime || 0)));
+        if (this.isSliderAudioPress()) {
+            this.audioRef().nativeElement.currentTime = (this.audioRatioValue() * Math.floor(this.audioRef().nativeElement.duration || 0)) / 100;
+            return;
+        }
+        this.audioRatioValue.set(Math.floor(((this.audioRef().nativeElement.currentTime || 0) / (this.audioRef().nativeElement.duration || 1)) * 100));
+    }
+    async toHHMMSS(time) {
+        const hours = Math.floor(time / 3600);
+        const minutes = Math.floor((time - hours * 3600) / 60);
+        const seconds = time - hours * 3600 - minutes * 60;
+        const getLabel = (val) => {
+            val = val || 0;
+            return `${val < 10 ? '0' : ''}${val}`;
+        };
+        return `${getLabel(hours)}:${getLabel(minutes)}:${getLabel(seconds)}`;
+    }
+    async handlerChangeAudio(value) {
+        if (value === this.audioRatioValue()) {
+            return;
+        }
+        this.audioRef().nativeElement.currentTime = ((value || 0) * (this.audioRef().nativeElement.duration || 0)) / 100;
+        this.audioRatioValue.set(value);
+        this.isSliderAudioPress.set(false);
+    }
+    async handlerChangeVolume(value) {
+        this.audioRef().nativeElement.volume = value / 100;
+        this.volumeRatioValue.set(value);
+        if (this.audioRef().nativeElement.volume) {
+            this.audioRef().nativeElement.muted = false;
+            this.isMute.set(false);
+            return;
+        }
+        this.audioRef().nativeElement.muted = true;
+        this.isMute.set(true);
+    }
+    async handlerEnded(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this.isPlay.set(false);
+        this.outEnded.emit();
+    }
+    async handlerDownload(e) {
+        if (!this.checkPermissionDownloadAudio() || !(await this.checkPermissionDownloadAudio()())) {
+            return;
+        }
+        if (e) {
+            e.stopPropagation();
+        }
+        if (!this.fileAudio()) {
+            return;
+        }
+        window.open(this.fileAudio(), `_blank`);
+    }
+    ngOnDestroy() {
+        this.onDestroy.next();
+        this.onDestroy.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsAudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: LibsUiComponentsAudioComponent, isStandalone: true, selector: "libs_ui-components-audio", inputs: { fileAudio: { classPropertyName: "fileAudio", publicName: "fileAudio", isSignal: true, isRequired: true, transformFunction: null }, checkPermissionDownloadAudio: { classPropertyName: "checkPermissionDownloadAudio", publicName: "checkPermissionDownloadAudio", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { outFunctionsControl: "outFunctionsControl", outVolumeControl: "outVolumeControl", outTimeUpdate: "outTimeUpdate", outEnded: "outEnded", outMute: "outMute", outPlay: "outPlay" }, viewQueries: [{ propertyName: "audioRef", first: true, predicate: ["audioRef"], descendants: true, isSignal: true }, { propertyName: "volumeControlRef", first: true, predicate: ["volumeControlRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<audio\n  controls\n  #audioRef\n  class=\"hidden\"\n  (timeupdate)=\"handlerTimeUpdate($event)\"\n  (loadeddata)=\"handlerLoadedData($event)\"\n  (ended)=\"handlerEnded($event)\">\n  <source\n    [src]=\"fileAudio()\"\n    type=\"audio/mpeg\" />\n</audio>\n<div\n  [class.libs-ui-disable]=\"isDisable()\"\n  [class.pointer-events-none]=\"isDisable()\">\n  <div class=\"flex justify-between items-center\">\n    <div class=\"w-[70%] flex p-0 items-center\">\n      <div\n        class=\"flex mr-[16px] cursor-pointer\"\n        (click)=\"handlerAudioPausePlay($event)\">\n        <i\n          class=\"text-[16px]\"\n          [class.libs-ui-icon-play-solid]=\"!isPlay()\"\n          [class.libs-ui-icon-pause-solid]=\"isPlay()\"></i>\n      </div>\n      <div class=\"libs-ui-font-h5r mr-[16px]\">{{ audioTimeCurrent() }} /{{ audioTimeDuration() }}</div>\n    </div>\n    <div class=\"w-[30%] flex p-0 items-center justify-end\">\n      <div\n        #volumeControlRef\n        class=\"flex py-[3px] items-center rounded-[12px] h-[28px]\"\n        [class.bg-[#e6e7ea]]=\"showFullControlVolume()\"\n        [class.px-[12px]]=\"showFullControlVolume()\">\n        <i\n          class=\"text-[16px] cursor-pointer\"\n          [class.libs-ui-icon-speaker-on-solid]=\"!isMute()\"\n          [class.libs-ui-icon-speaker-off-solid]=\"isMute()\"\n          (click)=\"handlerAudioMuteMuted($event)\"></i>\n        <libs_ui-components-inputs-range_slider\n          [class.hidden]=\"!showFullControlVolume()\"\n          [mode]=\"'audio'\"\n          classInclude=\"flex items-center !w-[54px] cursor-pointer ml-[8px]\"\n          [value]=\"volumeRatioValue()\"\n          (outChange)=\"handlerChangeVolume($event)\" />\n      </div>\n\n      <i\n        class=\"libs-ui-icon-download-solid ml-[16px] cursor-pointer\"\n        (click)=\"handlerDownload($event)\"></i>\n    </div>\n  </div>\n  <div class=\"h-[24px]\">\n    <libs_ui-components-inputs-range_slider\n      [mode]=\"'audio'\"\n      [value]=\"audioRatioValue()\"\n      [disable]=\"isDisable()\"\n      (outChange)=\"handlerChangeAudio($event)\" />\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: LibsUiComponentsInputsRangeSliderComponent, selector: "libs_ui-components-inputs-range_slider", inputs: ["mode", "min", "max", "value", "classInclude", "disable", "unit", "step", "hideProgressingValue", "formatNumber"], outputs: ["valueChange", "outChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsAudioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-audio', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LibsUiComponentsInputsRangeSliderComponent], template: "<audio\n  controls\n  #audioRef\n  class=\"hidden\"\n  (timeupdate)=\"handlerTimeUpdate($event)\"\n  (loadeddata)=\"handlerLoadedData($event)\"\n  (ended)=\"handlerEnded($event)\">\n  <source\n    [src]=\"fileAudio()\"\n    type=\"audio/mpeg\" />\n</audio>\n<div\n  [class.libs-ui-disable]=\"isDisable()\"\n  [class.pointer-events-none]=\"isDisable()\">\n  <div class=\"flex justify-between items-center\">\n    <div class=\"w-[70%] flex p-0 items-center\">\n      <div\n        class=\"flex mr-[16px] cursor-pointer\"\n        (click)=\"handlerAudioPausePlay($event)\">\n        <i\n          class=\"text-[16px]\"\n          [class.libs-ui-icon-play-solid]=\"!isPlay()\"\n          [class.libs-ui-icon-pause-solid]=\"isPlay()\"></i>\n      </div>\n      <div class=\"libs-ui-font-h5r mr-[16px]\">{{ audioTimeCurrent() }} /{{ audioTimeDuration() }}</div>\n    </div>\n    <div class=\"w-[30%] flex p-0 items-center justify-end\">\n      <div\n        #volumeControlRef\n        class=\"flex py-[3px] items-center rounded-[12px] h-[28px]\"\n        [class.bg-[#e6e7ea]]=\"showFullControlVolume()\"\n        [class.px-[12px]]=\"showFullControlVolume()\">\n        <i\n          class=\"text-[16px] cursor-pointer\"\n          [class.libs-ui-icon-speaker-on-solid]=\"!isMute()\"\n          [class.libs-ui-icon-speaker-off-solid]=\"isMute()\"\n          (click)=\"handlerAudioMuteMuted($event)\"></i>\n        <libs_ui-components-inputs-range_slider\n          [class.hidden]=\"!showFullControlVolume()\"\n          [mode]=\"'audio'\"\n          classInclude=\"flex items-center !w-[54px] cursor-pointer ml-[8px]\"\n          [value]=\"volumeRatioValue()\"\n          (outChange)=\"handlerChangeVolume($event)\" />\n      </div>\n\n      <i\n        class=\"libs-ui-icon-download-solid ml-[16px] cursor-pointer\"\n        (click)=\"handlerDownload($event)\"></i>\n    </div>\n  </div>\n  <div class=\"h-[24px]\">\n    <libs_ui-components-inputs-range_slider\n      [mode]=\"'audio'\"\n      [value]=\"audioRatioValue()\"\n      [disable]=\"isDisable()\"\n      (outChange)=\"handlerChangeAudio($event)\" />\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsAudioComponent };
+//# sourceMappingURL=libs-ui-components-audio.mjs.map

package/fesm2022/libs-ui-components-audio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"libs-ui-components-audio.mjs","sources":["../../../../../libs-ui/components/audio/src/audio.component.ts","../../../../../libs-ui/components/audio/src/audio.component.html","../../../../../libs-ui/components/audio/src/libs-ui-components-audio.ts"],"sourcesContent":["import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, effect, input, OnDestroy, output, signal, viewChild } from '@angular/core';\nimport { LibsUiComponentsInputsRangeSliderComponent } from '@libs-ui/components-inputs-range-slider';\nimport { fromEvent, merge, Observable, Subject, takeUntil, tap } from 'rxjs';\nimport { IAudioFunctionControlEvent } from './interfaces/function-control-event.interface';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-audio',\n  templateUrl: './audio.component.html',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [LibsUiComponentsInputsRangeSliderComponent],\n})\nexport class LibsUiComponentsAudioComponent implements AfterViewInit, OnDestroy {\n  // #region PROPERTY\n  protected audioRatioValue = signal<number>(0);\n  protected volumeRatioValue = signal<number>(100);\n  protected isPlay = signal<boolean>(false);\n  protected isMute = signal<boolean>(false);\n  protected isSliderAudioPress = signal<boolean>(false);\n  protected isDisable = signal<boolean>(true);\n  protected audioTimeCurrent = signal<string>('_:_:_');\n  protected audioTimeDuration = signal<string>('_:_:_');\n  protected showFullControlVolume = signal<boolean>(false);\n  private onDestroy = new Subject<void>();\n\n  // #region INPUT\n  readonly fileAudio = input.required<string>();\n  readonly checkPermissionDownloadAudio = input.required<() => Promise<boolean>>();\n\n  /* VIEW CHILD */\n  readonly audioRef = viewChild.required<ElementRef>('audioRef');\n  readonly volumeControlRef = viewChild.required<ElementRef>('volumeControlRef');\n\n  /* OUTPUTS */\n  readonly outFunctionsControl = output<IAudioFunctionControlEvent>();\n  readonly outVolumeControl = output<number>();\n  readonly outTimeUpdate = output<{ currentTime: string; duration: string }>();\n  readonly outEnded = output<void>();\n  readonly outMute = output<boolean>();\n  readonly outPlay = output<boolean>();\n\n  constructor() {\n    // Watch for file audio changes\n    effect(() => {\n      if (this.fileAudio() && this.audioRef()) {\n        // Skip initial setup, only reload on changes\n        setTimeout(() => {\n          this.audioRef().nativeElement.load();\n        }, 0);\n      }\n    });\n    effect(() => {\n      this.outVolumeControl.emit(this.volumeRatioValue());\n    });\n    effect(() => {\n      this.outTimeUpdate.emit({ currentTime: this.audioTimeCurrent(), duration: this.audioTimeDuration() });\n    });\n    effect(() => {\n      this.outMute.emit(this.isMute());\n    });\n    effect(() => {\n      this.outPlay.emit(this.isPlay());\n    });\n  }\n\n  ngAfterViewInit() {\n    merge(\n      this.initObservable(this.volumeControlRef().nativeElement, 'mouseenter').pipe(tap(() => this.showFullControlVolume.set(true))),\n      this.initObservable(this.volumeControlRef().nativeElement, 'mouseleave').pipe(tap(() => this.showFullControlVolume.set(false)))\n    )\n      .pipe(takeUntil(this.onDestroy))\n      .subscribe();\n\n    // Emit function control event after view is initialized\n    this.outFunctionsControl.emit(this.FunctionsControl);\n  }\n\n  public get FunctionsControl(): IAudioFunctionControlEvent {\n    return {\n      playPause: (event?: Event) => this.handlerAudioPausePlay(event),\n      toggleMute: (event?: Event) => this.handlerAudioMuteMuted(event),\n      seekTo: this.handlerChangeAudio.bind(this),\n      setVolume: this.handlerChangeVolume.bind(this),\n      download: (event?: Event) => this.handlerDownload(event),\n      isPlaying: () => this.isPlay(),\n      isMuted: () => this.isMute(),\n    };\n  }\n\n  /* FUNCTIONS */\n  private initObservable(el: HTMLElement, eventName: string): Observable<MouseEvent> {\n    return fromEvent<MouseEvent>(el, eventName).pipe(\n      tap((e) => e.stopPropagation()),\n      takeUntil(this.onDestroy)\n    );\n  }\n\n  protected async handlerKeyPressAudio() {\n    this.isSliderAudioPress.set(true);\n  }\n\n  protected async handlerAudioMuteMuted(event?: Event) {\n    if (event) {\n      event.stopPropagation();\n    }\n\n    if (this.audioRef().nativeElement.muted === true) {\n      this.audioRef().nativeElement.muted = false;\n      this.isMute.set(false);\n      this.volumeRatioValue.set(50);\n\n      return;\n    }\n    this.volumeRatioValue.set(0);\n    this.isMute.set(true);\n    this.audioRef().nativeElement.muted = true;\n  }\n\n  protected async handlerAudioPausePlay(event?: Event) {\n    if (event) {\n      event.stopPropagation();\n    }\n\n    const audioElement = this.audioRef().nativeElement;\n    if (!audioElement.paused) {\n      audioElement.pause();\n      this.isPlay.set(false);\n      return;\n    }\n\n    try {\n      await audioElement.play();\n      this.isPlay.set(true);\n    } catch (error) {\n      console.error('Error playing audio:', error);\n    }\n  }\n\n  protected async handlerLoadedData(event: Event) {\n    if (event) {\n      event.stopPropagation();\n    }\n\n    if (this.audioRef().nativeElement) {\n      this.audioTimeDuration.set(await this.toHHMMSS(Math.floor(this.audioRef().nativeElement.duration)));\n      this.audioTimeCurrent.set(await this.toHHMMSS(Math.floor(this.audioRef().nativeElement.currentTime || 0)));\n      this.isDisable.set(false);\n      this.isPlay.set(false);\n      this.audioRatioValue.set(0);\n      this.audioRef().nativeElement.pause();\n    }\n  }\n\n  protected async handlerTimeUpdate(event?: Event) {\n    if (event) {\n      event.stopPropagation();\n    }\n    this.isDisable.set(!(this.audioRef().nativeElement.duration || 0));\n    if (!this.audioRef().nativeElement) {\n      return;\n    }\n    this.audioTimeDuration.set(await this.toHHMMSS(Math.floor(this.audioRef().nativeElement.duration)));\n    this.audioTimeCurrent.set(await this.toHHMMSS(Math.floor(this.audioRef().nativeElement.currentTime || 0)));\n    if (this.isSliderAudioPress()) {\n      this.audioRef().nativeElement.currentTime = (this.audioRatioValue() * Math.floor(this.audioRef().nativeElement.duration || 0)) / 100;\n\n      return;\n    }\n    this.audioRatioValue.set(Math.floor(((this.audioRef().nativeElement.currentTime || 0) / (this.audioRef().nativeElement.duration || 1)) * 100));\n  }\n\n  private async toHHMMSS(time: number) {\n    const hours = Math.floor(time / 3600);\n    const minutes = Math.floor((time - hours * 3600) / 60);\n    const seconds = time - hours * 3600 - minutes * 60;\n\n    const getLabel = (val: number) => {\n      val = val || 0;\n      return `${val < 10 ? '0' : ''}${val}`;\n    };\n\n    return `${getLabel(hours)}:${getLabel(minutes)}:${getLabel(seconds)}`;\n  }\n\n  protected async handlerChangeAudio(value: number) {\n    if (value === this.audioRatioValue()) {\n      return;\n    }\n    this.audioRef().nativeElement.currentTime = ((value || 0) * (this.audioRef().nativeElement.duration || 0)) / 100;\n    this.audioRatioValue.set(value);\n    this.isSliderAudioPress.set(false);\n  }\n\n  protected async handlerChangeVolume(value: number) {\n    this.audioRef().nativeElement.volume = value / 100;\n    this.volumeRatioValue.set(value);\n    if (this.audioRef().nativeElement.volume) {\n      this.audioRef().nativeElement.muted = false;\n      this.isMute.set(false);\n\n      return;\n    }\n    this.audioRef().nativeElement.muted = true;\n    this.isMute.set(true);\n  }\n\n  protected async handlerEnded(event: Event) {\n    if (event) {\n      event.stopPropagation();\n    }\n\n    this.isPlay.set(false);\n    this.outEnded.emit();\n  }\n\n  protected async handlerDownload(e?: Event) {\n    if (!this.checkPermissionDownloadAudio() || !(await this.checkPermissionDownloadAudio()())) {\n      return;\n    }\n\n    if (e) {\n      e.stopPropagation();\n    }\n\n    if (!this.fileAudio()) {\n      return;\n    }\n    window.open(this.fileAudio(), `_blank`);\n  }\n\n  ngOnDestroy(): void {\n    this.onDestroy.next();\n    this.onDestroy.complete();\n  }\n}\n","<audio\n  controls\n  #audioRef\n  class=\"hidden\"\n  (timeupdate)=\"handlerTimeUpdate($event)\"\n  (loadeddata)=\"handlerLoadedData($event)\"\n  (ended)=\"handlerEnded($event)\">\n  <source\n    [src]=\"fileAudio()\"\n    type=\"audio/mpeg\" />\n</audio>\n<div\n  [class.libs-ui-disable]=\"isDisable()\"\n  [class.pointer-events-none]=\"isDisable()\">\n  <div class=\"flex justify-between items-center\">\n    <div class=\"w-[70%] flex p-0 items-center\">\n      <div\n        class=\"flex mr-[16px] cursor-pointer\"\n        (click)=\"handlerAudioPausePlay($event)\">\n        <i\n          class=\"text-[16px]\"\n          [class.libs-ui-icon-play-solid]=\"!isPlay()\"\n          [class.libs-ui-icon-pause-solid]=\"isPlay()\"></i>\n      </div>\n      <div class=\"libs-ui-font-h5r mr-[16px]\">{{ audioTimeCurrent() }} /{{ audioTimeDuration() }}</div>\n    </div>\n    <div class=\"w-[30%] flex p-0 items-center justify-end\">\n      <div\n        #volumeControlRef\n        class=\"flex py-[3px] items-center rounded-[12px] h-[28px]\"\n        [class.bg-[#e6e7ea]]=\"showFullControlVolume()\"\n        [class.px-[12px]]=\"showFullControlVolume()\">\n        <i\n          class=\"text-[16px] cursor-pointer\"\n          [class.libs-ui-icon-speaker-on-solid]=\"!isMute()\"\n          [class.libs-ui-icon-speaker-off-solid]=\"isMute()\"\n          (click)=\"handlerAudioMuteMuted($event)\"></i>\n        <libs_ui-components-inputs-range_slider\n          [class.hidden]=\"!showFullControlVolume()\"\n          [mode]=\"'audio'\"\n          classInclude=\"flex items-center !w-[54px] cursor-pointer ml-[8px]\"\n          [value]=\"volumeRatioValue()\"\n          (outChange)=\"handlerChangeVolume($event)\" />\n      </div>\n\n      <i\n        class=\"libs-ui-icon-download-solid ml-[16px] cursor-pointer\"\n        (click)=\"handlerDownload($event)\"></i>\n    </div>\n  </div>\n  <div class=\"h-[24px]\">\n    <libs_ui-components-inputs-range_slider\n      [mode]=\"'audio'\"\n      [value]=\"audioRatioValue()\"\n      [disable]=\"isDisable()\"\n      (outChange)=\"handlerChangeAudio($event)\" />\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './audio.component';
+export * from './interfaces/function-control-event.interface';

package/interfaces/function-control-event.interface.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Interface cho các chức năng điều khiển audio được cung cấp qua output event
+ * @description Cung cấp các method để điều khiển audio player từ component cha
+ */
+export interface IAudioFunctionControlEvent {
+    /**
+     * Key để điều khiển audio
+     * @returns void
+     */
+    /**
+     * Bắt đầu hoặc tạm dừng phát audio
+     * @param event Optional event object
+     * @returns void
+     */
+    playPause: (event?: Event) => void;
+    /**
+     * Bật hoặc tắt âm thanh
+     * @param event Optional event object
+     * @returns void
+     */
+    toggleMute: (event?: Event) => void;
+    /**
+     * Điều chỉnh âm lượng
+     * @param value Giá trị âm lượng từ 0 đến 100
+     * @returns void
+     */
+    setVolume: (value: number) => void;
+    /**
+     * Di chuyển đến vị trí cụ thể trong audio
+     * @param value Giá trị phần trăm từ 0 đến 100
+     * @returns void
+     */
+    seekTo: (value: number) => void;
+    /**
+     * Tải xuống file audio
+     * @param event Optional event object
+     * @returns void
+     */
+    download: (event?: Event) => void;
+    /**
+     * Kiểm tra trạng thái đang phát audio
+     * @returns boolean True nếu đang phát, False nếu đang tạm dừng
+     */
+    isPlaying: () => boolean;
+    /**
+     * Kiểm tra trạng thái tắt tiếng
+     * @returns boolean True nếu đang tắt tiếng, False nếu đang bật tiếng
+     */
+    isMuted: () => boolean;
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@libs-ui/components-audio",
+  "version": "0.1.1-1",
+  "peerDependencies": {
+    "@angular/core": ">=18.0.0",
+    "@libs-ui/components-inputs-range-slider": "0.1.1-1",
+    "rxjs": "~7.8.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/libs-ui-components-audio.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/libs-ui-components-audio.mjs",
+      "esm": "./esm2022/libs-ui-components-audio.mjs",
+      "default": "./fesm2022/libs-ui-components-audio.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}