@acorex/components 19.10.10 → 19.10.11

package/autocomplete/README.md

@@ -0,0 +1,3 @@
+# @acorex/components/autocomplete
+
+Secondary entry point of `@acorex/components`. It can be used by importing from `@acorex/components/autocomplete`.

package/autocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/autocomplete.component';
+export * from './lib/autocomplete.module';

package/autocomplete/lib/autocomplete.component.d.ts

@@ -0,0 +1,113 @@
+import { AXAutocompleteParentComponent, AXDataSource, AXEvent, AXValueChangedEvent, MXLookComponent, MXSelectionBridgeService, MXSelectionValueComponent } from '@acorex/components/common';
+import { AXDropdownBoxComponent, MXDropdownBoxBaseComponent } from '@acorex/components/dropdown';
+import { AXListComponent } from '@acorex/components/list';
+import { AfterViewInit, OnDestroy, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+declare const AXAutocompleteComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXDropdownBoxBaseComponent, typeof MXSelectionValueComponent, typeof MXLookComponent]>;
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ * @category
+ */
+export declare class AXAutocompleteComponent extends AXAutocompleteComponent_base implements AfterViewInit, OnDestroy {
+    delayTime: import("@angular/core").InputSignal<number>;
+    protected inputValue: import("@angular/core").WritableSignal<string>;
+    protected isLoading: import("@angular/core").WritableSignal<boolean>;
+    /** @ignore */
+    protected renderList: boolean;
+    /** @ignore */
+    protected dropdownSizes: {
+        width: string;
+        height: string;
+    };
+    /** @ignore */
+    protected _listDataSource: AXDataSource<any>;
+    /** @ignore */
+    private _dataSource;
+    /** @ignore */
+    private onChangedSubscription;
+    /**
+     * Gets the data source for the component, which can be either an `AXDataSource` or an array of items.
+     * @returns {AXDataSource<any> | any[]}
+     */
+    get dataSource(): AXDataSource<any> | any[];
+    /**
+     * Sets the data source, either as `AXDataSource` or an array. Converts arrays to `AXDataSource` and subscribes to data and loading changes.
+     * @param {AXDataSource<any> | any[]} v
+     */
+    set dataSource(v: AXDataSource<any> | any[]);
+    /**
+     * The placeholder text displayed when the component is empty.
+     * @param {string} placeholder
+     */
+    placeholder: string;
+    /**
+     * The caption text to be displayed in the component.
+     * @param {string} caption
+     */
+    caption: string;
+    /**
+     * The template used to customize the rendering of items.
+     * @param {TemplateRef<any>} itemTemplate
+     */
+    itemTemplate: TemplateRef<any>;
+    /**
+     * The template used to customize the rendering of selected items.
+     * @param {TemplateRef<any>} selectedTemplate
+     */
+    selectedTemplate: TemplateRef<any>;
+    /**
+     * The template used to display when there are no items.
+     * @param {TemplateRef<any>} emptyTemplate
+     */
+    emptyTemplate: TemplateRef<any>;
+    /**
+     * The template used to display while loading.
+     * @param {TemplateRef<any>} loadingTemplate
+     */
+    loadingTemplate: TemplateRef<any>;
+    /**
+     * The width of the dropdown in pixels.
+     * @defaultValue 260
+     */
+    dropdownWidth: number;
+    /** @ignore */
+    list: AXListComponent;
+    /** @ignore */
+    protected dropdown: AXDropdownBoxComponent;
+    /**
+     * Service for managing selection data, injected via `AX_SELECTION_DATA_TOKEN`.
+     */
+    selectionService: MXSelectionBridgeService;
+    /** @ignore */
+    private _unsubscriber;
+    parent: AXAutocompleteParentComponent;
+    /** @ignore */
+    ngAfterViewInit(): void;
+    /** @ignore */
+    ngOnDestroy(): void;
+    /**
+     * Retrieves an item by its key.
+     * @param {any} key
+     */
+    getItemByKey(key: any): Promise<any> | any;
+    /** @ignore */
+    protected _handleOnOpenedEvent(e: AXEvent): void;
+    /** @ignore */
+    protected _handleOnClosedEvent(e: AXEvent): void;
+    /** @ignore */
+    protected _handleValueChanged(e: AXValueChangedEvent): void;
+    /** @ignore */
+    private setDropdownSize;
+    /**
+     * Filters the data source based on the provided search term.
+     * @param {string} term
+     */
+    search(term: string): void;
+    /**
+     * Refreshes the component by resetting state, clearing selection cache, refreshing the list, and closing the component.
+     */
+    refresh(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXAutocompleteComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXAutocompleteComponent, "ax-autocomplete", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "look": { "alias": "look"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "textTemplate": { "alias": "textTemplate"; "required": false; }; "selectedItems": { "alias": "selectedItems"; "required": false; }; "delayTime": { "alias": "delayTime"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "selectedTemplate": { "alias": "selectedTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["ax-footer"], true, never>;
+}
+export {};

package/autocomplete/lib/autocomplete.module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./autocomplete.component";
+export declare class AXAutocompleteModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXAutocompleteModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXAutocompleteModule, never, [typeof i1.AXAutocompleteComponent], [typeof i1.AXAutocompleteComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AXAutocompleteModule>;
+}

package/common/lib/classes/components.class.d.ts

@@ -1,6 +1,8 @@
+import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXValidationRuleOptions, AXValidationSummary } from '@acorex/core/validation';
 import { EventEmitter } from '@angular/core';
-import { AXEvent, AXValueChangedEvent } from './events.class';
+import { MXValueComponent } from '../components/value-component.class';
+import { AXEvent, AXHtmlEvent, AXValueChangedEvent } from './events.class';
 import * as i0 from "@angular/core";
 export declare const TAB_META_KEY = "__meta__";
 export declare class AXComponentCloseEvent extends AXEvent {
@@ -83,3 +85,14 @@ export declare abstract class AXPagedComponent extends AXComponent implements AX
     static ɵfac: i0.ɵɵFactoryDeclaration<AXPagedComponent, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<AXPagedComponent>;
 }
+export declare abstract class AXAutocompleteParentComponent extends MXValueComponent {
+    oldInputValue: string;
+    abstract _unsubscriber: AXUnsubscriber;
+    onKeyDown: EventEmitter<AXHtmlEvent<KeyboardEvent>>;
+    onInputValueEmit: EventEmitter<AXValueChangedEvent<string>>;
+    onInputValueChanged: EventEmitter<AXValueChangedEvent<string>>;
+    handleInputValueChanged(value: string, isUserInteraction?: boolean): void;
+    handleInputValueEmit(value: string, isUserInteraction?: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXAutocompleteParentComponent, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AXAutocompleteParentComponent>;
+}

package/common/lib/classes/datasource.class.d.ts

@@ -6,9 +6,9 @@ export type AXDataSourceOperator = {
 export type AXFilterLogic = 'and' | 'or';
 export type AXSortOrder = 'asc' | 'desc';
 export type AXDataSourceFilterOption = {
-    field: string;
+    field?: string;
     value?: unknown;
-    operator: AXDataSourceOperator;
+    operator?: AXDataSourceOperator;
     logic?: AXFilterLogic;
     filters?: AXDataSourceFilterOption[];
 };

package/data-table/lib/columns/row-select-column.component.d.ts

@@ -1,3 +1,4 @@
+import { AXValueChangedEvent } from '@acorex/components/common';
 import { TemplateRef } from '@angular/core';
 import { AXDataTableColumnComponent } from './data-table-column';
 import * as i0 from "@angular/core";
@@ -47,23 +48,23 @@ export declare class AXRowSelectColumnComponent extends AXDataTableColumnCompone
     /**
      *  @ignore
      */
-    protected checkAllSelected(rows: any): any;
+    protected checkAllSelected(rows: any): boolean;
     /**
      *  @ignore
      */
-    protected checkAnySelected(rows: any): any;
+    protected handleChange(e: AXValueChangedEvent, item: unknown): void;
     /**
      *  @ignore
      */
-    protected handleChange(item: unknown): void;
-    /**
-     *  @ignore
-     */
-    protected handleSelectAll(rows: any): void;
+    protected handleSelectAll(e: AXValueChangedEvent, rows: any): void;
     /**
      * Indicates whether loading is enabled for the column.
      */
     get loadingEnabled(): boolean;
+    /**
+     * Gets the CSS class applied to the component.
+     */
+    get cssClass(): string | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXRowSelectColumnComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AXRowSelectColumnComponent, "ax-select-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; }, {}, never, never, true, never>;
 }

package/dropdown/lib/dropdown-box.component.d.ts

@@ -4,6 +4,7 @@ import { EventEmitter, OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
 declare const AXDropdownBoxComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXInteractiveComponent, typeof MXLookComponent]>;
 export declare class AXDropdownBoxComponent extends AXDropdownBoxComponent_base implements OnInit {
+    hasInput: import("@angular/core").InputSignal<boolean>;
     private _platform;
     /**
      *  @ignore
@@ -91,6 +92,6 @@ export declare class AXDropdownBoxComponent extends AXDropdownBoxComponent_base
      */
     private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDropdownBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownBoxComponent, "ax-dropdown-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, { "disabledChange": "disabledChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["[input]", "[panel]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownBoxComponent, "ax-dropdown-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "look": { "alias": "look"; "required": false; }; "hasInput": { "alias": "hasInput"; "required": false; "isSignal": true; }; }, { "disabledChange": "disabledChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["[input]", "[panel]"], true, never>;
 }
 export {};

package/dropdown/lib/dropdown-panel.component.d.ts

@@ -9,6 +9,7 @@ import * as i0 from "@angular/core";
  * @category Components
  */
 export declare class AXDropdownPanelComponent extends MXInteractiveComponent implements OnDestroy {
+    #private;
     private _platform;
     /**
      *  @ignore
@@ -22,6 +23,7 @@ export declare class AXDropdownPanelComponent extends MXInteractiveComponent imp
      *  @ignore
      */
     protected _placement: import("@acorex/components/common").AXConnectedPosition[];
+    placement: import("@angular/core").InputSignal<"bottom-start" | "bottom-end">;
     /**
      *  @ignore
      */
@@ -114,5 +116,5 @@ export declare class AXDropdownPanelComponent extends MXInteractiveComponent imp
      */
     private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDropdownPanelComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownPanelComponent, "ax-dropdown-panel", never, { "isOpen": { "alias": "isOpen"; "required": false; }; "fitParent": { "alias": "fitParent"; "required": false; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; }; "position": { "alias": "position"; "required": false; }; "_target": { "alias": "_target"; "required": false; }; "adaptivityEnabled": { "alias": "adaptivityEnabled"; "required": false; }; }, { "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownPanelComponent, "ax-dropdown-panel", never, { "isOpen": { "alias": "isOpen"; "required": false; }; "fitParent": { "alias": "fitParent"; "required": false; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; }; "position": { "alias": "position"; "required": false; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "_target": { "alias": "_target"; "required": false; }; "adaptivityEnabled": { "alias": "adaptivityEnabled"; "required": false; }; }, { "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["*"], true, never>;
 }

package/dropdown-button/lib/dropdown-button.component.d.ts

@@ -61,6 +61,7 @@ export declare class AXDropdownButtonComponent extends MXButtonBaseComponent imp
      * @ignore
      */
     close(): void;
+    private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDropdownButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownButtonComponent, "ax-dropdown-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; "type": { "alias": "type"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "selectedChange": "selectedChange"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; }, never, ["*", "ax-prefix, ax-loading, ax-loading-spinner"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownButtonComponent, "ax-dropdown-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; "type": { "alias": "type"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "selectedChange": "selectedChange"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; }, never, ["ax-button-item-list", "ax-prefix, ax-loading, ax-loading-spinner"], true, never>;
 }

package/fesm2022/acorex-components-action-sheet.mjs

@@ -6,7 +6,7 @@ import { Dialog, DIALOG_DATA, DialogModule } from '@angular/cdk/dialog';
 import { TemplatePortal, ComponentPortal, CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
 import { DOCUMENT, isPlatformBrowser, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Injectable, PLATFORM_ID, Renderer2, signal, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, HostListener, NgModule } from '@angular/core';
+import { inject, Injectable, PLATFORM_ID, Renderer2, signal, TemplateRef, HostListener, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { GlobalPositionStrategy } from '@angular/cdk/overlay';
 import { Subject, BehaviorSubject } from 'rxjs';
 import { AXButtonModule } from '@acorex/components/button';
@@ -78,10 +78,10 @@ class AXActionSheetService {
     setActionSheetEventState(event) {
         this.actionSheetEvent.next(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXActionSheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXActionSheetService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXActionSheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXActionSheetService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXActionSheetService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXActionSheetService, decorators: [{
             type: Injectable
         }] });
 
@@ -289,8 +289,8 @@ class AXActionSheetComponent extends MXBaseComponent {
             this.close(null);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXActionSheetComponent, deps: [{ token: DIALOG_DATA }, { token: i1.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AXActionSheetComponent, isStandalone: true, selector: "ax-action-sheet", host: { listeners: { "keydown.escape": "onKeydownHandler()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXActionSheetComponent, deps: [{ token: DIALOG_DATA }, { token: i1.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXActionSheetComponent, isStandalone: true, selector: "ax-action-sheet", host: { listeners: { "keydown.escape": "onKeydownHandler()" } }, providers: [
             {
                 provide: AXClosbaleComponent,
                 useExisting: AXActionSheetComponent,
@@ -301,7 +301,7 @@ class AXActionSheetComponent extends MXBaseComponent {
             },
         ], usesInheritance: true, ngImport: i0, template: "@if (data.draggable) {\n  <div (mousedown)=\"handleMouseDown($event)\" (touchstart)=\"handleTouchDown($event)\" class=\"ax-drag-handle-container\">\n    <div class=\"ax-drag-handle\"></div>\n  </div>\n}\n@if (data.header) {\n  <ax-header\n    [class.draggable-header]=\"data.draggable\"\n    (mousedown)=\"data.draggable ? handleMouseDown($event) : null\"\n    (touchstart)=\"data.draggable ? handleTouchDown($event) : null\"\n  >\n    <ax-prefix>\n      <ax-title>{{ data.title | translate | async }}</ax-title>\n\n      @if (data.subTitle) {\n        <ax-subtitle>\n          {{ data.subTitle }}\n        </ax-subtitle>\n      }\n    </ax-prefix>\n    @if (data.closeButton) {\n      <ax-suffix>\n        <ax-close-button></ax-close-button>\n      </ax-suffix>\n    }\n  </ax-header>\n}\n@if (this.data.content) {\n  <div class=\"ax-custom-template-container\">\n    <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"handleAttched($event)\"></ng-template>\n  </div>\n}\n\n<div class=\"ax-action-list ax-action-list-vertical\">\n  @for (item of data.items; let i = $index; track i) {\n    @if (item.group?.title) {\n      <ax-title>{{ item.group?.title }}</ax-title>\n    }\n    <div class=\"ax-action-item ax-{{ item.color || 'default' }}\" [class.ax-state-disabled]=\"item.disabled\" [tabindex]=\"i\" (click)=\"onItemClick(item)\">\n      <div class=\"ax-action-item-prefix\">\n        @if (item.icon) {\n          <span class=\"ax-item-icon\" [class]=\"item.icon\"></span>\n        }\n        <ax-text>{{ item.text | translate | async }}</ax-text>\n      </div>\n      <div class=\"ax-action-item-suffix\"></div>\n    </div>\n    @if (item.break) {\n      <ax-divider></ax-divider>\n    }\n  }\n</div>\n", styles: ["ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-lightest-surface)}ax-action-sheet .ax-action-item.ax-primary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-primary-surface)}ax-action-sheet .ax-action-item.ax-secondary{--ax-comp-action-sheet-text-color: var(--ax-sys-color-secondary-surface)}ax-action-sheet .ax-action-item.ax-success{--ax-comp-action-sheet-text-color: var(--ax-sys-color-success-surface)}ax-action-sheet .ax-action-item.ax-warning{--ax-comp-action-sheet-text-color: var(--ax-sys-color-warning-surface)}ax-action-sheet .ax-action-item.ax-danger{--ax-comp-action-sheet-text-color: var(--ax-sys-color-danger-surface)}ax-action-sheet{display:block;width:100vw;position:relative;transition-property:height;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);background-color:rgba(var(--ax-comp-action-sheet-bg-color))}@media (min-width: 768px){ax-action-sheet{width:70vw}}@media (min-width: 1024px){ax-action-sheet{width:50vw}}ax-action-sheet .ax-custom-template-container{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-drag-handle-container{padding-top:.5rem}ax-action-sheet .ax-drag-handle-container .ax-drag-handle{height:.375rem;width:3rem;margin:auto;border-radius:.5rem;background-color:rgba(var(--ax-sys-color-surface))}ax-action-sheet ax-header{padding:1rem;border-bottom-width:1px;font-size:1rem;line-height:1.5rem;font-weight:500}@media (min-width: 768px){ax-action-sheet ax-header{font-size:1.125rem;line-height:1.75rem}}ax-action-sheet ax-header.draggable-header{padding-top:0;-webkit-user-select:none;user-select:none}ax-action-sheet ax-header ax-prefix,ax-action-sheet ax-header ax-suffix{display:flex;flex-direction:column;justify-content:flex-start}ax-action-sheet ax-header ax-prefix{align-items:flex-start}ax-action-sheet ax-header ax-prefix ax-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}ax-action-sheet ax-header ax-suffix{align-items:flex-end;max-width:fit-content}ax-action-sheet .ax-action-list{overflow-y:auto;max-height:100vh}ax-action-sheet .ax-action-list ax-title{font-size:.875rem}ax-action-sheet .ax-action-list .ax-action-item{min-height:3.5rem!important;font-size:1rem!important;color:rgba(var(--ax-comp-action-sheet-text-color))}ax-action-sheet .ax-action-list .ax-action-item .ax-item-icon{margin-inline-end:.75rem!important;font-size:1.5rem!important;line-height:2rem!important}.ax-dark ax-action-sheet{--ax-comp-action-sheet-bg-color: var(--ax-sys-color-darker-surface)}\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXActionSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXActionSheetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-action-sheet', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         {
@@ -323,11 +323,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
 
 const MODULES = [AXCommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule, AXDecoratorModule, AXTranslationModule, DialogModule, AsyncPipe];
 class AXActionSheetModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXActionSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXActionSheetModule, imports: [AXCommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule, AXDecoratorModule, AXTranslationModule, DialogModule, AsyncPipe, AXActionSheetComponent], exports: [AXActionSheetComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXActionSheetModule, providers: [AXActionSheetService], imports: [AXCommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule, AXDecoratorModule, AXTranslationModule, DialogModule, AXActionSheetComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXActionSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXActionSheetModule, imports: [AXCommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule, AXDecoratorModule, AXTranslationModule, DialogModule, AsyncPipe, AXActionSheetComponent], exports: [AXActionSheetComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXActionSheetModule, providers: [AXActionSheetService], imports: [AXCommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule, AXDecoratorModule, AXTranslationModule, DialogModule, AXActionSheetComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXActionSheetModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXActionSheetModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, AXActionSheetComponent],

package/fesm2022/acorex-components-alert.mjs

@@ -2,7 +2,7 @@ import { MXColorComponent, AXClosbaleComponent } from '@acorex/components/common
 import { isBrowser } from '@acorex/core/platform';
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { contentChild, signal, output, model, effect, afterNextRender, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, NgModule } from '@angular/core';
+import { contentChild, signal, output, model, effect, afterNextRender, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 
 /**
@@ -128,10 +128,10 @@ class AXAlertComponent extends MXColorComponent {
     get __hostClass() {
         return `ax-alert ax-none ax-${this.color}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AXAlertComponent, isStandalone: true, selector: "ax-alert", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, timeOut: { classPropertyName: "timeOut", publicName: "timeOut", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChange: "colorChange", onClosed: "onClosed", timeOut: "timeOutChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXAlertComponent }], queries: [{ propertyName: "axIcon", first: true, predicate: ["ax-icon"], descendants: true, isSignal: true }, { propertyName: "axTitle", first: true, predicate: ["ax-title"], descendants: true, isSignal: true }, { propertyName: "axContent", first: true, predicate: ["ax-content"], descendants: true, isSignal: true }, { propertyName: "axFooter", first: true, predicate: ["ax-footer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (showInline()) {\n  <div class=\"ax-alert-inline\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-title\">\n      <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n    </div>\n    <div class=\"ax-alert-buttons\">\n      <ng-container [ngTemplateOutlet]=\"buttons\"></ng-container>\n    </div>\n    <ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container>\n  </div>\n} @else {\n  <div class=\"ax-alert-block\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-content\">\n      <div class=\"ax-alert-title\">\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n      </div>\n      <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n    <div><ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container></div>\n  </div>\n}\n\n@if (timeOut()) {\n  <div class=\"ax-alert-progress\" [style.animation-duration.ms]=\"timeOut()\"></div>\n}\n\n<ng-template #buttons>\n  <ng-content select=\"ax-button\"> </ng-content>\n</ng-template>\n<ng-template #closeButton>\n  <ng-content select=\"ax-close-button\"> </ng-content>\n</ng-template>\n<ng-template #title>\n  <ng-content select=\"ax-title\"> </ng-content>\n</ng-template>\n<ng-template #icon>\n  <ng-content select=\"ax-icon\"> </ng-content>\n</ng-template>\n<ng-template #content>\n  <ng-content select=\"ax-content\"> </ng-content>\n</ng-template>\n<ng-template #footer>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</ng-template>\n", styles: ["ax-alert{--ax-comp-alert-bg-color-opacity: .15;--ax-comp-alert-icon-border-radius: 100%;--ax-comp-alert-border-radius: var(--ax-sys-border-radius)}ax-alert.ax-default{--ax-comp-alert-bg-color-opacity: 1;--ax-comp-alert-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-alert-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-lightest-surface)}.ax-dark ax-alert.ax-default{--ax-comp-alert-bg-color-opacity: 1;--ax-comp-alert-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-alert-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-darkest-surface)}ax-alert{--ax-comp-alert-title-content-text-color: var(--ax-sys-color-on-lightest-surface)}ax-alert.ax-primary{--ax-comp-alert-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-border-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-primary-surface)}ax-alert.ax-secondary{--ax-comp-alert-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-secondary-surface)}ax-alert.ax-success{--ax-comp-alert-bg-color: var(--ax-sys-color-success-surface);--ax-comp-alert-border-color: var(--ax-sys-color-success-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-success-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-success-surface)}ax-alert.ax-warning{--ax-comp-alert-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-border-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-warning-surface)}ax-alert.ax-danger{--ax-comp-alert-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-border-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-danger-surface)}ax-alert{gap:1rem;padding:1rem;display:flex;overflow:hidden;border-width:1px;position:relative;font-size:var(--ax-comp-alert-font-size, .875rem);line-height:var(--ax-comp-alert-line-height, 1.25rem);border-radius:var(--ax-comp-alert-border-radius);border-color:rgba(var(--ax-comp-alert-border-color));background-color:rgba(var(--ax-comp-alert-bg-color),var(--ax-comp-alert-bg-color-opacity))}ax-alert ax-title,ax-alert ax-content{color:rgba(var(--ax-comp-alert-title-content-text-color))}ax-alert .ax-alert-progress{background-color:rgba(var(--ax-comp-alert-progress-bg-color))}ax-alert .ax-alert-inline{display:flex;flex:1 1 0%;align-items:center;justify-content:center}ax-alert .ax-alert-block{display:flex}ax-alert .ax-alert-block .ax-alert-content{display:flex;flex-direction:column;line-height:1.5}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:empty{display:none}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:not(:empty)+ax-content:not(:empty){margin-top:.5rem}ax-alert .ax-alert-block .ax-alert-content ax-footer{margin-top:1rem}ax-alert .ax-alert-icon{display:grid;color:rgba(var(--ax-comp-alert-icon-color));border-radius:var(--ax-comp-alert-icon-border-radius);padding-inline-end:.5rem;font-size:1.125rem;line-height:1.75rem;align-items:start}ax-alert .ax-alert-icon ax-icon{line-height:var(--ax-comp-alert-icon-line-height, normal)}ax-alert .ax-alert-buttons{padding-inline-start:1rem}ax-alert .ax-alert-title{display:flex;flex:1 1 0%;flex-direction:column}ax-alert .ax-alert-title ax-title{font-size:.875rem;line-height:1.25rem;font-weight:500}ax-alert .ax-alert-progress{position:absolute;bottom:0;inset-inline-start:0px;height:.25rem}@keyframes progressBar{0%{width:100%}to{width:0%}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXAlertComponent, isStandalone: true, selector: "ax-alert", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, timeOut: { classPropertyName: "timeOut", publicName: "timeOut", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChange: "colorChange", onClosed: "onClosed", timeOut: "timeOutChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXAlertComponent }], queries: [{ propertyName: "axIcon", first: true, predicate: ["ax-icon"], descendants: true, isSignal: true }, { propertyName: "axTitle", first: true, predicate: ["ax-title"], descendants: true, isSignal: true }, { propertyName: "axContent", first: true, predicate: ["ax-content"], descendants: true, isSignal: true }, { propertyName: "axFooter", first: true, predicate: ["ax-footer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (showInline()) {\n  <div class=\"ax-alert-inline\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-title\">\n      <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n    </div>\n    <div class=\"ax-alert-buttons\">\n      <ng-container [ngTemplateOutlet]=\"buttons\"></ng-container>\n    </div>\n    <ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container>\n  </div>\n} @else {\n  <div class=\"ax-alert-block\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-content\">\n      <div class=\"ax-alert-title\">\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n      </div>\n      <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n    <div><ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container></div>\n  </div>\n}\n\n@if (timeOut()) {\n  <div class=\"ax-alert-progress\" [style.animation-duration.ms]=\"timeOut()\"></div>\n}\n\n<ng-template #buttons>\n  <ng-content select=\"ax-button\"> </ng-content>\n</ng-template>\n<ng-template #closeButton>\n  <ng-content select=\"ax-close-button\"> </ng-content>\n</ng-template>\n<ng-template #title>\n  <ng-content select=\"ax-title\"> </ng-content>\n</ng-template>\n<ng-template #icon>\n  <ng-content select=\"ax-icon\"> </ng-content>\n</ng-template>\n<ng-template #content>\n  <ng-content select=\"ax-content\"> </ng-content>\n</ng-template>\n<ng-template #footer>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</ng-template>\n", styles: ["ax-alert{--ax-comp-alert-bg-color-opacity: .15;--ax-comp-alert-icon-border-radius: 100%;--ax-comp-alert-border-radius: var(--ax-sys-border-radius)}ax-alert.ax-default{--ax-comp-alert-bg-color-opacity: 1;--ax-comp-alert-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-alert-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-lightest-surface)}.ax-dark ax-alert.ax-default{--ax-comp-alert-bg-color-opacity: 1;--ax-comp-alert-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-alert-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-darkest-surface)}ax-alert{--ax-comp-alert-title-content-text-color: var(--ax-sys-color-on-lightest-surface)}ax-alert.ax-primary{--ax-comp-alert-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-border-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-primary-surface)}ax-alert.ax-secondary{--ax-comp-alert-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-secondary-surface)}ax-alert.ax-success{--ax-comp-alert-bg-color: var(--ax-sys-color-success-surface);--ax-comp-alert-border-color: var(--ax-sys-color-success-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-success-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-success-surface)}ax-alert.ax-warning{--ax-comp-alert-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-border-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-warning-surface)}ax-alert.ax-danger{--ax-comp-alert-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-border-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-danger-surface)}ax-alert{gap:1rem;padding:1rem;display:flex;overflow:hidden;border-width:1px;position:relative;font-size:var(--ax-comp-alert-font-size, .875rem);line-height:var(--ax-comp-alert-line-height, 1.25rem);border-radius:var(--ax-comp-alert-border-radius);border-color:rgba(var(--ax-comp-alert-border-color));background-color:rgba(var(--ax-comp-alert-bg-color),var(--ax-comp-alert-bg-color-opacity))}ax-alert ax-title,ax-alert ax-content{color:rgba(var(--ax-comp-alert-title-content-text-color))}ax-alert .ax-alert-progress{background-color:rgba(var(--ax-comp-alert-progress-bg-color))}ax-alert .ax-alert-inline{display:flex;flex:1 1 0%;align-items:center;justify-content:center}ax-alert .ax-alert-block{display:flex}ax-alert .ax-alert-block .ax-alert-content{display:flex;flex-direction:column;line-height:1.5}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:empty{display:none}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:not(:empty)+ax-content:not(:empty){margin-top:.5rem}ax-alert .ax-alert-block .ax-alert-content ax-footer{margin-top:1rem}ax-alert .ax-alert-icon{display:grid;color:rgba(var(--ax-comp-alert-icon-color));border-radius:var(--ax-comp-alert-icon-border-radius);padding-inline-end:.5rem;font-size:1.125rem;line-height:1.75rem;align-items:start}ax-alert .ax-alert-icon ax-icon{line-height:var(--ax-comp-alert-icon-line-height, normal)}ax-alert .ax-alert-buttons{padding-inline-start:1rem}ax-alert .ax-alert-title{display:flex;flex:1 1 0%;flex-direction:column}ax-alert .ax-alert-title ax-title{font-size:.875rem;line-height:1.25rem;font-weight:500}ax-alert .ax-alert-progress{position:absolute;bottom:0;inset-inline-start:0px;height:.25rem}@keyframes progressBar{0%{width:100%}to{width:0%}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXAlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAlertComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-alert', inputs: ['color'], outputs: ['colorChange'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXClosbaleComponent, useExisting: AXAlertComponent }], imports: [NgTemplateOutlet], template: "@if (showInline()) {\n  <div class=\"ax-alert-inline\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-title\">\n      <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n    </div>\n    <div class=\"ax-alert-buttons\">\n      <ng-container [ngTemplateOutlet]=\"buttons\"></ng-container>\n    </div>\n    <ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container>\n  </div>\n} @else {\n  <div class=\"ax-alert-block\">\n    <div class=\"ax-alert-icon ax-icon-solid\">\n      <ng-container [ngTemplateOutlet]=\"icon\"></ng-container>\n    </div>\n    <div class=\"ax-alert-content\">\n      <div class=\"ax-alert-title\">\n        <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n      </div>\n      <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n    <div><ng-container [ngTemplateOutlet]=\"closeButton\"></ng-container></div>\n  </div>\n}\n\n@if (timeOut()) {\n  <div class=\"ax-alert-progress\" [style.animation-duration.ms]=\"timeOut()\"></div>\n}\n\n<ng-template #buttons>\n  <ng-content select=\"ax-button\"> </ng-content>\n</ng-template>\n<ng-template #closeButton>\n  <ng-content select=\"ax-close-button\"> </ng-content>\n</ng-template>\n<ng-template #title>\n  <ng-content select=\"ax-title\"> </ng-content>\n</ng-template>\n<ng-template #icon>\n  <ng-content select=\"ax-icon\"> </ng-content>\n</ng-template>\n<ng-template #content>\n  <ng-content select=\"ax-content\"> </ng-content>\n</ng-template>\n<ng-template #footer>\n  <ng-content select=\"ax-footer\"> </ng-content>\n</ng-template>\n", styles: ["ax-alert{--ax-comp-alert-bg-color-opacity: .15;--ax-comp-alert-icon-border-radius: 100%;--ax-comp-alert-border-radius: var(--ax-sys-border-radius)}ax-alert.ax-default{--ax-comp-alert-bg-color-opacity: 1;--ax-comp-alert-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-alert-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-lightest-surface)}.ax-dark ax-alert.ax-default{--ax-comp-alert-bg-color-opacity: 1;--ax-comp-alert-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-alert-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-darkest-surface)}ax-alert{--ax-comp-alert-title-content-text-color: var(--ax-sys-color-on-lightest-surface)}ax-alert.ax-primary{--ax-comp-alert-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-border-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-primary-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-primary-surface)}ax-alert.ax-secondary{--ax-comp-alert-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-border-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-secondary-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-secondary-surface)}ax-alert.ax-success{--ax-comp-alert-bg-color: var(--ax-sys-color-success-surface);--ax-comp-alert-border-color: var(--ax-sys-color-success-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-success-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-success-surface)}ax-alert.ax-warning{--ax-comp-alert-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-border-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-warning-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-warning-surface)}ax-alert.ax-danger{--ax-comp-alert-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-border-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-icon-color: var(--ax-sys-color-danger-surface);--ax-comp-alert-progress-bg-color: var(--ax-sys-color-on-danger-surface)}ax-alert{gap:1rem;padding:1rem;display:flex;overflow:hidden;border-width:1px;position:relative;font-size:var(--ax-comp-alert-font-size, .875rem);line-height:var(--ax-comp-alert-line-height, 1.25rem);border-radius:var(--ax-comp-alert-border-radius);border-color:rgba(var(--ax-comp-alert-border-color));background-color:rgba(var(--ax-comp-alert-bg-color),var(--ax-comp-alert-bg-color-opacity))}ax-alert ax-title,ax-alert ax-content{color:rgba(var(--ax-comp-alert-title-content-text-color))}ax-alert .ax-alert-progress{background-color:rgba(var(--ax-comp-alert-progress-bg-color))}ax-alert .ax-alert-inline{display:flex;flex:1 1 0%;align-items:center;justify-content:center}ax-alert .ax-alert-block{display:flex}ax-alert .ax-alert-block .ax-alert-content{display:flex;flex-direction:column;line-height:1.5}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:empty{display:none}ax-alert .ax-alert-block .ax-alert-content .ax-alert-title:not(:empty)+ax-content:not(:empty){margin-top:.5rem}ax-alert .ax-alert-block .ax-alert-content ax-footer{margin-top:1rem}ax-alert .ax-alert-icon{display:grid;color:rgba(var(--ax-comp-alert-icon-color));border-radius:var(--ax-comp-alert-icon-border-radius);padding-inline-end:.5rem;font-size:1.125rem;line-height:1.75rem;align-items:start}ax-alert .ax-alert-icon ax-icon{line-height:var(--ax-comp-alert-icon-line-height, normal)}ax-alert .ax-alert-buttons{padding-inline-start:1rem}ax-alert .ax-alert-title{display:flex;flex:1 1 0%;flex-direction:column}ax-alert .ax-alert-title ax-title{font-size:.875rem;line-height:1.25rem;font-weight:500}ax-alert .ax-alert-progress{position:absolute;bottom:0;inset-inline-start:0px;height:.25rem}@keyframes progressBar{0%{width:100%}to{width:0%}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { __hostClass: [{
@@ -142,11 +142,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
 const COMPONENT = [AXAlertComponent];
 const MODULES = [CommonModule, AXDecoratorModule];
 class AXAlertModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXAlertModule, imports: [CommonModule, AXDecoratorModule, AXAlertComponent], exports: [AXAlertComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXAlertModule, imports: [MODULES] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXAlertModule, imports: [CommonModule, AXDecoratorModule, AXAlertComponent], exports: [AXAlertComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAlertModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXAlertModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAlertModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

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

@@ -1,7 +1,7 @@
 import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
 import { isPlatformBrowser, NgStyle, AsyncPipe, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, output, signal, inject, NgZone, PLATFORM_ID, afterNextRender, Component, ViewEncapsulation, ViewChild, NgModule } from '@angular/core';
+import { input, output, signal, inject, NgZone, PLATFORM_ID, afterNextRender, ViewChild, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import WaveSurfer from 'wavesurfer.js';
 import { AXButtonModule } from '@acorex/components/button';
 import { AXDecoratorModule } from '@acorex/components/decorators';
@@ -337,10 +337,10 @@ class AXAudioWaveComponent {
     ngOnDestroy() {
         this.audio.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXAudioWaveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AXAudioWaveComponent, isStandalone: true, 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 [ngStyle]=\"{'display': audioState() === 'ready' ? 'block' : 'none' }\"></div>\n\n@switch (audioState()) {\n@case ('loading') {\n<div class=\"ax-audio-skeleton\"></div>\n}\n@case ('error') {\n<div class=\"ax-wave-message\">\n    {{'error.message' | translate:{ params:{ message: errorMessage() } } | async }}\n</div>\n}\n}", styles: ["ax-audio-wave{display:block;width:100%;flex:1;--ax-audio-skeleton-bg: rgba(var(--ax-sys-color-primary-200))}ax-audio-wave .ax-audio-skeleton{position:relative;display:block;overflow:hidden;background-color:var(--ax-audio-skeleton-bg);height:1.125rem;border-radius:999rem}ax-audio-wave .ax-audio-skeleton:before{position:absolute;inset-inline-start:-13rem;top:0;display:block;height:100%;width:14rem;content:\"\";background:linear-gradient(to right,transparent 0%,rgba(var(--ax-sys-color-dark-surface),20%) 50%,transparent 100%);animation:load 1s cubic-bezier(.4,0,.2,1) infinite}@keyframes load{0%{inset-inline-start:-13rem}to{inset-inline-start:100%}}ax-audio-wave .ax-wave-message{padding-inline-start:.5rem}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAudioWaveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXAudioWaveComponent, isStandalone: true, 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 [ngStyle]=\"{'display': audioState() === 'ready' ? 'block' : 'none' }\"></div>\n\n@switch (audioState()) {\n@case ('loading') {\n<div class=\"ax-audio-skeleton\"></div>\n}\n@case ('error') {\n<div class=\"ax-wave-message\">\n    {{'error.message' | translate:{ params:{ message: errorMessage() } } | async }}\n</div>\n}\n}", styles: ["ax-audio-wave{display:block;width:100%;flex:1;--ax-audio-skeleton-bg: rgba(var(--ax-sys-color-primary-200))}ax-audio-wave .ax-audio-skeleton{position:relative;display:block;overflow:hidden;background-color:var(--ax-audio-skeleton-bg);height:1.125rem;border-radius:999rem}ax-audio-wave .ax-audio-skeleton:before{position:absolute;inset-inline-start:-13rem;top:0;display:block;height:100%;width:14rem;content:\"\";background:linear-gradient(to right,transparent 0%,rgba(var(--ax-sys-color-dark-surface),20%) 50%,transparent 100%);animation:load 1s cubic-bezier(.4,0,.2,1) infinite}@keyframes load{0%{inset-inline-start:-13rem}to{inset-inline-start:100%}}ax-audio-wave .ax-wave-message{padding-inline-start:.5rem}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXAudioWaveComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAudioWaveComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-audio-wave', encapsulation: ViewEncapsulation.None, imports: [NgStyle, AsyncPipe, AXTranslatorPipe], template: "<div class=\"ax-audio-wave\" #d [ngStyle]=\"{'display': audioState() === 'ready' ? 'block' : 'none' }\"></div>\n\n@switch (audioState()) {\n@case ('loading') {\n<div class=\"ax-audio-skeleton\"></div>\n}\n@case ('error') {\n<div class=\"ax-wave-message\">\n    {{'error.message' | translate:{ params:{ message: errorMessage() } } | async }}\n</div>\n}\n}", styles: ["ax-audio-wave{display:block;width:100%;flex:1;--ax-audio-skeleton-bg: rgba(var(--ax-sys-color-primary-200))}ax-audio-wave .ax-audio-skeleton{position:relative;display:block;overflow:hidden;background-color:var(--ax-audio-skeleton-bg);height:1.125rem;border-radius:999rem}ax-audio-wave .ax-audio-skeleton:before{position:absolute;inset-inline-start:-13rem;top:0;display:block;height:100%;width:14rem;content:\"\";background:linear-gradient(to right,transparent 0%,rgba(var(--ax-sys-color-dark-surface),20%) 50%,transparent 100%);animation:load 1s cubic-bezier(.4,0,.2,1) infinite}@keyframes load{0%{inset-inline-start:-13rem}to{inset-inline-start:100%}}ax-audio-wave .ax-wave-message{padding-inline-start:.5rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { div: [{
@@ -349,11 +349,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
             }] } });
 
 class AXAudioWaveModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXAudioWaveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXAudioWaveModule, imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXSkeletonModule, AXTranslationModule, AXAudioWaveComponent], exports: [AXAudioWaveComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXAudioWaveModule, imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXSkeletonModule, AXTranslationModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAudioWaveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXAudioWaveModule, imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXSkeletonModule, AXTranslationModule, AXAudioWaveComponent], exports: [AXAudioWaveComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAudioWaveModule, imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXSkeletonModule, AXTranslationModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXAudioWaveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAudioWaveModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [AXAudioWaveComponent],