@acorex/components 7.11.0 → 7.11.2

package/button/lib/button-item-list.component.d.ts

@@ -1,19 +1,19 @@
-import { AXButtonClickEvent, AXClickEvent, MXInteractiveComponent } from '@acorex/components/common';
-import { AXDropdownPanelComponent } from '@acorex/components/dropdown';
+import { AXClickEvent, AXItemClickEvent, MXInteractiveComponent, AXClosbaleComponent } from '@acorex/components/common';
 import { AfterContentInit, EventEmitter, QueryList } from '@angular/core';
-import { AXButtonItemComponent } from './button-item.component';
+import { AXButtonItemComponent, AXButtonItemListItem } from './button-item.component';
 import * as i0 from "@angular/core";
 export declare class AXButtonItemListComponent extends MXInteractiveComponent implements AfterContentInit {
     private parent;
     protected _contentButtons: QueryList<AXButtonItemComponent>;
-    onItemClick: EventEmitter<AXButtonClickEvent>;
-    constructor(parent: AXDropdownPanelComponent);
+    items: AXButtonItemListItem[];
+    onItemClick: EventEmitter<AXItemClickEvent<AXButtonItemComponent>>;
+    constructor(parent: AXClosbaleComponent);
     ngAfterContentInit(): void;
     private _initContents;
     private _bindEvents;
     private _bindProps;
-    private _handleOnItemClick;
+    protected _handleOnItemClick(e: AXClickEvent): void;
     _emitOnItemClickEvent(e: AXClickEvent, item: AXButtonItemComponent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXButtonItemListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXButtonItemListComponent, "ax-button-item-list", never, {}, { "onItemClick": "onItemClick"; }, ["_contentButtons"], ["ax-button-item, ax-title, ax-divider, ng-container"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXButtonItemListComponent, "ax-button-item-list", never, { "items": { "alias": "items"; "required": false; }; }, { "onItemClick": "onItemClick"; }, ["_contentButtons"], ["ax-button-item, ax-title, ax-divider, ng-container"], false, never>;
 }

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

@@ -1,6 +1,14 @@
-import { AXClickEvent, MXColorComponent, MXInteractiveComponent } from '@acorex/components/common';
+import { AXClickEvent, MXColorComponent, MXInteractiveComponent, AXStyleColorType } from '@acorex/components/common';
 import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
+export interface AXButtonItemListItem {
+    name: string;
+    text: string;
+    icon: string;
+    divided?: boolean;
+    disabled?: boolean;
+    color?: AXStyleColorType;
+}
 declare const AXButtonItemComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXInteractiveComponent, typeof MXColorComponent]>;
 export declare class AXButtonItemComponent extends AXButtonItemComponent_base {
     text: string;

package/circular-progress/README.md

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

package/circular-progress/index.d.ts

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

package/circular-progress/lib/circular-progress.component.d.ts

@@ -0,0 +1,33 @@
+import { MXColorComponent } from '@acorex/components/common';
+import { AfterViewInit, ElementRef, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+export type AXProgressLook = 'linear' | 'circular';
+export declare class AXCircularProgressComponent extends MXColorComponent implements AfterViewInit {
+    circle: ElementRef;
+    strokeDashoffset: number;
+    circumference: number;
+    normalizedRadius: number;
+    ngAfterViewInit(): void;
+    ValueChange: EventEmitter<number>;
+    private _progress;
+    get progress(): number;
+    set progress(v: number);
+    strokeChange: EventEmitter<number>;
+    private _stroke;
+    get stroke(): number;
+    set stroke(v: number);
+    sizeChange: EventEmitter<number>;
+    private _size;
+    get size(): number;
+    set size(v: number);
+    private get __hostClass();
+    setCircularSize(): void;
+    updateProgress(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXCircularProgressComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXCircularProgressComponent, "ax-circular-progress", never, { "color": { "alias": "color"; "required": false; }; "progress": { "alias": "progress"; "required": false; }; "stroke": { "alias": "stroke"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "ValueChange": "ValueChange"; "strokeChange": "strokeChange"; "sizeChange": "sizeChange"; }, never, ["ax-prefix", "*", "ax-suffix"], false, never>;
+}

package/circular-progress/lib/circular-progress.module.d.ts

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

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

@@ -18,7 +18,8 @@ export declare class AXListDataSource<T = unknown> extends DataSource<T> {
     private subscription;
     source: AXDataSource<T>;
     private dataStream;
-    range: {
+    private _range;
+    get range(): {
         start: number;
         end: number;
     };

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

@@ -3,12 +3,13 @@ export type AXDataSourceOperator = {
     type: 'equal' | 'isNull' | 'isEmpty' | 'lt' | 'lte' | 'gt' | 'gte' | 'startsWith' | 'endsWith' | 'contains';
     negative?: boolean;
 };
-export type AXDataSourceLogic = 'and' | 'or';
+export type AXFilterLogic = 'and' | 'or';
+export type AXSortOrder = 'asc' | 'desc';
 export type AXDataSourceFilterOption = {
     field: string;
     value?: unknown;
     operator: AXDataSourceOperator;
-    logic?: AXDataSourceLogic;
+    logic?: AXFilterLogic;
     filters?: AXDataSourceFilterOption[];
 };
 export type AXDataSourceSortOption = {
@@ -16,10 +17,10 @@ export type AXDataSourceSortOption = {
     dir: 'asc' | 'desc';
 };
 export interface AXDataSourceQuery {
-    take?: number;
-    skip?: number;
+    take: number;
+    skip: number;
     filter?: AXDataSourceFilterOption;
-    sort?: AXDataSourceSortOption[];
+    sort: AXDataSourceSortOption[];
 }
 export interface AXDataSourceCallbackResult<T> {
     items: Array<T>;
@@ -43,8 +44,9 @@ export interface AXDataSourceChangedEvent<T = unknown> {
 export declare class AXDataSource<T = unknown> {
     config: AXDataSourceConfig<T>;
     private _totalCount;
-    private get totalCount();
-    private get totalPages();
+    get totalCount(): number;
+    get totalPages(): number;
+    get pageSize(): number;
     private _cachedItems;
     get cachedItems(): T[];
     private _items;
@@ -52,6 +54,7 @@ export declare class AXDataSource<T = unknown> {
     private fetchedPages;
     private _page;
     private _query;
+    get query(): AXDataSourceQuery;
     onChanged: Subject<AXDataSourceChangedEvent<T>>;
     onLoadingChanged: Subject<boolean>;
     private _isLoading;

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

@@ -60,7 +60,8 @@ export declare class AXButtonClickEvent extends AXClickEvent {
  *  Fires each time the user click the element.
  * @category Events
  */
-export declare class AXItemClickEvent<T> extends AXHtmlEvent<MouseEvent> {
+export declare class AXItemClickEvent<T> extends AXClickEvent {
+    name?: string;
     item: T;
 }
 /**

package/data-table/index.d.ts

@@ -1,4 +1,8 @@
-export * from './lib/data-column.directive';
+export * from './lib/columns/data-table-column';
+export * from './lib/columns/data-text-column.component';
+export * from './lib/columns/row-index-column.component';
+export * from './lib/columns/row-select-column.component';
+export * from './lib/columns/row-command-column.component';
 export * from './lib/data-table.component';
 export * from './lib/data-table.module';
-export * from './lib/data-table2.component';
+export * from './lib/data-table.component';

package/data-table/lib/columns/data-table-column.d.ts

@@ -0,0 +1,18 @@
+import { AXSortOrder } from "@acorex/components/common";
+import { TemplateRef } from "@angular/core";
+import * as i0 from "@angular/core";
+export declare abstract class AXDataTableColumnComponent {
+    caption: string;
+    width: string | number;
+    fixed: 'start' | 'end' | undefined;
+    allowSorting: boolean;
+    sortIndex: number | undefined;
+    sortOrder: AXSortOrder | undefined;
+    headerTemplate?: TemplateRef<unknown>;
+    cellTemplate?: TemplateRef<unknown>;
+    abstract get template(): TemplateRef<unknown>;
+    abstract get skeleton(): boolean;
+    get cssClass(): string | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableColumnComponent, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AXDataTableColumnComponent>;
+}

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

@@ -0,0 +1,15 @@
+import { TemplateRef } from "@angular/core";
+import { AXDataTableColumnComponent } from "./data-table-column";
+import * as i0 from "@angular/core";
+export declare class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
+    dataField: string;
+    private _template;
+    get template(): TemplateRef<unknown>;
+    get skeleton(): boolean;
+    private formatService;
+    protected getDisplayText(rowData: unknown, dataField: string): string;
+    format: string;
+    formatOptions: unknown;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableTextColumnComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableTextColumnComponent, "ax-text-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; }; "allowSorting": { "alias": "allowSorting"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; "dataField": { "alias": "dataField"; "required": false; }; "format": { "alias": "format"; "required": false; }; "formatOptions": { "alias": "formatOptions"; "required": false; }; }, {}, never, never, false, never>;
+}

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

@@ -0,0 +1,38 @@
+import { EventEmitter, TemplateRef, ChangeDetectorRef } from "@angular/core";
+import { AXItemClickEvent, AXButtonClickEvent } from "@acorex/components/common";
+import { AXDataTableColumnComponent } from "./data-table-column";
+import { AXButtonItemListItem, AXButtonItemComponent } from "@acorex/components/button";
+import { AXDataTableComponent } from "../data-table.component";
+import * as i0 from "@angular/core";
+export interface AXRowCommandItem extends AXButtonItemListItem {
+}
+export interface AXRowCommandItemClickEvent extends AXButtonClickEvent {
+}
+export declare abstract class AXBaseRowCommandColumnComponent extends AXDataTableColumnComponent {
+    protected grid: AXDataTableComponent;
+    protected cdr: ChangeDetectorRef;
+    allowSorting: boolean;
+    get skeleton(): boolean;
+    get cssClass(): string;
+    onItemClick: EventEmitter<AXRowCommandItemClickEvent>;
+}
+export declare class AXRowDropdownCommandColumnComponent extends AXBaseRowCommandColumnComponent {
+    private _template;
+    get template(): TemplateRef<unknown>;
+    protected _items: AXRowCommandItem[];
+    items: AXRowCommandItem[] | ((rowData: unknown) => AXRowCommandItem[] | Promise<AXRowCommandItem[]>);
+    protected handleOnOpened(rowData: any): Promise<void>;
+    protected handleOnClosed(): void;
+    protected handleOnItemClick(e: AXItemClickEvent<AXButtonItemComponent>, data: unknown): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXRowDropdownCommandColumnComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXRowDropdownCommandColumnComponent, "ax-dropdown-command-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "onItemClick": "onItemClick"; }, never, never, false, never>;
+}
+export declare class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponent {
+    private _template;
+    get template(): TemplateRef<unknown>;
+    items: AXRowCommandItem[] | ((rowData: unknown) => AXRowCommandItem[]);
+    protected getItems(rowData: unknown): AXRowCommandItem[];
+    protected handleOnItemClick(e: MouseEvent, item: AXRowCommandItem, data: unknown): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXRowCommandColumnComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXRowCommandColumnComponent, "ax-command-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "onItemClick": "onItemClick"; }, never, never, false, never>;
+}

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

@@ -0,0 +1,17 @@
+import { OnInit, TemplateRef } from "@angular/core";
+import { AXDataTableColumnComponent } from "./data-table-column";
+import * as i0 from "@angular/core";
+export declare class AXRowIndexColumnComponent extends AXDataTableColumnComponent implements OnInit {
+    private grid;
+    private unsubscriber;
+    private _template;
+    get template(): TemplateRef<unknown>;
+    get cssClass(): string;
+    padZero: boolean;
+    protected formatCount: number;
+    ngOnInit(): void;
+    allowSorting: boolean;
+    get skeleton(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXRowIndexColumnComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXRowIndexColumnComponent, "ax-index-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; "padZero": { "alias": "padZero"; "required": false; }; }, {}, never, never, false, never>;
+}

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

@@ -0,0 +1,13 @@
+import { TemplateRef } from "@angular/core";
+import { AXDataTableColumnComponent } from "./data-table-column";
+import * as i0 from "@angular/core";
+export declare class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
+    private grid;
+    private _template;
+    get template(): TemplateRef<unknown>;
+    protected isSelected(item: unknown): boolean;
+    protected handleChange(item: unknown): void;
+    get skeleton(): boolean;
+    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, false, never>;
+}

package/data-table/lib/data-table.component.d.ts

@@ -1,36 +1,60 @@
-import { AXDataListItems, AXPagedComponentInterface, AXValueChangedEvent, MXBaseComponent } from '@acorex/components/common';
-import { EventEmitter, QueryList, TemplateRef } from '@angular/core';
-import { AXDataColumnComponent } from './data-column.directive';
+import { AXValueChangedEvent, MXBaseComponent, AXListDataSource, AXDataSource, AXEvent } from '@acorex/components/common';
+import { ElementRef, EventEmitter, QueryList, TemplateRef } from '@angular/core';
+import { AXDataTableColumnComponent } from './columns/data-table-column';
 import * as i0 from "@angular/core";
-export declare class AXDataTableComponent extends MXBaseComponent implements AXPagedComponentInterface {
-    protected _columns: QueryList<AXDataColumnComponent>;
+export interface AXDataTableScrollIndexChanged extends AXEvent {
+    index: number;
+}
+export declare class AXDataTableComponent extends MXBaseComponent {
+    protected columns: QueryList<AXDataTableColumnComponent>;
+    protected startFixedColumn(): AXDataTableColumnComponent[];
+    protected endFixedColumn(): AXDataTableColumnComponent[];
+    protected notFixedColumn(): AXDataTableColumnComponent[];
+    protected notFixedColumnCount(): number;
+    protected fixedColumnCount(): number;
     onPageChanged: EventEmitter<AXValueChangedEvent<number>>;
     rowTemplate?: TemplateRef<unknown>;
     emptyTemplate?: TemplateRef<unknown>;
+    loadingTemplate: TemplateRef<unknown>;
     showHeader: boolean;
-    private _pageSize;
-    get pageSize(): number;
-    set pageSize(v: number);
     fetchDataMode: 'auto' | 'manual';
-    private _currentPage;
-    private _loadedItems;
-    private _totalItems;
-    private _isLazy;
-    protected _isLoading: boolean;
-    get totalCount(): number;
-    protected get isLazy(): boolean;
-    protected get isLoading(): boolean;
-    protected get loadedCount(): number;
-    private _items;
-    get items(): AXDataListItems;
-    set items(v: AXDataListItems);
-    get displayItems(): any[];
-    ngAfterViewInit(): void;
-    _fetchData(opts?: {
-        searchQuery?: string;
-    }): void;
+    dataSource: AXDataSource<unknown>;
+    protected listDataSource: AXListDataSource<unknown>;
+    protected isLoading: boolean;
+    protected hasItems: boolean;
+    protected totalRows: number;
+    protected currentPage: number;
+    protected totalPages: number;
+    protected startRowIndex: number;
+    private lastIndex;
+    focusedRowChange: EventEmitter<unknown>;
+    private _focusedRow;
+    get focusedRow(): unknown;
+    set focusedRow(v: unknown);
+    selectedRowsChange: EventEmitter<unknown[]>;
+    private _selectedRows;
+    get selectedRows(): unknown[];
+    set selectedRows(v: unknown[]);
+    selectRows(...rows: unknown[]): void;
+    unSelectRows(...rows: unknown[]): void;
+    itemHeight: number | 'auto';
+    protected width: string;
+    protected height: string;
+    private viewport;
+    onScrolledIndexChanged: EventEmitter<AXDataTableScrollIndexChanged>;
+    trackByIdx(i: any): any;
+    ngOnInit(): void;
+    headerContainer: ElementRef<HTMLDivElement>;
+    footerContainer: ElementRef;
+    protected _handleOnscrolledIndexChange(e: number): void;
+    ngDoCheck(): void;
+    private copyFixedColumns;
+    render(): void;
     refresh(): void;
-    goToPage(page: number): void;
+    protected handleRowClick(e: MouseEvent, item: unknown): void;
+    handleColumnClick(e: MouseEvent, column: AXDataTableColumnComponent): void;
+    protected getSort(column: AXDataTableColumnComponent): string | undefined;
+    protected onViewChange(e: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableComponent, "ax-data-table", never, { "rowTemplate": { "alias": "rowTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "fetchDataMode": { "alias": "fetchDataMode"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "onPageChanged": "onPageChanged"; }, ["_columns"], ["ax-header", "ax-footer"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableComponent, "ax-data-table", never, { "rowTemplate": { "alias": "rowTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "fetchDataMode": { "alias": "fetchDataMode"; "required": false; }; "dataSource": { "alias": "dataSource"; "required": false; }; "focusedRow": { "alias": "focusedRow"; "required": false; }; "selectedRows": { "alias": "selectedRows"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; }, { "onPageChanged": "onPageChanged"; "focusedRowChange": "focusedRowChange"; "selectedRowsChange": "selectedRowsChange"; "onScrolledIndexChanged": "onScrolledIndexChanged"; }, ["columns"], ["ax-header", "ax-footer"], false, never>;
 }

package/data-table/lib/data-table.module.d.ts

@@ -1,17 +1,22 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./data-table.component";
-import * as i2 from "./data-table2.component";
-import * as i3 from "./data-column.directive";
-import * as i4 from "@angular/common";
-import * as i5 from "@angular/cdk/scrolling";
-import * as i6 from "@acorex/core/translation";
-import * as i7 from "@acorex/components/result";
-import * as i8 from "@acorex/components/loading";
-import * as i9 from "@acorex/components/decorators";
-import * as i10 from "@acorex/components/skeleton";
-import * as i11 from "@acorex/components/button";
+import * as i2 from "./columns/data-text-column.component";
+import * as i3 from "./columns/row-index-column.component";
+import * as i4 from "./columns/row-select-column.component";
+import * as i5 from "./columns/row-command-column.component";
+import * as i6 from "@angular/common";
+import * as i7 from "@acorex/components/common";
+import * as i8 from "@angular/cdk/scrolling";
+import * as i9 from "@acorex/core/translation";
+import * as i10 from "@acorex/components/result";
+import * as i11 from "@acorex/components/loading";
+import * as i12 from "@acorex/components/decorators";
+import * as i13 from "@acorex/components/skeleton";
+import * as i14 from "@acorex/components/button";
+import * as i15 from "@acorex/components/dropdown";
+import * as i16 from "@acorex/core/format";
 export declare class AXDataTableModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXDataTableModule, [typeof i1.AXDataTableComponent, typeof i2.AXDataTable2Component, typeof i3.AXDataColumnComponent], [typeof i4.CommonModule, typeof i5.ScrollingModule, typeof i6.AXTranslationModule, typeof i7.AXResultModule, typeof i8.AXLoadingModule, typeof i9.AXDecoratorModule, typeof i10.AXSkeletonModule, typeof i11.AXButtonModule], [typeof i1.AXDataTableComponent, typeof i2.AXDataTable2Component, typeof i3.AXDataColumnComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXDataTableModule, [typeof i1.AXDataTableComponent, typeof i2.AXDataTableTextColumnComponent, typeof i3.AXRowIndexColumnComponent, typeof i4.AXRowSelectColumnComponent, typeof i5.AXRowCommandColumnComponent, typeof i5.AXRowDropdownCommandColumnComponent], [typeof i6.CommonModule, typeof i7.AXCommonModule, typeof i8.ScrollingModule, typeof i9.AXTranslationModule, typeof i10.AXResultModule, typeof i11.AXLoadingModule, typeof i12.AXDecoratorModule, typeof i13.AXSkeletonModule, typeof i14.AXButtonModule, typeof i15.AXDropdownModule, typeof i16.AXFormatModule], [typeof i1.AXDataTableComponent, typeof i2.AXDataTableTextColumnComponent, typeof i3.AXRowIndexColumnComponent, typeof i4.AXRowSelectColumnComponent, typeof i5.AXRowCommandColumnComponent, typeof i5.AXRowDropdownCommandColumnComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXDataTableModule>;
 }

package/esm2022/alert/lib/alert.component.mjs

@@ -157,11 +157,11 @@ export class AXAlertComponent extends MXColorComponent {
         this.onOptionChanged?.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXAlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXAlertComponent, selector: "ax-alert", inputs: { color: "color", timeOut: "timeOut", visible: "visible" }, outputs: { colorChange: "colorChange", onClosed: "onClosed" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXAlertComponent }], queries: [{ propertyName: "_iconComp", first: true, predicate: ["ax-icon"], descendants: true }, { propertyName: "_titleComp", first: true, predicate: ["ax-title"], descendants: true }, { propertyName: "_contentComp", first: true, predicate: ["ax-content"], descendants: true }, { propertyName: "_footerComp", first: true, predicate: ["ax-footer"], descendants: true }, { propertyName: "_buttonComps", predicate: AXButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"_showInline; else elseTpl\">\n  <div class=\"ax-alert-inline\">\n    <div class=\"ax-alert-icon\">\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</ng-container>\n\n<ng-template #elseTpl>\n  <div class=\"ax-alert-block\">\n    <div class=\"ax-alert-icon\">\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</ng-template>\n<div class=\"ax-alert-progress\" [style.animation-duration.ms]=\"timeOut\" *ngIf=\"timeOut\"></div>\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-dark ax-alert.ax-primary-solid{background-color:rgba(var(--ax-color-primary-900),.25);border-color:rgba(var(--ax-color-primary-500))}.ax-dark ax-alert.ax-primary-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-primary-solid .ax-alert-progress{background-color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-alert.ax-secondary-solid{background-color:rgba(var(--ax-color-secondary-900),.25);border-color:rgba(var(--ax-color-secondary-500))}.ax-dark ax-alert.ax-secondary-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-secondary-solid .ax-alert-progress{background-color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-alert.ax-success-solid{background-color:rgba(var(--ax-color-success-900),.25);border-color:rgba(var(--ax-color-success-500))}.ax-dark ax-alert.ax-success-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-success-solid .ax-alert-progress{background-color:rgba(var(--ax-color-success-fore))}.ax-dark ax-alert.ax-warning-solid{background-color:rgba(var(--ax-color-warning-900),.25);border-color:rgba(var(--ax-color-warning-500))}.ax-dark ax-alert.ax-warning-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-warning-solid .ax-alert-progress{background-color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-alert.ax-danger-solid{background-color:rgba(var(--ax-color-danger-900),.25);border-color:rgba(var(--ax-color-danger-500))}.ax-dark ax-alert.ax-danger-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-danger-solid .ax-alert-progress{background-color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-alert.ax-info-solid{background-color:rgba(var(--ax-color-info-900),.25);border-color:rgba(var(--ax-color-info-500))}.ax-dark ax-alert.ax-info-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-info-solid .ax-alert-progress{background-color:rgba(var(--ax-color-info-fore))}ax-alert{position:relative;padding:1rem;border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));font-size:.875rem;display:flex;gap:1rem;overflow:hidden}ax-alert .ax-alert-inline{display:flex;align-items:center;align-content:center;flex:1}ax-alert .ax-alert-block{display:flex}ax-alert .ax-alert-block .ax-alert-content{display:flex;flex-direction:column}ax-alert .ax-alert-block .ax-alert-content 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{border-radius:99rem;display:grid;font-size:1.25rem;line-height:1.25rem;padding-inline-end:.5rem}ax-alert .ax-alert-buttons{padding-inline-start:1rem}ax-alert .ax-alert-title{display:flex;flex-direction:column;flex:1}ax-alert .ax-alert-title ax-title{font-size:.875rem;line-height:1.25rem;font-weight:500}ax-alert .ax-alert-progress{width:0px;height:.25rem;position:absolute;inset-inline-start:0px;bottom:0;animation-duration:4s;animation-timing-function:linear;animation-name:progressBar}@keyframes progressBar{0%{width:100%}to{width:0%}}ax-alert.ax-primary-solid{background-color:rgba(var(--ax-color-primary-100));border-color:rgba(var(--ax-color-primary-500))}ax-alert.ax-primary-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-primary-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-primary-solid .ax-alert-icon{color:rgba(var(--ax-color-primary-500))}ax-alert.ax-primary-solid .ax-alert-progress{background-color:rgba(var(--ax-color-primary-900))}ax-alert.ax-secondary-solid{background-color:rgba(var(--ax-color-secondary-100));border-color:rgba(var(--ax-color-secondary-500))}ax-alert.ax-secondary-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-secondary-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-secondary-solid .ax-alert-icon{color:rgba(var(--ax-color-secondary-500))}ax-alert.ax-secondary-solid .ax-alert-progress{background-color:rgba(var(--ax-color-secondary-900))}ax-alert.ax-success-solid{background-color:rgba(var(--ax-color-success-100));border-color:rgba(var(--ax-color-success-500))}ax-alert.ax-success-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-success-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-success-solid .ax-alert-icon{color:rgba(var(--ax-color-success-500))}ax-alert.ax-success-solid .ax-alert-progress{background-color:rgba(var(--ax-color-success-900))}ax-alert.ax-warning-solid{background-color:rgba(var(--ax-color-warning-100));border-color:rgba(var(--ax-color-warning-500))}ax-alert.ax-warning-solid ax-button[class$=blank]{color:rgba(var(--ax-color-warning-fore))}ax-alert.ax-warning-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-warning-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-warning-solid .ax-alert-icon{color:rgba(var(--ax-color-warning-500))}ax-alert.ax-warning-solid .ax-alert-progress{background-color:rgba(var(--ax-color-warning-900))}ax-alert.ax-danger-solid{background-color:rgba(var(--ax-color-danger-100));border-color:rgba(var(--ax-color-danger-500))}ax-alert.ax-danger-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-danger-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-danger-solid .ax-alert-icon{color:rgba(var(--ax-color-danger-500))}ax-alert.ax-danger-solid .ax-alert-progress{background-color:rgba(var(--ax-color-danger-900))}ax-alert.ax-info-solid{background-color:rgba(var(--ax-color-info-100));border-color:rgba(var(--ax-color-info-500))}ax-alert.ax-info-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-info-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-info-solid .ax-alert-icon{color:rgba(var(--ax-color-info-500))}ax-alert.ax-info-solid .ax-alert-progress{background-color:rgba(var(--ax-color-info-900))}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXAlertComponent, selector: "ax-alert", inputs: { color: "color", timeOut: "timeOut", visible: "visible" }, outputs: { colorChange: "colorChange", onClosed: "onClosed" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXAlertComponent }], queries: [{ propertyName: "_iconComp", first: true, predicate: ["ax-icon"], descendants: true }, { propertyName: "_titleComp", first: true, predicate: ["ax-title"], descendants: true }, { propertyName: "_contentComp", first: true, predicate: ["ax-content"], descendants: true }, { propertyName: "_footerComp", first: true, predicate: ["ax-footer"], descendants: true }, { propertyName: "_buttonComps", predicate: AXButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"_showInline; else elseTpl\">\n  <div class=\"ax-alert-inline\">\n    <div class=\"ax-alert-icon\">\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</ng-container>\n\n<ng-template #elseTpl>\n  <div class=\"ax-alert-block\">\n    <div class=\"ax-alert-icon\">\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</ng-template>\n<div class=\"ax-alert-progress\" [style.animation-duration.ms]=\"timeOut\" *ngIf=\"timeOut\"></div>\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-dark ax-alert.ax-primary-solid{background-color:rgba(var(--ax-color-primary-900),.25);border-color:rgba(var(--ax-color-primary-500))}.ax-dark ax-alert.ax-primary-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-primary-solid .ax-alert-progress{background-color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-alert.ax-secondary-solid{background-color:rgba(var(--ax-color-secondary-900),.25);border-color:rgba(var(--ax-color-secondary-500))}.ax-dark ax-alert.ax-secondary-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-secondary-solid .ax-alert-progress{background-color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-alert.ax-success-solid{background-color:rgba(var(--ax-color-success-900),.25);border-color:rgba(var(--ax-color-success-500))}.ax-dark ax-alert.ax-success-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-success-solid .ax-alert-progress{background-color:rgba(var(--ax-color-success-fore))}.ax-dark ax-alert.ax-warning-solid{background-color:rgba(var(--ax-color-warning-900),.25);border-color:rgba(var(--ax-color-warning-500))}.ax-dark ax-alert.ax-warning-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-warning-solid .ax-alert-progress{background-color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-alert.ax-danger-solid{background-color:rgba(var(--ax-color-danger-900),.25);border-color:rgba(var(--ax-color-danger-500))}.ax-dark ax-alert.ax-danger-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-danger-solid .ax-alert-progress{background-color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-alert.ax-info-solid{background-color:rgba(var(--ax-color-info-900),.25);border-color:rgba(var(--ax-color-info-500))}.ax-dark ax-alert.ax-info-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-info-solid .ax-alert-progress{background-color:rgba(var(--ax-color-info-fore))}ax-alert{position:relative;padding:1rem;border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));font-size:.875rem;display:flex;gap:1rem;overflow:hidden}ax-alert .ax-alert-inline{display:flex;align-items:center;align-content:center;flex:1}ax-alert .ax-alert-block{display:flex}ax-alert .ax-alert-block .ax-alert-content{display:flex;flex-direction:column}ax-alert .ax-alert-block .ax-alert-content ax-footer{margin-top:1rem}ax-alert .ax-alert-icon{border-radius:99rem;display:grid;font-size:1.25rem;line-height:1.25rem;padding-inline-end:.5rem}ax-alert .ax-alert-buttons{padding-inline-start:1rem}ax-alert .ax-alert-title{display:flex;flex-direction:column;flex:1}ax-alert .ax-alert-title ax-title{font-size:.875rem;line-height:1.25rem;font-weight:500}ax-alert .ax-alert-progress{width:0px;height:.25rem;position:absolute;inset-inline-start:0px;bottom:0;animation-duration:4s;animation-timing-function:linear;animation-name:progressBar}@keyframes progressBar{0%{width:100%}to{width:0%}}ax-alert.ax-primary-solid{background-color:rgba(var(--ax-color-primary-100));border-color:rgba(var(--ax-color-primary-500))}ax-alert.ax-primary-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-primary-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-primary-solid .ax-alert-icon{color:rgba(var(--ax-color-primary-500))}ax-alert.ax-primary-solid .ax-alert-progress{background-color:rgba(var(--ax-color-primary-900))}ax-alert.ax-secondary-solid{background-color:rgba(var(--ax-color-secondary-100));border-color:rgba(var(--ax-color-secondary-500))}ax-alert.ax-secondary-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-secondary-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-secondary-solid .ax-alert-icon{color:rgba(var(--ax-color-secondary-500))}ax-alert.ax-secondary-solid .ax-alert-progress{background-color:rgba(var(--ax-color-secondary-900))}ax-alert.ax-success-solid{background-color:rgba(var(--ax-color-success-100));border-color:rgba(var(--ax-color-success-500))}ax-alert.ax-success-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-success-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-success-solid .ax-alert-icon{color:rgba(var(--ax-color-success-500))}ax-alert.ax-success-solid .ax-alert-progress{background-color:rgba(var(--ax-color-success-900))}ax-alert.ax-warning-solid{background-color:rgba(var(--ax-color-warning-100));border-color:rgba(var(--ax-color-warning-500))}ax-alert.ax-warning-solid ax-button[class$=blank]{color:rgba(var(--ax-color-warning-fore))}ax-alert.ax-warning-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-warning-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-warning-solid .ax-alert-icon{color:rgba(var(--ax-color-warning-500))}ax-alert.ax-warning-solid .ax-alert-progress{background-color:rgba(var(--ax-color-warning-900))}ax-alert.ax-danger-solid{background-color:rgba(var(--ax-color-danger-100));border-color:rgba(var(--ax-color-danger-500))}ax-alert.ax-danger-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-danger-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-danger-solid .ax-alert-icon{color:rgba(var(--ax-color-danger-500))}ax-alert.ax-danger-solid .ax-alert-progress{background-color:rgba(var(--ax-color-danger-900))}ax-alert.ax-info-solid{background-color:rgba(var(--ax-color-info-100));border-color:rgba(var(--ax-color-info-500))}ax-alert.ax-info-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-info-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-info-solid .ax-alert-icon{color:rgba(var(--ax-color-info-500))}ax-alert.ax-info-solid .ax-alert-progress{background-color:rgba(var(--ax-color-info-900))}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", 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 }], template: "<ng-container *ngIf=\"_showInline; else elseTpl\">\n  <div class=\"ax-alert-inline\">\n    <div class=\"ax-alert-icon\">\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</ng-container>\n\n<ng-template #elseTpl>\n  <div class=\"ax-alert-block\">\n    <div class=\"ax-alert-icon\">\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</ng-template>\n<div class=\"ax-alert-progress\" [style.animation-duration.ms]=\"timeOut\" *ngIf=\"timeOut\"></div>\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-dark ax-alert.ax-primary-solid{background-color:rgba(var(--ax-color-primary-900),.25);border-color:rgba(var(--ax-color-primary-500))}.ax-dark ax-alert.ax-primary-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-primary-solid .ax-alert-progress{background-color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-alert.ax-secondary-solid{background-color:rgba(var(--ax-color-secondary-900),.25);border-color:rgba(var(--ax-color-secondary-500))}.ax-dark ax-alert.ax-secondary-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-secondary-solid .ax-alert-progress{background-color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-alert.ax-success-solid{background-color:rgba(var(--ax-color-success-900),.25);border-color:rgba(var(--ax-color-success-500))}.ax-dark ax-alert.ax-success-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-success-solid .ax-alert-progress{background-color:rgba(var(--ax-color-success-fore))}.ax-dark ax-alert.ax-warning-solid{background-color:rgba(var(--ax-color-warning-900),.25);border-color:rgba(var(--ax-color-warning-500))}.ax-dark ax-alert.ax-warning-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-warning-solid .ax-alert-progress{background-color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-alert.ax-danger-solid{background-color:rgba(var(--ax-color-danger-900),.25);border-color:rgba(var(--ax-color-danger-500))}.ax-dark ax-alert.ax-danger-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-danger-solid .ax-alert-progress{background-color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-alert.ax-info-solid{background-color:rgba(var(--ax-color-info-900),.25);border-color:rgba(var(--ax-color-info-500))}.ax-dark ax-alert.ax-info-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-info-solid .ax-alert-progress{background-color:rgba(var(--ax-color-info-fore))}ax-alert{position:relative;padding:1rem;border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));font-size:.875rem;display:flex;gap:1rem;overflow:hidden}ax-alert .ax-alert-inline{display:flex;align-items:center;align-content:center;flex:1}ax-alert .ax-alert-block{display:flex}ax-alert .ax-alert-block .ax-alert-content{display:flex;flex-direction:column}ax-alert .ax-alert-block .ax-alert-content 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{border-radius:99rem;display:grid;font-size:1.25rem;line-height:1.25rem;padding-inline-end:.5rem}ax-alert .ax-alert-buttons{padding-inline-start:1rem}ax-alert .ax-alert-title{display:flex;flex-direction:column;flex:1}ax-alert .ax-alert-title ax-title{font-size:.875rem;line-height:1.25rem;font-weight:500}ax-alert .ax-alert-progress{width:0px;height:.25rem;position:absolute;inset-inline-start:0px;bottom:0;animation-duration:4s;animation-timing-function:linear;animation-name:progressBar}@keyframes progressBar{0%{width:100%}to{width:0%}}ax-alert.ax-primary-solid{background-color:rgba(var(--ax-color-primary-100));border-color:rgba(var(--ax-color-primary-500))}ax-alert.ax-primary-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-primary-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-primary-solid .ax-alert-icon{color:rgba(var(--ax-color-primary-500))}ax-alert.ax-primary-solid .ax-alert-progress{background-color:rgba(var(--ax-color-primary-900))}ax-alert.ax-secondary-solid{background-color:rgba(var(--ax-color-secondary-100));border-color:rgba(var(--ax-color-secondary-500))}ax-alert.ax-secondary-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-secondary-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-secondary-solid .ax-alert-icon{color:rgba(var(--ax-color-secondary-500))}ax-alert.ax-secondary-solid .ax-alert-progress{background-color:rgba(var(--ax-color-secondary-900))}ax-alert.ax-success-solid{background-color:rgba(var(--ax-color-success-100));border-color:rgba(var(--ax-color-success-500))}ax-alert.ax-success-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-success-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-success-solid .ax-alert-icon{color:rgba(var(--ax-color-success-500))}ax-alert.ax-success-solid .ax-alert-progress{background-color:rgba(var(--ax-color-success-900))}ax-alert.ax-warning-solid{background-color:rgba(var(--ax-color-warning-100));border-color:rgba(var(--ax-color-warning-500))}ax-alert.ax-warning-solid ax-button[class$=blank]{color:rgba(var(--ax-color-warning-fore))}ax-alert.ax-warning-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-warning-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-warning-solid .ax-alert-icon{color:rgba(var(--ax-color-warning-500))}ax-alert.ax-warning-solid .ax-alert-progress{background-color:rgba(var(--ax-color-warning-900))}ax-alert.ax-danger-solid{background-color:rgba(var(--ax-color-danger-100));border-color:rgba(var(--ax-color-danger-500))}ax-alert.ax-danger-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-danger-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-danger-solid .ax-alert-icon{color:rgba(var(--ax-color-danger-500))}ax-alert.ax-danger-solid .ax-alert-progress{background-color:rgba(var(--ax-color-danger-900))}ax-alert.ax-info-solid{background-color:rgba(var(--ax-color-info-100));border-color:rgba(var(--ax-color-info-500))}ax-alert.ax-info-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-info-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-info-solid .ax-alert-icon{color:rgba(var(--ax-color-info-500))}ax-alert.ax-info-solid .ax-alert-progress{background-color:rgba(var(--ax-color-info-900))}\n"] }]
+            args: [{ selector: 'ax-alert', inputs: ['color'], outputs: ['colorChange'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXClosbaleComponent, useExisting: AXAlertComponent }], template: "<ng-container *ngIf=\"_showInline; else elseTpl\">\n  <div class=\"ax-alert-inline\">\n    <div class=\"ax-alert-icon\">\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</ng-container>\n\n<ng-template #elseTpl>\n  <div class=\"ax-alert-block\">\n    <div class=\"ax-alert-icon\">\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</ng-template>\n<div class=\"ax-alert-progress\" [style.animation-duration.ms]=\"timeOut\" *ngIf=\"timeOut\"></div>\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-dark ax-alert.ax-primary-solid{background-color:rgba(var(--ax-color-primary-900),.25);border-color:rgba(var(--ax-color-primary-500))}.ax-dark ax-alert.ax-primary-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-primary-solid .ax-alert-progress{background-color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-alert.ax-secondary-solid{background-color:rgba(var(--ax-color-secondary-900),.25);border-color:rgba(var(--ax-color-secondary-500))}.ax-dark ax-alert.ax-secondary-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-secondary-solid .ax-alert-progress{background-color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-alert.ax-success-solid{background-color:rgba(var(--ax-color-success-900),.25);border-color:rgba(var(--ax-color-success-500))}.ax-dark ax-alert.ax-success-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-success-solid .ax-alert-progress{background-color:rgba(var(--ax-color-success-fore))}.ax-dark ax-alert.ax-warning-solid{background-color:rgba(var(--ax-color-warning-900),.25);border-color:rgba(var(--ax-color-warning-500))}.ax-dark ax-alert.ax-warning-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-warning-solid .ax-alert-progress{background-color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-alert.ax-danger-solid{background-color:rgba(var(--ax-color-danger-900),.25);border-color:rgba(var(--ax-color-danger-500))}.ax-dark ax-alert.ax-danger-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-danger-solid .ax-alert-progress{background-color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-alert.ax-info-solid{background-color:rgba(var(--ax-color-info-900),.25);border-color:rgba(var(--ax-color-info-500))}.ax-dark ax-alert.ax-info-solid ax-button[class$=blank]{color:rgba(var(--ax-color-text-default))}.ax-dark ax-alert.ax-info-solid .ax-alert-progress{background-color:rgba(var(--ax-color-info-fore))}ax-alert{position:relative;padding:1rem;border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));font-size:.875rem;display:flex;gap:1rem;overflow:hidden}ax-alert .ax-alert-inline{display:flex;align-items:center;align-content:center;flex:1}ax-alert .ax-alert-block{display:flex}ax-alert .ax-alert-block .ax-alert-content{display:flex;flex-direction:column}ax-alert .ax-alert-block .ax-alert-content ax-footer{margin-top:1rem}ax-alert .ax-alert-icon{border-radius:99rem;display:grid;font-size:1.25rem;line-height:1.25rem;padding-inline-end:.5rem}ax-alert .ax-alert-buttons{padding-inline-start:1rem}ax-alert .ax-alert-title{display:flex;flex-direction:column;flex:1}ax-alert .ax-alert-title ax-title{font-size:.875rem;line-height:1.25rem;font-weight:500}ax-alert .ax-alert-progress{width:0px;height:.25rem;position:absolute;inset-inline-start:0px;bottom:0;animation-duration:4s;animation-timing-function:linear;animation-name:progressBar}@keyframes progressBar{0%{width:100%}to{width:0%}}ax-alert.ax-primary-solid{background-color:rgba(var(--ax-color-primary-100));border-color:rgba(var(--ax-color-primary-500))}ax-alert.ax-primary-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-primary-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-primary-solid .ax-alert-icon{color:rgba(var(--ax-color-primary-500))}ax-alert.ax-primary-solid .ax-alert-progress{background-color:rgba(var(--ax-color-primary-900))}ax-alert.ax-secondary-solid{background-color:rgba(var(--ax-color-secondary-100));border-color:rgba(var(--ax-color-secondary-500))}ax-alert.ax-secondary-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-secondary-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-secondary-solid .ax-alert-icon{color:rgba(var(--ax-color-secondary-500))}ax-alert.ax-secondary-solid .ax-alert-progress{background-color:rgba(var(--ax-color-secondary-900))}ax-alert.ax-success-solid{background-color:rgba(var(--ax-color-success-100));border-color:rgba(var(--ax-color-success-500))}ax-alert.ax-success-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-success-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-success-solid .ax-alert-icon{color:rgba(var(--ax-color-success-500))}ax-alert.ax-success-solid .ax-alert-progress{background-color:rgba(var(--ax-color-success-900))}ax-alert.ax-warning-solid{background-color:rgba(var(--ax-color-warning-100));border-color:rgba(var(--ax-color-warning-500))}ax-alert.ax-warning-solid ax-button[class$=blank]{color:rgba(var(--ax-color-warning-fore))}ax-alert.ax-warning-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-warning-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-warning-solid .ax-alert-icon{color:rgba(var(--ax-color-warning-500))}ax-alert.ax-warning-solid .ax-alert-progress{background-color:rgba(var(--ax-color-warning-900))}ax-alert.ax-danger-solid{background-color:rgba(var(--ax-color-danger-100));border-color:rgba(var(--ax-color-danger-500))}ax-alert.ax-danger-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-danger-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-danger-solid .ax-alert-icon{color:rgba(var(--ax-color-danger-500))}ax-alert.ax-danger-solid .ax-alert-progress{background-color:rgba(var(--ax-color-danger-900))}ax-alert.ax-info-solid{background-color:rgba(var(--ax-color-info-100));border-color:rgba(var(--ax-color-info-500))}ax-alert.ax-info-solid ax-title{color:rgba(var(--ax-color-text-default))}ax-alert.ax-info-solid ax-content{color:rgba(var(--ax-color-text-default))}ax-alert.ax-info-solid .ax-alert-icon{color:rgba(var(--ax-color-info-500))}ax-alert.ax-info-solid .ax-alert-progress{background-color:rgba(var(--ax-color-info-900))}\n"] }]
         }], propDecorators: { _iconComp: [{
                 type: ContentChild,
                 args: ['ax-icon']