@libs-ui/components-audio 0.2.356-42 → 0.2.356-43

package/README.md

@@ -1,196 +1,349 @@
 # @libs-ui/components-audio
 
-> Component phát âm thanh với đầy đủ chức năng điều khiển cho Angular.
+> Component audio player đầy đủ tính năng cho Angular — hỗ trợ play/pause, seek, volume, mute và download có kiểm soát quyền.
 
 ## Giới thiệu
 
-`LibsUiComponentsAudioComponent` là một standalone Angular component cung cấp giao diện phát audio với các tính năng:
+`LibsUiComponentsAudioComponent` là một standalone Angular component cung cấp giao diện phát audio hoàn chỉnh. Component tích hợp thanh tiến độ, điều chỉnh âm lượng dạng hover-reveal, hiển thị thời gian HH:MM:SS và cơ chế download có kiểm soát quyền thông qua callback. Ngoài việc phản ứng trực tiếp qua Output events, component còn cung cấp `IAudioFunctionControlEvent` — một API điều khiển chương trình từ component cha.
 
-- ✅ Phát/tạm dừng âm thanh với giao diện trực quan
-- ✅ Điều chỉnh âm lượng với thanh trượt ẩn/hiện
-- ✅ 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
-- ✅ Hỗ trợ OnPush Change Detection cho hiệu năng cao
-- ✅ Sử dụng Angular Signals cho state management
+## Tính năng
+
+- ✅ Phát/tạm dừng audio với giao diện icon trực quan
+- ✅ Thanh tiến độ tua nhanh/tua lại (seek 0–100%)
+- ✅ Điều chỉnh âm lượng với slider ẩn/hiện theo hover
+- ✅ Bật/tắt tiếng (mute/unmute) đồng bộ với volume slider
+- ✅ Hiển thị thời gian định dạng HH:MM:SS (currentTime / duration)
+- ✅ Download file audio có kiểm soát quyền qua async callback
+- ✅ Function Control API — điều khiển audio từ component cha qua `outFunctionsControl`
+- ✅ Hỗ trợ bàn phím (Enter, Space) cho mọi control
+- ✅ Angular Signals + OnPush Change Detection
+
+## Khi nào sử dụng
+
+- Cần nhúng audio player có giao diện chuẩn vào trang chi tiết, comment, hoặc tin nhắn
+- Cần điều khiển audio từ bên ngoài component (play, pause, seek, volume) thông qua API
+- Cần tracking trạng thái audio theo thời gian thực (đang phát, mute, vị trí hiện tại)
+- Cần giới hạn quyền download file audio theo logic nghiệp vụ (kiểm tra permission trước khi cho tải)
+- Phát file MP3, WAV, OGG trong ứng dụng web Angular
 
 ## Cài đặt
 
 ```bash
-# npm
 npm install @libs-ui/components-audio
+```
 
-# yarn
-yarn add @libs-ui/components-audio
+## Import
+
+```typescript
+import { LibsUiComponentsAudioComponent, IAudioFunctionControlEvent } from '@libs-ui/components-audio';
 ```
 
-## Sử dụng
+## Ví dụ sử dụng
 
-### Import Component
+### Ví dụ 1 — Cơ bản (Minimal)
 
 ```typescript
 import { Component } from '@angular/core';
+import { LibsUiComponentsAudioComponent } from '@libs-ui/components-audio';
+
+@Component({
+  selector: 'app-audio-basic',
+  standalone: true,
+  imports: [LibsUiComponentsAudioComponent],
+  template: `
+    <libs_ui-components-audio
+      [fileAudio]="audioUrl"
+      [checkPermissionDownloadAudio]="checkDownloadPermission"
+    />
+  `,
+})
+export class AudioBasicComponent {
+  audioUrl = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3';
+
+  checkDownloadPermission = (): Promise<boolean> => Promise.resolve(true);
+}
+```
+
+### Ví dụ 2 — Lắng nghe trạng thái qua Output
+
+```typescript
+import { Component, signal } from '@angular/core';
 import { LibsUiComponentsAudioComponent, IAudioFunctionControlEvent } from '@libs-ui/components-audio';
 
 @Component({
-  selector: 'app-example',
+  selector: 'app-audio-status',
   standalone: true,
   imports: [LibsUiComponentsAudioComponent],
   template: `
     <libs_ui-components-audio
       [fileAudio]="audioUrl"
