@acorex/components 5.0.2 → 5.0.7

package/fesm2015/acorex-components.js

@@ -1,25 +1,26 @@
 import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import * as i0 from '@angular/core';
-import { Injectable, Inject, EventEmitter, Directive, NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, HostBinding, HostListener, ContentChildren, ViewChildren, ViewChild, Optional, ContentChild, TemplateRef } from '@angular/core';
+import { Injectable, Inject, EventEmitter, Directive, NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, HostBinding, HostListener, ContentChildren, Optional, ViewChild, ContentChild, ElementRef, ViewChildren, TemplateRef } from '@angular/core';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i2 from '@acorex/core';
-import { AXObjectUtil, AXTranslator, AXConfig, AXDateTime } from '@acorex/core';
-import { Subscription, Subject, merge, asyncScheduler, BehaviorSubject } from 'rxjs';
-import { debounceTime, distinctUntilChanged, observeOn, finalize } from 'rxjs/operators';
-import * as i1 from '@angular/common';
+import { AXObjectUtil, AXDateTime, AXDateTimeRange, AXDateTimeModule, AXDrawingUtil, AXTranslator, AXConfig } from '@acorex/core';
+import { Subscription, Subject, fromEvent, merge, asyncScheduler, BehaviorSubject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, throttleTime, observeOn, finalize } from 'rxjs/operators';
+import * as i4 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
-import * as i1$2 from '@angular/cdk/portal';
-import { TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
-import * as i1$1 from '@angular/cdk/overlay';
-import { OverlayModule, OverlayContainer, Overlay } from '@angular/cdk/overlay';
 import * as i3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import * as i1$1 from '@angular/cdk/portal';
+import { TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import _ from 'lodash';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayModule, OverlayContainer, Overlay } from '@angular/cdk/overlay';
 import * as i2$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i3$1 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as i2$2 from '@angular/cdk/bidi';
-import * as i1$3 from 'ngx-mask';
+import * as i1$2 from 'ngx-mask';
 import { NgxMaskModule } from 'ngx-mask';
 import { trigger, transition, style, animate } from '@angular/animations';
 
@@ -29,7 +30,7 @@ class AXBaseComponent {
     *  @ignore
     */
     constructor(...args) {
-        this.id = `ax-${new Date().getTime().toString()}`;
+        this.id = `AX${Math.round(Math.random() * Math.pow(10, 10))}`;
         _elementRef.set(this, void 0);
         __classPrivateFieldSet(this, _elementRef, args[0]);
         this._cdr = args[1];
@@ -52,14 +53,14 @@ class AXBaseComponent {
         return this._getHostElement().firstElementChild;
     }
     _onInternalInit() {
-        var _a;
         this._getHostElement().__axContext__ = this;
-        this._getHostElement().setAttribute('data-id', this.id);
         if (this.rtl == null) {
             this.rtl = window.getComputedStyle(this._getHostElement(), null).getPropertyValue('direction') === 'rtl';
         }
-        this._getHostElement().classList.add(this.rtl ? 'ax-rtl' : 'ax-ltr');
-        (_a = this._getInnerElement()) === null || _a === void 0 ? void 0 : _a.classList.add(this.rtl ? 'ax-rtl' : 'ax-ltr');
+        //TODO: Apply 
+        // this._getHostElement().classList.add(this.rtl ? 'ax-rtl' : 'ax-ltr');
+        // this._getInnerElement()?.classList.add(this.rtl ? 'ax-rtl' : 'ax-ltr');
+        // this._getHostElement().setAttribute('data-id', this.id);
         this.onInit();
     }
     _onInternalViewInit() {
@@ -207,7 +208,7 @@ function _ButtonComponentMixin(Base) {
                 const cssClasses = {
                     'ax-button-icon': !this.text,
                     'ax-state-disabled': this["disabled"],
-                    'ax-state-selected': this.selected,
+                    'ax-state-selected': this.selected
                 };
                 cssClasses[`ax-${this.color || 'primary'}${this.look ? '-' + this.look : ''}`] = true;
                 return cssClasses;
@@ -449,7 +450,12 @@ function _InteractiveComponenetMixin(Base) {
     }
     _disabled = new WeakMap(), _tabIndex = new WeakMap();
     return Mixin;
-}
+}
+const INTERACTIVE_INPUTS = [
+    'disabled',
+    'tabIndex',
+];
+const INTERACTIVE_OUTPUT = ['onBlur', 'onFocus'];
 
 function _SelectionComponenetMixin(Base) {
     return class extends Base {
@@ -853,11 +859,10 @@ const AXBaseClickableMixin = _SizableComponenetMixin(_InteractiveComponenetMixin
 const AXBaseButtonMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_ClickableComponenetMixin(_ButtonComponentMixin(AXBaseComponent))));
 const AXBaseValueComponentMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_ValueComponenetMixin(AXBaseComponent)));
 const AXBaseTextBoxMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_ValueComponenetMixin(_TextboxComponenetMixin(AXBaseComponent))));
-const AXBaseDropdownMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_DropdownComponenetMixin(AXBaseComponent)));
 const AXBaseSelectionValueMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_DatalistComponenetMixin(_SelectionComponenetMixin(_ValueComponenetMixin(AXBaseComponent)))));
 const AXBaseValueDropdownMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_DropdownComponenetMixin(_DatalistComponenetMixin(_ValueComponenetMixin(AXBaseComponent)))));
 const AXBaseSelectionDropdownMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_DropdownComponenetMixin(_DatalistComponenetMixin(_SelectionComponenetMixin(_ValueComponenetMixin(AXBaseComponent))))));
-const AXCalendarMixin = _ClickableComponenetMixin(_ButtonComponentMixin(_SizableComponenetMixin(AXBaseComponent)));
+const AXCalendarComponentMixin = _ClickableComponenetMixin(_InteractiveComponenetMixin(_ValueComponenetMixin(AXBaseComponent)));
 
 /**
 *  Contains native event
@@ -890,6 +895,12 @@ class AXClickEvent extends AXHtmlEvent {
 class AXButtonClickEvent extends AXClickEvent {
 }
 /**
+*  Fires each time the user click the element.
+* @category Events
+*/
+class AXItemClickEvent extends AXEvent {
+}
+/**
 *  Fires each time the component gets focused.
 * @category Events
 */
@@ -977,13 +988,13 @@ class AXAlertComponent extends AXBaseComponentMixin {
     /**
     *  The Alert allows you to set different types of alerts
     */
-    get type() {
-        return this._type;
+    get color() {
+        return this._color;
     }
-    set type(v) {
-        this._type = v;
+    set color(v) {
+        this._color = v;
         this.typeChange.emit(v);
-        switch (this.type) {
+        switch (this.color) {
             case 'success':
                 this.icon = 'ax-ic ax-ic-check-filled';
                 break;
@@ -999,7 +1010,7 @@ class AXAlertComponent extends AXBaseComponentMixin {
         }
     }
     get hostClass() {
-        return `ax-${this.type}`;
+        return `ax-${this.color}`;
     }
     /**
     *  set the visibility of the Alert
@@ -1012,17 +1023,16 @@ class AXAlertComponent extends AXBaseComponentMixin {
             __classPrivateFieldSet(this, _visible, v);
             const host = this._getHostElement();
             if (v) {
-                host.classList.remove('ax-none', 'animate__fadeOut');
-                host.classList.add('animate__animated', 'animate__fadeIn', 'animate__fast');
+                host.classList.remove('ax-state-hidden');
+                host.classList.add('ax-state-visible');
             }
             else {
-                host.classList.remove('animate__fadeIn');
-                host.classList.add('animate__animated', 'animate__fadeOut', 'animate__fast');
+                host.classList.add('ax-state-hidden');
+                host.classList.toggle('ax-state-visible');
             }
         }
     }
     onInit() {
-        // this._getHostElement().classList.add(`ax-${this.type}`);
         if (this.timeOut) {
             setTimeout(() => {
                 this.dismiss();
@@ -1039,10 +1049,11 @@ class AXAlertComponent extends AXBaseComponentMixin {
     */
     dismiss() {
         const host = this._getHostElement();
-        host.classList.add('animate__animated', 'animate__fadeOut', 'animate__fast');
-        host.addEventListener('animationend', () => {
+        this.visible = false;
+        const func = () => {
             host.parentElement.removeChild(host);
-        });
+        };
+        host.addEventListener('transitionend', func);
     }
     /**
     *  Hide the alert
@@ -1059,7 +1070,7 @@ class AXAlertComponent extends AXBaseComponentMixin {
 }
 _visible = new WeakMap();
 AXAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXAlertComponent, selector: "ax-alert", inputs: { icon: "icon", type: "type", timeOut: "timeOut", visible: "visible" }, outputs: { typeChange: "typeChange" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-alert ax-none" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-alert-icon\" *ngIf=\"icon\">\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 });
+AXAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXAlertComponent, selector: "ax-alert", inputs: { icon: "icon", color: "color", timeOut: "timeOut", visible: "visible" }, outputs: { typeChange: "typeChange" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-alert ax-none" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-alert-icon\" *ngIf=\"icon\">\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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertComponent, decorators: [{
             type: Component,
             args: [{
@@ -1073,7 +1084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 type: Input
             }], typeChange: [{
                 type: Output
-            }], type: [{
+            }], color: [{
                 type: Input
             }], hostClass: [{
                 type: HostBinding,
@@ -1123,7 +1134,7 @@ AXAlertButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", v
 AXAlertButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXAlertButtonComponent, selector: "ax-alert-button", inputs: { title: "title", 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: `
        {{title}}
        <i *ngIf="icon" class="{{icon}}"></i>
-    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -1221,7 +1232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 }]
         }] });
 
-const COMPONENT$k = [
+const COMPONENT$n = [
     AXAlertComponent,
     AXAlertContentComponent,
     AXAlertTitleComponent,
@@ -1229,7 +1240,7 @@ const COMPONENT$k = [
     AXAlertFooterComponent,
     AXAlertSuffixComponent
 ];
-const MODULES$k = [CommonModule];
+const MODULES$n = [CommonModule];
 class AXAlertModule {
 }
 AXAlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1244,13 +1255,13 @@ AXAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         AXAlertButtonComponent,
         AXAlertFooterComponent,
         AXAlertSuffixComponent] });
-AXAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertModule, providers: [], imports: [[...MODULES$k]] });
+AXAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertModule, providers: [], imports: [[...MODULES$n]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$k],
-                    imports: [...MODULES$k],
-                    exports: [...COMPONENT$k],
+                    declarations: [...COMPONENT$n],
+                    imports: [...MODULES$n],
+                    exports: [...COMPONENT$n],
                     providers: [],
                 }]
         }] });
@@ -1306,19 +1317,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 type: Input
             }] } });
 
-const COMPONENT$j = [AXAvatarComponent];
-const MODULES$j = [CommonModule];
+const COMPONENT$m = [AXAvatarComponent];
+const MODULES$m = [CommonModule];
 class AXAvatarModule {
 }
 AXAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAvatarModule, declarations: [AXAvatarComponent], imports: [CommonModule], exports: [AXAvatarComponent] });
-AXAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAvatarModule, providers: [], imports: [[...MODULES$j]] });
+AXAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAvatarModule, providers: [], imports: [[...MODULES$m]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAvatarModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$j],
-                    imports: [...MODULES$j],
-                    exports: [...COMPONENT$j],
+                    declarations: [...COMPONENT$m],
+                    imports: [...MODULES$m],
+                    exports: [...COMPONENT$m],
+                    providers: [],
+                }]
+        }] });
+
+class AXBadgeComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.text = '';
+        this.color = 'light';
+        //TODO: ax-badge
+    }
+    get __hostClass() {
+        return [`ax-bg-${this.color}-100`, `ax-text-${this.color}-600`].join(' ');
+    }
+}
+AXBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBadgeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXBadgeComponent, selector: "ax-badge", inputs: { text: "text", color: "color" }, host: { properties: { "class": "this.__hostClass" }, classAttribute: "ax-badge" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<span class=\"ax-font-medium\">{{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: "12.2.6", ngImport: i0, type: AXBadgeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-badge',
+                    templateUrl: './badge.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'ax-badge' }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
+                type: Input
+            }], color: [{
+                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: "12.2.6", ngImport: i0, type: AXBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBadgeModule, declarations: [AXBadgeComponent], imports: [CommonModule], exports: [AXBadgeComponent] });
+AXBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBadgeModule, providers: [], imports: [[...MODULES$l]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBadgeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT$l],
+                    imports: [...MODULES$l],
+                    exports: [...COMPONENT$l],
                     providers: [],
                 }]
         }] });
@@ -1344,7 +1403,6 @@ class AXButtonComponent extends AXBaseButtonMixin {
         }
     }
     _emitOnClickEvent(e) {
-        debugger;
         if (this.disabled)
             return;
         if (this.toggleable) {
@@ -1352,22 +1410,171 @@ class AXButtonComponent extends AXBaseButtonMixin {
         }
         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]).concat(...[`ax-${this.size}`]).join(' ');
+    }
 }
 AXButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXButtonComponent, selector: "ax-button", inputs: { disabled: "disabled", tabIndex: "tabIndex", size: "size", cssClass: "cssClass", cssStyle: "cssStyle", text: "text", submitBehavior: "submitBehavior", cancelBehavior: "cancelBehavior", color: "color", look: "look", toggleable: "toggleable", selected: "selected" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, 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-loading\">\r\n  </ng-content>\r\n  <ng-content select=\"ax-prefix\">\r\n  </ng-content>\r\n  <ng-content select=\"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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXButtonComponent, selector: "ax-button", inputs: { disabled: "disabled", tabIndex: "tabIndex", size: "size", text: "text", submitBehavior: "submitBehavior", cancelBehavior: "cancelBehavior", color: "color", look: "look", toggleable: "toggleable", selected: "selected" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange" }, host: { attributes: { "role": "button" }, listeners: { "document:keydown.escape": "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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-button',
                     templateUrl: './button.component.html',
-                    inputs: ['disabled', 'tabIndex', 'size', 'cssClass', 'cssStyle', ...BUTTON_INPUTS],
+                    inputs: ['disabled', 'tabIndex', 'size', ...BUTTON_INPUTS],
                     outputs: [...BUTTON_OUTPUT],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    host: { role: 'button' }
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { onKeydownHandler: [{
                 type: HostListener,
                 args: ['document:keydown.escape', ['$event']]
+            }], _emitOnClickEvent: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], _emitOnFocusEvent: [{
+                type: HostListener,
+                args: ['focus', ['$event']]
+            }], _emitOnBlurEvent: [{
+                type: HostListener,
+                args: ['blur', ['$event']]
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class AXButtonGroupComponent extends AXInteractiveComponenetMixin {
+    constructor(elementRef, zone, cdr) {
+        super(elementRef, cdr);
+        this.zone = zone;
+        this.selectionChange = new EventEmitter();
+        this.colorChange = new EventEmitter();
+        this._color = 'primary';
+        this.lookChange = new EventEmitter();
+        this._look = null;
+        this.onItemClick = new EventEmitter();
+        this.onValueChanged = new EventEmitter();
+    }
+    get selection() {
+        return this._selection;
+    }
+    set selection(value) {
+        value = this.onOptionChanging({ name: 'selection', value: value });
+        const oldValue = this.selection;
+        if (value != oldValue) {
+            this._selection = value;
+            this.selectionChange.emit(value);
+            this.onOptionChanged({ name: 'selection', oldValue, newValue: value });
+        }
+    }
+    /**
+    *  Predefined color schemes
+    */
+    get color() {
+        return this._color;
+    }
+    set color(value) {
+        value = this.onOptionChanging({ name: 'color', value: value });
+        const oldValue = this.color;
+        if (value != oldValue) {
+            this._color = value;
+            this.colorChange.emit(value);
+            this.onOptionChanged({ name: 'value', oldValue, newValue: value });
+        }
+    }
+    /**
+    *  Predefined look schemes
+    */
+    get look() {
+        return this._look;
+    }
+    set look(value) {
+        value = this.onOptionChanging({ name: 'look', value: value });
+        const oldValue = this.look;
+        if (value != oldValue) {
+            this._look = value;
+            this.lookChange.emit(value);
+            this.onOptionChanged({ name: 'look', oldValue, newValue: value });
+        }
+    }
+    ngAfterContentInit() {
+        this._bindEvents();
+        this._bindProps();
+    }
+    _bindEvents() {
+        (this._contentButtons || []).forEach(b => {
+            b.onClick.subscribe(c => {
+                this._handleClickEvent(c, b);
+            });
+        });
+    }
+    _bindProps() {
+        (this._contentButtons || []).forEach(b => {
+            b.look = this.look;
+            b.color = this.color;
+            b.disabled = this.disabled;
+            b.toggleable = false;
+        });
+    }
+    onOptionChanged(options) {
+        this._bindProps();
+    }
+    _handleClickEvent(e, button) {
+        if (this.selection == 'multiple') {
+            button.selected = !button.selected;
+        }
+        else if (this.selection == 'single') {
+            this._contentButtons.forEach(c => {
+                c.selected = false;
+            });
+            button.selected = true;
+        }
+        else {
+            button.selected = false;
+        }
+        this.onItemClick.emit({
+            component: this,
+            htmlElement: e.htmlElement,
+            item: button
+        });
+    }
+}
+AXButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXButtonGroupComponent, selector: "ax-button-group", inputs: { cssClass: "cssClass", size: "size", cssStyle: "cssStyle", rtl: "rtl", disabled: "disabled", selection: "selection", color: "color", look: "look" }, outputs: { selectionChange: "selectionChange", colorChange: "colorChange", lookChange: "lookChange", onItemClick: "onItemClick" }, host: { attributes: { "role": "group" }, classAttribute: "ax-button-group" }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-button\">\r\n</ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-button-group',
+                    templateUrl: 'button-group.component.html',
+                    inputs: ['cssClass', 'size', 'cssStyle', 'rtl', 'disabled'],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'ax-button-group', role: 'group' }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { selectionChange: [{
+                type: Output
+            }], selection: [{
+                type: Input
+            }], colorChange: [{
+                type: Output
+            }], color: [{
+                type: Input
+            }], lookChange: [{
+                type: Output
+            }], look: [{
+                type: Input
+            }], onItemClick: [{
+                type: Output
+            }], _contentButtons: [{
+                type: ContentChildren,
+                args: [AXButtonComponent, { descendants: true }]
             }] } });
 
 const AXBaseItemButtonMixin = _InteractiveComponenetMixin(_ClickableComponenetMixin(AXBaseComponent));
@@ -1405,7 +1612,7 @@ AXButtonItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         <span *ngIf="text">{{text}}</span>
         <ng-content select="ax-suffix">
         </ng-content>
-    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -1445,526 +1652,428 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 args: ['class']
             }] } });
 
