@acorex/components 5.0.2 → 5.0.7

package/bundles/acorex-components.umd.js

@@ -1,8 +1,10 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/cdk/coercion'), require('@acorex/core'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('@angular/cdk/portal'), require('@angular/cdk/overlay'), require('@angular/forms'), require('@angular/cdk/a11y'), require('@angular/cdk/drag-drop'), require('@angular/cdk/bidi'), require('ngx-mask'), require('@angular/animations')) :
-    typeof define === 'function' && define.amd ? define('@acorex/components', ['exports', '@angular/core', '@angular/cdk/coercion', '@acorex/core', 'rxjs', 'rxjs/operators', '@angular/common', '@angular/cdk/portal', '@angular/cdk/overlay', '@angular/forms', '@angular/cdk/a11y', '@angular/cdk/drag-drop', '@angular/cdk/bidi', 'ngx-mask', '@angular/animations'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.acorex = global.acorex || {}, global.acorex.components = {}), global.ng.core, global.ng.cdk.coercion, global.i2, global.rxjs, global.rxjs.operators, global.ng.common, global.ng.cdk.portal, global.ng.cdk.overlay, global.ng.forms, global.ng.cdk.a11y, global.ng.cdk.dragDrop, global.ng.cdk.bidi, global.i1$3, global.ng.animations));
-}(this, (function (exports, i0, coercion, i2, rxjs, operators, i1, i1$1, i1$2, i3, i2$1, i3$1, i2$2, i1$3, animations) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/cdk/coercion'), require('@acorex/core'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('@angular/forms'), require('@angular/cdk/portal'), require('lodash'), require('@angular/cdk/overlay'), require('@angular/cdk/a11y'), require('@angular/cdk/drag-drop'), require('@angular/cdk/bidi'), require('ngx-mask'), require('@angular/animations')) :
+    typeof define === 'function' && define.amd ? define('@acorex/components', ['exports', '@angular/core', '@angular/cdk/coercion', '@acorex/core', 'rxjs', 'rxjs/operators', '@angular/common', '@angular/forms', '@angular/cdk/portal', 'lodash', '@angular/cdk/overlay', '@angular/cdk/a11y', '@angular/cdk/drag-drop', '@angular/cdk/bidi', 'ngx-mask', '@angular/animations'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.acorex = global.acorex || {}, global.acorex.components = {}), global.ng.core, global.ng.cdk.coercion, global.i2, global.rxjs, global.rxjs.operators, global.ng.common, global.ng.forms, global.ng.cdk.portal, global._, global.ng.cdk.overlay, global.ng.cdk.a11y, global.ng.cdk.dragDrop, global.ng.cdk.bidi, global.i1$2, global.ng.animations));
+}(this, (function (exports, i0, coercion, i2, rxjs, operators, i4, i3, i1, _, i1$1, i2$1, i3$1, i2$2, i1$2, animations) { 'use strict';
+
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -26,14 +28,15 @@
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
-    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$1);
-    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$2);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1);
+    var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1$1);
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
     var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
-    var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$3);
+    var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$2);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -363,7 +366,7 @@
             for (var _i = 0; _i < arguments.length; _i++) {
                 args[_i] = arguments[_i];
             }
-            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];
@@ -386,14 +389,14 @@
             return this._getHostElement().firstElementChild;
         };
         AXBaseComponent.prototype._onInternalInit = function () {
-            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();
         };
         AXBaseComponent.prototype._onInternalViewInit = function () {
@@ -574,7 +577,7 @@
                     var 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;
@@ -881,7 +884,12 @@
         }(Base));
         _disabled = new WeakMap(), _tabIndex = new WeakMap();
         return Mixin;
-    }
+    }
+    var INTERACTIVE_INPUTS = [
+        'disabled',
+        'tabIndex',
+    ];
+    var INTERACTIVE_OUTPUT = ['onBlur', 'onFocus'];
 
     function _SelectionComponenetMixin(Base) {
         return /** @class */ (function (_super) {
@@ -1372,11 +1380,10 @@
     var AXBaseButtonMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_ClickableComponenetMixin(_ButtonComponentMixin(AXBaseComponent))));
     var AXBaseValueComponentMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_ValueComponenetMixin(AXBaseComponent)));
     var AXBaseTextBoxMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_ValueComponenetMixin(_TextboxComponenetMixin(AXBaseComponent))));
-    var AXBaseDropdownMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_DropdownComponenetMixin(AXBaseComponent)));
     var AXBaseSelectionValueMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_DatalistComponenetMixin(_SelectionComponenetMixin(_ValueComponenetMixin(AXBaseComponent)))));
     var AXBaseValueDropdownMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_DropdownComponenetMixin(_DatalistComponenetMixin(_ValueComponenetMixin(AXBaseComponent)))));
     var AXBaseSelectionDropdownMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_DropdownComponenetMixin(_DatalistComponenetMixin(_SelectionComponenetMixin(_ValueComponenetMixin(AXBaseComponent))))));
-    var AXCalendarMixin = _ClickableComponenetMixin(_ButtonComponentMixin(_SizableComponenetMixin(AXBaseComponent)));
+    var AXCalendarComponentMixin = _ClickableComponenetMixin(_InteractiveComponenetMixin(_ValueComponenetMixin(AXBaseComponent)));
 
     /**
     *  Contains native event
@@ -1432,6 +1439,17 @@
         return AXButtonClickEvent;
     }(AXClickEvent));
     /**
+    *  Fires each time the user click the element.
+    * @category Events
+    */
+    var AXItemClickEvent = /** @class */ (function (_super) {
+        __extends(AXItemClickEvent, _super);
+        function AXItemClickEvent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return AXItemClickEvent;
+    }(AXEvent));
+    /**
     *  Fires each time the component gets focused.
     * @category Events
     */
@@ -1543,17 +1561,17 @@
             _visible.set(_this, void 0);
             return _this;
         }
-        Object.defineProperty(AXAlertComponent.prototype, "type", {
+        Object.defineProperty(AXAlertComponent.prototype, "color", {
             /**
             *  The Alert allows you to set different types of alerts
             */
             get: function () {
-                return this._type;
+                return this._color;
             },
             set: function (v) {
-                this._type = 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;
@@ -1573,7 +1591,7 @@
         });
         Object.defineProperty(AXAlertComponent.prototype, "hostClass", {
             get: function () {
-                return "ax-" + this.type;
+                return "ax-" + this.color;
             },
             enumerable: false,
             configurable: true
@@ -1590,12 +1608,12 @@
                     __classPrivateFieldSet(this, _visible, v);
                     var 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');
                     }
                 }
             },
@@ -1604,7 +1622,6 @@
         });
         AXAlertComponent.prototype.onInit = function () {
             var _this = this;
-            // this._getHostElement().classList.add(`ax-${this.type}`);
             if (this.timeOut) {
                 setTimeout(function () {
                     _this.dismiss();
@@ -1621,10 +1638,11 @@
         */
         AXAlertComponent.prototype.dismiss = function () {
             var host = this._getHostElement();
-            host.classList.add('animate__animated', 'animate__fadeOut', 'animate__fast');
-            host.addEventListener('animationend', function () {
+            this.visible = false;
+            var func = function () {
                 host.parentElement.removeChild(host);
-            });
+            };
+            host.addEventListener('transitionend', func);
         };
         /**
         *  Hide the alert
@@ -1642,7 +1660,7 @@
     }(AXBaseComponentMixin));
     _visible = new WeakMap();
     AXAlertComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXAlertComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXAlertComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXAlertComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXAlertComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1656,7 +1674,7 @@
                     type: i0.Input
                 }], typeChange: [{
                     type: i0.Output
-                }], type: [{
+                }], color: [{
                     type: i0.Input
                 }], hostClass: [{
                     type: i0.HostBinding,
@@ -1702,7 +1720,7 @@
         return AXAlertButtonComponent;
     }(AXBaseClickableMixin));
     AXAlertButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXAlertButtonComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXAlertButtonComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "\n       {{title}}\n       <i *ngIf=\"icon\" class=\"{{icon}}\"></i>\n    ", isInline: true, directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXAlertButtonComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "\n       {{title}}\n       <i *ngIf=\"icon\" class=\"{{icon}}\"></i>\n    ", isInline: true, directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXAlertButtonComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1782,7 +1800,7 @@
                     }]
             }] });
 
-    var COMPONENT$k = [
+    var COMPONENT$n = [
         AXAlertComponent,
         AXAlertContentComponent,
         AXAlertTitleComponent,
@@ -1790,7 +1808,7 @@
         AXAlertFooterComponent,
         AXAlertSuffixComponent
     ];
-    var MODULES$k = [i1.CommonModule];
+    var MODULES$n = [i4.CommonModule];
     var AXAlertModule = /** @class */ (function () {
         function AXAlertModule() {
         }
@@ -1802,19 +1820,19 @@
             AXAlertTitleComponent,
             AXAlertButtonComponent,
             AXAlertFooterComponent,
-            AXAlertSuffixComponent], imports: [i1.CommonModule], exports: [AXAlertComponent,
+            AXAlertSuffixComponent], imports: [i4.CommonModule], exports: [AXAlertComponent,
             AXAlertContentComponent,
             AXAlertTitleComponent,
             AXAlertButtonComponent,
             AXAlertFooterComponent,
             AXAlertSuffixComponent] });
-    AXAlertModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXAlertModule, providers: [], imports: [__spreadArray([], __read(MODULES$k))] });
+    AXAlertModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXAlertModule, providers: [], imports: [__spreadArray([], __read(MODULES$n))] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXAlertModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: __spreadArray([], __read(COMPONENT$k)),
-                        imports: __spreadArray([], __read(MODULES$k)),
-                        exports: __spreadArray([], __read(COMPONENT$k)),
+                        declarations: __spreadArray([], __read(COMPONENT$n)),
+                        imports: __spreadArray([], __read(MODULES$n)),
+                        exports: __spreadArray([], __read(COMPONENT$n)),
                         providers: [],
                     }]
             }] });
@@ -1888,22 +1906,80 @@
                     type: i0.Input
                 }] } });
 
-    var COMPONENT$j = [AXAvatarComponent];
-    var MODULES$j = [i1.CommonModule];
+    var COMPONENT$m = [AXAvatarComponent];
+    var MODULES$m = [i4.CommonModule];
     var AXAvatarModule = /** @class */ (function () {
         function AXAvatarModule() {
         }
         return AXAvatarModule;
     }());
     AXAvatarModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXAvatarModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXAvatarModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXAvatarModule, declarations: [AXAvatarComponent], imports: [i1.CommonModule], exports: [AXAvatarComponent] });
-    AXAvatarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXAvatarModule, providers: [], imports: [__spreadArray([], __read(MODULES$j))] });
+    AXAvatarModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXAvatarModule, declarations: [AXAvatarComponent], imports: [i4.CommonModule], exports: [AXAvatarComponent] });
+    AXAvatarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXAvatarModule, providers: [], imports: [__spreadArray([], __read(MODULES$m))] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXAvatarModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: __spreadArray([], __read(COMPONENT$j)),
-                        imports: __spreadArray([], __read(MODULES$j)),
-                        exports: __spreadArray([], __read(COMPONENT$j)),
+                        declarations: __spreadArray([], __read(COMPONENT$m)),
+                        imports: __spreadArray([], __read(MODULES$m)),
+                        exports: __spreadArray([], __read(COMPONENT$m)),
+                        providers: [],
+                    }]
+            }] });
+
+    var AXBadgeComponent = /** @class */ (function (_super) {
+        __extends(AXBadgeComponent, _super);
+        function AXBadgeComponent(elementRef, cdr) {
+            var _this = _super.call(this, elementRef, cdr) || this;
+            _this.text = '';
+            _this.color = 'light';
+            return _this;
+            //TODO: ax-badge
+        }
+        Object.defineProperty(AXBadgeComponent.prototype, "__hostClass", {
+            get: function () {
+                return ["ax-bg-" + this.color + "-100", "ax-text-" + this.color + "-600"].join(' ');
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return AXBadgeComponent;
+    }(AXBaseComponentMixin));
+    AXBadgeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXBadgeComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AXBadgeComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXBadgeComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ax-badge',
+                        templateUrl: './badge.component.html',
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        encapsulation: i0.ViewEncapsulation.None,
+                        host: { class: 'ax-badge' }
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { text: [{
+                    type: i0.Input
+                }], color: [{
+                    type: i0.Input
+                }], __hostClass: [{
+                    type: i0.HostBinding,
+                    args: ['class']
+                }] } });
+
+    var COMPONENT$l = [AXBadgeComponent];
+    var MODULES$l = [i4.CommonModule];
+    var AXBadgeModule = /** @class */ (function () {
+        function AXBadgeModule() {
+        }
+        return AXBadgeModule;
+    }());
+    AXBadgeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXBadgeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    AXBadgeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXBadgeModule, declarations: [AXBadgeComponent], imports: [i4.CommonModule], exports: [AXBadgeComponent] });
+    AXBadgeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXBadgeModule, providers: [], imports: [__spreadArray([], __read(MODULES$l))] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXBadgeModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: __spreadArray([], __read(COMPONENT$l)),
+                        imports: __spreadArray([], __read(MODULES$l)),
+                        exports: __spreadArray([], __read(COMPONENT$l)),
                         providers: [],
                     }]
             }] });
@@ -1930,7 +2006,6 @@
             }
         };
         AXButtonComponent.prototype._emitOnClickEvent = function (e) {
-            debugger;
             if (this.disabled)
                 return;
             if (this.toggleable) {
@@ -1938,23 +2013,194 @@
             }
             _super.prototype._emitOnClickEvent.call(this, e);
         };
+        AXButtonComponent.prototype._emitOnFocusEvent = function (e) {
+            _super.prototype._emitOnFocusEvent.call(this, e);
+        };
+        AXButtonComponent.prototype._emitOnBlurEvent = function (e) {
+            _super.prototype._emitOnBlurEvent.call(this, e);
+        };
+        Object.defineProperty(AXButtonComponent.prototype, "__hostClass", {
+            get: function () {
+                var _a;
+                return (_a = Object.entries(this._classes).filter(function (c) { return c[1]; }).map(function (c) { return c[0]; })).concat.apply(_a, ["ax-" + this.size]).join(' ');
+            },
+            enumerable: false,
+            configurable: true
+        });
         return AXButtonComponent;
     }(AXBaseButtonMixin));
     AXButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXButtonComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXButtonComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXButtonComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXButtonComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ax-button',
                         templateUrl: './button.component.html',