-      [checkPermissionDownloadAudio]="checkPermission"
-      (outFunctionsControl)="onFunctionsControl($event)"
-      (outPlay)="onPlayChange($event)"
-      (outVolumeControl)="onVolumeChange($event)"
-      (outTimeUpdate)="onTimeUpdate($event)"
-      (outMute)="onMuteChange($event)"
-      (outEnded)="onEnded()"></libs_ui-components-audio>
+      [checkPermissionDownloadAudio]="checkDownloadPermission"
+      (outPlay)="handlerPlay($event)"
+      (outMute)="handlerMute($event)"
+      (outVolumeControl)="handlerVolume($event)"
+      (outTimeUpdate)="handlerTimeUpdate($event)"
+      (outEnded)="handlerEnded()"
+    />
+
+    <div class="mt-4 text-sm text-gray-600">
+      <p>Đang phát: {{ isPlaying() }}</p>
+      <p>Tắt tiếng: {{ isMuted() }}</p>
+      <p>Âm lượng: {{ volume() }}%</p>
+      <p>Thời gian: {{ currentTime() }} / {{ duration() }}</p>
+    </div>
   `,
 })
-export class ExampleComponent {
-  audioUrl = 'https://example.com/audio.mp3';
-  controls: IAudioFunctionControlEvent | null = null;
+export class AudioStatusComponent {
+  audioUrl = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3';
 
-  checkPermission = (): Promise<boolean> => Promise.resolve(true);
+  isPlaying = signal(false);
+  isMuted = signal(false);
+  volume = signal(100);
+  currentTime = signal('00:00:00');
+  duration = signal('00:00:00');
 
-  onFunctionsControl(event: IAudioFunctionControlEvent) {
-    this.controls = event;
-  }
+  checkDownloadPermission = (): Promise<boolean> => Promise.resolve(true);
 
-  onPlayChange(isPlaying: boolean) {
-    console.log('Đang phát:', isPlaying);
+  handlerPlay(isPlaying: boolean): void {
+    this.isPlaying.set(isPlaying);
   }
 
-  onVolumeChange(volume: number) {
-    console.log('Âm lượng:', volume);
+  handlerMute(isMuted: boolean): void {
+    this.isMuted.set(isMuted);
   }
 
-  onTimeUpdate(time: { currentTime: string; duration: string }) {
-    console.log('Thời gian:', time.currentTime, '/', time.duration);
+  handlerVolume(vol: number): void {
+    this.volume.set(vol);
   }
 
-  onMuteChange(isMuted: boolean) {
-    console.log('Tắt tiếng:', isMuted);
+  handlerTimeUpdate(time: { currentTime: string; duration: string }): void {
+    this.currentTime.set(time.currentTime);
+    this.duration.set(time.duration);
   }
 
-  onEnded() {
-    console.log('Audio đã phát xong');
+  handlerEnded(): void {
+    this.isPlaying.set(false);
   }
 }
 ```
 
-### Điều khiển từ bên ngoài
-
-Sử dụng `outFunctionsControl` để lấy reference các hàm điều khiển:
+### Ví dụ 3 — Điều khiển audio từ bên ngoài (External Control API)
 
 ```typescript
-// Phát/Tạm dừng
-this.controls.playPause();
+import { Component, signal } from '@angular/core';
+import { LibsUiComponentsAudioComponent, IAudioFunctionControlEvent } from '@libs-ui/components-audio';
 
-// Bật/Tắt tiếng
-this.controls.toggleMute();
+@Component({
+  selector: 'app-audio-external',
+  standalone: true,
+  imports: [LibsUiComponentsAudioComponent],
+  template: `
+    <libs_ui-components-audio
+      [fileAudio]="audioUrl"
+      [checkPermissionDownloadAudio]="checkDownloadPermission"
+      (outFunctionsControl)="handlerFunctionsControl($event)"
+      (outPlay)="isPlaying.set($event)"
+      (outMute)="isMuted.set($event)"
+    />
+
+    <div class="flex gap-2 mt-4">
+      <button class="px-4 py-2 bg-blue-500 text-white rounded" (click)="handlerTogglePlay()">
+        {{ isPlaying() ? 'Pause' : 'Play' }}
+      </button>
+      <button class="px-4 py-2 bg-gray-500 text-white rounded" (click)="handlerToggleMute()">
+        {{ isMuted() ? 'Unmute' : 'Mute' }}
+      </button>
+      <button class="px-4 py-2 bg-green-500 text-white rounded" (click)="handlerSetVolume50()">
+        Volume 50%
+      </button>
+      <button class="px-4 py-2 bg-orange-500 text-white rounded" (click)="handlerSeekMidpoint()">
+        Seek 50%
+      </button>
+    </div>
+  `,
+})
+export class AudioExternalControlComponent {
+  audioUrl = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3';
+
+  audioControls = signal<IAudioFunctionControlEvent | null>(null);
+  isPlaying = signal(false);
+  isMuted = signal(false);
+
+  checkDownloadPermission = (): Promise<boolean> => Promise.resolve(true);
+
+  handlerFunctionsControl(controls: IAudioFunctionControlEvent): void {
+    this.audioControls.set(controls);
+  }
 
-// Set âm lượng (0-100)
-this.controls.setVolume(50);
+  handlerTogglePlay(): void {
+    this.audioControls()?.playPause();
+  }
 
-// Tua đến vị trí (0-100%)
-this.controls.seekTo(25);
+  handlerToggleMute(): void {
+    this.audioControls()?.toggleMute();
+  }
 
-// Download audio
-this.controls.download();
+  handlerSetVolume50(): void {
+    this.audioControls()?.setVolume(50);
+  }
 
-// Kiểm tra trạng thái
-const isPlaying = this.controls.isPlaying();
-const isMuted = this.controls.isMuted();
+  handlerSeekMidpoint(): void {
+    this.audioControls()?.seekTo(50);
+  }
+}
 ```
 
