@acorex/components 5.0.53 → 5.0.56

package/fesm2015/acorex-components.mjs

@@ -1,6 +1,7 @@
-import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i0 from '@angular/core';
-import { Injectable, Inject, EventEmitter, Directive, Input, NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, HostListener, Output, ContentChildren, Optional, ContentChild, ViewChild, TemplateRef, ElementRef, ViewChildren } from '@angular/core';
+import { Injectable, Inject, EventEmitter, Directive, Input, NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, HostListener, HostBinding, Output, ContentChildren, Optional, ContentChild, ViewChild, TemplateRef, ElementRef, ViewChildren } from '@angular/core';
+import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import _ from 'lodash';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i1$3 from '@acorex/core';
@@ -9,6 +10,7 @@ import { Subscription, Subject, fromEvent, merge, asyncScheduler, BehaviorSubjec
 import { debounceTime, distinctUntilChanged, map, pairwise, filter, startWith, exhaustMap, observeOn, finalize, throttleTime } from 'rxjs/operators';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/cdk/portal';
@@ -25,7 +27,6 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import IMask from 'imask';
 import * as i5 from 'angular-imask';
 import { IMaskModule, IMaskDirective } from 'angular-imask';
-import { trigger, transition, style, animate } from '@angular/animations';
 
 var _AXBaseComponent_elementRef;
 class AXBaseComponent {
@@ -1223,885 +1224,1307 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }] });
 
-var _AXAlertComponent_visible;
-const AXBaseAlertMixin = _ColorLookComponentMixin(AXBaseComponent);
+class AXActionSheetComponent extends AXBaseComponent {
+    /**
+      *  @ignore
+      */
+    constructor(_elementRef, _cdr) {
+        super(_elementRef, _cdr);
+        this.caption = '';
+        this.closeOnBackdrop = true;
+        this.isOpen = false;
+    }
+    _handleBackdropClick() {
+        if (!this.closeOnBackdrop)
+            return;
+        this.close();
+    }
+    ngAfterViewInit() {
+    }
+    open() {
+        this.isOpen = true;
+    }
+    close() {
+        this.isOpen = false;
+    }
+    toggle() {
+        debugger;
+        this.isOpen = !this.isOpen;
+    }
+}
+AXActionSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXActionSheetComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXActionSheetComponent, selector: "ax-action-sheet", inputs: { caption: "caption", closeOnBackdrop: "closeOnBackdrop" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-action-sheet-backdrop\" [@backdrop]=\"isOpen ? 'show' : 'hide'\" (click)=\"_handleBackdropClick()\"></div>\r\n<div class=\"ax-action-sheet-container\" [@openClose]=\"isOpen ? 'open' : 'closed'\">\r\n    <div class=\"ax-bg-white ax-h-full dark:ax-bg-dark-700\">\r\n        <div class=\"ax-action-sheet-caption\" *ngIf=\"caption\">\r\n            {{caption}}\r\n        </div>\r\n        <ng-content select=\"ax-content\"></ng-content>\r\n        <div class=\"ax-action-sheet-items\">\r\n            <ng-content select=\"ax-action-sheet-item\"></ng-content>\r\n        </div>\r\n        \r\n    </div>\r\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+        trigger('backdrop', [
+            state('show', style({
+                opacity: 1,
+                visibility: 'visible'
+            })),
+            state('hide', style({
+                visibility: 'hidden',
+                opacity: 0
+            })),
+            transition('show <=> hide', [animate('0.2s')]),
+        ]),
+        trigger('openClose', [
+            state('open', style({
+                bottom: '0',
+                opacity: 1
+            })),
+            state('closed', style({
+                bottom: '-100%',
+                opacity: 0.5
+            })),
+            transition('open <=> closed', [animate('0.2s')])
+        ]),
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXActionSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-action-sheet', animations: [
+                        trigger('backdrop', [
+                            state('show', style({
+                                opacity: 1,
+                                visibility: 'visible'
+                            })),
+                            state('hide', style({
+                                visibility: 'hidden',
+                                opacity: 0
+                            })),
+                            transition('show <=> hide', [animate('0.2s')]),
+                        ]),
+                        trigger('openClose', [
+                            state('open', style({
+                                bottom: '0',
+                                opacity: 1
+                            })),
+                            state('closed', style({
+                                bottom: '-100%',
+                                opacity: 0.5
+                            })),
+                            transition('open <=> closed', [animate('0.2s')])
+                        ]),
+                    ], template: "<div class=\"ax-action-sheet-backdrop\" [@backdrop]=\"isOpen ? 'show' : 'hide'\" (click)=\"_handleBackdropClick()\"></div>\r\n<div class=\"ax-action-sheet-container\" [@openClose]=\"isOpen ? 'open' : 'closed'\">\r\n    <div class=\"ax-bg-white ax-h-full dark:ax-bg-dark-700\">\r\n        <div class=\"ax-action-sheet-caption\" *ngIf=\"caption\">\r\n            {{caption}}\r\n        </div>\r\n        <ng-content select=\"ax-content\"></ng-content>\r\n        <div class=\"ax-action-sheet-items\">\r\n            <ng-content select=\"ax-action-sheet-item\"></ng-content>\r\n        </div>\r\n        \r\n    </div>\r\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { caption: [{
+                type: Input
+            }], closeOnBackdrop: [{
+                type: Input
+            }] } });
+
 /**
- * Regular description
+ * The Button is a component which detects user interaction and triggers a corresponding event
  *
  * @category Components
  */
-class AXAlertComponent extends AXBaseAlertMixin {
+class AXButtonComponent extends AXBaseButtonMixin {
     /**
     *  @ignore
     */
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
-        this.showIcon = true;
-        _AXAlertComponent_visible.set(this, void 0);
-    }
-    _onOptionChanged(option) {
-        if (option.name == 'color') {
-            switch (this.color) {
-                case 'success':
-                    this.icon = 'ax-ic ax-ic-check-filled';
-                    break;
-                case 'warning':
-                    this.icon = 'ax-ic-warning-filled';
-                    break;
-                case 'danger':
-                    this.icon = 'ax-ic-error-filled';
-                    break;
-                default:
-                    this.icon = 'ax-ic ax-ic-info-filled';
-                    break;
-            }
-        }
-    }
-    /**
-   *  @ignore
-   */
-    get __hostClass() {
-        // return ` ax-alert ax-none ax-${this.color}-default ax-${this.look}-default`;
-        const _class = this.look ? `ax-${this.color}-${this.look}` : `ax-${this.color}-default`;
-        return `ax-alert ax-none ${_class}`;
-    }
-    /**
-    *  set the visibility of the Alert
-    */
-    get visible() {
-        return __classPrivateFieldGet(this, _AXAlertComponent_visible, "f");
-    }
-    set visible(v) {
-        if (__classPrivateFieldGet(this, _AXAlertComponent_visible, "f") != v) {
-            __classPrivateFieldSet(this, _AXAlertComponent_visible, v, "f");
-            const host = this._getHostElement();
-            if (v) {
-                host.classList.remove('ax-state-hidden');
-                host.classList.add('ax-state-visible');
-            }
-            else {
-                host.classList.add('ax-state-hidden');
-                host.classList.toggle('ax-state-visible');
-            }
-        }
     }
-    onInit() {
-        if (this.timeOut) {
-            setTimeout(() => {
-                this.dismiss();
-            }, this.timeOut);
+    onKeydownHandler(e) {
+        if (e.code === 'Enter') {
+            this._getHostElement().click();
         }
     }
-    onViewInit() {
-        if (this.visible == undefined) {
-            this.visible = true;
+    _emitOnClickEvent(e) {
+        if (this.disabled)
+            return;
+        if (this.toggleable) {
+            this.selected = !this.selected;
         }
+        super._emitOnClickEvent(e);
     }
-    /**
-    *  Remove the alert from the container
-    */
-    dismiss() {
-        const host = this._getHostElement();
-        this.visible = false;
-        const func = () => {
-            host.parentElement.removeChild(host);
-        };
-        host.addEventListener('transitionend', func);
+    _emitOnFocusEvent(e) {
+        super._emitOnFocusEvent(e);
     }
-    /**
-    *  Hide the alert
-    */
-    hide() {
-        this.visible = false;
+    _emitOnBlurEvent(e) {
+        super._emitOnBlurEvent(e);
     }
-    /**
-    *  Show the alert
-    */
-    show() {
-        this.visible = true;
+    get __hostClass() {
+        return Object.entries(this._classes).filter(c => c[1]).map(c => c[0]).join(' ');
     }
 }
-_AXAlertComponent_visible = new WeakMap();
-AXAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAlertComponent, selector: "ax-alert", inputs: { color: "color", look: "look", icon: "icon", showIcon: "showIcon", timeOut: "timeOut", visible: "visible" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-alert-icon\" *ngIf=\"icon && showIcon\">\r\n    <i class=\"{{icon}} fa-lg\"></i>\r\n</div>\r\n<div class=\"ax-alert-body\">\r\n    <ng-content select=\"ax-alert-title\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-content\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-footer\">\r\n    </ng-content>\r\n</div>\r\n<ng-content select=\"ax-alert-suffix\">\r\n</ng-content>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertComponent, decorators: [{
+AXButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXButtonComponent, selector: "ax-button", inputs: { disabled: "disabled", tabIndex: "tabIndex", size: "size", color: "color", look: "look", text: "text", submitBehavior: "submitBehavior", cancelBehavior: "cancelBehavior", toggleable: "toggleable", selected: "selected" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange" }, host: { attributes: { "role": "button" }, listeners: { "keyup": "onKeydownHandler($event)", "click": "_emitOnClickEvent($event)", "focus": "_emitOnFocusEvent($event)", "blur": "_emitOnBlurEvent($event)" }, properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<!-- <button [ngClass]=\"_classes\" class=\"{{cssClass}} ax-{{size}}\" [disabled]=\"disabled\" [tabindex]=\"tabIndex\" [attr.style]=\"cssStyle\" (click)=\"_emitOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n  <ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n  </ng-content>\r\n  <span *ngIf=\"text\">{{text}}</span>\r\n  <ng-content select=\"ax-suffix\">\r\n  </ng-content>\r\n  <ng-content select=\"ax-dropdown-panel\">\r\n  </ng-content>\r\n</button> -->\r\n<!-- <button [ngClass]=\"_classes\" class=\"{{cssClass}} ax-{{size}}\" [disabled]=\"disabled\" [tabindex]=\"tabIndex\" [attr.style]=\"cssStyle\" (click)=\"_emitOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\"> -->\r\n<ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n</ng-content>\r\n<span *ngIf=\"text\">{{text}}</span>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-dropdown-panel\">\r\n</ng-content>\r\n<!-- </button> -->", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-alert', changeDetection: ChangeDetectionStrategy.OnPush, inputs: [...COLOR_LOOK_INPUTS], encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-alert-icon\" *ngIf=\"icon && showIcon\">\r\n    <i class=\"{{icon}} fa-lg\"></i>\r\n</div>\r\n<div class=\"ax-alert-body\">\r\n    <ng-content select=\"ax-alert-title\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-content\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-footer\">\r\n    </ng-content>\r\n</div>\r\n<ng-content select=\"ax-alert-suffix\">\r\n</ng-content>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { icon: [{
-                type: Input
-            }], showIcon: [{
-                type: Input
+            args: [{ selector: 'ax-button', inputs: ['disabled', 'tabIndex', 'size', ...COLOR_LOOK_INPUTS, ...BUTTON_INPUTS], outputs: [...BUTTON_OUTPUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { role: 'button' }, template: "<!-- <button [ngClass]=\"_classes\" class=\"{{cssClass}} ax-{{size}}\" [disabled]=\"disabled\" [tabindex]=\"tabIndex\" [attr.style]=\"cssStyle\" (click)=\"_emitOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n  <ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n  </ng-content>\r\n  <span *ngIf=\"text\">{{text}}</span>\r\n  <ng-content select=\"ax-suffix\">\r\n  </ng-content>\r\n  <ng-content select=\"ax-dropdown-panel\">\r\n  </ng-content>\r\n</button> -->\r\n<!-- <button [ngClass]=\"_classes\" class=\"{{cssClass}} ax-{{size}}\" [disabled]=\"disabled\" [tabindex]=\"tabIndex\" [attr.style]=\"cssStyle\" (click)=\"_emitOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\"> -->\r\n<ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n</ng-content>\r\n<span *ngIf=\"text\">{{text}}</span>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-dropdown-panel\">\r\n</ng-content>\r\n<!-- </button> -->" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { onKeydownHandler: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }], _emitOnClickEvent: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], _emitOnFocusEvent: [{
+                type: HostListener,
+                args: ['focus', ['$event']]
+            }], _emitOnBlurEvent: [{
+                type: HostListener,
+                args: ['blur', ['$event']]
             }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
-            }], timeOut: [{
-                type: Input
-            }], visible: [{
-                type: Input
             }] } });
 
-class AXAlertTitleComponent {
-}
-AXAlertTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXAlertTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAlertTitleComponent, selector: "ax-alert-title", host: { classAttribute: "ax-alert-title" }, ngImport: i0, template: `
-        <ng-content>
-        </ng-content>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertTitleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-alert-title',
-                    template: `
-        <ng-content>
-        </ng-content>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-alert-title' }
-                }]
-        }] });
-
-class AXAlertButtonComponent extends AXBaseClickableMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-    _handleOnClick(e) {
-        this._emitOnClickEvent(e);
-    }
-    _handleOnFocus(e) {
-        this._emitOnFocusEvent(e);
+class AXActionSheetItemComponent extends AXBaseComponent {
+    /**
+      *  @ignore
+      */
+    constructor(_elementRef, _cdr) {
+        super(_elementRef, _cdr);
+        this.color = 'light';
+        this.onClick = new EventEmitter();
     }
-    _handleOnBlur(e) {
-        this._emitOnBlurEvent(e);
+    handleOnClick(e) {
+        this.onClick.emit(e);
     }
 }
-AXAlertButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXAlertButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAlertButtonComponent, selector: "ax-alert-button", inputs: { text: "text", icon: "icon" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange" }, host: { listeners: { "click": "_handleOnClick($event)", "focus": "_handleOnFocus($event)", "blur": "_handleOnBlur($event)" }, classAttribute: "ax-alert-button" }, usesInheritance: true, ngImport: i0, template: `
-       {{text}}
-       <ng-content select="ax-icon"></ng-content>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertButtonComponent, decorators: [{
+AXActionSheetItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXActionSheetItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXActionSheetItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXActionSheetItemComponent, selector: "ax-action-sheet-item", inputs: { text: "text", color: "color" }, outputs: { onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: `
+        <ax-button [color]="color" look="blank" [text]="text" (onClick)="handleOnClick($event)"></ax-button>
+    `, isInline: true, components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXActionSheetItemComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-alert-button',
+                    selector: 'ax-action-sheet-item',
                     template: `
-       {{text}}
-       <ng-content select="ax-icon"></ng-content>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    outputs: [...BUTTON_OUTPUT],
-                    host: { class: 'ax-alert-button' }
+        <ax-button [color]="color" look="blank" [text]="text" (onClick)="handleOnClick($event)"></ax-button>
+    `
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
                 type: Input
-            }], icon: [{
+            }], color: [{
                 type: Input
-            }], _handleOnClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], _handleOnFocus: [{
-                type: HostListener,
-                args: ['focus', ['$event']]
-            }], _handleOnBlur: [{
-                type: HostListener,
-                args: ['blur', ['$event']]
+            }], onClick: [{
+                type: Output
             }] } });
 
