@acorex/components 7.5.0 → 7.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/components",
-  "version": "7.5.0",
+  "version": "7.8.0",
   "sideEffects": false,
   "peerDependencies": {
     "@angular/common": ">=16.1.0",
@@ -106,12 +106,6 @@
       "esm": "./esm2022/common/acorex-components-common.mjs",
       "default": "./fesm2022/acorex-components-common.mjs"
     },
-    "./context-menu": {
-      "types": "./context-menu/index.d.ts",
-      "esm2022": "./esm2022/context-menu/acorex-components-context-menu.mjs",
-      "esm": "./esm2022/context-menu/acorex-components-context-menu.mjs",
-      "default": "./fesm2022/acorex-components-context-menu.mjs"
-    },
     "./data-pager": {
       "types": "./data-pager/index.d.ts",
       "esm2022": "./esm2022/data-pager/acorex-components-data-pager.mjs",
@@ -280,6 +274,12 @@
       "esm": "./esm2022/result/acorex-components-result.mjs",
       "default": "./fesm2022/acorex-components-result.mjs"
     },
+    "./routing-progress": {
+      "types": "./routing-progress/index.d.ts",
+      "esm2022": "./esm2022/routing-progress/acorex-components-routing-progress.mjs",
+      "esm": "./esm2022/routing-progress/acorex-components-routing-progress.mjs",
+      "default": "./fesm2022/acorex-components-routing-progress.mjs"
+    },
     "./scheduler": {
       "types": "./scheduler/index.d.ts",
       "esm2022": "./esm2022/scheduler/acorex-components-scheduler.mjs",
@@ -304,6 +304,18 @@
       "esm": "./esm2022/selection-list/acorex-components-selection-list.mjs",
       "default": "./fesm2022/acorex-components-selection-list.mjs"
     },
