@acorex/components 5.0.55 → 5.0.58

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';
@@ -25,7 +26,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,544 +1223,467 @@ 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();
+    }
+    open() {
+        this.isOpen = true;
+    }
+    close() {
+        this.isOpen = false;
+    }
+    toggle() {
+        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);
+class AXActionSheetItemComponent extends AXBaseComponent {
+    /**
+      *  @ignore
+      */
+    constructor(_elementRef, _cdr) {
+        super(_elementRef, _cdr);
+        this.color = 'light';
+        this.onClick = new EventEmitter();
     }
     _handleOnClick(e) {
-        this._emitOnClickEvent(e);
-    }
-    _handleOnFocus(e) {
-        this._emitOnFocusEvent(e);
-    }
-    _handleOnBlur(e) {
-        this._emitOnBlurEvent(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 AXAlertFooterComponent {
+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;
+    }
 }
-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>
+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: AXAlertFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDrawerComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-alert-footer',
+                    selector: 'ax-drawer',
                     template: `
-        <div class="ax-alert-buttons">
-            <ng-content select="ax-alert-button">
-            </ng-content>
-        </div>
+        <ng-content>
+        </ng-content>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-alert-footer' }
+                    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 AXIconComponent extends AXSizableComponentMixin {
-    constructor(elementRef, cdr) {
+class AXDrawerContainerComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr, zone) {
         super(elementRef, cdr);
+        this.zone = zone;
     }
-    get __iconClass() {
-        return `ax-ic ${this.icon}`;
+    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`);
+        });
     }
 }
-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: [{
+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: AXDrawerContainerComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-icon',
-                    template: '<ng-content select="i,svg,img"></ng-content>',
+                    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 }]; }, propDecorators: { icon: [{
-                type: Input
-            }], __iconClass: [{
-                type: HostBinding,
-                args: ['class']
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { drawers: [{
+                type: ContentChildren,
+                args: [AXDrawerComponent]
             }] } });
 
-const COMPONENT$o = [AXIconComponent];
-const MODULES$o = [CommonModule];
-class AXIconModule {
-}
-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,
-            args: [{
-                    declarations: [...COMPONENT$o],
-                    imports: [...MODULES$o],
-                    exports: [...COMPONENT$o],
-                    providers: [],
-                }]
-        }] });
-
-const COMPONENT$n = [
-    AXAlertComponent,
-    AXAlertContentComponent,
-    AXAlertTitleComponent,
-    AXAlertButtonComponent,
-    AXAlertFooterComponent,
-    AXAlertSuffixComponent
-];
-const MODULES$n = [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$n]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXAlertModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...COMPONENT$n],
-                    imports: [...MODULES$n],
-                    exports: [...COMPONENT$n],
-                    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
-            }], icon: [{
-                type: Input
-            }], src: [{
-                type: Input
-            }], class: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], __hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-const COMPONENT$m = [AXAvatarComponent, AXAvatarGroup];
-const MODULES$m = [CommonModule];
-class AXAvatarModule {
-}
-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: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...COMPONENT$m],
-                    imports: [...MODULES$m],
-                    exports: [...COMPONENT$m],
-                    providers: [],
-                }]
-        }] });
-
-const AXBaseBadgeMixin = _ColorLookComponentMixin(AXBaseComponent);
-class AXBadgeComponent extends AXBaseBadgeMixin {
+class AXDrawerContentComponent extends AXBaseComponentMixin {
     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(' ');
     }
 }