-                        inputs: __spreadArray(['disabled', 'tabIndex', 'size', 'cssClass', 'cssStyle'], __read(BUTTON_INPUTS)),
+                        inputs: __spreadArray(['disabled', 'tabIndex', 'size'], __read(BUTTON_INPUTS)),
                         outputs: __spreadArray([], __read(BUTTON_OUTPUT)),
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        encapsulation: i0.ViewEncapsulation.None
+                        encapsulation: i0.ViewEncapsulation.None,
+                        host: { role: 'button' }
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { onKeydownHandler: [{
                     type: i0.HostListener,
                     args: ['document:keydown.escape', ['$event']]
+                }], _emitOnClickEvent: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }], _emitOnFocusEvent: [{
+                    type: i0.HostListener,
+                    args: ['focus', ['$event']]
+                }], _emitOnBlurEvent: [{
+                    type: i0.HostListener,
+                    args: ['blur', ['$event']]
+                }], __hostClass: [{
+                    type: i0.HostBinding,
+                    args: ['class']
+                }] } });
+
+    var AXButtonGroupComponent = /** @class */ (function (_super) {
+        __extends(AXButtonGroupComponent, _super);
+        function AXButtonGroupComponent(elementRef, zone, cdr) {
+            var _this = _super.call(this, elementRef, cdr) || this;
+            _this.zone = zone;
+            _this.selectionChange = new i0.EventEmitter();
+            _this.colorChange = new i0.EventEmitter();
+            _this._color = 'primary';
+            _this.lookChange = new i0.EventEmitter();
+            _this._look = null;
+            _this.onItemClick = new i0.EventEmitter();
+            _this.onValueChanged = new i0.EventEmitter();
+            return _this;
+        }
+        Object.defineProperty(AXButtonGroupComponent.prototype, "selection", {
+            get: function () {
+                return this._selection;
+            },
+            set: function (value) {
+                value = this.onOptionChanging({ name: 'selection', value: value });
+                var oldValue = this.selection;
+                if (value != oldValue) {
+                    this._selection = value;
+                    this.selectionChange.emit(value);
+                    this.onOptionChanged({ name: 'selection', oldValue: oldValue, newValue: value });
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AXButtonGroupComponent.prototype, "color", {
+            /**
+            *  Predefined color schemes
+            */
+            get: function () {
+                return this._color;
+            },
+            set: function (value) {
+                value = this.onOptionChanging({ name: 'color', value: value });
+                var oldValue = this.color;
+                if (value != oldValue) {
+                    this._color = value;
+                    this.colorChange.emit(value);
+                    this.onOptionChanged({ name: 'value', oldValue: oldValue, newValue: value });
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AXButtonGroupComponent.prototype, "look", {
+            /**
+            *  Predefined look schemes
+            */
+            get: function () {
+                return this._look;
+            },
+            set: function (value) {
+                value = this.onOptionChanging({ name: 'look', value: value });
+                var oldValue = this.look;
+                if (value != oldValue) {
+                    this._look = value;
+                    this.lookChange.emit(value);
+                    this.onOptionChanged({ name: 'look', oldValue: oldValue, newValue: value });
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AXButtonGroupComponent.prototype.ngAfterContentInit = function () {
+            this._bindEvents();
+            this._bindProps();
+        };
+        AXButtonGroupComponent.prototype._bindEvents = function () {
+            var _this = this;
+            (this._contentButtons || []).forEach(function (b) {
+                b.onClick.subscribe(function (c) {
+                    _this._handleClickEvent(c, b);
+                });
+            });
+        };
+        AXButtonGroupComponent.prototype._bindProps = function () {
+            var _this = this;
+            (this._contentButtons || []).forEach(function (b) {
+                b.look = _this.look;
+                b.color = _this.color;
+                b.disabled = _this.disabled;
+                b.toggleable = false;
+            });
+        };
+        AXButtonGroupComponent.prototype.onOptionChanged = function (options) {
+            this._bindProps();
+        };
+        AXButtonGroupComponent.prototype._handleClickEvent = function (e, button) {
+            if (this.selection == 'multiple') {
+                button.selected = !button.selected;
+            }
+            else if (this.selection == 'single') {
+                this._contentButtons.forEach(function (c) {
+                    c.selected = false;
+                });
+                button.selected = true;
+            }
+            else {
+                button.selected = false;
+            }
+            this.onItemClick.emit({
+                component: this,
+                htmlElement: e.htmlElement,
+                item: button
+            });
+        };
+        return AXButtonGroupComponent;
+    }(AXInteractiveComponenetMixin));
+    AXButtonGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXButtonGroupComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AXButtonGroupComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<ng-content select=\"ax-button\">\r\n</ng-content>", changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXButtonGroupComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ax-button-group',
+                        templateUrl: 'button-group.component.html',
+                        inputs: ['cssClass', 'size', 'cssStyle', 'rtl', 'disabled'],
+                        encapsulation: i0.ViewEncapsulation.None,
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        host: { class: 'ax-button-group', role: 'group' }
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { selectionChange: [{
+                    type: i0.Output
+                }], selection: [{
+                    type: i0.Input
+                }], colorChange: [{
+                    type: i0.Output
+                }], color: [{
+                    type: i0.Input
+                }], lookChange: [{
+                    type: i0.Output
+                }], look: [{
+                    type: i0.Input
+                }], onItemClick: [{
+                    type: i0.Output
+                }], _contentButtons: [{
+                    type: i0.ContentChildren,
+                    args: [AXButtonComponent, { descendants: true }]
                 }] } });
 
     var AXBaseItemButtonMixin = _InteractiveComponenetMixin(_ClickableComponenetMixin(AXBaseComponent));
@@ -1991,7 +2237,7 @@
         return AXButtonItemComponent;
     }(AXBaseItemButtonMixin));
     AXButtonItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXButtonItemComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXButtonItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXButtonItemComponent, selector: "ax-button-item", inputs: { text: "text", tooltip: "tooltip", selected: "selected", seperated: "seperated", name: "name", data: "data", color: "color" }, host: { listeners: { "click": "__hostClick($event)" }, properties: { "class": "this.__hostClass" }, styleAttribute: "cssStyle" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-content select=\"ax-prefix\">\n        </ng-content>\n        <ng-content select=\"ax-icon\">\n        </ng-content>\n        <span *ngIf=\"text\">{{text}}</span>\n        <ng-content select=\"ax-suffix\">\n        </ng-content>\n    ", isInline: true, directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXButtonItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXButtonItemComponent, selector: "ax-button-item", inputs: { text: "text", tooltip: "tooltip", selected: "selected", seperated: "seperated", name: "name", data: "data", color: "color" }, host: { listeners: { "click": "__hostClick($event)" }, properties: { "class": "this.__hostClass" }, styleAttribute: "cssStyle" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-content select=\"ax-prefix\">\n        </ng-content>\n        <ng-content select=\"ax-icon\">\n        </ng-content>\n        <span *ngIf=\"text\">{{text}}</span>\n        <ng-content select=\"ax-suffix\">\n        </ng-content>\n    ", isInline: true, directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXButtonItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2023,37 +2269,6 @@
                     args: ['class']
                 }] } });
 
-    var AXIconComponent = /** @class */ (function (_super) {
-        __extends(AXIconComponent, _super);
-        function AXIconComponent(elementRef, cdr) {
-            return _super.call(this, elementRef, cdr) || this;
-        }
-        Object.defineProperty(AXIconComponent.prototype, "iconClass", {
-            get: function () {
-                return "ax-ic " + this.icon;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return AXIconComponent;
-    }(AXSizableComponentMixin));
-    AXIconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXIconComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXIconComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXIconComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'ax-icon',
-                        template: '',
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        encapsulation: i0.ViewEncapsulation.None,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { icon: [{
-                    type: i0.Input
-                }], iconClass: [{
-                    type: i0.HostBinding,
-                    args: ['class']
-                }] } });
-
     var AXDecoratorPrefixComponent = /** @class */ (function (_super) {
         __extends(AXDecoratorPrefixComponent, _super);
         function AXDecoratorPrefixComponent(elementRef, cdr) {
@@ -2062,426 +2277,115 @@
         return AXDecoratorPrefixComponent;
     }(AXBaseComponentMixin));
     AXDecoratorPrefixComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDecoratorPrefixComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXDecoratorPrefixComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDecoratorPrefixComponent, selector: "ax-prefix", host: { classAttribute: "ax-prefix" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-content select=\"ax-button,ax-loading,ax-dropdown-button,ax-icon\">\n        </ng-content>\n    ", isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXDecoratorPrefixComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDecoratorPrefixComponent, selector: "ax-prefix", host: { classAttribute: "ax-prefix" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-content select=\"ax-button,ax-loading,ax-icon,ax-badge\">\n        </ng-content>\n    ", isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDecoratorPrefixComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ax-prefix',
-                        template: "\n        <ng-content select=\"ax-button,ax-loading,ax-dropdown-button,ax-icon\">\n        </ng-content>\n    ",
+                        template: "\n        <ng-content select=\"ax-button,ax-loading,ax-icon,ax-badge\">\n        </ng-content>\n    ",
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         encapsulation: i0.ViewEncapsulation.None,
                         host: { class: 'ax-prefix' }
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
-    var AXBaseDropdownButtonMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_ClickableComponenetMixin(_ButtonComponentMixin(_DropdownComponenetMixin((AXBaseComponent))))));
-    var AXDropdownButtonComponent = /** @class */ (function (_super) {
-        __extends(AXDropdownButtonComponent, _super);
-        function AXDropdownButtonComponent(_elementRef, _cdr, _overlay, _platform, _viewContainerRef) {
-            var _this = _super.call(this, _elementRef, _cdr) || this;
-            _this._overlay = _overlay;
-            _this._platform = _platform;
-            _this._viewContainerRef = _viewContainerRef;
-            _this.onItemClick = new i0.EventEmitter();
-            _this._subs = [];
-            _this.dropdownIcon = 'ax-ic-chevron ax-transform ax--rotate-90';
-            _this.splited = true;
-            return _this;
-        }
-        Object.defineProperty(AXDropdownButtonComponent.prototype, "items", {
-            get: function () {
-                return this._items || [];
-            },
-            set: function (v) {
-                this._items = v;
-                this._cdr.markForCheck();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        AXDropdownButtonComponent.prototype._getAllButtons = function () {
-            return __spreadArray(__spreadArray([], __read(Array.from(this._viewButtons))), __read(Array.from(this._contentButtons)));
-        };
-        AXDropdownButtonComponent.prototype.onViewInit = function () {
-            var _this = this;
-            this._getAllButtons().forEach(function (c) {
-                _this._subs.push(c.onClick.subscribe(_this._handleOnItemClick.bind(_this)));
-            });
-        };
-        AXDropdownButtonComponent.prototype.onDestroy = function () {
-            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(function (s) {
-                s === null || s === void 0 ? void 0 : s.unsubscribe();
-            });
-        };
-        AXDropdownButtonComponent.prototype._handleKeydownHandler = function (e) {
-            if (e.key === 'Enter' && e.type === 'keydown') {
-                this.toggle();
-            }
-            if (e.key === 'Escape') {
-                if (this.isOpen) {
-                    this.close();
-                    e.stopPropagation();
-                }
-            }
-        };
-        AXDropdownButtonComponent.prototype._emitOnClickEvent = function (e) {
-            if (!this.splited) {
-                this.toggle();
-            }
-            else {
-                _super.prototype._emitOnClickEvent.call(this, e);
-            }
-        };
-        AXDropdownButtonComponent.prototype._handleArrowClickEvent = function (e) {
-            this.toggle();
-        };
-        AXDropdownButtonComponent.prototype._emitOnItemClickEvent = function (e, item) {
-            this.onItemClick.emit({
-                component: this,
-                htmlElement: this._getHostElement(),
-                nativeEvent: e.nativeEvent,
-                name: item.name,
-                data: item.data,
-            });
-            this.close();
-        };
-        AXDropdownButtonComponent.prototype._handleOnItemClick = function (e) {
-            this.close();
-            this._emitOnItemClickEvent(e, e.component);
-        };
-        AXDropdownButtonComponent.prototype.toggle = function () {
-            if (this.disabled !== true) {
-                this.isOpen ? this.close() : this.open();
-            }
-        };
-        AXDropdownButtonComponent.prototype.close = function () {
-            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();
-        };
-        AXDropdownButtonComponent.prototype.open = function () {
-            if (this.isOpen) {
-                return;
-            }
-            this._ensureOverlayCreated();
-            this._overlayRef.attach(this._templatePortal);
-            this._emitOnOpenedEvent();
-        };
-        AXDropdownButtonComponent.prototype._ensureOverlayCreated = function () {
-            var _this = this;
-            var baseSize = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', '')) / 2;
-            if (!this._overlayRef) {
-                var 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: 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(function (c) {
-                    var target = c.target;
-                    var comElem = _this._getHostElement();
-                    if (!(comElem.contains(target))) {
-                        _this.close();
-                    }
-                });
-                this._subs[1] = this._overlayRef.attachments().subscribe(function () {
-                    if (_this.fitParent === true) {
-                        _this._dropdownWidth = _this._getHostElement().offsetWidth;
-                    }
-                    else {
-                        _this._dropdownWidth = _this._getHostElement().offsetWidth * 1.5;
-                    }
-                    _this._subs[2] = _this._platform.scroll.subscribe(function (c) {
-                        if (!c.nativeEvent.target.closest('.ax-overlay-pane'))
-                            _this.close();
-                    });
-                });
-            }
-            if (!this._templatePortal) {
-                this._templatePortal = new i1$1.TemplatePortal(this._baseTemplate, this._viewContainerRef);
-            }
-        };
-        Object.defineProperty(AXDropdownButtonComponent.prototype, "isOpen", {
-            get: function () {
-                return this._overlayRef ? this._overlayRef.hasAttached() : false;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return AXDropdownButtonComponent;
-    }(AXBaseDropdownButtonMixin));
-    AXDropdownButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDropdownButtonComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$1.Overlay }, { token: i2__namespace.AXPlatform }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXDropdownButtonComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDropdownButtonComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'ax-dropdown-button',
-                        templateUrl: 'dropdown-button.component.html',
-                        inputs: __spreadArray(['disabled', 'tabIndex', 'size', 'cssClass'], __read(BUTTON_INPUTS)),
-                        outputs: ['onClick', 'onBlur', 'onFocus'],
-                        encapsulation: i0.ViewEncapsulation.None,
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        host: { class: 'ax-dropdown-button' }
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$1.Overlay }, { type: i2__namespace.AXPlatform }, { type: i0__namespace.ViewContainerRef }]; }, propDecorators: { _contentButtons: [{
-                    type: i0.ContentChildren,
-                    args: [AXButtonItemComponent]
-                }], _viewButtons: [{
-                    type: i0.ViewChildren,
-                    args: [AXButtonItemComponent]
-                }], onItemClick: [{
-                    type: i0.Output
-                }], items: [{
-                    type: i0.Input
-                }], _baseTemplate: [{
-                    type: i0.ViewChild,
-                    args: ['baseTemplate']
-                }], dropdownIcon: [{
-                    type: i0.Input
-                }], splited: [{
-                    type: i0.Input
-                }], _handleKeydownHandler: [{
-                    type: i0.HostListener,
-                    args: ['keydown', ['$event']]
-                }] } });
-
-    var AXButtonGroupComponent = /** @class */ (function (_super) {
-        __extends(AXButtonGroupComponent, _super);
-        function AXButtonGroupComponent(elementRef, zone, cdr) {
-            var _this = _super.call(this, elementRef, cdr) || this;
-            _this.zone = zone;
-            _this.selectionChange = new i0.EventEmitter();
-            _this.colorChange = new i0.EventEmitter();
-            _this._color = 'primary';
-            _this.lookChange = new i0.EventEmitter();
-            _this._look = null;
-            _this.onItemClick = new i0.EventEmitter();
-            return _this;
-        }
-        Object.defineProperty(AXButtonGroupComponent.prototype, "selection", {
-            get: function () {
-                return this._selection;
-            },
-            set: function (value) {
-                value = this.onOptionChanging({ name: 'selection', value: value });
-                var oldValue = this.selection;
-                if (value != oldValue) {
-                    this._selection = value;
-                    this.selectionChange.emit(value);
-                    this.onOptionChanged({ name: 'selection', oldValue: oldValue, newValue: value });
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AXButtonGroupComponent.prototype, "color", {
-            /**
-            *  Predefined color schemes
-            */
-            get: function () {
-                return this._color;
-            },
-            set: function (value) {
-                value = this.onOptionChanging({ name: 'color', value: value });
-                var oldValue = this.color;
-                if (value != oldValue) {
-                    this._color = value;
-                    this.colorChange.emit(value);
-                    this.onOptionChanged({ name: 'value', oldValue: oldValue, newValue: value });
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AXButtonGroupComponent.prototype, "look", {
-            /**
-            *  Predefined look schemes
-            */
-            get: function () {
-                return this._look;
-            },
-            set: function (value) {
-                value = this.onOptionChanging({ name: 'look', value: value });
-                var oldValue = this.look;
-                if (value != oldValue) {
-                    this._look = value;
-                    this.lookChange.emit(value);
-                    this.onOptionChanged({ name: 'look', oldValue: oldValue, newValue: value });
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        AXButtonGroupComponent.prototype.ngAfterContentInit = function () {
-            this._bindEvents();
-            this._bindProps();
-        };
-        AXButtonGroupComponent.prototype._bindEvents = function () {
-            var _this = this;
-            (this._contentButtons || []).forEach(function (b) {
-                b.onClick.subscribe(function (c) {
-                    _this._handleClickEvent(c, b);
-                });
-            });
-        };
-        AXButtonGroupComponent.prototype._bindProps = function () {
-            var _this = this;
-            (this._contentButtons || []).forEach(function (b) {
-                b.look = _this.look;
-                b.color = _this.color;
-                b.disabled = _this.disabled;
-                b.toggleable = false;
-            });
-        };
-        AXButtonGroupComponent.prototype.onOptionChanged = function (options) {
-            this._bindProps();
-        };
-        AXButtonGroupComponent.prototype._handleClickEvent = function (e, button) {
-            if (this.selection == 'multiple') {
-                button.selected = !button.selected;
-            }
-            else if (this.selection == 'single') {
-                this._contentButtons.forEach(function (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
-            });
-        };
-        return AXButtonGroupComponent;
-    }(AXInteractiveComponenetMixin));
-    AXButtonGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXButtonGroupComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXButtonGroupComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<ng-content select=\"ax-button\">\r\n</ng-content>", changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXButtonGroupComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'ax-button-group',
-                        templateUrl: 'button-group.component.html',
-                        inputs: ['cssClass', 'size', 'cssStyle', 'rtl', 'disabled'],
-                        encapsulation: i0.ViewEncapsulation.None,
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        host: { class: 'ax-button-group', role: 'group' }
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { selectionChange: [{
-                    type: i0.Output
-                }], selection: [{
-                    type: i0.Input
-                }], colorChange: [{
-                    type: i0.Output
-                }], color: [{
-                    type: i0.Input
-                }], lookChange: [{
-                    type: i0.Output
-                }], look: [{
-                    type: i0.Input
-                }], onItemClick: [{
-                    type: i0.Output
-                }], _contentButtons: [{
-                    type: i0.ContentChildren,
-                    args: [AXButtonComponent, { descendants: true }]
-                }] } });
-
-    var AXDecoratorSuffixComponent = /** @class */ (function (_super) {
-        __extends(AXDecoratorSuffixComponent, _super);
-        function AXDecoratorSuffixComponent(elementRef, cdr) {
-            return _super.call(this, elementRef, cdr) || this;
+    var AXDecoratorSuffixComponent = /** @class */ (function (_super) {
+        __extends(AXDecoratorSuffixComponent, _super);
+        function AXDecoratorSuffixComponent(elementRef, cdr) {
+            return _super.call(this, elementRef, cdr) || this;
         }
         return AXDecoratorSuffixComponent;
     }(AXBaseComponentMixin));
     AXDecoratorSuffixComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDecoratorSuffixComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXDecoratorSuffixComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDecoratorSuffixComponent, selector: "ax-suffix", host: { classAttribute: "ax-suffix" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-content select=\"ax-button\">\n        </ng-content>\n        <ng-content select=\"ax-dropdown-button\">\n        </ng-content>\n        <ng-content select=\"ax-icon\">\n        </ng-content>\n    ", isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXDecoratorSuffixComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDecoratorSuffixComponent, selector: "ax-suffix", host: { classAttribute: "ax-suffix" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-content select=\"ax-button,ax-icon,ax-badge\">\n        </ng-content>\n    ", isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDecoratorSuffixComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ax-suffix',
-                        template: "\n        <ng-content select=\"ax-button\">\n        </ng-content>\n        <ng-content select=\"ax-dropdown-button\">\n        </ng-content>\n        <ng-content select=\"ax-icon\">\n        </ng-content>\n    ",
+                        template: "\n        <ng-content select=\"ax-button,ax-icon,ax-badge\">\n        </ng-content>\n    ",
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         encapsulation: i0.ViewEncapsulation.None,
                         host: { class: 'ax-suffix' }
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
-    var COMPONENT$i = [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent];
-    var MODULES$i = [i1.CommonModule];
+    var COMPONENT$k = [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent];
+    var MODULES$k = [i4.CommonModule];
     var AXEditorDecoratorModule = /** @class */ (function () {
         function AXEditorDecoratorModule() {
         }
         return AXEditorDecoratorModule;
     }());
     AXEditorDecoratorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXEditorDecoratorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXEditorDecoratorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXEditorDecoratorModule, declarations: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent], imports: [i1.CommonModule], exports: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent] });
-    AXEditorDecoratorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXEditorDecoratorModule, providers: [], imports: [__spreadArray([], __read(MODULES$i))] });
+    AXEditorDecoratorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXEditorDecoratorModule, declarations: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent], imports: [i4.CommonModule], exports: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent] });
+    AXEditorDecoratorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXEditorDecoratorModule, providers: [], imports: [__spreadArray([], __read(MODULES$k))] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXEditorDecoratorModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: __spreadArray([], __read(COMPONENT$i)),
-                        imports: __spreadArray([], __read(MODULES$i)),
-                        exports: __spreadArray([], __read(COMPONENT$i)),
+                        declarations: __spreadArray([], __read(COMPONENT$k)),
+                        imports: __spreadArray([], __read(MODULES$k)),
+                        exports: __spreadArray([], __read(COMPONENT$k)),
                         providers: [],
                     }]
             }] });
 
-    var COMPONENT$h = [AXIconComponent];
-    var MODULES$h = [i1.CommonModule];
+    var AXIconComponent = /** @class */ (function (_super) {
+        __extends(AXIconComponent, _super);
+        function AXIconComponent(elementRef, cdr) {
+            return _super.call(this, elementRef, cdr) || this;
+        }
+        Object.defineProperty(AXIconComponent.prototype, "__iconClass", {
+            get: function () {
+                return "ax-ic " + this.icon;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return AXIconComponent;
+    }(AXSizableComponentMixin));
+    AXIconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXIconComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AXIconComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXIconComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ax-icon',
+                        template: '',
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        encapsulation: i0.ViewEncapsulation.None,
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { icon: [{
+                    type: i0.Input
+                }], __iconClass: [{
+                    type: i0.HostBinding,
+                    args: ['class']
+                }] } });
+
+    var COMPONENT$j = [AXIconComponent];
+    var MODULES$j = [i4.CommonModule];
     var AXIconModule = /** @class */ (function () {
         function AXIconModule() {
         }
         return AXIconModule;
     }());
     AXIconModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXIconModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXIconModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXIconModule, declarations: [AXIconComponent], imports: [i1.CommonModule], exports: [AXIconComponent] });
-    AXIconModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXIconModule, providers: [], imports: [__spreadArray([], __read(MODULES$h))] });
+    AXIconModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXIconModule, declarations: [AXIconComponent], imports: [i4.CommonModule], exports: [AXIconComponent] });
+    AXIconModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXIconModule, providers: [], imports: [__spreadArray([], __read(MODULES$j))] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXIconModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: __spreadArray([], __read(COMPONENT$h)),
-                        imports: __spreadArray([], __read(MODULES$h)),
-                        exports: __spreadArray([], __read(COMPONENT$h)),
+                        declarations: __spreadArray([], __read(COMPONENT$j)),
+                        imports: __spreadArray([], __read(MODULES$j)),
+                        exports: __spreadArray([], __read(COMPONENT$j)),
                         providers: [],
                     }]
             }] });
 
