@acorex/components 22.0.0 → 22.0.1-next.0

package/fesm2022/acorex-components-audio-wave.mjs

@@ -1,13 +1,16 @@
 import { AXComponent } from '@acorex/cdk/common';
-import { AXSkeletonComponent, AXSkeletonModule } from '@acorex/components/skeleton';
-import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
-import { isPlatformBrowser, NgStyle, AsyncPipe, CommonModule } from '@angular/common';
+import { AXSkeletonComponent } from '@acorex/components/skeleton';
+import { AXTranslatorPipe } from '@acorex/core/translation';
+import { isPlatformBrowser, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, output, signal, inject, NgZone, PLATFORM_ID, afterNextRender, ViewChild, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { viewChild, input, output, signal, computed, inject, NgZone, PLATFORM_ID, DestroyRef, afterRenderEffect, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import WaveSurfer from 'wavesurfer.js';
-import { AXButtonModule } from '@acorex/components/button';
-import { AXDecoratorModule } from '@acorex/components/decorators';
 
+const DEFAULT_BAR_WIDTH = 2;
+const DEFAULT_BAR_GAP = 2;
+const DEFAULT_BAR_RADIUS = 2;
+const DEFAULT_HEIGHT = 36;
+const FALLBACK_RGB = '128, 128, 128';
 /**
  * Displays and interacts with audio waveform visualization.
  *
@@ -15,9 +18,14 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
  */
 class AXAudioWaveComponent {
     /**
-     *  @ignore
+     * @ignore
      */
     constructor() {
+        /**
+         * @ignore
+         */
+        this.wave = viewChild('wave', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "wave" }] : /* istanbul ignore next */ []));
         /**
          * Configuration settings for the audio wave.
          */
@@ -29,58 +37,89 @@ class AXAudioWaveComponent {
          * @event
          */
         this.onStatusChanged = output();
-        this.audioState = signal('paused', /* @ts-ignore */
+        /**
+         * @ignore
+         */
+        this.audioState = signal('loading', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "audioState" }] : /* istanbul ignore next */ []));
+        /**
+         * @ignore
+         */
         this.errorMessage = signal('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
         /**
-         *  @ignore
+         * @ignore
+         */
+        this.isWaveVisible = computed(() => {
+            const state = this.audioState();
+            return state === 'ready' || state === 'playing' || state === 'paused';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isWaveVisible" }] : /* istanbul ignore next */ []));
+        /**
+         * @ignore
+         */
+        this.loadedUrl = '';
+        /**
+         * @ignore
+         */
+        this.lastVisualKey = '';
+        /**
+         * @ignore
+         */
+        this.isDestroyed = false;
+        /**
+         * @ignore
          */
         this.ngZone = inject(NgZone);
-        this.platformID = inject(PLATFORM_ID);
-        afterNextRender(() => {
-            if (isPlatformBrowser(this.platformID)) {
-                const primary200 = getComputedStyle(document.body).getPropertyValue('--ax-sys-color-primary-200');
-                const primary700 = getComputedStyle(document.body).getPropertyValue('--ax-sys-color-primary-700');
-                this.audio = WaveSurfer.create({
-                    container: this.div.nativeElement,
-                    waveColor: this.config()?.waveColor || `rgba(${primary200})`,
-                    progressColor: this.config()?.progressColor || `rgba(${primary700})`,
-                    url: this.config()?.url || '',
-                    barWidth: this.config()?.barWidth || 2,
-                    barRadius: this.config()?.barRadius || 2,
-                    barGap: this.config()?.barGap || 2,
-                    height: this.config()?.height || 36,
-                });
+        /**
+         * @ignore
+         */
+        this.platformId = inject(PLATFORM_ID);
+        /**
+         * @ignore
+         */
+        this.destroyRef = inject(DestroyRef);
+        afterRenderEffect(() => {
+            const container = this.wave()?.nativeElement;
+            const config = this.config();
+            if (this.isDestroyed || !isPlatformBrowser(this.platformId) || !container) {
+                return;
             }
-            this.load();
-            this.audio?.on('loading', () => {
-                this.audioState.set('loading');
-            });
-            this.audio?.on('ready', () => {
-                this.audioState.set('ready');
-            });
-            this.audio?.on('error', (e) => {
-                this.errorMessage.set(e?.message);
-                this.audioState.set('error');
-            });
-            this.bindEvents();
+            if (!this.audio) {
+                this.createWaveSurfer(container, config);
+                return;
+            }
+            this.syncFromConfig(config);
+        });
+        this.destroyRef.onDestroy(() => {
+            this.isDestroyed = true;
+            this.audio?.destroy();
+            this.audio = undefined;
         });
     }
     /**
      * Loads the audio from the specified URL.
      *
      * @param url - The URL of the audio to load. Defaults to the URL from the config.
+     * @returns A promise that resolves when loading starts, or immediately when unavailable.
      */
-    load(url = this.config().url) {
-        this.audio.load(url);
+    load(url = this.config()?.url) {
+        const nextUrl = url?.trim();
+        if (!this.audio || !nextUrl) {
+            return Promise.resolve();
+        }
+        this.loadedUrl = nextUrl;
+        this.audioState.set('loading');
+        this.errorMessage.set('');
+        return this.swallowAbort(this.audio.load(nextUrl));
     }
     /**
      * Plays the audio.
      *
+     * @returns A promise that resolves when playback starts.
      */
     play() {
-        return this.audio?.play();
+        return this.swallowAbort(this.audio?.play());
     }
     /**
      * Pauses the audio.
@@ -89,296 +128,281 @@ class AXAudioWaveComponent {
         this.audio?.pause();
     }
     /**
-     * Retrieves the duration of the audio.
+     * Retrieves the duration of the audio in seconds.
      *
+     * @returns The audio duration, or `0` when unavailable.
      */
     getDuration() {
         return this.audio?.getDuration() ?? 0;
     }
     /**
-     * Retrieves the media element of the audio.
+     * Retrieves the underlying HTML media element.
      *
+     * @returns The media element used by WaveSurfer, or `undefined` when unavailable.
      */
     getMediaElement() {
         return this.audio?.getMediaElement();
     }
+    /**
+     * Retrieves the current playback position in seconds.
+     *
+     * @returns The current time, or `0` when unavailable.
+     */
+    getCurrentTime() {
+        return this.audio?.getCurrentTime() ?? this.getMediaElement()?.currentTime ?? 0;
+    }
     /**
      * Sets the playback rate of the audio.
      *
      * @param rate - The playback rate to set.
      */
     setRate(rate) {
-        this.audio.setPlaybackRate(rate);
+        this.audio?.setPlaybackRate(rate);
     }
     /**
-     *  @ignore
+     * Mutes or unmutes the audio.
+     *
+     * @param muted - Whether the audio should be muted.
      */
-    bindEvents() {
-        this.handleLoad();
-        this.handleLoading();
-        this.handleDecode();
-        this.handleReady();
-        this.handleRedRawComplete();
-        this.handlePlay();
-        this.handlePause();
-        this.handleFinish();
-        this.handleTimeUpdate();
-        this.handleSeeking();
-        this.handleInteraction();
-        this.handleClick();
-        this.handleDrag();
-        this.handleScroll();
-        this.handleZoom();
-        this.handleDestroy();
-        this.handleError();
+    setMuted(muted) {
+        this.audio?.setMuted(muted);
     }
-    /** When audio starts loading */
-    handleLoad() {
-        this.audio?.on('load', (url) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { url: url },
-                    status: 'load',
-                    isUserInteraction: false,
-                });
-            });
-        });
+    /**
+     * Indicates whether the audio is currently muted.
+     *
+     * @returns True when muted; otherwise false.
+     */
+    isMuted() {
+        return this.audio?.getMuted() ?? false;
     }
-    /** During audio loading */
-    handleLoading() {
-        this.audio?.on('loading', (percent) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { percent: percent },
-                    status: 'loading',
-                    isUserInteraction: false,
-                });
-            });
+    /**
+     * @ignore
+     */
+    createWaveSurfer(container, config) {
+        const visualOptions = this.resolveVisualOptions(config);
+        this.lastVisualKey = JSON.stringify(visualOptions);
+        this.audio = WaveSurfer.create({
+            container,
+            ...visualOptions,
         });
+        this.bindEvents();
+        this.applyUrlAndRate(config);
     }
-    /** When the audio has been decoded */
-    handleDecode() {
-        this.audio?.on('decode', (duration) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { duration: duration },
-                    status: 'decode',
-                    isUserInteraction: false,
-                });
-            });
-        });
+    /**
+     * @ignore
+     */
+    syncFromConfig(config) {
+        if (!this.audio) {
+            return;
+        }
+        const visualOptions = this.resolveVisualOptions(config);
+        const visualKey = JSON.stringify(visualOptions);
+        if (visualKey !== this.lastVisualKey) {
+            this.lastVisualKey = visualKey;
+            this.audio.setOptions(visualOptions);
+        }
+        this.applyUrlAndRate(config);
     }