-class AXAlertContentComponent {
-}
-AXAlertContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXAlertContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAlertContentComponent, selector: "ax-alert-content", host: { classAttribute: "ax-alert-content" }, ngImport: i0, template: `<ng-content>
-        </ng-content>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-alert-content',
-                    template: `<ng-content>
-        </ng-content>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-alert-content' }
-                }]
-        }] });
-
-class AXAlertSuffixComponent {
-}
-AXAlertSuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXAlertSuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAlertSuffixComponent, selector: "ax-alert-suffix", host: { classAttribute: "ax-alert-suffix" }, ngImport: i0, template: `
-        <div class="ax-alert-buttons">
-            <ng-content select="ax-alert-button">
-            </ng-content>
-        </div>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertSuffixComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-alert-suffix',
-                    template: `
-        <div class="ax-alert-buttons">
-            <ng-content select="ax-alert-button">
-            </ng-content>
-        </div>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-alert-suffix' }
+class AXDrawerComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr, zone) {
+        super(elementRef, cdr);
+        this.elementRef = elementRef;
+        this.zone = zone;
+        this.onChanged = new EventEmitter();
+        this.mode = 'push';
+        this.location = 'start';
+        this._collapsed = false;
+    }
+    get collapsed() {
+        return this._collapsed;
+    }
+    set collapsed(v) {
+        if (v != this._collapsed) {
+            this._collapsed = v;
+            this._updateClass();
+            this._emitChange();
+        }
+    }
+    onInit() {
+        // this._getHostElement().classList.add(this.location == 'start' ? 'ax-drawer-start' : 'ax-drawer-end');
+        this._setLocation();
+        this._currentMode = this.mode;
+    }
+    _setLocation() {
+        const hostElementClassList = this._getHostElement().classList;
+        switch (this.location) {
+            case 'start':
+                hostElementClassList.add('ax-drawer-start');
+                break;
+            case 'end':
+                hostElementClassList.add('ax-drawer-end');
+                break;
+            case 'top':
+                hostElementClassList.add('ax-drawer-top');
+                break;
+            case 'bottom':
+                hostElementClassList.add('ax-drawer-bottom');
+                break;
+            default:
+                hostElementClassList.add('ax-drawer-start');
+                break;
+        }
+    }
+    _updateClass() {
+        this.zone.runOutsideAngular(() => {
+            const elm = this._getHostElement();
+            //           
+            this._currentMode == 'overlay' ? this._setOverlayMode() : this._setPushMode();
+            //
+            if (this.collapsed) {
+                elm.classList.remove('ax-expanded');
+                elm.classList.add('ax-collapsed');
+                if (this._currentMode == 'overlay') {
+                    this._removeBackdrop();
+                }
+            }
+            else {
+                elm.classList.add('ax-expanded');
+                elm.classList.remove('ax-collapsed');
+                if (this._currentMode == 'overlay') {
+                    this._addBackdrop();
+                }
+            }
+        });
+    }
+    onViewInit() {
+        this._detectSize();
+    }
+    toggle() {
+        this.collapsed = !this.collapsed;
+    }
+    close() {
+        this.collapsed = true;
+    }
+    open() {
+        this.collapsed = false;
+    }
+    _handleWindowsResize(e) {
+        this._detectSize();
+    }
+    _detectSize() {
+        //TODO detect break size
+        const bound = this._getHostElement().parentElement.getBoundingClientRect();
+        if (bound.width == 0) {
+            console.log('Drawer invalid size', bound);
+            setTimeout(() => {
+                this._detectSize();
+            }, 1);
+            return;
+        }
+        if (bound.width < 400) {
+            this._currentMode = 'overlay';
+            this.collapsed = true;
+        }
+        else {
+            this._currentMode = this.mode;
+        }
+        this._updateClass();
+        this._emitChange();
+    }
+    _emitChange() {
+        this.onChanged.emit({
+            component: this,
+            htmlElement: this.elementRef.nativeElement
+        });
+    }
+    _setOverlayMode() {
+        this._currentMode = 'overlay';
+        this._getHostElement().classList.remove('ax-drawer-push');
+        this._getHostElement().classList.add('ax-drawer-overlay');
+    }
+    _setPushMode() {
+        this._currentMode = 'push';
+        this._getHostElement().classList.remove('ax-drawer-overlay');
+        this._getHostElement().classList.add('ax-drawer-push');
+        this._removeBackdrop();
+    }
+    _addBackdrop() {
+        if (!this._backdrop) {
+            this._backdrop = document.createElement('div');
+            this._backdrop.classList.add('ax-drawer-backdrop');
+            this._getHostElement().parentElement.prepend(this._backdrop);
+            this._backdrop.addEventListener('click', this._handleBackfropClick.bind(this));
+        }
+    }
+    _removeBackdrop() {
+        if (this._backdrop) {
+            this._backdrop.removeEventListener('click', this._handleBackfropClick.bind(this));
+            this._getHostElement().parentElement.removeChild(this._backdrop);
+            this._backdrop = null;
+        }
+    }
+    _handleBackfropClick(e) {
+        this._removeBackdrop();
+        this.collapsed = true;
+    }
+}
+AXDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+AXDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDrawerComponent, selector: "ax-drawer", inputs: { mode: "mode", location: "location", collapsed: "collapsed" }, outputs: { onChanged: "onChanged" }, host: { listeners: { "window:resize": "_handleWindowsResize($event)" }, classAttribute: "ax-drawer ax-transition-all" }, usesInheritance: true, ngImport: i0, template: `
+        <ng-content>
+        </ng-content>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-drawer',
+                    template: `
+        <ng-content>
+        </ng-content>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'ax-drawer ax-transition-all' }
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { onChanged: [{
+                type: Output
+            }], mode: [{
+                type: Input
+            }], location: [{
+                type: Input
+            }], collapsed: [{
+                type: Input
+            }], _handleWindowsResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
 
-class AXAlertFooterComponent {
+class AXDrawerContainerComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr, zone) {
+        super(elementRef, cdr);
+        this.zone = zone;
+    }
+    onViewInit() {
+        this._updateWidth();
+        // add animation
+        // setTimeout(() => {
+        //     this._getHostElement().querySelectorAll('ax-drawer').forEach(c => {
+        //         c.classList.add('ax-animated');
+        //     });
+        // }, 100);
+        this.drawers.forEach(c => {
+            c.onChanged.subscribe(c => {
+                this._updateWidth();
+            });
+        });
+    }
+    _updateWidth() {
+        this.zone.runOutsideAngular(() => {
+            const container = this._getHostElement().closest('ax-drawer-container');
+            const parentWidth = this._getHostElement().getBoundingClientRect().width;
+            let w = 0;
+            this._getHostElement().querySelectorAll('ax-drawer').forEach(c => {
+                const elm = c;
+                const width = elm.getBoundingClientRect().width;
+                const height = elm.getBoundingClientRect().height;
+                const overflow = parentWidth < width;
+                const diff = width - parentWidth;
+                w += ['ax-expanded', 'ax-drawer-push'].every(c => elm.classList.contains(c)) ? width : 0;
+                elm.style.setProperty('--attr-width', `${width}px`);
+                elm.style.setProperty('--attr-height', `${height}px`);
+                //TODO check overflow
+                elm.style.setProperty('--attr-diff', `${overflow ? diff : 0}px`);
+            });
+            container.style.setProperty('--attr-content-width', `${parentWidth - w}px`);
+        });
+    }
 }
-AXAlertFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXAlertFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAlertFooterComponent, selector: "ax-alert-footer", host: { classAttribute: "ax-alert-footer" }, ngImport: i0, template: `
-        <div class="ax-alert-buttons">
-            <ng-content select="ax-alert-button">
-            </ng-content>
-        </div>
+AXDrawerContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerContainerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+AXDrawerContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDrawerContainerComponent, selector: "ax-drawer-container", inputs: { rtl: "rtl" }, host: { classAttribute: "ax-drawer-container" }, queries: [{ propertyName: "drawers", predicate: AXDrawerComponent }], usesInheritance: true, ngImport: i0, template: `
+        <ng-content select="ax-drawer[location='top']">
+        </ng-content>
+        <ng-content select="ax-drawer[location='start']">
+        </ng-content>
+        <ng-content select="ax-drawer-content">
+        </ng-content>
+        <ng-content select="ax-drawer[location='end']">
+        </ng-content>
+        <ng-content select="ax-drawer[location='bottom']">
+        </ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-drawer-container',
+                    template: `
+        <ng-content select="ax-drawer[location='top']">
+        </ng-content>
+        <ng-content select="ax-drawer[location='start']">
+        </ng-content>
+        <ng-content select="ax-drawer-content">
+        </ng-content>
+        <ng-content select="ax-drawer[location='end']">
+        </ng-content>
+        <ng-content select="ax-drawer[location='bottom']">
+        </ng-content>
+    `,
+                    inputs: ['rtl'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'ax-drawer-container' }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { drawers: [{
+                type: ContentChildren,
+                args: [AXDrawerComponent]
+            }] } });
+
+class AXDrawerContentComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+    }
+}
+AXDrawerContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDrawerContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDrawerContentComponent, selector: "ax-drawer-content", host: { classAttribute: "ax-drawer-content" }, usesInheritance: true, ngImport: i0, template: `
+        <ng-content>
+        </ng-content>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-drawer-content',
+                    template: `
+        <ng-content>
+        </ng-content>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'ax-drawer-content' }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+
+const COMPONENT$o = [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent];
+const MODULES$o = [CommonModule];
+class AXDrawerModule {
+}
+AXDrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerModule, declarations: [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent], imports: [CommonModule], exports: [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent] });
+AXDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerModule, providers: [], imports: [[...MODULES$o]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT$o],
+                    imports: [...MODULES$o],
+                    exports: [...COMPONENT$o],
+                    providers: [],
+                }]
+        }] });
+
+class AXButtonGroupComponent extends AXInteractiveComponenetMixin {
+    constructor(elementRef, zone, cdr) {
+        super(elementRef, cdr);
+        this.zone = zone;
+        this.selectionChange = new EventEmitter();
+        this.colorChange = new EventEmitter();
+        this._color = 'primary';
+        this.lookChange = new EventEmitter();
+        this._look = null;
+        this.onItemClick = new EventEmitter();
+        this.onValueChanged = new EventEmitter();
+    }
+    get selection() {
+        return this._selection;
+    }
+    set selection(value) {
+        value = this._onOptionChanging({ name: 'selection', value: value });
+        const oldValue = this.selection;
+        if (value != oldValue) {
+            this._selection = value;
+            this.selectionChange.emit(value);
+            this.onOptionChanged({ name: 'selection', oldValue, newValue: value });
+        }
+    }
+    /**
+    *  Predefined color schemes
+    */
+    get color() {
+        return this._color;
+    }
+    set color(value) {
+        value = this._onOptionChanging({ name: 'color', value: value });
+        const oldValue = this.color;
+        if (value != oldValue) {
+            this._color = value;
+            this.colorChange.emit(value);
+            this.onOptionChanged({ name: 'value', oldValue, newValue: value });
+        }
+    }
+    /**
+    *  Predefined look schemes
+    */
+    get look() {
+        return this._look;
+    }
+    set look(value) {
+        value = this._onOptionChanging({ name: 'look', value: value });
+        const oldValue = this.look;
+        if (value != oldValue) {
+            this._look = value;
+            this.lookChange.emit(value);
+            this.onOptionChanged({ name: 'look', oldValue, newValue: value });
+        }
+    }
+    ngAfterContentInit() {
+        this._bindEvents();
+        this._bindProps();
+    }
+    _bindEvents() {
+        (this._contentButtons || []).forEach(b => {
+            b.onClick.subscribe(c => {
+                this._handleClickEvent(c, b);
+            });
+        });
+    }
+    _bindProps() {
+        (this._contentButtons || []).forEach(b => {
+            b.look = this.look;
+            b.color = this.color;
+            b.disabled = this.disabled;
+            b.toggleable = false;
+        });
+    }
+    onOptionChanged(options) {
+        this._bindProps();
+    }
+    _handleClickEvent(e, button) {
+        if (this.selection == 'multiple') {
+            button.selected = !button.selected;
+        }
+        else if (this.selection == 'single') {
+            this._contentButtons.forEach(c => {
+                c.selected = false;
+            });
+            button.selected = true;
+        }
+        else {
+            button.selected = false;
+        }
+        this.onItemClick.emit({
+            component: this,
+            htmlElement: e.htmlElement,
+            item: button
+        });
+    }
+}
+AXButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXButtonGroupComponent, selector: "ax-button-group", inputs: { cssClass: "cssClass", size: "size", cssStyle: "cssStyle", rtl: "rtl", disabled: "disabled", selection: "selection", color: "color", look: "look" }, outputs: { selectionChange: "selectionChange", colorChange: "colorChange", lookChange: "lookChange", onItemClick: "onItemClick" }, host: { attributes: { "role": "group" }, classAttribute: "ax-button-group" }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-button\">\r\n</ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-button-group', inputs: ['cssClass', 'size', 'cssStyle', 'rtl', 'disabled'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-button-group', role: 'group' }, template: "<ng-content select=\"ax-button\">\r\n</ng-content>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { selectionChange: [{
+                type: Output
+            }], selection: [{
+                type: Input
+            }], colorChange: [{
+                type: Output
+            }], color: [{
+                type: Input
+            }], lookChange: [{
+                type: Output
+            }], look: [{
+                type: Input
+            }], onItemClick: [{
+                type: Output
+            }], _contentButtons: [{
+                type: ContentChildren,
+                args: [AXButtonComponent, { descendants: true }]
+            }] } });
+
+const AXBaseItemButtonMixin = _InteractiveComponenetMixin(_ClickableComponenetMixin(AXBaseComponent));
+class AXButtonItemComponent extends AXBaseItemButtonMixin {
+    /**
+    *  @ignore
+    */
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.text = null;
+        this.tooltip = null;
+        this.selected = false;
+        this.seperated = false;
+        this.color = 'light';
+    }
+    __hostClick(e) {
+        this._emitOnClickEvent(e);
+    }
+    get __hostClass() {
+        const cssClasses = {
+            'ax-button-icon': !this.text,
+            'ax-state-disabled': this.disabled,
+            'ax-state-selected': this.selected,
+        };
+        cssClasses[`ax-${this.color || 'primary'}-default`] = true;
+        return Object.entries(cssClasses).filter(c => c[1]).map(c => c[0]).join(' ');
+    }
+}
+AXButtonItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXButtonItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXButtonItemComponent, selector: "ax-button-item", inputs: { text: "text", tooltip: "tooltip", selected: "selected", seperated: "seperated", name: "name", data: "data", color: "color" }, host: { listeners: { "click": "__hostClick($event)" }, properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: `
+        <ng-content select="ax-prefix">
+        </ng-content>
+        <ng-content select="ax-icon">
+        </ng-content>
+        <span *ngIf="text">{{text}}</span>
+        <ng-content select="ax-suffix">
+        </ng-content>
+    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonItemComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-alert-footer',
+                    selector: 'ax-button-item',
                     template: `
-        <div class="ax-alert-buttons">
-            <ng-content select="ax-alert-button">
-            </ng-content>
-        </div>
+        <ng-content select="ax-prefix">
+        </ng-content>
+        <ng-content select="ax-icon">
+        </ng-content>
+        <span *ngIf="text">{{text}}</span>
+        <ng-content select="ax-suffix">
+        </ng-content>
     `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-alert-footer' }
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], seperated: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], __hostClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
-class AXIconComponent extends AXSizableComponentMixin {
+class AXDecoratorContentComponent extends AXBaseComponentMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
     }
-    get __iconClass() {
-        return `ax-ic ${this.icon}`;
-    }
 }
-AXIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXIconComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXIconComponent, selector: "ax-icon", inputs: { icon: "icon" }, host: { properties: { "class": "this.__iconClass" } }, usesInheritance: true, ngImport: i0, template: '<ng-content select="i,svg,img"></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXIconComponent, decorators: [{
+AXDecoratorContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDecoratorContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDecoratorContentComponent, selector: "ax-content", usesInheritance: true, ngImport: i0, template: `
+        <ng-content>
+        </ng-content>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorContentComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-icon',
-                    template: '<ng-content select="i,svg,img"></ng-content>',
+                    selector: 'ax-content',
+                    template: `
+        <ng-content>
+        </ng-content>
+    `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { icon: [{
-                type: Input
-            }], __iconClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-const COMPONENT$o = [AXIconComponent];
-const MODULES$o = [CommonModule];
-class AXIconModule {
+class AXDecoratorAddOnComponent extends AXBaseComponentMixin {
+    constructor(_elementRef, _cdr) {
+        super(_elementRef, _cdr);
+    }
 }
-AXIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXIconModule, declarations: [AXIconComponent], imports: [CommonModule], exports: [AXIconComponent] });
-AXIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXIconModule, providers: [], imports: [[...MODULES$o]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXIconModule, decorators: [{
-            type: NgModule,
+AXDecoratorAddOnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorAddOnComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDecoratorAddOnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDecoratorAddOnComponent, selector: "ax-addon", usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorAddOnComponent, decorators: [{
+            type: Component,
             args: [{
-                    declarations: [...COMPONENT$o],
-                    imports: [...MODULES$o],
-                    exports: [...COMPONENT$o],
-                    providers: [],
+                    selector: 'ax-addon',
+                    template: `<ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-const COMPONENT$n = [
-    AXAlertComponent,
-    AXAlertContentComponent,
-    AXAlertTitleComponent,
-    AXAlertButtonComponent,
-    AXAlertFooterComponent,
-    AXAlertSuffixComponent
-];
-const MODULES$n = [CommonModule, AXIconModule];
-class AXAlertModule {
+class AXDecoratorHeaderComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+    }
 }
-AXAlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertModule, declarations: [AXAlertComponent,
-        AXAlertContentComponent,
-        AXAlertTitleComponent,
-        AXAlertButtonComponent,
-        AXAlertFooterComponent,
-        AXAlertSuffixComponent], imports: [CommonModule, AXIconModule], exports: [AXAlertComponent,
-        AXAlertContentComponent,
-        AXAlertTitleComponent,
-        AXAlertButtonComponent,
-        AXAlertFooterComponent,
-        AXAlertSuffixComponent] });
-AXAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertModule, providers: [], imports: [[...MODULES$n]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertModule, decorators: [{
-            type: NgModule,
+AXDecoratorHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorHeaderComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDecoratorHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDecoratorHeaderComponent, selector: "ax-header", usesInheritance: true, ngImport: i0, template: `
+        <ng-content>
+        </ng-content>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorHeaderComponent, decorators: [{
+            type: Component,
             args: [{
-                    declarations: [...COMPONENT$n],
-                    imports: [...MODULES$n],
-                    exports: [...COMPONENT$n],
-                    providers: [],
+                    selector: 'ax-header',
+                    template: `
+        <ng-content>
+        </ng-content>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-class AXAvatarGroup {
-    constructor() { }
-    ngOnInit() { }
+class AXDecoratorPrefixComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+    }
 }
-AXAvatarGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXAvatarGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAvatarGroup, selector: "ax-avatar-group", host: { classAttribute: "ax-avatar-group" }, ngImport: i0, template: `<ng-content select='ax-avatar'></ng-content>`, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarGroup, decorators: [{
+AXDecoratorPrefixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorPrefixComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDecoratorPrefixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDecoratorPrefixComponent, selector: "ax-prefix", usesInheritance: true, ngImport: i0, template: `
+        <ng-content select="ax-button,ax-loading,ax-icon,ax-content,ax-badge,ax-addon">
+        </ng-content>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorPrefixComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-avatar-group',
-                    template: `<ng-content select='ax-avatar'></ng-content>`,
-                    host: { class: 'ax-avatar-group' }
+                    selector: 'ax-prefix',
+                    template: `
+        <ng-content select="ax-button,ax-loading,ax-icon,ax-content,ax-badge,ax-addon">
+        </ng-content>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-/**
- * The Button is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-class AXAvatarComponent extends AXAvatarMixin {
-    /**
-    *  @ignore
-    */
+class AXDecoratorSuffixComponent extends AXBaseComponentMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
-        this.type = 'default';
-    }
-    get __hostClass() {
-        return `ax-${this.color}-default`;
     }
 }
-AXAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAvatarComponent, selector: "ax-avatar", inputs: { color: "color", look: "look", text: "text", icon: "icon", src: "src", class: "class", type: "type" }, host: { properties: { "class": "this.__hostClass" }, classAttribute: "ax-avatar" }, usesInheritance: true, ngImport: i0, template: "\r\n<div class=\"ax-avatar-container\" [ngSwitch]=\"type\">\r\n    <ng-content select=\"ax-badge\"></ng-content>\r\n    <div class=\"ax-text-avatar {{class}}\" *ngSwitchCase=\"'text'\">\r\n        {{text}}\r\n    </div>\r\n    <div class=\"ax-icon-avatar {{class}}\" *ngSwitchCase=\"'icon'\">\r\n        <ng-content select=\"ax-icon\"></ng-content>\r\n    </div>\r\n    <div class=\"ax-image-avatar {{class}}\" *ngSwitchCase=\"'image'\">\r\n        <img [src]=\"src\" />\r\n    </div>\r\n    <div class=\"ax-default-avatar {{class}}\" *ngSwitchCase=\"'default'\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 512 512\">\r\n            <g style=\"isolation:isolate\">\r\n                <g id=\"Layer_2\" data-name=\"Layer 2\">\r\n                    <g id=\"Layer_1-2\" data-name=\"Layer 1\">\r\n                        <rect width=\"512\" height=\"512\" />\r\n                        <path\r\n                            d=\"M419.16,511.94s-2.85-154-142.28-176.19a139.93,139.93,0,0,0-22-1.67h0a55.8,55.8,0,0,0-5.93.29C99.25,350.35,96.26,511.94,96.26,511.94\"\r\n                            style=\"fill:#fff;opacity:0.7\" />\r\n                        <path\r\n                            d=\"M256,355.18c-17.29,0-32.22-4.63-46.38-12.41-3.86,1.31-8.15,2.93-11.75,4.46A96.48,96.48,0,0,0,256,366.62a100.29,100.29,0,0,0,60.07-20c-3.6-1.49-6.41-2.55-10.27-3.83C291.48,350.79,273.58,355.18,256,355.18Z\"\r\n                            style=\"opacity:0.05\" />\r\n                        <circle cx=\"257.71\" cy=\"255.94\" r=\"99.24\" style=\"fill:#fff\" />\r\n                    </g>\r\n                </g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n</div>", directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarComponent, decorators: [{
+AXDecoratorSuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorSuffixComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDecoratorSuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDecoratorSuffixComponent, selector: "ax-suffix", usesInheritance: true, ngImport: i0, template: `
+        <ng-content select="ax-button,ax-loading,ax-icon,ax-content,ax-badge,ax-addon">
+        </ng-content>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorSuffixComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-avatar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: [...COLOR_LOOK_INPUTS], host: { class: 'ax-avatar' }, template: "\r\n<div class=\"ax-avatar-container\" [ngSwitch]=\"type\">\r\n    <ng-content select=\"ax-badge\"></ng-content>\r\n    <div class=\"ax-text-avatar {{class}}\" *ngSwitchCase=\"'text'\">\r\n        {{text}}\r\n    </div>\r\n    <div class=\"ax-icon-avatar {{class}}\" *ngSwitchCase=\"'icon'\">\r\n        <ng-content select=\"ax-icon\"></ng-content>\r\n    </div>\r\n    <div class=\"ax-image-avatar {{class}}\" *ngSwitchCase=\"'image'\">\r\n        <img [src]=\"src\" />\r\n    </div>\r\n    <div class=\"ax-default-avatar {{class}}\" *ngSwitchCase=\"'default'\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 512 512\">\r\n            <g style=\"isolation:isolate\">\r\n                <g id=\"Layer_2\" data-name=\"Layer 2\">\r\n                    <g id=\"Layer_1-2\" data-name=\"Layer 1\">\r\n                        <rect width=\"512\" height=\"512\" />\r\n                        <path\r\n                            d=\"M419.16,511.94s-2.85-154-142.28-176.19a139.93,139.93,0,0,0-22-1.67h0a55.8,55.8,0,0,0-5.93.29C99.25,350.35,96.26,511.94,96.26,511.94\"\r\n                            style=\"fill:#fff;opacity:0.7\" />\r\n                        <path\r\n                            d=\"M256,355.18c-17.29,0-32.22-4.63-46.38-12.41-3.86,1.31-8.15,2.93-11.75,4.46A96.48,96.48,0,0,0,256,366.62a100.29,100.29,0,0,0,60.07-20c-3.6-1.49-6.41-2.55-10.27-3.83C291.48,350.79,273.58,355.18,256,355.18Z\"\r\n                            style=\"opacity:0.05\" />\r\n                        <circle cx=\"257.71\" cy=\"255.94\" r=\"99.24\" style=\"fill:#fff\" />\r\n                    </g>\r\n                </g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], src: [{
-                type: Input
-            }], class: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], __hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+            args: [{
+                    selector: 'ax-suffix',
+                    template: `
+        <ng-content select="ax-button,ax-loading,ax-icon,ax-content,ax-badge,ax-addon">
+        </ng-content>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-const COMPONENT$m = [AXAvatarComponent, AXAvatarGroup];
-const MODULES$m = [CommonModule];
-class AXAvatarModule {
+const COMPONENT$n = [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorAddOnComponent];
+const MODULES$n = [CommonModule];
+class AXEditorDecoratorModule {
 }
-AXAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarModule, declarations: [AXAvatarComponent, AXAvatarGroup], imports: [CommonModule], exports: [AXAvatarComponent, AXAvatarGroup] });
-AXAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarModule, providers: [], imports: [[...MODULES$m]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarModule, decorators: [{
+AXEditorDecoratorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXEditorDecoratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXEditorDecoratorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXEditorDecoratorModule, declarations: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorAddOnComponent], imports: [CommonModule], exports: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorAddOnComponent] });
+AXEditorDecoratorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXEditorDecoratorModule, providers: [], imports: [[...MODULES$n]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXEditorDecoratorModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$m],
-                    imports: [...MODULES$m],
-                    exports: [...COMPONENT$m],
+                    declarations: [...COMPONENT$n],
+                    imports: [...MODULES$n],
+                    exports: [...COMPONENT$n],
                     providers: [],
                 }]
         }] });
 
-const AXBaseBadgeMixin = _ColorLookComponentMixin(AXBaseComponent);
-class AXBadgeComponent extends AXBaseBadgeMixin {
+class AXIconComponent extends AXSizableComponentMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
-        this.text = '';
-        //TODO: ax-badge
     }
-    get __hostClass() {
-        const _class = this.look ? `ax-${this.color}-${this.look}` : `ax-${this.color}-default`;
-        return ['ax-badge', _class, !this.text ? 'ax-badge-icon' : ''].join(' ');
+    get __iconClass() {
+        return `ax-ic ${this.icon}`;
     }
 }
-AXBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBadgeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXBadgeComponent, selector: "ax-badge", inputs: { color: "color", look: "look", text: "text" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<span class=\"ax-font-medium ax-truncate\">{{text}}</span>\r\n<ng-content select=\"ax-suffix\"></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBadgeComponent, decorators: [{
+AXIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXIconComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXIconComponent, selector: "ax-icon", inputs: { icon: "icon" }, host: { properties: { "class": "this.__iconClass" } }, usesInheritance: true, ngImport: i0, template: '<ng-content select="i,svg,img"></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-badge', changeDetection: ChangeDetectionStrategy.OnPush, inputs: [...COLOR_LOOK_INPUTS], encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<span class=\"ax-font-medium ax-truncate\">{{text}}</span>\r\n<ng-content select=\"ax-suffix\"></ng-content>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
+            args: [{
+                    selector: 'ax-icon',
+                    template: '<ng-content select="i,svg,img"></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { icon: [{
                 type: Input
-            }], __hostClass: [{
+            }], __iconClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-const COMPONENT$l = [AXBadgeComponent];
-const MODULES$l = [CommonModule];
-class AXBadgeModule {
+const COMPONENT$m = [AXIconComponent];
+const MODULES$m = [CommonModule];
+class AXIconModule {
 }
-AXBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBadgeModule, declarations: [AXBadgeComponent], imports: [CommonModule], exports: [AXBadgeComponent] });
-AXBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBadgeModule, providers: [], imports: [[...MODULES$l]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBadgeModule, decorators: [{
+AXIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXIconModule, declarations: [AXIconComponent], imports: [CommonModule], exports: [AXIconComponent] });
+AXIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXIconModule, providers: [], imports: [[...MODULES$m]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXIconModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$l],
-                    imports: [...MODULES$l],
-                    exports: [...COMPONENT$l],
+                    declarations: [...COMPONENT$m],
+                    imports: [...MODULES$m],
+                    exports: [...COMPONENT$m],
                     providers: [],
                 }]
         }] });
 
-class AXBreadCrumbsComponent extends AXBaseComponent {
-    constructor() {
-        super();
-    }
-}
-AXBreadCrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadCrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXBreadCrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXBreadCrumbsComponent, selector: "ax-breadcrumbs", host: { classAttribute: "ax-breadcrumbs" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-breadcrumbs-item\"></ng-content>" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadCrumbsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-breadcrumbs', host: { class: 'ax-breadcrumbs' }, template: "<ng-content select=\"ax-breadcrumbs-item\"></ng-content>" }]
-        }], ctorParameters: function () { return []; } });
-
-class AXBreadCrumbsItemComponent extends AXBaseComponent {
-    constructor() {
-        super();
-    }
+const COMPONENT$l = [
+    AXButtonComponent,
+    AXButtonItemComponent,
+    AXButtonGroupComponent,
+];
+const MODULES$l = [CommonModule, AXIconModule, AXEditorDecoratorModule];
+class AXButtonModule {
 }
-AXBreadCrumbsItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadCrumbsItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXBreadCrumbsItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: { text: "text" }, host: { classAttribute: "ax-breadcrumbs-item" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n</ng-content>\r\n<div>{{text}}</div>\r\n<ng-content select=\"ax-suffix,ax-loading,ax-icon\">\r\n</ng-content>" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadCrumbsItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-breadcrumbs-item', host: { class: 'ax-breadcrumbs-item' }, template: "<ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n</ng-content>\r\n<div>{{text}}</div>\r\n<ng-content select=\"ax-suffix,ax-loading,ax-icon\">\r\n</ng-content>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { text: [{
-                type: Input
-            }] } });
+AXButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonModule, declarations: [AXButtonComponent,
+        AXButtonItemComponent,
+        AXButtonGroupComponent], imports: [CommonModule, AXIconModule, AXEditorDecoratorModule], exports: [AXButtonComponent,
+        AXButtonItemComponent,
+        AXButtonGroupComponent] });
+AXButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonModule, providers: [], imports: [[MODULES$l]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [MODULES$l],
+                    exports: [COMPONENT$l],
+                    declarations: [COMPONENT$l],
+                    providers: [],
+                }]
+        }] });
 
-class AXBreadcrumbsModule {
+class AXActionSheetModule {
 }
-AXBreadcrumbsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXBreadcrumbsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadcrumbsModule, declarations: [AXBreadCrumbsComponent, AXBreadCrumbsItemComponent], imports: [CommonModule], exports: [AXBreadCrumbsComponent, AXBreadCrumbsItemComponent] });
-AXBreadcrumbsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadcrumbsModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadcrumbsModule, decorators: [{
+AXActionSheetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXActionSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXActionSheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXActionSheetModule, declarations: [AXActionSheetComponent, AXActionSheetItemComponent], imports: [CommonModule, AXDrawerModule, AXButtonModule, BrowserAnimationsModule], exports: [AXActionSheetComponent, AXActionSheetItemComponent] });
+AXActionSheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXActionSheetModule, providers: [], imports: [[CommonModule, AXDrawerModule, AXButtonModule, BrowserAnimationsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXActionSheetModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [AXBreadCrumbsComponent, AXBreadCrumbsItemComponent],
-                    imports: [CommonModule],
-                    exports: [AXBreadCrumbsComponent, AXBreadCrumbsItemComponent],
+                    declarations: [AXActionSheetComponent, AXActionSheetItemComponent],
+                    imports: [CommonModule, AXDrawerModule, AXButtonModule, BrowserAnimationsModule],
+                    exports: [AXActionSheetComponent, AXActionSheetItemComponent],
                     providers: [],
                 }]
         }] });
 
+var _AXAlertComponent_visible;
+const AXBaseAlertMixin = _ColorLookComponentMixin(AXBaseComponent);
 /**
- * The Button is a component which detects user interaction and triggers a corresponding event
+ * Regular description
  *
  * @category Components
  */
-class AXButtonComponent extends AXBaseButtonMixin {
+class AXAlertComponent extends AXBaseAlertMixin {
     /**
     *  @ignore
     */
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
+        this.showIcon = true;
+        _AXAlertComponent_visible.set(this, void 0);
     }
-    onKeydownHandler(e) {
-        if (e.code === 'Enter') {
-            this._getHostElement().click();
-        }
-    }
-    _emitOnClickEvent(e) {
-        if (this.disabled)
-            return;
-        if (this.toggleable) {
-            this.selected = !this.selected;
+    _onOptionChanged(option) {
+        if (option.name == 'color') {
+            switch (this.color) {
+                case 'success':
+                    this.icon = 'ax-ic ax-ic-check-filled';
+                    break;
+                case 'warning':
+                    this.icon = 'ax-ic-warning-filled';
+                    break;
+                case 'danger':
+                    this.icon = 'ax-ic-error-filled';
+                    break;
+                default:
+                    this.icon = 'ax-ic ax-ic-info-filled';
+                    break;
+            }
         }
-        super._emitOnClickEvent(e);
-    }
-    _emitOnFocusEvent(e) {
-        super._emitOnFocusEvent(e);
-    }
-    _emitOnBlurEvent(e) {
-        super._emitOnBlurEvent(e);
     }
+    /**
+   *  @ignore
+   */
     get __hostClass() {
-        return Object.entries(this._classes).filter(c => c[1]).map(c => c[0]).join(' ');
-    }
-}
-AXButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXButtonComponent, selector: "ax-button", inputs: { disabled: "disabled", tabIndex: "tabIndex", size: "size", color: "color", look: "look", text: "text", submitBehavior: "submitBehavior", cancelBehavior: "cancelBehavior", toggleable: "toggleable", selected: "selected" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange" }, host: { attributes: { "role": "button" }, listeners: { "keyup": "onKeydownHandler($event)", "click": "_emitOnClickEvent($event)", "focus": "_emitOnFocusEvent($event)", "blur": "_emitOnBlurEvent($event)" }, properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<!-- <button [ngClass]=\"_classes\" class=\"{{cssClass}} ax-{{size}}\" [disabled]=\"disabled\" [tabindex]=\"tabIndex\" [attr.style]=\"cssStyle\" (click)=\"_emitOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n  <ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n  </ng-content>\r\n  <span *ngIf=\"text\">{{text}}</span>\r\n  <ng-content select=\"ax-suffix\">\r\n  </ng-content>\r\n  <ng-content select=\"ax-dropdown-panel\">\r\n  </ng-content>\r\n</button> -->\r\n<!-- <button [ngClass]=\"_classes\" class=\"{{cssClass}} ax-{{size}}\" [disabled]=\"disabled\" [tabindex]=\"tabIndex\" [attr.style]=\"cssStyle\" (click)=\"_emitOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\"> -->\r\n<ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n</ng-content>\r\n<span *ngIf=\"text\">{{text}}</span>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-dropdown-panel\">\r\n</ng-content>\r\n<!-- </button> -->", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-button', inputs: ['disabled', 'tabIndex', 'size', ...COLOR_LOOK_INPUTS, ...BUTTON_INPUTS], outputs: [...BUTTON_OUTPUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { role: 'button' }, template: "<!-- <button [ngClass]=\"_classes\" class=\"{{cssClass}} ax-{{size}}\" [disabled]=\"disabled\" [tabindex]=\"tabIndex\" [attr.style]=\"cssStyle\" (click)=\"_emitOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n  <ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n  </ng-content>\r\n  <span *ngIf=\"text\">{{text}}</span>\r\n  <ng-content select=\"ax-suffix\">\r\n  </ng-content>\r\n  <ng-content select=\"ax-dropdown-panel\">\r\n  </ng-content>\r\n</button> -->\r\n<!-- <button [ngClass]=\"_classes\" class=\"{{cssClass}} ax-{{size}}\" [disabled]=\"disabled\" [tabindex]=\"tabIndex\" [attr.style]=\"cssStyle\" (click)=\"_emitOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\"> -->\r\n<ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n</ng-content>\r\n<span *ngIf=\"text\">{{text}}</span>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-dropdown-panel\">\r\n</ng-content>\r\n<!-- </button> -->" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { onKeydownHandler: [{
-                type: HostListener,
-                args: ['keyup', ['$event']]
-            }], _emitOnClickEvent: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], _emitOnFocusEvent: [{
-                type: HostListener,
-                args: ['focus', ['$event']]
-            }], _emitOnBlurEvent: [{
-                type: HostListener,
-                args: ['blur', ['$event']]
-            }], __hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class AXButtonGroupComponent extends AXInteractiveComponenetMixin {
-    constructor(elementRef, zone, cdr) {
-        super(elementRef, cdr);
-        this.zone = zone;
-        this.selectionChange = new EventEmitter();
-        this.colorChange = new EventEmitter();
-        this._color = 'primary';
-        this.lookChange = new EventEmitter();
-        this._look = null;
-        this.onItemClick = new EventEmitter();
-        this.onValueChanged = new EventEmitter();
-    }
-    get selection() {
-        return this._selection;
-    }
-    set selection(value) {
-        value = this._onOptionChanging({ name: 'selection', value: value });
-        const oldValue = this.selection;
-        if (value != oldValue) {
-            this._selection = value;
-            this.selectionChange.emit(value);
-            this.onOptionChanged({ name: 'selection', oldValue, newValue: value });
-        }
+        // return ` ax-alert ax-none ax-${this.color}-default ax-${this.look}-default`;
+        const _class = this.look ? `ax-${this.color}-${this.look}` : `ax-${this.color}-default`;
+        return `ax-alert ax-none ${_class}`;
     }
     /**
-    *  Predefined color schemes
+    *  set the visibility of the Alert
     */
-    get color() {
-        return this._color;
+    get visible() {
+        return __classPrivateFieldGet(this, _AXAlertComponent_visible, "f");
     }
-    set color(value) {
-        value = this._onOptionChanging({ name: 'color', value: value });
-        const oldValue = this.color;
-        if (value != oldValue) {
-            this._color = value;
-            this.colorChange.emit(value);
-            this.onOptionChanged({ name: 'value', oldValue, newValue: value });
+    set visible(v) {
+        if (__classPrivateFieldGet(this, _AXAlertComponent_visible, "f") != v) {
+            __classPrivateFieldSet(this, _AXAlertComponent_visible, v, "f");
+            const host = this._getHostElement();
+            if (v) {
+                host.classList.remove('ax-state-hidden');
+                host.classList.add('ax-state-visible');
+            }
+            else {
+                host.classList.add('ax-state-hidden');
+                host.classList.toggle('ax-state-visible');
+            }
         }
     }
-    /**
-    *  Predefined look schemes
-    */
-    get look() {
-        return this._look;
-    }
-    set look(value) {
-        value = this._onOptionChanging({ name: 'look', value: value });
-        const oldValue = this.look;
-        if (value != oldValue) {
-            this._look = value;
-            this.lookChange.emit(value);
-            this.onOptionChanged({ name: 'look', oldValue, newValue: value });
+    onInit() {
+        if (this.timeOut) {
+            setTimeout(() => {
+                this.dismiss();
+            }, this.timeOut);
         }
     }
-    ngAfterContentInit() {
-        this._bindEvents();
-        this._bindProps();
-    }
-    _bindEvents() {
-        (this._contentButtons || []).forEach(b => {
-            b.onClick.subscribe(c => {
-                this._handleClickEvent(c, b);
-            });
-        });
-    }
-    _bindProps() {
-        (this._contentButtons || []).forEach(b => {
-            b.look = this.look;
-            b.color = this.color;
-            b.disabled = this.disabled;
-            b.toggleable = false;
-        });
+    onViewInit() {
+        if (this.visible == undefined) {
+            this.visible = true;
+        }
     }
-    onOptionChanged(options) {
-        this._bindProps();
+    /**
+    *  Remove the alert from the container
+    */
+    dismiss() {
+        const host = this._getHostElement();
+        this.visible = false;
+        const func = () => {
+            host.parentElement.removeChild(host);
+        };
+        host.addEventListener('transitionend', func);
     }
-    _handleClickEvent(e, button) {
-        if (this.selection == 'multiple') {
-            button.selected = !button.selected;
-        }
-        else if (this.selection == 'single') {
-            this._contentButtons.forEach(c => {
-                c.selected = false;
-            });
-            button.selected = true;
-        }
-        else {
-            button.selected = false;
-        }
-        this.onItemClick.emit({
-            component: this,
-            htmlElement: e.htmlElement,
-            item: button
-        });
+    /**
+    *  Hide the alert
+    */
+    hide() {
+        this.visible = false;
+    }
+    /**
+    *  Show the alert
+    */
+    show() {
+        this.visible = true;
     }
 }
-AXButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXButtonGroupComponent, selector: "ax-button-group", inputs: { cssClass: "cssClass", size: "size", cssStyle: "cssStyle", rtl: "rtl", disabled: "disabled", selection: "selection", color: "color", look: "look" }, outputs: { selectionChange: "selectionChange", colorChange: "colorChange", lookChange: "lookChange", onItemClick: "onItemClick" }, host: { attributes: { "role": "group" }, classAttribute: "ax-button-group" }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-button\">\r\n</ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonGroupComponent, decorators: [{
+_AXAlertComponent_visible = new WeakMap();
+AXAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAlertComponent, selector: "ax-alert", inputs: { color: "color", look: "look", icon: "icon", showIcon: "showIcon", timeOut: "timeOut", visible: "visible" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-alert-icon\" *ngIf=\"icon && showIcon\">\r\n    <i class=\"{{icon}} fa-lg\"></i>\r\n</div>\r\n<div class=\"ax-alert-body\">\r\n    <ng-content select=\"ax-alert-title\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-content\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-footer\">\r\n    </ng-content>\r\n</div>\r\n<ng-content select=\"ax-alert-suffix\">\r\n</ng-content>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-button-group', inputs: ['cssClass', 'size', 'cssStyle', 'rtl', 'disabled'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-button-group', role: 'group' }, template: "<ng-content select=\"ax-button\">\r\n</ng-content>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { selectionChange: [{
-                type: Output
-            }], selection: [{
+            args: [{ selector: 'ax-alert', changeDetection: ChangeDetectionStrategy.OnPush, inputs: [...COLOR_LOOK_INPUTS], encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-alert-icon\" *ngIf=\"icon && showIcon\">\r\n    <i class=\"{{icon}} fa-lg\"></i>\r\n</div>\r\n<div class=\"ax-alert-body\">\r\n    <ng-content select=\"ax-alert-title\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-content\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-footer\">\r\n    </ng-content>\r\n</div>\r\n<ng-content select=\"ax-alert-suffix\">\r\n</ng-content>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { icon: [{
                 type: Input
-            }], colorChange: [{
-                type: Output
-            }], color: [{
+            }], showIcon: [{
                 type: Input
-            }], lookChange: [{
-                type: Output
-            }], look: [{
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], timeOut: [{
+                type: Input
+            }], visible: [{
                 type: Input
-            }], onItemClick: [{
-                type: Output
-            }], _contentButtons: [{
-                type: ContentChildren,
-                args: [AXButtonComponent, { descendants: true }]
             }] } });
 
-const AXBaseItemButtonMixin = _InteractiveComponenetMixin(_ClickableComponenetMixin(AXBaseComponent));
-class AXButtonItemComponent extends AXBaseItemButtonMixin {
-    /**
-    *  @ignore
-    */
+class AXAlertTitleComponent {
+}
+AXAlertTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXAlertTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAlertTitleComponent, selector: "ax-alert-title", host: { classAttribute: "ax-alert-title" }, ngImport: i0, template: `
+        <ng-content>
+        </ng-content>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-alert-title',
+                    template: `
+        <ng-content>
+        </ng-content>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'ax-alert-title' }
+                }]
+        }] });
+
+class AXAlertButtonComponent extends AXBaseClickableMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
-        this.text = null;
-        this.tooltip = null;
-        this.selected = false;
-        this.seperated = false;
-        this.color = 'light';
     }
-    __hostClick(e) {
+    _handleOnClick(e) {
         this._emitOnClickEvent(e);
     }
-    get __hostClass() {
-        const cssClasses = {
-            'ax-button-icon': !this.text,
-            'ax-state-disabled': this.disabled,
-            'ax-state-selected': this.selected,
-        };
-        cssClasses[`ax-${this.color || 'primary'}-default`] = true;
-        return Object.entries(cssClasses).filter(c => c[1]).map(c => c[0]).join(' ');
+    _handleOnFocus(e) {
+        this._emitOnFocusEvent(e);
+    }
+    _handleOnBlur(e) {
+        this._emitOnBlurEvent(e);
     }
 }
-AXButtonItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXButtonItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXButtonItemComponent, selector: "ax-button-item", inputs: { text: "text", tooltip: "tooltip", selected: "selected", seperated: "seperated", name: "name", data: "data", color: "color" }, host: { listeners: { "click": "__hostClick($event)" }, properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: `
-        <ng-content select="ax-prefix">
-        </ng-content>
-        <ng-content select="ax-icon">
-        </ng-content>
-        <span *ngIf="text">{{text}}</span>
-        <ng-content select="ax-suffix">
-        </ng-content>
-    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonItemComponent, decorators: [{
+AXAlertButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXAlertButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAlertButtonComponent, selector: "ax-alert-button", inputs: { text: "text", icon: "icon" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange" }, host: { listeners: { "click": "_handleOnClick($event)", "focus": "_handleOnFocus($event)", "blur": "_handleOnBlur($event)" }, classAttribute: "ax-alert-button" }, usesInheritance: true, ngImport: i0, template: `
+       {{text}}
+       <ng-content select="ax-icon"></ng-content>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertButtonComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-button-item',
+                    selector: 'ax-alert-button',
                     template: `
-        <ng-content select="ax-prefix">
-        </ng-content>
-        <ng-content select="ax-icon">
+       {{text}}
+       <ng-content select="ax-icon"></ng-content>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    outputs: [...BUTTON_OUTPUT],
+                    host: { class: 'ax-alert-button' }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], _handleOnClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], _handleOnFocus: [{
+                type: HostListener,
+                args: ['focus', ['$event']]
+            }], _handleOnBlur: [{
+                type: HostListener,
+                args: ['blur', ['$event']]
+            }] } });
+
+class AXAlertContentComponent {
+}
+AXAlertContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXAlertContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAlertContentComponent, selector: "ax-alert-content", host: { classAttribute: "ax-alert-content" }, ngImport: i0, template: `<ng-content>
         </ng-content>
-        <span *ngIf="text">{{text}}</span>
-        <ng-content select="ax-suffix">
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-alert-content',
+                    template: `<ng-content>
         </ng-content>
     `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'ax-alert-content' }
+                }]
+        }] });
+
+class AXAlertSuffixComponent {
+}
+AXAlertSuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXAlertSuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAlertSuffixComponent, selector: "ax-alert-suffix", host: { classAttribute: "ax-alert-suffix" }, ngImport: i0, template: `
+        <div class="ax-alert-buttons">
+            <ng-content select="ax-alert-button">
+            </ng-content>
+        </div>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertSuffixComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-alert-suffix',
+                    template: `
+        <div class="ax-alert-buttons">
+            <ng-content select="ax-alert-button">
+            </ng-content>
+        </div>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
+                    host: { class: 'ax-alert-suffix' }
+                }]
+        }] });
+
+class AXAlertFooterComponent {
+}
+AXAlertFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXAlertFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAlertFooterComponent, selector: "ax-alert-footer", host: { classAttribute: "ax-alert-footer" }, ngImport: i0, template: `
+        <div class="ax-alert-buttons">
+            <ng-content select="ax-alert-button">
+            </ng-content>
+        </div>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-alert-footer',
+                    template: `
+        <div class="ax-alert-buttons">
+            <ng-content select="ax-alert-button">
+            </ng-content>
+        </div>
+    `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'ax-alert-footer' }
+                }]
+        }] });
+
+const COMPONENT$k = [
+    AXAlertComponent,
+    AXAlertContentComponent,
+    AXAlertTitleComponent,
+    AXAlertButtonComponent,
+    AXAlertFooterComponent,
+    AXAlertSuffixComponent
+];
+const MODULES$k = [CommonModule, AXIconModule];
+class AXAlertModule {
+}
+AXAlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertModule, declarations: [AXAlertComponent,
+        AXAlertContentComponent,
+        AXAlertTitleComponent,
+        AXAlertButtonComponent,
+        AXAlertFooterComponent,
+        AXAlertSuffixComponent], imports: [CommonModule, AXIconModule], exports: [AXAlertComponent,
+        AXAlertContentComponent,
+        AXAlertTitleComponent,
+        AXAlertButtonComponent,
+        AXAlertFooterComponent,
+        AXAlertSuffixComponent] });
+AXAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertModule, providers: [], imports: [[...MODULES$k]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT$k],
+                    imports: [...MODULES$k],
+                    exports: [...COMPONENT$k],
+                    providers: [],
+                }]
+        }] });
+
+class AXAvatarGroup {
+    constructor() { }
+    ngOnInit() { }
+}
+AXAvatarGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXAvatarGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAvatarGroup, selector: "ax-avatar-group", host: { classAttribute: "ax-avatar-group" }, ngImport: i0, template: `<ng-content select='ax-avatar'></ng-content>`, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-avatar-group',
+                    template: `<ng-content select='ax-avatar'></ng-content>`,
+                    host: { class: 'ax-avatar-group' }
                 }]
+        }], ctorParameters: function () { return []; } });
+
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+class AXAvatarComponent extends AXAvatarMixin {
+    /**
+    *  @ignore
+    */
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.type = 'default';
+    }
+    get __hostClass() {
+        return `ax-${this.color}-default`;
+    }
+}
+AXAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXAvatarComponent, selector: "ax-avatar", inputs: { color: "color", look: "look", text: "text", icon: "icon", src: "src", class: "class", type: "type" }, host: { properties: { "class": "this.__hostClass" }, classAttribute: "ax-avatar" }, usesInheritance: true, ngImport: i0, template: "\r\n<div class=\"ax-avatar-container\" [ngSwitch]=\"type\">\r\n    <ng-content select=\"ax-badge\"></ng-content>\r\n    <div class=\"ax-text-avatar {{class}}\" *ngSwitchCase=\"'text'\">\r\n        {{text}}\r\n    </div>\r\n    <div class=\"ax-icon-avatar {{class}}\" *ngSwitchCase=\"'icon'\">\r\n        <ng-content select=\"ax-icon\"></ng-content>\r\n    </div>\r\n    <div class=\"ax-image-avatar {{class}}\" *ngSwitchCase=\"'image'\">\r\n        <ng-content select=\"img\"></ng-content>\r\n    </div>\r\n    <div class=\"ax-default-avatar {{class}}\" *ngSwitchCase=\"'default'\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 512 512\">\r\n            <g style=\"isolation:isolate\">\r\n                <g id=\"Layer_2\" data-name=\"Layer 2\">\r\n                    <g id=\"Layer_1-2\" data-name=\"Layer 1\">\r\n                        <rect width=\"512\" height=\"512\" />\r\n                        <path\r\n                            d=\"M419.16,511.94s-2.85-154-142.28-176.19a139.93,139.93,0,0,0-22-1.67h0a55.8,55.8,0,0,0-5.93.29C99.25,350.35,96.26,511.94,96.26,511.94\"\r\n                            style=\"fill:#fff;opacity:0.7\" />\r\n                        <path\r\n                            d=\"M256,355.18c-17.29,0-32.22-4.63-46.38-12.41-3.86,1.31-8.15,2.93-11.75,4.46A96.48,96.48,0,0,0,256,366.62a100.29,100.29,0,0,0,60.07-20c-3.6-1.49-6.41-2.55-10.27-3.83C291.48,350.79,273.58,355.18,256,355.18Z\"\r\n                            style=\"opacity:0.05\" />\r\n                        <circle cx=\"257.71\" cy=\"255.94\" r=\"99.24\" style=\"fill:#fff\" />\r\n                    </g>\r\n                </g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n</div>", directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-avatar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: [...COLOR_LOOK_INPUTS], host: { class: 'ax-avatar' }, template: "\r\n<div class=\"ax-avatar-container\" [ngSwitch]=\"type\">\r\n    <ng-content select=\"ax-badge\"></ng-content>\r\n    <div class=\"ax-text-avatar {{class}}\" *ngSwitchCase=\"'text'\">\r\n        {{text}}\r\n    </div>\r\n    <div class=\"ax-icon-avatar {{class}}\" *ngSwitchCase=\"'icon'\">\r\n        <ng-content select=\"ax-icon\"></ng-content>\r\n    </div>\r\n    <div class=\"ax-image-avatar {{class}}\" *ngSwitchCase=\"'image'\">\r\n        <ng-content select=\"img\"></ng-content>\r\n    </div>\r\n    <div class=\"ax-default-avatar {{class}}\" *ngSwitchCase=\"'default'\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 512 512\">\r\n            <g style=\"isolation:isolate\">\r\n                <g id=\"Layer_2\" data-name=\"Layer 2\">\r\n                    <g id=\"Layer_1-2\" data-name=\"Layer 1\">\r\n                        <rect width=\"512\" height=\"512\" />\r\n                        <path\r\n                            d=\"M419.16,511.94s-2.85-154-142.28-176.19a139.93,139.93,0,0,0-22-1.67h0a55.8,55.8,0,0,0-5.93.29C99.25,350.35,96.26,511.94,96.26,511.94\"\r\n                            style=\"fill:#fff;opacity:0.7\" />\r\n                        <path\r\n                            d=\"M256,355.18c-17.29,0-32.22-4.63-46.38-12.41-3.86,1.31-8.15,2.93-11.75,4.46A96.48,96.48,0,0,0,256,366.62a100.29,100.29,0,0,0,60.07-20c-3.6-1.49-6.41-2.55-10.27-3.83C291.48,350.79,273.58,355.18,256,355.18Z\"\r\n                            style=\"opacity:0.05\" />\r\n                        <circle cx=\"257.71\" cy=\"255.94\" r=\"99.24\" style=\"fill:#fff\" />\r\n                    </g>\r\n                </g>\r\n            </g>\r\n        </svg>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
                 type: Input
-            }], tooltip: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], seperated: [{
+            }], icon: [{
                 type: Input
-            }], name: [{
+            }], src: [{
                 type: Input
-            }], data: [{
+            }], class: [{
                 type: Input
-            }], color: [{
+            }], type: [{
                 type: Input
-            }], __hostClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
             }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-class AXDecoratorContentComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-}
-AXDecoratorContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDecoratorContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDecoratorContentComponent, selector: "ax-content", usesInheritance: true, ngImport: i0, template: `
-        <ng-content>
-        </ng-content>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-content',
-                    template: `
-        <ng-content>
-        </ng-content>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
-
-class AXDecoratorAddOnComponent extends AXBaseComponentMixin {
-    constructor(_elementRef, _cdr) {
-        super(_elementRef, _cdr);
-    }
+const COMPONENT$j = [AXAvatarComponent, AXAvatarGroup];
+const MODULES$j = [CommonModule];
+class AXAvatarModule {
 }
-AXDecoratorAddOnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorAddOnComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDecoratorAddOnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDecoratorAddOnComponent, selector: "ax-addon", usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorAddOnComponent, decorators: [{
-            type: Component,
+AXAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarModule, declarations: [AXAvatarComponent, AXAvatarGroup], imports: [CommonModule], exports: [AXAvatarComponent, AXAvatarGroup] });
+AXAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarModule, providers: [], imports: [[...MODULES$j]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAvatarModule, decorators: [{
+            type: NgModule,
             args: [{
-                    selector: 'ax-addon',
-                    template: `<ng-content></ng-content>`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
+                    declarations: [...COMPONENT$j],
+                    imports: [...MODULES$j],
+                    exports: [...COMPONENT$j],
+                    providers: [],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+        }] });
 
-class AXDecoratorHeaderComponent extends AXBaseComponentMixin {
+const AXBaseBadgeMixin = _ColorLookComponentMixin(AXBaseComponent);
+class AXBadgeComponent extends AXBaseBadgeMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
+        this.text = '';
+        //TODO: ax-badge
+    }
+    get __hostClass() {
+        const _class = this.look ? `ax-${this.color}-${this.look}` : `ax-${this.color}-default`;
+        return ['ax-badge', _class, !this.text ? 'ax-badge-icon' : ''].join(' ');
     }
 }
-AXDecoratorHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorHeaderComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDecoratorHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDecoratorHeaderComponent, selector: "ax-header", usesInheritance: true, ngImport: i0, template: `
-        <ng-content>
-        </ng-content>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorHeaderComponent, decorators: [{
+AXBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBadgeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXBadgeComponent, selector: "ax-badge", inputs: { color: "color", look: "look", text: "text" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<span class=\"ax-font-medium ax-truncate\">{{text}}</span>\r\n<ng-content select=\"ax-suffix\"></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBadgeComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-header',
-                    template: `
-        <ng-content>
-        </ng-content>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+            args: [{ selector: 'ax-badge', changeDetection: ChangeDetectionStrategy.OnPush, inputs: [...COLOR_LOOK_INPUTS], encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<span class=\"ax-font-medium ax-truncate\">{{text}}</span>\r\n<ng-content select=\"ax-suffix\"></ng-content>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
+                type: Input
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
-class AXDecoratorPrefixComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
+const COMPONENT$i = [AXBadgeComponent];
+const MODULES$i = [CommonModule];
+class AXBadgeModule {
 }
-AXDecoratorPrefixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorPrefixComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDecoratorPrefixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDecoratorPrefixComponent, selector: "ax-prefix", usesInheritance: true, ngImport: i0, template: `
-        <ng-content select="ax-button,ax-loading,ax-icon,ax-content,ax-badge,ax-addon">
-        </ng-content>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorPrefixComponent, decorators: [{
-            type: Component,
+AXBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBadgeModule, declarations: [AXBadgeComponent], imports: [CommonModule], exports: [AXBadgeComponent] });
+AXBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBadgeModule, providers: [], imports: [[...MODULES$i]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBadgeModule, decorators: [{
+            type: NgModule,
             args: [{
-                    selector: 'ax-prefix',
-                    template: `
-        <ng-content select="ax-button,ax-loading,ax-icon,ax-content,ax-badge,ax-addon">
-        </ng-content>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
+                    declarations: [...COMPONENT$i],
+                    imports: [...MODULES$i],
+                    exports: [...COMPONENT$i],
+                    providers: [],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+        }] });
 
-class AXDecoratorSuffixComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
+class AXBreadCrumbsComponent extends AXBaseComponent {
+    constructor() {
+        super();
     }
 }
-AXDecoratorSuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorSuffixComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDecoratorSuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDecoratorSuffixComponent, selector: "ax-suffix", usesInheritance: true, ngImport: i0, template: `
-        <ng-content select="ax-button,ax-loading,ax-icon,ax-content,ax-badge,ax-addon">
-        </ng-content>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDecoratorSuffixComponent, decorators: [{
+AXBreadCrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadCrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXBreadCrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXBreadCrumbsComponent, selector: "ax-breadcrumbs", host: { classAttribute: "ax-breadcrumbs" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-breadcrumbs-item\"></ng-content>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadCrumbsComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-suffix',
-                    template: `
-        <ng-content select="ax-button,ax-loading,ax-icon,ax-content,ax-badge,ax-addon">
-        </ng-content>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+            args: [{ selector: 'ax-breadcrumbs', host: { class: 'ax-breadcrumbs' }, template: "<ng-content select=\"ax-breadcrumbs-item\"></ng-content>" }]
+        }], ctorParameters: function () { return []; } });
 
-const COMPONENT$k = [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorAddOnComponent];
-const MODULES$k = [CommonModule];
-class AXEditorDecoratorModule {
+class AXBreadCrumbsItemComponent extends AXBaseComponent {
+    constructor() {
+        super();
+    }
 }
-AXEditorDecoratorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXEditorDecoratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXEditorDecoratorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXEditorDecoratorModule, declarations: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorAddOnComponent], imports: [CommonModule], exports: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorAddOnComponent] });
-AXEditorDecoratorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXEditorDecoratorModule, providers: [], imports: [[...MODULES$k]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXEditorDecoratorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...COMPONENT$k],
-                    imports: [...MODULES$k],
-                    exports: [...COMPONENT$k],
-                    providers: [],
-                }]
-        }] });
+AXBreadCrumbsItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadCrumbsItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXBreadCrumbsItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: { text: "text" }, host: { classAttribute: "ax-breadcrumbs-item" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n</ng-content>\r\n<div>{{text}}</div>\r\n<ng-content select=\"ax-suffix,ax-loading,ax-icon\">\r\n</ng-content>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadCrumbsItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-breadcrumbs-item', host: { class: 'ax-breadcrumbs-item' }, template: "<ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n</ng-content>\r\n<div>{{text}}</div>\r\n<ng-content select=\"ax-suffix,ax-loading,ax-icon\">\r\n</ng-content>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { text: [{
+                type: Input
+            }] } });
 
-const COMPONENT$j = [
-    AXButtonComponent,
-    AXButtonItemComponent,
-    AXButtonGroupComponent,
-];
-const MODULES$j = [CommonModule, AXIconModule, AXEditorDecoratorModule];
-class AXButtonModule {
+class AXBreadcrumbsModule {
 }
-AXButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonModule, declarations: [AXButtonComponent,
-        AXButtonItemComponent,
-        AXButtonGroupComponent], imports: [CommonModule, AXIconModule, AXEditorDecoratorModule], exports: [AXButtonComponent,
-        AXButtonItemComponent,
-        AXButtonGroupComponent] });
-AXButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonModule, providers: [], imports: [[MODULES$j]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonModule, decorators: [{
+AXBreadcrumbsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXBreadcrumbsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadcrumbsModule, declarations: [AXBreadCrumbsComponent, AXBreadCrumbsItemComponent], imports: [CommonModule], exports: [AXBreadCrumbsComponent, AXBreadCrumbsItemComponent] });
+AXBreadcrumbsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadcrumbsModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadcrumbsModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [MODULES$j],
-                    exports: [COMPONENT$j],
-                    declarations: [COMPONENT$j],
+                    declarations: [AXBreadCrumbsComponent, AXBreadCrumbsItemComponent],
+                    imports: [CommonModule],
+                    exports: [AXBreadCrumbsComponent, AXBreadCrumbsItemComponent],
                     providers: [],
                 }]
         }] });
@@ -2466,19 +2889,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 args: ['class']
             }] } });
 
-const COMPONENT$i = [AXCalendarComponent];
-const MODULES$i = [CommonModule, AXButtonModule, AXIconModule, AXEditorDecoratorModule, AXDateTimeModule];
+const COMPONENT$h = [AXCalendarComponent];
+const MODULES$h = [CommonModule, AXButtonModule, AXIconModule, AXEditorDecoratorModule, AXDateTimeModule];
 class AXCalendarModule {
 }
 AXCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent], imports: [CommonModule, AXButtonModule, AXIconModule, AXEditorDecoratorModule, AXDateTimeModule], exports: [AXCalendarComponent] });
-AXCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarModule, providers: [], imports: [[...MODULES$i]] });
+AXCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarModule, providers: [], imports: [[...MODULES$h]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$i],
-                    imports: [...MODULES$i],
-                    exports: [...COMPONENT$i],
+                    declarations: [...COMPONENT$h],
+                    imports: [...MODULES$h],
+                    exports: [...COMPONENT$h],
                     providers: [],
                 }]
         }] });
@@ -2943,19 +3366,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXCarouselComponent }]; } });
 
-const COMPONENT$h = [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent];
-const MODULES$h = [CommonModule];
+const COMPONENT$g = [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent];
+const MODULES$g = [CommonModule];
 class AXCarouselModule {
 }
 AXCarouselModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXCarouselModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCarouselModule, declarations: [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent], imports: [CommonModule], exports: [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent] });
-AXCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCarouselModule, providers: [], imports: [[...MODULES$h]] });
+AXCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCarouselModule, providers: [], imports: [[...MODULES$g]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCarouselModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$h],
-                    imports: [...MODULES$h],
-                    exports: [...COMPONENT$h],
+                    declarations: [...COMPONENT$g],
+                    imports: [...MODULES$g],
+                    exports: [...COMPONENT$g],
                     providers: [],
                 }]
         }] });
@@ -3332,8 +3755,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 args: ['axIsLoading']
             }] } });
 
-const COMPONENT$g = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
-const MODULES$g = [CommonModule, OverlayModule, PortalModule];
+const COMPONENT$f = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
+const MODULES$f = [CommonModule, OverlayModule, PortalModule];
 class AXLoadingModule {
     constructor() {
         AXConfig.set({
@@ -3347,13 +3770,13 @@ class AXLoadingModule {
 }
 AXLoadingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXLoadingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXLoadingModule, declarations: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent], imports: [CommonModule, OverlayModule, PortalModule], exports: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent] });
-AXLoadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXLoadingModule, providers: [], imports: [[...MODULES$g]] });
+AXLoadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXLoadingModule, providers: [], imports: [[...MODULES$f]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXLoadingModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$g],
-                    imports: [...MODULES$g],
-                    exports: [...COMPONENT$g],
+                    declarations: [...COMPONENT$f],
+                    imports: [...MODULES$f],
+                    exports: [...COMPONENT$f],
                     providers: [],
                 }]
         }], ctorParameters: function () { return []; } });
@@ -3634,19 +4057,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: AXOverlayService }]; } });
 
-const COMPONENT$f = [AXDataListComponent];
-const MODULES$f = [CommonModule, AXButtonModule, AXLoadingModule, AXTranslationModule];
+const COMPONENT$e = [AXDataListComponent];
+const MODULES$e = [CommonModule, AXButtonModule, AXLoadingModule, AXTranslationModule];
 class AXDataListModule {
 }
 AXDataListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDataListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXDataListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDataListModule, declarations: [AXDataListComponent], imports: [CommonModule, AXButtonModule, AXLoadingModule, AXTranslationModule], exports: [AXDataListComponent] });
-AXDataListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDataListModule, providers: [], imports: [[...MODULES$f]] });
+AXDataListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDataListModule, providers: [], imports: [[...MODULES$e]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDataListModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$f],
-                    imports: [...MODULES$f],
-                    exports: [...COMPONENT$f],
+                    declarations: [...COMPONENT$e],
+                    imports: [...MODULES$e],
+                    exports: [...COMPONENT$e],
                     providers: [],
                 }]
         }] });
@@ -4094,8 +4517,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }] });
 
-const COMPONENT$e = [AXDatePickerComponent];
-const MODULES$e = [
+const COMPONENT$d = [AXDatePickerComponent];
+const MODULES$d = [
     CommonModule,
     AXCalendarModule,
     AXTextBoxModule,
@@ -4118,13 +4541,13 @@ AXDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         AXIconModule,
         AXDateTimeModule,
         FormsModule], exports: [AXDatePickerComponent] });
-AXDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDatepickerModule, providers: [], imports: [[...MODULES$e]] });
+AXDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDatepickerModule, providers: [], imports: [[...MODULES$d]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$e],
-                    imports: [...MODULES$e],
-                    exports: [...COMPONENT$e],
+                    declarations: [...COMPONENT$d],
+                    imports: [...MODULES$d],
+                    exports: [...COMPONENT$d],
                     providers: [],
                 }]
         }] });
@@ -4305,20 +4728,41 @@ class AXPageComponent extends AXBaseComponentMixin {
     constructor(elementRef, cdr, _loadingService) {
         super(elementRef, cdr);
         this._loadingService = _loadingService;
+        // private _isLoading: boolean = false;
+        // public get isLoading(): boolean {
+        //     return this._isLoading;
+        // }
+        // public set isLoading(v: boolean) {
+        //     this._isLoading = v;
+        //     if (this._loadingId && !v) {
+        //         this._loadingService.hide(this._loadingId);
+        //         this._loadingId = null;
+        //     }
+        //     if (v) {
+        //         this._loadingId = this._loadingService.show(this._getHostElement());
+        //     }
+        // }
+        this.isLoadingChange = new EventEmitter();
         this._isLoading = false;
     }
     get isLoading() {
         return this._isLoading;
     }
     set isLoading(v) {
-        this._isLoading = v;
-        if (this._loadingId && !v) {
-            this._loadingService.hide(this._loadingId);
-            this._loadingId = null;
-        }
-        if (v) {
-            this._loadingId = this._loadingService.show(this._getHostElement());
-        }
+        this._setOption({
+            name: 'isLoading',
+            value: v,
+            afterCallback: () => {
+                if (this._loadingId && !v) {
+                    this._loadingService.hide(this._loadingId);
+                    this._loadingId = null;
+                }
+                if (v) {
+                    this._loadingId = this._loadingService.show(this._getHostElement());
+                }
+                this._cdr.markForCheck();
+            }
+        });
     }
 }
 AXPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXLoadingService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -4330,7 +4774,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         type: Inject,
                         args: [AXLoadingService]
                     }] }];
-    } });
+    }, propDecorators: { isLoadingChange: [{
+                type: Output
+            }], isLoading: [{
+                type: Input
+            }] } });
 
 class AXPageFooterComponent {
 }
@@ -4381,8 +4829,13 @@ class AXPageClosedPromise extends Promise {
         }
     }
 }
-class AXBasePageComponent {
-    constructor() {
+class AXBasePageComponent extends AXBaseComponentMixin {
+    /**
+    *  @ignore
+    */
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.isLoadingChange = new EventEmitter();
         this._isLoading = false;
         this._isPopup = false;
         this.onClosed = new EventEmitter();
@@ -4391,11 +4844,16 @@ class AXBasePageComponent {
         return this._isLoading;
     }
     set isLoading(v) {
-        ;
-        this._isLoading = v;
-        if (this.pageContainer) {
-            this.pageContainer.isLoading = this.isLoading;
-        }
+        this._setOption({
+            name: 'isLoading',
+            value: v,
+            afterCallback: () => {
+                if (this.pageContainer) {
+                    this.pageContainer.isLoading = this.isLoading;
+                }
+                this._cdr.markForCheck();
+            }
+        });
     }
     get isPopup() {
         return this._isPopup;
@@ -4412,16 +4870,20 @@ class AXBasePageComponent {
         this.onClosed.unsubscribe();
     }
 }
-AXBasePageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBasePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AXBasePageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBasePageComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
 AXBasePageComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBasePageComponent });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBasePageComponent, decorators: [{
             type: Injectable
-        }], propDecorators: { pageContainer: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { pageContainer: [{
                 type: ViewChild,
                 args: [AXPageComponent, { static: true }]
             }], footer: [{
                 type: ViewChild,
                 args: [AXPageFooterComponent, { static: true }]
+            }], isLoadingChange: [{
+                type: Output
+            }], isLoading: [{
+                type: Input
             }] } });
 
 class AXPageHeaderComponent {
@@ -4465,272 +4927,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }] });
 
-const COMPONENT$d = [AXDialogComponent];
-const MODULES$d = [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule];
+const COMPONENT$c = [AXDialogComponent];
+const MODULES$c = [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule];
 class AXDialogModule {
 }
 AXDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDialogModule, declarations: [AXDialogComponent], imports: [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule], exports: [AXDialogComponent] });
-AXDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDialogModule, providers: [], imports: [[...MODULES$d]] });
+AXDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDialogModule, providers: [], imports: [[...MODULES$c]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDialogModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...COMPONENT$d],
-                    imports: [...MODULES$d],
-                    exports: [...COMPONENT$d],
-                    providers: [],
-                }]
-        }] });
-
-class AXDrawerComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr, zone) {
-        super(elementRef, cdr);
-        this.elementRef = elementRef;
-        this.zone = zone;
-        this.onChanged = new EventEmitter();
-        this.mode = 'push';
-        this.location = 'start';
-        this._collapsed = false;
-    }
-    get collapsed() {
-        return this._collapsed;
-    }
-    set collapsed(v) {
-        if (v != this._collapsed) {
-            this._collapsed = v;
-            this._updateClass();
-            this._emitChange();
-        }
-    }
-    onInit() {
-        this._getHostElement().classList.add(this.location == 'start' ? 'ax-drawer-start' : 'ax-drawer-end');
-        this._currentMode = this.mode;
-    }
-    _updateClass() {
-        this.zone.runOutsideAngular(() => {
-            const elm = this._getHostElement();
-            //           
-            this._currentMode == 'overlay' ? this._setOverlayMode() : this._setPushMode();
-            //
-            if (this.collapsed) {
-                elm.classList.remove('ax-expanded');
-                elm.classList.add('ax-collapsed');
-                if (this._currentMode == 'overlay') {
-                    this._removeBackdrop();
-                }
-            }
-            else {
-                elm.classList.add('ax-expanded');
-                elm.classList.remove('ax-collapsed');
-                if (this._currentMode == 'overlay') {
-                    this._addBackdrop();
-                }
-            }
-        });
-    }
-    onViewInit() {
-        this._detectSize();
-    }
-    toggle() {
-        this.collapsed = !this.collapsed;
-    }
-    close() {
-        this.collapsed = true;
-    }
-    open() {
-        this.collapsed = false;
-    }
-    _handleWindowsResize(e) {
-        this._detectSize();
-    }
-    _detectSize() {
-        //TODO detect break size
-        const bound = this._getHostElement().parentElement.getBoundingClientRect();
-        if (bound.width == 0) {
-            console.log('Drawe invalid size', bound);
-            setTimeout(() => {
-                this._detectSize();
-            }, 1);
-            return;
-        }
-        if (bound.width < 400) {
-            this._currentMode = 'overlay';
-            this.collapsed = true;
-        }
-        else {
-            this._currentMode = this.mode;
-        }
-        this._updateClass();
-        this._emitChange();
-    }
-    _emitChange() {
-        this.onChanged.emit({
-            component: this,
-            htmlElement: this.elementRef.nativeElement
-        });
-    }
-    _setOverlayMode() {
-        this._currentMode = 'overlay';
-        this._getHostElement().classList.remove('ax-drawer-push');
-        this._getHostElement().classList.add('ax-drawer-overlay');
-    }
-    _setPushMode() {
-        this._currentMode = 'push';
-        this._getHostElement().classList.remove('ax-drawer-overlay');
-        this._getHostElement().classList.add('ax-drawer-push');
-        this._removeBackdrop();
-    }
-    _addBackdrop() {
-        if (!this._backdrop) {
-            this._backdrop = document.createElement('div');
-            this._backdrop.classList.add('ax-drawer-backdrop');
-            this._getHostElement().parentElement.prepend(this._backdrop);
-            this._backdrop.addEventListener('click', this._handleBackfropClick.bind(this));
-        }
-    }
-    _removeBackdrop() {
-        if (this._backdrop) {
-            this._backdrop.removeEventListener('click', this._handleBackfropClick.bind(this));
-            this._getHostElement().parentElement.removeChild(this._backdrop);
-            this._backdrop = null;
-        }
-    }
-    _handleBackfropClick(e) {
-        this._removeBackdrop();
-        this.collapsed = true;
-    }
-}
-AXDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AXDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDrawerComponent, selector: "ax-drawer", inputs: { mode: "mode", location: "location", collapsed: "collapsed" }, outputs: { onChanged: "onChanged" }, host: { listeners: { "window:resize": "_handleWindowsResize($event)" }, classAttribute: "ax-drawer" }, usesInheritance: true, ngImport: i0, template: `
-        <ng-content>
-        </ng-content>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-drawer',
-                    template: `
-        <ng-content>
-        </ng-content>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-drawer' }
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { onChanged: [{
-                type: Output
-            }], mode: [{
-                type: Input
-            }], location: [{
-                type: Input
-            }], collapsed: [{
-                type: Input
-            }], _handleWindowsResize: [{
-                type: HostListener,
-                args: ['window:resize', ['$event']]
-            }] } });
-
-class AXDrawerContainerComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr, zone) {
-        super(elementRef, cdr);
-        this.zone = zone;
-    }
-    onViewInit() {
-        this._updateWidth();
-        // add animation
-        setTimeout(() => {
-            this._getHostElement().querySelectorAll('ax-drawer').forEach(c => {
-                c.classList.add('ax-animated');
-            });
-        }, 100);
-        this.drawers.forEach(c => {
-            c.onChanged.subscribe(c => {
-                this._updateWidth();
-            });
-        });
-    }
-    _updateWidth() {
-        this.zone.runOutsideAngular(() => {
-            const container = this._getHostElement().closest('ax-drawer-container');
-            const parentWidth = this._getHostElement().getBoundingClientRect().width;
-            let w = 0;
-            this._getHostElement().querySelectorAll('ax-drawer').forEach(c => {
-                const elm = c;
-                const width = elm.getBoundingClientRect().width;
-                const overflow = parentWidth < width;
-                const diff = width - parentWidth;
-                w += ['ax-expanded', 'ax-drawer-push'].every(c => elm.classList.contains(c)) ? width : 0;
-                elm.style.setProperty('--attr-width', `${width}px`);
-                //TODO check overflow
-                elm.style.setProperty('--attr-diff', `${overflow ? diff : 0}px`);
-            });
-            container.style.setProperty('--attr-content-width', `${parentWidth - w}px`);
-        });
-    }
-}
-AXDrawerContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerContainerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AXDrawerContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDrawerContainerComponent, selector: "ax-drawer-container", inputs: { rtl: "rtl" }, host: { classAttribute: "ax-drawer-container" }, queries: [{ propertyName: "drawers", predicate: AXDrawerComponent }], usesInheritance: true, ngImport: i0, template: `
-        <ng-content select="ax-drawer[location='start']">
-        </ng-content>
-        <ng-content select="ax-drawer-content">
-        </ng-content>
-        <ng-content select="ax-drawer[location='end']">
-        </ng-content>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerContainerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-drawer-container',
-                    template: `
-        <ng-content select="ax-drawer[location='start']">
-        </ng-content>
-        <ng-content select="ax-drawer-content">
-        </ng-content>
-        <ng-content select="ax-drawer[location='end']">
-        </ng-content>
-    `,
-                    inputs: ['rtl'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-drawer-container' }
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { drawers: [{
-                type: ContentChildren,
-                args: [AXDrawerComponent]
-            }] } });
-
-class AXDrawerContentComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-}
-AXDrawerContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDrawerContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDrawerContentComponent, selector: "ax-drawer-content", host: { classAttribute: "ax-drawer-content" }, usesInheritance: true, ngImport: i0, template: `
-        <ng-content>
-        </ng-content>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-drawer-content',
-                    template: `
-        <ng-content>
-        </ng-content>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-drawer-content' }
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
-
-const COMPONENT$c = [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent];
-const MODULES$c = [CommonModule];
-class AXDrawerModule {
-}
-AXDrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerModule, declarations: [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent], imports: [CommonModule], exports: [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent] });
-AXDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerModule, providers: [], imports: [[...MODULES$c]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$c],
@@ -6239,7 +6443,7 @@ class AXSelectionListComponent extends AXBaseSelectionValueMixin {
     }
 }
 AXSelectionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXSelectionListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXSelectionListComponent, selector: "ax-selection-list", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", valueField: "valueField", textField: "textField", multiple: "multiple", items: "items", selectionMode: "selectionMode", direction: "direction" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container\" [class.ax-state-selected]=\"isItemSelected(item)\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5 ax-check-box\">\r\n                    <input [id]=\"id+'-'+i\" class=\"ax-checkbox\" type=\"checkbox\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700 dark:ax-text-light-100\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container\" [class.ax-state-selected]=\"isItemSelected(item)\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5 ax-radio\">\r\n                    <input [id]=\"id+'-'+i\" class=\"ax-radio\" type=\"radio\" [attr.name]=\"id\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700 dark:ax-text-light-100\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>\r\n\r\n<!-- <div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <ax-check-box [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                       \r\n                        <ax-label> {{item[textField]}} |  {{isItemSelected(item)}}</ax-label>\r\n                        <ax-form-hint *ngIf=\"item[hintField]\"> {{item[hintField]}} </ax-form-hint>\r\n                    </ax-check-box>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <ax-radio [id]=\"id+'-'+i\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                        <ax-label>{{item[textField]}} |  {{isItemSelected(item)}}</ax-label>\r\n                        <ax-form-hint *ngIf=\"item[hintField]\"> {{item[hintField]}} </ax-form-hint>\r\n                    </ax-radio>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>  -->", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXSelectionListComponent, selector: "ax-selection-list", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", valueField: "valueField", textField: "textField", multiple: "multiple", items: "items", selectionMode: "selectionMode", direction: "direction" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container\" [class.ax-state-selected]=\"isItemSelected(item)\" (click)=\"ic.click()\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5 ax-check-box\">\r\n                    <input #ic [id]=\"id+'-'+i\" class=\"ax-checkbox\" type=\"checkbox\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700 dark:ax-text-light-100\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container\" [class.ax-state-selected]=\"isItemSelected(item)\" (click)=\"ir.click()\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5 ax-radio\">\r\n                    <input #ir [id]=\"id+'-'+i\" class=\"ax-radio\" type=\"radio\" [attr.name]=\"id\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700 dark:ax-text-light-100\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>\r\n\r\n<!-- <div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <ax-check-box [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                       \r\n                        <ax-label> {{item[textField]}} |  {{isItemSelected(item)}}</ax-label>\r\n                        <ax-form-hint *ngIf=\"item[hintField]\"> {{item[hintField]}} </ax-form-hint>\r\n                    </ax-check-box>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <ax-radio [id]=\"id+'-'+i\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                        <ax-label>{{item[textField]}} |  {{isItemSelected(item)}}</ax-label>\r\n                        <ax-form-hint *ngIf=\"item[hintField]\"> {{item[hintField]}} </ax-form-hint>\r\n                    </ax-radio>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>  -->", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXSelectionListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-selection-list', inputs: [
@@ -6253,7 +6457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         'multiple',
                         'items',
                         'selectionMode',
-                    ], outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container\" [class.ax-state-selected]=\"isItemSelected(item)\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5 ax-check-box\">\r\n                    <input [id]=\"id+'-'+i\" class=\"ax-checkbox\" type=\"checkbox\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700 dark:ax-text-light-100\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container\" [class.ax-state-selected]=\"isItemSelected(item)\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5 ax-radio\">\r\n                    <input [id]=\"id+'-'+i\" class=\"ax-radio\" type=\"radio\" [attr.name]=\"id\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700 dark:ax-text-light-100\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>\r\n\r\n<!-- <div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <ax-check-box [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                       \r\n                        <ax-label> {{item[textField]}} |  {{isItemSelected(item)}}</ax-label>\r\n                        <ax-form-hint *ngIf=\"item[hintField]\"> {{item[hintField]}} </ax-form-hint>\r\n                    </ax-check-box>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <ax-radio [id]=\"id+'-'+i\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                        <ax-label>{{item[textField]}} |  {{isItemSelected(item)}}</ax-label>\r\n                        <ax-form-hint *ngIf=\"item[hintField]\"> {{item[hintField]}} </ax-form-hint>\r\n                    </ax-radio>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>  -->" }]
+                    ], outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container\" [class.ax-state-selected]=\"isItemSelected(item)\" (click)=\"ic.click()\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5 ax-check-box\">\r\n                    <input #ic [id]=\"id+'-'+i\" class=\"ax-checkbox\" type=\"checkbox\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700 dark:ax-text-light-100\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container\" [class.ax-state-selected]=\"isItemSelected(item)\" (click)=\"ir.click()\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5 ax-radio\">\r\n                    <input #ir [id]=\"id+'-'+i\" class=\"ax-radio\" type=\"radio\" [attr.name]=\"id\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700 dark:ax-text-light-100\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>\r\n\r\n<!-- <div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <ax-check-box [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                       \r\n                        <ax-label> {{item[textField]}} |  {{isItemSelected(item)}}</ax-label>\r\n                        <ax-form-hint *ngIf=\"item[hintField]\"> {{item[hintField]}} </ax-form-hint>\r\n                    </ax-check-box>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <ax-radio [id]=\"id+'-'+i\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                        <ax-label>{{item[textField]}} |  {{isItemSelected(item)}}</ax-label>\r\n                        <ax-form-hint *ngIf=\"item[hintField]\"> {{item[hintField]}} </ax-form-hint>\r\n                    </ax-radio>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>  -->" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { direction: [{
                 type: Input
             }] } });
@@ -7457,5 +7661,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXAlertButtonComponent, AXAlertComponent, AXAlertContentComponent, AXAlertFooterComponent, AXAlertModule, AXAlertSuffixComponent, AXAlertTitleComponent, AXAvatarComponent, AXAvatarGroup, AXAvatarMixin, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseAlertMixin, AXBaseBadgeMixin, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDatePickerMixin, AXBaseDropdownMixin, AXBaseItemButtonMixin, AXBasePageComponent, AXBaseProgressMixin, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTabItemMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXBreadCrumbsComponent, AXBreadCrumbsItemComponent, AXBreadcrumbsModule, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXCollapseComponent, AXCollapseGroupComponent, AXCollapseModule, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatePickerComponent, AXDatepickerModule, AXDecoratorAddOnComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent, AXDrawerModule, AXDropdownModule, AXDropdownPanelComponent, AXEditorDecoratorModule, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXIconComponent, AXIconModule, AXInfiniteScrollerDirective, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXItemClickEvent, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXMenuComponent, AXMenuModule, AXNumberBoxComponent, AXNumberBoxModule, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageFooterComponent, AXPageHeaderComponent, AXPageModule, AXPageResult, AXPasswordBoxComponent, AXPasswordBoxModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXProgressBarComponent, AXProgressBarModule, AXRadioComponent, AXRadioModule, AXRangeSliderComponent, AXRangeSliderModule, AXRatingComponent, AXRatingModule, AXResponsiveDirective, AXResultComponent, AXSelectBoxComponent, AXSelectBoxModule, AXSelectionListComponent, AXSelectionListModule, AXSelectionValueChangedEvent, AXSizableComponentMixin, AXSwitchComponent, AXSwitchModule, AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTextareaComponent, AXTextareaModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXTreeViewComponent, AXTreeViewModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, ResultModule, TAB_META_KEY, _BaseComponenetMixin };
+export { AXActionSheetComponent, AXActionSheetItemComponent, AXActionSheetModule, AXAlertButtonComponent, AXAlertComponent, AXAlertContentComponent, AXAlertFooterComponent, AXAlertModule, AXAlertSuffixComponent, AXAlertTitleComponent, AXAvatarComponent, AXAvatarGroup, AXAvatarMixin, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseAlertMixin, AXBaseBadgeMixin, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDatePickerMixin, AXBaseDropdownMixin, AXBaseItemButtonMixin, AXBasePageComponent, AXBaseProgressMixin, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTabItemMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXBreadCrumbsComponent, AXBreadCrumbsItemComponent, AXBreadcrumbsModule, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXCollapseComponent, AXCollapseGroupComponent, AXCollapseModule, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatePickerComponent, AXDatepickerModule, AXDecoratorAddOnComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent, AXDrawerModule, AXDropdownModule, AXDropdownPanelComponent, AXEditorDecoratorModule, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXIconComponent, AXIconModule, AXInfiniteScrollerDirective, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXItemClickEvent, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXMenuComponent, AXMenuModule, AXNumberBoxComponent, AXNumberBoxModule, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageFooterComponent, AXPageHeaderComponent, AXPageModule, AXPageResult, AXPasswordBoxComponent, AXPasswordBoxModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXProgressBarComponent, AXProgressBarModule, AXRadioComponent, AXRadioModule, AXRangeSliderComponent, AXRangeSliderModule, AXRatingComponent, AXRatingModule, AXResponsiveDirective, AXResultComponent, AXSelectBoxComponent, AXSelectBoxModule, AXSelectionListComponent, AXSelectionListModule, AXSelectionValueChangedEvent, AXSizableComponentMixin, AXSwitchComponent, AXSwitchModule, AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTextareaComponent, AXTextareaModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXTreeViewComponent, AXTreeViewModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, ResultModule, TAB_META_KEY, _BaseComponenetMixin };
 //# sourceMappingURL=acorex-components.mjs.map