-    var COMPONENT$g = [
+    var COMPONENT$i = [
         AXButtonComponent,
-        AXDropdownButtonComponent,
         AXButtonItemComponent,
         AXButtonGroupComponent,
     ];
-    var MODULES$g = [i1.CommonModule, AXIconModule, AXEditorDecoratorModule];
+    var MODULES$i = [i4.CommonModule, AXIconModule, AXEditorDecoratorModule];
     var AXButtonModule = /** @class */ (function () {
         function AXButtonModule() {
         }
@@ -2489,19 +2393,17 @@
     }());
     AXButtonModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXButtonModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     AXButtonModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXButtonModule, declarations: [AXButtonComponent,
-            AXDropdownButtonComponent,
             AXButtonItemComponent,
-            AXButtonGroupComponent], imports: [i1.CommonModule, AXIconModule, AXEditorDecoratorModule], exports: [AXButtonComponent,
-            AXDropdownButtonComponent,
+            AXButtonGroupComponent], imports: [i4.CommonModule, AXIconModule, AXEditorDecoratorModule], exports: [AXButtonComponent,
             AXButtonItemComponent,
             AXButtonGroupComponent] });
-    AXButtonModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXButtonModule, providers: [], imports: [[MODULES$g]] });
+    AXButtonModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXButtonModule, providers: [], imports: [[MODULES$i]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXButtonModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [MODULES$g],
-                        exports: [COMPONENT$g],
-                        declarations: [COMPONENT$g],
+                        imports: [MODULES$i],
+                        exports: [COMPONENT$i],
+                        declarations: [COMPONENT$i],
                         providers: [],
                     }]
             }] });
@@ -2510,74 +2412,331 @@
         __extends(AXCalendarComponent, _super);
         function AXCalendarComponent(elementRef, cdr) {
             var _this = _super.call(this, elementRef, cdr) || this;
-            _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 i2.AXDateTime(new Date());
+            _this._navText = '';
+            _this._todayText = '';
+            _this._slots = [];
+            _this._activeView = 'days';
+            _this.depthChange = new i0.EventEmitter();
+            _this._depth = 'days';
             return _this;
         }
-        AXCalendarComponent.prototype.ngAfterViewInit = function () {
+        Object.defineProperty(AXCalendarComponent.prototype, "_viewRange", {
+            get: function () {
+                var current = this._viewStartDate || this._today;
+                switch (this.activeView) {
+                    case 'years':
+                        var y = current.startOf('year').year;
+                        var min = y - (y % 10) - 1;
+                        var max = min + 11;
+                        return new i2.AXDateTimeRange(i2.AXDateTime.convert(new Date(min, 0), this._today.calendar.name()), i2.AXDateTime.convert(new Date(max, 0), this._today.calendar.name()));
+                    case 'months':
+                        //TODO: check add month function
+                        return new i2.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 i2.AXDateTimeRange(current.startOf('month'), current.endOf('month'));
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AXCalendarComponent.prototype, "activeView", {
+            get: function () {
+                return this._activeView;
+            },
+            set: function (v) {
+                this._activeView = v;
+                this._genearteSlots();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AXCalendarComponent.prototype, "depth", {
+            get: function () {
+                return this._depth;
+            },
+            set: function (v) {
+                this._depth = v;
+                this._activeView = v;
+                this.depthChange.emit(v);
+                this._genearteSlots();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AXCalendarComponent.prototype, "min", {
+            get: function () {
+                return this._min;
+            },
+            set: function (v) {
+                this._min = v;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AXCalendarComponent.prototype, "max", {
+            get: function () {
+                return this._max;
+            },
+            set: function (v) {
+                this._max = v;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AXCalendarComponent.prototype, "disabledDates", {
+            get: function () {
+                return this._disabledDates;
+            },
+            set: function (v) {
+                this._disabledDates = v;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AXCalendarComponent.prototype, "holidayDates", {
+            get: function () {
+                return this._holidayDates;
+            },
+            set: function (v) {
+                this._holidayDates = v;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AXCalendarComponent.prototype.onInit = function () {
+            this.goToday();
         };
-        AXCalendarComponent.prototype.createYears = function () {
-            var number = 1990;
-            for (var i = 0; i < 40; i++) {
-                number = number + 1;
-                this.yearItems.push(number);
+        AXCalendarComponent.prototype._genearteSlots = function () {
+            var _this = this;
+            if (!this._viewStartDate)
+                return;
+            var vr = this._viewRange;
+            // year view
+            if (this.activeView == 'years') {
+                var a = vr.enumurate('year');
+                this._slots = a.map(function (d, i) {
+                    var 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') {
+                var a = vr.enumurate('month');
+                this._slots = a.map(function (d, i) {
+                    var 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 {
+                var a = vr.enumurate('day');
+                this._slots = a.map(function (d, i) {
+                    var 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');
+            }
+        };
+        AXCalendarComponent.prototype._handlePrevClick = function (e) {
+            this.prev();
+        };
+        AXCalendarComponent.prototype._handleNextClick = function (e) {
+            this.next();
+        };
+        AXCalendarComponent.prototype._handleSlotClick = function (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;
+            }
+        };
+        AXCalendarComponent.prototype._handleNavClick = function (e) {
+            if (this.activeView == 'days')
+                this.activeView = 'months';
+            else if (this.activeView == 'months')
+                this.activeView = 'years';
+        };
+        AXCalendarComponent.prototype._onValueChanged = function (oldValue, newValue) {
+            this._genearteSlots();
+        };
+        AXCalendarComponent.prototype._handleGoToday = function () {
+            this.value = this._today.date;
+            this.goToday();
+        };
+        AXCalendarComponent.prototype.next = function () {
+            this._navNextPrev(false);
+        };
+        AXCalendarComponent.prototype.prev = function () {
+            this._navNextPrev(true);
+        };
+        AXCalendarComponent.prototype._navNextPrev = function (prev) {
+            var 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));
+        };
+        AXCalendarComponent.prototype.goToday = function () {
+            this.navTo(this._today.startOf());
+        };
+        AXCalendarComponent.prototype.navTo = function (date) {
+            this._viewStartDate = i2.AXDateTime.convert(date, this._today.calendar.name());
+            this._genearteSlots();
+        };
+        Object.defineProperty(AXCalendarComponent.prototype, "__hostClass", {
+            get: function () {
+                var _classes = {
+                    'ax-state-disabled': this.disabled
+                };
+                return Object.entries(_classes).filter(function (c) { return c[1]; }).map(function (c) { return c[0]; }).join(' ');
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AXCalendarComponent.prototype.isDisabled = function (date) {
+            if (Array.isArray(this.disabledDates) && this.disabledDates.length != 0) {
+                debugger;
+                return this.disabledDates.some(function (d) { return date.equal(d, 'day'); });
+            }
+            else if (typeof this.disabledDates == 'function') {
+                return this.disabledDates(date.date);
+            }
+            return false;
+        };
+        AXCalendarComponent.prototype.isHoliday = function (date) {
+            if (Array.isArray(this.holidayDates) && this.holidayDates.length != 0) {
+                return this.holidayDates.some(function (d) { return date.equal(d, 'day'); });
+            }
+            else if (typeof this.holidayDates == 'function') {
+                return this.holidayDates(date.date);
+            }
+            return false;
+        };
+        AXCalendarComponent.prototype.isWeekend = function (date) {
+            return date.dayOfWeek == 7 || date.dayOfWeek == 1;
         };
         return AXCalendarComponent;
-    }(AXCalendarMixin));
+    }(AXCalendarComponentMixin));
     AXCalendarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCalendarComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXCalendarComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXCalendarComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCalendarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ax-calendar',
                         templateUrl: './calendar.component.html',
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        inputs: ['disabled', 'tabIndex', 'size', 'cssClass', 'cssStyle'],
+                        inputs: __spreadArray(__spreadArray([], __read(VALUE_INPUTS)), __read(INTERACTIVE_INPUTS)),
+                        outputs: __spreadArray(__spreadArray([], __read(VALUE_OUTPUT)), __read(INTERACTIVE_OUTPUT)),
                         encapsulation: i0.ViewEncapsulation.None,
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { days: [{
-                    type: i0.ViewChild,
-                    args: ['days']
-                }], actionBar: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { activeView: [{
                     type: i0.Input
-                }], showTime: [{
+                }], depthChange: [{
+                    type: i0.Output
+                }], depth: [{
+                    type: i0.Input
+                }], min: [{
+                    type: i0.Input
+                }], max: [{
+                    type: i0.Input
+                }], disabledDates: [{
                     type: i0.Input
+                }], holidayDates: [{
+                    type: i0.Input
+                }], __hostClass: [{
+                    type: i0.HostBinding,
+                    args: ['class']
                 }] } });
 
-    var COMPONENT$f = [AXCalendarComponent];
-    var MODULES$f = [i1.CommonModule, AXButtonModule, AXEditorDecoratorModule, AXIconModule];
+    var COMPONENT$h = [AXCalendarComponent];
+    var MODULES$h = [i4.CommonModule, AXButtonModule, AXIconModule, AXEditorDecoratorModule, i2.AXDateTimeModule];
     var AXCalendarModule = /** @class */ (function () {
         function AXCalendarModule() {
         }
         return AXCalendarModule;
     }());
     AXCalendarModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCalendarModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXCalendarModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCalendarModule, declarations: [AXCalendarComponent], imports: [i1.CommonModule, AXButtonModule, AXEditorDecoratorModule, AXIconModule], exports: [AXCalendarComponent] });
-    AXCalendarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCalendarModule, providers: [], imports: [__spreadArray([], __read(MODULES$f))] });
+    AXCalendarModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCalendarModule, declarations: [AXCalendarComponent], imports: [i4.CommonModule, AXButtonModule, AXIconModule, AXEditorDecoratorModule, i2.AXDateTimeModule], exports: [AXCalendarComponent] });
+    AXCalendarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCalendarModule, providers: [], imports: [__spreadArray([], __read(MODULES$h))] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCalendarModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: __spreadArray([], __read(COMPONENT$f)),
-                        imports: __spreadArray([], __read(MODULES$f)),
-                        exports: __spreadArray([], __read(COMPONENT$f)),
+                        declarations: __spreadArray([], __read(COMPONENT$h)),
+                        imports: __spreadArray([], __read(MODULES$h)),
+                        exports: __spreadArray([], __read(COMPONENT$h)),
                         providers: [],
                     }]
             }] });
@@ -3077,7 +3236,7 @@
         return AXCarouselPagerComponent;
     }(AXBaseComponentMixin));
     AXCarouselPagerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCarouselPagerComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: AXCarouselComponent }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXCarouselPagerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXCarouselPagerComponent, selector: "ax-carousel-pager", host: { classAttribute: "ax-carousel-pager" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <button  *ngFor=\"let d of _dots;let i=index\" [class.ax-state-active]=\"i==_pageIndex\" (click)=\"_handleClick($event,i)\">\n        </button>\n    ", isInline: true, directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXCarouselPagerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXCarouselPagerComponent, selector: "ax-carousel-pager", host: { classAttribute: "ax-carousel-pager" }, usesInheritance: true, ngImport: i0__namespace, template: "\n        <button  *ngFor=\"let d of _dots;let i=index\" [class.ax-state-active]=\"i==_pageIndex\" (click)=\"_handleClick($event,i)\">\n        </button>\n    ", isInline: true, directives: [{ type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCarouselPagerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3089,22 +3248,22 @@
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: AXCarouselComponent }]; } });
 
-    var COMPONENT$e = [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent];
-    var MODULES$e = [i1.CommonModule];
+    var COMPONENT$g = [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent];
+    var MODULES$g = [i4.CommonModule];
     var AXCarouselModule = /** @class */ (function () {
         function AXCarouselModule() {
         }
         return AXCarouselModule;
     }());
     AXCarouselModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCarouselModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXCarouselModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCarouselModule, declarations: [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent], imports: [i1.CommonModule], exports: [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent] });
-    AXCarouselModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCarouselModule, providers: [], imports: [__spreadArray([], __read(MODULES$e))] });
+    AXCarouselModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCarouselModule, declarations: [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent], imports: [i4.CommonModule], exports: [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent] });
+    AXCarouselModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCarouselModule, providers: [], imports: [__spreadArray([], __read(MODULES$g))] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCarouselModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: __spreadArray([], __read(COMPONENT$e)),
-                        imports: __spreadArray([], __read(MODULES$e)),
-                        exports: __spreadArray([], __read(COMPONENT$e)),
+                        declarations: __spreadArray([], __read(COMPONENT$g)),
+                        imports: __spreadArray([], __read(MODULES$g)),
+                        exports: __spreadArray([], __read(COMPONENT$g)),
                         providers: [],
                     }]
             }] });
@@ -3133,7 +3292,7 @@
         return AXCheckBoxComponent;
     }(AXBaseValueComponentMixin));
     AXCheckBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCheckBoxComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXCheckBoxComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXCheckBoxComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCheckBoxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3154,13 +3313,13 @@
         return AXCheckBoxModule;
     }());
     AXCheckBoxModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCheckBoxModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXCheckBoxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCheckBoxModule, declarations: [AXCheckBoxComponent], imports: [i1.CommonModule, i3.FormsModule], exports: [AXCheckBoxComponent] });
-    AXCheckBoxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCheckBoxModule, providers: [], imports: [[i1.CommonModule, i3.FormsModule]] });
+    AXCheckBoxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCheckBoxModule, declarations: [AXCheckBoxComponent], imports: [i4.CommonModule, i3.FormsModule], exports: [AXCheckBoxComponent] });
+    AXCheckBoxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCheckBoxModule, providers: [], imports: [[i4.CommonModule, i3.FormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCheckBoxModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [AXCheckBoxComponent],
-                        imports: [i1.CommonModule, i3.FormsModule],
+                        imports: [i4.CommonModule, i3.FormsModule],
                         exports: [AXCheckBoxComponent],
                         providers: [],
                     }]
