@acorex/components 7.8.20 → 7.9.1

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

@@ -1,3 +1,6 @@
+import { CollectionViewer, DataSource } from "@angular/cdk/collections";
+import { Observable } from "rxjs";
+import { AXDataSource } from "./datasource.class";
 export interface AXDataListQuery {
     take?: number;
     skip?: number;
@@ -9,3 +12,21 @@ export interface AXDataListFetchCallbackResult {
 }
 export type AXDataListFetchDataCallback = (e: AXDataListQuery) => Promise<AXDataListFetchCallbackResult>;
 export type AXDataListItems = Array<any> | AXDataListFetchDataCallback;
+export declare class AXListDataSource<T = unknown> extends DataSource<T> {
+    private config;
+    private debounceTime;
+    private subscription;
+    source: AXDataSource<T>;
+    private dataStream;
+    /**
+     * @ignore
+     */
+    constructor(config: {
+        source: AXDataSource<T>;
+        debounceTime?: number;
+    });
+    connect(collectionViewer: CollectionViewer): Observable<T[]>;
+    disconnect(): void;
+    private getPageForIndex;
+    refresh(): void;
+}

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

@@ -1,32 +1,47 @@
-import { ListIterateeCustom } from 'lodash';
 import { Subject } from 'rxjs';
-export type AXDateSourceFilterPredicate<T> = ListIterateeCustom<T, boolean>;
-export interface AXDataSourceQuery<T> {
+export type AXDataSourceOperator = {
+    type: 'equal' | 'isNull' | 'isEmpty' | 'lt' | 'lte' | 'gt' | 'gte' | 'startsWith' | 'endsWith' | 'contains';
+    negative?: boolean;
+};
+export type AXDataSourceLogic = 'and' | 'or';
+export type AXDataSourceFilterOption = {
+    field: string;
+    value?: unknown;
+    operator: AXDataSourceOperator;
+    logic?: AXDataSourceLogic;
+    filters?: AXDataSourceFilterOption[];
+};
+export type AXDataSourceSortOption = {
+    field: string;
+    dir: 'asc' | 'desc';
+};
+export interface AXDataSourceQuery {
     take?: number;
     skip?: number;
-    predicate?: AXDateSourceFilterPredicate<T>;
+    filter?: AXDataSourceFilterOption;
+    sort?: AXDataSourceSortOption[];
 }
 export interface AXDataSourceCallbackResult<T> {
     items: Array<T>;
     total: number;
 }
-export type AXDataSourceLoadCallback<T> = (e: AXDataSourceQuery<T>) => Promise<AXDataSourceCallbackResult<T>>;
+export type AXDataSourceLoadCallback<T> = (e: AXDataSourceQuery) => Promise<AXDataSourceCallbackResult<T>>;
 export type AXDataSourceByKeyCallback<T> = (key: unknown) => Promise<T>;
-export interface AXDateSourceConfig<T = unknown> {
+export interface AXDataSourceConfig<T = unknown> {
     key?: string;
     pageSize: number;
     load: AXDataSourceLoadCallback<T>;
     byKey?: AXDataSourceByKeyCallback<T>;
 }
-export interface AXDateSourceChangedEvent<T = unknown> {
+export interface AXDataSourceChangedEvent<T = unknown> {
     cachedItems: Array<T>;
     items: Array<T>;
     totalCount: number;
     totalPages: number;
     page: number;
 }
-export declare class AXDateSource<T = unknown> {
-    config: AXDateSourceConfig<T>;
+export declare class AXDataSource<T = unknown> {
+    config: AXDataSourceConfig<T>;
     private _totalCount;
     private get totalCount();
     private get totalPages();
@@ -37,20 +52,22 @@ export declare class AXDateSource<T = unknown> {
     private fetchedPages;
     private _page;
     private _query;
-    onChanged: Subject<AXDateSourceChangedEvent<T>>;
+    onChanged: Subject<AXDataSourceChangedEvent<T>>;
     onLoadingChanged: Subject<boolean>;
     private _isLoading;
     get isLoading(): boolean;
-    constructor(config: AXDateSourceConfig<T>);
+    constructor(config: AXDataSourceConfig<T>);
     private load;
     private setLoadingState;
     setPage(page: number): void;
-    filter(predicate?: AXDateSourceFilterPredicate<T>): void;
-    reset(): void;
+    filter(value: AXDataSourceFilterOption): void;
+    sort(...value: AXDataSourceSortOption[]): void;
+    clearFilter(): void;
+    private reset;
     refresh(): void;
     find(key: unknown): T | Promise<T>;
 }
 export declare function convertArrayToDataSource<T>(items: T[], options?: {
     key: string;
     pageSize: number;
-}): AXDateSource;
+}): AXDataSource;

package/data-table/index.d.ts

@@ -1,3 +1,4 @@
 export * from './lib/data-column.directive';
 export * from './lib/data-table.component';
 export * from './lib/data-table.module';
+export * from './lib/data-table2.component';

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

@@ -5,8 +5,8 @@ import * as i0 from "@angular/core";
 export declare class AXDataTableComponent extends MXBaseComponent implements AXPagedComponentInterface {
     protected _columns: QueryList<AXDataColumnComponent>;
     onPageChanged: EventEmitter<AXValueChangedEvent<number>>;
-    rowTemplate?: TemplateRef<any>;
-    emptyTemplate?: TemplateRef<any>;
+    rowTemplate?: TemplateRef<unknown>;
+    emptyTemplate?: TemplateRef<unknown>;
     showHeader: boolean;
     private _pageSize;
     get pageSize(): number;

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

@@ -1,13 +1,15 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./data-table.component";
-import * as i2 from "./data-column.directive";
-import * as i3 from "@angular/common";
-import * as i4 from "@acorex/core/translation";
-import * as i5 from "@acorex/components/result";
-import * as i6 from "@acorex/components/loading";
-import * as i7 from "@acorex/components/decorators";
+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";
 export declare class AXDataTableModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXDataTableModule, [typeof i1.AXDataTableComponent, typeof i2.AXDataColumnComponent], [typeof i3.CommonModule, typeof i4.AXTranslationModule, typeof i5.AXResultModule, typeof i6.AXLoadingModule, typeof i7.AXDecoratorModule], [typeof i1.AXDataTableComponent, typeof i2.AXDataColumnComponent]>;
+    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 i1.AXDataTableComponent, typeof i2.AXDataTable2Component, typeof i3.AXDataColumnComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXDataTableModule>;
 }

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

@@ -0,0 +1,37 @@
+import { AXValueChangedEvent, MXBaseComponent, AXListDataSource, AXDataSource, AXEvent } from '@acorex/components/common';
+import { ElementRef, EventEmitter, QueryList, TemplateRef } from '@angular/core';
+import { AXDataColumnComponent } from './data-column.directive';
+import * as i0 from "@angular/core";
+export interface AXDataTableScrollIndexChanged extends AXEvent {
+    index: number;
+}
+export declare class AXDataTable2Component extends MXBaseComponent {
+    protected columns: QueryList<AXDataColumnComponent>;
+    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';
+    dataSource: AXDataSource<unknown>;
+    protected listDataSource: AXListDataSource<unknown>;
+    protected isLoading: boolean;
+    protected hasItems: boolean;
+    private lastIndex;
+    itemHeight: number | 'auto';
+    protected width: string;
+    private viewport;
+    onScrolledIndexChanged: EventEmitter<AXDataTableScrollIndexChanged>;
+    trackByIdx(i: any): any;
+    ngOnInit(): void;
+    headerContainer: ElementRef;
+    protected _handleOnscrolledIndexChange(e: number): void;
+    ngDoCheck(): void;
+    render(): void;
+    refresh(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTable2Component, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTable2Component, "ax-data-table2", never, { "rowTemplate": { "alias": "rowTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "fetchDataMode": { "alias": "fetchDataMode"; "required": false; }; "dataSource": { "alias": "dataSource"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; }, { "onPageChanged": "onPageChanged"; "onScrolledIndexChanged": "onScrolledIndexChanged"; }, ["columns"], ["ax-header", "ax-footer"], false, never>;
+}

package/drawer/lib/drawer.component.d.ts

@@ -18,7 +18,7 @@ export declare class AXDrawerComponent extends MXBaseComponent {
     private _collapsed;
     get collapsed(): boolean;
     set collapsed(v: boolean);
-    ngAfterViewInit(): void;
+    ngAfterContentInit(): void;
     internalOptionChanged(option: MXComponentOptionChanged): void;
     ngDoCheck(): void;
     private _detectBoundingSize;
@@ -28,6 +28,7 @@ export declare class AXDrawerComponent extends MXBaseComponent {
     open(): void;
     private get __hostClass();
     private _backdropElement;
+    private _loaded;
     private _addBackdrop;
     private _removeBackdrop;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDrawerComponent, never>;

package/esm2022/button/lib/button-item-list.component.mjs

@@ -48,11 +48,11 @@ export class AXButtonItemListComponent extends MXInteractiveComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXButtonItemListComponent, deps: [{ token: AXDropdownPanelComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXButtonItemListComponent, selector: "ax-button-item-list", outputs: { onItemClick: "onItemClick" }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonItemComponent }], usesInheritance: true, ngImport: i0, template: ` <ng-content select="ax-button-item, ax-title, ax-divider, ng-container"></ng-content> `, isInline: true, styles: ["ax-button-item-list{display:flex;flex-direction:column;padding:.5rem 0}ax-button-item-list ax-title{font-size:.75rem;padding:.25rem 0;padding-inline-start:1rem;padding-inline-end:2.5rem;opacity:.5;text-transform:uppercase;font-weight:500}ax-button-item-list ax-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-border-default));margin:.25rem 0}ax-button-item-list ax-button-item{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;padding:.5rem;padding-inline-start:1rem;padding-inline-end:4rem;font-size:.875rem;color:rgba(var(--ax-color-text-default));-webkit-user-select:none;user-select:none;cursor:pointer}ax-button-item-list ax-button-item:hover:not(ax-button-item-list ax-button-item:hover.ax-state-disabled){background-color:rgba(var(--ax-color-on-surface))}ax-button-item-list ax-button-item.ax-divide{border:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-button-item-list ax-button-item.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-button-item-list ax-button-item ax-prefix,ax-button-item-list ax-button-item ax-suffix{display:flex;flex-direction:row}ax-button-item-list ax-button-item ax-prefix{padding-inline-end:.5rem}ax-button-item-list ax-button-item ax-suffix{padding-inline-start:.5rem}ax-button-item-list ax-button-item.ax-primary-default{background-color:transparent;color:rgba(var(--ax-color-primary-500));border:transparent}ax-button-item-list ax-button-item.ax-primary-default:hover,ax-button-item-list ax-button-item.ax-primary-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-primary-600))}ax-button-item-list ax-button-item.ax-primary-default:active{color:rgba(var(--ax-color-primary-400))}ax-button-item-list ax-button-item.ax-primary-default.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-button-item-list ax-button-item.ax-secondary-default{background-color:transparent;color:rgba(var(--ax-color-secondary-500));border:transparent}ax-button-item-list ax-button-item.ax-secondary-default:hover,ax-button-item-list ax-button-item.ax-secondary-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-secondary-600))}ax-button-item-list ax-button-item.ax-secondary-default:active{color:rgba(var(--ax-color-secondary-400))}ax-button-item-list ax-button-item.ax-secondary-default.ax-state-selected{background-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-button-item-list ax-button-item.ax-success-default{background-color:transparent;color:rgba(var(--ax-color-success-500));border:transparent}ax-button-item-list ax-button-item.ax-success-default:hover,ax-button-item-list ax-button-item.ax-success-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-success-600))}ax-button-item-list ax-button-item.ax-success-default:active{color:rgba(var(--ax-color-success-400))}ax-button-item-list ax-button-item.ax-success-default.ax-state-selected{background-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-button-item-list ax-button-item.ax-warning-default{background-color:transparent;color:rgba(var(--ax-color-warning-500));border:transparent}ax-button-item-list ax-button-item.ax-warning-default:hover,ax-button-item-list ax-button-item.ax-warning-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-warning-600))}ax-button-item-list ax-button-item.ax-warning-default:active{color:rgba(var(--ax-color-warning-400))}ax-button-item-list ax-button-item.ax-warning-default.ax-state-selected{background-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-button-item-list ax-button-item.ax-danger-default{background-color:transparent;color:rgba(var(--ax-color-danger-500));border:transparent}ax-button-item-list ax-button-item.ax-danger-default:hover,ax-button-item-list ax-button-item.ax-danger-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-danger-600))}ax-button-item-list ax-button-item.ax-danger-default:active{color:rgba(var(--ax-color-danger-400))}ax-button-item-list ax-button-item.ax-danger-default.ax-state-selected{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-button-item-list ax-button-item.ax-info-default{background-color:transparent;color:rgba(var(--ax-color-info-500));border:transparent}ax-button-item-list ax-button-item.ax-info-default:hover,ax-button-item-list ax-button-item.ax-info-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-info-600))}ax-button-item-list ax-button-item.ax-info-default:active{color:rgba(var(--ax-color-info-400))}ax-button-item-list ax-button-item.ax-info-default.ax-state-selected{background-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AXButtonItemListComponent, selector: "ax-button-item-list", outputs: { onItemClick: "onItemClick" }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonItemComponent }], usesInheritance: true, ngImport: i0, template: ` <ng-content select="ax-button-item, ax-title, ax-divider, ng-container"></ng-content> `, isInline: true, styles: ["ax-button-item-list{display:flex;flex-direction:column;padding:.5rem 0}ax-button-item-list ax-title{font-size:.75rem;padding:.25rem 0;padding-inline-start:1rem;padding-inline-end:2.5rem;opacity:.5;text-transform:uppercase;font-weight:500}ax-button-item-list ax-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-border-default));margin:.25rem 0}ax-button-item-list ax-button-item{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;padding:.5rem;padding-inline-start:1rem;padding-inline-end:4rem;font-size:.875rem;color:rgba(var(--ax-color-text-default));-webkit-user-select:none;user-select:none;cursor:pointer}ax-button-item-list ax-button-item:hover:not(ax-button-item-list ax-button-item:hover.ax-state-disabled){background-color:rgba(var(--ax-color-on-surface))}ax-button-item-list ax-button-item.ax-divide{border:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-button-item-list ax-button-item.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-button-item-list ax-button-item ax-prefix,ax-button-item-list ax-button-item ax-suffix{display:flex;flex-direction:row}ax-button-item-list ax-button-item ax-prefix ax-icon,ax-button-item-list ax-button-item ax-suffix ax-icon{display:block;width:1.5rem;text-align:center}ax-button-item-list ax-button-item ax-prefix{padding-inline-end:.5rem}ax-button-item-list ax-button-item ax-suffix{padding-inline-start:.5rem}ax-button-item-list ax-button-item.ax-primary-default{background-color:transparent;color:rgba(var(--ax-color-primary-500));border:transparent}ax-button-item-list ax-button-item.ax-primary-default:hover,ax-button-item-list ax-button-item.ax-primary-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-primary-600))}ax-button-item-list ax-button-item.ax-primary-default:active{color:rgba(var(--ax-color-primary-400))}ax-button-item-list ax-button-item.ax-primary-default.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-button-item-list ax-button-item.ax-secondary-default{background-color:transparent;color:rgba(var(--ax-color-secondary-500));border:transparent}ax-button-item-list ax-button-item.ax-secondary-default:hover,ax-button-item-list ax-button-item.ax-secondary-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-secondary-600))}ax-button-item-list ax-button-item.ax-secondary-default:active{color:rgba(var(--ax-color-secondary-400))}ax-button-item-list ax-button-item.ax-secondary-default.ax-state-selected{background-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-button-item-list ax-button-item.ax-success-default{background-color:transparent;color:rgba(var(--ax-color-success-500));border:transparent}ax-button-item-list ax-button-item.ax-success-default:hover,ax-button-item-list ax-button-item.ax-success-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-success-600))}ax-button-item-list ax-button-item.ax-success-default:active{color:rgba(var(--ax-color-success-400))}ax-button-item-list ax-button-item.ax-success-default.ax-state-selected{background-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-button-item-list ax-button-item.ax-warning-default{background-color:transparent;color:rgba(var(--ax-color-warning-500));border:transparent}ax-button-item-list ax-button-item.ax-warning-default:hover,ax-button-item-list ax-button-item.ax-warning-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-warning-600))}ax-button-item-list ax-button-item.ax-warning-default:active{color:rgba(var(--ax-color-warning-400))}ax-button-item-list ax-button-item.ax-warning-default.ax-state-selected{background-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-button-item-list ax-button-item.ax-danger-default{background-color:transparent;color:rgba(var(--ax-color-danger-500));border:transparent}ax-button-item-list ax-button-item.ax-danger-default:hover,ax-button-item-list ax-button-item.ax-danger-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-danger-600))}ax-button-item-list ax-button-item.ax-danger-default:active{color:rgba(var(--ax-color-danger-400))}ax-button-item-list ax-button-item.ax-danger-default.ax-state-selected{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-button-item-list ax-button-item.ax-info-default{background-color:transparent;color:rgba(var(--ax-color-info-500));border:transparent}ax-button-item-list ax-button-item.ax-info-default:hover,ax-button-item-list ax-button-item.ax-info-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-info-600))}ax-button-item-list ax-button-item.ax-info-default:active{color:rgba(var(--ax-color-info-400))}ax-button-item-list ax-button-item.ax-info-default.ax-state-selected{background-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AXButtonItemListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-button-item-list', template: ` <ng-content select="ax-button-item, ax-title, ax-divider, ng-container"></ng-content> `, encapsulation: ViewEncapsulation.None, styles: ["ax-button-item-list{display:flex;flex-direction:column;padding:.5rem 0}ax-button-item-list ax-title{font-size:.75rem;padding:.25rem 0;padding-inline-start:1rem;padding-inline-end:2.5rem;opacity:.5;text-transform:uppercase;font-weight:500}ax-button-item-list ax-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-border-default));margin:.25rem 0}ax-button-item-list ax-button-item{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;padding:.5rem;padding-inline-start:1rem;padding-inline-end:4rem;font-size:.875rem;color:rgba(var(--ax-color-text-default));-webkit-user-select:none;user-select:none;cursor:pointer}ax-button-item-list ax-button-item:hover:not(ax-button-item-list ax-button-item:hover.ax-state-disabled){background-color:rgba(var(--ax-color-on-surface))}ax-button-item-list ax-button-item.ax-divide{border:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-button-item-list ax-button-item.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-button-item-list ax-button-item ax-prefix,ax-button-item-list ax-button-item ax-suffix{display:flex;flex-direction:row}ax-button-item-list ax-button-item ax-prefix{padding-inline-end:.5rem}ax-button-item-list ax-button-item ax-suffix{padding-inline-start:.5rem}ax-button-item-list ax-button-item.ax-primary-default{background-color:transparent;color:rgba(var(--ax-color-primary-500));border:transparent}ax-button-item-list ax-button-item.ax-primary-default:hover,ax-button-item-list ax-button-item.ax-primary-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-primary-600))}ax-button-item-list ax-button-item.ax-primary-default:active{color:rgba(var(--ax-color-primary-400))}ax-button-item-list ax-button-item.ax-primary-default.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-button-item-list ax-button-item.ax-secondary-default{background-color:transparent;color:rgba(var(--ax-color-secondary-500));border:transparent}ax-button-item-list ax-button-item.ax-secondary-default:hover,ax-button-item-list ax-button-item.ax-secondary-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-secondary-600))}ax-button-item-list ax-button-item.ax-secondary-default:active{color:rgba(var(--ax-color-secondary-400))}ax-button-item-list ax-button-item.ax-secondary-default.ax-state-selected{background-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-button-item-list ax-button-item.ax-success-default{background-color:transparent;color:rgba(var(--ax-color-success-500));border:transparent}ax-button-item-list ax-button-item.ax-success-default:hover,ax-button-item-list ax-button-item.ax-success-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-success-600))}ax-button-item-list ax-button-item.ax-success-default:active{color:rgba(var(--ax-color-success-400))}ax-button-item-list ax-button-item.ax-success-default.ax-state-selected{background-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-button-item-list ax-button-item.ax-warning-default{background-color:transparent;color:rgba(var(--ax-color-warning-500));border:transparent}ax-button-item-list ax-button-item.ax-warning-default:hover,ax-button-item-list ax-button-item.ax-warning-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-warning-600))}ax-button-item-list ax-button-item.ax-warning-default:active{color:rgba(var(--ax-color-warning-400))}ax-button-item-list ax-button-item.ax-warning-default.ax-state-selected{background-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-button-item-list ax-button-item.ax-danger-default{background-color:transparent;color:rgba(var(--ax-color-danger-500));border:transparent}ax-button-item-list ax-button-item.ax-danger-default:hover,ax-button-item-list ax-button-item.ax-danger-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-danger-600))}ax-button-item-list ax-button-item.ax-danger-default:active{color:rgba(var(--ax-color-danger-400))}ax-button-item-list ax-button-item.ax-danger-default.ax-state-selected{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-button-item-list ax-button-item.ax-info-default{background-color:transparent;color:rgba(var(--ax-color-info-500));border:transparent}ax-button-item-list ax-button-item.ax-info-default:hover,ax-button-item-list ax-button-item.ax-info-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-info-600))}ax-button-item-list ax-button-item.ax-info-default:active{color:rgba(var(--ax-color-info-400))}ax-button-item-list ax-button-item.ax-info-default.ax-state-selected{background-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}\n"] }]
+            args: [{ selector: 'ax-button-item-list', template: ` <ng-content select="ax-button-item, ax-title, ax-divider, ng-container"></ng-content> `, encapsulation: ViewEncapsulation.None, styles: ["ax-button-item-list{display:flex;flex-direction:column;padding:.5rem 0}ax-button-item-list ax-title{font-size:.75rem;padding:.25rem 0;padding-inline-start:1rem;padding-inline-end:2.5rem;opacity:.5;text-transform:uppercase;font-weight:500}ax-button-item-list ax-divider{width:100%;height:1px;background-color:rgba(var(--ax-color-border-default));margin:.25rem 0}ax-button-item-list ax-button-item{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;padding:.5rem;padding-inline-start:1rem;padding-inline-end:4rem;font-size:.875rem;color:rgba(var(--ax-color-text-default));-webkit-user-select:none;user-select:none;cursor:pointer}ax-button-item-list ax-button-item:hover:not(ax-button-item-list ax-button-item:hover.ax-state-disabled){background-color:rgba(var(--ax-color-on-surface))}ax-button-item-list ax-button-item.ax-divide{border:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-button-item-list ax-button-item.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-button-item-list ax-button-item ax-prefix,ax-button-item-list ax-button-item ax-suffix{display:flex;flex-direction:row}ax-button-item-list ax-button-item ax-prefix ax-icon,ax-button-item-list ax-button-item ax-suffix ax-icon{display:block;width:1.5rem;text-align:center}ax-button-item-list ax-button-item ax-prefix{padding-inline-end:.5rem}ax-button-item-list ax-button-item ax-suffix{padding-inline-start:.5rem}ax-button-item-list ax-button-item.ax-primary-default{background-color:transparent;color:rgba(var(--ax-color-primary-500));border:transparent}ax-button-item-list ax-button-item.ax-primary-default:hover,ax-button-item-list ax-button-item.ax-primary-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-primary-600))}ax-button-item-list ax-button-item.ax-primary-default:active{color:rgba(var(--ax-color-primary-400))}ax-button-item-list ax-button-item.ax-primary-default.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-button-item-list ax-button-item.ax-secondary-default{background-color:transparent;color:rgba(var(--ax-color-secondary-500));border:transparent}ax-button-item-list ax-button-item.ax-secondary-default:hover,ax-button-item-list ax-button-item.ax-secondary-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-secondary-600))}ax-button-item-list ax-button-item.ax-secondary-default:active{color:rgba(var(--ax-color-secondary-400))}ax-button-item-list ax-button-item.ax-secondary-default.ax-state-selected{background-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-button-item-list ax-button-item.ax-success-default{background-color:transparent;color:rgba(var(--ax-color-success-500));border:transparent}ax-button-item-list ax-button-item.ax-success-default:hover,ax-button-item-list ax-button-item.ax-success-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-success-600))}ax-button-item-list ax-button-item.ax-success-default:active{color:rgba(var(--ax-color-success-400))}ax-button-item-list ax-button-item.ax-success-default.ax-state-selected{background-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-button-item-list ax-button-item.ax-warning-default{background-color:transparent;color:rgba(var(--ax-color-warning-500));border:transparent}ax-button-item-list ax-button-item.ax-warning-default:hover,ax-button-item-list ax-button-item.ax-warning-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-warning-600))}ax-button-item-list ax-button-item.ax-warning-default:active{color:rgba(var(--ax-color-warning-400))}ax-button-item-list ax-button-item.ax-warning-default.ax-state-selected{background-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-button-item-list ax-button-item.ax-danger-default{background-color:transparent;color:rgba(var(--ax-color-danger-500));border:transparent}ax-button-item-list ax-button-item.ax-danger-default:hover,ax-button-item-list ax-button-item.ax-danger-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-danger-600))}ax-button-item-list ax-button-item.ax-danger-default:active{color:rgba(var(--ax-color-danger-400))}ax-button-item-list ax-button-item.ax-danger-default.ax-state-selected{background-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-button-item-list ax-button-item.ax-info-default{background-color:transparent;color:rgba(var(--ax-color-info-500));border:transparent}ax-button-item-list ax-button-item.ax-info-default:hover,ax-button-item-list ax-button-item.ax-info-default:focus{background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-info-600))}ax-button-item-list ax-button-item.ax-info-default:active{color:rgba(var(--ax-color-info-400))}ax-button-item-list ax-button-item.ax-info-default.ax-state-selected{background-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.AXDropdownPanelComponent, decorators: [{
                     type: Inject,
                     args: [AXDropdownPanelComponent]