-## API Reference
+### Ví dụ 4 — Kiểm soát quyền download theo nghiệp vụ
 
-### Inputs
+```typescript
+import { Component, inject } from '@angular/core';
+import { LibsUiComponentsAudioComponent } from '@libs-ui/components-audio';
 
-| Tên                            | Kiểu                     | Mặc định   | Mô tả                                                                 |
-| ------------------------------ | ------------------------ | ---------- | --------------------------------------------------------------------- |
-| `fileAudio`                    | `string`                 | _required_ | URL của file audio cần phát. Hỗ trợ MP3, WAV, OGG.                    |
-| `checkPermissionDownloadAudio` | `() => Promise<boolean>` | _required_ | Callback kiểm tra quyền download. Trả về Promise với kết quả boolean. |
+@Component({
+  selector: 'app-audio-permission',
+  standalone: true,
+  imports: [LibsUiComponentsAudioComponent],
+  template: `
+    <libs_ui-components-audio
+      [fileAudio]="audioUrl"
+      [checkPermissionDownloadAudio]="checkDownloadPermission"
+    />
+  `,
+})
+export class AudioPermissionComponent {
+  audioUrl = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3';
+
+  /**
+   * checkPermissionDownloadAudio nhận một factory function (() => Promise<boolean>),
+   * không phải Promise<boolean> trực tiếp. Component sẽ gọi hàm này mỗi lần user nhấn download.
+   */
+  checkDownloadPermission = (): Promise<boolean> => {
+    // Ví dụ: kiểm tra role của user trước khi cho phép tải
+    const userRole = 'admin'; // lấy từ auth service thực tế
+    return Promise.resolve(userRole === 'admin');
+  };
+}
+```
+
+## @Input()
+
+| Input | Type | Default | Mô tả | Ví dụ |
+|---|---|---|---|---|
+| `fileAudio` | `string` | **required** | URL của file audio cần phát. Hỗ trợ MP3, WAV, OGG. Khi giá trị thay đổi, audio sẽ tự động reload. | `[fileAudio]="'https://example.com/audio.mp3'"` |
+| `checkPermissionDownloadAudio` | `() => Promise<boolean>` | **required** | Factory function kiểm tra quyền download. Được gọi mỗi lần user nhấn nút tải. Trả về `true` để cho phép, `false` để chặn. | `[checkPermissionDownloadAudio]="checkPermission"` |
 
-### Outputs
+## @Output()
 