@@ -3226,7 +3385,7 @@
         return AXDataListComponent;
     }(AXBaseSelectionValueMixin));
     AXDataListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDataListComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXDataListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXDataListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDataListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3240,181 +3399,413 @@
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { _container: [{
                     type: i0.ViewChild,
-                    args: ['container']
-                }], _contentItemTemplate: [{
-                    type: i0.ContentChild,
-                    args: ['itemTemplate', { static: true }]
-                }], itemTemplate: [{
+                    args: ['container']
+                }], _contentItemTemplate: [{
+                    type: i0.ContentChild,
+                    args: ['itemTemplate', { static: true }]
+                }], itemTemplate: [{
+                    type: i0.Input
+                }], _contentEmptyTemplate: [{
+                    type: i0.ContentChild,
+                    args: ['emptyTemplate', { static: true }]
+                }], emptyTemplate: [{
+                    type: i0.Input
+                }], _contentloadingTemplate: [{
+                    type: i0.ContentChild,
+                    args: ['loadingTemplate', { static: true }]
+                }], loadingTemplate: [{
+                    type: i0.Input
+                }] } });
+
+    var COMPONENT$f = [AXDataListComponent];
+    var MODULES$f = [i4.CommonModule, AXButtonModule];
+    var AXDataListModule = /** @class */ (function () {
+        function AXDataListModule() {
+        }
+        return AXDataListModule;
+    }());
+    AXDataListModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDataListModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    AXDataListModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDataListModule, declarations: [AXDataListComponent], imports: [i4.CommonModule, AXButtonModule], exports: [AXDataListComponent] });
+    AXDataListModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDataListModule, providers: [], imports: [__spreadArray([], __read(MODULES$f))] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDataListModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: __spreadArray([], __read(COMPONENT$f)),
+                        imports: __spreadArray([], __read(MODULES$f)),
+                        exports: __spreadArray([], __read(COMPONENT$f)),
+                        providers: [],
+                    }]
+            }] });
+
+    var AXPopoverComponent = /** @class */ (function (_super) {
+        __extends(AXPopoverComponent, _super);
+        function AXPopoverComponent(_elementRef, _cdr, _zone, _overlay, _platform, _viewContainerRef) {
+            var _this = _super.call(this, _elementRef, _cdr) || this;
+            _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 i0.EventEmitter();
+            _this.onClosed = new i0.EventEmitter();
+            return _this;
+        }
+        Object.defineProperty(AXPopoverComponent.prototype, "target", {
+            get: function () {
+                return this._target;
+            },
+            set: function (v) {
+                if (v instanceof HTMLElement)
+                    this._target = v;
+                else if (v instanceof i0.ElementRef)
+                    this._target = v.nativeElement;
+                else if (v instanceof AXBaseComponent)
+                    this._target = v._getInnerElement();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AXPopoverComponent.prototype._emitOnOpenedEvent = function () {
+            this.onOpened.emit({
+                component: this,
+                htmlElement: this._getHostElement()
+            });
+        };
+        AXPopoverComponent.prototype._emitOnClosedEvent = function () {
+            this.onClosed.emit({
+                component: this,
+                htmlElement: this._getHostElement()
+            });
+        };
+        //
+        AXPopoverComponent.prototype.onViewInit = function () {
+            var _this = this;
+            if (this._target) {
+                if (this.openTrigger === 'mouseover') {
+                    var mouseEnter$ = rxjs.fromEvent(this._target, 'mouseover');
+                    this._addSub(mouseEnter$.subscribe(function (e) {
+                        var point = { x: e.clientX, y: e.clientY };
+                        if (i2.AXDrawingUtil.isInElementBound(point, _this._target))
+                            _this.open();
+                    }));
+                }
+                if (this.closeTrigger === 'mouseout') {
+                    var mouseMove$ = rxjs.fromEvent(document, 'mousemove');
+                    this._addSub(mouseMove$.pipe(operators.throttleTime(50)).subscribe(function (e) {
+                        _this._mousePos.x = e.clientX;
+                        _this._mousePos.y = e.clientY;
+                        if (_this.isOpen) {
+                            setTimeout(function () {
+                                if (!___default['default'].some([_this._target, _this._overlayRef.overlayElement], function (el) { return ___default['default'].includes(document.elementsFromPoint(_this._mousePos.x, _this._mousePos.y), el); }))
+                                    _this.close();
+                            }, 100);
+                        }
+                    }));
+                }
+                //
+                if (this.openTrigger === 'click' || this.openTrigger === 'toggle') {
+                    var click$ = rxjs.fromEvent(this._target, 'click');
+                    this._addSub(click$.subscribe(function (e) {
+                        _this.openTrigger == 'toggle' ? _this.toggle() : _this.open();
+                    }));
+                }
+            }
+        };
+        //
+        AXPopoverComponent.prototype.onDestroy = function () {
+            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(function (s) {
+                s === null || s === void 0 ? void 0 : s.unsubscribe();
+            });
+        };
+        AXPopoverComponent.prototype._handleKeydownHandler = function (e) {
+            if (e.key === 'Enter' && e.type === 'keydown') {
+                this.toggle();
+            }
+            if (e.key === 'Escape') {
+                if (this.isOpen) {
+                    this.close();
+                    e.stopPropagation();
+                }
+            }
+        };
+        //
+        AXPopoverComponent.prototype.toggle = function () {
+            this.isOpen ? this.close() : this.open();
+        };
+        //
+        AXPopoverComponent.prototype.close = function () {
+            var _a;
+            if (!this.isOpen) {
+                return;
+            }
+            (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
+            this._emitOnClosedEvent();
+        };
+        //
+        AXPopoverComponent.prototype.open = function () {
+            if (this.isOpen) {
+                return;
+            }
+            this._ensureOverlayCreated();
+            this._overlayRef.attach(this._templatePortal);
+            this._emitOnOpenedEvent();
+        };
+        AXPopoverComponent.prototype._ensureOverlayCreated = function () {
+            var _this = this;
+            var targetRef = this._target;
+            if (!targetRef)
+                return;
+            if (!this._overlayRef) {
+                var positionStrategy = this._overlay.position()
+                    .flexibleConnectedTo(targetRef)
+                    .withPositions(Array.isArray(this.position) ? this.position : [this.position])
+                    .withPush(false);
+                this._overlayRef = this._overlay.create({
+                    positionStrategy: positionStrategy,
+                    scrollStrategy: this._overlay.scrollStrategies.close(),
+                    panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
+                    hasBackdrop: this.hasBackdrop,
+                    backdropClass: [this.backdropClass || 'cdk-overlay-transparent-backdrop']
+                });
+                if (this.closeTrigger == 'clickout') {
+                    this._addSub(this._overlayRef._outsidePointerEvents.subscribe(function (c) {
+                        var target = c.target;
+                        var comElem = targetRef;
+                        if (!(comElem.contains(target))) {
+                            _this.close();
+                        }
+                    }));
+                }
+                this._addSub(this._overlayRef.attachments().subscribe(function () {
+                    if (!_this._isScrollAttached) {
+                        _this._addSub(_this._platform.scroll.subscribe(function (c) {
+                            // if (!(c.nativeEvent.target as HTMLElement).closest('.ax-overlay-pane'))
+                            _this.close();
+                        }));
+                        _this._isScrollAttached = true;
+                    }
+                }));
+            }
+            if (!this._templatePortal) {
+                this._templatePortal = new i1.TemplatePortal(this._baseTemplate, this._viewContainerRef);
+            }
+        };
+        Object.defineProperty(AXPopoverComponent.prototype, "isOpen", {
+            get: function () {
+                return this._overlayRef ? this._overlayRef.hasAttached() : false;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AXPopoverComponent.prototype._addSub = function (sub) {
+            this._subs.push(sub);
+        };
+        return AXPopoverComponent;
+    }(AXBaseComponent));
+    AXPopoverComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPopoverComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: i1__namespace.Overlay }, { token: i2__namespace.AXPlatform }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AXPopoverComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<ng-template #baseTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>", changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPopoverComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ax-popover',
+                        templateUrl: './popover.component.html',
+                        encapsulation: i0.ViewEncapsulation.None,
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }, { type: i1__namespace.Overlay }, { type: i2__namespace.AXPlatform }, { type: i0__namespace.ViewContainerRef }]; }, propDecorators: { target: [{
+                    type: i0.Input
+                }], position: [{
+                    type: i0.Input
+                }], _baseTemplate: [{
+                    type: i0.ViewChild,
+                    args: ['baseTemplate']
+                }], openTrigger: [{
                     type: i0.Input
-                }], _contentEmptyTemplate: [{
-                    type: i0.ContentChild,
-                    args: ['emptyTemplate', { static: true }]
-                }], emptyTemplate: [{
+                }], closeTrigger: [{
                     type: i0.Input
-                }], _contentloadingTemplate: [{
-                    type: i0.ContentChild,
-                    args: ['loadingTemplate', { static: true }]
-                }], loadingTemplate: [{
+                }], hasBackdrop: [{
+                    type: i0.Input
+                }], backdropClass: [{
                     type: i0.Input
+                }], _handleKeydownHandler: [{
+                    type: i0.HostListener,
+                    args: ['document:keydown', ['$event']]
                 }] } });
 
-    var COMPONENT$d = [AXDataListComponent];
-    var MODULES$d = [i1.CommonModule, AXButtonModule];
-    var AXDataListModule = /** @class */ (function () {
-        function AXDataListModule() {
+    var AXPopoverModule = /** @class */ (function () {
+        function AXPopoverModule() {
         }
-        return AXDataListModule;
+        return AXPopoverModule;
     }());
-    AXDataListModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDataListModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXDataListModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDataListModule, declarations: [AXDataListComponent], imports: [i1.CommonModule, AXButtonModule], exports: [AXDataListComponent] });
-    AXDataListModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDataListModule, providers: [], imports: [__spreadArray([], __read(MODULES$d))] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDataListModule, decorators: [{
+    AXPopoverModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPopoverModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    AXPopoverModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPopoverModule, declarations: [AXPopoverComponent], imports: [i4.CommonModule], exports: [AXPopoverComponent] });
+    AXPopoverModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPopoverModule, providers: [], imports: [[i4.CommonModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPopoverModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: __spreadArray([], __read(COMPONENT$d)),
-                        imports: __spreadArray([], __read(MODULES$d)),
-                        exports: __spreadArray([], __read(COMPONENT$d)),
-                        providers: [],
+                        declarations: [AXPopoverComponent],
+                        imports: [i4.CommonModule],
+                        exports: [AXPopoverComponent],
+                        providers: []
                     }]
             }] });
 
-    var AXDropdownComponent = /** @class */ (function (_super) {
-        __extends(AXDropdownComponent, _super);
-        function AXDropdownComponent(_elementRef, _cdr, _overlay, _platform, _viewContainerRef) {
-            var _this = _super.call(this, _elementRef, _cdr) || this;
-            _this._overlay = _overlay;
-            _this._platform = _platform;
-            _this._viewContainerRef = _viewContainerRef;
-            _this._subs = [];
+    var AXBaseDropdownMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(AXBaseComponent));
+    var AXBaseDropDownComponent = /** @class */ (function (_super) {
+        __extends(AXBaseDropDownComponent, _super);
+        function AXBaseDropDownComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.fitParent = true;
+            _this.onOpened = new i0.EventEmitter();
+            _this.onClosed = new i0.EventEmitter();
+            _this.position = [];
             return _this;
         }
-        AXDropdownComponent.prototype.onViewInit = function () {
+        AXBaseDropDownComponent.prototype._emitOnOpenedEvent = function () {
+            //** call from interactive mixin **//
+            //(this as any).focus();
+            //
+            this.onOpened.emit({
+                component: this,
+                htmlElement: this._getHostElement()
+            });
         };
-        AXDropdownComponent.prototype.ngOnDestroy = function () {
-            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(function (s) {
-                s === null || s === void 0 ? void 0 : s.unsubscribe();
+        AXBaseDropDownComponent.prototype._emitOnClosedEvent = function () {
+            this.onClosed.emit({
+                component: this,
+                htmlElement: this._getHostElement()
             });
         };
-        AXDropdownComponent.prototype._handleKeydownHandler = function (e) {
-            if (e.key === 'Enter' && e.type === 'keydown') {
-                this.toggle();
-            }
-            if (e.key === 'Escape') {
-                if (this.isOpen) {
-                    this.close();
-                    e.stopPropagation();
+        AXBaseDropDownComponent.prototype.onViewInit = function () {
+            var _this = this;
+            if (this.dropdownWidth == null) {
+                if (this.fitParent === true) {
+                    this.dropdownWidth = this._getInnerElement().offsetWidth;
                 }
             }
+            // wait for documentElement
+            setTimeout(function () {
+                var _a;
+                if (_this.position.length == 0) {
+                    var offset = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', ''));
+                    var list = [
+                        {
+                            originX: 'start',
+                            originY: 'bottom',
+                            overlayX: 'start',
+                            overlayY: 'top',
+                            offsetY: offset
+                        },
+                        {
+                            originX: 'start',
+                            originY: 'top',
+                            overlayX: 'start',
+                            overlayY: 'bottom',
+                            offsetY: -offset
+                        }
+                    ];
+                    (_a = _this.position).push.apply(_a, __spreadArray([], __read(list)));
+                }
+            }, 500);
         };
-        AXDropdownComponent.prototype._handleArrowClickEvent = function () {
-            this.toggle();
-        };
-        AXDropdownComponent.prototype.toggle = function () {
-            if (this.disabled !== true && this.readonly !== true) {
-                this.isOpen ? this.close() : this.open();
+        AXBaseDropDownComponent.prototype.toggle = function () {
+            if (this.disabled !== true) {
+                this.popover.toggle();
             }
         };
-        AXDropdownComponent.prototype.close = function () {
-            var _a, _b;
-            if (!this.isOpen) {
+        AXBaseDropDownComponent.prototype.close = function () {
+            if (!this.isOpen || this.disabled) {
                 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.popover.close();
             this._emitOnClosedEvent();
         };
-        AXDropdownComponent.prototype.open = function () {
-            if (this.isOpen) {
+        AXBaseDropDownComponent.prototype.open = function () {
+            if (this.isOpen || this.disabled) {
                 return;
             }
-            this._ensureOverlayCreated();
-            this._overlayRef.attach(this._templatePortal);
+            this.popover.open();
             this._emitOnOpenedEvent();
         };
-        AXDropdownComponent.prototype._ensureOverlayCreated = function () {
-            var _this = this;
-            var baseSize = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', '')) / 2;
-            if (!this._overlayRef) {
-                var 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: 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(function (c) {
-                    var target = c.target;
-                    var comElem = _this._getHostElement();
-                    if (!(comElem.contains(target))) {
-                        _this.close();
-                    }
-                });
-                this._subs[1] = this._overlayRef.attachments().subscribe(function () {
-                    if (_this.fitParent === true) {
-                        _this._dropdownWidth = _this._getInnerElement().offsetWidth;
-                    }
-                    else {
-                        _this._dropdownWidth = null;
-                    }
-                    _this._subs[2] = _this._platform.scroll.subscribe(function (c) {
-                        if (!c.nativeEvent.target.closest('.ax-overlay-pane'))
-                            _this.close();
-                    });
-                });
-            }
-            if (!this._templatePortal) {
-                this._templatePortal = new i1$1.TemplatePortal(this._baseTemplate, this._viewContainerRef);
-            }
-        };
-        Object.defineProperty(AXDropdownComponent.prototype, "isOpen", {
+        Object.defineProperty(AXBaseDropDownComponent.prototype, "isOpen", {
             get: function () {
-                return this._overlayRef ? this._overlayRef.hasAttached() : false;
+                return this.popover.isOpen;
             },
             enumerable: false,
             configurable: true
         });
-        return AXDropdownComponent;
+        return AXBaseDropDownComponent;
     }(AXBaseDropdownMixin));
-    AXDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDropdownComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$1.Overlay }, { token: i2__namespace.AXPlatform }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXDropdownComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXBaseDropDownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXBaseDropDownComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    AXBaseDropDownComponent.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXBaseDropDownComponent });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXBaseDropDownComponent, decorators: [{
+                type: i0.Injectable
+            }], propDecorators: { fitParent: [{
+                    type: i0.Input
+                }], dropdownWidth: [{
+                    type: i0.Input
+                }], onOpened: [{
+                    type: i0.Output
+                }], onClosed: [{
+                    type: i0.Output
+                }], position: [{
+                    type: i0.Input
+                }] } });
+
+    var AXDropdownComponent = /** @class */ (function (_super) {
+        __extends(AXDropdownComponent, _super);
+        function AXDropdownComponent(_elementRef, _cdr) {
+            var _this = _super.call(this, _elementRef, _cdr) || this;
+            _this._target = _this;
+            return _this;
+        }
+        AXDropdownComponent.prototype._handleArrowClickEvent = function () {
+            this.toggle();
+        };
+        return AXDropdownComponent;
+    }(AXBaseDropDownComponent));
+    AXDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDropdownComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AXDropdownComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDropdownComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ax-drop-down',
                         templateUrl: 'dropdown.component.html',
-                        inputs: ['disabled', 'readonly', 'tabIndex', 'size', 'fitParent'],
-                        outputs: ['onOpened', 'onClosed'],
+                        inputs: ['disabled', 'tabIndex', 'size', 'fitParent'],
                         encapsulation: i0.ViewEncapsulation.None,
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        host: { class: 'ax-dropdown' }
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$1.Overlay }, { type: i2__namespace.AXPlatform }, { type: i0__namespace.ViewContainerRef }]; }, propDecorators: { _baseTemplate: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { popover: [{
                     type: i0.ViewChild,
-                    args: ['baseTemplate']
-                }], _handleKeydownHandler: [{
-                    type: i0.HostListener,
-                    args: ['keydown', ['$event']]
+                    args: [AXPopoverComponent]
                 }] } });
 
     var AXDatepickerComponent = /** @class */ (function (_super) {
@@ -3466,34 +3857,41 @@
             }
         };
         return AXDatepickerComponent;
-    }(AXBaseComponentMixin));
+    }(AXBaseTextBoxMixin));
     AXDatepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDatepickerComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXDatepickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDatepickerComponent, selector: "ax-datepicker", usesInheritance: true, ngImport: i0__namespace, 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__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXDatepickerComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDatepickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'ax-datepicker',
+                        selector: 'ax-date-picker',
                         templateUrl: './datepicker.component.html',
+                        inputs: __spreadArray([
+                            'disabled',
+                            'readonly',
+                            'tabIndex',
+                            'cssClass',
+                            'size'
+                        ], __read(TEXTBOX_INPUTS)),
+                        outputs: __spreadArray([
+                            'valueChange',
+                            'onValueChanged',
+                            'onBlur',
+                            'onFocus'
+                        ], __read(TEXTBOX_OUTPUT)),
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         encapsulation: i0.ViewEncapsulation.None,
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
-    var AXBaseDropdownMenuMixin = _InteractiveComponenetMixin(_DropdownComponenetMixin((AXBaseComponent)));
     var AXDropdownPanelComponent = /** @class */ (function (_super) {
         __extends(AXDropdownPanelComponent, _super);
-        function AXDropdownPanelComponent(elementRef, cdr, _overlay, _platform, _viewContainerRef, _parent) {
+        function AXDropdownPanelComponent(elementRef, cdr, _parent) {
             var _this = _super.call(this, elementRef, cdr) || this;
-            _this._overlay = _overlay;
-            _this._platform = _platform;
-            _this._viewContainerRef = _viewContainerRef;
             _this._parent = _parent;
             _this.onItemClick = new i0.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();
             return _this;
         }
         Object.defineProperty(AXDropdownPanelComponent.prototype, "items", {
@@ -3512,32 +3910,18 @@
         };
         AXDropdownPanelComponent.prototype.onViewInit = function () {
             var _this = this;
+            _super.prototype.onViewInit.call(this);
             this._getAllButtons().forEach(function (c) {
+                _this._needBorder = true;
                 _this._subs.push(c.onClick.subscribe(_this._handleOnItemClick.bind(_this)));
+                _this._cdr.markForCheck();
             });
         };
         AXDropdownPanelComponent.prototype.onDestroy = function () {
-            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(function (s) {
                 s === null || s === void 0 ? void 0 : s.unsubscribe();
             });
         };
-        AXDropdownPanelComponent.prototype._handleKeydownHandler = function (e) {
-            if (e.key === 'Enter' && e.type === 'keydown') {
-                this.toggle();
-            }
-            if (e.key === 'Escape') {
-                if (this.isOpen) {
-                    this.close();
-                    e.stopPropagation();
-                }
-            }
-        };
-        AXDropdownPanelComponent.prototype._handleArrowClickEvent = function (e) {
-            this.toggle();
-        };
         AXDropdownPanelComponent.prototype._emitOnItemClickEvent = function (e, item) {
             this.onItemClick.emit({
                 component: this,
@@ -3546,99 +3930,15 @@
                 name: item.name,
                 data: item.data,
             });
-            this.close();
         };
         AXDropdownPanelComponent.prototype._handleOnItemClick = function (e) {
             this.close();
             this._emitOnItemClickEvent(e, e.component);
         };
-        AXDropdownPanelComponent.prototype.toggle = function () {
-            if (this.disabled !== true) {
-                this.isOpen ? this.close() : this.open();
-            }
-        };
-        AXDropdownPanelComponent.prototype.close = function () {
-            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();
-        };
-        AXDropdownPanelComponent.prototype.open = function () {
-            if (this.isOpen) {
-                return;
-            }
-            this._ensureOverlayCreated();
-            this._overlayRef.attach(this._templatePortal);
-            this._emitOnOpenedEvent();
-        };
-        AXDropdownPanelComponent.prototype._ensureOverlayCreated = function () {
-            var _this = this;
-            var baseSize = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', ''));
-            var targetRef = this.target._getInnerElement();
-            if (!this._overlayRef) {
-                var 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: 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(function (c) {
-                    var target = c.target;
-                    var comElem = targetRef;
-                    if (!(comElem.contains(target))) {
-                        _this.close();
-                    }
-                });
-                this._subs[1] = this._overlayRef.attachments().subscribe(function () {
-                    if (_this.fitParent === true) {
-                        _this._dropdownWidth = targetRef.offsetWidth;
-                    }
-                    else {
-                        _this._dropdownWidth = targetRef.offsetWidth * 1.5;
-                    }
-                    _this._subs[2] = _this._platform.scroll.subscribe(function (c) {
-                        if (!c.nativeEvent.target.closest('.ax-overlay-pane'))
-                            _this.close();
-                    });
-                });
-            }
-            if (!this._templatePortal) {
-                this._templatePortal = new i1$1.TemplatePortal(this._baseTemplate, this._viewContainerRef);
-            }
-        };
-        Object.defineProperty(AXDropdownPanelComponent.prototype, "isOpen", {
-            get: function () {
-                return this._overlayRef ? this._overlayRef.hasAttached() : false;
-            },
-            enumerable: false,
-            configurable: true
-        });
         return AXDropdownPanelComponent;
-    }(AXBaseDropdownMenuMixin));
-    AXDropdownPanelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDropdownPanelComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$1.Overlay }, { token: i2__namespace.AXPlatform }, { token: i0__namespace.ViewContainerRef }, { token: AXButtonComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXDropdownPanelComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    }(AXBaseDropDownComponent));
+    AXDropdownPanelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDropdownPanelComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: AXButtonComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AXDropdownPanelComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDropdownPanelComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3648,7 +3948,7 @@
                         encapsulation: i0.ViewEncapsulation.None,
                     }]
             }], ctorParameters: function () {
-            return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$1.Overlay }, { type: i2__namespace.AXPlatform }, { type: i0__namespace.ViewContainerRef }, { type: AXButtonComponent, decorators: [{
+            return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: AXButtonComponent, decorators: [{
                             type: i0.Optional
                         }] }];
         }, propDecorators: { _contentButtons: [{
@@ -3659,16 +3959,11 @@
                     args: [AXButtonItemComponent]
                 }], onItemClick: [{
                     type: i0.Output
-                }], target: [{
-                    type: i0.Input
+                }], popover: [{
+                    type: i0.ViewChild,
+                    args: [AXPopoverComponent]
                 }], items: [{
                     type: i0.Input
-                }], _baseTemplate: [{
-                    type: i0.ViewChild,
-                    args: ['baseTemplate']
-                }], _handleKeydownHandler: [{
-                    type: i0.HostListener,
-                    args: ['keydown', ['$event']]
                 }] } });
 
     var AXDropdownModule = /** @class */ (function () {
@@ -3677,34 +3972,34 @@
         return AXDropdownModule;
     }());
     AXDropdownModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDropdownModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXDropdownModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDropdownModule, declarations: [AXDropdownComponent, AXDropdownPanelComponent], imports: [i1.CommonModule, AXButtonModule, i1$2.OverlayModule, AXIconModule, AXEditorDecoratorModule], exports: [AXDropdownComponent, AXDropdownPanelComponent] });