-    /** When the audio is both decoded and can play */
-    handleReady() {
-        this.audio?.on('ready', (duration) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { duration: duration },
-                    status: 'ready',
-                    isUserInteraction: false,
-                });
+    /**
+     * @ignore
+     */
+    applyUrlAndRate(config) {
+        const url = config?.url?.trim() ?? '';
+        if (url && url !== this.loadedUrl) {
+            this.loadedUrl = url;
+            void this.swallowAbort(this.audio?.load(url));
+        }
+        else if (!url) {
+            queueMicrotask(() => {
+                if (!this.isDestroyed && !this.loadedUrl && this.audioState() === 'loading') {
+                    this.audioState.set('paused');
+                }
             });
-        });
+        }
+        if (config?.audioRate != null) {
+            this.audio?.setPlaybackRate(config.audioRate);
+        }
     }
-    /** When all audio channel chunks of the waveform have drawn */
-    handleRedRawComplete() {
-        this.audio?.on('redrawcomplete', () => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: null,
-                    status: 'redrawcomplete',
-                    isUserInteraction: false,
-                });
-            });
-        });
+    /**
+     * @ignore
+     */
+    resolveVisualOptions(config) {
+        const primary200 = this.readCssRgbVar('--ax-sys-color-primary-200');
+        const primary700 = this.readCssRgbVar('--ax-sys-color-primary-700');
+        return {
+            waveColor: config?.waveColor ?? `rgba(${primary200})`,
+            progressColor: config?.progressColor ?? `rgba(${primary700})`,
+            barWidth: config?.barWidth ?? DEFAULT_BAR_WIDTH,
+            barGap: config?.barGap ?? DEFAULT_BAR_GAP,
+            barRadius: config?.barRadius ?? DEFAULT_BAR_RADIUS,
+            height: config?.height ?? DEFAULT_HEIGHT,
+        };
     }