-| Tên                   | Kiểu                                        | Mô tả                                                                                                        |
-| --------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
-| `outFunctionsControl` | `IAudioFunctionControlEvent`                | Emit object chứa các hàm điều khiển: playPause, toggleMute, seekTo, setVolume, download, isPlaying, isMuted. |
-| `outVolumeControl`    | `number`                                    | Emit giá trị âm lượng hiện tại từ 0-100.                                                                     |
-| `outTimeUpdate`       | `{ currentTime: string, duration: string }` | Emit thông tin thời gian theo định dạng HH:MM:SS.                                                            |
-| `outEnded`            | `void`                                      | Emit khi audio phát xong.                                                                                    |
-| `outMute`             | `boolean`                                   | Emit trạng thái tắt/bật tiếng.                                                                               |
-| `outPlay`             | `boolean`                                   | Emit trạng thái đang phát/tạm dừng.                                                                          |
+| Output | Type | Mô tả | Handler TS | Binding HTML |
+|---|---|---|---|---|
+| `(outFunctionsControl)` | `IAudioFunctionControlEvent` | Emit ngay sau `ngAfterViewInit` — cung cấp API điều khiển audio từ bên ngoài. | `handlerFunctionsControl(e: IAudioFunctionControlEvent): void { e; /* không stopPropagation vì đây là output signal */ this.controls.set(e); }` | `(outFunctionsControl)="handlerFunctionsControl($event)"` |
+| `(outPlay)` | `boolean` | Emit mỗi khi trạng thái play/pause thay đổi. `true` = đang phát, `false` = đang dừng. | `handlerPlay(e: boolean): void { this.isPlaying.set(e); }` | `(outPlay)="handlerPlay($event)"` |
+| `(outMute)` | `boolean` | Emit mỗi khi trạng thái mute thay đổi. `true` = đang tắt tiếng. | `handlerMute(e: boolean): void { this.isMuted.set(e); }` | `(outMute)="handlerMute($event)"` |
+| `(outVolumeControl)` | `number` | Emit giá trị âm lượng hiện tại từ 0 đến 100, mỗi khi volume slider thay đổi. | `handlerVolume(e: number): void { this.volume.set(e); }` | `(outVolumeControl)="handlerVolume($event)"` |
+| `(outTimeUpdate)` | `{ currentTime: string; duration: string }` | Emit theo từng tick cập nhật thời gian. Định dạng: `'HH:MM:SS'`. | `handlerTimeUpdate(e: { currentTime: string; duration: string }): void { this.currentTime.set(e.currentTime); this.duration.set(e.duration); }` | `(outTimeUpdate)="handlerTimeUpdate($event)"` |
+| `(outEnded)` | `void` | Emit khi audio phát hết đến cuối file. | `handlerEnded(): void { this.isPlaying.set(false); }` | `(outEnded)="handlerEnded()"` |
 
-### Interface: IAudioFunctionControlEvent
+## Types & Interfaces
+
+```typescript
+import { IAudioFunctionControlEvent } from '@libs-ui/components-audio';
+```
 
 ```typescript
 interface IAudioFunctionControlEvent {
-  /**
-   * Bắt đầu hoặc tạm dừng phát audio
-   */
+  /** Bắt đầu hoặc tạm dừng phát audio */
   playPause: (event?: Event) => void;
 
-  /**
-   * Bật hoặc tắt âm thanh
-   */
+  /** Bật hoặc tắt âm thanh */
   toggleMute: (event?: Event) => void;
 
   /**
-   * Điều chỉnh âm lượng (0-100)
+   * Điều chỉnh âm lượng
+   * @param value Giá trị từ 0 đến 100
    */
   setVolume: (value: number) => void;
 
   /**
-   * Di chuyển đến vị trí cụ thể (0-100%)
+   * Di chuyển đến vị trí cụ thể trong audio
+   * @param value Giá trị phần trăm từ 0 đến 100
    */
   seekTo: (value: number) => void;
 
-  /**
-   * Tải xuống file audio
-   */
+  /** Tải xuống file audio (chỉ thực hiện nếu checkPermissionDownloadAudio trả về true) */
   download: (event?: Event) => void;
 
-  /**
-   * Kiểm tra trạng thái đang phát
-   */
+  /** Trả về true nếu audio đang phát */
   isPlaying: () => boolean;
 
-  /**
-   * Kiểm tra trạng thái tắt tiếng
-   */
+  /** Trả về true nếu audio đang tắt tiếng */
   isMuted: () => boolean;
 }
 ```
 
-## Công nghệ sử dụng
+### Cách sử dụng IAudioFunctionControlEvent
 
-- **Angular 18+** - Standalone Components
-- **Angular Signals** - Reactive state management
-- **RxJS** - Event handling với `takeUntilDestroyed`
-- **TailwindCSS** - Styling
+```typescript
+// Nhận controls qua outFunctionsControl
+private audioControls = signal<IAudioFunctionControlEvent | null>(null);
 
-## Demo
+handlerFunctionsControl(controls: IAudioFunctionControlEvent): void {
+  this.audioControls.set(controls);
+}
+
+// Sau đó gọi từ bất kỳ đâu trong component cha
+handlerPlayPause(): void {
+  this.audioControls()?.playPause();
+}
+
+handlerSetVolumeTo30(): void {
+  this.audioControls()?.setVolume(30);
+}
+
+handlerSeekToBeginning(): void {
+  this.audioControls()?.seekTo(0);
+}
+
+handlerCheckState(): void {
+  const playing = this.audioControls()?.isPlaying();   // boolean
+  const muted = this.audioControls()?.isMuted();       // boolean
+}
+```
+
+## Lưu ý quan trọng
+
+⚠️ **checkPermissionDownloadAudio là factory function, không phải Promise**: Input này nhận `() => Promise<boolean>`, không phải `Promise<boolean>` trực tiếp. Component gọi hàm này khi user nhấn download, không gọi trước. Đảm bảo truyền vào một hàm (arrow function hoặc method reference), không truyền kết quả gọi hàm.
 