+    "./side-menu": {
+      "types": "./side-menu/index.d.ts",
+      "esm2022": "./esm2022/side-menu/acorex-components-side-menu.mjs",
+      "esm": "./esm2022/side-menu/acorex-components-side-menu.mjs",
+      "default": "./fesm2022/acorex-components-side-menu.mjs"
+    },
+    "./skeleton": {
+      "types": "./skeleton/index.d.ts",
+      "esm2022": "./esm2022/skeleton/acorex-components-skeleton.mjs",
+      "esm": "./esm2022/skeleton/acorex-components-skeleton.mjs",
+      "default": "./fesm2022/acorex-components-skeleton.mjs"
+    },
     "./switch": {
       "types": "./switch/index.d.ts",
       "esm2022": "./esm2022/switch/acorex-components-switch.mjs",

package/page/lib/base-page.class.d.ts

@@ -1,6 +1,6 @@
-import { EventEmitter } from '@angular/core';
 import { AXComponentCloseEvent, AXComponentClosing, MXBaseComponent } from '@acorex/components/common';
 import { AXDecoratorGenericComponent } from '@acorex/components/decorators';
+import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class AXBasePageComponent extends MXBaseComponent {
     private _loadingId;

package/page/lib/page.component.d.ts

@@ -1,5 +1,5 @@
-import { EventEmitter } from '@angular/core';
 import { MXBaseComponent } from '@acorex/components/common';
+import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare abstract class AXPageComponent extends MXBaseComponent {
     private _loadingService;

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

@@ -1,11 +1,11 @@
-import { MXAppearanceComponent, MXInputBaseValueComponent } from '@acorex/components/common';
+import { MXInputBaseValueComponent, MXLookComponent } from '@acorex/components/common';
 import { ElementRef } from '@angular/core';
 import * as i0 from "@angular/core";
 declare const AXPasswordBoxComponent_base: import("polytype").Polytype.ClusteredConstructor<[{
     new (): MXInputBaseValueComponent<string>;
     ɵfac: unknown;
     ɵprov: import("@angular/core").ɵɵInjectableDeclaration<MXInputBaseValueComponent<any>>;
-}, typeof MXAppearanceComponent]>;
+}, typeof MXLookComponent]>;
 /**
  * The Textbox is a component which detects user interaction and triggers a corresponding event
  *
@@ -22,8 +22,8 @@ export declare class AXPasswordBoxComponent extends AXPasswordBoxComponent_base
     showToggleButton: boolean;
     _handleModelChange(value: string): void;
     toggleType(): void;
-    get __hostClass(): string;
+    get __hostClass(): string[];
     static ɵfac: i0.ɵɵFactoryDeclaration<AXPasswordBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXPasswordBoxComponent, "ax-password-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "autoComplete": { "alias": "autoComplete"; "required": false; }; "showToggleButton": { "alias": "showToggleButton"; "required": false; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXPasswordBoxComponent, "ax-password-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "look": { "alias": "look"; "required": false; }; "autoComplete": { "alias": "autoComplete"; "required": false; }; "showToggleButton": { "alias": "showToggleButton"; "required": false; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], false, never>;
 }
 export {};

package/popup/index.d.ts

@@ -1,4 +1,4 @@
 export * from './lib/popup.component';
-export * from './lib/popup.module';
 export * from './lib/popup.interface';
+export * from './lib/popup.module';
 export * from './lib/popup.service';

package/popup/lib/popup.interface.d.ts

@@ -1,5 +1,5 @@
-import { ComponentType } from "@angular/cdk/portal";
-import { TemplateRef } from "@angular/core";
+import { ComponentType } from '@angular/cdk/portal';
+import { TemplateRef } from '@angular/core';
 export type AXPopupContentType = TemplateRef<unknown> | ComponentType<unknown>;
 export type AXPopupSizeType = 'sm' | 'md' | 'lg' | 'full' | 'fit';
 export interface AXPopupConfig {

package/routing-progress/README.md

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

package/routing-progress/index.d.ts

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

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

@@ -0,0 +1,14 @@
+import { MXBaseComponent } from '@acorex/components/common';
+import { OnDestroy } from '@angular/core';
+import { Router } from '@angular/router';
+import * as i0 from "@angular/core";
+export declare class AXRoutingProgressComponent extends MXBaseComponent implements OnDestroy {
+    private router;
+    loading: boolean;
+    width: number;
+    private subscription;
+    constructor(router: Router);
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXRoutingProgressComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXRoutingProgressComponent, "ax-routing-progress", never, {}, {}, never, never, false, never>;
+}

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

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./routing-progress.component";
+import * as i2 from "@angular/common";
+export declare class AXRoutingProgressModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXRoutingProgressModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXRoutingProgressModule, [typeof i1.AXRoutingProgressComponent], [typeof i2.CommonModule], [typeof i1.AXRoutingProgressComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AXRoutingProgressModule>;
+}

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

@@ -1,12 +1,19 @@
-import { AXSearchableComponent, MXInputBaseValueComponent } from '@acorex/components/common';
+import { AXSearchableComponent, MXInputBaseValueComponent, MXLookComponent } from '@acorex/components/common';
+import { OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class AXSearchBoxComponent extends MXInputBaseValueComponent<string> {
+declare const AXSearchBoxComponent_base: import("polytype").Polytype.ClusteredConstructor<[{
+    new (): MXInputBaseValueComponent<string>;
+    ɵfac: unknown;
+    ɵprov: import("@angular/core").ɵɵInjectableDeclaration<MXInputBaseValueComponent<any>>;
+}, typeof MXLookComponent]>;
+export declare class AXSearchBoxComponent extends AXSearchBoxComponent_base implements OnInit {
     private _parent;
     constructor(_parent: AXSearchableComponent);
     ngOnInit(): void;
     delayTime: number;
     _handleModelChange(value: string): void;
-    protected _handleClearClick(): void;
+    get __hostClass(): string[];
     static ɵfac: i0.ɵɵFactoryDeclaration<AXSearchBoxComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXSearchBoxComponent, "ax-search-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "delayTime": { "alias": "delayTime"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; }, never, ["ax-prefix", "ax-suffix"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXSearchBoxComponent, "ax-search-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "look": { "alias": "look"; "required": false; }; "delayTime": { "alias": "delayTime"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; }, never, ["ax-prefix", "ax-suffix"], false, never>;
 }
+export {};

package/select-box/index.d.ts

@@ -1,3 +1,3 @@
-export * from './lib/select-box2.component';
 export * from './lib/select-box.component';
 export * from './lib/select-box.module';
+export * from './lib/select-box.component';

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

@@ -1,70 +1,48 @@
-import { AXPlatform } from '@acorex/core/platform';
-import { ChangeDetectorRef, ElementRef, NgZone, TemplateRef } from '@angular/core';
-import { AXBaseSelectionDropdownMixin } from '@acorex/components/mixin';
-import { AXPopoverComponent } from '@acorex/components/popover';
+import { AXDateSource, AXValueChangedEvent, MXLookComponent, MXSelectionValueComponent } from '@acorex/components/common';
+import { AXDropdownBoxComponent, MXDropdownBoxBaseComponent } from '@acorex/components/dropdown';
+import { AXListComponent } from '@acorex/components/list';
 import { AXSearchBoxComponent } from '@acorex/components/search-box';
+import { AfterViewInit, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
+declare const AXSelectBoxComponent_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 Components
  */
-export declare class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
-    private _elementRef;
-    private _cdr;
-    private _zone;
-    private _platform;
-    popover: AXPopoverComponent;
-    _searchBox: AXSearchBoxComponent;
-    _target: HTMLDivElement;
-    _popoverTitle: string;
-    _popoverWidth: number;
-    /**
-     *  Defines the clearButton.
-     */
-    clearButton: boolean;
-    /**
-     *  Defines the checkbox.
-     */
-    checkbox: boolean;
-    private listContainer;
-    private _contentEmptyTemplate;
-    get emptyTemplate(): TemplateRef<any>;
-    _isActionSheet: boolean;
-    _forceFocus: boolean;
-    protected _loadingOptions: {
-        text: string;
+export declare class AXSelectBoxComponent extends AXSelectBoxComponent_base implements AfterViewInit {
+    isLoading: boolean;
+    protected renderList: boolean;
+    protected dropdownSizes: {
+        width: string;
+        height: string;
     };
-    /**
-     *  @ignore
-     */
-    constructor(_elementRef: ElementRef<HTMLDivElement>, _cdr: ChangeDetectorRef, _zone: NgZone, _platform: AXPlatform);
-    _handleArrowClickEvent(e: MouseEvent): void;
-    _handleInputClickEvent(e: MouseEvent): void;
-    onInit(): void;
-    onViewInit(): void;
-    refresh(): void;
-    private _updatePopupTitle;
-    private _detectPopupSize;
-    _handleOnItemClick(e: MouseEvent, item: any): void;
-    _handleListScroll(e: Event): void;
-    private _checkForLoadData;
-    _onDataLoaded(): void;
-    _onValueChanged(oldValue: any, newValue: any): void;
-    _handleOnRemoveItemClick(e: MouseEvent, item: any): void;
-    _handleBadgeRemove(e: MouseEvent, item: any): void;
+    protected _listDataSource: AXDateSource<unknown>;
+    private _dataSource;
+    get dataSource(): AXDateSource<unknown> | unknown[];
+    set dataSource(v: AXDateSource<unknown> | unknown[]);
+    placeholder: string;
+    itemTemplate: TemplateRef<unknown>;
+    emptyTemplate: TemplateRef<unknown>;
+    loadingTemplate: TemplateRef<unknown>;
+    list: AXListComponent;
+    searchBox: AXSearchBoxComponent;
+    protected dropdown: AXDropdownBoxComponent;
+    protected autoHeight: boolean;
+    ngAfterViewInit(): void;
+    getItemByKey(key: unknown): Promise<unknown> | unknown;
+    protected _handleOnOpenedEvent(): void;
+    protected _handleOnClosedEvent(): void;
+    protected _handleBadgeRemove(e: MouseEvent, item: any): void;
+    protected _handleOnDataLoad(items: unknown[]): void;
+    protected _handleValueChanged(e: AXValueChangedEvent): void;
+    internalValueChanged(): void;
+    private detectAutoHeight;
+    private setDropdownSize;
     _handleKeydown(e: KeyboardEvent): void;
-    _handlePopoverKeydown(e: KeyboardEvent): void;
-    _handlePopupOnOpened(e: any): Promise<void>;
-    _handlePopupOnClosed(e: any): void;
-    private _focusSearchBox;
-    private _focusItemByNav;
-    private _focusSelectedItem;
-    private _focusItemElement;
-    private _selectedItemByNav;
-    search(exp: string): void;
-    _fetchData(): void;
-    get __hostClass(): string;
+    private selectItemByNav;
+    search(term: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXSelectBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXSelectBoxComponent, "ax-select-box", never, { "isOpen": { "alias": "isOpen"; "required": false; }; "fitParent": { "alias": "fitParent"; "required": false; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; }; "position": { "alias": "position"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "allowNull": { "alias": "allowNull"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "type": { "alias": "type"; "required": false; }; "autoComplete": { "alias": "autoComplete"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "items": { "alias": "items"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "disabledCallback": { "alias": "disabledCallback"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "checkbox": { "alias": "checkbox"; "required": false; }; }, { "onOpened": "onOpened"; "onClosed": "onClosed"; "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; }, ["_searchBox", "_contentEmptyTemplate"], ["ax-prefix", "ax-validation-rule", "ax-suffix", "ax-search-box"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXSelectBoxComponent, "ax-select-box", 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; }; "dataSource": { "alias": "dataSource"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; }, ["searchBox"], ["ax-prefix", " ax-clear-button", "ax-suffix", "ax-search-box", "ax-footer", "ax-validation-rule"], false, never>;
 }
+export {};

package/select-box/lib/select-box.module.d.ts

@@ -1,21 +1,20 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./select-box.component";
-import * as i2 from "./select-box2.component";
-import * as i3 from "@angular/common";
-import * as i4 from "@acorex/components/common";
-import * as i5 from "@angular/forms";
-import * as i6 from "@acorex/components/check-box";
-import * as i7 from "@acorex/components/badge";
-import * as i8 from "@acorex/components/decorators";
-import * as i9 from "@acorex/core/translation";
-import * as i10 from "@acorex/components/popover";
-import * as i11 from "@acorex/components/loading";
-import * as i12 from "@angular/cdk/a11y";
-import * as i13 from "@acorex/components/text-box";
-import * as i14 from "@acorex/components/dropdown";
-import * as i15 from "@acorex/components/list";
+import * as i2 from "@angular/common";
+import * as i3 from "@acorex/components/common";
+import * as i4 from "@angular/forms";
+import * as i5 from "@acorex/components/check-box";
+import * as i6 from "@acorex/components/badge";
+import * as i7 from "@acorex/components/decorators";
+import * as i8 from "@acorex/core/translation";
+import * as i9 from "@acorex/components/popover";
+import * as i10 from "@acorex/components/loading";
+import * as i11 from "@angular/cdk/a11y";
+import * as i12 from "@acorex/components/text-box";
+import * as i13 from "@acorex/components/dropdown";
+import * as i14 from "@acorex/components/list";
 export declare class AXSelectBoxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXSelectBoxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXSelectBoxModule, [typeof i1.AXSelectBoxComponent, typeof i2.AXSelectBox2Component], [typeof i3.CommonModule, typeof i4.AXCommonModule, typeof i5.FormsModule, typeof i6.AXCheckBoxModule, typeof i7.AXBadgeModule, typeof i8.AXDecoratorModule, typeof i9.AXTranslationModule, typeof i10.AXPopoverModule, typeof i11.AXLoadingModule, typeof i12.A11yModule, typeof i13.AXTextBoxModule, typeof i14.AXDropdownModule, typeof i15.AXListModule], [typeof i1.AXSelectBoxComponent, typeof i2.AXSelectBox2Component]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXSelectBoxModule, [typeof i1.AXSelectBoxComponent], [typeof i2.CommonModule, typeof i3.AXCommonModule, typeof i4.FormsModule, typeof i5.AXCheckBoxModule, typeof i6.AXBadgeModule, typeof i7.AXDecoratorModule, typeof i8.AXTranslationModule, typeof i9.AXPopoverModule, typeof i10.AXLoadingModule, typeof i11.A11yModule, typeof i12.AXTextBoxModule, typeof i13.AXDropdownModule, typeof i14.AXListModule], [typeof i1.AXSelectBoxComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXSelectBoxModule>;
 }

package/selection-list/lib/selection-list.component.d.ts

@@ -1,6 +1,6 @@
 import { AXDirection, MXSelectionValueComponent } from '@acorex/components/common';
 import * as i0 from "@angular/core";
-export type AXSelectionListAppearance = 'solid' | 'divided' | 'card';
+export type AXSelectionListLook = 'solid' | 'divided' | 'card';
 /**
  * The Button is a component which detects user interaction and triggers a corresponding event
  *
@@ -13,10 +13,13 @@ export declare class AXSelectionListComponent extends MXSelectionValueComponent
     private _items;
     get items(): unknown[];
     set items(v: unknown[]);
+    private _hintField;
+    get hintField(): string;
+    set hintField(v: string);
     getItemByKey(key: unknown): unknown;
-    appearance: AXSelectionListAppearance;
+    look: AXSelectionListLook;
     protected _handleOnItemValueChange(item: any, e: Event): void;
     private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXSelectionListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXSelectionListComponent, "ax-selection-list", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "size": { "alias": "size"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "hintField": { "alias": "hintField"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "readonlyField": { "alias": "readonlyField"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "items": { "alias": "items"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; }, { "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; }, never, ["ax-validation-rule"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXSelectionListComponent, "ax-selection-list", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "size": { "alias": "size"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "hintField": { "alias": "hintField"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "readonlyField": { "alias": "readonlyField"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "items": { "alias": "items"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, { "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; }, never, ["ax-validation-rule"], false, never>;
 }

package/side-menu/README.md

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

package/side-menu/index.d.ts

@@ -0,0 +1,3 @@
+export * from './lib/side-menu-item/side-menu-item.compoent';
+export * from './lib/side-menu.component';
+export * from './lib/side-menu.module';

package/side-menu/lib/side-menu-item/side-menu-item.compoent.d.ts

@@ -0,0 +1,37 @@
+import { AXClickEvent, MXInteractiveComponent } from '@acorex/components/common';
+import { AfterContentInit, ElementRef, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class AXSideMenuItemComponent extends MXInteractiveComponent implements AfterContentInit {
+    private elem;
+    textChange: EventEmitter<any>;
+    private _text;
+    /**
+     *  Providing a string value for its text state
+     */
+    get text(): string;
+    set text(v: string);
+    isCollapsedChange: EventEmitter<any>;
+    private _isCollapsed;
+    /**
+     *  Providing a boolean value for its collapse state
+     */
+    get isCollapsed(): boolean;
+    set isCollapsed(v: boolean);
+    activeChange: EventEmitter<boolean>;
+    private _active;
+    /**
+     *  Providing a string value for its text state
+     */
+    get active(): boolean;
+    set active(v: boolean);
+    onClick: EventEmitter<AXClickEvent>;
+    protected hasChild: boolean;
+    constructor(elem: ElementRef);
+    _handleClickEvent(e: MouseEvent): void;
+    toggle(): void;
+    open(): void;
+    close(): void;
+    ngAfterContentInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXSideMenuItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXSideMenuItemComponent, "ax-side-menu-item", never, { "disabled": { "alias": "disabled"; "required": false; }; "text": { "alias": "text"; "required": false; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; }; "active": { "alias": "active"; "required": false; }; }, { "textChange": "textChange"; "isCollapsedChange": "isCollapsedChange"; "activeChange": "activeChange"; "onClick": "onClick"; }, never, ["ax-title", "ax-prefix", "ax-suffix", "ax-side-menu-item, ng-container", "ax-divider"], false, never>;
+}

package/side-menu/lib/side-menu.component.d.ts

@@ -0,0 +1,8 @@
+import { MXBaseComponent } from '@acorex/components/common';
+import { OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class AXSideMenuComponent extends MXBaseComponent implements OnInit {
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXSideMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXSideMenuComponent, "ax-side-menu", never, {}, {}, never, ["ax-side-menu-item,ng-container,ng-content"], false, never>;
+}

package/side-menu/lib/side-menu.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./side-menu.component";
+import * as i2 from "./side-menu-item/side-menu-item.compoent";
+import * as i3 from "@angular/common";
+import * as i4 from "@acorex/components/common";
+export declare class AXSideMenuModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXSideMenuModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXSideMenuModule, [typeof i1.AXSideMenuComponent, typeof i2.AXSideMenuItemComponent], [typeof i3.CommonModule, typeof i4.AXCommonModule], [typeof i1.AXSideMenuComponent, typeof i2.AXSideMenuItemComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AXSideMenuModule>;
+}

package/skeleton/README.md

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

package/skeleton/index.d.ts

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

package/skeleton/lib/skeleton.component.d.ts

@@ -0,0 +1,8 @@
+import { MXBaseComponent } from '@acorex/components/common';
+import * as i0 from "@angular/core";
+export declare class AXSkeletonComponent extends MXBaseComponent {
+    animated: boolean;
+    get __hostClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXSkeletonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXSkeletonComponent, "ax-skeleton", never, { "animated": { "alias": "animated"; "required": false; }; }, {}, never, never, false, never>;
+}

package/skeleton/lib/skeleton.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./skeleton.component";
+import * as i2 from "@angular/common";
+export declare class AXSkeletonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXSkeletonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXSkeletonModule, [typeof i1.AXSkeletonComponent], [typeof i2.CommonModule], [typeof i1.AXSkeletonComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AXSkeletonModule>;
+}

package/tabs/lib/tab-item.component.d.ts

@@ -1,4 +1,4 @@
-import { MXComponentOptionChanged, MXInteractiveComponent } from '@acorex/components/common';
+import { AXClickEvent, MXComponentOptionChanged, MXInteractiveComponent } from '@acorex/components/common';
 import { EventEmitter, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class AXTabItemComponent extends MXInteractiveComponent {
@@ -7,6 +7,7 @@ export declare class AXTabItemComponent extends MXInteractiveComponent {
     template: TemplateRef<unknown>;
     headerTemplate: TemplateRef<unknown>;
     activeChange: EventEmitter<boolean>;
+    onClick: EventEmitter<AXClickEvent>;
     private _active;
     get active(): boolean;
     set active(value: boolean);

package/tag/lib/tag.component.d.ts

@@ -1,9 +1,8 @@
-import { MXBaseComponent } from '@acorex/components/common';
+import { MXColorLookComponent } from '@acorex/components/common';
 import * as i0 from "@angular/core";
-export declare class AXTagComponent extends MXBaseComponent {
+export declare class AXTagComponent extends MXColorLookComponent {
     text: string;
-    look: 'default' | 'outline';
     private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXTagComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXTagComponent, "ax-tag", never, { "text": { "alias": "text"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, {}, never, ["ax-prefix", "ax-suffix"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXTagComponent, "ax-tag", never, { "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, {}, never, ["ax-prefix", "ax-suffix"], false, never>;
 }

package/text-area/lib/text-area.component.d.ts

@@ -1,11 +1,11 @@
-import { MXAppearanceComponent, MXInputBaseValueComponent } from '@acorex/components/common';
+import { MXInputBaseValueComponent, MXLookComponent } from '@acorex/components/common';
 import { ElementRef } from '@angular/core';
 import * as i0 from "@angular/core";
 declare const AXTextAreaComponent_base: import("polytype").Polytype.ClusteredConstructor<[{
     new (): MXInputBaseValueComponent<string>;
     ɵfac: unknown;
     ɵprov: import("@angular/core").ɵɵInjectableDeclaration<MXInputBaseValueComponent<any>>;
-}, typeof MXAppearanceComponent]>;
+}, typeof MXLookComponent]>;
 export declare class AXTextAreaComponent extends AXTextAreaComponent_base {
     input: ElementRef<HTMLInputElement>;
     rows: number;
@@ -13,6 +13,6 @@ export declare class AXTextAreaComponent extends AXTextAreaComponent_base {
     protected _handleModelChange(value: string | null): void;
     get __hostClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXTextAreaComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXTextAreaComponent, "ax-text-area", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; }, never, ["ax-prefix", "ax-suffix", "ax-validation-rule"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXTextAreaComponent, "ax-text-area", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "look": { "alias": "look"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; }, never, ["ax-prefix", "ax-suffix", "ax-validation-rule"], false, never>;
 }
 export {};

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

@@ -1,4 +1,4 @@
-import { MXAppearanceComponent, MXInputBaseValueComponent } from '@acorex/components/common';
+import { MXInputBaseValueComponent, MXLookComponent } from '@acorex/components/common';
 import { AfterContentInit } from '@angular/core';
 import { AXMaskOptions, AXMaskOptionsDirective } from './mask-options.directive';
 import * as i0 from "@angular/core";
@@ -6,7 +6,7 @@ declare const AXTextBoxComponent_base: import("polytype").Polytype.ClusteredCons
     new (): MXInputBaseValueComponent<string>;
     ɵfac: unknown;
     ɵprov: import("@angular/core").ɵɵInjectableDeclaration<MXInputBaseValueComponent<any>>;
-}, typeof MXAppearanceComponent]>;
+}, typeof MXLookComponent]>;
 /**
  * The Textbox is a component which detects user interaction and triggers a corresponding event
  *
@@ -28,6 +28,6 @@ export declare class AXTextBoxComponent extends AXTextBoxComponent_base implemen
     protected _handleModelChange(value: string | null): void;
     get __hostClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXTextBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXTextBoxComponent, "ax-text-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "allowNull": { "alias": "allowNull"; "required": false; }; "type": { "alias": "type"; "required": false; }; "autoComplete": { "alias": "autoComplete"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "maskOptions": { "alias": "mask-options"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; }, ["_maskOptionsContent"], ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXTextBoxComponent, "ax-text-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "allowNull": { "alias": "allowNull"; "required": false; }; "type": { "alias": "type"; "required": false; }; "autoComplete": { "alias": "autoComplete"; "required": false; }; "look": { "alias": "look"; "required": false; }; "maskOptions": { "alias": "mask-options"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; }, ["_maskOptionsContent"], ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], false, never>;
 }
 export {};

package/toast/index.d.ts

@@ -1,5 +1,5 @@
-export * from './lib/toast.config';
 export * from './lib/toast.class';
 export * from './lib/toast.component';
+export * from './lib/toast.config';
 export * from './lib/toast.module';
 export * from './lib/toast.service';

package/toast/lib/toast.class.d.ts

@@ -1,4 +1,4 @@
-import { AXLocation, AXStyleColorType } from "@acorex/components/common";
+import { AXLocation, AXStyleColorType } from '@acorex/components/common';
 export interface AXToastDisplayConfig {
     icon?: string;
     title?: string;

package/toast/lib/toast.component.d.ts

@@ -1,6 +1,7 @@
 import { AXButtonItem } from '@acorex/components/button';
 import { AXComponentCloseEvent, MXBaseComponent } from '@acorex/components/common';
 import { DialogRef } from '@angular/cdk/dialog';
+import { OnInit } from '@angular/core';
 import { AXToastData } from './toast.class';
 import * as i0 from "@angular/core";
 /**
@@ -8,7 +9,7 @@ import * as i0 from "@angular/core";
  *
  * @category Components
  */
-export declare class AXToastComponent extends MXBaseComponent {
+export declare class AXToastComponent extends MXBaseComponent implements OnInit {
     config: AXToastData;
     private dialogRef;
     protected _toastWidth: number;

package/toast/lib/toast.config.d.ts

@@ -1,5 +1,5 @@
-import { InjectionToken } from '@angular/core';
 import { AXLocation } from '@acorex/components/common';
+import { InjectionToken } from '@angular/core';
 export interface AXToastConfig {
     gap: number;
     timeOut: number;