-class AXIconComponent extends AXSizableComponentMixin {
+class AXDecoratorPrefixComponent extends AXBaseComponentMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
     }
-    get iconClass() {
-        return `ax-ic ${this.icon}`;
-    }
 }
-AXIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXIconComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXIconComponent, selector: "ax-icon", inputs: { icon: "icon" }, host: { properties: { "class": "this.iconClass" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXIconComponent, decorators: [{
+AXDecoratorPrefixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDecoratorPrefixComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDecoratorPrefixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDecoratorPrefixComponent, selector: "ax-prefix", host: { classAttribute: "ax-prefix" }, usesInheritance: true, ngImport: i0, template: `
+        <ng-content select="ax-button,ax-loading,ax-icon,ax-badge">
+        </ng-content>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDecoratorPrefixComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-icon',
-                    template: '',
+                    selector: 'ax-prefix',
+                    template: `
+        <ng-content select="ax-button,ax-loading,ax-icon,ax-badge">
+        </ng-content>
+    `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
+                    host: { class: 'ax-prefix' }
                 }]
-        }], 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 }]; } });
 
-class AXDecoratorPrefixComponent extends AXBaseComponentMixin {
+class AXDecoratorSuffixComponent extends AXBaseComponentMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
     }
 }
-AXDecoratorPrefixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDecoratorPrefixComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDecoratorPrefixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDecoratorPrefixComponent, selector: "ax-prefix", host: { classAttribute: "ax-prefix" }, usesInheritance: true, ngImport: i0, template: `
-        <ng-content select="ax-button,ax-loading,ax-dropdown-button,ax-icon">
+AXDecoratorSuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDecoratorSuffixComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDecoratorSuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDecoratorSuffixComponent, selector: "ax-suffix", host: { classAttribute: "ax-suffix" }, usesInheritance: true, ngImport: i0, template: `
+        <ng-content select="ax-button,ax-icon,ax-badge">
         </ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDecoratorPrefixComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDecoratorSuffixComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-prefix',
+                    selector: 'ax-suffix',
                     template: `
-        <ng-content select="ax-button,ax-loading,ax-dropdown-button,ax-icon">
+        <ng-content select="ax-button,ax-icon,ax-badge">
         </ng-content>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-prefix' }
+                    host: { class: 'ax-suffix' }
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-const AXBaseDropdownButtonMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_ClickableComponenetMixin(_ButtonComponentMixin(_DropdownComponenetMixin((AXBaseComponent))))));
-class AXDropdownButtonComponent extends AXBaseDropdownButtonMixin {
-    constructor(_elementRef, _cdr, _overlay, _platform, _viewContainerRef) {
-        super(_elementRef, _cdr);
-        this._overlay = _overlay;
-        this._platform = _platform;
-        this._viewContainerRef = _viewContainerRef;
-        this.onItemClick = new EventEmitter();
-        this._subs = [];
-        this.dropdownIcon = 'ax-ic-chevron ax-transform ax--rotate-90';
-        this.splited = true;
+const COMPONENT$k = [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent];
+const MODULES$k = [CommonModule];
+class AXEditorDecoratorModule {
+}
+AXEditorDecoratorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXEditorDecoratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXEditorDecoratorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXEditorDecoratorModule, declarations: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent], imports: [CommonModule], exports: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent] });
+AXEditorDecoratorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXEditorDecoratorModule, providers: [], imports: [[...MODULES$k]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXEditorDecoratorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT$k],
+                    imports: [...MODULES$k],
+                    exports: [...COMPONENT$k],
+                    providers: [],
+                }]
+        }] });
+
+class AXIconComponent extends AXSizableComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
     }
-    get items() {
-        return this._items || [];
-    }
-    set items(v) {
-        this._items = v;
-        this._cdr.markForCheck();
-    }
-    _getAllButtons() {
-        return [...Array.from(this._viewButtons), ...Array.from(this._contentButtons)];
-    }
-    onViewInit() {
-        this._getAllButtons().forEach(c => {
-            this._subs.push(c.onClick.subscribe(this._handleOnItemClick.bind(this)));
-        });
-    }
-    onDestroy() {
-        var _a, _b;
-        (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
-        (_b = this._overlayRef) === null || _b === void 0 ? void 0 : _b.dispose();
-        this._subs.forEach(s => {
-            s === null || s === void 0 ? void 0 : s.unsubscribe();
-        });
-    }
-    _handleKeydownHandler(e) {
-        if (e.key === 'Enter' && e.type === 'keydown') {
-            this.toggle();
-        }
-        if (e.key === 'Escape') {
-            if (this.isOpen) {
-                this.close();
-                e.stopPropagation();
-            }
-        }
-    }
-    _emitOnClickEvent(e) {
-        if (!this.splited) {
-            this.toggle();
-        }
-        else {
-            super._emitOnClickEvent(e);
-        }
-    }
-    _handleArrowClickEvent(e) {
-        this.toggle();
-    }
-    _emitOnItemClickEvent(e, item) {
-        this.onItemClick.emit({
-            component: this,
-            htmlElement: this._getHostElement(),
-            nativeEvent: e.nativeEvent,
-            name: item.name,
-            data: item.data,
-        });
-        this.close();
-    }
-    _handleOnItemClick(e) {
-        this.close();
-        this._emitOnItemClickEvent(e, e.component);
-    }
-    toggle() {
-        if (this.disabled !== true) {
-            this.isOpen ? this.close() : this.open();
-        }
-    }
-    close() {
-        var _a, _b;
-        if (!this.isOpen) {
-            return;
-        }
-        (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
-        (_b = this._subs[1]) === null || _b === void 0 ? void 0 : _b.unsubscribe();
-        this._emitOnClosedEvent();
-    }
-    open() {
-        if (this.isOpen) {
-            return;
-        }
-        this._ensureOverlayCreated();
-        this._overlayRef.attach(this._templatePortal);
-        this._emitOnOpenedEvent();
-    }
-    _ensureOverlayCreated() {
-        let baseSize = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', '')) / 2;
-        if (!this._overlayRef) {
-            const positionStrategy = this._overlay.position()
-                .flexibleConnectedTo(this._getInnerElement())
-                .withPositions([
-                {
-                    originX: 'start',
-                    originY: 'bottom',
-                    overlayX: 'start',
-                    overlayY: 'top',
-                    offsetY: baseSize
-                },
-                {
-                    originX: 'start',
-                    originY: 'top',
-                    overlayX: 'start',
-                    overlayY: 'bottom'
-                }
-            ])
-                .withPush(false);
-            this._overlayRef = this._overlay.create({
-                positionStrategy,
-                scrollStrategy: this._overlay.scrollStrategies.close(),
-                panelClass: ['animate__animated', 'animate__fadeIn', 'animate__faster'],
-                hasBackdrop: false,
-                backdropClass: ['cdk-overlay-transparent-backdrop']
-            });
-            this._subs[0] = this._overlayRef._outsidePointerEvents.subscribe(c => {
-                const target = c.target;
-                const comElem = this._getHostElement();
-                if (!(comElem.contains(target))) {
-                    this.close();
-                }
-            });
-            this._subs[1] = this._overlayRef.attachments().subscribe(() => {
-                if (this.fitParent === true) {
-                    this._dropdownWidth = this._getHostElement().offsetWidth;
-                }
-                else {
-                    this._dropdownWidth = this._getHostElement().offsetWidth * 1.5;
-                }
-                this._subs[2] = this._platform.scroll.subscribe(c => {
-                    if (!c.nativeEvent.target.closest('.ax-overlay-pane'))
-                        this.close();
-                });
-            });
-        }
-        if (!this._templatePortal) {
-            this._templatePortal = new TemplatePortal(this._baseTemplate, this._viewContainerRef);
-        }
-    }
-    get isOpen() {
-        return this._overlayRef ? this._overlayRef.hasAttached() : false;
+    get __iconClass() {
+        return `ax-ic ${this.icon}`;
     }
 }
-AXDropdownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.Overlay }, { token: i2.AXPlatform }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDropdownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: { disabled: "disabled", tabIndex: "tabIndex", size: "size", cssClass: "cssClass", text: "text", submitBehavior: "submitBehavior", cancelBehavior: "cancelBehavior", color: "color", look: "look", toggleable: "toggleable", selected: "selected", items: "items", dropdownIcon: "dropdownIcon", splited: "splited" }, outputs: { onClick: "onClick", onBlur: "onBlur", onFocus: "onFocus", onItemClick: "onItemClick" }, host: { listeners: { "keydown": "_handleKeydownHandler($event)" }, classAttribute: "ax-dropdown-button" }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonItemComponent }], viewQueries: [{ propertyName: "_baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }, { propertyName: "_viewButtons", predicate: AXButtonItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<button [ngClass]=\"_classes\" class=\"{{cssClass}}\" [disabled]=\"disabled\" [tabindex]=\"tabIndex\" [attr.style]=\"cssStyle\"\r\n    (click)=\"_emitOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    <ng-content select=\"ax-loading\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-prefix\">\r\n    </ng-content>\r\n    <ng-content select=\"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-container *ngIf=\"!splited\">\r\n        <ax-icon [icon]=\"dropdownIcon\"></ax-icon>\r\n    </ng-container>\r\n</button>\r\n<button class=\"ax-button ax-dropdown-arrow {{cssClass}}\" (click)=\"_handleArrowClickEvent($event)\" *ngIf=\"splited\">\r\n    <ax-icon [icon]=\"dropdownIcon\"></ax-icon>\r\n</button>\r\n<ng-template #baseTemplate>\r\n    <div class=\"ax-overlay-pane ax-dropdown-list\" [style.min-width.px]=\"_dropdownWidth\">\r\n        <ng-container *ngIf=\"items && items.length;else panelTpl\">\r\n            <ax-button-item [text]=\"item.text\" [color]=\"item.color\"   *ngFor=\"let item of items\">\r\n                <ax-prefix *ngIf=\"item.iconClass\">\r\n                    <ax-icon [icon]=\"item.iconClass\"></ax-icon>\r\n                </ax-prefix>\r\n            </ax-button-item>\r\n        </ng-container>\r\n        <ng-template #panelTpl>\r\n            <ng-content select=\"ng-container[panel],ax-button-item\">\r\n            </ng-content>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>", components: [{ type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["text", "tooltip", "selected", "seperated", "name", "data", "color"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownButtonComponent, decorators: [{
+AXIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXIconComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXIconComponent, selector: "ax-icon", inputs: { icon: "icon" }, host: { properties: { "class": "this.__iconClass" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXIconComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-dropdown-button',
-                    templateUrl: 'dropdown-button.component.html',
-                    inputs: ['disabled', 'tabIndex', 'size', 'cssClass', ...BUTTON_INPUTS],
-                    outputs: ['onClick', 'onBlur', 'onFocus'],
-                    encapsulation: ViewEncapsulation.None,
+                    selector: 'ax-icon',
+                    template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'ax-dropdown-button' }
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.Overlay }, { type: i2.AXPlatform }, { type: i0.ViewContainerRef }]; }, propDecorators: { _contentButtons: [{
-                type: ContentChildren,
-                args: [AXButtonItemComponent]
-            }], _viewButtons: [{
-                type: ViewChildren,
-                args: [AXButtonItemComponent]
-            }], onItemClick: [{
-                type: Output
-            }], items: [{
-                type: Input
-            }], _baseTemplate: [{
-                type: ViewChild,
-                args: ['baseTemplate']
-            }], dropdownIcon: [{
-                type: Input
-            }], splited: [{
-                type: Input
-            }], _handleKeydownHandler: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
-
-class AXButtonGroupComponent extends AXInteractiveComponenetMixin {
-    constructor(elementRef, zone, cdr) {
-        super(elementRef, cdr);
-        this.zone = zone;
-        this.selectionChange = new EventEmitter();
-        this.colorChange = new EventEmitter();
-        this._color = 'primary';
-        this.lookChange = new EventEmitter();
-        this._look = null;
-        this.onItemClick = new EventEmitter();
-    }
-    get selection() {
-        return this._selection;
-    }
-    set selection(value) {
-        value = this.onOptionChanging({ name: 'selection', value: value });
-        const oldValue = this.selection;
-        if (value != oldValue) {
-            this._selection = value;
-            this.selectionChange.emit(value);
-            this.onOptionChanged({ name: 'selection', oldValue, newValue: value });
-        }
-    }
-    /**
-    *  Predefined color schemes
-    */
-    get color() {
-        return this._color;
-    }
-    set color(value) {
-        value = this.onOptionChanging({ name: 'color', value: value });
-        const oldValue = this.color;
-        if (value != oldValue) {
-            this._color = value;
-            this.colorChange.emit(value);
-            this.onOptionChanged({ name: 'value', oldValue, newValue: value });
-        }
-    }
-    /**
-    *  Predefined look schemes
-    */
-    get look() {
-        return this._look;
-    }
-    set look(value) {
-        value = this.onOptionChanging({ name: 'look', value: value });
-        const oldValue = this.look;
-        if (value != oldValue) {
-            this._look = value;
-            this.lookChange.emit(value);
-            this.onOptionChanged({ name: 'look', oldValue, newValue: value });
-        }
-    }
-    ngAfterContentInit() {
-        this._bindEvents();
-        this._bindProps();
-    }
-    _bindEvents() {
-        (this._contentButtons || []).forEach(b => {
-            b.onClick.subscribe(c => {
-                this._handleClickEvent(c, b);
-            });
-        });
-    }
-    _bindProps() {
-        (this._contentButtons || []).forEach(b => {
-            b.look = this.look;
-            b.color = this.color;
-            b.disabled = this.disabled;
-            b.toggleable = false;
-        });
-    }
-    onOptionChanged(options) {
-        this._bindProps();
-    }
-    _handleClickEvent(e, button) {
-        if (this.selection == 'multiple') {
-            button.selected = !button.selected;
-        }
-        else if (this.selection == 'single') {
-            this._contentButtons.forEach(c => {
-                c.selected = false;
-            });
-            button.selected = true;
-        }
-        else {
-            button.selected = false;
-        }
-        this.onItemClick.emit({
-            component: this,
-            htmlElement: e.htmlElement,
-            data: e.data,
-            nativeEvent: e.nativeEvent
-        });
-    }
-}
-AXButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXButtonGroupComponent, selector: "ax-button-group", inputs: { cssClass: "cssClass", size: "size", cssStyle: "cssStyle", rtl: "rtl", disabled: "disabled", selection: "selection", color: "color", look: "look" }, outputs: { selectionChange: "selectionChange", colorChange: "colorChange", lookChange: "lookChange", onItemClick: "onItemClick" }, host: { attributes: { "role": "group" }, classAttribute: "ax-button-group" }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-button\">\r\n</ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonGroupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-button-group',
-                    templateUrl: 'button-group.component.html',
-                    inputs: ['cssClass', 'size', 'cssStyle', 'rtl', 'disabled'],
                     encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'ax-button-group', role: 'group' }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { selectionChange: [{
-                type: Output
-            }], selection: [{
-                type: Input
-            }], colorChange: [{
-                type: Output
-            }], color: [{
-                type: Input
-            }], lookChange: [{
-                type: Output
-            }], look: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { icon: [{
                 type: Input
-            }], onItemClick: [{
-                type: Output
-            }], _contentButtons: [{
-                type: ContentChildren,
-                args: [AXButtonComponent, { descendants: true }]
+            }], __iconClass: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
-class AXDecoratorSuffixComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-}
-AXDecoratorSuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDecoratorSuffixComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDecoratorSuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDecoratorSuffixComponent, selector: "ax-suffix", host: { classAttribute: "ax-suffix" }, usesInheritance: true, ngImport: i0, template: `
-        <ng-content select="ax-button">
-        </ng-content>
-        <ng-content select="ax-dropdown-button">
-        </ng-content>
-        <ng-content select="ax-icon">
-        </ng-content>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDecoratorSuffixComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-suffix',
-                    template: `
-        <ng-content select="ax-button">
-        </ng-content>
-        <ng-content select="ax-dropdown-button">
-        </ng-content>
-        <ng-content select="ax-icon">
-        </ng-content>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-suffix' }
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
-
-const COMPONENT$i = [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent];
-const MODULES$i = [CommonModule];
-class AXEditorDecoratorModule {
-}
-AXEditorDecoratorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXEditorDecoratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXEditorDecoratorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXEditorDecoratorModule, declarations: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent], imports: [CommonModule], exports: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent] });
-AXEditorDecoratorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXEditorDecoratorModule, providers: [], imports: [[...MODULES$i]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXEditorDecoratorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...COMPONENT$i],
-                    imports: [...MODULES$i],
-                    exports: [...COMPONENT$i],
-                    providers: [],
-                }]
-        }] });
-
-const COMPONENT$h = [AXIconComponent];
-const MODULES$h = [CommonModule];
+const COMPONENT$j = [AXIconComponent];
+const MODULES$j = [CommonModule];
 class AXIconModule {
 }
 AXIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXIconModule, declarations: [AXIconComponent], imports: [CommonModule], exports: [AXIconComponent] });
-AXIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXIconModule, providers: [], imports: [[...MODULES$h]] });
+AXIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXIconModule, providers: [], imports: [[...MODULES$j]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXIconModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$h],
-                    imports: [...MODULES$h],
-                    exports: [...COMPONENT$h],
+                    declarations: [...COMPONENT$j],
+                    imports: [...MODULES$j],
+                    exports: [...COMPONENT$j],
                     providers: [],
                 }]
         }] });
 
-const COMPONENT$g = [
+const COMPONENT$i = [
     AXButtonComponent,
-    AXDropdownButtonComponent,
     AXButtonItemComponent,
     AXButtonGroupComponent,
 ];
-const MODULES$g = [CommonModule, AXIconModule, AXEditorDecoratorModule];
+const MODULES$i = [CommonModule, AXIconModule, AXEditorDecoratorModule];
 class AXButtonModule {
 }
 AXButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonModule, declarations: [AXButtonComponent,
-        AXDropdownButtonComponent,
         AXButtonItemComponent,
         AXButtonGroupComponent], imports: [CommonModule, AXIconModule, AXEditorDecoratorModule], exports: [AXButtonComponent,
-        AXDropdownButtonComponent,
         AXButtonItemComponent,
         AXButtonGroupComponent] });
-AXButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonModule, providers: [], imports: [[MODULES$g]] });
+AXButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonModule, providers: [], imports: [[MODULES$i]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [MODULES$g],
-                    exports: [COMPONENT$g],
-                    declarations: [COMPONENT$g],
+                    imports: [MODULES$i],
+                    exports: [COMPONENT$i],
+                    declarations: [COMPONENT$i],
                     providers: [],
                 }]
         }] });
 
-class AXCalendarComponent extends AXCalendarMixin {
+class AXCalendarComponent extends AXCalendarComponentMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
-        this.actionBar = false;
-        this.showTime = false;
-        this.dayItems = new Array(32);
-        this.yearItems = [1990];
-        this.monthItems = [
-            'January',
-            'February',
-            'March',
-            'April',
-            'May',
-            'June',
-            'July',
-            'August',
-            'September',
-            'October',
-            'November',
-            'December',
-        ];
-        this.createYears();
+        this.cdr = cdr;
+        this._today = new AXDateTime(new Date());
+        this._navText = '';
+        this._todayText = '';
+        this._slots = [];
+        this._activeView = 'days';
+        this.depthChange = new EventEmitter();
+        this._depth = 'days';
+    }
+    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;
+                return new AXDateTimeRange(AXDateTime.convert(new Date(min, 0), this._today.calendar.name()), AXDateTime.convert(new Date(max, 0), this._today.calendar.name()));
+            case 'months':
+                //TODO: check add month function
+                return new AXDateTimeRange(current.startOf('year'), current.endOf('year').add('month', 4).add('day', -1));
+            default:
+                //return new AXDateTimeRange(current.startOf('month').startOf('week'), current.endOf('month').endOf('week'));
+                return new AXDateTimeRange(current.startOf('month'), current.endOf('month'));
+        }
     }
-    ngAfterViewInit() {
+    get activeView() {
+        return this._activeView;
     }
-    createYears() {
-        let number = 1990;
-        for (let i = 0; i < 40; i++) {
-            number = number + 1;
-            this.yearItems.push(number);
+    set activeView(v) {
+        this._activeView = v;
+        this._genearteSlots();
+    }
+    get depth() {
+        return this._depth;
+    }
+    set depth(v) {
+        this._depth = v;
+        this._activeView = v;
+        this.depthChange.emit(v);
+        this._genearteSlots();
+    }
+    get min() {
+        return this._min;
+    }
+    set min(v) {
+        this._min = v;
+    }
+    get max() {
+        return this._max;
+    }
+    set max(v) {
+        this._max = v;
+    }
+    get disabledDates() {
+        return this._disabledDates;
+    }
+    set disabledDates(v) {
+        this._disabledDates = v;
+    }
+    get holidayDates() {
+        return this._holidayDates;
+    }
+    set holidayDates(v) {
+        this._holidayDates = v;
+    }
+    onInit() {
+        this.goToday();
+    }
+    _genearteSlots() {
+        if (!this._viewStartDate)
+            return;
+        const vr = this._viewRange;
+        // year view
+        if (this.activeView == 'years') {
+            const a = vr.enumurate('year');
+            this._slots = a.map((d, i) => {
+                const r = {};
+                r.date = d.date;
+                r.text = d.format('YYYY');
+                r.disabled = (this.min && d.compare(this.min, 'year') == -1) || (this.max && d.compare(this.max, 'year') == 1);
+                if (r.disabled) {
+                    r.cssClass = {
+                        'ax-state-disabled': r.disabled,
+                    };
+                }
+                else {
+                    r.cssClass = {
+                        'ax-state-today': d.equal(this._today, 'year'),
+                        'ax-state-selected': this.value && this.depth == 'years' && d.equal(this.value, 'year'),
+                    };
+                }
+                return r;
+            });
+            this._navText = `${vr.startTime.year} - ${vr.endTime.year}`;
+            this._todayText = this._today.format('YYYY');
+        }
+        // month view
+        else if (this.activeView == 'months') {
+            const a = vr.enumurate('month');
+            this._slots = a.map((d, i) => {
+                const r = {};
+                r.date = d.date;
+                r.text = d.format('MMM');
+                r.tooltip = d.format('MMMM YYYY');
+                r.disabled = (this.min && d.compare(this.min, 'month') == -1) || (this.max && d.compare(this.max, 'month') == 1);
+                if (r.disabled) {
+                    r.cssClass = {
+                        'ax-state-disabled': r.disabled,
+                    };
+                }
+                else {
+                    r.cssClass = {
+                        'ax-state-today': d.equal(this._today, 'month'),
+                        'ax-state-selected': this.value && this.depth == 'months' && d.equal(this.value, 'month'),
+                        'ax-state-other': d.year != this._viewStartDate.year
+                    };
+                }
+                return r;
+            });
+            this._navText = this._viewStartDate.format('YYYY');
+            this._todayText = this._today.format('MMMM YYYY');
+        }
+        // day view
+        else {
+            const a = vr.enumurate('day');
+            this._slots = a.map((d, i) => {
+                const r = {};
+                r.date = d.date;
+                r.text = d.dayOfMonth;
+                r.tooltip = d.format();
+                r.disabled = (this.min && d.compare(this.min, 'day') == -1) || (this.max && d.compare(this.max, 'day') == 1);
+                if (r.disabled || this.isDisabled(d)) {
+                    r.cssClass = {
+                        'ax-state-disabled': true,
+                    };
+                }
+                else {
+                    r.cssClass = {
+                        'ax-state-today': d.equal(this._today, 'day'),
+                        'ax-state-selected': this.value && d.equal(this.value, 'day'),
+                        'ax-state-holiday': this.isHoliday(d) || this.isWeekend(d),
+                        // 'ax-state-event-info': d.dayOfMonth == 12,
+                        // 'ax-state-event': d.dayOfMonth == 12,
+                    };
+                }
+                r.cssClass[`ax-col-start-${vr.startTime.dayOfWeek}`] = i == 0;
+                return r;
+            });
+            this._navText = this._viewStartDate.format('MMMM YYYY');
+            this._todayText = this._today.format('DDDD, MMMM dd, YYYY');
+        }
+    }
+    _handlePrevClick(e) {
+        this.prev();
+    }
+    _handleNextClick(e) {
+        this.next();
+    }
+    _handleSlotClick(slot) {
+        if (slot.disabled || this.disabled)
+            return;
+        if (this.activeView == 'days') {
+            this.value = slot.date;
+        }
+        else if (this.activeView == 'months' && this.depth == 'days') {
+            this.activeView = 'days';
+            this.navTo(slot.date);
+        }
+        else if (this.activeView == 'months' && this.depth == 'months') {
+            this.value = slot.date;
+        }
+        else if (this.activeView == 'years' && (this.depth == 'days' || this.depth == 'months')) {
+            this.activeView = 'months';
+            this.navTo(slot.date);
+        }
+        else if (this.activeView == 'years' && this.depth == 'years') {
+            this.value = slot.date;
+        }
+    }
+    _handleNavClick(e) {
+        if (this.activeView == 'days')
+            this.activeView = 'months';
+        else if (this.activeView == 'months')
+            this.activeView = 'years';
+    }
+    _onValueChanged(oldValue, newValue) {
+        this._genearteSlots();
+    }
+    _handleGoToday() {
+        this.value = this._today.date;
+        this.goToday();
+    }
+    next() {
+        this._navNextPrev(false);
+    }
+    prev() {
+        this._navNextPrev(true);
+    }
+    _navNextPrev(prev) {
+        const sign = (prev ? -1 : 1);
+        if (this.activeView == 'days')
+            this.navTo(this._viewStartDate.add('month', sign * 1));
+        else if (this.activeView == 'months')
+            this.navTo(this._viewStartDate.add('year', sign * 1));
+        else
+            this.navTo(this._viewStartDate.add('year', sign * 12));
+    }
+    goToday() {
+        this.navTo(this._today.startOf());
+    }
+    navTo(date) {
+        this._viewStartDate = AXDateTime.convert(date, this._today.calendar.name());
+        this._genearteSlots();
+    }
+    get __hostClass() {
+        const _classes = {
+            'ax-state-disabled': this.disabled
+        };
+        return Object.entries(_classes).filter(c => c[1]).map(c => c[0]).join(' ');
+    }
+    isDisabled(date) {
+        if (Array.isArray(this.disabledDates) && this.disabledDates.length != 0) {
+            debugger;
+            return this.disabledDates.some(d => date.equal(d, 'day'));
+        }
+        else if (typeof this.disabledDates == 'function') {
+            return this.disabledDates(date.date);
+        }
+        return false;
+    }
+    isHoliday(date) {
+        if (Array.isArray(this.holidayDates) && this.holidayDates.length != 0) {
+            return this.holidayDates.some(d => date.equal(d, 'day'));
+        }
+        else if (typeof this.holidayDates == 'function') {
+            return this.holidayDates(date.date);
         }
+        return false;
+    }
+    isWeekend(date) {
+        return date.dayOfWeek == 7 || date.dayOfWeek == 1;
     }
 }
 AXCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXCalendarComponent, selector: "ax-calendar", inputs: { disabled: "disabled", tabIndex: "tabIndex", size: "size", cssClass: "cssClass", cssStyle: "cssStyle", actionBar: "actionBar", showTime: "showTime" }, viewQueries: [{ propertyName: "days", first: true, predicate: ["days"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar\">\r\n    <div class=\"ax-calendar-header\">\r\n        <ax-button cssClass=\"ax-nav-button\" text=\"October 2021\" color=\"light\" look=\"blank\"></ax-button>\r\n        <ax-button cssClass=\"ax-prev-button\" color=\"light\" look=\"blank\">\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 cssClass=\"ax-next-button\" color=\"light\" look=\"blank\">\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    </div>\r\n    <div class=\"ax-calendar-body\">\r\n        <div class=\"ax-month-items\">\r\n            <div class=\"ax-month-item\">MO</div>\r\n            <div class=\"ax-month-item\">TU</div>\r\n            <div class=\"ax-month-item\">WE</div>\r\n            <div class=\"ax-month-item\">TH</div>\r\n            <div class=\"ax-month-item\">FR</div>\r\n            <div class=\"ax-month-item\">SA</div>\r\n            <div class=\"ax-month-item\">SU</div>\r\n        </div>\r\n        <div class=\"ax-day-items\">\r\n            <div class=\"ax-day-item ax-state-event\">27</div>\r\n            <div class=\"ax-day-item ax-state-event ax-state-event-primary\">28</div>\r\n            <div class=\"ax-day-item ax-state-event ax-state-event-secondary\">29</div>\r\n            <div class=\"ax-day-item ax-state-event ax-state-event-success\">30</div>\r\n            <div class=\"ax-day-item ax-state-event ax-state-event-warning\">01</div>\r\n            <div class=\"ax-day-item ax-state-event ax-state-event-danger\">02</div>\r\n            <div class=\"ax-day-item ax-state-holiday\">03</div>\r\n            <div class=\"ax-day-item\">04</div>\r\n            <div class=\"ax-day-item\">05</div>\r\n            <div class=\"ax-day-item\">06</div>\r\n            <div class=\"ax-day-item\">07</div>\r\n            <div class=\"ax-day-item\">08</div>\r\n            <div class=\"ax-day-item\">09</div>\r\n            <div class=\"ax-day-item ax-state-holiday\">10</div>\r\n            <div class=\"ax-day-item\">11</div>\r\n            <div class=\"ax-day-item ax-state-event ax-state-event-info\">12</div>\r\n            <div class=\"ax-day-item\">13</div>\r\n            <div class=\"ax-day-item\">14</div>\r\n            <div class=\"ax-day-item\">15</div>\r\n            <div class=\"ax-day-item\">16</div>\r\n            <div class=\"ax-day-item ax-state-holiday\">17</div>\r\n            <div class=\"ax-day-item\">18</div>\r\n            <div class=\"ax-day-item\">19</div>\r\n            <div class=\"ax-day-item\">20</div>\r\n            <div class=\"ax-day-item\">21</div>\r\n            <div class=\"ax-day-item\">22</div>\r\n            <div class=\"ax-day-item\">23</div>\r\n            <div class=\"ax-day-item ax-state-holiday\">24</div>\r\n            <div class=\"ax-day-item\">25</div>\r\n            <div class=\"ax-day-item\">26</div>\r\n            <div class=\"ax-day-item\">27</div>\r\n            <div class=\"ax-day-item ax-state-today\">28</div>\r\n            <div class=\"ax-day-item\">29</div>\r\n            <div class=\"ax-day-item\">30</div>\r\n            <div class=\"ax-day-item ax-state-holiday\">31</div>\r\n            <div class=\"ax-day-item\">01</div>\r\n            <div class=\"ax-day-item\">02</div>\r\n            <div class=\"ax-day-item\">03</div>\r\n            <div class=\"ax-day-item\">04</div>\r\n            <div class=\"ax-day-item ax-state-selected\">05</div>\r\n            <div class=\"ax-day-item\">06</div>\r\n            <div class=\"ax-day-item ax-state-holiday\">07</div>\r\n        </div>\r\n\r\n    </div>\r\n    <div class=\"ax-calendar-footer\">\r\n        <ax-button text=\"Today\" color=\"dark\" size=\"sm\"></ax-button>\r\n    </div>\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "cssClass", "cssStyle", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXCalendarComponent, selector: "ax-calendar", inputs: { readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", disabled: "disabled", tabIndex: "tabIndex", activeView: "activeView", depth: "depth", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-header\">\r\n    <ax-button class=\"ax-nav-button\" [text]=\"_navText\" color=\"light\" look=\"blank\" (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n    </ax-button>\r\n    <ax-button class=\"ax-prev-button\" color=\"light\" look=\"blank\" (onClick)=\"_handlePrevClick($event)\" [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)\" [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</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(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(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>SU</div>\r\n                <div>MO</div>\r\n                <div>TU</div>\r\n                <div>WE</div>\r\n                <div>TH</div>\r\n                <div>FR</div>\r\n                <div>SA</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(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 [text]=\"_todayText\" color=\"dark\" look=\"blank\" size=\"sm\" (onClick)=\"_handleGoToday()\" [disabled]=\"disabled\"></ax-button>\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-calendar',
                     templateUrl: './calendar.component.html',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    inputs: ['disabled', 'tabIndex', 'size', 'cssClass', 'cssStyle'],
+                    inputs: [...VALUE_INPUTS, ...INTERACTIVE_INPUTS],
+                    outputs: [...VALUE_OUTPUT, ...INTERACTIVE_OUTPUT],
                     encapsulation: ViewEncapsulation.None,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { days: [{
-                type: ViewChild,
-                args: ['days']
-            }], actionBar: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { activeView: [{
+                type: Input
+            }], depthChange: [{
+                type: Output
+            }], depth: [{
+                type: Input
+            }], min: [{
                 type: Input
-            }], showTime: [{
+            }], max: [{
                 type: Input
+            }], disabledDates: [{
+                type: Input
+            }], holidayDates: [{
+                type: Input
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
-const COMPONENT$f = [AXCalendarComponent];
-const MODULES$f = [CommonModule, AXButtonModule, AXEditorDecoratorModule, AXIconModule];
+const COMPONENT$h = [AXCalendarComponent];
+const MODULES$h = [CommonModule, AXButtonModule, AXIconModule, AXEditorDecoratorModule, AXDateTimeModule];
 class AXCalendarModule {
 }
 AXCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent], imports: [CommonModule, AXButtonModule, AXEditorDecoratorModule, AXIconModule], exports: [AXCalendarComponent] });
-AXCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarModule, providers: [], imports: [[...MODULES$f]] });
+AXCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent], imports: [CommonModule, AXButtonModule, AXIconModule, AXEditorDecoratorModule, AXDateTimeModule], exports: [AXCalendarComponent] });
+AXCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarModule, providers: [], imports: [[...MODULES$h]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$f],
-                    imports: [...MODULES$f],
-                    exports: [...COMPONENT$f],
+                    declarations: [...COMPONENT$h],
+                    imports: [...MODULES$h],
+                    exports: [...COMPONENT$h],
                     providers: [],
                 }]
         }] });
@@ -2419,7 +2528,7 @@ AXCarouselPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 AXCarouselPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXCarouselPagerComponent, selector: "ax-carousel-pager", host: { classAttribute: "ax-carousel-pager" }, usesInheritance: true, ngImport: i0, template: `
         <button  *ngFor="let d of _dots;let i=index" [class.ax-state-active]="i==_pageIndex" (click)="_handleClick($event,i)">
         </button>
-    `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselPagerComponent, decorators: [{
             type: Component,
             args: [{
@@ -2434,19 +2543,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXCarouselComponent }]; } });
 