-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: [{
+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-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']
-            }] } });
-
-const COMPONENT$l = [AXBadgeComponent];
-const MODULES$l = [CommonModule];
-class AXBadgeModule {
-}
-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: [{
-            type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$l],
-                    imports: [...MODULES$l],
-                    exports: [...COMPONENT$l],
-                    providers: [],
+                    selector: 'ax-drawer-content',
+                    template: `
+        <ng-content>
+        </ng-content>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'ax-drawer-content' }
                 }]
-        }] });
-
-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();
-    }
-}
-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
-            }] } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-class AXBreadcrumbsModule {
+const COMPONENT$o = [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent];
+const MODULES$o = [CommonModule];
+class AXDrawerModule {
 }
-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: [{
+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: [AXBreadCrumbsComponent, AXBreadCrumbsItemComponent],
-                    imports: [CommonModule],
-                    exports: [AXBreadCrumbsComponent, AXBreadCrumbsItemComponent],
+                    declarations: [...COMPONENT$o],
+                    imports: [...MODULES$o],
+                    exports: [...COMPONENT$o],
                     providers: [],
                 }]
         }] });
 
-/**
- * The Button is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-class AXButtonComponent extends AXBaseButtonMixin {
-    /**
-    *  @ignore
-    */
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-    onKeydownHandler(e) {
-        if (e.code === 'Enter') {
-            this._getHostElement().click();
-        }
-    }
-    _emitOnClickEvent(e) {
-        if (this.disabled)
-            return;
-        if (this.toggleable) {
-            this.selected = !this.selected;
-        }
-        super._emitOnClickEvent(e);
-    }
-    _emitOnFocusEvent(e) {
-        super._emitOnFocusEvent(e);
-    }
-    _emitOnBlurEvent(e) {
-        super._emitOnBlurEvent(e);
-    }
-    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);
@@ -2064,29 +1987,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-const COMPONENT$k = [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorAddOnComponent];
-const MODULES$k = [CommonModule];
+const COMPONENT$n = [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorAddOnComponent];
+const MODULES$n = [CommonModule];
 class AXEditorDecoratorModule {
 }
 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]] });
+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$k],
-                    imports: [...MODULES$k],
-                    exports: [...COMPONENT$k],
+                    declarations: [...COMPONENT$n],
+                    imports: [...MODULES$n],
+                    exports: [...COMPONENT$n],
+                    providers: [],
+                }]
+        }] });
+
+class AXIconComponent extends AXSizableComponentMixin {
+    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: [{
+            type: Component,
+            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
+            }], __iconClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+const COMPONENT$m = [AXIconComponent];
+const MODULES$m = [CommonModule];
+class AXIconModule {
+}
+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$m],
+                    imports: [...MODULES$m],
+                    exports: [...COMPONENT$m],
                     providers: [],
                 }]
         }] });
 
-const COMPONENT$j = [
+const COMPONENT$l = [
     AXButtonComponent,
     AXButtonItemComponent,
     AXButtonGroupComponent,
 ];
-const MODULES$j = [CommonModule, AXIconModule, AXEditorDecoratorModule];
+const MODULES$l = [CommonModule, AXIconModule, AXEditorDecoratorModule];
 class AXButtonModule {
 }
 AXButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2095,143 +2060,597 @@ AXButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         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]] });
+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$j],
-                    exports: [COMPONENT$j],
-                    declarations: [COMPONENT$j],
+                    imports: [MODULES$l],
+                    exports: [COMPONENT$l],
+                    declarations: [COMPONENT$l],
                     providers: [],
                 }]
         }] });
 
-class AXCalendarBaseComponent extends AXBaseComponent {
+class AXActionSheetModule {
+}
+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], exports: [AXActionSheetComponent, AXActionSheetItemComponent] });
+AXActionSheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXActionSheetModule, providers: [], imports: [[CommonModule, AXDrawerModule, AXButtonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXActionSheetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXActionSheetComponent, AXActionSheetItemComponent],
+                    imports: [CommonModule, AXDrawerModule, AXButtonModule],
+                    exports: [AXActionSheetComponent, AXActionSheetItemComponent],
+                    providers: [],
+                }]
+        }] });
+
+var _AXAlertComponent_visible;
+const AXBaseAlertMixin = _ColorLookComponentMixin(AXBaseComponent);
+/**
+ * Regular description
+ *
+ * @category Components
+ */
+class AXAlertComponent extends AXBaseAlertMixin {
+    /**
+    *  @ignore
+    */
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
-        this.activeViewChange = new EventEmitter();
-        this._activeView = 'days';
-        this.typeChange = new EventEmitter();
-        this._type = AXConfig.get(`dateTime.calendar`);
-        this.depthChange = new EventEmitter();
-        this._depth = 'days';
-        this.minChange = new EventEmitter();
-        this.maxChange = new EventEmitter();
-        this.disabledDatesChange = new EventEmitter();
-        this.holidayDatesChange = new EventEmitter();
-    }
-    get activeView() {
-        return this._activeView;
-    }
-    set activeView(v) {
-        this._setOption({ name: 'activeView', value: v });
-    }
-    get type() {
-        return this._type || AXConfig.get(`dateTime.calendar`);
-    }
-    set type(v) {
-        this._setOption({
-            name: 'type',
-            value: v
-        });
-    }
-    get depth() {
-        return this._depth;
+        this.showIcon = true;
+        _AXAlertComponent_visible.set(this, void 0);
     }
-    set depth(v) {
-        this._setOption({
-            name: 'depth',
-            value: v,
-            beforeCallback: () => {
-                this._activeView = v;
+    _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;
             }
-        });
+        }
     }
-    get min() {
-        return this._min;
+    /**
+   *  @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 min(v) {
-        this._setOption({ name: 'min', value: v });
+    /**
+    *  set the visibility of the Alert
+    */
+    get visible() {
+        return __classPrivateFieldGet(this, _AXAlertComponent_visible, "f");
     }
-    get max() {
-        return this._max;
+    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');
+            }
+        }
     }
-    set max(v) {
-        this._setOption({ name: 'max', value: v });
+    onInit() {
+        if (this.timeOut) {
+            setTimeout(() => {
+                this.dismiss();
+            }, this.timeOut);
+        }
     }
-    get disabledDates() {
-        return this._disabledDates;
+    onViewInit() {
+        if (this.visible == undefined) {
+            this.visible = true;
+        }
     }
-    set disabledDates(v) {
-        this._setOption({ name: 'disabledDates', value: v });
+    /**
+    *  Remove the alert from the container
+    */
+    dismiss() {
+        const host = this._getHostElement();
+        this.visible = false;
+        const func = () => {
+            host.parentElement.removeChild(host);
+        };
+        host.addEventListener('transitionend', func);
     }
-    get holidayDates() {
-        return this._holidayDates;
+    /**
+    *  Hide the alert
+    */
+    hide() {
+        this.visible = false;
     }
-    set holidayDates(v) {
-        this._setOption({ name: 'holidayDates', value: v });
+    /**
+    *  Show the alert
+    */
+    show() {
+        this.visible = true;
     }
 }
-AXCalendarBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarBaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
-AXCalendarBaseComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarBaseComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarBaseComponent, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { activeViewChange: [{
-                type: Output
-            }], activeView: [{
-                type: Input
-            }], typeChange: [{
-                type: Output
-            }], type: [{
-                type: Input
-            }], depthChange: [{
-                type: Output
-            }], depth: [{
-                type: Input
-            }], minChange: [{
-                type: Output
-            }], min: [{
+_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-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
-            }], maxChange: [{
-                type: Output
-            }], max: [{
+            }], showIcon: [{
                 type: Input
-            }], disabledDatesChange: [{
-                type: Output
-            }], disabledDates: [{
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], timeOut: [{
                 type: Input
-            }], holidayDatesChange: [{
-                type: Output
-            }], holidayDates: [{
+            }], visible: [{
                 type: Input
-            }] } });
-const CALENDAR_INPUTS = [
-    'depth',
-    'activeView',
-    'min',
-    'max',
-    'disabledDates',
-    'type',
-    'holidayDates',
-];
-const CALENDAR_OUTPUTS = ['depthChange', 'typeChange'];
+            }] } });
 
-const AXCalendarComponentMixin = _ClickableComponenetMixin(_InteractiveComponenetMixin(_ValueComponenetMixin(AXCalendarBaseComponent)));
-class AXCalendarComponent extends AXCalendarComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-        this.cdr = cdr;
-        this._today = new AXDateTime(new Date(), this.type);
-        this._navText = '';
-        this._todayText = '';
-        this._slots = [];
-        this._dayNames = [];
-        this.onSlotClick = new EventEmitter();
-    }
-    get _viewRange() {
-        const current = this._viewStartDate || this._today;
-        switch (this.activeView) {
-            case 'years':
+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);
+    }
+    _handleOnBlur(e) {
+        this._emitOnBlurEvent(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: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-alert-button',
+                    template: `
+       {{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>
+    `, 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
+            }], icon: [{
+                type: Input
+            }], src: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+const COMPONENT$j = [AXAvatarComponent, AXAvatarGroup];
+const MODULES$j = [CommonModule];
+class AXAvatarModule {
+}
+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: [{
+                    declarations: [...COMPONENT$j],
+                    imports: [...MODULES$j],
+                    exports: [...COMPONENT$j],
+                    providers: [],
+                }]
+        }] });
+
+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(' ');
+    }
+}
+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-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']
+            }] } });
+
+const COMPONENT$i = [AXBadgeComponent];
+const MODULES$i = [CommonModule];
+class AXBadgeModule {
+}
+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: [{
+                    declarations: [...COMPONENT$i],
+                    imports: [...MODULES$i],
+                    exports: [...COMPONENT$i],
+                    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();
+    }
+}
+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
+            }] } });
+
+class AXBreadcrumbsModule {
+}
+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: [{
+                    declarations: [AXBreadCrumbsComponent, AXBreadCrumbsItemComponent],
+                    imports: [CommonModule],
+                    exports: [AXBreadCrumbsComponent, AXBreadCrumbsItemComponent],
+                    providers: [],
+                }]
+        }] });
+
+class AXCalendarBaseComponent extends AXBaseComponent {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.activeViewChange = new EventEmitter();
+        this._activeView = 'days';
+        this.typeChange = new EventEmitter();
+        this._type = AXConfig.get(`dateTime.calendar`);
+        this.depthChange = new EventEmitter();
+        this._depth = 'days';
+        this.minChange = new EventEmitter();
+        this.maxChange = new EventEmitter();
+        this.disabledDatesChange = new EventEmitter();
+        this.holidayDatesChange = new EventEmitter();
+    }
+    get activeView() {
+        return this._activeView;
+    }
+    set activeView(v) {
+        this._setOption({ name: 'activeView', value: v });
+    }
+    get type() {
+        return this._type || AXConfig.get(`dateTime.calendar`);
+    }
+    set type(v) {
+        this._setOption({
+            name: 'type',
+            value: v
+        });
+    }
+    get depth() {
+        return this._depth;
+    }
+    set depth(v) {
+        this._setOption({
+            name: 'depth',
+            value: v,
+            beforeCallback: () => {
+                this._activeView = v;
+            }
+        });
+    }
+    get min() {
+        return this._min;
+    }
+    set min(v) {
+        this._setOption({ name: 'min', value: v });
+    }
+    get max() {
+        return this._max;
+    }
+    set max(v) {
+        this._setOption({ name: 'max', value: v });
+    }
+    get disabledDates() {
+        return this._disabledDates;
+    }
+    set disabledDates(v) {
+        this._setOption({ name: 'disabledDates', value: v });
+    }
+    get holidayDates() {
+        return this._holidayDates;
+    }
+    set holidayDates(v) {
+        this._setOption({ name: 'holidayDates', value: v });
+    }
+}
+AXCalendarBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarBaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
+AXCalendarBaseComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarBaseComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarBaseComponent, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { activeViewChange: [{
+                type: Output
+            }], activeView: [{
+                type: Input
+            }], typeChange: [{
+                type: Output
+            }], type: [{
+                type: Input
+            }], depthChange: [{
+                type: Output
+            }], depth: [{
+                type: Input
+            }], minChange: [{
+                type: Output
+            }], min: [{
+                type: Input
+            }], maxChange: [{
+                type: Output
+            }], max: [{
+                type: Input
+            }], disabledDatesChange: [{
+                type: Output
+            }], disabledDates: [{
+                type: Input
+            }], holidayDatesChange: [{
+                type: Output
+            }], holidayDates: [{
+                type: Input
+            }] } });
+const CALENDAR_INPUTS = [
+    'depth',
+    'activeView',
+    'min',
+    'max',
+    'disabledDates',
+    'type',
+    'holidayDates',
+];
+const CALENDAR_OUTPUTS = ['depthChange', 'typeChange', 'disabledDates', 'holidayDates'];
+
+const AXCalendarComponentMixin = _ClickableComponenetMixin(_InteractiveComponenetMixin(_ValueComponenetMixin(AXCalendarBaseComponent)));
+class AXCalendarComponent extends AXCalendarComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.cdr = cdr;
+        this._today = new AXDateTime(new Date(), this.type);
+        this._navText = '';
+        this._todayText = '';
+        this._slots = [];
+        this._dayNames = [];
+        this.onSlotClick = new EventEmitter();
+    }
+    get _viewRange() {
+        const current = this._viewStartDate || this._today;
+        switch (this.activeView) {
+            case 'years':
                 let y = current.startOf('year').year;
                 let min = y - (y % 10) - 1;
                 let max = min + 11;
@@ -2381,7 +2800,7 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
             this.activeView = 'years';
     }
     _onOptionChanged(option) {
-        if (option.name == 'depth' || option.name == 'activeView') {
+        if (option.name == 'depth' || option.name == 'activeView' || option.name == 'disabledDates' || option.name == 'holidayDates') {
             this._genearteSlots();
         }
         if (option.name == 'type') {
@@ -2433,7 +2852,6 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
     }
     isDisabled(date) {
         if (Array.isArray(this.disabledDates) && this.disabledDates.length != 0) {
-            ;
             return this.disabledDates.some(d => date.equal(d, 'day'));
         }
         else if (typeof this.disabledDates == 'function') {
@@ -2455,10 +2873,10 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
     }
 }
 AXCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXCalendarComponent, selector: "ax-calendar", inputs: { readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", disabled: "disabled", tabIndex: "tabIndex", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", type: "type", holidayDates: "holidayDates" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", onSlotClick: "onSlotClick" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-header\">\r\n    <div>\r\n        <ng-container *ngIf=\"activeView=='days'; else elseTemplate\">\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[1]\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[0]\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n        </ng-template>\r\n    </div>\r\n    <div>\r\n        <ax-button class=\"ax-prev-button\" color=\"light\" look=\"blank\" (onClick)=\"_handlePrevClick($event)\"\r\n            [disabled]=\"disabled\">\r\n            <ax-prefix>\r\n                <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n            </ax-prefix>\r\n        </ax-button>\r\n        <ax-button class=\"ax-next-button\" color=\"light\" look=\"blank\" (onClick)=\"_handleNextClick($event)\"\r\n            [disabled]=\"disabled\">\r\n            <ax-prefix>\r\n                <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax-rotate-90\"></ax-icon>\r\n               \r\n            </ax-prefix>\r\n        </ax-button>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-body\">\r\n    <div [ngSwitch]=\"activeView\">\r\n        <ng-container *ngSwitchCase=\"'years'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'months'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n            <div class=\"ax-calendar-week\">\r\n                <div *ngFor=\"let d of _dayNames\">{{d}}</div>\r\n            </div>\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-footer\">\r\n    <ax-button class=\"dark:ax-text-danger\" [text]=\"_todayText\" color=\"dark\" look=\"blank\" size=\"sm\"\r\n        (onClick)=\"_handleGoToday()\" [disabled]=\"disabled\"></ax-button>\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXCalendarComponent, selector: "ax-calendar", inputs: { readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", disabled: "disabled", tabIndex: "tabIndex", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", type: "type", holidayDates: "holidayDates" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", disabledDates: "disabledDates", holidayDates: "holidayDates", onSlotClick: "onSlotClick" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-header\">\r\n    <div>\r\n        <ng-container *ngIf=\"activeView=='days'; else elseTemplate\">\r\n            <ax-button class=\"ax-nav-button\"  [text]=\"_navText.split(' ')[1]\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[0]\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n            <div class=\"ax-w-28 ax-inline-block\">\r\n\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n    <div>\r\n        <ax-button class=\"ax-prev-button\" color=\"light\" look=\"blank\" (onClick)=\"_handlePrevClick($event)\"\r\n            [disabled]=\"disabled\">\r\n            <ax-prefix>\r\n                <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n            </ax-prefix>\r\n        </ax-button>\r\n        <ax-button class=\"ax-next-button\" color=\"light\" look=\"blank\" (onClick)=\"_handleNextClick($event)\"\r\n            [disabled]=\"disabled\">\r\n            <ax-prefix>\r\n                <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax-rotate-90\"></ax-icon>\r\n               \r\n            </ax-prefix>\r\n        </ax-button>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-body\">\r\n    <div [ngSwitch]=\"activeView\">\r\n        <ng-container *ngSwitchCase=\"'years'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'months'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n            <div class=\"ax-calendar-week\">\r\n                <div *ngFor=\"let d of _dayNames\">{{d}}</div>\r\n            </div>\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-footer\">\r\n    <ax-button class=\"dark:ax-text-danger\" [text]=\"_todayText\" color=\"dark\" look=\"blank\" size=\"sm\"\r\n        (onClick)=\"_handleGoToday()\" [disabled]=\"disabled\"></ax-button>\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-calendar', changeDetection: ChangeDetectionStrategy.OnPush, inputs: [...VALUE_INPUTS, ...INTERACTIVE_INPUTS, ...CALENDAR_INPUTS], outputs: [...VALUE_OUTPUT, ...INTERACTIVE_OUTPUT, ...CALENDAR_OUTPUTS], encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-calendar-header\">\r\n    <div>\r\n        <ng-container *ngIf=\"activeView=='days'; else elseTemplate\">\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[1]\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[0]\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n        </ng-template>\r\n    </div>\r\n    <div>\r\n        <ax-button class=\"ax-prev-button\" color=\"light\" look=\"blank\" (onClick)=\"_handlePrevClick($event)\"\r\n            [disabled]=\"disabled\">\r\n            <ax-prefix>\r\n                <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n            </ax-prefix>\r\n        </ax-button>\r\n        <ax-button class=\"ax-next-button\" color=\"light\" look=\"blank\" (onClick)=\"_handleNextClick($event)\"\r\n            [disabled]=\"disabled\">\r\n            <ax-prefix>\r\n                <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax-rotate-90\"></ax-icon>\r\n               \r\n            </ax-prefix>\r\n        </ax-button>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-body\">\r\n    <div [ngSwitch]=\"activeView\">\r\n        <ng-container *ngSwitchCase=\"'years'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'months'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n            <div class=\"ax-calendar-week\">\r\n                <div *ngFor=\"let d of _dayNames\">{{d}}</div>\r\n            </div>\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-footer\">\r\n    <ax-button class=\"dark:ax-text-danger\" [text]=\"_todayText\" color=\"dark\" look=\"blank\" size=\"sm\"\r\n        (onClick)=\"_handleGoToday()\" [disabled]=\"disabled\"></ax-button>\r\n</div>" }]
+            args: [{ selector: 'ax-calendar', changeDetection: ChangeDetectionStrategy.OnPush, inputs: [...VALUE_INPUTS, ...INTERACTIVE_INPUTS, ...CALENDAR_INPUTS], outputs: [...VALUE_OUTPUT, ...INTERACTIVE_OUTPUT, ...CALENDAR_OUTPUTS], encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-calendar-header\">\r\n    <div>\r\n        <ng-container *ngIf=\"activeView=='days'; else elseTemplate\">\r\n            <ax-button class=\"ax-nav-button\"  [text]=\"_navText.split(' ')[1]\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[0]\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n            <div class=\"ax-w-28 ax-inline-block\">\r\n\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n    <div>\r\n        <ax-button class=\"ax-prev-button\" color=\"light\" look=\"blank\" (onClick)=\"_handlePrevClick($event)\"\r\n            [disabled]=\"disabled\">\r\n            <ax-prefix>\r\n                <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n            </ax-prefix>\r\n        </ax-button>\r\n        <ax-button class=\"ax-next-button\" color=\"light\" look=\"blank\" (onClick)=\"_handleNextClick($event)\"\r\n            [disabled]=\"disabled\">\r\n            <ax-prefix>\r\n                <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax-rotate-90\"></ax-icon>\r\n               \r\n            </ax-prefix>\r\n        </ax-button>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-body\">\r\n    <div [ngSwitch]=\"activeView\">\r\n        <ng-container *ngSwitchCase=\"'years'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'months'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n            <div class=\"ax-calendar-week\">\r\n                <div *ngFor=\"let d of _dayNames\">{{d}}</div>\r\n            </div>\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-footer\">\r\n    <ax-button class=\"dark:ax-text-danger\" [text]=\"_todayText\" color=\"dark\" look=\"blank\" size=\"sm\"\r\n        (onClick)=\"_handleGoToday()\" [disabled]=\"disabled\"></ax-button>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { onSlotClick: [{
                 type: Output
             }], __hostClass: [{
@@ -2466,19 +2884,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 +3361,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 +3750,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 +3765,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 +4052,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: [],
                 }]
         }] });
@@ -4008,10 +4426,10 @@ class AXDatePickerComponent extends AXBaseDatePickerMixin {
     }
 }
 AXDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", format: "format" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange", typeChange: "typeChange", formatChange: "formatChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "_calendar", first: true, predicate: AXCalendarComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\r\n        [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\" (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane\" >\r\n        <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n            <span >{{placeholder || 'Choose a date'}}</span>\r\n            <i class=\"ax-ic ax-ic-close \"\r\n                (click)=\"close()\" tabindex=\"1\"></i>\r\n        </div>\r\n        <ax-calendar #calendar [disabled]=\"disabled\" [readonly]=\"readonly\" [(value)]=\"value\" [min]=\"min\" [min]=\"max\"\r\n            [disabledDates]=\"disabledDates\" [holidayDates]=\"holidayDates\" [depth]=\"depth\" [type]=\"type\">\r\n        </ax-calendar>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }, { type: AXCalendarComponent, selector: "ax-calendar", inputs: ["readonly", "allowNull", "value", "debounceTime", "name", "checked", "disabled", "tabIndex", "depth", "activeView", "min", "max", "disabledDates", "type", "holidayDates"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange", "typeChange", "onSlotClick"] }], directives: [{ type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", format: "format" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange", typeChange: "typeChange", disabledDates: "disabledDates", holidayDates: "holidayDates", formatChange: "formatChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "_calendar", first: true, predicate: AXCalendarComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\r\n        [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\" (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane ax-w-72\">\r\n        <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n            <span >{{placeholder || 'Choose a date'}}</span>\r\n            <i class=\"ax-ic ax-ic-close \"\r\n                (click)=\"close()\" tabindex=\"1\"></i>\r\n        </div>\r\n        <ax-calendar #calendar [disabled]=\"disabled\" [readonly]=\"readonly\" [(value)]=\"value\" [min]=\"min\" [max]=\"max\"\r\n            [disabledDates]=\"disabledDates\" [holidayDates]=\"holidayDates\" [depth]=\"depth\" [type]=\"type\">\r\n        </ax-calendar>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }, { type: AXCalendarComponent, selector: "ax-calendar", inputs: ["readonly", "allowNull", "value", "debounceTime", "name", "checked", "disabled", "tabIndex", "depth", "activeView", "min", "max", "disabledDates", "type", "holidayDates"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange", "typeChange", "disabledDates", "holidayDates", "onSlotClick"] }], directives: [{ type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: AXDatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-date-picker', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...CALENDAR_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...CALENDAR_OUTPUTS], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\r\n        [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\" (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane\" >\r\n        <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n            <span >{{placeholder || 'Choose a date'}}</span>\r\n            <i class=\"ax-ic ax-ic-close \"\r\n                (click)=\"close()\" tabindex=\"1\"></i>\r\n        </div>\r\n        <ax-calendar #calendar [disabled]=\"disabled\" [readonly]=\"readonly\" [(value)]=\"value\" [min]=\"min\" [min]=\"max\"\r\n            [disabledDates]=\"disabledDates\" [holidayDates]=\"holidayDates\" [depth]=\"depth\" [type]=\"type\">\r\n        </ax-calendar>\r\n    </div>\r\n</ax-popover>" }]
+            args: [{ selector: 'ax-date-picker', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...CALENDAR_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...CALENDAR_OUTPUTS], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\r\n        [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\" (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane ax-w-72\">\r\n        <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n            <span >{{placeholder || 'Choose a date'}}</span>\r\n            <i class=\"ax-ic ax-ic-close \"\r\n                (click)=\"close()\" tabindex=\"1\"></i>\r\n        </div>\r\n        <ax-calendar #calendar [disabled]=\"disabled\" [readonly]=\"readonly\" [(value)]=\"value\" [min]=\"min\" [max]=\"max\"\r\n            [disabledDates]=\"disabledDates\" [holidayDates]=\"holidayDates\" [depth]=\"depth\" [type]=\"type\">\r\n        </ax-calendar>\r\n    </div>\r\n</ax-popover>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.AXPlatform }]; }, propDecorators: { popover: [{
                 type: ViewChild,
                 args: [AXPopoverComponent, { static: true }]
@@ -4094,8 +4512,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 +4536,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: [],
                 }]
         }] });
@@ -4297,125 +4715,30 @@ class AXDialogService {
 AXDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDialogService, deps: [{ token: i1$4.Overlay }, { token: i0.Injector }, { token: i1$4.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Injectable });
 AXDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDialogService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDialogService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1$4.Overlay }, { type: i0.Injector }, { type: i1$4.ScrollStrategyOptions }]; } });
-
-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._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 });
-AXPageComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageComponent, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [AXLoadingService]
-                    }] }];
-    }, propDecorators: { isLoadingChange: [{
-                type: Output
-            }], isLoading: [{
-                type: Input
-            }] } });
-
-class AXPageFooterComponent {
-}
-AXPageFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXPageFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXPageFooterComponent, selector: "ax-page-footer", viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
-           <ng-content select="ax-prefix">
-            </ng-content>
-            <ng-content select="ax-suffix">
-            </ng-content>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageFooterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-page-footer',
-                    template: `
-           <ng-content select="ax-prefix">
-            </ng-content>
-            <ng-content select="ax-suffix">
-            </ng-content>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], propDecorators: { template: [{
-                type: ViewChild,
-                args: [TemplateRef, { static: true }]
-            }] } });
-
-const TAB_META_KEY = '__meta__';
-class AXPageCloseEvent extends AXEvent {
-}
-class AXPageClosing {
-    constructor() {
-        this.cancel = false;
-    }
-}
-class AXPageResult {
-}
-/**
-*  Defines a CSS class—or multiple classes separated by spaces— which are applied to a span element inside the Button. Allows the usage of custom icons after the primary text.
-*/
-class AXPageClosedPromise extends Promise {
-    constructor(executor) {
-        super(executor);
-    }
-    close() {
-        if (this.closeMethod) {
-            this.closeMethod();
-        }
-    }
-}
-class AXBasePageComponent extends AXBaseComponentMixin {
-    /**
-    *  @ignore
-    */
-    constructor(elementRef, cdr) {
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1$4.Overlay }, { type: i0.Injector }, { type: i1$4.ScrollStrategyOptions }]; } });
+
+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;
-        this._isPopup = false;
-        this.onClosed = new EventEmitter();
     }
     get isLoading() {
         return this._isLoading;
@@ -4425,382 +4748,188 @@ class AXBasePageComponent extends AXBaseComponentMixin {
             name: 'isLoading',
             value: v,
             afterCallback: () => {
-                if (this.pageContainer) {
-                    this.pageContainer.isLoading = this.isLoading;
-                }
-                this._cdr.markForCheck();
-            }
-        });
-    }
-    get isPopup() {
-        return this._isPopup;
-    }
-    close(data) {
-        this.onClosed.emit({
-            component: this,
-            data: data
-        });
-    }
-    onClosing(e) {
-    }
-    ngOnDestroy() {
-        this.onClosed.unsubscribe();
-    }
-}
-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
-        }], 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 {
-}
-AXPageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXPageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXPageHeaderComponent, selector: "ax-page-header", viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
-           <ng-content select="ax-prefix">
-            </ng-content>
-            <ng-content select="ax-suffix">
-            </ng-content>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageHeaderComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-page-header',
-                    template: `
-           <ng-content select="ax-prefix">
-            </ng-content>
-            <ng-content select="ax-suffix">
-            </ng-content>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], propDecorators: { template: [{
-                type: ViewChild,
-                args: [TemplateRef, { static: true }]
-            }] } });
-
-class AXPageModule {
-}
-AXPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageModule, declarations: [AXPageFooterComponent, AXPageHeaderComponent], exports: [AXPageFooterComponent, AXPageHeaderComponent] });
-AXPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageModule, providers: [], imports: [[]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [],
-                    exports: [AXPageFooterComponent, AXPageHeaderComponent],
-                    declarations: [AXPageFooterComponent, AXPageHeaderComponent],
-                    providers: [],
-                }]
-        }] });
-
-const COMPONENT$d = [AXDialogComponent];
-const MODULES$d = [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]] });
-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._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();
+                if (this._loadingId && !v) {
+                    this._loadingService.hide(this._loadingId);
+                    this._loadingId = null;
                 }
-            }
-            else {
-                elm.classList.add('ax-expanded');
-                elm.classList.remove('ax-collapsed');
-                if (this._currentMode == 'overlay') {
-                    this._addBackdrop();
+                if (v) {
+                    this._loadingId = this._loadingService.show(this._getHostElement());
                 }
-            }
-        });
-    }
-    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;
+                this._cdr.markForCheck();
+            }
+        });
     }
 }
-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: [{
+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 });
+AXPageComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageComponent, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [AXLoadingService]
+                    }] }];
+    }, propDecorators: { isLoadingChange: [{
+                type: Output
+            }], isLoading: [{
+                type: Input
+            }] } });
+
+class AXPageFooterComponent {
+}
+AXPageFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXPageFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXPageFooterComponent, selector: "ax-page-footer", viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
+           <ng-content select="ax-prefix">
+            </ng-content>
+            <ng-content select="ax-suffix">
+            </ng-content>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageFooterComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-drawer',
+                    selector: 'ax-page-footer',
                     template: `