-    AXDropdownModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDropdownModule, providers: [], imports: [[i1.CommonModule, AXButtonModule, i1$2.OverlayModule, AXIconModule, AXEditorDecoratorModule]] });
+    AXDropdownModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDropdownModule, declarations: [AXDropdownComponent, AXDropdownPanelComponent], imports: [i4.CommonModule, AXButtonModule, i1$1.OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule], exports: [AXDropdownComponent, AXDropdownPanelComponent] });
+    AXDropdownModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDropdownModule, providers: [], imports: [[i4.CommonModule, AXButtonModule, i1$1.OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDropdownModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i1.CommonModule, AXButtonModule, i1$2.OverlayModule, AXIconModule, AXEditorDecoratorModule],
+                        imports: [i4.CommonModule, AXButtonModule, i1$1.OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule],
                         exports: [AXDropdownComponent, AXDropdownPanelComponent],
                         declarations: [AXDropdownComponent, AXDropdownPanelComponent],
                         providers: [],
                     }]
             }] });
 
-    var COMPONENT$c = [AXDatepickerComponent];
-    var MODULES$c = [i1.CommonModule, AXCalendarModule, AXDropdownModule];
+    var COMPONENT$e = [AXDatepickerComponent];
+    var MODULES$e = [i4.CommonModule, AXCalendarModule, AXDropdownModule];
     var AXDatepickerModule = /** @class */ (function () {
         function AXDatepickerModule() {
         }
         return AXDatepickerModule;
     }());
     AXDatepickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDatepickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXDatepickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDatepickerModule, declarations: [AXDatepickerComponent], imports: [i1.CommonModule, AXCalendarModule, AXDropdownModule], exports: [AXDatepickerComponent] });
-    AXDatepickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDatepickerModule, providers: [], imports: [__spreadArray([], __read(MODULES$c))] });
+    AXDatepickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDatepickerModule, declarations: [AXDatepickerComponent], imports: [i4.CommonModule, AXCalendarModule, AXDropdownModule], exports: [AXDatepickerComponent] });
+    AXDatepickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDatepickerModule, providers: [], imports: [__spreadArray([], __read(MODULES$e))] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDatepickerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: __spreadArray([], __read(COMPONENT$c)),
-                        imports: __spreadArray([], __read(MODULES$c)),
-                        exports: __spreadArray([], __read(COMPONENT$c)),
+                        declarations: __spreadArray([], __read(COMPONENT$e)),
+                        imports: __spreadArray([], __read(MODULES$e)),
+                        exports: __spreadArray([], __read(COMPONENT$e)),
                         providers: [],
                     }]
             }] });
@@ -3738,7 +4033,7 @@
         return AXDialogComponent;
     }(AXBaseComponentMixin));
     AXDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDialogComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDialogComponent, selector: "ax-dialog", usesInheritance: true, ngImport: i0__namespace, 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__namespace$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3__namespace$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__namespace$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDialogComponent, selector: "ax-dialog", usesInheritance: true, ngImport: i0__namespace, 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__namespace$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3__namespace$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__namespace$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDialogComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3749,11 +4044,23 @@
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
+    /**
+     * The Button is a component which detects user interaction and triggers a corresponding event
+     *
+     * @category Components
+     */
     var AXDialogService = /** @class */ (function () {
-        function AXDialogService(overlayService, parentInjector) {
+        /**
+        * @ignore
+        */
+        function AXDialogService(overlayService, parentInjector, sso) {
             this.overlayService = overlayService;
             this.parentInjector = parentInjector;
+            this.sso = sso;
         }
+        /**
+        *  Show an alert box with 'Okay' button.
+        */
         AXDialogService.prototype.alert = function (title, content, type) {
             var _this = this;
             if (type === void 0) { type = 'primary'; }
@@ -3779,6 +4086,9 @@
                 });
             });
         };
+        /**
+        *  Show a confirm box with 'Okay' & 'Cancel' buttons.
+        */
         AXDialogService.prototype.confirm = function (title, content, type) {
             var _this = this;
             if (type === void 0) { type = 'primary'; }
@@ -3818,6 +4128,9 @@
                 });
             });
         };
+        /**
+        *  Show a custom dialog box.
+        */
         AXDialogService.prototype.show = function (options) {
             var _this = this;
             return new Promise(function (resolve) {
@@ -3846,9 +4159,10 @@
             var overlayRef = this.overlayService.create({
                 positionStrategy: positionStrategy,
                 hasBackdrop: true,
-                panelClass: ['animate__animated', 'animate__fadeIn', 'animate__faster'],
+                scrollStrategy: this.sso.block(),
+                panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
             });
-            var dialogPortal = new i1$1.ComponentPortal(AXDialogComponent, null, this.parentInjector);
+            var dialogPortal = new i1.ComponentPortal(AXDialogComponent, null, this.parentInjector);
             var host = overlayRef.attach(dialogPortal);
             if (host.instance) {
                 Object.assign(host.instance, {
@@ -3869,12 +4183,12 @@
         };
         return AXDialogService;
     }());
-    AXDialogService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDialogService, deps: [{ token: i1__namespace$1.Overlay }, { token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    AXDialogService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDialogService, deps: [{ token: i1__namespace.Overlay }, { token: i0__namespace.Injector }, { token: i1__namespace.ScrollStrategyOptions }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     AXDialogService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDialogService, providedIn: 'root' });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDialogService, decorators: [{
                 type: i0.Injectable,
                 args: [{ providedIn: 'root' }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$1.Overlay }, { type: i0__namespace.Injector }]; } });
+            }], ctorParameters: function () { return [{ type: i1__namespace.Overlay }, { type: i0__namespace.Injector }, { type: i1__namespace.ScrollStrategyOptions }]; } });
 
     var AXLoadingComponent = /** @class */ (function (_super) {
         __extends(AXLoadingComponent, _super);
@@ -3903,13 +4217,13 @@
         });
         AXLoadingComponent.prototype.onInit = function () {
             var loading = i2.AXConfig.get("layout.loading." + this.type);
-            this._selectedPortal = new i1$1.ComponentPortal(loading);
+            this._selectedPortal = new i1.ComponentPortal(loading);
             this._cdr.markForCheck();
         };
         return AXLoadingComponent;
     }(AXBaseComponentMixin));
     AXLoadingComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXLoadingComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXLoadingComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "\n        <ng-template [cdkPortalOutlet]=\"_selectedPortal\" ></ng-template>\n    ", isInline: true, directives: [{ type: i1__namespace$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXLoadingComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "\n        <ng-template [cdkPortalOutlet]=\"_selectedPortal\" ></ng-template>\n    ", isInline: true, directives: [{ type: i1__namespace$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXLoadingComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4007,8 +4321,8 @@
                     args: ['axIsLoading']
                 }] } });
 
-    var COMPONENT$b = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
-    var MODULES$b = [i1.CommonModule, i1$2.OverlayModule, i1$1.PortalModule];
+    var COMPONENT$d = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
+    var MODULES$d = [i4.CommonModule, i1$1.OverlayModule, i1.PortalModule];
     var AXLoadingModule = /** @class */ (function () {
         function AXLoadingModule() {
             i2.AXConfig.set({
@@ -4022,14 +4336,14 @@
         return AXLoadingModule;
     }());
     AXLoadingModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXLoadingModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXLoadingModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXLoadingModule, declarations: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent], imports: [i1.CommonModule, i1$2.OverlayModule, i1$1.PortalModule], exports: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent] });
-    AXLoadingModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXLoadingModule, providers: [], imports: [__spreadArray([], __read(MODULES$b))] });
+    AXLoadingModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXLoadingModule, declarations: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent], imports: [i4.CommonModule, i1$1.OverlayModule, i1.PortalModule], exports: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent] });
+    AXLoadingModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXLoadingModule, providers: [], imports: [__spreadArray([], __read(MODULES$d))] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXLoadingModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        declarations: __spreadArray([], __read(COMPONENT$b)),
-                        imports: __spreadArray([], __read(MODULES$b)),
-                        exports: __spreadArray([], __read(COMPONENT$b)),
+                type: i0.NgModule,
+                args: [{
+                        declarations: __spreadArray([], __read(COMPONENT$d)),
+                        imports: __spreadArray([], __read(MODULES$d)),
+                        exports: __spreadArray([], __read(COMPONENT$d)),
                         providers: [],
                     }]
             }], ctorParameters: function () { return []; } });
@@ -4043,7 +4357,7 @@
             this._containerElement = containerElement;
         };
         return DynamicOverlayContainer;
-    }(i1$2.OverlayContainer));
+    }(i1$1.OverlayContainer));
     DynamicOverlayContainer.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: DynamicOverlayContainer, deps: null, target: i0__namespace.ɵɵFactoryTarget.Injectable });
     DynamicOverlayContainer.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: DynamicOverlayContainer, providedIn: 'root' });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: DynamicOverlayContainer, decorators: [{
@@ -4069,8 +4383,8 @@
             return _super.prototype.create.call(this, config);
         };
         return DynamicOverlay;
-    }(i1$2.Overlay));
-    DynamicOverlay.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: DynamicOverlay, deps: [{ token: i1__namespace$1.ScrollStrategyOptions }, { token: DynamicOverlayContainer }, { token: i0__namespace.ComponentFactoryResolver }, { token: i1__namespace$1.OverlayPositionBuilder }, { token: i1__namespace$1.OverlayKeyboardDispatcher }, { token: i0__namespace.Injector }, { token: i0__namespace.NgZone }, { token: i1.DOCUMENT }, { token: i2__namespace$2.Directionality }, { token: i0__namespace.RendererFactory2 }, { token: i1__namespace.Location }, { token: i1__namespace$1.OverlayOutsideClickDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    }(i1$1.Overlay));
+    DynamicOverlay.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: DynamicOverlay, deps: [{ token: i1__namespace.ScrollStrategyOptions }, { token: DynamicOverlayContainer }, { token: i0__namespace.ComponentFactoryResolver }, { token: i1__namespace.OverlayPositionBuilder }, { token: i1__namespace.OverlayKeyboardDispatcher }, { token: i0__namespace.Injector }, { token: i0__namespace.NgZone }, { token: i4.DOCUMENT }, { token: i2__namespace$2.Directionality }, { token: i0__namespace.RendererFactory2 }, { token: i4__namespace.Location }, { token: i1__namespace.OverlayOutsideClickDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     DynamicOverlay.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: DynamicOverlay, providedIn: 'root' });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: DynamicOverlay, decorators: [{
                 type: i0.Injectable,
@@ -4078,10 +4392,10 @@
                         providedIn: 'root'
                     }]
             }], ctorParameters: function () {
-            return [{ type: i1__namespace$1.ScrollStrategyOptions }, { type: DynamicOverlayContainer }, { type: i0__namespace.ComponentFactoryResolver }, { type: i1__namespace$1.OverlayPositionBuilder }, { type: i1__namespace$1.OverlayKeyboardDispatcher }, { type: i0__namespace.Injector }, { type: i0__namespace.NgZone }, { type: undefined, decorators: [{
+            return [{ type: i1__namespace.ScrollStrategyOptions }, { type: DynamicOverlayContainer }, { type: i0__namespace.ComponentFactoryResolver }, { type: i1__namespace.OverlayPositionBuilder }, { type: i1__namespace.OverlayKeyboardDispatcher }, { type: i0__namespace.Injector }, { type: i0__namespace.NgZone }, { type: undefined, decorators: [{
                             type: i0.Inject,
-                            args: [i1.DOCUMENT]
-                        }] }, { type: i2__namespace$2.Directionality }, { type: i0__namespace.RendererFactory2 }, { type: i1__namespace.Location }, { type: i1__namespace$1.OverlayOutsideClickDispatcher }];
+                            args: [i4.DOCUMENT]
+                        }] }, { type: i2__namespace$2.Directionality }, { type: i0__namespace.RendererFactory2 }, { type: i4__namespace.Location }, { type: i1__namespace.OverlayOutsideClickDispatcher }];
         } });
 
     var AXOverlayService = /** @class */ (function () {
@@ -4105,10 +4419,10 @@
             }
             // create portal from component
             else if (content instanceof i0.TemplateRef) {
-                portal = new i1$1.TemplatePortal(content, viewRef, context);
+                portal = new i1.TemplatePortal(content, viewRef, context);
             }
             else if (typeof content === 'function') {
-                portal = new i1$1.ComponentPortal(content, viewRef);
+                portal = new i1.ComponentPortal(content, viewRef);
             }
             var positionStrategy;
             if (configs.position && configs.targetElement) {
@@ -4163,12 +4477,12 @@
         };
         return AXOverlayService;
     }());