-const COMPONENT$e = [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent];
-const MODULES$e = [CommonModule];
+const COMPONENT$g = [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent];
+const MODULES$g = [CommonModule];
 class AXCarouselModule {
 }
 AXCarouselModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXCarouselModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", 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: "12.2.6", ngImport: i0, type: AXCarouselModule, providers: [], imports: [[...MODULES$e]] });
+AXCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselModule, providers: [], imports: [[...MODULES$g]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$e],
-                    imports: [...MODULES$e],
-                    exports: [...COMPONENT$e],
+                    declarations: [...COMPONENT$g],
+                    imports: [...MODULES$g],
+                    exports: [...COMPONENT$g],
                     providers: [],
                 }]
         }] });
@@ -2472,7 +2581,7 @@ class AXCheckBoxComponent extends AXBaseValueComponentMixin {
     }
 }
 AXCheckBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCheckBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXCheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", indeterminate: "indeterminate" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-items-start ax-checkbox-container\">\r\n    <div class=\"ax-flex ax-items-center ax-h-5\">\r\n        <input [id]=\"_id\" class=\"ax-checkbox\" type=\"checkbox\" [(ngModel)]=\"value\" [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    </div>\r\n    <div class=\"ax-ms-3 ax-text-sm ax-flex ax-flex-col\">\r\n        <label [for]=\"_id\" class=\"ax-font-medium ax-text-gray-700\">\r\n      <ng-content></ng-content><br>\r\n    </label>\r\n    </div>\r\n    <!-- <div class=\"ax-ms-3 ax-text-sm\">\r\n     \r\n    </div> -->\r\n</div>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", directives: [{ type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXCheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", indeterminate: "indeterminate" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-items-start ax-checkbox-container\">\r\n    <div class=\"ax-flex ax-items-center ax-h-5\">\r\n        <input [id]=\"_id\" class=\"ax-checkbox\" type=\"checkbox\" [(ngModel)]=\"value\" [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    </div>\r\n    <div class=\"ax-ms-2 ax-text-sm ax-flex ax-flex-col\">\r\n        <label [for]=\"_id\" class=\"ax-font-medium ax-text-light-700\">\r\n            <ng-content></ng-content><br>\r\n        </label>\r\n    </div>\r\n    <!-- <div class=\"ax-ms-3 ax-text-sm\">\r\n     \r\n    </div> -->\r\n</div>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", directives: [{ type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCheckBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -2547,7 +2656,7 @@ class AXDataListComponent extends AXBaseSelectionValueMixin {
     }
 }
 AXDataListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDataListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDataListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDataListComponent, selector: "ax-datalist", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", items: "items", pageSize: "pageSize", itemTemplate: "itemTemplate", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-list ax-list-container" }, queries: [{ propertyName: "_contentItemTemplate", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true, static: true }, { propertyName: "_contentloadingTemplate", first: true, predicate: ["loadingTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-list-items-container ax-default ax-vertical\" (scroll)=\"_handleListScroll($event)\" #container>\r\n    <ng-container *ngFor=\"let item of displayItems;trackBy : _trackByFunction\">\r\n        <ng-container *ngIf=\"itemTemplate; else elseTemplate\">\r\n            <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                {{ item ? _getItemDisplayTextTemplte(item) : 'Loading...'}}\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            Empty!\r\n        </ng-template>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isLoading\">\r\n        <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #elseLoadingTemplate>\r\n            <div class=\"ax-list-loading-container\">\r\n                <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n</div>", directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXDataListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDataListComponent, selector: "ax-datalist", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", items: "items", pageSize: "pageSize", itemTemplate: "itemTemplate", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-list ax-list-container" }, queries: [{ propertyName: "_contentItemTemplate", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true, static: true }, { propertyName: "_contentloadingTemplate", first: true, predicate: ["loadingTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-list-items-container ax-default ax-vertical\" (scroll)=\"_handleListScroll($event)\" #container>\r\n    <ng-container *ngFor=\"let item of displayItems;trackBy : _trackByFunction\">\r\n        <ng-container *ngIf=\"itemTemplate; else elseTemplate\">\r\n            <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                {{ item ? _getItemDisplayTextTemplte(item) : 'Loading...'}}\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            Empty!\r\n        </ng-template>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isLoading\">\r\n        <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #elseLoadingTemplate>\r\n            <div class=\"ax-list-loading-container\">\r\n                <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n</div>", directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDataListComponent, decorators: [{
             type: Component,
             args: [{
@@ -2579,34 +2688,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 type: Input
             }] } });
 
-const COMPONENT$d = [AXDataListComponent];
-const MODULES$d = [CommonModule, AXButtonModule];
+const COMPONENT$f = [AXDataListComponent];
+const MODULES$f = [CommonModule, AXButtonModule];
 class AXDataListModule {
 }
 AXDataListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDataListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXDataListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDataListModule, declarations: [AXDataListComponent], imports: [CommonModule, AXButtonModule], exports: [AXDataListComponent] });
-AXDataListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDataListModule, providers: [], imports: [[...MODULES$d]] });
+AXDataListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDataListModule, providers: [], imports: [[...MODULES$f]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDataListModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$d],
-                    imports: [...MODULES$d],
-                    exports: [...COMPONENT$d],
+                    declarations: [...COMPONENT$f],
+                    imports: [...MODULES$f],
+                    exports: [...COMPONENT$f],
                     providers: [],
                 }]
         }] });
 
-class AXDropdownComponent extends AXBaseDropdownMixin {
-    constructor(_elementRef, _cdr, _overlay, _platform, _viewContainerRef) {
+class AXPopoverComponent extends AXBaseComponent {
+    constructor(_elementRef, _cdr, _zone, _overlay, _platform, _viewContainerRef) {
         super(_elementRef, _cdr);
+        this._cdr = _cdr;
+        this._zone = _zone;
         this._overlay = _overlay;
         this._platform = _platform;
         this._viewContainerRef = _viewContainerRef;
+        this.position = [
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom'
+            }
+        ];
         this._subs = [];
+        //
+        this.openTrigger = 'toggle';
+        //
+        this.closeTrigger = 'clickout';
+        //
+        this.hasBackdrop = false;
+        //
+        this._mousePos = { x: 0, y: 0 };
+        this._isScrollAttached = false;
+        //
+        this.onOpened = new EventEmitter();
+        this.onClosed = new EventEmitter();
+    }
+    get target() {
+        return this._target;
     }
+    set target(v) {
+        if (v instanceof HTMLElement)
+            this._target = v;
+        else if (v instanceof ElementRef)
+            this._target = v.nativeElement;
+        else if (v instanceof AXBaseComponent)
+            this._target = v._getInnerElement();
+    }
+    _emitOnOpenedEvent() {
+        this.onOpened.emit({
+            component: this,
+            htmlElement: this._getHostElement()
+        });
+    }
+    _emitOnClosedEvent() {
+        this.onClosed.emit({
+            component: this,
+            htmlElement: this._getHostElement()
+        });
+    }
+    //
     onViewInit() {
+        if (this._target) {
+            if (this.openTrigger === 'mouseover') {
+                const mouseEnter$ = fromEvent(this._target, 'mouseover');
+                this._addSub(mouseEnter$.subscribe(e => {
+                    const point = { x: e.clientX, y: e.clientY };
+                    if (AXDrawingUtil.isInElementBound(point, this._target))
+                        this.open();
+                }));
+            }
+            if (this.closeTrigger === 'mouseout') {
+                const mouseMove$ = fromEvent(document, 'mousemove');
+                this._addSub(mouseMove$.pipe(throttleTime(50)).subscribe(e => {
+                    this._mousePos.x = e.clientX;
+                    this._mousePos.y = e.clientY;
+                    if (this.isOpen) {
+                        setTimeout(() => {
+                            if (!_.some([this._target, this._overlayRef.overlayElement], el => _.includes(document.elementsFromPoint(this._mousePos.x, this._mousePos.y), el)))
+                                this.close();
+                        }, 100);
+                    }
+                }));
+            }
+            //
+            if (this.openTrigger === 'click' || this.openTrigger === 'toggle') {
+                const click$ = fromEvent(this._target, 'click');
+                this._addSub(click$.subscribe(e => {
+                    this.openTrigger == 'toggle' ? this.toggle() : this.open();
+                }));
+            }
+        }
     }
-    ngOnDestroy() {
+    //
+    onDestroy() {
         var _a, _b;
         (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
         (_b = this._overlayRef) === null || _b === void 0 ? void 0 : _b.dispose();
@@ -2625,23 +2817,20 @@ class AXDropdownComponent extends AXBaseDropdownMixin {
             }
         }
     }
-    _handleArrowClickEvent() {
-        this.toggle();
-    }
+    //
     toggle() {
-        if (this.disabled !== true && this.readonly !== true) {
-            this.isOpen ? this.close() : this.open();
-        }
+        this.isOpen ? this.close() : this.open();
     }
+    //
     close() {
-        var _a, _b;
+        var _a;
         if (!this.isOpen) {
             return;
         }
         (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
-        (_b = this._subs[1]) === null || _b === void 0 ? void 0 : _b.unsubscribe();
         this._emitOnClosedEvent();
     }
+    //
     open() {
         if (this.isOpen) {
             return;
@@ -2651,52 +2840,39 @@ class AXDropdownComponent extends AXBaseDropdownMixin {
         this._emitOnOpenedEvent();
     }
     _ensureOverlayCreated() {
-        let baseSize = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', '')) / 2;
+        const targetRef = this._target;
+        if (!targetRef)
+            return;
         if (!this._overlayRef) {
             const positionStrategy = this._overlay.position()
-                .flexibleConnectedTo(this._getInnerElement())
-                .withPositions([
-                {
-                    originX: 'start',
-                    originY: 'bottom',
-                    overlayX: 'start',
-                    overlayY: 'top',
-                    offsetY: baseSize
-                },
-                {
-                    originX: 'start',
-                    originY: 'top',
-                    overlayX: 'start',
-                    overlayY: 'bottom'
-                }
-            ])
+                .flexibleConnectedTo(targetRef)
+                .withPositions(Array.isArray(this.position) ? this.position : [this.position])
                 .withPush(false);
             this._overlayRef = this._overlay.create({
                 positionStrategy,
                 scrollStrategy: this._overlay.scrollStrategies.close(),
-                panelClass: ['animate__animated', 'animate__fadeIn', 'animate__faster'],
-                hasBackdrop: false,
-                backdropClass: ['cdk-overlay-transparent-backdrop']
-            });
-            this._subs[0] = this._overlayRef._outsidePointerEvents.subscribe(c => {
-                const target = c.target;
-                const comElem = this._getHostElement();
-                if (!(comElem.contains(target))) {
-                    this.close();
-                }
+                panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
+                hasBackdrop: this.hasBackdrop,
+                backdropClass: [this.backdropClass || 'cdk-overlay-transparent-backdrop']
             });
-            this._subs[1] = this._overlayRef.attachments().subscribe(() => {
-                if (this.fitParent === true) {
-                    this._dropdownWidth = this._getInnerElement().offsetWidth;
-                }
-                else {
-                    this._dropdownWidth = null;
-                }
-                this._subs[2] = this._platform.scroll.subscribe(c => {
-                    if (!c.nativeEvent.target.closest('.ax-overlay-pane'))
+            if (this.closeTrigger == 'clickout') {
+                this._addSub(this._overlayRef._outsidePointerEvents.subscribe(c => {
+                    const target = c.target;
+                    const comElem = targetRef;
+                    if (!(comElem.contains(target))) {
                         this.close();
-                });
-            });
+                    }
+                }));
+            }
+            this._addSub(this._overlayRef.attachments().subscribe(() => {
+                if (!this._isScrollAttached) {
+                    this._addSub(this._platform.scroll.subscribe(c => {
+                        // if (!(c.nativeEvent.target as HTMLElement).closest('.ax-overlay-pane'))
+                        this.close();
+                    }));
+                    this._isScrollAttached = true;
+                }
+            }));
         }
         if (!this._templatePortal) {
             this._templatePortal = new TemplatePortal(this._baseTemplate, this._viewContainerRef);
@@ -2705,29 +2881,174 @@ class AXDropdownComponent extends AXBaseDropdownMixin {
     get isOpen() {
         return this._overlayRef ? this._overlayRef.hasAttached() : false;
     }
+    _addSub(sub) {
+        this._subs.push(sub);
+    }
 }
-AXDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.Overlay }, { token: i2.AXPlatform }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDropdownComponent, selector: "ax-drop-down", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", fitParent: "fitParent" }, outputs: { onOpened: "onOpened", onClosed: "onClosed" }, host: { listeners: { "keydown": "_handleKeydownHandler($event)" }, classAttribute: "ax-dropdown" }, viewQueries: [{ propertyName: "_baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container\">\r\n    <ng-content select=\"ax-prefix\">\r\n    </ng-content>\r\n    <div class=\"ax-dropdown-content\" style=\"display: inline-flex;\" (click)=\"_handleArrowClickEvent()\">\r\n        <ng-content select=\"ng-container[input]\">\r\n        </ng-content>\r\n    </div>\r\n    <ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" [size]=\"size\" color=\"light\" look=\"blank\"  (onClick)=\"_handleArrowClickEvent()\">\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-template #baseTemplate>\r\n        <div class=\"ax-overlay-pane ax-transition ax-duration-300 ax-ease-in-out\" [style.min-width.px]=\"_dropdownWidth\">\r\n            <ng-content select=\"ng-container[panel]\">\r\n            </ng-content>\r\n        </div>\r\n    </ng-template>\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "cssClass", "cssStyle", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownComponent, decorators: [{
+AXPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.Overlay }, { token: i2.AXPlatform }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+AXPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXPopoverComponent, selector: "ax-popover", inputs: { target: "target", position: "position", openTrigger: "openTrigger", closeTrigger: "closeTrigger", hasBackdrop: "hasBackdrop", backdropClass: "backdropClass" }, host: { listeners: { "document:keydown": "_handleKeydownHandler($event)" } }, viewQueries: [{ propertyName: "_baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #baseTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-drop-down',
-                    templateUrl: 'dropdown.component.html',
-                    inputs: ['disabled', 'readonly', 'tabIndex', 'size', 'fitParent'],
-                    outputs: ['onOpened', 'onClosed'],
+                    selector: 'ax-popover',
+                    templateUrl: './popover.component.html',
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'ax-dropdown' }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.Overlay }, { type: i2.AXPlatform }, { type: i0.ViewContainerRef }]; }, propDecorators: { _baseTemplate: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.Overlay }, { type: i2.AXPlatform }, { type: i0.ViewContainerRef }]; }, propDecorators: { target: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], _baseTemplate: [{
                 type: ViewChild,
                 args: ['baseTemplate']
+            }], openTrigger: [{
+                type: Input
+            }], closeTrigger: [{
+                type: Input
+            }], hasBackdrop: [{
+                type: Input
+            }], backdropClass: [{
+                type: Input
             }], _handleKeydownHandler: [{
                 type: HostListener,
-                args: ['keydown', ['$event']]
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+class AXPopoverModule {
+}
+AXPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverModule, declarations: [AXPopoverComponent], imports: [CommonModule], exports: [AXPopoverComponent] });
+AXPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXPopoverComponent],
+                    imports: [CommonModule],
+                    exports: [AXPopoverComponent],
+                    providers: []
+                }]
+        }] });
+
+const AXBaseDropdownMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(AXBaseComponent));
+class AXBaseDropDownComponent extends AXBaseDropdownMixin {
+    constructor() {
+        super(...arguments);
+        this.fitParent = true;
+        this.onOpened = new EventEmitter();
+        this.onClosed = new EventEmitter();
+        this.position = [];
+    }
+    _emitOnOpenedEvent() {
+        //** call from interactive mixin **//
+        //(this as any).focus();
+        //
+        this.onOpened.emit({
+            component: this,
+            htmlElement: this._getHostElement()
+        });
+    }
+    _emitOnClosedEvent() {
+        this.onClosed.emit({
+            component: this,
+            htmlElement: this._getHostElement()
+        });
+    }
+    onViewInit() {
+        if (this.dropdownWidth == null) {
+            if (this.fitParent === true) {
+                this.dropdownWidth = this._getInnerElement().offsetWidth;
+            }
+        }
+        // wait for documentElement
+        setTimeout(() => {
+            if (this.position.length == 0) {
+                const offset = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', ''));
+                const list = [
+                    {
+                        originX: 'start',
+                        originY: 'bottom',
+                        overlayX: 'start',
+                        overlayY: 'top',
+                        offsetY: offset
+                    },
+                    {
+                        originX: 'start',
+                        originY: 'top',
+                        overlayX: 'start',
+                        overlayY: 'bottom',
+                        offsetY: -offset
+                    }
+                ];
+                this.position.push(...list);
+            }
+        }, 500);
+    }
+    toggle() {
+        if (this.disabled !== true) {
+            this.popover.toggle();
+        }
+    }
+    close() {
+        if (!this.isOpen || this.disabled) {
+            return;
+        }
+        this.popover.close();
+        this._emitOnClosedEvent();
+    }
+    open() {
+        if (this.isOpen || this.disabled) {
+            return;
+        }
+        this.popover.open();
+        this._emitOnOpenedEvent();
+    }
+    get isOpen() {
+        return this.popover.isOpen;
+    }
+}
+AXBaseDropDownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBaseDropDownComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+AXBaseDropDownComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBaseDropDownComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBaseDropDownComponent, decorators: [{
+            type: Injectable
+        }], propDecorators: { fitParent: [{
+                type: Input
+            }], dropdownWidth: [{
+                type: Input
+            }], onOpened: [{
+                type: Output
+            }], onClosed: [{
+                type: Output
+            }], position: [{
+                type: Input
+            }] } });
+
+class AXDropdownComponent extends AXBaseDropDownComponent {
+    constructor(_elementRef, _cdr) {
+        super(_elementRef, _cdr);
+        this._target = this;
+    }
+    _handleArrowClickEvent() {
+        this.toggle();
+    }
+}
+AXDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDropdownComponent, selector: "ax-drop-down", inputs: { disabled: "disabled", tabIndex: "tabIndex", size: "size", fitParent: "fitParent" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container\" [class.ax-state-disabled]=\"disabled\">\r\n    <ng-content select=\"ax-prefix\">\r\n    </ng-content>\r\n    <div class=\"ax-dropdown-content\" style=\"display: inline-flex;\" (click)=\"_handleArrowClickEvent()\">\r\n        <ng-content select=\"[input]\">\r\n        </ng-content>\r\n    </div>\r\n    <ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" [size]=\"size\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent()\">\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</div>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane\"  [style.min-width.px]=\"dropdownWidth\">\r\n        <ng-content select=\"[panel]\">\r\n        </ng-content>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-drop-down',
+                    templateUrl: 'dropdown.component.html',
+                    inputs: ['disabled', 'tabIndex', 'size', 'fitParent'],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { popover: [{
+                type: ViewChild,
+                args: [AXPopoverComponent]
             }] } });
 