-        <ng-content>
-        </ng-content>
+           <ng-content select="ax-prefix">
+            </ng-content>
+            <ng-content select="ax-suffix">
+            </ng-content>
     `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-drawer ax-transition-all' }
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], 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']]
+        }], propDecorators: { template: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
             }] } });
 
-class AXDrawerContainerComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr, zone) {
+const TAB_META_KEY = '__meta__';
+class AXPageCloseEvent extends AXEvent {
+}
+class AXPageClosing {
+    constructor() {
+        this.cancel = false;
+    }
+}
+class AXPageResult {
+}
+/**
+*  Defines a CSS class—or multiple classes separated by spaces— which are applied to a span element inside the Button. Allows the usage of custom icons after the primary text.
+*/
+class AXPageClosedPromise extends Promise {
+    constructor(executor) {
+        super(executor);
+    }
+    close() {
+        if (this.closeMethod) {
+            this.closeMethod();
+        }
+    }
+}
+class AXBasePageComponent extends AXBaseComponentMixin {
+    /**
+    *  @ignore
+    */
+    constructor(elementRef, cdr) {
         super(elementRef, cdr);
-        this.zone = zone;
+        this.isLoadingChange = new EventEmitter();
+        this._isLoading = false;
+        this._isPopup = false;
+        this.onClosed = new EventEmitter();
     }
-    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();
-            });
+    get isLoading() {
+        return this._isLoading;
+    }
+    set isLoading(v) {
+        this._setOption({
+            name: 'isLoading',
+            value: v,
+            afterCallback: () => {
+                if (this.pageContainer) {
+                    this.pageContainer.isLoading = this.isLoading;
+                }
+                this._cdr.markForCheck();
+            }
         });
     }
-    _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`);
+    get isPopup() {
+        return this._isPopup;
+    }
+    close(data) {
+        this.onClosed.emit({
+            component: this,
+            data: data
         });
     }