-Demo có sẵn trong ứng dụng `core-ui`:
+```typescript
+// ❌ SAI — truyền Promise trực tiếp
+[checkPermissionDownloadAudio]="checkPermission()"
+
+// ✅ ĐÚNG — truyền function reference
+[checkPermissionDownloadAudio]="checkPermission"
+
+// ✅ ĐÚNG — truyền inline arrow function
+[checkPermissionDownloadAudio]="() => permissionService.canDownloadAudio()"
+```
+
+⚠️ **outFunctionsControl emit một lần sau ngAfterViewInit**: Output này chỉ emit một lần khi component khởi tạo xong. Lưu lại giá trị vào signal hoặc biến class để dùng về sau. Không cần subscribe lại khi `fileAudio` thay đổi — cùng một controls object vẫn hoạt động với file mới.
+
+⚠️ **Định dạng thời gian outTimeUpdate luôn là HH:MM:SS**: Ngay cả khi duration dưới 1 giờ, output vẫn là `'00:03:45'` (không phải `'3:45'`). Lưu ý điều này khi so sánh hoặc hiển thị thời gian.
+
+⚠️ **Audio không tự phát khi fileAudio thay đổi**: Khi `fileAudio` input thay đổi, component reload audio nhưng không tự động phát. Gọi `controls.playPause()` sau khi cần thiết.
+
+## Demo
 
 ```bash
 npx nx serve core-ui
 ```
 
-**File demo:** `apps/core-ui/src/app/components/audio/audio.component.ts`
-
 Truy cập: `http://localhost:4500/audio`
 
-### Tính năng Demo
+File demo: `apps/core-ui/src/app/components/audio/audio.component.ts`
 
-- 🎮 **Basic Example**: Cách sử dụng cơ bản
-- 🎛️ **External Controls**: Điều khiển audio từ component cha
-- 📊 **Real-time Status**: Hiển thị trạng thái play, mute, time, volume
+Các ví dụ có trong demo:
+- Basic Usage — cách dùng tối thiểu
+- Status Tracking — theo dõi trạng thái play, mute, volume, time
+- External Control — điều khiển audio hoàn toàn từ bên ngoài component
 
 ## Unit Tests
 
@@ -198,13 +351,9 @@ Truy cập: `http://localhost:4500/audio`
 # Chạy tests
 npx nx test components-audio
 
-# Chạy tests với coverage
+# Chạy với coverage
 npx nx test components-audio --coverage
 