-class AXDatepickerComponent extends AXBaseComponentMixin {
+class AXDatepickerComponent extends AXBaseTextBoxMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
         this.dayItems = new Array(32);
@@ -2775,31 +3096,40 @@ class AXDatepickerComponent extends AXBaseComponentMixin {
     }
 }
 AXDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDatepickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDatepickerComponent, selector: "ax-datepicker", usesInheritance: true, ngImport: i0, template: "<ax-drop-down>\r\n    <ng-container input>\r\n        <ng-content select=\"ax-prefix\">\r\n        </ng-content>\r\n\r\n        <ng-content select=\"ax-suffix\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div class=\"ax-datepicker-body\">\r\n            <ax-calendar [showTime]=\"true\" [actionBar]=\"true\"></ax-calendar>\r\n        </div>\r\n    </ng-container>\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["disabled", "readonly", "tabIndex", "size", "fitParent"], outputs: ["onOpened", "onClosed"] }, { type: AXCalendarComponent, selector: "ax-calendar", inputs: ["disabled", "tabIndex", "size", "cssClass", "cssStyle", "actionBar", "showTime"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDatepickerComponent, selector: "ax-date-picker", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", cssClass: "cssClass", size: "size", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", value: "value", name: "name" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, usesInheritance: true, ngImport: i0, template: "<ax-drop-down [fitParent]=\"false\" [disabled]=\"disabled\">\r\n    <ng-container input>\r\n        <ng-content select=\"ax-prefix\">\r\n        </ng-content>\r\n        <ng-content select=\"ax-suffix\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <div class=\"ax-datepicker-body\" panel>\r\n        <ax-calendar></ax-calendar>\r\n        <!-- [showTime]=\"true\" [actionBar]=\"true\" -->\r\n    </div>\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["disabled", "tabIndex", "size", "fitParent"] }, { type: AXCalendarComponent, selector: "ax-calendar", inputs: ["readonly", "allowNull", "value", "debounceTime", "name", "disabled", "tabIndex", "activeView", "depth", "min", "max", "disabledDates", "holidayDates"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDatepickerComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-datepicker',
+                    selector: 'ax-date-picker',
                     templateUrl: './datepicker.component.html',
+                    inputs: [
+                        'disabled',
+                        'readonly',
+                        'tabIndex',
+                        'cssClass',
+                        'size',
+                        ...TEXTBOX_INPUTS,
+                    ],
+                    outputs: [
+                        'valueChange',
+                        'onValueChanged',
+                        'onBlur',
+                        'onFocus',
+                        ...TEXTBOX_OUTPUT,
+                    ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-const AXBaseDropdownMenuMixin = _InteractiveComponenetMixin(_DropdownComponenetMixin((AXBaseComponent)));
-class AXDropdownPanelComponent extends AXBaseDropdownMenuMixin {
-    constructor(elementRef, cdr, _overlay, _platform, _viewContainerRef, _parent) {
+class AXDropdownPanelComponent extends AXBaseDropDownComponent {
+    constructor(elementRef, cdr, _parent) {
         super(elementRef, cdr);
-        this._overlay = _overlay;
-        this._platform = _platform;
-        this._viewContainerRef = _viewContainerRef;
         this._parent = _parent;
         this.onItemClick = new EventEmitter();
+        this._needBorder = false;
         this._subs = [];
-        if (_parent) {
-            this.target = _parent;
-            this._subs.push(_parent.onClick.subscribe(this.toggle.bind(this)));
-        }
+        this._target = this._parent._getHostElement();
     }
     get items() {
         return this._items || [];
@@ -2812,32 +3142,18 @@ class AXDropdownPanelComponent extends AXBaseDropdownMenuMixin {
         return [...Array.from(this._viewButtons), ...Array.from(this._contentButtons)];
     }
     onViewInit() {
+        super.onViewInit();
         this._getAllButtons().forEach(c => {
+            this._needBorder = true;
             this._subs.push(c.onClick.subscribe(this._handleOnItemClick.bind(this)));
+            this._cdr.markForCheck();
         });
     }
     onDestroy() {
-        var _a, _b;
-        (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
-        (_b = this._overlayRef) === null || _b === void 0 ? void 0 : _b.dispose();
         this._subs.forEach(s => {
             s === null || s === void 0 ? void 0 : s.unsubscribe();
         });
     }
-    _handleKeydownHandler(e) {
-        if (e.key === 'Enter' && e.type === 'keydown') {
-            this.toggle();
-        }
-        if (e.key === 'Escape') {
-            if (this.isOpen) {
-                this.close();
-                e.stopPropagation();
-            }
-        }
-    }
-    _handleArrowClickEvent(e) {
-        this.toggle();
-    }
     _emitOnItemClickEvent(e, item) {
         this.onItemClick.emit({
             component: this,
@@ -2846,93 +3162,14 @@ class AXDropdownPanelComponent extends AXBaseDropdownMenuMixin {
             name: item.name,
             data: item.data,
         });
-        this.close();
     }
     _handleOnItemClick(e) {
         this.close();
         this._emitOnItemClickEvent(e, e.component);
     }
-    toggle() {
-        if (this.disabled !== true) {
-            this.isOpen ? this.close() : this.open();
-        }
-    }
-    close() {
-        var _a, _b;
-        if (!this.isOpen) {
-            return;
-        }
-        (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
-        (_b = this._subs[1]) === null || _b === void 0 ? void 0 : _b.unsubscribe();
-        this._emitOnClosedEvent();
-    }
-    open() {
-        if (this.isOpen) {
-            return;
-        }
-        this._ensureOverlayCreated();
-        this._overlayRef.attach(this._templatePortal);
-        this._emitOnOpenedEvent();
-    }
-    _ensureOverlayCreated() {
-        let baseSize = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', ''));
-        const targetRef = this.target._getInnerElement();
-        if (!this._overlayRef) {
-            const positionStrategy = this._overlay.position()
-                .flexibleConnectedTo(targetRef)
-                .withPositions([
-                {
-                    originX: 'start',
-                    originY: 'bottom',
-                    overlayX: 'start',
-                    overlayY: 'top',
-                    offsetY: baseSize
-                },
-                {
-                    originX: 'start',
-                    originY: 'top',
-                    overlayX: 'start',
-                    overlayY: 'bottom'
-                }
-            ])
-                .withPush(false);
-            this._overlayRef = this._overlay.create({
-                positionStrategy,
-                scrollStrategy: this._overlay.scrollStrategies.close(),
-                panelClass: ['animate__animated', 'animate__fadeIn', 'animate__faster'],
-                hasBackdrop: false,
-                backdropClass: ['cdk-overlay-transparent-backdrop']
-            });
-            this._subs[0] = this._overlayRef._outsidePointerEvents.subscribe(c => {
-                const target = c.target;
-                const comElem = targetRef;
-                if (!(comElem.contains(target))) {
-                    this.close();
-                }
-            });
-            this._subs[1] = this._overlayRef.attachments().subscribe(() => {
-                if (this.fitParent === true) {
-                    this._dropdownWidth = targetRef.offsetWidth;
-                }
-                else {
-                    this._dropdownWidth = targetRef.offsetWidth * 1.5;
-                }
-                this._subs[2] = this._platform.scroll.subscribe(c => {
-                    if (!c.nativeEvent.target.closest('.ax-overlay-pane'))
-                        this.close();
-                });
-            });
-        }
-        if (!this._templatePortal) {
-            this._templatePortal = new TemplatePortal(this._baseTemplate, this._viewContainerRef);
-        }
-    }
-    get isOpen() {
-        return this._overlayRef ? this._overlayRef.hasAttached() : false;
-    }
 }
-AXDropdownPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownPanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.Overlay }, { token: i2.AXPlatform }, { token: i0.ViewContainerRef }, { token: AXButtonComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AXDropdownPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: { target: "target", items: "items" }, outputs: { onItemClick: "onItemClick" }, host: { listeners: { "keydown": "_handleKeydownHandler($event)" } }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonItemComponent }], viewQueries: [{ propertyName: "_baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }, { propertyName: "_viewButtons", predicate: AXButtonItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #baseTemplate>\n    <div class=\"ax-overlay-pane ax-dropdown-list\" [style.min-width.px]=\"_dropdownWidth\">\n        <ng-container *ngIf=\"items && items.length;else panelTpl\">\n            <ax-button-item [text]=\"item.text\" [color]=\"item.color\"   *ngFor=\"let item of items\">\n                <ax-prefix *ngIf=\"item.iconClass\">\n                    <ax-icon [icon]=\"item.iconClass\"></ax-icon>\n                </ax-prefix>\n            </ax-button-item>\n        </ng-container>\n        <ng-template #panelTpl>\n            <ng-content select=\"ng-container[panel],ax-button-item\">\n            </ng-content>\n        </ng-template>\n    </div>\n</ng-template>", components: [{ type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["text", "tooltip", "selected", "seperated", "name", "data", "color"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXDropdownPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownPanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXButtonComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AXDropdownPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: { items: "items" }, outputs: { onItemClick: "onItemClick" }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonItemComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }, { propertyName: "_viewButtons", predicate: AXButtonItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'toggle'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-dropdown-list]=\"_needBorder\" >\r\n        <ng-container *ngIf=\"items && items.length;else panelTpl\">\r\n            <ax-button-item [text]=\"item.text\" [color]=\"item.color\" *ngFor=\"let item of items\">\r\n                <ax-prefix *ngIf=\"item.iconClass\">\r\n                    <ax-icon [icon]=\"item.iconClass\"></ax-icon>\r\n                </ax-prefix>\r\n            </ax-button-item>\r\n        </ng-container>\r\n        <ng-template #panelTpl>\r\n            <ng-content select=\"[panel],ax-button-item\">\r\n            </ng-content>\r\n        </ng-template>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"] }, { type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["text", "tooltip", "selected", "seperated", "name", "data", "color"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownPanelComponent, decorators: [{
             type: Component,
             args: [{
@@ -2941,7 +3178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.Overlay }, { type: i2.AXPlatform }, { type: i0.ViewContainerRef }, { type: AXButtonComponent, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXButtonComponent, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { _contentButtons: [{
                 type: ContentChildren,
@@ -2951,46 +3188,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 args: [AXButtonItemComponent]
             }], onItemClick: [{
                 type: Output
-            }], target: [{
-                type: Input
+            }], popover: [{
+                type: ViewChild,
+                args: [AXPopoverComponent]
             }], items: [{
                 type: Input
-            }], _baseTemplate: [{
-                type: ViewChild,
-                args: ['baseTemplate']
-            }], _handleKeydownHandler: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
             }] } });
 
 class AXDropdownModule {
 }
 AXDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownModule, declarations: [AXDropdownComponent, AXDropdownPanelComponent], imports: [CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule], exports: [AXDropdownComponent, AXDropdownPanelComponent] });
-AXDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownModule, providers: [], imports: [[CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule]] });
+AXDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownModule, declarations: [AXDropdownComponent, AXDropdownPanelComponent], imports: [CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule], exports: [AXDropdownComponent, AXDropdownPanelComponent] });
+AXDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownModule, providers: [], imports: [[CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule],
+                    imports: [CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule],
                     exports: [AXDropdownComponent, AXDropdownPanelComponent],
                     declarations: [AXDropdownComponent, AXDropdownPanelComponent],
                     providers: [],
                 }]
         }] });
 
-const COMPONENT$c = [AXDatepickerComponent];
-const MODULES$c = [CommonModule, AXCalendarModule, AXDropdownModule];
+const COMPONENT$e = [AXDatepickerComponent];
+const MODULES$e = [CommonModule, AXCalendarModule, AXDropdownModule];
 class AXDatepickerModule {
 }
 AXDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDatepickerModule, declarations: [AXDatepickerComponent], imports: [CommonModule, AXCalendarModule, AXDropdownModule], exports: [AXDatepickerComponent] });
-AXDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDatepickerModule, providers: [], imports: [[...MODULES$c]] });
+AXDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDatepickerModule, providers: [], imports: [[...MODULES$e]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$c],
-                    imports: [...MODULES$c],
-                    exports: [...COMPONENT$c],
+                    declarations: [...COMPONENT$e],
+                    imports: [...MODULES$e],
+                    exports: [...COMPONENT$e],
                     providers: [],
                 }]
         }] });