+    onClosing(e) {
+    }
+    ngOnDestroy() {
+        this.onClosed.unsubscribe();
+    }
 }
-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: AXDrawerContainerComponent, decorators: [{
+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
+        }], 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 {
+}
+AXPageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXPageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXPageHeaderComponent, selector: "ax-page-header", viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
+           <ng-content select="ax-prefix">
+            </ng-content>
+            <ng-content select="ax-suffix">
+            </ng-content>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageHeaderComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-drawer-container',
+                    selector: 'ax-page-header',
                     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>
+           <ng-content select="ax-prefix">
+            </ng-content>
+            <ng-content select="ax-suffix">
+            </ng-content>
     `,
-                    inputs: ['rtl'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-drawer-container' }
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { drawers: [{
-                type: ContentChildren,
-                args: [AXDrawerComponent]
+        }], propDecorators: { template: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
             }] } });
 
-class AXDrawerContentComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
+class AXPageModule {
 }
-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,
+AXPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageModule, declarations: [AXPageFooterComponent, AXPageHeaderComponent], exports: [AXPageFooterComponent, AXPageHeaderComponent] });
+AXPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageModule, providers: [], imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPageModule, decorators: [{
+            type: NgModule,
             args: [{
-                    selector: 'ax-drawer-content',
-                    template: `
-        <ng-content>
-        </ng-content>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-drawer-content' }
+                    imports: [],
+                    exports: [AXPageFooterComponent, AXPageHeaderComponent],
+                    declarations: [AXPageFooterComponent, AXPageHeaderComponent],
+                    providers: [],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+        }] });
 
-const COMPONENT$c = [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent];
-const MODULES$c = [CommonModule];
-class AXDrawerModule {
+const COMPONENT$c = [AXDialogComponent];
+const MODULES$c = [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule];
+class AXDialogModule {
 }
-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: [{
+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$c]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$c],
@@ -7527,5 +7656,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