-# Watch mode
-npx nx test components-audio --watch
+# Chạy một file spec cụ thể
+npx nx test components-audio --testFile=libs-ui/components/audio/src/audio.component.spec.ts
 ```
-
-## License
-
-MIT

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, input, viewChild, output, inject, DestroyRef, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { signal, input, viewChild, output, inject, DestroyRef, effect, Component, ChangeDetectionStrategy } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { LibsUiComponentsInputsRangeSliderComponent } from '@libs-ui/components-inputs-range-slider';
 import { merge, tap, fromEvent } from 'rxjs';

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

@@ -1 +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, DestroyRef, effect, ElementRef, inject, input, output, signal, viewChild } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { LibsUiComponentsInputsRangeSliderComponent } from '@libs-ui/components-inputs-range-slider';\nimport { fromEvent, merge, Observable, tap } from 'rxjs';\nimport { IAudioFunctionControlEvent } from './interfaces/function-control-event.interface';\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 {\n  // =========================================\n  // INTERNAL SIGNALS\n  // =========================================\n\n  protected audioRatioValue = signal<number>(0);\n\n  protected volumeRatioValue = signal<number>(100);\n\n  protected isPlay = signal<boolean>(false);\n\n  protected isMute = signal<boolean>(false);\n\n  protected isSliderAudioPress = signal<boolean>(false);\n\n  protected isDisable = signal<boolean>(true);\n\n  protected audioTimeCurrent = signal<string>('_:_:_');\n\n  protected audioTimeDuration = signal<string>('_:_:_');\n\n  protected showFullControlVolume = signal<boolean>(false);\n\n  // =========================================\n  // INPUTS\n  // =========================================\n\n  readonly fileAudio = input.required<string>();\n\n  readonly checkPermissionDownloadAudio = input.required<() => Promise<boolean>>();\n\n  // =========================================\n  // VIEW CHILDREN\n  // =========================================\n\n  readonly audioRef = viewChild.required<ElementRef>('audioRef');\n\n  readonly volumeControlRef = viewChild.required<ElementRef>('volumeControlRef');\n\n  // =========================================\n  // OUTPUTS\n  // =========================================\n\n  readonly outFunctionsControl = output<IAudioFunctionControlEvent>();\n\n  readonly outVolumeControl = output<number>();\n\n  readonly outTimeUpdate = output<{ currentTime: string; duration: string }>();\n\n  readonly outEnded = output<void>();\n\n  readonly outMute = output<boolean>();\n\n  readonly outPlay = output<boolean>();\n\n  // =========================================\n  // PRIVATE PROPERTIES\n  // =========================================\n\n  private readonly destroyRef = inject(DestroyRef);\n\n  // =========================================\n  // CONSTRUCTOR\n  // =========================================\n\n  constructor() {\n    // Watch for file audio changes\n    effect(() => {\n      if (this.fileAudio() && this.audioRef()) {\n        setTimeout(() => {\n          this.audioRef().nativeElement.load();\n        }, 0);\n      }\n    });\n\n    effect(() => {\n      this.outVolumeControl.emit(this.volumeRatioValue());\n    });\n\n    effect(() => {\n      this.outTimeUpdate.emit({ currentTime: this.audioTimeCurrent(), duration: this.audioTimeDuration() });\n    });\n\n    effect(() => {\n      this.outMute.emit(this.isMute());\n    });\n\n    effect(() => {\n      this.outPlay.emit(this.isPlay());\n    });\n  }\n\n  // =========================================\n  // LIFECYCLE HOOKS\n  // =========================================\n\n  ngAfterViewInit(): void {\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(takeUntilDestroyed(this.destroyRef))\n      .subscribe();\n\n    // Emit function control event after view is initialized\n    this.outFunctionsControl.emit(this.FunctionsControl);\n  }\n\n  // =========================================\n  // PUBLIC API\n  // =========================================\n\n  public get FunctionsControl(): IAudioFunctionControlEvent {\n    return {\n      playPause: (event?: Event) => void this.handlerAudioPausePlay(event),\n      toggleMute: (event?: Event) => void this.handlerAudioMuteMuted(event),\n      seekTo: this.handlerChangeAudio.bind(this),\n      setVolume: this.handlerChangeVolume.bind(this),\n      download: (event?: Event) => void this.handlerDownload(event),\n      isPlaying: () => this.isPlay(),\n      isMuted: () => this.isMute(),\n    };\n  }\n\n  // =========================================\n  // PRIVATE METHODS\n  // =========================================\n\n  private initObservable(el: HTMLElement, eventName: string): Observable<MouseEvent> {\n    return fromEvent<MouseEvent>(el, eventName).pipe(\n      tap((e) => e.stopPropagation()),\n      takeUntilDestroyed(this.destroyRef)\n    );\n  }\n\n  protected async handlerKeyPressAudio(): Promise<void> {\n    this.isSliderAudioPress.set(true);\n  }\n\n  protected async handlerAudioMuteMuted(event?: Event): Promise<void> {\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      return;\n    }\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): Promise<void> {\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): Promise<void> {\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): Promise<void> {\n    if (event) {\n      event.stopPropagation();\n    }\n\n    this.isDisable.set(!(this.audioRef().nativeElement.duration || 0));\n\n    if (!this.audioRef().nativeElement) {\n      return;\n    }\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\n    if (this.isSliderAudioPress()) {\n      this.audioRef().nativeElement.currentTime = (this.audioRatioValue() * Math.floor(this.audioRef().nativeElement.duration || 0)) / 100;\n      return;\n    }\n\n    this.audioRatioValue.set(Math.floor(((this.audioRef().nativeElement.currentTime || 0) / (this.audioRef().nativeElement.duration || 1)) * 100));\n  }\n\n  /**\n   * Format seconds -> HH:MM:SS.\n   * Used for both `currentTime` and `duration` outputs to keep output stable.\n   */\n  private async toHHMMSS(time: number): Promise<string> {\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): Promise<void> {\n    if (value === this.audioRatioValue()) {\n      return;\n    }\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): Promise<void> {\n    this.audioRef().nativeElement.volume = value / 100;\n    this.volumeRatioValue.set(value);\n\n    if (this.audioRef().nativeElement.volume) {\n      this.audioRef().nativeElement.muted = false;\n      this.isMute.set(false);\n      return;\n    }\n\n    this.audioRef().nativeElement.muted = true;\n    this.isMute.set(true);\n  }\n\n  protected async handlerEnded(event: Event): Promise<void> {\n    if (event) {\n      event.stopPropagation();\n    }\n\n    this.isPlay.set(false);\n    this.outEnded.emit();\n  }\n\n  /**\n   * Download chỉ được thực hiện nếu callback permission trả về `true`.\n   * Lưu ý: `checkPermissionDownloadAudio` là input function (factory), nên cần gọi 2 lần:\n   * - lần 1: lấy function\n   * - lần 2: execute function để lấy Promise<boolean>\n   */\n  protected async handlerDownload(e?: Event): Promise<void> {\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\n    window.open(this.fileAudio(), '_blank');\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        tabindex=\"0\"\n        (click)=\"handlerAudioPausePlay($event)\"\n        (keydown.enter)=\"handlerAudioPausePlay($event)\"\n        (keydown.space)=\"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          tabindex=\"0\"\n          [class.libs-ui-icon-speaker-on-solid]=\"!isMute()\"\n          [class.libs-ui-icon-speaker-off-solid]=\"isMute()\"\n          (click)=\"handlerAudioMuteMuted($event)\"\n          (keydown.enter)=\"handlerAudioMuteMuted($event)\"\n          (keydown.space)=\"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        tabindex=\"0\"\n        (click)=\"handlerDownload($event)\"\n        (keydown.enter)=\"handlerDownload($event)\"\n        (keydown.space)=\"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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"}
+{"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, DestroyRef, effect, ElementRef, inject, input, output, signal, viewChild } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { LibsUiComponentsInputsRangeSliderComponent } from '@libs-ui/components-inputs-range-slider';\nimport { fromEvent, merge, Observable, tap } from 'rxjs';\nimport { IAudioFunctionControlEvent } from './interfaces/function-control-event.interface';\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 {\n  // =========================================\n  // INTERNAL SIGNALS\n  // =========================================\n\n  protected audioRatioValue = signal<number>(0);\n\n  protected volumeRatioValue = signal<number>(100);\n\n  protected isPlay = signal<boolean>(false);\n\n  protected isMute = signal<boolean>(false);\n\n  protected isSliderAudioPress = signal<boolean>(false);\n\n  protected isDisable = signal<boolean>(true);\n\n  protected audioTimeCurrent = signal<string>('_:_:_');\n\n  protected audioTimeDuration = signal<string>('_:_:_');\n\n  protected showFullControlVolume = signal<boolean>(false);\n\n  // =========================================\n  // INPUTS\n  // =========================================\n\n  readonly fileAudio = input.required<string>();\n\n  readonly checkPermissionDownloadAudio = input.required<() => Promise<boolean>>();\n\n  // =========================================\n  // VIEW CHILDREN\n  // =========================================\n\n  readonly audioRef = viewChild.required<ElementRef>('audioRef');\n\n  readonly volumeControlRef = viewChild.required<ElementRef>('volumeControlRef');\n\n  // =========================================\n  // OUTPUTS\n  // =========================================\n\n  readonly outFunctionsControl = output<IAudioFunctionControlEvent>();\n\n  readonly outVolumeControl = output<number>();\n\n  readonly outTimeUpdate = output<{ currentTime: string; duration: string }>();\n\n  readonly outEnded = output<void>();\n\n  readonly outMute = output<boolean>();\n\n  readonly outPlay = output<boolean>();\n\n  // =========================================\n  // PRIVATE PROPERTIES\n  // =========================================\n\n  private readonly destroyRef = inject(DestroyRef);\n\n  // =========================================\n  // CONSTRUCTOR\n  // =========================================\n\n  constructor() {\n    // Watch for file audio changes\n    effect(() => {\n      if (this.fileAudio() && this.audioRef()) {\n        setTimeout(() => {\n          this.audioRef().nativeElement.load();\n        }, 0);\n      }\n    });\n\n    effect(() => {\n      this.outVolumeControl.emit(this.volumeRatioValue());\n    });\n\n    effect(() => {\n      this.outTimeUpdate.emit({ currentTime: this.audioTimeCurrent(), duration: this.audioTimeDuration() });\n    });\n\n    effect(() => {\n      this.outMute.emit(this.isMute());\n    });\n\n    effect(() => {\n      this.outPlay.emit(this.isPlay());\n    });\n  }\n\n  // =========================================\n  // LIFECYCLE HOOKS\n  // =========================================\n\n  ngAfterViewInit(): void {\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(takeUntilDestroyed(this.destroyRef))\n      .subscribe();\n\n    // Emit function control event after view is initialized\n    this.outFunctionsControl.emit(this.FunctionsControl);\n  }\n\n  // =========================================\n  // PUBLIC API\n  // =========================================\n\n  public get FunctionsControl(): IAudioFunctionControlEvent {\n    return {\n      playPause: (event?: Event) => void this.handlerAudioPausePlay(event),\n      toggleMute: (event?: Event) => void this.handlerAudioMuteMuted(event),\n      seekTo: this.handlerChangeAudio.bind(this),\n      setVolume: this.handlerChangeVolume.bind(this),\n      download: (event?: Event) => void this.handlerDownload(event),\n      isPlaying: () => this.isPlay(),\n      isMuted: () => this.isMute(),\n    };\n  }\n\n  // =========================================\n  // PRIVATE METHODS\n  // =========================================\n\n  private initObservable(el: HTMLElement, eventName: string): Observable<MouseEvent> {\n    return fromEvent<MouseEvent>(el, eventName).pipe(\n      tap((e) => e.stopPropagation()),\n      takeUntilDestroyed(this.destroyRef)\n    );\n  }\n\n  protected async handlerKeyPressAudio(): Promise<void> {\n    this.isSliderAudioPress.set(true);\n  }\n\n  protected async handlerAudioMuteMuted(event?: Event): Promise<void> {\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      return;\n    }\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): Promise<void> {\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): Promise<void> {\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): Promise<void> {\n    if (event) {\n      event.stopPropagation();\n    }\n\n    this.isDisable.set(!(this.audioRef().nativeElement.duration || 0));\n\n    if (!this.audioRef().nativeElement) {\n      return;\n    }\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\n    if (this.isSliderAudioPress()) {\n      this.audioRef().nativeElement.currentTime = (this.audioRatioValue() * Math.floor(this.audioRef().nativeElement.duration || 0)) / 100;\n      return;\n    }\n\n    this.audioRatioValue.set(Math.floor(((this.audioRef().nativeElement.currentTime || 0) / (this.audioRef().nativeElement.duration || 1)) * 100));\n  }\n\n  /**\n   * Format seconds -> HH:MM:SS.\n   * Used for both `currentTime` and `duration` outputs to keep output stable.\n   */\n  private async toHHMMSS(time: number): Promise<string> {\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): Promise<void> {\n    if (value === this.audioRatioValue()) {\n      return;\n    }\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): Promise<void> {\n    this.audioRef().nativeElement.volume = value / 100;\n    this.volumeRatioValue.set(value);\n\n    if (this.audioRef().nativeElement.volume) {\n      this.audioRef().nativeElement.muted = false;\n      this.isMute.set(false);\n      return;\n    }\n\n    this.audioRef().nativeElement.muted = true;\n    this.isMute.set(true);\n  }\n\n  protected async handlerEnded(event: Event): Promise<void> {\n    if (event) {\n      event.stopPropagation();\n    }\n\n    this.isPlay.set(false);\n    this.outEnded.emit();\n  }\n\n  /**\n   * Download chỉ được thực hiện nếu callback permission trả về `true`.\n   * Lưu ý: `checkPermissionDownloadAudio` là input function (factory), nên cần gọi 2 lần:\n   * - lần 1: lấy function\n   * - lần 2: execute function để lấy Promise<boolean>\n   */\n  protected async handlerDownload(e?: Event): Promise<void> {\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\n    window.open(this.fileAudio(), '_blank');\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        tabindex=\"0\"\n        (click)=\"handlerAudioPausePlay($event)\"\n        (keydown.enter)=\"handlerAudioPausePlay($event)\"\n        (keydown.space)=\"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          tabindex=\"0\"\n          [class.libs-ui-icon-speaker-on-solid]=\"!isMute()\"\n          [class.libs-ui-icon-speaker-off-solid]=\"isMute()\"\n          (click)=\"handlerAudioMuteMuted($event)\"\n          (keydown.enter)=\"handlerAudioMuteMuted($event)\"\n          (keydown.space)=\"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        tabindex=\"0\"\n        (click)=\"handlerDownload($event)\"\n        (keydown.enter)=\"handlerDownload($event)\"\n        (keydown.space)=\"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/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@libs-ui/components-audio",
-  "version": "0.2.356-42",
+  "version": "0.2.356-43",
   "peerDependencies": {
     "@angular/core": ">=18.0.0",
-    "@libs-ui/components-inputs-range-slider": "0.2.356-42",
+    "@libs-ui/components-inputs-range-slider": "0.2.356-43",
     "rxjs": "~7.8.0"
   },
   "sideEffects": false,