-    /** When the audio starts playing */
-    handlePlay() {
-        this.audio?.on('play', () => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({ component: this, data: null, status: 'play', isUserInteraction: false });
-            });
-        });
+    /**
+     * @ignore
+     */
+    readCssRgbVar(name) {
+        if (!isPlatformBrowser(this.platformId)) {
+            return FALLBACK_RGB;
+        }
+        return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || FALLBACK_RGB;
     }
-    /** When the audio pauses */
-    handlePause() {
-        this.audio?.on('pause', () => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({ component: this, data: null, status: 'pause', isUserInteraction: false });
-            });
+    /**
+     * @ignore
+     */
+    bindEvents() {
+        if (!this.audio) {
+            return;
+        }
+        this.audio.on('load', (url) => {
+            this.emitStatus('load', { url }, false);
         });
-    }
-    /** When the audio finishes playing */
-    handleFinish() {
-        this.audio?.on('finish', () => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: null,
-                    status: 'finish',
-                    isUserInteraction: false,
-                });
+        this.audio.on('loading', (percent) => {
+            this.runInZone(() => {
+                this.errorMessage.set('');
+                this.audioState.set('loading');
+                this.emitStatus('loading', { percent }, false, false);
             });
         });
-    }
-    /** On audio position change, fires continuously during playback */
-    handleTimeUpdate() {
-        this.audio?.on('timeupdate', (currentTime) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { currentTime: currentTime },
-                    status: 'timeupdate',
-                    isUserInteraction: false,
-                });
-            });
+        this.audio.on('decode', (duration) => {
+            this.emitStatus('decode', { duration }, false);
         });