-    AXOverlayService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXOverlayService, deps: [{ token: DynamicOverlay }, { token: i1__namespace$1.Overlay }, { token: i0__namespace.ApplicationRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    AXOverlayService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXOverlayService, deps: [{ token: DynamicOverlay }, { token: i1__namespace.Overlay }, { token: i0__namespace.ApplicationRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     AXOverlayService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXOverlayService, providedIn: 'root' });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXOverlayService, decorators: [{
                 type: i0.Injectable,
                 args: [{ providedIn: 'root' }]
-            }], ctorParameters: function () { return [{ type: DynamicOverlay }, { type: i1__namespace$1.Overlay }, { type: i0__namespace.ApplicationRef }]; } });
+            }], ctorParameters: function () { return [{ type: DynamicOverlay }, { type: i1__namespace.Overlay }, { type: i0__namespace.ApplicationRef }]; } });
 
     var DEFAULT_LOADER_ID = '_DEFAULT';
     /**
@@ -4473,22 +4787,22 @@
                     }]
             }] });
 
-    var COMPONENT$a = [AXDialogComponent];
-    var MODULES$a = [i1.CommonModule, i3$1.DragDropModule, i2$1.A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule];
+    var COMPONENT$c = [AXDialogComponent];
+    var MODULES$c = [i4.CommonModule, i3$1.DragDropModule, i2$1.A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule];
     var AXDialogModule = /** @class */ (function () {
         function AXDialogModule() {
         }
         return AXDialogModule;
     }());
     AXDialogModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDialogModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXDialogModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDialogModule, declarations: [AXDialogComponent], imports: [i1.CommonModule, i3$1.DragDropModule, i2$1.A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule], exports: [AXDialogComponent] });
-    AXDialogModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDialogModule, providers: [], imports: [__spreadArray([], __read(MODULES$a))] });
+    AXDialogModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDialogModule, declarations: [AXDialogComponent], imports: [i4.CommonModule, i3$1.DragDropModule, i2$1.A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule], exports: [AXDialogComponent] });
+    AXDialogModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDialogModule, providers: [], imports: [__spreadArray([], __read(MODULES$c))] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDialogModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: __spreadArray([], __read(COMPONENT$a)),
-                        imports: __spreadArray([], __read(MODULES$a)),
-                        exports: __spreadArray([], __read(COMPONENT$a)),
+                        declarations: __spreadArray([], __read(COMPONENT$c)),
+                        imports: __spreadArray([], __read(MODULES$c)),
+                        exports: __spreadArray([], __read(COMPONENT$c)),
                         providers: [],
                     }]
             }] });
@@ -4718,22 +5032,22 @@
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
-    var COMPONENT$9 = [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent];
-    var MODULES$9 = [i1.CommonModule];
+    var COMPONENT$b = [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent];
+    var MODULES$b = [i4.CommonModule];
     var AXDrawerModule = /** @class */ (function () {
         function AXDrawerModule() {
         }
         return AXDrawerModule;
     }());
     AXDrawerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDrawerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXDrawerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDrawerModule, declarations: [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent], imports: [i1.CommonModule], exports: [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent] });
-    AXDrawerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDrawerModule, providers: [], imports: [__spreadArray([], __read(MODULES$9))] });
+    AXDrawerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDrawerModule, declarations: [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent], imports: [i4.CommonModule], exports: [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent] });
+    AXDrawerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDrawerModule, providers: [], imports: [__spreadArray([], __read(MODULES$b))] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDrawerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: __spreadArray([], __read(COMPONENT$9)),
-                        imports: __spreadArray([], __read(MODULES$9)),
-                        exports: __spreadArray([], __read(COMPONENT$9)),
+                        declarations: __spreadArray([], __read(COMPONENT$b)),
+                        imports: __spreadArray([], __read(MODULES$b)),
+                        exports: __spreadArray([], __read(COMPONENT$b)),
                         providers: [],
                     }]
             }] });
@@ -4833,12 +5147,12 @@
         return AXFormModule;
     }());
     AXFormModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXFormModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXFormModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXFormModule, declarations: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent], imports: [i1.CommonModule], exports: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent] });
-    AXFormModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXFormModule, providers: [], imports: [[i1.CommonModule]] });
+    AXFormModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXFormModule, declarations: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent], imports: [i4.CommonModule], exports: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent] });
+    AXFormModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXFormModule, providers: [], imports: [[i4.CommonModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXFormModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i1.CommonModule],
+                        imports: [i4.CommonModule],
                         exports: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent],
                         declarations: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent],
                         providers: [],
@@ -4894,22 +5208,22 @@
                     type: i0.Input
                 }] } });
 
-    var COMPONENT$8 = [AXInputMaskComponent];
-    var MODULES$8 = [i1.CommonModule, i1$3.NgxMaskModule.forRoot()];
+    var COMPONENT$a = [AXInputMaskComponent];
+    var MODULES$a = [i4.CommonModule, i1$2.NgxMaskModule.forRoot()];
     var AXInputMaskModule = /** @class */ (function () {
         function AXInputMaskModule() {
         }
         return AXInputMaskModule;
     }());
     AXInputMaskModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXInputMaskModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXInputMaskModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXInputMaskModule, declarations: [AXInputMaskComponent], imports: [i1.CommonModule, i1__namespace$3.NgxMaskModule], exports: [AXInputMaskComponent] });
-    AXInputMaskModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXInputMaskModule, providers: [], imports: [__spreadArray([], __read(MODULES$8))] });
+    AXInputMaskModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXInputMaskModule, declarations: [AXInputMaskComponent], imports: [i4.CommonModule, i1__namespace$2.NgxMaskModule], exports: [AXInputMaskComponent] });
+    AXInputMaskModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXInputMaskModule, providers: [], imports: [__spreadArray([], __read(MODULES$a))] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXInputMaskModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: __spreadArray([], __read(COMPONENT$8)),
-                        imports: __spreadArray([], __read(MODULES$8)),
-                        exports: __spreadArray([], __read(COMPONENT$8)),
+                        declarations: __spreadArray([], __read(COMPONENT$a)),
+                        imports: __spreadArray([], __read(MODULES$a)),
+                        exports: __spreadArray([], __read(COMPONENT$a)),
                         providers: [],
                     }]
             }] });
@@ -4933,22 +5247,22 @@
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
-    var COMPONENT$7 = [AXLabelComponent];
-    var MODULES$7 = [i1.CommonModule];
+    var COMPONENT$9 = [AXLabelComponent];
+    var MODULES$9 = [i4.CommonModule];
     var AXLabelModule = /** @class */ (function () {
         function AXLabelModule() {
         }
         return AXLabelModule;
     }());
     AXLabelModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXLabelModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXLabelModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXLabelModule, declarations: [AXLabelComponent], imports: [i1.CommonModule], exports: [AXLabelComponent] });
-    AXLabelModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXLabelModule, providers: [], imports: [__spreadArray([], __read(MODULES$7))] });
+    AXLabelModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXLabelModule, declarations: [AXLabelComponent], imports: [i4.CommonModule], exports: [AXLabelComponent] });
+    AXLabelModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXLabelModule, providers: [], imports: [__spreadArray([], __read(MODULES$9))] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXLabelModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: __spreadArray([], __read(COMPONENT$7)),
-                        imports: __spreadArray([], __read(MODULES$7)),
-                        exports: __spreadArray([], __read(COMPONENT$7)),
+                        declarations: __spreadArray([], __read(COMPONENT$9)),
+                        imports: __spreadArray([], __read(MODULES$9)),
+                        exports: __spreadArray([], __read(COMPONENT$9)),
                         providers: [],
                     }]
             }] });
@@ -4996,7 +5310,7 @@
             _this.displayTextChange = new i0.EventEmitter();
             return _this;
         }
-        Object.defineProperty(AXNumberBoxComponent.prototype, "hostClass", {
+        Object.defineProperty(AXNumberBoxComponent.prototype, "__hostClass", {
             get: function () {
                 return this.cssClass + " ax-" + this.size;
             },
@@ -5202,8 +5516,8 @@
         };
         return AXNumberBoxComponent;
     }(AXBaseTextBoxMixin));
-    AXNumberBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXNumberBoxComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$3.MaskApplierService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXNumberBoxComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.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__namespace.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXNumberBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXNumberBoxComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$2.MaskApplierService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AXNumberBoxComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.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__namespace.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXNumberBoxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5226,7 +5540,7 @@
                         encapsulation: i0.ViewEncapsulation.None,
                         host: { class: 'ax-number-box ax-editor-container' },
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$3.MaskApplierService }]; }, propDecorators: { hostClass: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$2.MaskApplierService }]; }, propDecorators: { __hostClass: [{
                     type: i0.HostBinding,
                     args: ['class']
                 }], separator: [{
@@ -5251,12 +5565,12 @@
                     type: i0.Input
                 }] } });
 
-    var COMPONENT$6 = [AXNumberBoxComponent];
-    var MODULES$6 = [
-        i1.CommonModule,
+    var COMPONENT$8 = [AXNumberBoxComponent];
+    var MODULES$8 = [
+        i4.CommonModule,
         i3.FormsModule,
         AXButtonModule,
-        i1$3.NgxMaskModule.forChild()
+        i1$2.NgxMaskModule.forChild()
     ];
     var AXNumberBoxModule = /** @class */ (function () {
         function AXNumberBoxModule() {
@@ -5264,164 +5578,117 @@
         return AXNumberBoxModule;
     }());
     AXNumberBoxModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXNumberBoxModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXNumberBoxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXNumberBoxModule, declarations: [AXNumberBoxComponent], imports: [i1.CommonModule,
+    AXNumberBoxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXNumberBoxModule, declarations: [AXNumberBoxComponent], imports: [i4.CommonModule,
             i3.FormsModule,
-            AXButtonModule, i1__namespace$3.NgxMaskModule], exports: [AXNumberBoxComponent] });
-    AXNumberBoxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXNumberBoxModule, providers: [], imports: [__spreadArray([], __read(MODULES$6))] });
+            AXButtonModule, i1__namespace$2.NgxMaskModule], exports: [AXNumberBoxComponent] });
+    AXNumberBoxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXNumberBoxModule, providers: [], imports: [__spreadArray([], __read(MODULES$8))] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXNumberBoxModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: __spreadArray([], __read(COMPONENT$6)),
-                        imports: __spreadArray([], __read(MODULES$6)),
-                        exports: __spreadArray([], __read(COMPONENT$6)),
+                        declarations: __spreadArray([], __read(COMPONENT$8)),
+                        imports: __spreadArray([], __read(MODULES$8)),
+                        exports: __spreadArray([], __read(COMPONENT$8)),
                         providers: [],
                     }]
             }] });
 
-    var AXPopoverComponent = /** @class */ (function () {
-        function AXPopoverComponent(overlayService, zone, cdr) {
-            this.overlayService = overlayService;
-            this.zone = zone;
-            this.cdr = cdr;
-            //
-            this.openMode = 'manual';
-            //
-            this.closeMode = 'clickout';
-            //
-            this._visible = false;
+    /**
+     * The Textbox is a component which detects user interaction and triggers a corresponding event
+     *
+     * @category Components
+     */
+    var AXPasswordBoxComponent = /** @class */ (function (_super) {
+        __extends(AXPasswordBoxComponent, _super);
+        /**
+        *  @ignore
+        */
+        function AXPasswordBoxComponent(elementRef, cdr) {
+            var _this = _super.call(this, elementRef, cdr) || this;
+            _this._type = 'password';
+            _this._icon = 'ax-ic-eye';
+            /**
+                *  A flag for showing or hiding password button.
+                */
+            _this.showToggleButton = true;
+            return _this;
         }
-        Object.defineProperty(AXPopoverComponent.prototype, "visible", {
+        Object.defineProperty(AXPasswordBoxComponent.prototype, "hostClass", {
             get: function () {
-                return this._visible;
-            },
-            set: function (v) {
-                if (v !== this._visible) {
-                    if (v) {
-                        this.internalShow();
-                    }
-                    else {
-                        this.internalHide();
-                    }
-                    this._visible = v;
-                    this.cdr.detectChanges();
-                }
+                return this.cssClass + " ax-" + this.size;
             },
             enumerable: false,
             configurable: true
         });
-        //
-        AXPopoverComponent.prototype.toggle = function () {
-            this.visible = !this.visible;
-        };
-        AXPopoverComponent.prototype.close = function () {
-            var _this = this;
-            this.zone.run(function () {
-                _this.visible = false;
-            });
-        };
-        AXPopoverComponent.prototype.open = function () {
-            var _this = this;
-            this.zone.run(function () {
-                _this.visible = true;
-            });
-        };
-        AXPopoverComponent.prototype.internalShow = function () {
-            var _this = this;
-            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: function () {
-                    _this._visible = false;
-                }
-            });
-        };
-        AXPopoverComponent.prototype.internalHide = function () {
-            if (this.overlay) {
-                this.overlay.dispose();
+        AXPasswordBoxComponent.prototype.toggleType = function () {
+            if (this._type === 'password') {
+                this._type = 'text';
+                this._icon = 'ax-ic-eye-off';
             }
-        };
-        AXPopoverComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            setTimeout(function () {
-                _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);
-        };
-        AXPopoverComponent.prototype.ngOnDestroy = function () {
-            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';
             }
         };
-        Object.defineProperty(AXPopoverComponent.prototype, "isOpen", {
-            get: function () {
-                return this.visible;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return AXPopoverComponent;
-    }());
-    AXPopoverComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPopoverComponent, deps: [{ token: AXOverlayService }, { token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXPopoverComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPopoverComponent, decorators: [{
+        return AXPasswordBoxComponent;
+    }(AXBaseTextBoxMixin));
+    AXPasswordBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPasswordBoxComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AXPasswordBoxComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.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__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPasswordBoxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'ax-popover',
-                        templateUrl: './popover.component.html',
+                        selector: 'ax-password-box',
+                        templateUrl: 'password-box.component.html',
+                        inputs: __spreadArray([
+                            'disabled',
+                            'readonly',
+                            'tabIndex',
+                            'cssClass',
+                            'size'
+                        ], __read(TEXTBOX_INPUTS)),
+                        outputs: __spreadArray([
+                            'valueChange',
+                            'onValueChanged',
+                            'onBlur',
+                            'onFocus'
+                        ], __read(TEXTBOX_OUTPUT)),
                         encapsulation: i0.ViewEncapsulation.None,
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        host: { class: 'ax-password-box ax-editor-container' },
                     }]
-            }], ctorParameters: function () { return [{ type: AXOverlayService }, { type: i0__namespace.NgZone }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { template: [{
-                    type: i0.ViewChild,
-                    args: ['tpl']
-                }], target: [{
-                    type: i0.Input,
-                    args: ['target']
-                }], position: [{
-                    type: i0.Input,
-                    args: ['position']
-                }], openMode: [{
-                    type: i0.Input,
-                    args: ['openMode']
-                }], closeMode: [{
-                    type: i0.Input,
-                    args: ['closeMode']
-                }], visible: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
+                    type: i0.HostBinding,
+                    args: ['class']
+                }], showToggleButton: [{
                     type: i0.Input
                 }] } });
 
-    var AXPopoverModule = /** @class */ (function () {
-        function AXPopoverModule() {
+    var COMPONENT$7 = [AXPasswordBoxComponent];
+    var MODULES$7 = [
+        i4.CommonModule,
+        i3.FormsModule,
+        AXButtonModule,
+        AXEditorDecoratorModule,
+        AXIconModule
+    ];
+    var AXPasswordBoxModule = /** @class */ (function () {
+        function AXPasswordBoxModule() {
         }
-        return AXPopoverModule;
+        return AXPasswordBoxModule;
     }());
-    AXPopoverModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPopoverModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXPopoverModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPopoverModule, declarations: [AXPopoverComponent], imports: [i1.CommonModule], exports: [AXPopoverComponent] });
-    AXPopoverModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPopoverModule, providers: [], imports: [[i1.CommonModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPopoverModule, decorators: [{
+    AXPasswordBoxModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPasswordBoxModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    AXPasswordBoxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPasswordBoxModule, declarations: [AXPasswordBoxComponent], imports: [i4.CommonModule,
+            i3.FormsModule,
+            AXButtonModule,
+            AXEditorDecoratorModule,
+            AXIconModule], exports: [AXPasswordBoxComponent] });
+    AXPasswordBoxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPasswordBoxModule, providers: [], imports: [__spreadArray([], __read(MODULES$7))] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPasswordBoxModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: [AXPopoverComponent],
-                        imports: [i1.CommonModule],
-                        exports: [AXPopoverComponent],
-                        providers: []
+                        declarations: __spreadArray([], __read(COMPONENT$7)),
+                        imports: __spreadArray([], __read(MODULES$7)),
+                        exports: __spreadArray([], __read(COMPONENT$7)),
+                        providers: [],
                     }]
             }] });
 