@@ -3022,7 +3254,7 @@ class AXDialogComponent extends AXBaseComponentMixin {
     }
 }
 AXDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDialogComponent, selector: "ax-dialog", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-dialog ax-{{options.type}}\" tabindex=\"0\" cdkDrag role=\"alert\" cdkDragHandle>\r\n        <div class=\"ax-dialog-icon-side\">\r\n            <i class=\"ax-dialog-icon {{_icon}}\"></i>\r\n        </div>\r\n        <div class=\"ax-dialog-content-side\">\r\n            <div class=\"ax-dialog-title\">{{options.title}}</div>\r\n            <div class=\"ax-dialog-content\">{{options.content}}</div>\r\n        </div>\r\n        <div class=\"ax-dialog-dismiss-icon\">\r\n            <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.dismissible\" (click)=\"close()\"></i>\r\n        </div>\r\n\r\n        <footer class=\"ax-dialog-footer\">\r\n            <ng-container *ngFor=\"let button of options.buttons\">\r\n                <ax-button [text]=\"button.text\"  [submitBehavior]=\"button.submitBehavior\" [cancelBehavior]=\"button.cancelBehavior\" (onClick)=\"_handleButtonClick(button)\" [cssClass]=\"button.cssClass\" [look]=\"button.look\" [color]=\"button.color\"></ax-button>\r\n                <div class=\"ax-ml-2\"></div>\r\n            </ng-container>\r\n        </footer>\r\n    </div>\r\n\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "cssClass", "cssStyle", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDialogComponent, selector: "ax-dialog", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-dialog ax-{{options.type}}\" tabindex=\"0\" cdkDrag role=\"alert\" cdkDragHandle>\r\n        <div class=\"ax-dialog-icon-side\">\r\n            <i class=\"ax-dialog-icon {{_icon}}\"></i>\r\n        </div>\r\n        <div class=\"ax-dialog-content-side\">\r\n            <div class=\"ax-dialog-title\">{{options.title}}</div>\r\n            <div class=\"ax-dialog-content\">{{options.content}}</div>\r\n        </div>\r\n        <div class=\"ax-dialog-dismiss-icon\">\r\n            <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.dismissible\" (click)=\"close()\"></i>\r\n        </div>\r\n\r\n        <footer class=\"ax-dialog-footer\">\r\n            <ng-container *ngFor=\"let button of options.buttons\">\r\n                <ax-button [text]=\"button.text\"  [submitBehavior]=\"button.submitBehavior\" [cancelBehavior]=\"button.cancelBehavior\" (onClick)=\"_handleButtonClick(button)\" [class]=\"button.cssClass\" [look]=\"button.look\" [color]=\"button.color\"></ax-button>\r\n                <div class=\"ax-ml-2\"></div>\r\n            </ng-container>\r\n        </footer>\r\n    </div>\r\n\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -3033,11 +3265,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
 class AXDialogService {
-    constructor(overlayService, parentInjector) {
+    /**
+    * @ignore
+    */
+    constructor(overlayService, parentInjector, sso) {
         this.overlayService = overlayService;
         this.parentInjector = parentInjector;
+        this.sso = sso;
     }
+    /**
+    *  Show an alert box with 'Okay' button.
+    */
     alert(title, content, type = 'primary') {
         return new Promise((resolve) => {
             const popup = this.open({
@@ -3061,6 +3305,9 @@ class AXDialogService {
             });
         });
     }
+    /**
+    *  Show a confirm box with 'Okay' & 'Cancel' buttons.
+    */
     confirm(title, content, type = 'primary') {
         return new Promise((resolve, reject) => {
             const popup = this.open({
@@ -3098,6 +3345,9 @@ class AXDialogService {
             });
         });
     }
+    /**
+    *  Show a custom dialog box.
+    */
     show(options) {
         return new Promise((resolve) => {
             var _a;
@@ -3125,7 +3375,8 @@ class AXDialogService {
         const overlayRef = this.overlayService.create({
             positionStrategy,
             hasBackdrop: true,
-            panelClass: ['animate__animated', 'animate__fadeIn', 'animate__faster'],
+            scrollStrategy: this.sso.block(),
+            panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
         });
         const dialogPortal = new ComponentPortal(AXDialogComponent, null, this.parentInjector);
         const host = overlayRef.attach(dialogPortal);
@@ -3147,12 +3398,12 @@ class AXDialogService {
         };
     }
 }
-AXDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+AXDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogService, deps: [{ token: i1.Overlay }, { token: i0.Injector }, { token: i1.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Injectable });
 AXDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.Injector }]; } });
+        }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.Injector }, { type: i1.ScrollStrategyOptions }]; } });
 
 class AXLoadingComponent extends AXBaseComponentMixin {
     /**
@@ -3182,7 +3433,7 @@ class AXLoadingComponent extends AXBaseComponentMixin {
 AXLoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 AXLoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXLoadingComponent, selector: "ax-loading", inputs: { visible: "visible", type: "type" }, outputs: { visibleChange: "visibleChange" }, host: { classAttribute: "ax-loading" }, usesInheritance: true, ngImport: i0, template: `
         <ng-template [cdkPortalOutlet]="_selectedPortal" ></ng-template>
-    `, isInline: true, directives: [{ type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, directives: [{ type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingComponent, decorators: [{
             type: Component,
             args: [{
@@ -3296,8 +3547,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 args: ['axIsLoading']
             }] } });
 
-const COMPONENT$b = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
-const MODULES$b = [CommonModule, OverlayModule, PortalModule];
+const COMPONENT$d = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
+const MODULES$d = [CommonModule, OverlayModule, PortalModule];
 class AXLoadingModule {
     constructor() {
         AXConfig.set({
@@ -3311,13 +3562,13 @@ class AXLoadingModule {
 }
 AXLoadingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXLoadingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", 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: "12.2.6", ngImport: i0, type: AXLoadingModule, providers: [], imports: [[...MODULES$b]] });
+AXLoadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingModule, providers: [], imports: [[...MODULES$d]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...COMPONENT$b],
-                    imports: [...MODULES$b],
-                    exports: [...COMPONENT$b],
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT$d],
+                    imports: [...MODULES$d],
+                    exports: [...COMPONENT$d],
                     providers: [],
                 }]
         }], ctorParameters: function () { return []; } });
@@ -3350,17 +3601,17 @@ class DynamicOverlay extends Overlay {
         return super.create(config);
     }
 }
-DynamicOverlay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DynamicOverlay, deps: [{ token: i1$1.ScrollStrategyOptions }, { token: DynamicOverlayContainer }, { token: i0.ComponentFactoryResolver }, { token: i1$1.OverlayPositionBuilder }, { token: i1$1.OverlayKeyboardDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i2$2.Directionality }, { token: i0.RendererFactory2 }, { token: i1.Location }, { token: i1$1.OverlayOutsideClickDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
+DynamicOverlay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DynamicOverlay, deps: [{ token: i1.ScrollStrategyOptions }, { token: DynamicOverlayContainer }, { token: i0.ComponentFactoryResolver }, { token: i1.OverlayPositionBuilder }, { token: i1.OverlayKeyboardDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i2$2.Directionality }, { token: i0.RendererFactory2 }, { token: i4.Location }, { token: i1.OverlayOutsideClickDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
 DynamicOverlay.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DynamicOverlay, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DynamicOverlay, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.ScrollStrategyOptions }, { type: DynamicOverlayContainer }, { type: i0.ComponentFactoryResolver }, { type: i1$1.OverlayPositionBuilder }, { type: i1$1.OverlayKeyboardDispatcher }, { type: i0.Injector }, { type: i0.NgZone }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1.ScrollStrategyOptions }, { type: DynamicOverlayContainer }, { type: i0.ComponentFactoryResolver }, { type: i1.OverlayPositionBuilder }, { type: i1.OverlayKeyboardDispatcher }, { type: i0.Injector }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i2$2.Directionality }, { type: i0.RendererFactory2 }, { type: i1.Location }, { type: i1$1.OverlayOutsideClickDispatcher }]; } });
+                }] }, { type: i2$2.Directionality }, { type: i0.RendererFactory2 }, { type: i4.Location }, { type: i1.OverlayOutsideClickDispatcher }]; } });
 
 class AXOverlayService {
     constructor(overlayService, overlayService2, appRef) {
@@ -3440,12 +3691,12 @@ class AXOverlayService {
         };
     }
 }
-AXOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXOverlayService, deps: [{ token: DynamicOverlay }, { token: i1$1.Overlay }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
+AXOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXOverlayService, deps: [{ token: DynamicOverlay }, { token: i1.Overlay }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
 AXOverlayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXOverlayService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXOverlayService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: DynamicOverlay }, { type: i1$1.Overlay }, { type: i0.ApplicationRef }]; } });
+        }], ctorParameters: function () { return [{ type: DynamicOverlay }, { type: i1.Overlay }, { type: i0.ApplicationRef }]; } });
 
 const DEFAULT_LOADER_ID = '_DEFAULT';
 /**
@@ -3731,19 +3982,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 }]
         }] });
 
-const COMPONENT$a = [AXDialogComponent];
-const MODULES$a = [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule];
+const COMPONENT$c = [AXDialogComponent];
+const MODULES$c = [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule];
 class AXDialogModule {
 }
 AXDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogModule, declarations: [AXDialogComponent], imports: [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule], exports: [AXDialogComponent] });
-AXDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogModule, providers: [], imports: [[...MODULES$a]] });
+AXDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogModule, providers: [], imports: [[...MODULES$c]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$a],
-                    imports: [...MODULES$a],
-                    exports: [...COMPONENT$a],
+                    declarations: [...COMPONENT$c],
+                    imports: [...MODULES$c],
+                    exports: [...COMPONENT$c],
                     providers: [],
                 }]
         }] });
@@ -3983,19 +4234,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-const COMPONENT$9 = [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent];
-const MODULES$9 = [CommonModule];
+const COMPONENT$b = [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent];
+const MODULES$b = [CommonModule];
 class AXDrawerModule {
 }
 AXDrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDrawerModule, declarations: [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent], imports: [CommonModule], exports: [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent] });
-AXDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDrawerModule, providers: [], imports: [[...MODULES$9]] });
+AXDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDrawerModule, providers: [], imports: [[...MODULES$b]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDrawerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$9],
-                    imports: [...MODULES$9],
-                    exports: [...COMPONENT$9],
+                    declarations: [...COMPONENT$b],
+                    imports: [...MODULES$b],
+                    exports: [...COMPONENT$b],
                     providers: [],
                 }]
         }] });
@@ -4137,19 +4388,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 type: Input
             }] } });
 
-const COMPONENT$8 = [AXInputMaskComponent];
-const MODULES$8 = [CommonModule, NgxMaskModule.forRoot()];
+const COMPONENT$a = [AXInputMaskComponent];
+const MODULES$a = [CommonModule, NgxMaskModule.forRoot()];
 class AXInputMaskModule {
 }
 AXInputMaskModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXInputMaskModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskModule, declarations: [AXInputMaskComponent], imports: [CommonModule, i1$3.NgxMaskModule], exports: [AXInputMaskComponent] });
-AXInputMaskModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskModule, providers: [], imports: [[...MODULES$8]] });
+AXInputMaskModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskModule, declarations: [AXInputMaskComponent], imports: [CommonModule, i1$2.NgxMaskModule], exports: [AXInputMaskComponent] });
+AXInputMaskModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskModule, providers: [], imports: [[...MODULES$a]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$8],
-                    imports: [...MODULES$8],
-                    exports: [...COMPONENT$8],
+                    declarations: [...COMPONENT$a],
+                    imports: [...MODULES$a],
+                    exports: [...COMPONENT$a],
                     providers: [],
                 }]
         }] });
@@ -4171,19 +4422,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-const COMPONENT$7 = [AXLabelComponent];
-const MODULES$7 = [CommonModule];
+const COMPONENT$9 = [AXLabelComponent];
+const MODULES$9 = [CommonModule];
 class AXLabelModule {
 }
 AXLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelModule, declarations: [AXLabelComponent], imports: [CommonModule], exports: [AXLabelComponent] });
-AXLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelModule, providers: [], imports: [[...MODULES$7]] });
+AXLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelModule, providers: [], imports: [[...MODULES$9]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$7],
-                    imports: [...MODULES$7],
-                    exports: [...COMPONENT$7],
+                    declarations: [...COMPONENT$9],
+                    imports: [...MODULES$9],
+                    exports: [...COMPONENT$9],
                     providers: [],
                 }]
         }] });
@@ -4229,7 +4480,7 @@ class AXNumberBoxComponent extends AXBaseTextBoxMixin {
         this._maxValue = Number.MAX_VALUE;
         this.displayTextChange = new EventEmitter();
     }
-    get hostClass() {
+    get __hostClass() {
         return `${this.cssClass} ax-${this.size}`;
     }
     /**
@@ -4418,8 +4669,8 @@ class AXNumberBoxComponent extends AXBaseTextBoxMixin {
         this._emitOnFocusEvent(e);
     }
 }
-AXNumberBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.MaskApplierService }], target: i0.ɵɵFactoryTarget.Component });
-AXNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", name: "name", separator: "separator", thousandSeparator: "thousandSeparator", step: "step", scale: "scale", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue", displayText: "displayText" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", displayTextChange: "displayTextChange" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-number-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\" [attr.pattern]=\"'[\\d\\.]*'\" [attr.placeholder]=\"placeholder\" [attr.min]=\"minValue\"\r\n    [attr.max]=\"maxValue\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"displayText\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_handleOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\"\r\n    autocomplete=\"off\">\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && allowNull && !(disabled || readonly)\">\r\n    <i class=\"ax-icon-x icon\"></i>\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>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "cssClass", "cssStyle", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i3.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: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.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 });
+AXNumberBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.MaskApplierService }], target: i0.ɵɵFactoryTarget.Component });
+AXNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", name: "name", separator: "separator", thousandSeparator: "thousandSeparator", step: "step", scale: "scale", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue", displayText: "displayText" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", displayTextChange: "displayTextChange" }, host: { properties: { "class": "this.__hostClass" }, classAttribute: "ax-number-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\" [attr.pattern]=\"'[\\d\\.]*'\" [attr.placeholder]=\"placeholder\" [attr.min]=\"minValue\"\r\n    [attr.max]=\"maxValue\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"displayText\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_handleOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\"\r\n    autocomplete=\"off\">\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && allowNull && !(disabled || readonly)\">\r\n    <i class=\"ax-icon-x icon\"></i>\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>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i3.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: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -4444,7 +4695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     host: { class: 'ax-number-box ax-editor-container' },
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.MaskApplierService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.MaskApplierService }]; }, propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }], separator: [{
@@ -4469,8 +4720,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 type: Input
             }] } });
 
-const COMPONENT$6 = [AXNumberBoxComponent];
-const MODULES$6 = [
+const COMPONENT$8 = [AXNumberBoxComponent];
+const MODULES$8 = [
     CommonModule,
     FormsModule,
     AXButtonModule,
@@ -4481,146 +4732,107 @@ class AXNumberBoxModule {
 AXNumberBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXNumberBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxModule, declarations: [AXNumberBoxComponent], imports: [CommonModule,
         FormsModule,
-        AXButtonModule, i1$3.NgxMaskModule], exports: [AXNumberBoxComponent] });
-AXNumberBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxModule, providers: [], imports: [[...MODULES$6]] });
+        AXButtonModule, i1$2.NgxMaskModule], exports: [AXNumberBoxComponent] });
+AXNumberBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxModule, providers: [], imports: [[...MODULES$8]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$6],
-                    imports: [...MODULES$6],
-                    exports: [...COMPONENT$6],
+                    declarations: [...COMPONENT$8],
+                    imports: [...MODULES$8],
+                    exports: [...COMPONENT$8],
                     providers: [],
                 }]
         }] });
 
-class AXPopoverComponent {
-    constructor(overlayService, zone, cdr) {
-        this.overlayService = overlayService;
-        this.zone = zone;
-        this.cdr = cdr;
-        //
-        this.openMode = 'manual';
-        //
-        this.closeMode = 'clickout';
-        //
-        this._visible = false;
-    }
-    get visible() {
-        return this._visible;
-    }
-    set visible(v) {
-        if (v !== this._visible) {
-            if (v) {
-                this.internalShow();
-            }
-            else {
-                this.internalHide();
-            }
-            this._visible = v;
-            this.cdr.detectChanges();
-        }
-    }
-    //
-    toggle() {
-        this.visible = !this.visible;
-    }
-    close() {
-        this.zone.run(() => {
-            this.visible = false;
-        });
-    }
-    open() {
-        this.zone.run(() => {
-            this.visible = true;
-        });
+/**
+ * The Textbox is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+class AXPasswordBoxComponent extends AXBaseTextBoxMixin {
+    /**
+    *  @ignore
+    */
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this._type = 'password';
+        this._icon = 'ax-ic-eye';
+        /**
+            *  A flag for showing or hiding password button.
+            */
+        this.showToggleButton = true;
     }
-    internalShow() {
-        if (this.isOpen) {
-            return;
-        }
-        this.overlay = this.overlayService.show(this.template, {}, {
-            closeOnClickOutside: this.closeMode === 'clickout',
-            targetElement: this.targetEl,
-            hasBackdrop: this.closeMode === 'clickout',
-            position: this.position,
-            onBackdropClick: () => {
-                this._visible = false;
-            }
-        });
+    get hostClass() {
+        return `${this.cssClass} ax-${this.size}`;
     }
-    internalHide() {
-        if (this.overlay) {
-            this.overlay.dispose();
+    toggleType() {
+        if (this._type === 'password') {
+            this._type = 'text';
+            this._icon = 'ax-ic-eye-off';
         }
-    }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.targetEl = typeof this.target === 'string' ? document.querySelector(this.target) : this.target;
-            //
-            if (this.closeMode === 'mouseout') {
-                this.targetEl.addEventListener('mouseout', this.close.bind(this));
-            }
-            if (this.openMode === 'hover' && this.targetEl) {
-                this.targetEl.addEventListener('mouseover', this.open.bind(this));
-            }
-            //
-            if (this.openMode === 'click' && this.targetEl) {
-                this.targetEl.addEventListener('click', this.open.bind(this));
-            }
-        }, 100);
-    }
-    ngOnDestroy() {
-        if (this.openMode === 'click' && this.targetEl) {
-            this.targetEl.removeEventListener('mouseover', this.open.bind(this));
-            this.targetEl.removeEventListener('click', this.open.bind(this));
-            this.targetEl.removeEventListener('mouseout', this.open.bind(this));
+        else {
+            this._type = 'password';
+            this._icon = 'ax-ic-eye';
         }
     }
-    get isOpen() {
-        return this.visible;
-    }
 }
-AXPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverComponent, deps: [{ token: AXOverlayService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXPopoverComponent, selector: "ax-popover", inputs: { target: "target", position: "position", openMode: "openMode", closeMode: "closeMode", visible: "visible" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["tpl"], descendants: true }], ngImport: i0, template: "<ng-template #tpl>\r\n  <div class=\"ax-popover-container ax-animate-fade-in-down\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ng-template>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverComponent, decorators: [{
+AXPasswordBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPasswordBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXPasswordBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXPasswordBoxComponent, selector: "ax-password-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", cssClass: "cssClass", size: "size", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", value: "value", name: "name", showToggleButton: "showToggleButton" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-password-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [type]=\"_type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n    [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete ? 'on': 'off'\">\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"clear()\" [tabIndex]=\"-1\" *ngIf=\"value && allowNull &&  !(disabled || readonly)\">\r\n    <ax-prefix>\r\n        <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n    </ax-prefix>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"toggleType()\" [tabIndex]=\"-1\" *ngIf=\"showToggleButton\">\r\n    <ax-icon [icon]=\"_icon\"></ax-icon>\r\n</ax-button>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i3.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: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-popover',
-                    templateUrl: './popover.component.html',
+                    selector: 'ax-password-box',
+                    templateUrl: 'password-box.component.html',
+                    inputs: [
+                        'disabled',
+                        'readonly',
+                        'tabIndex',
+                        'cssClass',
+                        'size',
+                        ...TEXTBOX_INPUTS,
+                    ],
+                    outputs: [
+                        'valueChange',
+                        'onValueChanged',
+                        'onBlur',
+                        'onFocus',
+                        ...TEXTBOX_OUTPUT,
+                    ],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'ax-password-box ax-editor-container' },
                 }]
-        }], ctorParameters: function () { return [{ type: AXOverlayService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { template: [{
-                type: ViewChild,
-                args: ['tpl']
-            }], target: [{
-                type: Input,
-                args: ['target']
-            }], position: [{
-                type: Input,
-                args: ['position']
-            }], openMode: [{
-                type: Input,
-                args: ['openMode']
-            }], closeMode: [{
-                type: Input,
-                args: ['closeMode']
-            }], visible: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], showToggleButton: [{
                 type: Input
             }] } });
 
-class AXPopoverModule {
+const COMPONENT$7 = [AXPasswordBoxComponent];
+const MODULES$7 = [
+    CommonModule,
+    FormsModule,
+    AXButtonModule,
+    AXEditorDecoratorModule,
+    AXIconModule
+];
+class AXPasswordBoxModule {
 }
-AXPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverModule, declarations: [AXPopoverComponent], imports: [CommonModule], exports: [AXPopoverComponent] });
-AXPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverModule, decorators: [{
+AXPasswordBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPasswordBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXPasswordBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPasswordBoxModule, declarations: [AXPasswordBoxComponent], imports: [CommonModule,
+        FormsModule,
+        AXButtonModule,
+        AXEditorDecoratorModule,
+        AXIconModule], exports: [AXPasswordBoxComponent] });
+AXPasswordBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPasswordBoxModule, providers: [], imports: [[...MODULES$7]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPasswordBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [AXPopoverComponent],
-                    imports: [CommonModule],
-                    exports: [AXPopoverComponent],
-                    providers: []
+                    declarations: [...COMPONENT$7],
+                    imports: [...MODULES$7],
+                    exports: [...COMPONENT$7],
+                    providers: [],
                 }]
         }] });
 
@@ -4697,7 +4909,7 @@ class AXPopupComponent extends AXBaseComponentMixin {
     onFullScreen() { }
 }
 AXPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: AXLoadingService }], target: i0.ɵɵFactoryTarget.Component });
-AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXPopupComponent, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-popup ax-{{size}}\" tabindex=\"0\" cdkDrag>\r\n        <ng-container *ngIf=\"showHeader\">\r\n            <header cdkDragHandle class=\"ax-cursor-move\">\r\n                <div>\r\n                    <div class=\"ax-text-lg ax-font-medium\">\r\n                        <span>\r\n                            {{title}}\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"showCloseButton\">\r\n                    <i class=\"ax-ic ax-ic-close ax-text-gray ax-cursor-pointer\" (click)=\"_handleCloseClick()\"\r\n                        tabindex=\"1\"></i>\r\n                </div>\r\n            </header>\r\n        </ng-container>\r\n        <main>\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </main>\r\n        <footer *ngIf=\"_footerPortal\">\r\n            <ng-template [cdkPortalOutlet]=\"_footerPortal\"></ng-template>\r\n        </footer>\r\n    </div>\r\n</div>", directives: [{ type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXPopupComponent, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-popup ax-{{size}}\" tabindex=\"0\" cdkDrag>\r\n        <ng-container *ngIf=\"showHeader\">\r\n            <header cdkDragHandle class=\"ax-cursor-move\">\r\n                <div>\r\n                    <div class=\"ax-text-lg ax-font-medium\">\r\n                        <span>\r\n                            {{title}}\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"showCloseButton\">\r\n                    <i class=\"ax-ic ax-ic-close ax-text-gray ax-cursor-pointer\" (click)=\"_handleCloseClick()\"\r\n                        tabindex=\"1\"></i>\r\n                </div>\r\n            </header>\r\n        </ng-container>\r\n        <main>\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </main>\r\n        <footer *ngIf=\"_footerPortal\">\r\n            <ng-template [cdkPortalOutlet]=\"_footerPortal\"></ng-template>\r\n        </footer>\r\n    </div>\r\n</div>", directives: [{ type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
             args: [{
@@ -4800,20 +5012,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: AXOverlayService }]; } });
 
-const COMPONENT$5 = [AXPopupComponent];
-const MODULES$5 = [CommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule];
+const COMPONENT$6 = [AXPopupComponent];
+const MODULES$6 = [CommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule];
 class AXPopupModule {
 }
 AXPopupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXPopupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupModule, declarations: [AXPopupComponent], imports: [CommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule], exports: [AXPopupComponent] });
-AXPopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupModule, providers: [AXPopupService], imports: [[...MODULES$5]] });
+AXPopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupModule, providers: [AXPopupService], imports: [[...MODULES$6]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT$6],
+                    imports: [...MODULES$6],
+                    exports: [...COMPONENT$6],
+                    providers: [AXPopupService],
+                }]
+        }] });
+
+class AXRangeSliderComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        //TODO: ax-range-slider
+    }
+}
+AXRangeSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRangeSliderComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXRangeSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXRangeSliderComponent, selector: "ax-range-slider", host: { classAttribute: "ax-range-slider" }, usesInheritance: true, ngImport: i0, template: "<input type=\"range\" min=\"1\" max=\"100\" value=\"50\" class=\"ax-range-slider-input\">", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRangeSliderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-range-slider',
+                    templateUrl: './range-slider.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'ax-range-slider' }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+
+const COMPONENT$5 = [AXRangeSliderComponent];
+const MODULES$5 = [CommonModule];
+class AXRangeSliderModule {
+}
+AXRangeSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRangeSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXRangeSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRangeSliderModule, declarations: [AXRangeSliderComponent], imports: [CommonModule], exports: [AXRangeSliderComponent] });
+AXRangeSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRangeSliderModule, providers: [], imports: [[...MODULES$5]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRangeSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$5],
                     imports: [...MODULES$5],
                     exports: [...COMPONENT$5],
-                    providers: [AXPopupService],
+                    providers: [],
                 }]
         }] });
 
@@ -4866,6 +5114,10 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         this.unselectItems(item);
         e.stopPropagation();
     }
+    _handleBadgeRemove(e, item) {
+        this.unselectItems(item);
+        e.stopPropagation();
+    }
     _handleKeydown(e) {
         if (!(this._getHostElement() == document.activeElement ||
             this._getHostElement().contains(document.activeElement) ||
@@ -4981,7 +5233,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
     }
 }
 AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", fitParent: "fitParent", value: "value", items: "items", multiple: "multiple", allowNull: "allowNull", valueField: "valueField", textField: "textField" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { listeners: { "document:keydown": "_handleKeydown($event)" }, classAttribute: "ax-select-box" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: AXDropdownComponent, descendants: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down (onOpened)=\"_emitOnOpenedEvent()\" (onClosed)=\"_emitOnClosedEvent()\">\r\n    <ng-container input>\r\n        <ng-content select=\"ax-prefix\">\r\n        </ng-content>\r\n        <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n            <div class=\"ax-dropdown-chips\">\r\n                <div *ngFor=\"let item of selectedItems\" [ngClass]=\"{'ax-badge ax-primary ax-m-1': multiple,'ax-badge':!multiple}\" [title]=\"_getItemDisplayTextTemplte(item)\">\r\n                    <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                    <i class=\"ax-ic ax-ic-close ax-text-base\" (click)=\"_handleOnRemoveItemClick($event,item)\" *ngIf=\" (readonly!=true) && multiple && disabled!=true && (allowNull==true || (selectedItems.length> 1))\">\r\n                    </i>\r\n\r\n                </div>\r\n            </div>\r\n            <!-- <div class=\"ax-selectbox-input\">\r\n                <input type=\"text\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleKeydown($event)\">\r\n            </div> -->\r\n            <ng-content select=\"ax-suffix\">\r\n            </ng-content>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container panel>\r\n        <div class=\"ax-list ax-list-container\">\r\n            <div class=\"ax-list-items-container ax-vertical ax-default\" (scroll)=\"_handleListScroll($event)\" #listContainer>\r\n                <ng-container *ngFor=\"let item of displayItems;let i = index;trackBy : _trackByFunction\">\r\n                    <ng-container *ngIf=\"itemTemplate; else elseTemplate\">\r\n                        <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                            </ng-container>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-template #elseTemplate>\r\n                        <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\" [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                            {{ _getItemDisplayTextTemplte(item) }}\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n                    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseTemplate>\r\n                        Empty!\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseLoadingTemplate>\r\n                        <div class=\"ax-list-loading-container\">\r\n                            <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["disabled", "readonly", "tabIndex", "size", "fitParent"], outputs: ["onOpened", "onClosed"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", fitParent: "fitParent", value: "value", items: "items", multiple: "multiple", allowNull: "allowNull", valueField: "valueField", textField: "textField" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { listeners: { "document:keydown": "_handleKeydown($event)" }, classAttribute: "ax-select-box" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: AXDropdownComponent, descendants: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down (onOpened)=\"_emitOnOpenedEvent()\" (onClosed)=\"_emitOnClosedEvent()\">\r\n    <ng-container input>\r\n        <ng-content select=\"ax-prefix\">\r\n        </ng-content>\r\n        <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close\" (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n            <!-- <div class=\"ax-selectbox-input\">\r\n                <input type=\"text\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleKeydown($event)\">\r\n            </div> -->\r\n            <ng-content select=\"ax-suffix\">\r\n            </ng-content>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"ax-list ax-list-container\" panel>\r\n        <div class=\"ax-list-items-container ax-vertical ax-default\" (scroll)=\"_handleListScroll($event)\" #listContainer>\r\n            <ng-container *ngFor=\"let item of displayItems;let i = index;trackBy : _trackByFunction\">\r\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                    <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-template #defualtTemplate>\r\n                    <ng-container *ngIf=\"!multiple; then singleTemplate; else multipleTemplate\"></ng-container>\r\n                    <ng-template #singleTemplate>\r\n                        <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\" [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                            {{ _getItemDisplayTextTemplte(item) }}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #multipleTemplate>\r\n                        <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\" [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                            <ax-check-box [value]=\"isItemSelected(item)\">\r\n                            </ax-check-box>\r\n                            {{ _getItemDisplayTextTemplte(item) }}\r\n\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n                <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                    <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template #elseTemplate>\r\n                    Empty!\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"isLoading\">\r\n                <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                    <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template #elseLoadingTemplate>\r\n                    <div class=\"ax-list-loading-container\">\r\n                        <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n                    </div>\r\n                </ng-template>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["disabled", "tabIndex", "size", "fitParent"] }, { type: AXBadgeComponent, selector: "ax-badge", inputs: ["text", "color"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "readonly", "tabIndex", "size", "value", "indeterminate"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -5007,12 +5259,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
 class AXSelectBoxModule {
 }
 AXSelectBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSelectBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [CommonModule, AXDropdownModule, FormsModule], exports: [AXSelectBoxComponent] });
-AXSelectBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectBoxModule, providers: [], imports: [[CommonModule, AXDropdownModule, FormsModule]] });
+AXSelectBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [CommonModule, AXDropdownModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule], exports: [AXSelectBoxComponent] });
+AXSelectBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectBoxModule, providers: [], imports: [[CommonModule, AXDropdownModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, AXDropdownModule, FormsModule],
+                    imports: [CommonModule, AXDropdownModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule],
                     exports: [AXSelectBoxComponent],
                     declarations: [AXSelectBoxComponent],
                     providers: [],
@@ -5035,7 +5287,7 @@ class AXSelectionListComponent extends AXBaseSelectionValueMixin {
     }
 }
 AXSelectionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectionListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXSelectionListComponent, selector: "ax-selection-list", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", valueField: "valueField", textField: "textField", multiple: "multiple", items: "items", selectionMode: "selectionMode", direction: "direction" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <input [id]=\"'ax-checkbox'+i\" class=\"ax-checkbox\" type=\"checkbox\"\r\n                        (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\"\r\n                        [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"'ax-checkbox'+i\" class=\"ax-font-medium ax-text-gray-700\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-gray-500\"> {{item.hint}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <input [id]=\"'ax-radio-'+i\" class=\"ax-radio\" type=\"radio\" [attr.name]=\"'g'+id\"\r\n                        (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\"\r\n                        [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"'ax-radio-'+i\" class=\"ax-font-medium ax-text-gray-700\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-gray-500\"> {{item.hint}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXSelectionListComponent, selector: "ax-selection-list", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", valueField: "valueField", textField: "textField", multiple: "multiple", items: "items", selectionMode: "selectionMode", cssClass: "cssClass", direction: "direction" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <input [id]=\"id+'-'+i\" class=\"ax-checkbox\" type=\"checkbox\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <input [id]=\"id+'-'+i\" class=\"ax-radio\" type=\"radio\" [attr.name]=\"id\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>", directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectionListComponent, decorators: [{
             type: Component,
             args: [{
@@ -5052,6 +5304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                         'multiple',
                         'items',
                         'selectionMode',
+                        'cssClass'
                     ],
                     outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus'],
                     encapsulation: ViewEncapsulation.None,
@@ -5123,7 +5376,7 @@ class AXSwitchComponent extends AXBaseValueComponentMixin {
     }
 }
 AXSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSwitchComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXSwitchComponent, selector: "ax-switch", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", cssClass: "cssClass", cssStyle: "cssStyle", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, usesInheritance: true, ngImport: i0, template: "<label class=\"ax-switch  {{cssClass}}\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    [attr.style]=\"cssStyle\" (click)=\"handleOnClickEvent($event)\">\r\n    <input type=\"checkbox\" [(ngModel)]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    <span class=\"ax-switch-slider\"></span>\r\n</label>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", directives: [{ type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXSwitchComponent, selector: "ax-switch", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", cssClass: "cssClass", cssStyle: "cssStyle", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, usesInheritance: true, ngImport: i0, template: "<label class=\"ax-switch {{cssClass}} ax-{{size}}\" [class.ax-state-disabled]=\"disabled\"\r\n    [class.ax-state-readonly]=\"readonly\" [attr.style]=\"cssStyle\" (click)=\"handleOnClickEvent($event)\">\r\n    <input type=\"checkbox\" [(ngModel)]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    <span class=\"ax-switch-slider\"></span>\r\n</label>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", directives: [{ type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSwitchComponent, decorators: [{
             type: Component,
             args: [{
@@ -5156,7 +5409,8 @@ class AXTabStripComponent extends AXSizableComponentMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
         this.mode = 'default';
-        this.fullWidth = false;
+        this.direction = "horizontal";
+        this.fitParent = false;
         this.minWidth = false;
         this.onSelectionChanged = new EventEmitter();
     }
@@ -5184,9 +5438,12 @@ class AXTabStripComponent extends AXSizableComponentMixin {
             htmlElement: this._getHostElement(),
         });
     }
+    get __hostClass() {
+        return [`ax-tabs`, `ax-tabs-${this.mode ? this.mode : 'default'}`, `ax-tabs-${this.direction}`, `${this.fitParent ? 'ax-tabs-fit' : ''}`].join(' ');
+    }
 }
 AXTabStripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabStripComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTabStripComponent, selector: "ax-tab-strip", inputs: { size: "size", cssClass: "cssClass", items: "items", mode: "mode", fullWidth: "fullWidth", minWidth: "minWidth" }, outputs: { onSelectionChanged: "onSelectionChanged" }, host: { classAttribute: "ax-tab-strip" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-tabs ax-tabs-{{mode}}  {{cssClass}}\" [class.ax-tabs-full]=\"fullWidth\"\r\n    [class.ax-tabs-min-width]=\"minWidth\">\r\n    <div class=\"ax-tab-item-container\">\r\n        <ng-container *ngFor=\"let item of items;let i = index\">\r\n            <div class=\"ax-tab-item\" [class.ax-state-active]=\"item.active\" [class.ax-state-disabled]=\"item.disabled\"\r\n                *ngIf=\"item.visible!=false\" (click)=\"_handleClick(item,i)\">\r\n\r\n                <span *ngIf=\"item.iconClassBefore || item.iconClass\"><i\r\n                        class=\"ax-icon {{item.iconClassBefore || item.iconClass}}\"></i>\r\n                    <ng-container *ngIf=\"item.text\">&nbsp;&nbsp;</ng-container>\r\n                </span>\r\n                <span *ngIf=\"item.text\">{{item.text}}</span>\r\n                <span *ngIf=\"item.iconClassAfter\">\r\n                    <ng-container *ngIf=\"item.text\">&nbsp;&nbsp;</ng-container><i\r\n                        class=\"ax-icon {{item.iconClassAfter}}\"></i>\r\n                </span>\r\n                <!-- <span *ngIf=\"badge\" class=\"ax-badge\">\r\n                    <ng-container *ngIf=\"text\">&nbsp;&nbsp;</ng-container>{{badge}}\r\n                </span> -->\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>", directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXTabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTabStripComponent, selector: "ax-tab-strip", inputs: { size: "size", items: "items", mode: "mode", direction: "direction", fitParent: "fitParent", minWidth: "minWidth" }, outputs: { onSelectionChanged: "onSelectionChanged" }, host: { properties: { "class": "this.__hostClass" }, classAttribute: "ax-tab-strip" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngFor=\"let item of items;let i = index\">\r\n    <div class=\"ax-tab-item\" [class.ax-state-active]=\"item.active\" [class.ax-state-disabled]=\"item.disabled\" *ngIf=\"item.visible!=false\" (click)=\"_handleClick(item,i)\">\r\n        <ng-content select=\"ax-prefix\"></ng-content>\r\n        <span *ngIf=\"item.text\">{{item.text}}</span>\r\n        <ng-content select=\"ax-suffix\"></ng-content>\r\n    </div>\r\n</ng-container>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabStripComponent, decorators: [{
             type: Component,
             args: [{
@@ -5194,19 +5451,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                     templateUrl: './tab-strip.component.html',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    inputs: ['size', 'cssClass'],
+                    inputs: ['size'],
                     host: { class: 'ax-tab-strip' },
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
                 type: Input
             }], mode: [{
                 type: Input
-            }], fullWidth: [{
+            }], direction: [{
+                type: Input
+            }], fitParent: [{
                 type: Input
             }], minWidth: [{
                 type: Input
             }], onSelectionChanged: [{
                 type: Output
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 class AXTabComponent extends AXBaseComponentMixin {
@@ -5233,7 +5495,7 @@ AXTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
         <ng-content>
         </ng-content>
       </div>
-    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabComponent, decorators: [{
             type: Component,
             args: [{
@@ -5264,7 +5526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 type: Input
             }] } });
 
-class AXTabViewComponent extends AXTabStripComponent {
+class AXTabViewComponent extends AXBaseComponent {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
         this._tabs = [];
@@ -5289,7 +5551,7 @@ class AXTabViewComponent extends AXTabStripComponent {
     }
 }
 AXTabViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTabViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTabViewComponent, selector: "ax-tab-view", inputs: { size: "size" }, host: { classAttribute: "ax-tab-view" }, queries: [{ propertyName: "_contentTabs", predicate: AXTabComponent }], usesInheritance: true, ngImport: i0, template: "<ax-tab-strip [items]=\"_tabs\" [fullWidth]=\"fullWidth\" [mode]=\"mode\" [minWidth]=\"minWidth\" [size]=\"size\"\r\n    (onSelectionChanged)=\"_handleSelectionChanged($event)\">\r\n\r\n</ax-tab-strip>\r\n<div class=\"ax-tab-view-container\">\r\n    <ng-content select=\"ax-tab\">\r\n    </ng-content>\r\n</div>", components: [{ type: AXTabStripComponent, selector: "ax-tab-strip", inputs: ["size", "cssClass", "items", "mode", "fullWidth", "minWidth"], outputs: ["onSelectionChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXTabViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTabViewComponent, selector: "ax-tab-view", inputs: { size: "size" }, host: { classAttribute: "ax-tab-view" }, queries: [{ propertyName: "_contentTabs", predicate: AXTabComponent }], usesInheritance: true, ngImport: i0, template: "<!-- <ax-tab-strip [items]=\"_tabs\" (onSelectionChanged)=\"_handleSelectionChanged($event)\">\r\n\r\n</ax-tab-strip> -->\r\n<div class=\"ax-tab-view-container\">\r\n    <ng-content select=\"ax-tab\">\r\n    </ng-content>\r\n</div>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -5305,15 +5567,183 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 args: [AXTabComponent]
             }] } });
 
+class AXTabItemComponent extends AXBaseClickableMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.width = false;
+        this.activeChange = new EventEmitter();
+        this._active = false;
+    }
+    get active() {
+        return this._active;
+    }
+    set active(v) {
+        this._active = v;
+        this.activeChange.emit(v);
+        v ? this._getHostElement().classList.add('ax-state-active') : this._getHostElement().classList.remove('ax-state-active');
+    }
+    // @HostBinding('class')
+    // private get __hostClass(): string {
+    //     debugger;
+    //     const classes: any = {
+    //         'ax-state-active': this.active
+    //     }
+    //     return Object.entries(classes).filter(c => c[1]).map(c => c[0]).join(' ');
+    // }
+    __hostClick(e) {
+        this.onClick.emit({
+            component: this,
+            htmlElement: this._getHostElement(),
+            nativeEvent: e
+        });
+    }
+}
+AXTabItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTabItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTabItemComponent, selector: "ax-tab-item", inputs: { text: "text", width: "width", active: "active" }, outputs: { activeChange: "activeChange" }, host: { listeners: { "click": "__hostClick($event)" } }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+            <ng-content select="ax-prefix"></ng-content>
+            <span>{{text}}</span>
+            <ng-content select="ax-suffix"></ng-content>
+            <ng-template>
+                <ng-content>
+                </ng-content>
+            </ng-template>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-tab-item',
+                    template: `
+            <ng-content select="ax-prefix"></ng-content>
+            <span>{{text}}</span>
+            <ng-content select="ax-suffix"></ng-content>
+            <ng-template>
+                <ng-content>
+                </ng-content>
+            </ng-template>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], template: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }], activeChange: [{
+                type: Output
+            }], active: [{
+                type: Input
+            }], __hostClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class AXTabsComponent extends AXBaseComponent {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.mode = 'default';
+        this.direction = "horizontal";
+        this.fitParent = false;
+        this.minWidth = false;
+    }
+    onViewInit() {
+        this._handleSelectionChanged(this._contentTabs.get(0));
+        this._contentTabs.forEach(c => {
+            c.onClick.subscribe(t => {
+                this._handleSelectionChanged(c);
+            });
+        });
+    }
+    _handleSelectionChanged(e) {
+        this._contentTabs.filter(c => c != e).forEach(c => { c.active = false; });
+        e.active = true;
+        this.content.portal = e.template;
+        this._cdr.markForCheck();
+    }
+    get __hostClass() {
+        return [`ax-tabs-${this.mode ? this.mode : 'default'}`, `ax-tabs-${this.direction}`, `${this.fitParent ? 'ax-tabs-fit' : ''}`].join(' ');
+    }
+}
+AXTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTabsComponent, selector: "ax-tabs", inputs: { mode: "mode", direction: "direction", fitParent: "fitParent", minWidth: "minWidth", content: "content" }, host: { properties: { "class": "this.__hostClass" } }, queries: [{ propertyName: "_contentTabs", predicate: AXTabItemComponent }], usesInheritance: true, ngImport: i0, template: `
+        <div class="ax-items-wrapper">
+            <ng-content select="ax-tab-item">
+            </ng-content>
+        </div>
+        <!-- <div [axTabOutlet]="_activeTabView">
+
+        </div> -->
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-tabs',
+                    template: `
+        <div class="ax-items-wrapper">
+            <ng-content select="ax-tab-item">
+            </ng-content>
+        </div>
+        <!-- <div [axTabOutlet]="_activeTabView">
+
+        </div> -->
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _contentTabs: [{
+                type: ContentChildren,
+                args: [AXTabItemComponent]
+            }], mode: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], fitParent: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 class AXTabStripChangedEvent extends AXEvent {
 }
 
-const COMPONENT$3 = [AXTabViewComponent, AXTabStripComponent, AXTabComponent];
-const MODULES$3 = [CommonModule];
+class AXTabContentDirective {
+    constructor(_viewContainerRef) {
+        this._viewContainerRef = _viewContainerRef;
+    }
+    get portal() {
+        return this._portal;
+    }
+    set portal(v) {
+        //debugger;
+        this._portal = v;
+        this._viewContainerRef.clear();
+        const viewRef = this._viewContainerRef.createEmbeddedView(v, null, 0);
+    }
+}
+AXTabContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabContentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+AXTabContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.6", type: AXTabContentDirective, selector: "[axTabContent]", inputs: { portal: ["axTabContent", "portal"] }, exportAs: ["axTabContent"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axTabContent]',
+                    exportAs: 'axTabContent',
+                    inputs: ['portal: axTabContent'],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+
+const COMPONENT$3 = [AXTabsComponent, AXTabItemComponent, AXTabContentDirective];
+const MODULES$3 = [CommonModule, PortalModule, AXEditorDecoratorModule];
 class AXTabsModule {
 }
 AXTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabsModule, declarations: [AXTabViewComponent, AXTabStripComponent, AXTabComponent], imports: [CommonModule], exports: [AXTabViewComponent, AXTabStripComponent, AXTabComponent] });
+AXTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabsModule, declarations: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective], imports: [CommonModule, PortalModule, AXEditorDecoratorModule], exports: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective] });
 AXTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabsModule, providers: [], imports: [[...MODULES$3]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabsModule, decorators: [{
             type: NgModule,
@@ -5422,8 +5852,8 @@ class AXTimeBoxComponent extends AXBaseTextBoxMixin {
         this._emitOnFocusEvent(e);
     }
 }
-AXTimeBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.MaskApplierService }], target: i0.ɵɵFactoryTarget.Component });
-AXTimeBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTimeBoxComponent, selector: "ax-time-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", name: "name", minValue: "minValue", maxValue: "maxValue", format: "format", displayText: "displayText" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", displayTextChange: "displayTextChange" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-time-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\" [attr.pattern]=\"'[\\d\\.]*'\" [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && allowNull && !(disabled || readonly)\">\r\n    <i class=\"ax-icon-x icon\"></i>\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>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "cssClass", "cssStyle", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i3.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: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.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 });
+AXTimeBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.MaskApplierService }], target: i0.ɵɵFactoryTarget.Component });
+AXTimeBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTimeBoxComponent, selector: "ax-time-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", name: "name", minValue: "minValue", maxValue: "maxValue", format: "format", displayText: "displayText" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", displayTextChange: "displayTextChange" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-time-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\" [attr.pattern]=\"'[\\d\\.]*'\" [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && allowNull && !(disabled || readonly)\">\r\n    <i class=\"ax-icon-x icon\"></i>\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>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i3.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: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -5435,7 +5865,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     host: { class: 'ax-time-box ax-editor-container' },
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.MaskApplierService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.MaskApplierService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }], minValue: [{
@@ -5462,7 +5892,7 @@ class AXTimeBoxModule {
 AXTimeBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXTimeBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxModule, declarations: [AXTimeBoxComponent], imports: [CommonModule,
         FormsModule,
-        AXButtonModule, i1$3.NgxMaskModule], exports: [AXTimeBoxComponent] });
+        AXButtonModule, i1$2.NgxMaskModule], exports: [AXTimeBoxComponent] });
 AXTimeBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxModule, providers: [], imports: [[...MODULES$2]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxModule, decorators: [{
             type: NgModule,
@@ -5508,7 +5938,7 @@ class AXToastComponent extends AXBaseComponentMixin {
     }
 }
 AXToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXToastComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXToastComponent, selector: "ax-toast", host: { classAttribute: "ax-toast" }, usesInheritance: true, ngImport: i0, template: "<!-- <div class=\"ax-toast-header\">\r\n    <div class=\"ax-flex ax-items-center\">\r\n        <i class=\"{{_icon}} ax-mr-2 ax-icon\"></i>\r\n        <div>{{options.title || options.content}}</div>\r\n    </div>\r\n    <div class=\"ax-flex ax-items-center\" (click)=\"close()\" *ngIf=\"options.closeButton\">\r\n        <i class=\"ax-ic ax-ic-clear ax-text-gray-300 ax-cursor-pointer\"></i>\r\n    </div>\r\n</div>\r\n<div class=\"ax-ml-8 ax-text-md ax-text-gray-600\" *ngIf=\"options.title && options.content\">\r\n    {{options.content}}\r\n</div>\r\n<div class=\"ax-flex ax-mt-4 ax-justify-end\" *ngIf=\"options.buttons && options.buttons.length\">\r\n    <ng-container *ngFor=\"let button of options.buttons\">\r\n        <ax-button [text]=\"button.text\" [iconClassBefore]=\"button.iconClass\" (onClick)=\"_handleButtonClick(button)\" [cssClass]=\"button.class\"></ax-button>\r\n        <ax-button [text]=\"button.text\" (onClick)=\"_handleButtonClick(button)\"\r\n            [cssClass]=\"button.class\"></ax-button>\r\n        <div class=\"ax-ml-2\"></div>\r\n    </ng-container>\r\n</div>\r\n<div class=\"ax-toast-progress ax-{{options.type}}\" [style.width.%]='_toastWidth' *ngIf=\"options.timeOut\">\r\n</div> -->\r\n\r\n<div class=\"ax-toast-icon-side\">\r\n    <i class=\"ax-toast-icon {{_icon}}\"></i>\r\n</div>\r\n<div class=\"ax-toast-content-side\">\r\n    <div class=\"ax-toast-title\">{{options.title}}</div>\r\n    <div class=\"ax-toast-content\" *ngIf=\"options.content\">{{options.content}}</div>\r\n</div>\r\n<div class=\"ax-toast-dismiss-icon\">\r\n    <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.closeable\" (click)=\"close()\"></i>\r\n</div>\r\n<div class=\"ax-toast-progress ax-{{options.type}}\" [style.animation-duration.ms]=\"options.timeOut\" *ngIf=\"options.timeOut\">\r\n</div>\r\n\r\n<!-- <div class=\"ax-toast-buttons\">\r\n    <ng-container *ngFor=\"let button of options.buttons\">\r\n        <ax-button [text]=\"button.text\" (onClick)=\"_handleButtonClick(button)\" [cssClass]=\"button.class\"></ax-button>\r\n        <div class=\"ax-ml-2\"></div>\r\n    </ng-container>\r\n</div> -->", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXToastComponent, selector: "ax-toast", host: { classAttribute: "ax-toast" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-toast-icon-side\">\r\n    <i class=\"ax-toast-icon {{_icon}}\"></i>\r\n</div>\r\n<div class=\"ax-toast-content-side\">\r\n    <div class=\"ax-toast-title\">{{options.title}}</div>\r\n    <div class=\"ax-toast-content\" *ngIf=\"options.content\">{{options.content}}</div>\r\n</div>\r\n<div class=\"ax-toast-dismiss-icon\">\r\n    <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.closeable\" (click)=\"close()\"></i>\r\n</div>\r\n<div class=\"ax-toast-progress ax-{{options.type}}\" [style.animation-duration.ms]=\"options.timeOut\" *ngIf=\"options.timeOut\">\r\n</div>", directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXToastComponent, decorators: [{
             type: Component,
             args: [{
@@ -5639,12 +6069,12 @@ class AXToastService {
         }
     }
 }
-AXToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXToastService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+AXToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXToastService, deps: [{ token: i1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
 AXToastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXToastService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXToastService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.Injector }]; } });
+        }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.Injector }]; } });
 
 class AXTooltipComponent extends AXBaseComponentMixin {
     constructor(elementRef, cdr) {
@@ -5749,12 +6179,12 @@ class AXTooltipDirective {
         this.overlayRef.detach();
     }
 }
-AXTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTooltipDirective, deps: [{ token: i1$1.Overlay }, { token: i1$1.OverlayPositionBuilder }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+AXTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTooltipDirective, deps: [{ token: i1.Overlay }, { token: i1.OverlayPositionBuilder }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
 AXTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.6", type: AXTooltipDirective, selector: "[axTooltip]", inputs: { text: ["axTooltip", "text"], position: ["axTooltipPositon", "position"] }, host: { listeners: { "mouseenter": "show()", "mouseout": "hide()" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTooltipDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axTooltip]' }]
-        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i1$1.OverlayPositionBuilder }, { type: i0.ElementRef }]; }, propDecorators: { text: [{
+        }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i1.OverlayPositionBuilder }, { type: i0.ElementRef }]; }, propDecorators: { text: [{
                 type: Input,
                 args: ['axTooltip']
             }], position: [{
@@ -5803,7 +6233,7 @@ class AXTextBoxComponent extends AXBaseTextBoxMixin {
     }
 }
 AXTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTextBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", cssClass: "cssClass", size: "size", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", value: "value", name: "name" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-text-box" }, queries: [{ propertyName: "_contentMask", first: true, predicate: AXInputMaskComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container\">\r\n    <ng-content select=\"ax-prefix\">\r\n    </ng-content>\r\n    <input class=\"ax-input\" [attr.name]=\"name\" type=\"text\" [mask]=\"_contentMask?.mask\" [prefix]=\"_contentMask?.prefix\" [suffix]=\"_contentMask?.suffix\" [showMaskTyped]=\"_contentMask?.showMaskTyped\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n        [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete ? 'on': 'off'\">\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\" *ngIf=\"value && allowNull &&  !(disabled || readonly)\" iconClass=\"ax-ic ax-ic-clear\">\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    <ng-content select=\"ax-input-mask\">\r\n    </ng-content>\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "cssClass", "cssStyle", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i1$3.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime"] }, { type: i3.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: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.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 });
+AXTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", cssClass: "cssClass", size: "size", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", value: "value", name: "name" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-text-box ax-editor-container" }, queries: [{ propertyName: "_contentMask", first: true, predicate: AXInputMaskComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" type=\"text\" [mask]=\"_contentMask?.mask\" [prefix]=\"_contentMask?.prefix\"\r\n    [suffix]=\"_contentMask?.suffix\" [showMaskTyped]=\"_contentMask?.showMaskTyped\" [attr.placeholder]=\"placeholder\"\r\n    [attr.maxlength]=\"maxLength\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\"\r\n    [attr.autocomplete]=\"autoComplete ? 'on': 'off'\">\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && allowNull &&  !(disabled || readonly)\">\r\n    <ax-prefix>\r\n        <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n    </ax-prefix>\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<ng-content select=\"ax-input-mask\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$2.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime"] }, { type: i3.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: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTextBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -5826,7 +6256,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                     ],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'ax-text-box' },
+                    host: { class: 'ax-text-box ax-editor-container' },
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _contentMask: [{
                 type: ContentChild,
@@ -5842,12 +6272,14 @@ AXTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
 AXTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTextBoxModule, declarations: [AXTextBoxComponent], imports: [CommonModule,
         FormsModule,
         AXButtonModule,
-        AXEditorDecoratorModule, i1$3.NgxMaskModule], exports: [AXTextBoxComponent] });
+        AXEditorDecoratorModule,
+        AXIconModule, i1$2.NgxMaskModule], exports: [AXTextBoxComponent] });
 AXTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTextBoxModule, providers: [], imports: [[
             CommonModule,
             FormsModule,
             AXButtonModule,
             AXEditorDecoratorModule,
+            AXIconModule,
             NgxMaskModule.forChild()
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTextBoxModule, decorators: [{
@@ -5858,6 +6290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                         FormsModule,
                         AXButtonModule,
                         AXEditorDecoratorModule,
+                        AXIconModule,
                         NgxMaskModule.forChild()
                     ],
                     exports: [AXTextBoxComponent],
@@ -6011,5 +6444,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXAlertButtonComponent, AXAlertComponent, AXAlertContentComponent, AXAlertFooterComponent, AXAlertModule, AXAlertSuffixComponent, AXAlertTitleComponent, AXAvatarComponent, AXAvatarModule, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDropdownButtonMixin, AXBaseDropdownMenuMixin, AXBaseDropdownMixin, AXBaseItemButtonMixin, AXBasePageComponent, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatepickerComponent, AXDatepickerModule, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent, AXDrawerModule, AXDropdownButtonComponent, AXDropdownComponent, AXDropdownModule, AXDropdownPanelComponent, AXEditorDecoratorModule, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXIconComponent, AXIconModule, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXNumberBoxComponent, AXNumberBoxModule, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageFooterComponent, AXPageModule, AXPageResult, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXResponsiveDirective, AXSelectBoxComponent, AXSelectBoxModule, AXSelectionListComponent, AXSelectionListModule, AXSelectionValueChangedEvent, AXSideMenuComponent, AXSideMenuModule, AXSizableComponentMixin, AXSwitchComponent, AXSwitchModule, AXTabComponent, AXTabStripChangedEvent, AXTabStripComponent, AXTabViewComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, TAB_META_KEY, _BaseComponenetMixin };
+export { AXAlertButtonComponent, AXAlertComponent, AXAlertContentComponent, AXAlertFooterComponent, AXAlertModule, AXAlertSuffixComponent, AXAlertTitleComponent, AXAvatarComponent, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseItemButtonMixin, AXBasePageComponent, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatepickerComponent, AXDatepickerModule, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent, AXDrawerModule, AXDropdownComponent, AXDropdownModule, AXDropdownPanelComponent, AXEditorDecoratorModule, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXIconComponent, AXIconModule, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXItemClickEvent, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXNumberBoxComponent, AXNumberBoxModule, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageFooterComponent, AXPageModule, AXPageResult, AXPasswordBoxComponent, AXPasswordBoxModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXRangeSliderComponent, AXRangeSliderModule, AXResponsiveDirective, AXSelectBoxComponent, AXSelectBoxModule, AXSelectionListComponent, AXSelectionListModule, AXSelectionValueChangedEvent, AXSideMenuComponent, AXSideMenuModule, AXSizableComponentMixin, AXSwitchComponent, AXSwitchModule, AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabStripComponent, AXTabViewComponent, AXTabsComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, TAB_META_KEY, _BaseComponenetMixin };
 //# sourceMappingURL=acorex-components.js.map