-    }
-    /** When the user seeks to a new position */
-    handleSeeking() {
-        this.audio?.on('seeking', (currentTime) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { currentTime: currentTime },
-                    status: 'seeking',
-                    isUserInteraction: false,
-                });
+        this.audio.on('ready', (duration) => {
+            this.runInZone(() => {
+                if (this.audioState() !== 'playing') {
+                    this.audioState.set('ready');
+                }
+                this.emitStatus('ready', { duration }, false, false);
             });
         });
-    }
-    /** When the user interacts with the waveform (i.g. clicks or drags on it) */
-    handleInteraction() {
-        this.audio?.on('interaction', (newTime) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { newTime: newTime },
-                    status: 'interaction',
-                    isUserInteraction: false,
-                });
-            });
+        this.audio.on('redrawcomplete', () => {
+            this.emitStatus('redrawcomplete', null, false);
         });
-    }
-    /** When the user clicks on the waveform */
-    handleClick() {
-        this.audio?.on('click', (relativeX) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { relativeX: relativeX },
-                    status: 'click',
-                    isUserInteraction: false,
-                });
+        this.audio.on('play', () => {
+            this.runInZone(() => {
+                this.audioState.set('playing');
+                this.emitStatus('play', null, false, false);
             });
         });
-    }
-    /** When the user drags the cursor */
-    handleDrag() {
-        this.audio?.on('drag', (relativeX) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { relativeX: relativeX },
-                    status: 'drag',
-                    isUserInteraction: false,
-                });
+        this.audio.on('pause', () => {
+            this.runInZone(() => {
+                if (this.audioState() !== 'error') {
+                    this.audioState.set('paused');
+                }
+                this.emitStatus('pause', null, false, false);
             });
         });
-    }
-    /** When the waveform is scrolled (panned) */
-    handleScroll() {
-        this.audio?.on('scroll', (visibleStartTime, visibleEndTime) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { visibleStartTime, visibleEndTime },
-                    status: 'scroll',
-                    isUserInteraction: false,
-                });
+        this.audio.on('finish', () => {
+            this.runInZone(() => {
+                this.audioState.set('paused');
+                this.emitStatus('finish', null, false, false);
             });
         });
-    }
-    /** When the zoom level changes */
-    handleZoom() {
-        this.audio?.on('zoom', (minPxPerSec) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: { minPxPerSec: minPxPerSec },
-                    status: 'zoom',
-                    isUserInteraction: false,
-                });
+        this.audio.on('timeupdate', (currentTime) => {
+            this.emitStatus('timeupdate', { currentTime }, false);
+        });
+        this.audio.on('seeking', (currentTime) => {
+            this.emitStatus('seeking', { currentTime }, true);
+        });
+        this.audio.on('interaction', (newTime) => {
+            this.emitStatus('interaction', { newTime }, true);
+        });
+        this.audio.on('click', (relativeX, relativeY) => {
+            this.emitStatus('click', { relativeX, relativeY }, true);
+        });
+        this.audio.on('drag', (relativeX) => {
+            this.emitStatus('drag', { relativeX }, true);
+        });
+        this.audio.on('scroll', (visibleStartTime, visibleEndTime) => {
+            this.emitStatus('scroll', { visibleStartTime, visibleEndTime }, true);
+        });
+        this.audio.on('zoom', (minPxPerSec) => {
+            this.emitStatus('zoom', { minPxPerSec }, false);
+        });
+        this.audio.on('destroy', () => {
+            this.emitStatus('destroy', null, false);
+        });
+        this.audio.on('error', (error) => {
+            if (this.isAbortError(error)) {
+                return;
+            }
+            this.runInZone(() => {
+                const message = error?.message ?? '';
+                this.errorMessage.set(message);
+                this.audioState.set('error');
+                this.emitStatus('error', { message }, false, false);
             });
         });
     }
-    /** Just before the waveform is destroyed so you can clean up your events */
-    handleDestroy() {
-        this.audio?.on('destroy', () => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({
-                    component: this,
-                    data: null,
-                    status: 'destroy',
-                    isUserInteraction: false,
-                });
-            });
+    /**
+     * @ignore
+     */
+    swallowAbort(promise) {
+        return Promise.resolve(promise).then(() => undefined, (error) => {
+            if (this.isAbortError(error)) {
+                return;
+            }
+            throw error;
         });
     }