@@ -5450,11 +5717,11 @@
                 //   });
             }
             else if (this.content instanceof i0.TemplateRef) {
-                this._selectedPortal = new i1$1.TemplatePortal(this.content, this._viewContainerRef, { $implicit: this.data, ref: this });
+                this._selectedPortal = new i1.TemplatePortal(this.content, this._viewContainerRef, { $implicit: this.data, ref: this });
                 this._cdr.markForCheck();
             }
             else if (typeof this.content === 'function') {
-                this._selectedPortal = new i1$1.ComponentPortal(this.content);
+                this._selectedPortal = new i1.ComponentPortal(this.content);
                 this._cdr.markForCheck();
             }
         };
@@ -5471,7 +5738,7 @@
                 }
             }
             if (ref.instance.footer) {
-                this._footerPortal = new i1$1.TemplatePortal(ref.instance.footer.template, this._viewContainerRef, { $implicit: this.data, ref: this });
+                this._footerPortal = new i1.TemplatePortal(ref.instance.footer.template, this._viewContainerRef, { $implicit: this.data, ref: this });
             }
             this.loadingService.hide(this._loadingId);
             this.focus();
@@ -5503,7 +5770,7 @@
         return AXPopupComponent;
     }(AXBaseComponentMixin));
     AXPopupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPopupComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ViewContainerRef }, { token: AXLoadingService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXPopupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXPopupComponent, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, usesInheritance: true, ngImport: i0__namespace, 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__namespace$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3__namespace$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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1__namespace$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXPopupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXPopupComponent, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, usesInheritance: true, ngImport: i0__namespace, 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__namespace$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3__namespace$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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1__namespace$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPopupComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5609,23 +5876,64 @@
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: AXOverlayService }]; } });
 
-    var COMPONENT$5 = [AXPopupComponent];
-    var MODULES$5 = [i1.CommonModule, i3$1.DragDropModule, i2$1.A11yModule, AXButtonModule, i1$1.PortalModule];
+    var COMPONENT$6 = [AXPopupComponent];
+    var MODULES$6 = [i4.CommonModule, i3$1.DragDropModule, i2$1.A11yModule, AXButtonModule, i1.PortalModule];
     var AXPopupModule = /** @class */ (function () {
         function AXPopupModule() {
         }
         return AXPopupModule;
     }());
     AXPopupModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPopupModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXPopupModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPopupModule, declarations: [AXPopupComponent], imports: [i1.CommonModule, i3$1.DragDropModule, i2$1.A11yModule, AXButtonModule, i1$1.PortalModule], exports: [AXPopupComponent] });
-    AXPopupModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPopupModule, providers: [AXPopupService], imports: [__spreadArray([], __read(MODULES$5))] });
+    AXPopupModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPopupModule, declarations: [AXPopupComponent], imports: [i4.CommonModule, i3$1.DragDropModule, i2$1.A11yModule, AXButtonModule, i1.PortalModule], exports: [AXPopupComponent] });
+    AXPopupModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPopupModule, providers: [AXPopupService], imports: [__spreadArray([], __read(MODULES$6))] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXPopupModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: __spreadArray([], __read(COMPONENT$6)),
+                        imports: __spreadArray([], __read(MODULES$6)),
+                        exports: __spreadArray([], __read(COMPONENT$6)),
+                        providers: [AXPopupService],
+                    }]
+            }] });
+
+    var AXRangeSliderComponent = /** @class */ (function (_super) {
+        __extends(AXRangeSliderComponent, _super);
+        function AXRangeSliderComponent(elementRef, cdr) {
+            return _super.call(this, elementRef, cdr) || this;
+            //TODO: ax-range-slider
+        }
+        return AXRangeSliderComponent;
+    }(AXBaseComponentMixin));
+    AXRangeSliderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXRangeSliderComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AXRangeSliderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXRangeSliderComponent, selector: "ax-range-slider", host: { classAttribute: "ax-range-slider" }, usesInheritance: true, ngImport: i0__namespace, template: "<input type=\"range\" min=\"1\" max=\"100\" value=\"50\" class=\"ax-range-slider-input\">", changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXRangeSliderComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ax-range-slider',
+                        templateUrl: './range-slider.component.html',
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        encapsulation: i0.ViewEncapsulation.None,
+                        host: { class: 'ax-range-slider' }
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; } });
+
+    var COMPONENT$5 = [AXRangeSliderComponent];
+    var MODULES$5 = [i4.CommonModule];
+    var AXRangeSliderModule = /** @class */ (function () {
+        function AXRangeSliderModule() {
+        }
+        return AXRangeSliderModule;
+    }());
+    AXRangeSliderModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXRangeSliderModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    AXRangeSliderModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXRangeSliderModule, declarations: [AXRangeSliderComponent], imports: [i4.CommonModule], exports: [AXRangeSliderComponent] });
+    AXRangeSliderModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXRangeSliderModule, providers: [], imports: [__spreadArray([], __read(MODULES$5))] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXRangeSliderModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: __spreadArray([], __read(COMPONENT$5)),
                         imports: __spreadArray([], __read(MODULES$5)),
                         exports: __spreadArray([], __read(COMPONENT$5)),
-                        providers: [AXPopupService],
+                        providers: [],
                     }]
             }] });
 
@@ -5686,6 +5994,10 @@
             this.unselectItems(item);
             e.stopPropagation();
         };
+        AXSelectBoxComponent.prototype._handleBadgeRemove = function (e, item) {
+            this.unselectItems(item);
+            e.stopPropagation();
+        };
         AXSelectBoxComponent.prototype._handleKeydown = function (e) {
             if (!(this._getHostElement() == document.activeElement ||
                 this._getHostElement().contains(document.activeElement) ||
@@ -5806,7 +6118,7 @@
         return AXSelectBoxComponent;
     }(AXBaseSelectionDropdownMixin));
     AXSelectBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSelectBoxComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXSelectBoxComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXSelectBoxComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSelectBoxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5835,12 +6147,12 @@
         return AXSelectBoxModule;
     }());
     AXSelectBoxModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSelectBoxModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXSelectBoxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [i1.CommonModule, AXDropdownModule, i3.FormsModule], exports: [AXSelectBoxComponent] });
-    AXSelectBoxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSelectBoxModule, providers: [], imports: [[i1.CommonModule, AXDropdownModule, i3.FormsModule]] });
+    AXSelectBoxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [i4.CommonModule, AXDropdownModule, i3.FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule], exports: [AXSelectBoxComponent] });
+    AXSelectBoxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSelectBoxModule, providers: [], imports: [[i4.CommonModule, AXDropdownModule, i3.FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSelectBoxModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i1.CommonModule, AXDropdownModule, i3.FormsModule],
+                        imports: [i4.CommonModule, AXDropdownModule, i3.FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule],
                         exports: [AXSelectBoxComponent],
                         declarations: [AXSelectBoxComponent],
                         providers: [],
@@ -5866,7 +6178,7 @@
         return AXSelectionListComponent;
     }(AXBaseSelectionValueMixin));
     AXSelectionListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSelectionListComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXSelectionListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXSelectionListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSelectionListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5883,6 +6195,7 @@
                             'multiple',
                             'items',
                             'selectionMode',
+                            'cssClass'
                         ],
                         outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus'],
                         encapsulation: i0.ViewEncapsulation.None,
@@ -5898,13 +6211,13 @@
         return AXSelectionListModule;
     }());
     AXSelectionListModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSelectionListModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXSelectionListModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSelectionListModule, declarations: [AXSelectionListComponent], imports: [i1.CommonModule, i3.FormsModule, AXCheckBoxModule], exports: [AXSelectionListComponent] });
-    AXSelectionListModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSelectionListModule, providers: [], imports: [[i1.CommonModule, i3.FormsModule, AXCheckBoxModule]] });
+    AXSelectionListModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSelectionListModule, declarations: [AXSelectionListComponent], imports: [i4.CommonModule, i3.FormsModule, AXCheckBoxModule], exports: [AXSelectionListComponent] });
+    AXSelectionListModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSelectionListModule, providers: [], imports: [[i4.CommonModule, i3.FormsModule, AXCheckBoxModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSelectionListModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [AXSelectionListComponent],
-                        imports: [i1.CommonModule, i3.FormsModule, AXCheckBoxModule],
+                        imports: [i4.CommonModule, i3.FormsModule, AXCheckBoxModule],
                         exports: [AXSelectionListComponent],
                         providers: []
                     }]
@@ -5931,14 +6244,14 @@
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
     var COMPONENT$4 = [AXSideMenuComponent];
-    var MODULES$4 = [i1.CommonModule];
+    var MODULES$4 = [i4.CommonModule];
     var AXSideMenuModule = /** @class */ (function () {
         function AXSideMenuModule() {
         }
         return AXSideMenuModule;
     }());
     AXSideMenuModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSideMenuModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXSideMenuModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSideMenuModule, declarations: [AXSideMenuComponent], imports: [i1.CommonModule], exports: [AXSideMenuComponent] });
+    AXSideMenuModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSideMenuModule, declarations: [AXSideMenuComponent], imports: [i4.CommonModule], exports: [AXSideMenuComponent] });
     AXSideMenuModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSideMenuModule, providers: [], imports: [__spreadArray([], __read(MODULES$4))] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSideMenuModule, decorators: [{
                 type: i0.NgModule,
@@ -5964,7 +6277,7 @@
         return AXSwitchComponent;
     }(AXBaseValueComponentMixin));
     AXSwitchComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSwitchComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXSwitchComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXSwitchComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSwitchComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5983,13 +6296,13 @@
         return AXSwitchModule;
     }());
     AXSwitchModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSwitchModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXSwitchModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSwitchModule, declarations: [AXSwitchComponent], imports: [i1.CommonModule, i3.FormsModule], exports: [AXSwitchComponent] });
-    AXSwitchModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSwitchModule, providers: [], imports: [[i1.CommonModule, i3.FormsModule]] });
+    AXSwitchModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSwitchModule, declarations: [AXSwitchComponent], imports: [i4.CommonModule, i3.FormsModule], exports: [AXSwitchComponent] });
+    AXSwitchModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSwitchModule, providers: [], imports: [[i4.CommonModule, i3.FormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSwitchModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [AXSwitchComponent],
-                        imports: [i1.CommonModule, i3.FormsModule],
+                        imports: [i4.CommonModule, i3.FormsModule],
                         exports: [AXSwitchComponent],
                         entryComponents: [AXSwitchComponent],
                         providers: [],
@@ -6001,7 +6314,8 @@
         function AXTabStripComponent(elementRef, cdr) {
             var _this = _super.call(this, elementRef, cdr) || this;
             _this.mode = 'default';
-            _this.fullWidth = false;
+            _this.direction = "horizontal";
+            _this.fitParent = false;
             _this.minWidth = false;
             _this.onSelectionChanged = new i0.EventEmitter();
             return _this;
@@ -6034,10 +6348,17 @@
                 htmlElement: this._getHostElement(),
             });
         };
+        Object.defineProperty(AXTabStripComponent.prototype, "__hostClass", {
+            get: function () {
+                return ["ax-tabs", "ax-tabs-" + (this.mode ? this.mode : 'default'), "ax-tabs-" + this.direction, "" + (this.fitParent ? 'ax-tabs-fit' : '')].join(' ');
+            },
+            enumerable: false,
+            configurable: true
+        });
         return AXTabStripComponent;
     }(AXSizableComponentMixin));
     AXTabStripComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTabStripComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXTabStripComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXTabStripComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTabStripComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6045,19 +6366,24 @@
                         templateUrl: './tab-strip.component.html',
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         encapsulation: i0.ViewEncapsulation.None,
-                        inputs: ['size', 'cssClass'],
+                        inputs: ['size'],
                         host: { class: 'ax-tab-strip' },
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { items: [{
                     type: i0.Input
                 }], mode: [{
                     type: i0.Input
-                }], fullWidth: [{
+                }], direction: [{
+                    type: i0.Input
+                }], fitParent: [{
                     type: i0.Input
                 }], minWidth: [{
                     type: i0.Input
                 }], onSelectionChanged: [{
                     type: i0.Output
+                }], __hostClass: [{
+                    type: i0.HostBinding,
+                    args: ['class']
                 }] } });
 
     var AXTabComponent = /** @class */ (function (_super) {
@@ -6082,7 +6408,7 @@
         return AXTabComponent;
     }(AXBaseComponentMixin));
     AXTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTabComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTabComponent, selector: "ax-tab", inputs: { name: "name", caption: "caption", tooltip: "tooltip", icon: "icon", visible: "visible", disabled: "disabled", data: "data" }, host: { styleAttribute: "display:none", classAttribute: "ax-tab" }, usesInheritance: true, ngImport: i0__namespace, template: "\n      <div *ngIf=\"_render\" >\n        <ng-content>\n        </ng-content>\n      </div>\n    ", isInline: true, directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTabComponent, selector: "ax-tab", inputs: { name: "name", caption: "caption", tooltip: "tooltip", icon: "icon", visible: "visible", disabled: "disabled", data: "data" }, host: { styleAttribute: "display:none", classAttribute: "ax-tab" }, usesInheritance: true, ngImport: i0__namespace, template: "\n      <div *ngIf=\"_render\" >\n        <ng-content>\n        </ng-content>\n      </div>\n    ", isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTabComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6134,9 +6460,9 @@
             tabs[e.selectedIndex].show();
         };
         return AXTabViewComponent;
-    }(AXTabStripComponent));
+    }(AXBaseComponent));
     AXTabViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTabViewComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXTabViewComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXTabViewComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTabViewComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6152,6 +6478,132 @@
                     args: [AXTabComponent]
                 }] } });
 
+    var AXTabItemComponent = /** @class */ (function (_super) {
+        __extends(AXTabItemComponent, _super);
+        function AXTabItemComponent(elementRef, cdr) {
+            var _this = _super.call(this, elementRef, cdr) || this;
+            _this.width = false;
+            _this.activeChange = new i0.EventEmitter();
+            _this._active = false;
+            return _this;
+        }
+        Object.defineProperty(AXTabItemComponent.prototype, "active", {
+            get: function () {
+                return this._active;
+            },
+            set: function (v) {
+                this._active = v;
+                this.activeChange.emit(v);
+                v ? this._getHostElement().classList.add('ax-state-active') : this._getHostElement().classList.remove('ax-state-active');
+            },
+            enumerable: false,
+            configurable: true
+        });
+        // @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(' ');
+        // }
+        AXTabItemComponent.prototype.__hostClick = function (e) {
+            this.onClick.emit({
+                component: this,
+                htmlElement: this._getHostElement(),
+                nativeEvent: e
+            });
+        };
+        return AXTabItemComponent;
+    }(AXBaseClickableMixin));
+    AXTabItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTabItemComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AXTabItemComponent.ɵcmp = i0__namespace.ɵɵ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: i0.TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "\n            <ng-content select=\"ax-prefix\"></ng-content>\n            <span>{{text}}</span>\n            <ng-content select=\"ax-suffix\"></ng-content>\n            <ng-template>\n                <ng-content>\n                </ng-content>\n            </ng-template>\n    ", isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTabItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ax-tab-item',
+                        template: "\n            <ng-content select=\"ax-prefix\"></ng-content>\n            <span>{{text}}</span>\n            <ng-content select=\"ax-suffix\"></ng-content>\n            <ng-template>\n                <ng-content>\n                </ng-content>\n            </ng-template>\n    ",
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        encapsulation: i0.ViewEncapsulation.None,
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { text: [{
+                    type: i0.Input
+                }], width: [{
+                    type: i0.Input
+                }], template: [{
+                    type: i0.ViewChild,
+                    args: [i0.TemplateRef]
+                }], activeChange: [{
+                    type: i0.Output
+                }], active: [{
+                    type: i0.Input
+                }], __hostClick: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }] } });
+
+    var AXTabsComponent = /** @class */ (function (_super) {
+        __extends(AXTabsComponent, _super);
+        function AXTabsComponent(elementRef, cdr) {
+            var _this = _super.call(this, elementRef, cdr) || this;
+            _this.mode = 'default';
+            _this.direction = "horizontal";
+            _this.fitParent = false;
+            _this.minWidth = false;
+            return _this;
+        }
+        AXTabsComponent.prototype.onViewInit = function () {
+            var _this = this;
+            this._handleSelectionChanged(this._contentTabs.get(0));
+            this._contentTabs.forEach(function (c) {
+                c.onClick.subscribe(function (t) {
+                    _this._handleSelectionChanged(c);
+                });
+            });
+        };
+        AXTabsComponent.prototype._handleSelectionChanged = function (e) {
+            this._contentTabs.filter(function (c) { return c != e; }).forEach(function (c) { c.active = false; });
+            e.active = true;
+            this.content.portal = e.template;
+            this._cdr.markForCheck();
+        };
+        Object.defineProperty(AXTabsComponent.prototype, "__hostClass", {
+            get: function () {
+                return ["ax-tabs-" + (this.mode ? this.mode : 'default'), "ax-tabs-" + this.direction, "" + (this.fitParent ? 'ax-tabs-fit' : '')].join(' ');
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return AXTabsComponent;
+    }(AXBaseComponent));
+    AXTabsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTabsComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AXTabsComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "\n        <div class=\"ax-items-wrapper\">\n            <ng-content select=\"ax-tab-item\">\n            </ng-content>\n        </div>\n        <!-- <div [axTabOutlet]=\"_activeTabView\">\n\n        </div> -->\n    ", isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTabsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ax-tabs',
+                        template: "\n        <div class=\"ax-items-wrapper\">\n            <ng-content select=\"ax-tab-item\">\n            </ng-content>\n        </div>\n        <!-- <div [axTabOutlet]=\"_activeTabView\">\n\n        </div> -->\n    ",
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        encapsulation: i0.ViewEncapsulation.None,
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { _contentTabs: [{
+                    type: i0.ContentChildren,
+                    args: [AXTabItemComponent]
+                }], mode: [{
+                    type: i0.Input
+                }], direction: [{
+                    type: i0.Input
+                }], fitParent: [{
+                    type: i0.Input
+                }], minWidth: [{
+                    type: i0.Input
+                }], content: [{
+                    type: i0.Input
+                }], __hostClass: [{
+                    type: i0.HostBinding,
+                    args: ['class']
+                }] } });
+
     var AXTabStripChangedEvent = /** @class */ (function (_super) {
         __extends(AXTabStripChangedEvent, _super);
         function AXTabStripChangedEvent() {
@@ -6160,15 +6612,45 @@
         return AXTabStripChangedEvent;
     }(AXEvent));
 
-    var COMPONENT$3 = [AXTabViewComponent, AXTabStripComponent, AXTabComponent];
-    var MODULES$3 = [i1.CommonModule];
+    var AXTabContentDirective = /** @class */ (function () {
+        function AXTabContentDirective(_viewContainerRef) {
+            this._viewContainerRef = _viewContainerRef;
+        }
+        Object.defineProperty(AXTabContentDirective.prototype, "portal", {
+            get: function () {
+                return this._portal;
+            },
+            set: function (v) {
+                //debugger;
+                this._portal = v;
+                this._viewContainerRef.clear();
+                var viewRef = this._viewContainerRef.createEmbeddedView(v, null, 0);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return AXTabContentDirective;
+    }());
+    AXTabContentDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTabContentDirective, deps: [{ token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    AXTabContentDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.6", type: AXTabContentDirective, selector: "[axTabContent]", inputs: { portal: ["axTabContent", "portal"] }, exportAs: ["axTabContent"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTabContentDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[axTabContent]',
+                        exportAs: 'axTabContent',
+                        inputs: ['portal: axTabContent'],
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ViewContainerRef }]; } });
+
+    var COMPONENT$3 = [AXTabsComponent, AXTabItemComponent, AXTabContentDirective];
+    var MODULES$3 = [i4.CommonModule, i1.PortalModule, AXEditorDecoratorModule];
     var AXTabsModule = /** @class */ (function () {
         function AXTabsModule() {
         }
         return AXTabsModule;
     }());
     AXTabsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTabsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXTabsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTabsModule, declarations: [AXTabViewComponent, AXTabStripComponent, AXTabComponent], imports: [i1.CommonModule], exports: [AXTabViewComponent, AXTabStripComponent, AXTabComponent] });
