@acorex/components 17.0.6 → 17.0.8

package/esm2022/side-menu/lib/side-menu-item/side-menu-item.compoent.mjs

@@ -1,6 +1,6 @@
 import { AXClickEvent, MXColorComponent, MXInteractiveComponent } from '@acorex/components/common';
 import { AUTO_STYLE, animate, state, style, transition, trigger } from '@angular/animations';
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewEncapsulation, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewEncapsulation, afterNextRender, signal, } from '@angular/core';
 import { classes } from 'polytype';
 import * as i0 from "@angular/core";
 import * as i1 from "@acorex/components/common";
@@ -78,7 +78,10 @@ export class AXSideMenuItemComponent extends classes(MXInteractiveComponent, MXC
         this.activeChange = new EventEmitter();
         this._active = false;
         this.onClick = new EventEmitter();
-        this.hasChild = false;
+        this.hasChild = signal(false);
+        afterNextRender(() => {
+            this.hasChild.set(this.elem.nativeElement.getElementsByTagName('ax-side-menu-item').length > 0);
+        });
     }
     _handleClickEvent(e) {
         if (this.disabled || this.isLoading)
@@ -104,11 +107,8 @@ export class AXSideMenuItemComponent extends classes(MXInteractiveComponent, MXC
     close() {
         this.isCollapsed = false;
     }
-    ngAfterContentInit() {
-        this.hasChild = this.elem.nativeElement.getElementsByTagName('ax-side-menu-item').length > 0;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXSideMenuItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXSideMenuItemComponent, selector: "ax-side-menu-item", inputs: { disabled: "disabled", color: "color", isLoading: "isLoading", text: "text", isCollapsed: "isCollapsed", active: "active" }, outputs: { textChange: "textChange", isCollapsedChange: "isCollapsedChange", activeChange: "activeChange", onClick: "onClick" }, host: { attributes: { "ngSkipHydration": "true" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-title\"></ng-content>\n<div [axRipple] class=\"ax-side-item\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-active]=\"active\"\n  (click)=\"_handleClickEvent($event)\">\n  <div class=\"ax-start-side\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n    @if(text){\n    <span>{{text}}</span>\n    }\n    <ng-content></ng-content>\n  </div>\n  <div class=\"ax-end-side\">\n    <ng-content select=\"ax-suffix\"></ng-content>\n    @if(hasChild && !isLoading){\n    <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed\"></span>\n    }\n    @if(isLoading){\n    <ax-loading></ax-loading>\n    }\n  </div>\n</div>\n\n<div class=\"ax-side-children\" [@collapse]=\"isCollapsed\">\n  @if(isLoading){\n  <p>\n    {{'loading' | translate | async }}\n  </p>\n  } @else {\n  <ng-content select=\"ax-side-menu-item, ng-container\"></ng-content>\n  }\n</div>\n\n<ng-content select=\"ax-divider\"></ng-content>", dependencies: [{ kind: "directive", type: i1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "component", type: i2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXSideMenuItemComponent, selector: "ax-side-menu-item", inputs: { disabled: "disabled", color: "color", isLoading: "isLoading", text: "text", isCollapsed: "isCollapsed", active: "active" }, outputs: { textChange: "textChange", isCollapsedChange: "isCollapsedChange", activeChange: "activeChange", onClick: "onClick" }, host: { attributes: { "ngSkipHydration": "true" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-title\"></ng-content>\n<div [axRipple] class=\"ax-side-item\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-active]=\"active\"\n  (click)=\"_handleClickEvent($event)\">\n  <div class=\"ax-start-side\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n    @if(text){\n    <span>{{text}}</span>\n    }\n    {{hasChild()}}\n    <ng-content></ng-content>\n  </div>\n  <div class=\"ax-end-side\">\n    <ng-content select=\"ax-suffix\"></ng-content>\n    @if(hasChild() && !isLoading){\n    <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed\"></span>\n    }\n    @if(isLoading){\n    <ax-loading></ax-loading>\n    }\n  </div>\n</div>\n\n<div class=\"ax-side-children\" [@collapse]=\"isCollapsed\">\n  @if(isLoading){\n  <p>\n    {{'loading' | translate | async }}\n  </p>\n  } @else {\n  <ng-content select=\"ax-side-menu-item, ng-container\"></ng-content>\n  }\n</div>\n\n<ng-content select=\"ax-divider\"></ng-content>", dependencies: [{ kind: "directive", type: i1.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "component", type: i2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], animations: [
             trigger('collapse', [
                 state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
                 state('true', style({ height: '0', visibility: 'hidden' })),
@@ -126,7 +126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                             transition('false => true', animate(150 + 'ms ease-in')),
                             transition('true => false', animate(150 + 'ms ease-out')),
                         ]),
-                    ], host: { ngSkipHydration: 'true' }, template: "<ng-content select=\"ax-title\"></ng-content>\n<div [axRipple] class=\"ax-side-item\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-active]=\"active\"\n  (click)=\"_handleClickEvent($event)\">\n  <div class=\"ax-start-side\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n    @if(text){\n    <span>{{text}}</span>\n    }\n    <ng-content></ng-content>\n  </div>\n  <div class=\"ax-end-side\">\n    <ng-content select=\"ax-suffix\"></ng-content>\n    @if(hasChild && !isLoading){\n    <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed\"></span>\n    }\n    @if(isLoading){\n    <ax-loading></ax-loading>\n    }\n  </div>\n</div>\n\n<div class=\"ax-side-children\" [@collapse]=\"isCollapsed\">\n  @if(isLoading){\n  <p>\n    {{'loading' | translate | async }}\n  </p>\n  } @else {\n  <ng-content select=\"ax-side-menu-item, ng-container\"></ng-content>\n  }\n</div>\n\n<ng-content select=\"ax-divider\"></ng-content>" }]
+                    ], host: { ngSkipHydration: 'true' }, template: "<ng-content select=\"ax-title\"></ng-content>\n<div [axRipple] class=\"ax-side-item\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-active]=\"active\"\n  (click)=\"_handleClickEvent($event)\">\n  <div class=\"ax-start-side\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n    @if(text){\n    <span>{{text}}</span>\n    }\n    {{hasChild()}}\n    <ng-content></ng-content>\n  </div>\n  <div class=\"ax-end-side\">\n    <ng-content select=\"ax-suffix\"></ng-content>\n    @if(hasChild() && !isLoading){\n    <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed\"></span>\n    }\n    @if(isLoading){\n    <ax-loading></ax-loading>\n    }\n  </div>\n</div>\n\n<div class=\"ax-side-children\" [@collapse]=\"isCollapsed\">\n  @if(isLoading){\n  <p>\n    {{'loading' | translate | async }}\n  </p>\n  } @else {\n  <ng-content select=\"ax-side-menu-item, ng-container\"></ng-content>\n  }\n</div>\n\n<ng-content select=\"ax-divider\"></ng-content>" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { isLoading: [{
                 type: Input
             }], textChange: [{
@@ -144,4 +144,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
             }], onClick: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZS1tZW51LWl0ZW0uY29tcG9lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvc2lkZS1tZW51L3NyYy9saWIvc2lkZS1tZW51LWl0ZW0vc2lkZS1tZW51LWl0ZW0uY29tcG9lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvc2lkZS1tZW51L3NyYy9saWIvc2lkZS1tZW51LWl0ZW0vc2lkZS1tZW51LWl0ZW0uY29tcG9lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLGdCQUFnQixFQUFFLHNCQUFzQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDbkcsT0FBTyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDN0YsT0FBTyxFQUVMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsVUFBVSxFQUNWLFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxFQUNOLGlCQUFpQixHQUNsQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sVUFBVSxDQUFDOzs7Ozs7QUFFbkMsTUFBTSxPQUFPLHdCQUF5QixTQUFRLFlBQVk7SUFBMUQ7O1FBQ0UsWUFBTyxHQUFHLEtBQUssQ0FBQztJQUNsQixDQUFDO0NBQUE7QUFrQkQsTUFBTSxPQUFPLHVCQUF3QixTQUFRLE9BQU8sQ0FBQyxzQkFBc0IsRUFBRSxnQkFBZ0IsQ0FBQztJQUU1Rjs7T0FFRztJQUNILElBQ1csU0FBUztRQUNsQixPQUFPLElBQUksQ0FBQyxVQUFVLENBQUM7SUFDekIsQ0FBQztJQUNELElBQVcsU0FBUyxDQUFDLENBQVU7UUFDN0IsSUFBSSxDQUFDLFNBQVMsQ0FBQztZQUNiLElBQUksRUFBRSxXQUFXO1lBQ2pC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S0FBSztnQkFlTixVQUFVO3NCQURULE1BQU07Z0JBUUksSUFBSTtzQkFEZCxLQUFLO2dCQVlOLGlCQUFpQjtzQkFEaEIsTUFBTTtnQkFRSSxXQUFXO3NCQURyQixLQUFLO2dCQWVOLFlBQVk7c0JBRFgsTUFBTTtnQkFRSSxNQUFNO3NCQURoQixLQUFLO2dCQVlOLE9BQU87c0JBRE4sTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFYQ2xpY2tFdmVudCwgTVhDb2xvckNvbXBvbmVudCwgTVhJbnRlcmFjdGl2ZUNvbXBvbmVudCB9IGZyb20gJ0BhY29yZXgvY29tcG9uZW50cy9jb21tb24nO1xuaW1wb3J0IHsgQVVUT19TVFlMRSwgYW5pbWF0ZSwgc3RhdGUsIHN0eWxlLCB0cmFuc2l0aW9uLCB0cmlnZ2VyIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5pbXBvcnQge1xuICBBZnRlckNvbnRlbnRJbml0LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IGNsYXNzZXMgfSBmcm9tICdwb2x5dHlwZSc7XG5cbmV4cG9ydCBjbGFzcyBBWFNpZGVNZW51SXRlbUNsaWNrRXZlbnQgZXh0ZW5kcyBBWENsaWNrRXZlbnQge1xuICBoYW5kbGVkID0gZmFsc2U7XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2F4LXNpZGUtbWVudS1pdGVtJyxcbiAgaW5wdXRzOiBbJ2Rpc2FibGVkJywgJ2NvbG9yJ10sXG4gIHRlbXBsYXRlVXJsOiAnLi9zaWRlLW1lbnUtaXRlbS5jb21wb2VudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGFuaW1hdGlvbnM6IFtcbiAgICB0cmlnZ2VyKCdjb2xsYXBzZScsIFtcbiAgICAgIHN0YXRlKCdmYWxzZScsIHN0eWxlKHsgaGVpZ2h0OiBBVVRPX1NUWUxFLCB2aXNpYmlsaXR5OiBBVVRPX1NUWUxFIH0pKSxcbiAgICAgIHN0YXRlKCd0cnVlJywgc3R5bGUoeyBoZWlnaHQ6ICcwJywgdmlzaWJpbGl0eTogJ2hpZGRlbicgfSkpLFxuICAgICAgdHJhbnNpdGlvbignZmFsc2UgPT4gdHJ1ZScsIGFuaW1hdGUoMTUwICsgJ21zIGVhc2UtaW4nKSksXG4gICAgICB0cmFuc2l0aW9uKCd0cnVlID0+IGZhbHNlJywgYW5pbWF0ZSgxNTAgKyAnbXMgZWFzZS1vdXQnKSksXG4gICAgXSksXG4gIF0sXG4gIGhvc3Q6IHsgbmdTa2lwSHlkcmF0aW9uOiAndHJ1ZScgfSxcbn0pXG5leHBvcnQgY2xhc3MgQVhTaWRlTWVudUl0ZW1Db21wb25lbnQgZXh0ZW5kcyBjbGFzc2VzKE1YSW50ZXJhY3RpdmVDb21wb25lbnQsIE1YQ29sb3JDb21wb25lbnQpIGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCB7XG4gIHByaXZhdGUgX2lzTG9hZGluZyA9IGZhbHNlO1xuICAvKipcbiAgICogIFByb3ZpZGluZyBhIGJvb2xlYW4gdmFsdWUgZm9yIGl0cyBjb2xsYXBzZSBzdGF0ZVxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIGdldCBpc0xvYWRpbmcoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuX2lzTG9hZGluZztcbiAgfVxuICBwdWJsaWMgc2V0IGlzTG9hZGluZyh2OiBib29sZWFuKSB7XG4gICAgdGhpcy5zZXRPcHRpb24oe1xuICAgICAgbmFtZTogJ2lzTG9hZGluZycsXG4gICAgICB2YWx1ZTogdixcbiAgICAgIGFmdGVyQ2FsbGJhY2s6ICgpID0+IHtcbiAgICAgICAgdGhpcy5jZHIuZGV0ZWN0Q2hhbmdlcygpO1xuICAgICAgfSxcbiAgICB9KTtcbiAgfVxuXG4gIEBPdXRwdXQoKVxuICB0ZXh0Q2hhbmdlOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuXG4gIHByaXZhdGUgX3RleHQ6IHN0cmluZztcbiAgLyoqXG4gICAqICBQcm92aWRpbmcgYSBzdHJpbmcgdmFsdWUgZm9yIGl0cyB0ZXh0IHN0YXRlXG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgZ2V0IHRleHQoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5fdGV4dDtcbiAgfVxuICBwdWJsaWMgc2V0IHRleHQodjogc3RyaW5nKSB7XG4gICAgdGhpcy5zZXRPcHRpb24oe1xuICAgICAgbmFtZTogJ3RleHQnLFxuICAgICAgdmFsdWU6IHYsXG4gICAgfSk7XG4gIH1cblxuICBAT3V0cHV0KClcbiAgaXNDb2xsYXBzZWRDaGFuZ2U6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG5cbiAgcHJpdmF0ZSBfaXNDb2xsYXBzZWQgPSBmYWxzZTtcbiAgLyoqXG4gICAqICBQcm92aWRpbmcgYSBib29sZWFuIHZhbHVlIGZvciBpdHMgY29sbGFwc2Ugc3RhdGVcbiAgICovXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBnZXQgaXNDb2xsYXBzZWQoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuX2lzQ29sbGFwc2VkO1xuICB9XG4gIHB1YmxpYyBzZXQgaXNDb2xsYXBzZWQodjogYm9vbGVhbikge1xuICAgIHRoaXMuc2V0T3B0aW9uKHtcbiAgICAgIG5hbWU6ICdpc0NvbGxhcHNlZCcsXG4gICAgICB2YWx1ZTogdixcbiAgICAgIGFmdGVyQ2FsbGJhY2s6ICgpID0+IHtcbiAgICAgICAgdGhpcy5jZHIuZGV0ZWN0Q2hhbmdlcygpO1xuICAgICAgfSxcbiAgICB9KTtcbiAgfVxuXG4gIEBPdXRwdXQoKVxuICBhY3RpdmVDaGFuZ2U6IEV2ZW50RW1pdHRlcjxib29sZWFuPiA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICBwcml2YXRlIF9hY3RpdmUgPSBmYWxzZTtcbiAgLyoqXG4gICAqICBQcm92aWRpbmcgYSBzdHJpbmcgdmFsdWUgZm9yIGl0cyB0ZXh0IHN0YXRlXG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgZ2V0IGFjdGl2ZSgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5fYWN0aXZlO1xuICB9XG4gIHB1YmxpYyBzZXQgYWN0aXZlKHY6IGJvb2xlYW4pIHtcbiAgICB0aGlzLnNldE9wdGlvbih7XG4gICAgICBuYW1lOiAnYWN0aXZlJyxcbiAgICAgIHZhbHVlOiB2LFxuICAgIH0pO1xuICB9XG5cbiAgQE91dHB1dCgpXG4gIG9uQ2xpY2s6IEV2ZW50RW1pdHRlcjxBWFNpZGVNZW51SXRlbUNsaWNrRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcjxBWFNpZGVNZW51SXRlbUNsaWNrRXZlbnQ+KCk7XG5cbiAgcHJvdGVjdGVkIGhhc0NoaWxkID0gZmFsc2U7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbGVtOiBFbGVtZW50UmVmKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuXG4gIF9oYW5kbGVDbGlja0V2ZW50KGU6IE1vdXNlRXZlbnQpIHtcbiAgICBpZiAodGhpcy5kaXNhYmxlZCB8fCB0aGlzLmlzTG9hZGluZykgcmV0dXJuO1xuICAgIGNvbnN0IGV2ZW50ID0ge1xuICAgICAgY29tcG9uZW50OiB0aGlzLFxuICAgICAgaHRtbEVsZW1lbnQ6IHRoaXMuZ2V0SG9zdEVsZW1lbnQoKSxcbiAgICAgIG5hdGl2ZUV2ZW50OiBlLFxuICAgICAgaGFuZGxlZDogZmFsc2UsXG4gICAgfTtcbiAgICB0aGlzLm9uQ2xpY2suZW1pdChldmVudCk7XG4gICAgaWYgKCFldmVudC5oYW5kbGVkKSB7XG4gICAgICB0aGlzLnRvZ2dsZSgpO1xuICAgIH1cbiAgICBlLnN0b3BQcm9wYWdhdGlvbigpO1xuICB9XG5cbiAgdG9nZ2xlKCkge1xuICAgIHRoaXMuaXNDb2xsYXBzZWQgPSAhdGhpcy5pc0NvbGxhcHNlZDtcbiAgfVxuXG4gIG9wZW4oKSB7XG4gICAgdGhpcy5pc0NvbGxhcHNlZCA9IHRydWU7XG4gIH1cblxuICBjbG9zZSgpIHtcbiAgICB0aGlzLmlzQ29sbGFwc2VkID0gZmFsc2U7XG4gIH1cblxuICBuZ0FmdGVyQ29udGVudEluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5oYXNDaGlsZCA9IHRoaXMuZWxlbS5uYXRpdmVFbGVtZW50LmdldEVsZW1lbnRzQnlUYWdOYW1lKCdheC1zaWRlLW1lbnUtaXRlbScpLmxlbmd0aCA+IDA7XG4gIH1cbn1cbiIsIjxuZy1jb250ZW50IHNlbGVjdD1cImF4LXRpdGxlXCI+PC9uZy1jb250ZW50PlxuPGRpdiBbYXhSaXBwbGVdIGNsYXNzPVwiYXgtc2lkZS1pdGVtXCIgW2NsYXNzLmF4LXN0YXRlLWRpc2FibGVkXT1cImRpc2FibGVkXCIgW2NsYXNzLmF4LXN0YXRlLWFjdGl2ZV09XCJhY3RpdmVcIlxuICAoY2xpY2spPVwiX2hhbmRsZUNsaWNrRXZlbnQoJGV2ZW50KVwiPlxuICA8ZGl2IGNsYXNzPVwiYXgtc3RhcnQtc2lkZVwiPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cImF4LXByZWZpeFwiPjwvbmctY29udGVudD5cbiAgICBAaWYodGV4dCl7XG4gICAgPHNwYW4+e3t0ZXh0fX08L3NwYW4+XG4gICAgfVxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJheC1lbmQtc2lkZVwiPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cImF4LXN1ZmZpeFwiPjwvbmctY29udGVudD5cbiAgICBAaWYoaGFzQ2hpbGQgJiYgIWlzTG9hZGluZyl7XG4gICAgPHNwYW4gY2xhc3M9XCJheC1pY29uIGF4LWljb24tY2hldnJvbi1yaWdodCBhcnJvdy1pY29uXCIgW2NsYXNzLmFycm93LWljb24tZXhwYW5kXT1cIiFpc0NvbGxhcHNlZFwiPjwvc3Bhbj5cbiAgICB9XG4gICAgQGlmKGlzTG9hZGluZyl7XG4gICAgPGF4LWxvYWRpbmc+PC9heC1sb2FkaW5nPlxuICAgIH1cbiAgPC9kaXY+XG48L2Rpdj5cblxuPGRpdiBjbGFzcz1cImF4LXNpZGUtY2hpbGRyZW5cIiBbQGNvbGxhcHNlXT1cImlzQ29sbGFwc2VkXCI+XG4gIEBpZihpc0xvYWRpbmcpe1xuICA8cD5cbiAgICB7eydsb2FkaW5nJyB8IHRyYW5zbGF0ZSB8IGFzeW5jIH19XG4gIDwvcD5cbiAgfSBAZWxzZSB7XG4gIDxuZy1jb250ZW50IHNlbGVjdD1cImF4LXNpZGUtbWVudS1pdGVtLCBuZy1jb250YWluZXJcIj48L25nLWNvbnRlbnQ+XG4gIH1cbjwvZGl2PlxuXG48bmctY29udGVudCBzZWxlY3Q9XCJheC1kaXZpZGVyXCI+PC9uZy1jb250ZW50PiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZS1tZW51LWl0ZW0uY29tcG9lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvc2lkZS1tZW51L3NyYy9saWIvc2lkZS1tZW51LWl0ZW0vc2lkZS1tZW51LWl0ZW0uY29tcG9lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvc2lkZS1tZW51L3NyYy9saWIvc2lkZS1tZW51LWl0ZW0vc2lkZS1tZW51LWl0ZW0uY29tcG9lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLGdCQUFnQixFQUFFLHNCQUFzQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDbkcsT0FBTyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDN0YsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsVUFBVSxFQUNWLFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxFQUNOLGlCQUFpQixFQUNqQixlQUFlLEVBQ2YsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxVQUFVLENBQUM7Ozs7OztBQUVuQyxNQUFNLE9BQU8sd0JBQXlCLFNBQVEsWUFBWTtJQUExRDs7UUFDRSxZQUFPLEdBQUcsS0FBSyxDQUFDO0lBQ2xCLENBQUM7Q0FBQTtBQWtCRCxNQUFNLE9BQU8sdUJBQXdCLFNBQVEsT0FBTyxDQUFDLHNCQUFzQixFQUFFLGdCQUFnQixDQUFDO0lBRTVGOztPQUVHO0lBQ0gsSUFDVyxTQUFTO1FBQ2xCLE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUN6QixDQUFDO0lBQ0QsSUFBVyxTQUFTLENBQUMsQ0FBVTtRQUM3QixJQUFJLENBQUMsU0FBUyxDQUFDO1lBQ2Is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LENBQUM7eUJBQzFELENBQUM7cUJBQ0gsUUFDSyxFQUFFLGVBQWUsRUFBRSxNQUFNLEVBQUU7K0VBUXRCLFNBQVM7c0JBRG5CLEtBQUs7Z0JBZU4sVUFBVTtzQkFEVCxNQUFNO2dCQVFJLElBQUk7c0JBRGQsS0FBSztnQkFZTixpQkFBaUI7c0JBRGhCLE1BQU07Z0JBUUksV0FBVztzQkFEckIsS0FBSztnQkFlTixZQUFZO3NCQURYLE1BQU07Z0JBUUksTUFBTTtzQkFEaEIsS0FBSztnQkFZTixPQUFPO3NCQUROLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBWENsaWNrRXZlbnQsIE1YQ29sb3JDb21wb25lbnQsIE1YSW50ZXJhY3RpdmVDb21wb25lbnQgfSBmcm9tICdAYWNvcmV4L2NvbXBvbmVudHMvY29tbW9uJztcbmltcG9ydCB7IEFVVE9fU1RZTEUsIGFuaW1hdGUsIHN0YXRlLCBzdHlsZSwgdHJhbnNpdGlvbiwgdHJpZ2dlciB9IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbiAgYWZ0ZXJOZXh0UmVuZGVyLFxuICBzaWduYWwsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgY2xhc3NlcyB9IGZyb20gJ3BvbHl0eXBlJztcblxuZXhwb3J0IGNsYXNzIEFYU2lkZU1lbnVJdGVtQ2xpY2tFdmVudCBleHRlbmRzIEFYQ2xpY2tFdmVudCB7XG4gIGhhbmRsZWQgPSBmYWxzZTtcbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXgtc2lkZS1tZW51LWl0ZW0nLFxuICBpbnB1dHM6IFsnZGlzYWJsZWQnLCAnY29sb3InXSxcbiAgdGVtcGxhdGVVcmw6ICcuL3NpZGUtbWVudS1pdGVtLmNvbXBvZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgYW5pbWF0aW9uczogW1xuICAgIHRyaWdnZXIoJ2NvbGxhcHNlJywgW1xuICAgICAgc3RhdGUoJ2ZhbHNlJywgc3R5bGUoeyBoZWlnaHQ6IEFVVE9fU1RZTEUsIHZpc2liaWxpdHk6IEFVVE9fU1RZTEUgfSkpLFxuICAgICAgc3RhdGUoJ3RydWUnLCBzdHlsZSh7IGhlaWdodDogJzAnLCB2aXNpYmlsaXR5OiAnaGlkZGVuJyB9KSksXG4gICAgICB0cmFuc2l0aW9uKCdmYWxzZSA9PiB0cnVlJywgYW5pbWF0ZSgxNTAgKyAnbXMgZWFzZS1pbicpKSxcbiAgICAgIHRyYW5zaXRpb24oJ3RydWUgPT4gZmFsc2UnLCBhbmltYXRlKDE1MCArICdtcyBlYXNlLW91dCcpKSxcbiAgICBdKSxcbiAgXSxcbiAgaG9zdDogeyBuZ1NraXBIeWRyYXRpb246ICd0cnVlJyB9LFxufSlcbmV4cG9ydCBjbGFzcyBBWFNpZGVNZW51SXRlbUNvbXBvbmVudCBleHRlbmRzIGNsYXNzZXMoTVhJbnRlcmFjdGl2ZUNvbXBvbmVudCwgTVhDb2xvckNvbXBvbmVudCkge1xuICBwcml2YXRlIF9pc0xvYWRpbmcgPSBmYWxzZTtcbiAgLyoqXG4gICAqICBQcm92aWRpbmcgYSBib29sZWFuIHZhbHVlIGZvciBpdHMgY29sbGFwc2Ugc3RhdGVcbiAgICovXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBnZXQgaXNMb2FkaW5nKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9pc0xvYWRpbmc7XG4gIH1cbiAgcHVibGljIHNldCBpc0xvYWRpbmcodjogYm9vbGVhbikge1xuICAgIHRoaXMuc2V0T3B0aW9uKHtcbiAgICAgIG5hbWU6ICdpc0xvYWRpbmcnLFxuICAgICAgdmFsdWU6IHYsXG4gICAgICBhZnRlckNhbGxiYWNrOiAoKSA9PiB7XG4gICAgICAgIHRoaXMuY2RyLmRldGVjdENoYW5nZXMoKTtcbiAgICAgIH0sXG4gICAgfSk7XG4gIH1cblxuICBAT3V0cHV0KClcbiAgdGV4dENoYW5nZTogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcblxuICBwcml2YXRlIF90ZXh0OiBzdHJpbmc7XG4gIC8qKlxuICAgKiAgUHJvdmlkaW5nIGEgc3RyaW5nIHZhbHVlIGZvciBpdHMgdGV4dCBzdGF0ZVxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIGdldCB0ZXh0KCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuX3RleHQ7XG4gIH1cbiAgcHVibGljIHNldCB0ZXh0KHY6IHN0cmluZykge1xuICAgIHRoaXMuc2V0T3B0aW9uKHtcbiAgICAgIG5hbWU6ICd0ZXh0JyxcbiAgICAgIHZhbHVlOiB2LFxuICAgIH0pO1xuICB9XG5cbiAgQE91dHB1dCgpXG4gIGlzQ29sbGFwc2VkQ2hhbmdlOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuXG4gIHByaXZhdGUgX2lzQ29sbGFwc2VkID0gZmFsc2U7XG4gIC8qKlxuICAgKiAgUHJvdmlkaW5nIGEgYm9vbGVhbiB2YWx1ZSBmb3IgaXRzIGNvbGxhcHNlIHN0YXRlXG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgZ2V0IGlzQ29sbGFwc2VkKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9pc0NvbGxhcHNlZDtcbiAgfVxuICBwdWJsaWMgc2V0IGlzQ29sbGFwc2VkKHY6IGJvb2xlYW4pIHtcbiAgICB0aGlzLnNldE9wdGlvbih7XG4gICAgICBuYW1lOiAnaXNDb2xsYXBzZWQnLFxuICAgICAgdmFsdWU6IHYsXG4gICAgICBhZnRlckNhbGxiYWNrOiAoKSA9PiB7XG4gICAgICAgIHRoaXMuY2RyLmRldGVjdENoYW5nZXMoKTtcbiAgICAgIH0sXG4gICAgfSk7XG4gIH1cblxuICBAT3V0cHV0KClcbiAgYWN0aXZlQ2hhbmdlOiBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4gPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgcHJpdmF0ZSBfYWN0aXZlID0gZmFsc2U7XG4gIC8qKlxuICAgKiAgUHJvdmlkaW5nIGEgc3RyaW5nIHZhbHVlIGZvciBpdHMgdGV4dCBzdGF0ZVxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIGdldCBhY3RpdmUoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuX2FjdGl2ZTtcbiAgfVxuICBwdWJsaWMgc2V0IGFjdGl2ZSh2OiBib29sZWFuKSB7XG4gICAgdGhpcy5zZXRPcHRpb24oe1xuICAgICAgbmFtZTogJ2FjdGl2ZScsXG4gICAgICB2YWx1ZTogdixcbiAgICB9KTtcbiAgfVxuXG4gIEBPdXRwdXQoKVxuICBvbkNsaWNrOiBFdmVudEVtaXR0ZXI8QVhTaWRlTWVudUl0ZW1DbGlja0V2ZW50PiA9IG5ldyBFdmVudEVtaXR0ZXI8QVhTaWRlTWVudUl0ZW1DbGlja0V2ZW50PigpO1xuXG4gIHByb3RlY3RlZCBoYXNDaGlsZCA9IHNpZ25hbChmYWxzZSk7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbGVtOiBFbGVtZW50UmVmKSB7XG4gICAgc3VwZXIoKTtcblxuICAgIGFmdGVyTmV4dFJlbmRlcigoKSA9PiB7XG4gICAgICB0aGlzLmhhc0NoaWxkLnNldCh0aGlzLmVsZW0ubmF0aXZlRWxlbWVudC5nZXRFbGVtZW50c0J5VGFnTmFtZSgnYXgtc2lkZS1tZW51LWl0ZW0nKS5sZW5ndGggPiAwKTtcbiAgICB9KTtcbiAgfVxuXG4gIF9oYW5kbGVDbGlja0V2ZW50KGU6IE1vdXNlRXZlbnQpIHtcbiAgICBpZiAodGhpcy5kaXNhYmxlZCB8fCB0aGlzLmlzTG9hZGluZykgcmV0dXJuO1xuICAgIGNvbnN0IGV2ZW50ID0ge1xuICAgICAgY29tcG9uZW50OiB0aGlzLFxuICAgICAgaHRtbEVsZW1lbnQ6IHRoaXMuZ2V0SG9zdEVsZW1lbnQoKSxcbiAgICAgIG5hdGl2ZUV2ZW50OiBlLFxuICAgICAgaGFuZGxlZDogZmFsc2UsXG4gICAgfTtcbiAgICB0aGlzLm9uQ2xpY2suZW1pdChldmVudCk7XG4gICAgaWYgKCFldmVudC5oYW5kbGVkKSB7XG4gICAgICB0aGlzLnRvZ2dsZSgpO1xuICAgIH1cbiAgICBlLnN0b3BQcm9wYWdhdGlvbigpO1xuICB9XG5cbiAgdG9nZ2xlKCkge1xuICAgIHRoaXMuaXNDb2xsYXBzZWQgPSAhdGhpcy5pc0NvbGxhcHNlZDtcbiAgfVxuXG4gIG9wZW4oKSB7XG4gICAgdGhpcy5pc0NvbGxhcHNlZCA9IHRydWU7XG4gIH1cblxuICBjbG9zZSgpIHtcbiAgICB0aGlzLmlzQ29sbGFwc2VkID0gZmFsc2U7XG4gIH1cbn1cbiIsIjxuZy1jb250ZW50IHNlbGVjdD1cImF4LXRpdGxlXCI+PC9uZy1jb250ZW50PlxuPGRpdiBbYXhSaXBwbGVdIGNsYXNzPVwiYXgtc2lkZS1pdGVtXCIgW2NsYXNzLmF4LXN0YXRlLWRpc2FibGVkXT1cImRpc2FibGVkXCIgW2NsYXNzLmF4LXN0YXRlLWFjdGl2ZV09XCJhY3RpdmVcIlxuICAoY2xpY2spPVwiX2hhbmRsZUNsaWNrRXZlbnQoJGV2ZW50KVwiPlxuICA8ZGl2IGNsYXNzPVwiYXgtc3RhcnQtc2lkZVwiPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cImF4LXByZWZpeFwiPjwvbmctY29udGVudD5cbiAgICBAaWYodGV4dCl7XG4gICAgPHNwYW4+e3t0ZXh0fX08L3NwYW4+XG4gICAgfVxuICAgIHt7aGFzQ2hpbGQoKX19XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cImF4LWVuZC1zaWRlXCI+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiYXgtc3VmZml4XCI+PC9uZy1jb250ZW50PlxuICAgIEBpZihoYXNDaGlsZCgpICYmICFpc0xvYWRpbmcpe1xuICAgIDxzcGFuIGNsYXNzPVwiYXgtaWNvbiBheC1pY29uLWNoZXZyb24tcmlnaHQgYXJyb3ctaWNvblwiIFtjbGFzcy5hcnJvdy1pY29uLWV4cGFuZF09XCIhaXNDb2xsYXBzZWRcIj48L3NwYW4+XG4gICAgfVxuICAgIEBpZihpc0xvYWRpbmcpe1xuICAgIDxheC1sb2FkaW5nPjwvYXgtbG9hZGluZz5cbiAgICB9XG4gIDwvZGl2PlxuPC9kaXY+XG5cbjxkaXYgY2xhc3M9XCJheC1zaWRlLWNoaWxkcmVuXCIgW0Bjb2xsYXBzZV09XCJpc0NvbGxhcHNlZFwiPlxuICBAaWYoaXNMb2FkaW5nKXtcbiAgPHA+XG4gICAge3snbG9hZGluZycgfCB0cmFuc2xhdGUgfCBhc3luYyB9fVxuICA8L3A+XG4gIH0gQGVsc2Uge1xuICA8bmctY29udGVudCBzZWxlY3Q9XCJheC1zaWRlLW1lbnUtaXRlbSwgbmctY29udGFpbmVyXCI+PC9uZy1jb250ZW50PlxuICB9XG48L2Rpdj5cblxuPG5nLWNvbnRlbnQgc2VsZWN0PVwiYXgtZGl2aWRlclwiPjwvbmctY29udGVudD4iXX0=

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

@@ -0,0 +1,223 @@
+import * as i0 from '@angular/core';
+import { input, output, inject, NgZone, afterNextRender, Component, ViewEncapsulation, ViewChild, NgModule } from '@angular/core';
+import WaveSurfer from 'wavesurfer.js';
+import { AXButtonModule } from '@acorex/components/button';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { CommonModule } from '@angular/common';
+
+class AXAudioWaveComponent {
+    constructor() {
+        this.config = input();
+        this.onStatusChanged = output();
+        this.ngZone = inject(NgZone);
+        afterNextRender(() => {
+            const primary500 = getComputedStyle(document.body).getPropertyValue('--ax-color-primary-500');
+            const primary700 = getComputedStyle(document.body).getPropertyValue('--ax-color-primary-700');
+            this.audio = WaveSurfer.create({
+                container: this.div.nativeElement,
+                waveColor: this.config()?.waveColor || `rgba(${primary500})`,
+                progressColor: this.config()?.progressColor || `rgba(${primary700})`,
+                url: this.config()?.url || '',
+                barWidth: this.config()?.barWidth || 2,
+                barRadius: this.config()?.barRadius || 2,
+                barGap: this.config()?.barGap || 1,
+                height: this.config()?.height || 18,
+            });
+            this.audio.load(this.config()?.url);
+            this.bindEvents();
+        });
+    }
+    play() {
+        return this.audio.play();
+    }
+    pause() {
+        this.audio.pause();
+    }
+    getDuration() {
+        return this.audio?.getDuration();
+    }
+    getMediaElement() {
+        return this.audio?.getMediaElement();
+    }
+    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();
+    }
+    /** When audio starts loading */
+    handleLoad() {
+        this.audio.on('load', (url) => {
+            this.ngZone.run(() => {
+                this.onStatusChanged.emit({ component: this, data: { url }, status: 'load', isUserInteraction: false });
+            });
+        });
+    }
+    /** During audio loading */
+    handleLoading() {
+        this.audio.on('loading', (percent) => {
+            this.ngZone.run(() => {
+                this.onStatusChanged.emit({ component: this, data: { percent }, status: 'loading', isUserInteraction: false });
+            });
+        });
+    }
+    /** When the audio has been decoded */
+    handleDecode() {
+        this.audio.on('decode', (duration) => {
+            this.ngZone.run(() => {
+                this.onStatusChanged.emit({ component: this, data: { duration }, status: 'decode', isUserInteraction: false });
+            });
+        });
+    }
+    /** 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 }, status: 'ready', isUserInteraction: false });
+            });
+        });
+    }
+    /** 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 });
+            });
+        });
+    }
+    /** When the audio starts playing */
+    handlePlay() {
+        this.audio.on('play', () => {
+            this.ngZone.run(() => {
+                this.onStatusChanged.emit({ component: this, data: null, status: 'play', isUserInteraction: false });
+            });
+        });
+    }
+    /** When the audio pauses */
+    handlePause() {
+        this.audio.on('pause', () => {
+            this.ngZone.run(() => {
+                this.onStatusChanged.emit({ component: this, data: null, status: 'pause', isUserInteraction: 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 });
+            });
+        });
+    }
+    /** On audio position change, fires continuously during playback */
+    handleTimeUpdate() {
+        this.audio.on('timeupdate', (currentTime) => {
+            this.ngZone.run(() => {
+                this.onStatusChanged.emit({ component: this, data: { currentTime }, status: 'timeupdate', isUserInteraction: 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 }, status: 'seeking', isUserInteraction: 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 }, status: 'interaction', isUserInteraction: false });
+            });
+        });
+    }
+    /** When the user clicks on the waveform */
+    handleClick() {
+        this.audio.on('click', (relativeX) => {
+            this.ngZone.run(() => {
+                this.onStatusChanged.emit({ component: this, data: { relativeX }, status: 'click', isUserInteraction: false });
+            });
+        });
+    }
+    /** When the user drags the cursor */
+    handleDrag() {
+        this.audio.on('drag', (relativeX) => {
+            this.ngZone.run(() => {
+                this.onStatusChanged.emit({ component: this, data: { relativeX }, status: 'drag', isUserInteraction: 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,
+                });
+            });
+        });
+    }
+    /** When the zoom level changes */
+    handleZoom() {
+        this.audio.on('zoom', (minPxPerSec) => {
+            this.ngZone.run(() => {
+                this.onStatusChanged.emit({ component: this, data: { minPxPerSec }, status: 'zoom', isUserInteraction: 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 });
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXAudioWaveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.2", type: AXAudioWaveComponent, selector: "ax-audio-wave", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onStatusChanged: "onStatusChanged" }, viewQueries: [{ propertyName: "div", first: true, predicate: ["d"], descendants: true }], ngImport: i0, template: "<div class=\"ax-audio-wave\" #d></div>", styles: ["ax-audio-wave{display:block;width:100%;flex:1}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXAudioWaveComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-audio-wave', encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-audio-wave\" #d></div>", styles: ["ax-audio-wave{display:block;width:100%;flex:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { div: [{
+                type: ViewChild,
+                args: ['d']
+            }] } });
+
+class AXAudioWaveModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXAudioWaveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: AXAudioWaveModule, declarations: [AXAudioWaveComponent], imports: [CommonModule, AXButtonModule, AXDecoratorModule], exports: [AXAudioWaveComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXAudioWaveModule, imports: [CommonModule, AXButtonModule, AXDecoratorModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXAudioWaveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXAudioWaveComponent],
+                    imports: [CommonModule, AXButtonModule, AXDecoratorModule],
+                    exports: [AXAudioWaveComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXAudioWaveComponent, AXAudioWaveModule };
+//# sourceMappingURL=acorex-components-audio-wave.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-audio-wave.mjs","sources":["../../../../libs/components/audio-wave/src/lib/audio-wave.component.ts","../../../../libs/components/audio-wave/src/lib/audio-wave.component.html","../../../../libs/components/audio-wave/src/lib/audio-wave.module.ts","../../../../libs/components/audio-wave/src/acorex-components-audio-wave.ts"],"sourcesContent":["import {\n  Component,\n  ElementRef,\n  InputSignal,\n  NgZone,\n  ViewChild,\n  ViewEncapsulation,\n  afterNextRender,\n  inject,\n  input,\n  output,\n} from '@angular/core';\nimport WaveSurfer from 'wavesurfer.js';\nimport { AXAudioWaveChangeEvent, AXWaveConfig } from './interfaces/audio-wave.interface';\n\n@Component({\n  selector: 'ax-audio-wave',\n  templateUrl: './audio-wave.component.html',\n  styleUrls: ['./audio-wave.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXAudioWaveComponent {\n  @ViewChild('d') protected div: ElementRef<HTMLDivElement>;\n  config: InputSignal<AXWaveConfig> = input<AXWaveConfig>();\n\n  onStatusChanged = output<AXAudioWaveChangeEvent>();\n\n  protected audio: WaveSurfer;\n  private ngZone = inject(NgZone);\n\n  constructor() {\n    afterNextRender(() => {\n      const primary500 = getComputedStyle(document.body).getPropertyValue('--ax-color-primary-500');\n      const primary700 = getComputedStyle(document.body).getPropertyValue('--ax-color-primary-700');\n\n      this.audio = WaveSurfer.create({\n        container: this.div.nativeElement,\n        waveColor: this.config()?.waveColor || `rgba(${primary500})`,\n        progressColor: this.config()?.progressColor || `rgba(${primary700})`,\n        url: this.config()?.url || '',\n        barWidth: this.config()?.barWidth || 2,\n        barRadius: this.config()?.barRadius || 2,\n        barGap: this.config()?.barGap || 1,\n        height: this.config()?.height || 18,\n      });\n      this.audio.load(this.config()?.url);\n      this.bindEvents();\n    });\n  }\n\n  play(): Promise<any> {\n    return this.audio.play();\n  }\n\n  pause(): void {\n    this.audio.pause();\n  }\n\n  getDuration() {\n    return this.audio?.getDuration();\n  }\n\n  getMediaElement() {\n    return this.audio?.getMediaElement();\n  }\n\n  protected bindEvents() {\n    this.handleLoad();\n    this.handleLoading();\n    this.handleDecode();\n    this.handleReady();\n    this.handleRedRawComplete();\n    this.handlePlay();\n    this.handlePause();\n    this.handleFinish();\n    this.handleTimeUpdate();\n    this.handleSeeking();\n    this.handleInteraction();\n    this.handleClick();\n    this.handleDrag();\n    this.handleScroll();\n    this.handleZoom();\n    this.handleDestroy();\n  }\n  /** When audio starts loading */\n  protected handleLoad() {\n    this.audio.on('load', (url) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({ component: this, data: { url }, status: 'load', isUserInteraction: false });\n      });\n    });\n  }\n\n  /** During audio loading */\n  protected handleLoading() {\n    this.audio.on('loading', (percent) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({ component: this, data: { percent }, status: 'loading', isUserInteraction: false });\n      });\n    });\n  }\n\n  /** When the audio has been decoded */\n  protected handleDecode() {\n    this.audio.on('decode', (duration) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({ component: this, data: { duration }, status: 'decode', isUserInteraction: false });\n      });\n    });\n  }\n\n  /** When the audio is both decoded and can play */\n  protected handleReady() {\n    this.audio.on('ready', (duration) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({ component: this, data: { duration }, status: 'ready', isUserInteraction: false });\n      });\n    });\n  }\n\n  /** When all audio channel chunks of the waveform have drawn */\n  protected handleRedRawComplete() {\n    this.audio.on('redrawcomplete', () => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({ component: this, data: null, status: 'redrawcomplete', isUserInteraction: false });\n      });\n    });\n  }\n\n  /** When the audio starts playing */\n  protected handlePlay() {\n    this.audio.on('play', () => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({ component: this, data: null, status: 'play', isUserInteraction: false });\n      });\n    });\n  }\n\n  /** When the audio pauses */\n  protected handlePause() {\n    this.audio.on('pause', () => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({ component: this, data: null, status: 'pause', isUserInteraction: false });\n      });\n    });\n  }\n\n  /** When the audio finishes playing */\n  protected handleFinish() {\n    this.audio.on('finish', () => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({ component: this, data: null, status: 'finish', isUserInteraction: false });\n      });\n    });\n  }\n\n  /** On audio position change, fires continuously during playback */\n  protected handleTimeUpdate() {\n    this.audio.on('timeupdate', (currentTime) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({ component: this, data: { currentTime }, status: 'timeupdate', isUserInteraction: false });\n      });\n    });\n  }\n\n  /** When the user seeks to a new position */\n  protected handleSeeking() {\n    this.audio.on('seeking', (currentTime) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({ component: this, data: { currentTime }, status: 'seeking', isUserInteraction: false });\n      });\n    });\n  }\n\n  /** When the user interacts with the waveform (i.g. clicks or drags on it) */\n  protected handleInteraction() {\n    this.audio.on('interaction', (newTime) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({ component: this, data: { newTime }, status: 'interaction', isUserInteraction: false });\n      });\n    });\n  }\n\n  /** When the user clicks on the waveform */\n  protected handleClick() {\n    this.audio.on('click', (relativeX) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({ component: this, data: { relativeX }, status: 'click', isUserInteraction: false });\n      });\n    });\n  }\n\n  /** When the user drags the cursor */\n  protected handleDrag() {\n    this.audio.on('drag', (relativeX) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({ component: this, data: { relativeX }, status: 'drag', isUserInteraction: false });\n      });\n    });\n  }\n\n  /** When the waveform is scrolled (panned) */\n  protected handleScroll() {\n    this.audio.on('scroll', (visibleStartTime, visibleEndTime) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({\n          component: this,\n          data: { visibleStartTime, visibleEndTime },\n          status: 'scroll',\n          isUserInteraction: false,\n        });\n      });\n    });\n  }\n\n  /** When the zoom level changes */\n  protected handleZoom() {\n    this.audio.on('zoom', (minPxPerSec) => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({ component: this, data: { minPxPerSec }, status: 'zoom', isUserInteraction: false });\n      });\n    });\n  }\n\n  /** Just before the waveform is destroyed so you can clean up your events */\n  protected handleDestroy() {\n    this.audio.on('destroy', () => {\n      this.ngZone.run(() => {\n        this.onStatusChanged.emit({ component: this, data: null, status: 'destroy', isUserInteraction: false });\n      });\n    });\n  }\n}\n","<div class=\"ax-audio-wave\" #d></div>","import { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXAudioWaveComponent } from './audio-wave.component';\n\n@NgModule({\n  declarations: [AXAudioWaveComponent],\n  imports: [CommonModule, AXButtonModule, AXDecoratorModule],\n  exports: [AXAudioWaveComponent],\n})\nexport class AXAudioWaveModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-chat.mjs

@@ -1,6 +1,6 @@
 import { MXInputBaseValueComponent, MXLookComponent, AXComponent, AXFocusableComponent, AXValuableComponent, MXBaseComponent, AXRippleDirective } from '@acorex/components/common';
 import * as i0 from '@angular/core';
-import { signal, Injectable, EventEmitter, inject, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, Output, input, HostBinding, NgModule, Optional, Inject } from '@angular/core';
+import { signal, Injectable, EventEmitter, inject, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, Output, input, HostBinding, afterNextRender, NgModule, Optional, Inject } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { classes } from 'polytype';
@@ -16,6 +16,9 @@ import * as i6 from '@acorex/core/translation';
 import { AXTranslationModule } from '@acorex/core/translation';
 import * as i2$1 from '@acorex/core/format';
 import { AXFormatModule } from '@acorex/core/format';
+import * as i2$2 from '@acorex/components/audio-wave';
+import { AXAudioWaveModule } from '@acorex/components/audio-wave';
+import { AXCircularProgressModule } from '@acorex/components/circular-progress';
 
 class AXRecordingService {
     constructor() {
@@ -237,11 +240,11 @@ class AXChatMessageComponent extends MXBaseComponent {
         return `${this.isOwn ? 'ax-state-own' : ''} ${!this.isOwn ? 'ax-state-other' : ''}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXChatMessageComponent, selector: "ax-chat-message", inputs: { chatMessage: { classPropertyName: "chatMessage", publicName: "chatMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<!-- @if(_replyTo()){\n<div class=\"ax-chat-message-reply\">\n    <ng-content select=\"ax-chat-message\"></ng-content>\n</div>\n}\n<ng-content select=\"ax-chat-message-content\"></ng-content>\n<div class=\"ax-chat-message-status\">\n    <div>\n        <ng-content select=\"ax-prefix\"></ng-content>\n    </div>\n    <div>\n        <span>{{_time()}}</span>\n        <span>\n            @if(_sent() && !_read()){\n            <i class=\"ax-icon ax-icon-check\"></i>\n            }\n            @if(_read()){\n            <i class=\"ax-icon ax-icon-dobble-check\"></i>\n            }\n        </span>\n        <ng-content select=\"ax-suffix\"></ng-content>\n    </div>\n</div> -->\n<ng-container\n    *ngComponentOutlet=\"registryService.resolve(chatMessage().type).component;inputs:{message:chatMessage()}\"></ng-container>\n<div class=\"ax-chat-message-status\">\n    <div>\n        <ng-content select=\"ax-prefix\"></ng-content>\n    </div>\n    <div>\n        <span>{{ chatMessage().sendTime | format:'datetime':'HH:mm' | async }}</span>\n        <span>\n            @if(isOwn)\n            {\n            @if(chatMessage().deliverTime){\n            <i class=\"ax-icon ax-icon-check\"></i>\n            }\n            @if(chatMessage().readTime){\n            <i class=\"ax-icon ax-icon-dobble-check\"></i>\n            }\n            }\n        </span>\n    </div>\n</div>", styles: ["ax-chat-message{display:block;padding:.75rem;font-size:.875rem;line-height:1.25rem;border-radius:.75rem;border:1px solid;--ax-reply-bk: rgba(var(--ax-color-primary-500), .15);--ax-reply-color: rgba(var(--ax-color-primary-fore-tint));--ax-reply-border-color: rgba(var(--ax-color-primary-700));--ax-primary: rgba(var(--ax-color-primary-100));--ax-primary-fore: rgba(var(--ax-color-primary-700))}ax-chat-message.ax-state-own{border-end-end-radius:0!important;background-color:var(--ax-primary);border-color:var(--ax-primary)}ax-chat-message.ax-state-own .ax-chat-message-status{color:var(--ax-primary-fore)}ax-chat-message.ax-state-other{border-end-start-radius:0!important;background-color:rgba(var(--ax-color-surface));border-color:var(--ax-primary)}ax-chat-message.ax-state-other .ax-chat-message-status{color:rgba(var(--ax-color-neutral-400))}ax-chat-message .ax-chat-message-status{display:flex;justify-content:space-between;align-items:center;font-size:.75rem}ax-chat-message .ax-chat-message-status>div{display:flex;gap:.125rem;align-items:center}ax-chat-message .ax-chat-message-reply{display:flex;flex-direction:column;background-color:var(--ax-reply-bk);color:var(--ax-reply-color);border-radius:.5rem;gap:.25rem;padding:.25rem .75rem;margin-bottom:.25rem;border-inline-start:.25rem solid;border-inline-start-color:var(--ax-reply-border-color);cursor:pointer}.ax-dark ax-chat-message{--ax-reply-bk: rgba(var(--ax-color-primary-800));--ax-reply-color: rgba(var(--ax-color-primary-fore));--ax-reply-border-color: rgba(var(--ax-color-primary-fore));--ax-primary: rgba(var(--ax-color-primary-700));--ax-primary-fore: rgba(var(--ax-color-primary-fore))}\n"], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXChatMessageComponent, selector: "ax-chat-message", inputs: { chatMessage: { classPropertyName: "chatMessage", publicName: "chatMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngComponentOutlet=\"registryService.resolve(chatMessage().type).component;inputs:{message:chatMessage()}\"></ng-container>\n<div class=\"ax-chat-message-status\">\n    <div>\n        <ng-content select=\"ax-prefix\"></ng-content>\n    </div>\n    <div>\n        <span>{{ chatMessage().sendTime | format:'datetime':'HH:mm' | async }}</span>\n        <span>\n            @if(isOwn)\n            {\n            @if(chatMessage().deliverTime){\n            <i class=\"ax-icon ax-icon-check\"></i>\n            }\n            @if(chatMessage().readTime){\n            <i class=\"ax-icon ax-icon-dobble-check\"></i>\n            }\n            }\n        </span>\n    </div>\n</div>", styles: ["ax-chat-message{display:block;padding:.75rem;font-size:.875rem;line-height:1.25rem;border-radius:.75rem;border:1px solid;--ax-other-color: rgba(var(--ax-color-surface));--ax-other-color-fore: rgba(var(--ax-color-surface-fore));--ax-own-color: rgba(var(--ax-color-primary-100));--ax-own-color-fore: rgba(var(--ax-color-primary-fore-tint))}ax-chat-message.ax-state-own{border-end-end-radius:0!important;background-color:var(--ax-own-color);border-color:var(--ax-own-color);color:var(--ax-own-color-fore)}ax-chat-message.ax-state-own .ax-chat-message-status{color:var(--ax-own-color-fore)}ax-chat-message.ax-state-other{border-end-start-radius:0!important;background-color:var(--ax-other-color);border-color:var(--ax-other-color);border-color:rgba(var(--ax-color-border-default))}ax-chat-message.ax-state-other .ax-chat-message-status{color:var(--ax-own-color-fore)}ax-chat-message .ax-chat-message-status{display:flex;justify-content:space-between;align-items:center;font-size:.75rem}ax-chat-message .ax-chat-message-status>div{display:flex;gap:.125rem;align-items:center}.ax-dark ax-chat-message{--ax-reply-bk: rgba(var(--ax-color-primary-800));--ax-reply-color: rgba(var(--ax-color-primary-fore));--ax-reply-border-color: rgba(var(--ax-color-primary-fore));--ax-own-color: rgba(var(--ax-color-primary-700));--ax-own-color-fore: rgba(var(--ax-color-primary-fore))}\n"], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-chat-message', encapsulation: ViewEncapsulation.None, template: "<!-- @if(_replyTo()){\n<div class=\"ax-chat-message-reply\">\n    <ng-content select=\"ax-chat-message\"></ng-content>\n</div>\n}\n<ng-content select=\"ax-chat-message-content\"></ng-content>\n<div class=\"ax-chat-message-status\">\n    <div>\n        <ng-content select=\"ax-prefix\"></ng-content>\n    </div>\n    <div>\n        <span>{{_time()}}</span>\n        <span>\n            @if(_sent() && !_read()){\n            <i class=\"ax-icon ax-icon-check\"></i>\n            }\n            @if(_read()){\n            <i class=\"ax-icon ax-icon-dobble-check\"></i>\n            }\n        </span>\n        <ng-content select=\"ax-suffix\"></ng-content>\n    </div>\n</div> -->\n<ng-container\n    *ngComponentOutlet=\"registryService.resolve(chatMessage().type).component;inputs:{message:chatMessage()}\"></ng-container>\n<div class=\"ax-chat-message-status\">\n    <div>\n        <ng-content select=\"ax-prefix\"></ng-content>\n    </div>\n    <div>\n        <span>{{ chatMessage().sendTime | format:'datetime':'HH:mm' | async }}</span>\n        <span>\n            @if(isOwn)\n            {\n            @if(chatMessage().deliverTime){\n            <i class=\"ax-icon ax-icon-check\"></i>\n            }\n            @if(chatMessage().readTime){\n            <i class=\"ax-icon ax-icon-dobble-check\"></i>\n            }\n            }\n        </span>\n    </div>\n</div>", styles: ["ax-chat-message{display:block;padding:.75rem;font-size:.875rem;line-height:1.25rem;border-radius:.75rem;border:1px solid;--ax-reply-bk: rgba(var(--ax-color-primary-500), .15);--ax-reply-color: rgba(var(--ax-color-primary-fore-tint));--ax-reply-border-color: rgba(var(--ax-color-primary-700));--ax-primary: rgba(var(--ax-color-primary-100));--ax-primary-fore: rgba(var(--ax-color-primary-700))}ax-chat-message.ax-state-own{border-end-end-radius:0!important;background-color:var(--ax-primary);border-color:var(--ax-primary)}ax-chat-message.ax-state-own .ax-chat-message-status{color:var(--ax-primary-fore)}ax-chat-message.ax-state-other{border-end-start-radius:0!important;background-color:rgba(var(--ax-color-surface));border-color:var(--ax-primary)}ax-chat-message.ax-state-other .ax-chat-message-status{color:rgba(var(--ax-color-neutral-400))}ax-chat-message .ax-chat-message-status{display:flex;justify-content:space-between;align-items:center;font-size:.75rem}ax-chat-message .ax-chat-message-status>div{display:flex;gap:.125rem;align-items:center}ax-chat-message .ax-chat-message-reply{display:flex;flex-direction:column;background-color:var(--ax-reply-bk);color:var(--ax-reply-color);border-radius:.5rem;gap:.25rem;padding:.25rem .75rem;margin-bottom:.25rem;border-inline-start:.25rem solid;border-inline-start-color:var(--ax-reply-border-color);cursor:pointer}.ax-dark ax-chat-message{--ax-reply-bk: rgba(var(--ax-color-primary-800));--ax-reply-color: rgba(var(--ax-color-primary-fore));--ax-reply-border-color: rgba(var(--ax-color-primary-fore));--ax-primary: rgba(var(--ax-color-primary-700));--ax-primary-fore: rgba(var(--ax-color-primary-fore))}\n"] }]
+            args: [{ selector: 'ax-chat-message', encapsulation: ViewEncapsulation.None, template: "<ng-container\n    *ngComponentOutlet=\"registryService.resolve(chatMessage().type).component;inputs:{message:chatMessage()}\"></ng-container>\n<div class=\"ax-chat-message-status\">\n    <div>\n        <ng-content select=\"ax-prefix\"></ng-content>\n    </div>\n    <div>\n        <span>{{ chatMessage().sendTime | format:'datetime':'HH:mm' | async }}</span>\n        <span>\n            @if(isOwn)\n            {\n            @if(chatMessage().deliverTime){\n            <i class=\"ax-icon ax-icon-check\"></i>\n            }\n            @if(chatMessage().readTime){\n            <i class=\"ax-icon ax-icon-dobble-check\"></i>\n            }\n            }\n        </span>\n    </div>\n</div>", styles: ["ax-chat-message{display:block;padding:.75rem;font-size:.875rem;line-height:1.25rem;border-radius:.75rem;border:1px solid;--ax-other-color: rgba(var(--ax-color-surface));--ax-other-color-fore: rgba(var(--ax-color-surface-fore));--ax-own-color: rgba(var(--ax-color-primary-100));--ax-own-color-fore: rgba(var(--ax-color-primary-fore-tint))}ax-chat-message.ax-state-own{border-end-end-radius:0!important;background-color:var(--ax-own-color);border-color:var(--ax-own-color);color:var(--ax-own-color-fore)}ax-chat-message.ax-state-own .ax-chat-message-status{color:var(--ax-own-color-fore)}ax-chat-message.ax-state-other{border-end-start-radius:0!important;background-color:var(--ax-other-color);border-color:var(--ax-other-color);border-color:rgba(var(--ax-color-border-default))}ax-chat-message.ax-state-other .ax-chat-message-status{color:var(--ax-own-color-fore)}ax-chat-message .ax-chat-message-status{display:flex;justify-content:space-between;align-items:center;font-size:.75rem}ax-chat-message .ax-chat-message-status>div{display:flex;gap:.125rem;align-items:center}.ax-dark ax-chat-message{--ax-reply-bk: rgba(var(--ax-color-primary-800));--ax-reply-color: rgba(var(--ax-color-primary-fore));--ax-reply-border-color: rgba(var(--ax-color-primary-fore));--ax-own-color: rgba(var(--ax-color-primary-700));--ax-own-color-fore: rgba(var(--ax-color-primary-fore))}\n"] }]
         }], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -265,16 +268,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                 type: Input
             }] } });
 
-class AXChatVoiceComponent {
-    constructor() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatVoiceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXChatVoiceComponent, selector: "ax-chat-voice", ngImport: i0, template: "", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatVoiceComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-chat-voice', template: "" }]
-        }], ctorParameters: () => [] });
-
 class AXChatMessageBaseComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatMessageBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatMessageBaseComponent }); }
@@ -283,27 +276,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
             type: Injectable
         }] });
 
-class AXChatAudioMessageComponent extends AXChatMessageBaseComponent {
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatAudioMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXChatAudioMessageComponent, selector: "ng-component", inputs: { message: "message" }, usesInheritance: true, ngImport: i0, template: `This is an Audio Message`, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatAudioMessageComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: `This is an Audio Message`,
-                    encapsulation: ViewEncapsulation.None,
-                    inputs: ['message'],
-                }]
-        }] });
-
 class AXChatTextMessageComponent extends AXChatMessageBaseComponent {
     constructor() {
         super(...arguments);
         this._text = signal('');
     }
     ngOnInit() {
-        this._text.set(this.message?.content?.text);
+        this._text.set(this.message?.content);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatTextMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXChatTextMessageComponent, selector: "ng-component", inputs: { message: "message" }, usesInheritance: true, ngImport: i0, template: `<div [innerHtml]="_text()"></div>`, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
@@ -317,11 +296,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                 }]
         }] });
 
+class AXChatAudioMessageComponent extends AXChatMessageBaseComponent {
+    constructor() {
+        super();
+        this.config = { url: '' };
+        this.audioState = signal('paused');
+        this.audioProgress = signal(0);
+        afterNextRender(() => {
+            this.config.url = this.message?.content;
+            this.audioState.set('loading');
+            this.audio.onStatusChanged.subscribe((c) => {
+                if (c.status === 'loading') {
+                    this.audioProgress.set(c.data.duration);
+                    console.log(c.data.duration);
+                }
+                if (c.status === 'ready') {
+                    this.audioState.set('ready');
+                }
+            });
+        });
+    }
+    handlePauseClick() {
+        this.audio.pause();
+        this.audioState.set('paused');
+    }
+    handlePlayClick() {
+        this.audio.play().then(() => {
+            this.audioState.set('playing');
+        });
+    }
+    handleOnStatusChanged(event) {
+        console.log(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatAudioMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXChatAudioMessageComponent, selector: "ax-chat-message-audio", inputs: { message: "message" }, viewQueries: [{ propertyName: "audio", first: true, predicate: ["a"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-audio-controller\">\n\n\n  @switch (audioState()) {\n  @case ('playing') {\n  <button (click)=\"handlePauseClick()\">\n    <i class=\"fa-solid fa-pause\"></i>\n  </button>\n  }\n  @case ('paused')\n  {\n  <button (click)=\"handlePlayClick()\">\n    <i class=\"fa-solid fa-play\" style=\"margin-inline-start: 0.25rem;\"></i>\n  </button>\n  }\n  @case ('loading') {\n  <button (click)=\"handlePlayClick()\">\n    <i class=\"fa-solid fa-xmark\"></i>\n  </button>\n  }\n  }\n\n</div>\n<ax-audio-wave #a [config]=\"config\" (onStatusChanged)=\"handleOnStatusChanged($event)\"></ax-audio-wave>\n\n\n\n<ax-prefix>\n  {{a.getDuration()}}\n</ax-prefix>", styles: ["ax-chat-message-audio{display:flex;align-items:center;justify-content:space-between;gap:.25rem}ax-chat-message-audio .ax-audio-controller button{width:2.5rem;height:2.5rem;background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore));border-radius:999rem;display:flex;align-items:center;justify-content:center}ax-chat-message-audio .ax-audio-controller button>i{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem}ax-chat-message-audio .ax-audio-wave{flex:1}\n"], dependencies: [{ kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: i2$2.AXAudioWaveComponent, selector: "ax-audio-wave", inputs: ["config"], outputs: ["onStatusChanged"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatAudioMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-chat-message-audio', encapsulation: ViewEncapsulation.None, inputs: ['message'], template: "<div class=\"ax-audio-controller\">\n\n\n  @switch (audioState()) {\n  @case ('playing') {\n  <button (click)=\"handlePauseClick()\">\n    <i class=\"fa-solid fa-pause\"></i>\n  </button>\n  }\n  @case ('paused')\n  {\n  <button (click)=\"handlePlayClick()\">\n    <i class=\"fa-solid fa-play\" style=\"margin-inline-start: 0.25rem;\"></i>\n  </button>\n  }\n  @case ('loading') {\n  <button (click)=\"handlePlayClick()\">\n    <i class=\"fa-solid fa-xmark\"></i>\n  </button>\n  }\n  }\n\n</div>\n<ax-audio-wave #a [config]=\"config\" (onStatusChanged)=\"handleOnStatusChanged($event)\"></ax-audio-wave>\n\n\n\n<ax-prefix>\n  {{a.getDuration()}}\n</ax-prefix>", styles: ["ax-chat-message-audio{display:flex;align-items:center;justify-content:space-between;gap:.25rem}ax-chat-message-audio .ax-audio-controller button{width:2.5rem;height:2.5rem;background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore));border-radius:999rem;display:flex;align-items:center;justify-content:center}ax-chat-message-audio .ax-audio-controller button>i{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem}ax-chat-message-audio .ax-audio-wave{flex:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { audio: [{
+                type: ViewChild,
+                args: ['a']
+            }] } });
+
 const COMPONENT = [
     AXChatViewComponent,
     AXChatInputComponent,
     AXChatMessageComponent,
-    AXChatVoiceComponent,
+    AXChatTextMessageComponent,
+    AXChatAudioMessageComponent,
 ];
 const MODULES = [
     CommonModule,
@@ -333,6 +356,8 @@ const MODULES = [
     AXTranslationModule,
     AXDropdownModule,
     AXFormatModule,
+    AXAudioWaveModule,
+    AXCircularProgressModule,
 ];
 class AXChatModule {
     static forRoot(config) {
@@ -389,7 +414,8 @@ class AXChatModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: AXChatModule, declarations: [AXChatViewComponent,
             AXChatInputComponent,
             AXChatMessageComponent,
-            AXChatVoiceComponent], imports: [CommonModule,
+            AXChatTextMessageComponent,
+            AXChatAudioMessageComponent], imports: [CommonModule,
             FormsModule,
             AsyncPipe,
             AXRippleDirective,
@@ -397,17 +423,22 @@ class AXChatModule {
             AXDecoratorModule,
             AXTranslationModule,
             AXDropdownModule,
-            AXFormatModule], exports: [AXChatViewComponent,
+            AXFormatModule,
+            AXAudioWaveModule,
+            AXCircularProgressModule], exports: [AXChatViewComponent,
             AXChatInputComponent,
             AXChatMessageComponent,
-            AXChatVoiceComponent] }); }
+            AXChatTextMessageComponent,
+            AXChatAudioMessageComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatModule, providers: [AXRecordingService], imports: [CommonModule,
             FormsModule,
             AXButtonModule,
             AXDecoratorModule,
             AXTranslationModule,
             AXDropdownModule,
-            AXFormatModule] }); }
+            AXFormatModule,
+            AXAudioWaveModule,
+            AXCircularProgressModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXChatModule, decorators: [{
             type: NgModule,
@@ -436,5 +467,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXChatAudioMessageComponent, AXChatInputComponent, AXChatMessageBaseComponent, AXChatMessageComponent, AXChatMessageTypeRegistryService, AXChatModule, AXChatService, AXChatTextMessageComponent, AXChatViewComponent, AXChatVoiceComponent, AXRecordingService };
+export { AXChatAudioMessageComponent, AXChatInputComponent, AXChatMessageBaseComponent, AXChatMessageComponent, AXChatMessageTypeRegistryService, AXChatModule, AXChatService, AXChatTextMessageComponent, AXChatViewComponent, AXRecordingService };
 //# sourceMappingURL=acorex-components-chat.mjs.map