-    /** Just before the waveform is destroyed so you can clean up your events */
-    handleError() {
-        this.audio?.on('error', (e) => {
-            this.ngZone.run(() => {
-                this.onStatusChanged.emit({ component: this, data: e, status: 'error', isUserInteraction: false });
+    /**
+     * @ignore
+     */
+    isAbortError(error) {
+        return ((typeof DOMException !== 'undefined' && error instanceof DOMException && error.name === 'AbortError') ||
+            (error instanceof Error && (error.name === 'AbortError' || /aborted/i.test(error.message))));
+    }
+    /**
+     * @ignore
+     */
+    emitStatus(status, data, isUserInteraction, wrapInZone = true) {
+        if (this.isDestroyed) {
+            return;
+        }
+        const emit = () => {
+            this.onStatusChanged.emit({
+                component: this,
+                data,
+                status,
+                isUserInteraction,
             });
-        });
+        };
+        if (wrapInZone) {
+            this.runInZone(emit);
+            return;
+        }
+        emit();
     }
-    ngOnDestroy() {
-        this.audio.destroy();
+    /**
+     * @ignore
+     */
+    runInZone(fn) {
+        if (this.isDestroyed) {
+            return;
+        }
+        this.ngZone.run(fn);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXAudioWaveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXAudioWaveComponent, isStandalone: true, selector: "ax-audio-wave", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onStatusChanged: "onStatusChanged" }, providers: [{ provide: AXComponent, useExisting: AXAudioWaveComponent }], viewQueries: [{ propertyName: "div", first: true, predicate: ["d"], descendants: true }], ngImport: i0, template: "<div class=\"ax-audio-wave\" #d [ngStyle]=\"{ display: audioState() === 'ready' ? 'block' : 'none' }\"></div>\n\n@switch (audioState()) {\n  @case ('loading') {\n    <ax-skeleton class=\"h-5 w-full rounded-full\"></ax-skeleton>\n  }\n  @case ('error') {\n    <div class=\"ax-wave-message\">\n      {{ '@acorex:error.message' | translate: { params: { message: errorMessage() } } | async }}\n    </div>\n  }\n}\n", styles: ["@layer components{ax-audio-wave{display:block;width:100%;flex:1}ax-audio-wave .ax-wave-message{padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-start:.5rem}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXAudioWaveComponent, isStandalone: true, selector: "ax-audio-wave", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onStatusChanged: "onStatusChanged" }, host: { properties: { "attr.aria-busy": "audioState() === \"loading\" || null", "attr.aria-invalid": "audioState() === \"error\" || null" } }, providers: [{ provide: AXComponent, useExisting: AXAudioWaveComponent }], viewQueries: [{ propertyName: "wave", first: true, predicate: ["wave"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-audio-wave-host\" [class.ax-audio-wave-host--loading]=\"audioState() === 'loading'\">\n  <div class=\"ax-audio-wave\" #wave [class.ax-audio-wave--hidden]=\"!isWaveVisible()\"></div>\n\n  @switch (audioState()) {\n    @case ('loading') {\n      <ax-skeleton class=\"ax-audio-wave-skeleton\"></ax-skeleton>\n    }\n    @case ('error') {\n      <div class=\"ax-wave-message\">\n        {{ '@acorex:error.message' | translate: { params: { message: errorMessage() } } | async }}\n      </div>\n    }\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-audio-wave{display:block;width:100%;flex:1}ax-audio-wave .ax-audio-wave-host{position:relative;display:block;width:100%}ax-audio-wave .ax-audio-wave-host--loading{min-height:1.25rem}ax-audio-wave .ax-audio-wave{width:100%}ax-audio-wave .ax-audio-wave--hidden{visibility:hidden}ax-audio-wave .ax-audio-wave-skeleton.ax-skeleton{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);top:50%;height:calc(var(--spacing, .25rem) * 5);width:100%;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-radius:calc(infinity * 1px)}ax-audio-wave .ax-wave-message{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);top:50%;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);padding-inline-start:calc(var(--spacing, .25rem) * 2)}}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXAudioWaveComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-audio-wave', encapsulation: ViewEncapsulation.None, imports: [NgStyle, AsyncPipe, AXTranslatorPipe, AXSkeletonComponent], providers: [{ provide: AXComponent, useExisting: AXAudioWaveComponent }], template: "<div class=\"ax-audio-wave\" #d [ngStyle]=\"{ display: audioState() === 'ready' ? 'block' : 'none' }\"></div>\n\n@switch (audioState()) {\n  @case ('loading') {\n    <ax-skeleton class=\"h-5 w-full rounded-full\"></ax-skeleton>\n  }\n  @case ('error') {\n    <div class=\"ax-wave-message\">\n      {{ '@acorex:error.message' | translate: { params: { message: errorMessage() } } | async }}\n    </div>\n  }\n}\n", styles: ["@layer components{ax-audio-wave{display:block;width:100%;flex:1}ax-audio-wave .ax-wave-message{padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-start:.5rem}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [], propDecorators: { div: [{
-                type: ViewChild,
-                args: ['d', { static: false }]
-            }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], onStatusChanged: [{ type: i0.Output, args: ["onStatusChanged"] }] } });
+            args: [{ selector: 'ax-audio-wave', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, AXTranslatorPipe, AXSkeletonComponent], providers: [{ provide: AXComponent, useExisting: AXAudioWaveComponent }], host: {
+                        '[attr.aria-busy]': 'audioState() === "loading" || null',
+                        '[attr.aria-invalid]': 'audioState() === "error" || null',
+                    }, template: "<div class=\"ax-audio-wave-host\" [class.ax-audio-wave-host--loading]=\"audioState() === 'loading'\">\n  <div class=\"ax-audio-wave\" #wave [class.ax-audio-wave--hidden]=\"!isWaveVisible()\"></div>\n\n  @switch (audioState()) {\n    @case ('loading') {\n      <ax-skeleton class=\"ax-audio-wave-skeleton\"></ax-skeleton>\n    }\n    @case ('error') {\n      <div class=\"ax-wave-message\">\n        {{ '@acorex:error.message' | translate: { params: { message: errorMessage() } } | async }}\n      </div>\n    }\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-audio-wave{display:block;width:100%;flex:1}ax-audio-wave .ax-audio-wave-host{position:relative;display:block;width:100%}ax-audio-wave .ax-audio-wave-host--loading{min-height:1.25rem}ax-audio-wave .ax-audio-wave{width:100%}ax-audio-wave .ax-audio-wave--hidden{visibility:hidden}ax-audio-wave .ax-audio-wave-skeleton.ax-skeleton{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);top:50%;height:calc(var(--spacing, .25rem) * 5);width:100%;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-radius:calc(infinity * 1px)}ax-audio-wave .ax-wave-message{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);top:50%;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);padding-inline-start:calc(var(--spacing, .25rem) * 2)}}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { wave: [{ type: i0.ViewChild, args: ['wave', { isSignal: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], onStatusChanged: [{ type: i0.Output, args: ["onStatusChanged"] }] } });
 
 class AXAudioWaveModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXAudioWaveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXAudioWaveModule, imports: [CommonModule,
-            AXButtonModule,
-            AXDecoratorModule,
-            AXSkeletonModule,
-            AXTranslationModule,
-            AXAudioWaveComponent], exports: [AXAudioWaveComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXAudioWaveModule, imports: [CommonModule,
-            AXButtonModule,
-            AXDecoratorModule,
-            AXSkeletonModule,
-            AXTranslationModule,
-            AXAudioWaveComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXAudioWaveModule, imports: [AXAudioWaveComponent], exports: [AXAudioWaveComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXAudioWaveModule, imports: [AXAudioWaveComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXAudioWaveModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [AXAudioWaveComponent],
-                    imports: [
-                        CommonModule,
-                        AXButtonModule,
-                        AXDecoratorModule,
-                        AXSkeletonModule,
-                        AXTranslationModule,
-                        AXAudioWaveComponent,
-                    ],
+                    imports: [AXAudioWaveComponent],
                 }]
         }] });