+    AXTabsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTabsModule, declarations: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective], imports: [i4.CommonModule, i1.PortalModule, AXEditorDecoratorModule], exports: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective] });
     AXTabsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTabsModule, providers: [], imports: [__spreadArray([], __read(MODULES$3))] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTabsModule, decorators: [{
                 type: i0.NgModule,
@@ -6296,8 +6778,8 @@
         };
         return AXTimeBoxComponent;
     }(AXBaseTextBoxMixin));
-    AXTimeBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTimeBoxComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$3.MaskApplierService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXTimeBoxComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.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__namespace.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXTimeBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTimeBoxComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$2.MaskApplierService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AXTimeBoxComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.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__namespace.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTimeBoxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6309,7 +6791,7 @@
                         encapsulation: i0.ViewEncapsulation.None,
                         host: { class: 'ax-time-box ax-editor-container' },
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$3.MaskApplierService }]; }, propDecorators: { hostClass: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$2.MaskApplierService }]; }, propDecorators: { hostClass: [{
                     type: i0.HostBinding,
                     args: ['class']
                 }], minValue: [{
@@ -6326,10 +6808,10 @@
 
     var COMPONENT$2 = [AXTimeBoxComponent];
     var MODULES$2 = [
-        i1.CommonModule,
+        i4.CommonModule,
         i3.FormsModule,
         AXButtonModule,
-        i1$3.NgxMaskModule.forChild()
+        i1$2.NgxMaskModule.forChild()
     ];
     var AXTimeBoxModule = /** @class */ (function () {
         function AXTimeBoxModule() {
@@ -6337,9 +6819,9 @@
         return AXTimeBoxModule;
     }());
     AXTimeBoxModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTimeBoxModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXTimeBoxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTimeBoxModule, declarations: [AXTimeBoxComponent], imports: [i1.CommonModule,
+    AXTimeBoxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTimeBoxModule, declarations: [AXTimeBoxComponent], imports: [i4.CommonModule,
             i3.FormsModule,
-            AXButtonModule, i1__namespace$3.NgxMaskModule], exports: [AXTimeBoxComponent] });
+            AXButtonModule, i1__namespace$2.NgxMaskModule], exports: [AXTimeBoxComponent] });
     AXTimeBoxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTimeBoxModule, providers: [], imports: [__spreadArray([], __read(MODULES$2))] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTimeBoxModule, decorators: [{
                 type: i0.NgModule,
@@ -6389,7 +6871,7 @@
         return AXToastComponent;
     }(AXBaseComponentMixin));
     AXToastComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXToastComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXToastComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXToastComponent, selector: "ax-toast", host: { classAttribute: "ax-toast" }, usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXToastComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXToastComponent, selector: "ax-toast", host: { classAttribute: "ax-toast" }, usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXToastComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6402,14 +6884,14 @@
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
     var COMPONENT$1 = [AXToastComponent];
-    var MODULES$1 = [i1.CommonModule, AXButtonModule];
+    var MODULES$1 = [i4.CommonModule, AXButtonModule];
     var AXToastModule = /** @class */ (function () {
         function AXToastModule() {
         }
         return AXToastModule;
     }());
     AXToastModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXToastModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXToastModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXToastModule, declarations: [AXToastComponent], imports: [i1.CommonModule, AXButtonModule], exports: [AXToastComponent] });
+    AXToastModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXToastModule, declarations: [AXToastComponent], imports: [i4.CommonModule, AXButtonModule], exports: [AXToastComponent] });
     AXToastModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXToastModule, providers: [], imports: [__spreadArray([], __read(MODULES$1))] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXToastModule, decorators: [{
                 type: i0.NgModule,
@@ -6490,7 +6972,7 @@
                 positionStrategy: positionStrategy,
                 panelClass: ['animate__animated', 'animate__fadeIn', 'animate__faster'],
             });
-            var toastPortal = new i1$1.ComponentPortal(AXToastComponent, null, this.parentInjector);
+            var toastPortal = new i1.ComponentPortal(AXToastComponent, null, this.parentInjector);
             var host = overlayRef.attach(toastPortal);
             host.instance.visibleIndex = this._activeList.length;
             this._activeList.push(host.instance);
@@ -6525,12 +7007,12 @@
         };
         return AXToastService;
     }());
-    AXToastService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXToastService, deps: [{ token: i1__namespace$1.Overlay }, { token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    AXToastService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXToastService, deps: [{ token: i1__namespace.Overlay }, { token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     AXToastService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXToastService, providedIn: 'root' });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXToastService, decorators: [{
                 type: i0.Injectable,
                 args: [{ providedIn: 'root' }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$1.Overlay }, { type: i0__namespace.Injector }]; } });
+            }], ctorParameters: function () { return [{ type: i1__namespace.Overlay }, { type: i0__namespace.Injector }]; } });
 
     var AXTooltipComponent = /** @class */ (function (_super) {
         __extends(AXTooltipComponent, _super);
@@ -6630,7 +7112,7 @@
             this.overlayRef = this.overlay.create({ positionStrategy: positionStrategy });
         };
         AXTooltipDirective.prototype.show = function () {
-            var tooltipRef = this.overlayRef.attach(new i1$1.ComponentPortal(AXTooltipComponent));
+            var tooltipRef = this.overlayRef.attach(new i1.ComponentPortal(AXTooltipComponent));
             tooltipRef.instance.text = this.text;
             tooltipRef.instance.position = this.position;
         };
@@ -6639,12 +7121,12 @@
         };
         return AXTooltipDirective;
     }());
-    AXTooltipDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTooltipDirective, deps: [{ token: i1__namespace$1.Overlay }, { token: i1__namespace$1.OverlayPositionBuilder }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    AXTooltipDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTooltipDirective, deps: [{ token: i1__namespace.Overlay }, { token: i1__namespace.OverlayPositionBuilder }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
     AXTooltipDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTooltipDirective, decorators: [{
                 type: i0.Directive,
                 args: [{ selector: '[axTooltip]' }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$1.Overlay }, { type: i1__namespace$1.OverlayPositionBuilder }, { type: i0__namespace.ElementRef }]; }, propDecorators: { text: [{
+            }], ctorParameters: function () { return [{ type: i1__namespace.Overlay }, { type: i1__namespace.OverlayPositionBuilder }, { type: i0__namespace.ElementRef }]; }, propDecorators: { text: [{
                     type: i0.Input,
                     args: ['axTooltip']
                 }], position: [{
@@ -6659,14 +7141,14 @@
                 }] } });
 
     var COMPONENT = [AXTooltipComponent, AXTooltipDirective];
-    var MODULES = [i1.CommonModule, i1$2.OverlayModule];
+    var MODULES = [i4.CommonModule, i1$1.OverlayModule];
     var AXTooltipModule = /** @class */ (function () {
         function AXTooltipModule() {
         }
         return AXTooltipModule;
     }());
     AXTooltipModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTooltipModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXTooltipModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTooltipModule, declarations: [AXTooltipComponent, AXTooltipDirective], imports: [i1.CommonModule, i1$2.OverlayModule], exports: [AXTooltipComponent, AXTooltipDirective] });
+    AXTooltipModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTooltipModule, declarations: [AXTooltipComponent, AXTooltipDirective], imports: [i4.CommonModule, i1$1.OverlayModule], exports: [AXTooltipComponent, AXTooltipDirective] });
     AXTooltipModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTooltipModule, providers: [], imports: [__spreadArray([], __read(MODULES))] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTooltipModule, decorators: [{
                 type: i0.NgModule,
@@ -6702,7 +7184,7 @@
         return AXTextBoxComponent;
     }(AXBaseTextBoxMixin));
     AXTextBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTextBoxComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXTextBoxComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$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__namespace.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__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXTextBoxComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$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__namespace.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__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTextBoxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6723,7 +7205,7 @@
                         ], __read(TEXTBOX_OUTPUT)),
                         encapsulation: i0.ViewEncapsulation.None,
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        host: { class: 'ax-text-box' },
+                        host: { class: 'ax-text-box ax-editor-container' },
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { _contentMask: [{
                     type: i0.ContentChild,
@@ -6739,26 +7221,29 @@
         return AXTextBoxModule;
     }());
     AXTextBoxModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTextBoxModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXTextBoxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTextBoxModule, declarations: [AXTextBoxComponent], imports: [i1.CommonModule,
+    AXTextBoxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTextBoxModule, declarations: [AXTextBoxComponent], imports: [i4.CommonModule,
             i3.FormsModule,
             AXButtonModule,
-            AXEditorDecoratorModule, i1__namespace$3.NgxMaskModule], exports: [AXTextBoxComponent] });
+            AXEditorDecoratorModule,
+            AXIconModule, i1__namespace$2.NgxMaskModule], exports: [AXTextBoxComponent] });
     AXTextBoxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTextBoxModule, providers: [], imports: [[
-                i1.CommonModule,
+                i4.CommonModule,
                 i3.FormsModule,
                 AXButtonModule,
                 AXEditorDecoratorModule,
-                i1$3.NgxMaskModule.forChild()
+                AXIconModule,
+                i1$2.NgxMaskModule.forChild()
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTextBoxModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i1.CommonModule,
+                            i4.CommonModule,
                             i3.FormsModule,
                             AXButtonModule,
                             AXEditorDecoratorModule,
-                            i1$3.NgxMaskModule.forChild()
+                            AXIconModule,
+                            i1$2.NgxMaskModule.forChild()
                         ],
                         exports: [AXTextBoxComponent],
                         declarations: [AXTextBoxComponent],
@@ -6898,13 +7383,13 @@
         return AXValidationModule;
     }());
     AXValidationModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXValidationModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    AXValidationModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXValidationModule, declarations: [AXValidationRuleComponent], imports: [i1.CommonModule], exports: [AXValidationRuleComponent] });
-    AXValidationModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXValidationModule, providers: [], imports: [[i1.CommonModule]] });
+    AXValidationModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXValidationModule, declarations: [AXValidationRuleComponent], imports: [i4.CommonModule], exports: [AXValidationRuleComponent] });
+    AXValidationModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXValidationModule, providers: [], imports: [[i4.CommonModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXValidationModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [AXValidationRuleComponent],
-                        imports: [i1.CommonModule],
+                        imports: [i4.CommonModule],
                         exports: [AXValidationRuleComponent],
                         providers: []
                     }]
@@ -6928,13 +7413,12 @@
     exports.AXAlertTitleComponent = AXAlertTitleComponent;
     exports.AXAvatarComponent = AXAvatarComponent;
     exports.AXAvatarModule = AXAvatarModule;
+    exports.AXBadgeComponent = AXBadgeComponent;
+    exports.AXBadgeModule = AXBadgeModule;
     exports.AXBaseButtonMixin = AXBaseButtonMixin;
     exports.AXBaseClickableMixin = AXBaseClickableMixin;
     exports.AXBaseComponent = AXBaseComponent;
     exports.AXBaseComponentMixin = AXBaseComponentMixin;
-    exports.AXBaseDropdownButtonMixin = AXBaseDropdownButtonMixin;
-    exports.AXBaseDropdownMenuMixin = AXBaseDropdownMenuMixin;
-    exports.AXBaseDropdownMixin = AXBaseDropdownMixin;
     exports.AXBaseItemButtonMixin = AXBaseItemButtonMixin;
     exports.AXBasePageComponent = AXBasePageComponent;
     exports.AXBaseSelectionDropdownMixin = AXBaseSelectionDropdownMixin;
@@ -6948,7 +7432,7 @@
     exports.AXButtonItemComponent = AXButtonItemComponent;
     exports.AXButtonModule = AXButtonModule;
     exports.AXCalendarComponent = AXCalendarComponent;
-    exports.AXCalendarMixin = AXCalendarMixin;
+    exports.AXCalendarComponentMixin = AXCalendarComponentMixin;
     exports.AXCalendarModule = AXCalendarModule;
     exports.AXCarouselArrowsComponent = AXCarouselArrowsComponent;
     exports.AXCarouselComponent = AXCarouselComponent;
@@ -6973,7 +7457,6 @@
     exports.AXDrawerContainerComponent = AXDrawerContainerComponent;
     exports.AXDrawerContentComponent = AXDrawerContentComponent;
     exports.AXDrawerModule = AXDrawerModule;
-    exports.AXDropdownButtonComponent = AXDropdownButtonComponent;
     exports.AXDropdownComponent = AXDropdownComponent;
     exports.AXDropdownModule = AXDropdownModule;
     exports.AXDropdownPanelComponent = AXDropdownPanelComponent;
@@ -6990,6 +7473,7 @@
     exports.AXInputMaskComponent = AXInputMaskComponent;
     exports.AXInputMaskModule = AXInputMaskModule;
     exports.AXInteractiveComponenetMixin = AXInteractiveComponenetMixin;
+    exports.AXItemClickEvent = AXItemClickEvent;
     exports.AXLabelComponent = AXLabelComponent;
     exports.AXLabelModule = AXLabelModule;
     exports.AXLoadingComponent = AXLoadingComponent;
@@ -7006,11 +7490,15 @@
     exports.AXPageFooterComponent = AXPageFooterComponent;
     exports.AXPageModule = AXPageModule;
     exports.AXPageResult = AXPageResult;
+    exports.AXPasswordBoxComponent = AXPasswordBoxComponent;
+    exports.AXPasswordBoxModule = AXPasswordBoxModule;
     exports.AXPopoverComponent = AXPopoverComponent;
     exports.AXPopoverModule = AXPopoverModule;
     exports.AXPopupComponent = AXPopupComponent;
     exports.AXPopupModule = AXPopupModule;
     exports.AXPopupService = AXPopupService;
+    exports.AXRangeSliderComponent = AXRangeSliderComponent;
+    exports.AXRangeSliderModule = AXRangeSliderModule;
     exports.AXResponsiveDirective = AXResponsiveDirective;
     exports.AXSelectBoxComponent = AXSelectBoxComponent;
     exports.AXSelectBoxModule = AXSelectBoxModule;
@@ -7022,10 +7510,12 @@
     exports.AXSizableComponentMixin = AXSizableComponentMixin;
     exports.AXSwitchComponent = AXSwitchComponent;
     exports.AXSwitchModule = AXSwitchModule;
-    exports.AXTabComponent = AXTabComponent;
+    exports.AXTabContentDirective = AXTabContentDirective;
+    exports.AXTabItemComponent = AXTabItemComponent;
     exports.AXTabStripChangedEvent = AXTabStripChangedEvent;
     exports.AXTabStripComponent = AXTabStripComponent;
     exports.AXTabViewComponent = AXTabViewComponent;
+    exports.AXTabsComponent = AXTabsComponent;
     exports.AXTabsModule = AXTabsModule;
     exports.AXTextBoxComponent = AXTextBoxComponent;
     exports.AXTextBoxModule = AXTextBoxModule;