@acorex/components 5.0.10 → 5.0.13

package/bundles/acorex-components.umd.js

@@ -1,8 +1,8 @@
 (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/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$3, global.ng.animations));
-}(this, (function (exports, i0, coercion, i2, rxjs, operators, i1, i3, i1$1, _, i1$2, 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('ngx-mask'), require('@angular/cdk/a11y'), require('@angular/cdk/drag-drop'), require('@angular/cdk/bidi'), 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', 'ngx-mask', '@angular/cdk/a11y', '@angular/cdk/drag-drop', '@angular/cdk/bidi', '@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.i1$3, global.ng.cdk.a11y, global.ng.cdk.dragDrop, global.ng.cdk.bidi, global.ng.animations));
+}(this, (function (exports, i0, coercion, i2, rxjs, operators, i1, i3, i1$1, _, i1$2, i1$3, i2$1, i3$1, i2$2, animations) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,13 +30,13 @@
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
-    var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$1);
+    var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$1);
     var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$2);
+    var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$3);
     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);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -414,10 +414,26 @@
         };
         AXBaseComponent.prototype.onDestroy = function () {
         };
-        AXBaseComponent.prototype.onOptionChanging = function (option) {
+        AXBaseComponent.prototype._onOptionChanging = function (option) {
             return option === null || option === void 0 ? void 0 : option.value;
         };
-        AXBaseComponent.prototype.onOptionChanged = function (option) {
+        AXBaseComponent.prototype._onOptionChanged = function (option) {
+        };
+        AXBaseComponent.prototype._setOption = function (option) {
+            var oldValue = this[option.name];
+            var newValue = this._onOptionChanging({ name: option.name, value: option.value });
+            //TODO : check real changes
+            if (oldValue != newValue) {
+                if (option.beforeCallback)
+                    option.beforeCallback();
+                this["_" + option.name] = option.value;
+                this._onOptionChanged({ name: option.name, newValue: newValue, oldValue: oldValue });
+                var emitter = this[option.name + "Change"];
+                if (emitter)
+                    emitter.emit(newValue);
+                if (option.afterCallback)
+                    option.afterCallback();
+            }
         };
         return AXBaseComponent;
     }());
@@ -453,10 +469,9 @@
     var BASE_OUTPUT = [];
 
     function _ButtonComponentMixin(Base) {
-        var _color, _look, _toggleable, _selected, _a;
-        return _a = /** @class */ (function (_super) {
-            __extends(_a, _super);
-            function _a() {
+        return /** @class */ (function (_super) {
+            __extends(class_1, _super);
+            function class_1() {
                 var args = [];
                 for (var _i = 0; _i < arguments.length; _i++) {
                     args[_i] = arguments[_i];
@@ -475,95 +490,92 @@
                 */
                 _this.cancelBehavior = false;
                 _this.colorChange = new i0.EventEmitter();
-                _color.set(_this, 'primary');
+                _this._color = 'primary';
                 _this.lookChange = new i0.EventEmitter();
-                _look.set(_this, null);
+                _this._look = null;
                 _this.toggleableChange = new i0.EventEmitter();
-                _toggleable.set(_this, false);
+                _this._toggleable = false;
                 _this.selectedChange = new i0.EventEmitter();
-                _selected.set(_this, false);
+                _this._selected = false;
                 return _this;
             }
-            Object.defineProperty(_a.prototype, "color", {
+            Object.defineProperty(class_1.prototype, "color", {
                 /**
                 *  Predefined color schemes
                 */
                 get: function () {
-                    return __classPrivateFieldGet(this, _color);
+                    return this._color;
                 },
                 set: function (value) {
-                    value = this.onOptionChanging({ name: 'color', value: value });
-                    if (value != __classPrivateFieldGet(this, _color)) {
-                        var oldValue = this.color;
-                        __classPrivateFieldSet(this, _color, value);
-                        this.colorChange.emit(value);
-                        this.onOptionChanged({ name: 'color', oldValue: oldValue, newValue: value });
-                        this._cdr.markForCheck();
-                    }
+                    var _this = this;
+                    this._setOption({
+                        name: 'color',
+                        value: value,
+                        afterCallback: function () {
+                            _this._cdr.markForCheck();
+                        }
+                    });
                 },
                 enumerable: false,
                 configurable: true
             });
-            Object.defineProperty(_a.prototype, "look", {
+            Object.defineProperty(class_1.prototype, "look", {
                 /**
                 *  Predefined look schemes
                 */
                 get: function () {
-                    return __classPrivateFieldGet(this, _look);
+                    return this._look;
                 },
                 set: function (value) {
-                    value = this.onOptionChanging({ name: 'look', value: value });
-                    if (value != __classPrivateFieldGet(this, _look)) {
-                        var oldValue = this.color;
-                        __classPrivateFieldSet(this, _look, value);
-                        this.lookChange.emit(value);
-                        this.onOptionChanged({ name: 'look', oldValue: oldValue, newValue: value });
-                        this._cdr.markForCheck();
-                    }
+                    var _this = this;
+                    this._setOption({
+                        name: 'look',
+                        value: value,
+                        afterCallback: function () {
+                            _this._cdr.markForCheck();
+                        }
+                    });
                 },
                 enumerable: false,
                 configurable: true
             });
-            Object.defineProperty(_a.prototype, "toggleable", {
+            Object.defineProperty(class_1.prototype, "toggleable", {
                 /**
                 *  Provides visual styling that indicates if the Button is active
                 */
                 get: function () {
-                    return __classPrivateFieldGet(this, _toggleable);
+                    return this._toggleable;
                 },
                 set: function (value) {
-                    value = this.onOptionChanging({ name: 'toggleable', value: value });
-                    if (value != __classPrivateFieldGet(this, _toggleable)) {
-                        var oldValue = this.toggleable;
-                        __classPrivateFieldSet(this, _toggleable, value);
-                        this.toggleableChange.emit(value);
-                        this.onOptionChanged({ name: 'toggleable', oldValue: oldValue, newValue: value });
-                    }
+                    this._setOption({
+                        name: 'toggleable',
+                        value: value
+                    });
                 },
                 enumerable: false,
                 configurable: true
             });
-            Object.defineProperty(_a.prototype, "selected", {
+            Object.defineProperty(class_1.prototype, "selected", {
                 /**
                 *  Indicates if the Button is selected or not
                 */
                 get: function () {
-                    return __classPrivateFieldGet(this, _selected);
+                    return this._selected;
                 },
                 set: function (value) {
-                    value = this.onOptionChanging({ name: 'selected', value: value });
-                    if (value != __classPrivateFieldGet(this, _selected)) {
-                        var oldValue = this.selected;
-                        __classPrivateFieldSet(this, _selected, value);
-                        this.selectedChange.emit(value);
-                        this._cdr.markForCheck();
-                        this.onOptionChanged({ name: 'selected', oldValue: oldValue, newValue: value });
-                    }
+                    var _this = this;
+                    this._setOption({
+                        name: 'selected',
+                        value: value,
+                        afterCallback: function () {
+                            _this._cdr.markForCheck();
+                        }
+                    });
                 },
                 enumerable: false,
                 configurable: true
             });
-            _a.prototype._onInternalViewInit = function () {
+            class_1.prototype._onInternalViewInit = function () {
                 var _this = this;
                 _super.prototype._onInternalViewInit.call(this);
                 if (this.submitBehavior) {
@@ -572,10 +584,10 @@
                     }, 0);
                 }
             };
-            _a.prototype._onInternalDestroy = function () {
+            class_1.prototype._onInternalDestroy = function () {
                 _super.prototype._onInternalDestroy.call(this);
             };
-            Object.defineProperty(_a.prototype, "_classes", {
+            Object.defineProperty(class_1.prototype, "_classes", {
                 get: function () {
                     var cssClasses = {
                         'ax-button-icon': !this.text,
@@ -588,13 +600,8 @@
                 enumerable: false,
                 configurable: true
             });
-            return _a;
-        }(Base)),
-            _color = new WeakMap(),
-            _look = new WeakMap(),
-            _toggleable = new WeakMap(),
-            _selected = new WeakMap(),
-            _a;
+            return class_1;
+        }(Base));
     }
     var BUTTON_INPUTS = [
         'text',
@@ -762,7 +769,6 @@
     }
 
     function _DropdownComponenetMixin(Base) {
-        var _readonly;
         var Mixin = /** @class */ (function (_super) {
             __extends(Mixin, _super);
             function Mixin() {
@@ -771,18 +777,13 @@
                     args[_i] = arguments[_i];
                 }
                 var _this = _super.apply(this, __spreadArray([], __read(args))) || this;
-                _readonly.set(_this, false);
                 _this.fitParent = true;
+                _this.readonly = false;
                 _this.onOpened = new i0.EventEmitter();
                 _this.onClosed = new i0.EventEmitter();
+                _this.position = [];
                 return _this;
             }
-            Object.defineProperty(Mixin.prototype, "readonly", {
-                get: function () { return __classPrivateFieldGet(this, _readonly); },
-                set: function (value) { __classPrivateFieldSet(this, _readonly, coercion.coerceBooleanProperty(value)); },
-                enumerable: false,
-                configurable: true
-            });
             Mixin.prototype._emitOnOpenedEvent = function () {
                 //** call from interactive mixin **//
                 //(this as any).focus();
@@ -793,17 +794,81 @@
                 });
             };
             Mixin.prototype._emitOnClosedEvent = function () {
-                this.focus();
                 this.onClosed.emit({
                     component: this,
                     htmlElement: this._getHostElement()
                 });
             };
+            Mixin.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 _b;
+                    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
+                            }
+                        ];
+                        (_b = _this.position).push.apply(_b, __spreadArray([], __read(list)));
+                    }
+                }, 500);
+            };
+            Mixin.prototype.toggle = function () {
+                if (this['disabled'] !== true) {
+                    this.popover.toggle();
+                }
+            };
+            Mixin.prototype.close = function () {
+                if (!this.isOpen || this['disabled']) {
+                    return;
+                }
+                this.popover.close();
+                this._emitOnClosedEvent();
+            };
+            Mixin.prototype.open = function () {
+                if (this.isOpen || this['disabled']) {
+                    return;
+                }
+                this.popover.open();
+                this._emitOnOpenedEvent();
+            };
+            Object.defineProperty(Mixin.prototype, "isOpen", {
+                get: function () {
+                    var _a;
+                    return (_a = this.popover) === null || _a === void 0 ? void 0 : _a.isOpen;
+                },
+                enumerable: false,
+                configurable: true
+            });
             return Mixin;
         }(Base));
-        _readonly = new WeakMap();
         return Mixin;
-    }
+    }
+    var DROPDOWN_INPUTS = [
+        'isOpen',
+        'fitParent',
+        'dropdownWidth',
+        'position'
+    ];
+    var DROPDOWN_OUTPUT = ['onOpened', 'onClosed'];
 
     function _InteractiveComponenetMixin(Base) {
         var _disabled, _tabIndex;
@@ -838,11 +903,11 @@
                 */
                 get: function () { return __classPrivateFieldGet(this, _disabled); },
                 set: function (value) {
-                    value = this.onOptionChanging({ name: 'disabled', value: value });
+                    value = this._onOptionChanging({ name: 'disabled', value: value });
                     if (value != this.disabled) {
                         var oldValue = this.disabled;
                         __classPrivateFieldSet(this, _disabled, coercion.coerceBooleanProperty(value));
-                        this.onOptionChanged({ name: 'disabled', oldValue: oldValue, newValue: value });
+                        this._onOptionChanged({ name: 'disabled', oldValue: oldValue, newValue: value });
                         this._cdr.markForCheck();
                     }
                 },
@@ -1191,7 +1256,7 @@
                     return __classPrivateFieldGet(this, _value);
                 },
                 set: function (v) {
-                    v = this._onValueChanging(v);
+                    v = this._onInternalValueChanging(v);
                     if (!this._isInited || this.debounceTime == 0) {
                         this._setValue(v);
                     }
@@ -1212,6 +1277,11 @@
                 });
                 this._onValueChanged(oldValue, __classPrivateFieldGet(this, _value));
             };
+            _a.prototype._onInternalValueChanging = function (value) {
+                if (this.readonly)
+                    return this.value;
+                return this._onValueChanging(value);
+            };
             _a.prototype._onValueChanging = function (value) {
                 return value;
             };
@@ -1386,7 +1456,7 @@
     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 AXCalendarComponentMixin = _ClickableComponenetMixin(_InteractiveComponenetMixin(_ValueComponenetMixin(AXBaseComponent)));
+    var AXBaseDropdownMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_DropdownComponenetMixin(AXBaseComponent)));
 
     /**
     *  Contains native event
@@ -2081,7 +2151,7 @@
                 return this._selection;
             },
             set: function (value) {
-                value = this.onOptionChanging({ name: 'selection', value: value });
+                value = this._onOptionChanging({ name: 'selection', value: value });
                 var oldValue = this.selection;
                 if (value != oldValue) {
                     this._selection = value;
@@ -2100,7 +2170,7 @@
                 return this._color;
             },
             set: function (value) {
-                value = this.onOptionChanging({ name: 'color', value: value });
+                value = this._onOptionChanging({ name: 'color', value: value });
                 var oldValue = this.color;
                 if (value != oldValue) {
                     this._color = value;
@@ -2119,7 +2189,7 @@
                 return this._look;
             },
             set: function (value) {
-                value = this.onOptionChanging({ name: 'look', value: value });
+                value = this._onOptionChanging({ name: 'look', value: value });
                 var oldValue = this.look;
                 if (value != oldValue) {
                     this._look = value;
@@ -2428,100 +2498,156 @@
                     }]
             }] });
 
-    var AXCalendarComponent = /** @class */ (function (_super) {
-        __extends(AXCalendarComponent, _super);
-        function AXCalendarComponent(elementRef, cdr) {
+    var AXCalendarBaseComponent = /** @class */ (function (_super) {
+        __extends(AXCalendarBaseComponent, _super);
+        function AXCalendarBaseComponent(elementRef, cdr) {
             var _this = _super.call(this, elementRef, cdr) || this;
-            _this.cdr = cdr;
-            _this._today = new i2.AXDateTime(new Date());
-            _this._navText = '';
-            _this._todayText = '';
-            _this._slots = [];
+            _this.activeViewChange = new i0.EventEmitter();
             _this._activeView = 'days';
             _this.depthChange = new i0.EventEmitter();
             _this._depth = 'days';
+            _this.minChange = new i0.EventEmitter();
+            _this.maxChange = new i0.EventEmitter();
+            _this.disabledDatesChange = new i0.EventEmitter();
+            _this.holidayDatesChange = new i0.EventEmitter();
             return _this;
         }
-        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('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", {
+        Object.defineProperty(AXCalendarBaseComponent.prototype, "activeView", {
             get: function () {
                 return this._activeView;
             },
             set: function (v) {
-                this._activeView = v;
-                this._genearteSlots();
+                this._setOption({ name: 'activeView', value: v });
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(AXCalendarComponent.prototype, "depth", {
+        Object.defineProperty(AXCalendarBaseComponent.prototype, "depth", {
             get: function () {
                 return this._depth;
             },
             set: function (v) {
-                this._depth = v;
-                this._activeView = v;
-                this.depthChange.emit(v);
-                this._genearteSlots();
+                var _this = this;
+                this._setOption({
+                    name: 'depth',
+                    value: v,
+                    beforeCallback: function () {
+                        _this._activeView = v;
+                    }
+                });
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(AXCalendarComponent.prototype, "min", {
+        Object.defineProperty(AXCalendarBaseComponent.prototype, "min", {
             get: function () {
                 return this._min;
             },
             set: function (v) {
-                this._min = v;
+                this._setOption({ name: 'min', value: v });
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(AXCalendarComponent.prototype, "max", {
+        Object.defineProperty(AXCalendarBaseComponent.prototype, "max", {
             get: function () {
                 return this._max;
             },
             set: function (v) {
-                this._max = v;
+                this._setOption({ name: 'max', value: v });
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(AXCalendarComponent.prototype, "disabledDates", {
+        Object.defineProperty(AXCalendarBaseComponent.prototype, "disabledDates", {
             get: function () {
                 return this._disabledDates;
             },
             set: function (v) {
-                this._disabledDates = v;
+                this._setOption({ name: 'disabledDates', value: v });
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(AXCalendarComponent.prototype, "holidayDates", {
+        Object.defineProperty(AXCalendarBaseComponent.prototype, "holidayDates", {
             get: function () {
                 return this._holidayDates;
             },
             set: function (v) {
-                this._holidayDates = v;
+                this._setOption({ name: 'holidayDates', value: v });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return AXCalendarBaseComponent;
+    }(AXBaseComponent));
+    AXCalendarBaseComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCalendarBaseComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    AXCalendarBaseComponent.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCalendarBaseComponent });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXCalendarBaseComponent, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { activeViewChange: [{
+                    type: i0.Output
+                }], activeView: [{
+                    type: i0.Input
+                }], depthChange: [{
+                    type: i0.Output
+                }], depth: [{
+                    type: i0.Input
+                }], minChange: [{
+                    type: i0.Output
+                }], min: [{
+                    type: i0.Input
+                }], maxChange: [{
+                    type: i0.Output
+                }], max: [{
+                    type: i0.Input
+                }], disabledDatesChange: [{
+                    type: i0.Output
+                }], disabledDates: [{
+                    type: i0.Input
+                }], holidayDatesChange: [{
+                    type: i0.Output
+                }], holidayDates: [{
+                    type: i0.Input
+                }] } });
+    var CALENDAR_INPUTS = [
+        'depth',
+        'activeView',
+        'min',
+        'max',
+        'disabledDates',
+        'holidayDates',
+    ];
+    var CALENDAR_OUTPUTS = ['depthChange'];
+
+    var AXCalendarComponentMixin = _ClickableComponenetMixin(_InteractiveComponenetMixin(_ValueComponenetMixin(AXCalendarBaseComponent)));
+    var AXCalendarComponent = /** @class */ (function (_super) {
+        __extends(AXCalendarComponent, _super);
+        function AXCalendarComponent(elementRef, cdr) {
+            var _this = _super.call(this, elementRef, cdr) || this;
+            _this.cdr = cdr;
+            _this._today = new i2.AXDateTime(new Date());
+            _this._navText = '';
+            _this._todayText = '';
+            _this._slots = [];
+            return _this;
+        }
+        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('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
@@ -2647,6 +2773,11 @@
             else if (this.activeView == 'months')
                 this.activeView = 'years';
         };
+        AXCalendarComponent.prototype._onOptionChanged = function (option) {
+            if (option.name == 'depth' || option.name == 'activeView') {
+                this._genearteSlots();
+            }
+        };
         AXCalendarComponent.prototype._onValueChanged = function (oldValue, newValue) {
             this._genearteSlots();
         };
@@ -2688,7 +2819,7 @@
         });
         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') {
@@ -2711,32 +2842,18 @@
         return AXCalendarComponent;
     }(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: { 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: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }], 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", depth: "depth", activeView: "activeView", 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 class=\"dark:ax-text-danger\" [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: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__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: __spreadArray(__spreadArray([], __read(VALUE_INPUTS)), __read(INTERACTIVE_INPUTS)),
-                        outputs: __spreadArray(__spreadArray([], __read(VALUE_OUTPUT)), __read(INTERACTIVE_OUTPUT)),
+                        inputs: __spreadArray(__spreadArray(__spreadArray([], __read(VALUE_INPUTS)), __read(INTERACTIVE_INPUTS)), __read(CALENDAR_INPUTS)),
+                        outputs: __spreadArray(__spreadArray(__spreadArray([], __read(VALUE_OUTPUT)), __read(INTERACTIVE_OUTPUT)), __read(CALENDAR_OUTPUTS)),
                         encapsulation: i0.ViewEncapsulation.None,
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { activeView: [{
-                    type: i0.Input
-                }], 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: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { __hostClass: [{
                     type: i0.HostBinding,
                     args: ['class']
                 }] } });
@@ -3315,12 +3432,12 @@
         return AXFormHintComponent;
     }(AXBaseComponentMixin));
     AXFormHintComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXFormHintComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXFormHintComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXFormHintComponent, selector: "ax-form-hint", usesInheritance: true, ngImport: i0__namespace, template: ' <p class="ax-text-gray-400 ax-text-xs ax-py-1"><ng-content></ng-content></p>', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    AXFormHintComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXFormHintComponent, selector: "ax-form-hint", usesInheritance: true, ngImport: i0__namespace, template: ' <p class="ax-text-light-400 ax-text-xs ax-py-1 dark:ax-text-light-300"><ng-content></ng-content></p>', 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: AXFormHintComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ax-form-hint',
-                        template: ' <p class="ax-text-gray-400 ax-text-xs ax-py-1"><ng-content></ng-content></p>',
+                        template: ' <p class="ax-text-light-400 ax-text-xs ax-py-1 dark:ax-text-light-300"><ng-content></ng-content></p>',
                         encapsulation: i0.ViewEncapsulation.None,
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
@@ -3441,13 +3558,12 @@
         }
         AXCheckBoxComponent.prototype.onInit = function () {
             _super.prototype.onInit.call(this);
-            debugger;
+            ;
             if (!this.allowNull && this.value == null) {
                 this.value = false;
             }
         };
         AXCheckBoxComponent.prototype._onValueChanging = function (value) {
-            debugger;
             if (this.allowNull && value == null) {
                 this._stateIndeterminate = true;
             }
@@ -3458,7 +3574,7 @@
             return value;
         };
         AXCheckBoxComponent.prototype._handleOnClickEvent = function (e) {
-            debugger;
+            ;
             if (this.readonly || this.disabled) {
                 e.preventDefault();
                 e.stopPropagation();
@@ -3840,6 +3956,134 @@
                     args: ['document:keydown', ['$event']]
                 }] } });
 
+    var AXBaseDatePickerMixin = _InteractiveComponenetMixin(_DropdownComponenetMixin(_ValueComponenetMixin(_TextboxComponenetMixin(AXCalendarBaseComponent))));
+    var AXDatePickerComponent = /** @class */ (function (_super) {
+        __extends(AXDatePickerComponent, _super);
+        function AXDatePickerComponent(_elementRef, _cdr) {
+            var _this = _super.call(this, _elementRef, _cdr) || this;
+            _this.formatChange = new i0.EventEmitter();
+            _this._format = 'YYYY-MM-dd';
+            _this._target = _this._getHostElement();
+            return _this;
+        }
+        Object.defineProperty(AXDatePickerComponent.prototype, "format", {
+            get: function () {
+                return this._format;
+            },
+            set: function (v) {
+                this._setOption({
+                    name: 'format',
+                    value: v
+                });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AXDatePickerComponent.prototype._handleArrowClickEvent = function (e) {
+            this.toggle();
+        };
+        AXDatePickerComponent.prototype._onValueChanged = function (oldValue, newValue) {
+            this.displayText = newValue ? i2.AXDateTime.convert(newValue).format(this._format) : null;
+            this.close();
+        };
+        AXDatePickerComponent.prototype._handleOnKeydownEvent = function (e) {
+            var _this = this;
+            var _a, _b;
+            var ignore = function () {
+                e.preventDefault();
+                e.stopPropagation();
+            };
+            var nums = Array(10).fill(0).map(function (v, i) { return i.toString(); });
+            var chars = ['Backspace', 'ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Tab', 'Enter'];
+            var input = e.target;
+            var key = (e.key);
+            var valStr = input.value;
+            var sStart = input.selectionStart;
+            var sEnd = input.selectionEnd;
+            var dateVal = new i2.AXDateTime(this.value);
+            // //
+            if (!__spreadArray(__spreadArray([], __read(nums)), __read(chars)).includes(key)) {
+                ignore();
+            }
+            if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+                var re = /[a-zA-Z0-9]+/ig;
+                var next = Array.from(valStr.substr(sEnd).matchAll(re));
+                var prev = Array.from(valStr.substring(0, sStart).matchAll(re));
+                ignore();
+                this._highlightPart(input, (e.key === 'ArrowRight' ? (sEnd + (((_a = next[0]) === null || _a === void 0 ? void 0 : _a.index) || 0)) : ((_b = prev[prev.length - 1]) === null || _b === void 0 ? void 0 : _b.index)));
+            }
+            else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                var re = /[a-zA-Z0-9]+/ig;
+                var sign = e.key === 'ArrowUp' ? +1 : -1;
+                var parts = Array.from(this.format.matchAll(re));
+                var word_1 = valStr.substring(sStart, sEnd);
+                var part = parts[Array.from(valStr.matchAll(re)).findIndex(function (c) { return c[0] == word_1; })];
+                if (part) {
+                    switch (part[0]) {
+                        case 'dd':
+                        case 'DD':
+                            this.value = dateVal.add('day', sign).date;
+                            break;
+                        case 'mm':
+                        case 'MMM':
+                        case 'MMMM':
+                            this.value = dateVal.add('month', sign).date;
+                            break;
+                        case 'yy':
+                        case 'YYYY':
+                            this.value = dateVal.add('year', sign).date;
+                            break;
+                    }
+                    setTimeout(function () {
+                        _this._highlightPart(input, sEnd - 1);
+                    }, Math.max(10, this.debounceTime));
+                }
+                ignore();
+            }
+            else if (e.key == 'Backspace') {
+                if (this.allowNull) {
+                    this.value = null;
+                }
+                ignore();
+            }
+            // else if (nums.includes(key)) {
+            // }
+            // super._emitOnKeydownEvent(e);
+        };
+        AXDatePickerComponent.prototype._handleOnInputClickEvent = function (e) {
+            var input = e.target;
+            this._highlightPart(input);
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        AXDatePickerComponent.prototype._highlightPart = function (input, pos) {
+            var _c = i2.AXStringUtil.getWordBoundsAtPosition(input.value, pos != null ? pos : input.selectionStart), start = _c.start, end = _c.end;
+            input.setSelectionRange(start, end);
+        };
+        return AXDatePickerComponent;
+    }(AXBaseDatePickerMixin));
+    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-date-picker", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", placeholder: "placeholder", maxLength: "maxLength", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", format: "format" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange", formatChange: "formatChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\"\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)\" (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\"  color=\"light\" look=\"blank\"\r\n    (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane\" [style.min-width.px]=\"dropdownWidth\">\r\n        <ax-calendar \r\n            [disabled]=\"disabled\" \r\n            [readonly]=\"readonly\" \r\n            [(value)]=\"value\"\r\n            (onValueChanged)=\"_emitOnValueChangedEvent($event)\"\r\n            [min]=\"min\"\r\n            [min]=\"max\"\r\n            [disabledDates]=\"disabledDates\"\r\n            [holidayDates]=\"holidayDates\"\r\n            [depth]=\"depth\"\r\n            >\r\n\r\n        </ax-calendar>\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"] }, { type: AXCalendarComponent, selector: "ax-calendar", inputs: ["readonly", "allowNull", "value", "debounceTime", "name", "disabled", "tabIndex", "depth", "activeView", "min", "max", "disabledDates", "holidayDates"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange"] }], 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.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: AXDatePickerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ax-date-picker',
+                        templateUrl: './datepicker.component.html',
+                        inputs: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(DROPDOWN_INPUTS)), __read(INTERACTIVE_INPUTS)), __read(VALUE_INPUTS)), __read(TEXTBOX_INPUTS)), __read(CALENDAR_INPUTS)),
+                        outputs: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(DROPDOWN_OUTPUT)), __read(INTERACTIVE_OUTPUT)), __read(VALUE_OUTPUT)), __read(TEXTBOX_OUTPUT)), __read(CALENDAR_OUTPUTS)),
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        encapsulation: i0.ViewEncapsulation.None,
+                        host: { class: 'ax-editor-container ax-drop-down' }
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { popover: [{
+                    type: i0.ViewChild,
+                    args: [AXPopoverComponent]
+                }], formatChange: [{
+                    type: i0.Output
+                }], format: [{
+                    type: i0.Input
+                }] } });
+
     var AXPopoverModule = /** @class */ (function () {
         function AXPopoverModule() {
         }
@@ -3858,193 +4102,105 @@
                     }]
             }] });
 
-    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;
+    var AXInputMaskComponent = /** @class */ (function () {
+        function AXInputMaskComponent() {
+            this.showMaskTyped = false;
+            this.clearIfNotMatch = false;
         }
-        AXBaseDropDownComponent.prototype._emitOnOpenedEvent = function () {
-            //** call from interactive mixin **//
-            //(this as any).focus();
-            //
-            this.onOpened.emit({
-                component: this,
-                htmlElement: this._getHostElement()
-            });
-        };
-        AXBaseDropDownComponent.prototype._emitOnClosedEvent = function () {
-            this.onClosed.emit({
-                component: this,
-                htmlElement: this._getHostElement()
-            });
-        };
-        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);
-        };
-        AXBaseDropDownComponent.prototype.toggle = function () {
-            if (this.disabled !== true) {
-                this.popover.toggle();
-            }
-        };
-        AXBaseDropDownComponent.prototype.close = function () {
-            if (!this.isOpen || this.disabled) {
-                return;
-            }
-            this.popover.close();
-            this._emitOnClosedEvent();
-        };
-        AXBaseDropDownComponent.prototype.open = function () {
-            if (this.isOpen || this.disabled) {
-                return;
-            }
-            this.popover.open();
-            this._emitOnOpenedEvent();
-        };
-        Object.defineProperty(AXBaseDropDownComponent.prototype, "isOpen", {
+        Object.defineProperty(AXInputMaskComponent.prototype, "prefix", {
             get: function () {
-                return this.popover.isOpen;
+                return this._prefix || '';
+            },
+            set: function (v) {
+                this._prefix = v;
             },
             enumerable: false,
             configurable: true
         });
-        return AXBaseDropDownComponent;
-    }(AXBaseDropdownMixin));
-    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: [{
+        Object.defineProperty(AXInputMaskComponent.prototype, "suffix", {
+            get: function () {
+                return this._suffix || '';
+            },
+            set: function (v) {
+                this._suffix = v;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return AXInputMaskComponent;
+    }());
+    AXInputMaskComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXInputMaskComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AXInputMaskComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXInputMaskComponent, selector: "ax-input-mask", inputs: { prefix: "prefix", suffix: "suffix", showMaskTyped: "showMaskTyped", clearIfNotMatch: "clearIfNotMatch", mask: "mask" }, 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: AXInputMaskComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ax-input-mask',
+                        template: '',
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        encapsulation: i0.ViewEncapsulation.None,
+                    }]
+            }], propDecorators: { prefix: [{
                     type: i0.Input
-                }], dropdownWidth: [{
+                }], suffix: [{
                     type: i0.Input
-                }], onOpened: [{
-                    type: i0.Output
-                }], onClosed: [{
-                    type: i0.Output
-                }], position: [{
+                }], showMaskTyped: [{
+                    type: i0.Input
+                }], clearIfNotMatch: [{
+                    type: i0.Input
+                }], mask: [{
                     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;
+    var COMPONENT$e = [AXInputMaskComponent];
+    var MODULES$e = [i1.CommonModule, i1$3.NgxMaskModule.forRoot()];
+    var AXInputMaskModule = /** @class */ (function () {
+        function AXInputMaskModule() {
         }
-        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,
+        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$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$e))] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXInputMaskModule, decorators: [{
+                type: i0.NgModule,
                 args: [{
-                        selector: 'ax-drop-down',
-                        templateUrl: 'dropdown.component.html',
-                        inputs: ['disabled', 'tabIndex', 'size', 'fitParent'],
-                        encapsulation: i0.ViewEncapsulation.None,
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        declarations: __spreadArray([], __read(COMPONENT$e)),
+                        imports: __spreadArray([], __read(MODULES$e)),
+                        exports: __spreadArray([], __read(COMPONENT$e)),
+                        providers: [],
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { popover: [{
-                    type: i0.ViewChild,
-                    args: [AXPopoverComponent]
-                }] } });
+            }] });
 
-    var AXDatepickerComponent = /** @class */ (function (_super) {
-        __extends(AXDatepickerComponent, _super);
-        function AXDatepickerComponent(elementRef, cdr) {
-            var _this = _super.call(this, elementRef, cdr) || this;
-            _this.dayItems = new Array(32);
-            _this.yearItems = [1990];
-            _this.monthItems = [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-                'August',
-                'September',
-                'October',
-                'November',
-                'December',
-            ];
-            _this._showDays = true;
-            _this._showsMonths = false;
-            _this._showYears = false;
-            _this.createYears();
-            return _this;
+    /**
+     * The Textbox is a component which detects user interaction and triggers a corresponding event
+     *
+     * @category Components
+     */
+    var AXTextBoxComponent = /** @class */ (function (_super) {
+        __extends(AXTextBoxComponent, _super);
+        /**
+        *  @ignore
+        */
+        function AXTextBoxComponent(elementRef, cdr) {
+            return _super.call(this, elementRef, cdr) || this;
         }
-        AXDatepickerComponent.prototype.showMonths = function () {
-            this._showDays = false;
-            this._showYears = false;
-            this._showsMonths = true;
-        };
-        AXDatepickerComponent.prototype.showYears = function () {
-            this._showsMonths = false;
-            this._showDays = false;
-            this._showYears = true;
-        };
-        AXDatepickerComponent.prototype.showDays = function () {
-            this._showYears = false;
-            this._showsMonths = false;
-            this._showDays = true;
-        };
-        AXDatepickerComponent.prototype.createYears = function () {
-            var number = 1990;
-            for (var i = 0; i < 40; i++) {
-                number = number + 1;
-                this.yearItems.push(number);
-            }
-        };
-        return AXDatepickerComponent;
+        Object.defineProperty(AXTextBoxComponent.prototype, "hostClass", {
+            //TODO: prefix suffix text
+            get: function () {
+                return this.cssClass + " ax-" + this.size;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return AXTextBoxComponent;
     }(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-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: [{
+    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 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: i1__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: [{
-                        selector: 'ax-date-picker',
-                        templateUrl: './datepicker.component.html',
+                        selector: 'ax-text-box',
+                        templateUrl: 'textbox.component.html',
                         inputs: __spreadArray([
                             'disabled',
                             'readonly',
@@ -4058,128 +4214,88 @@
                             '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 AXDropdownPanelComponent = /** @class */ (function (_super) {
-        __extends(AXDropdownPanelComponent, _super);
-        function AXDropdownPanelComponent(elementRef, cdr, _parent) {
-            var _this = _super.call(this, elementRef, cdr) || this;
-            _this._parent = _parent;
-            _this.onItemClick = new i0.EventEmitter();
-            _this._needBorder = false;
-            _this._subs = [];
-            _this._target = _this._parent._getHostElement();
-            return _this;
-        }
-        Object.defineProperty(AXDropdownPanelComponent.prototype, "items", {
-            get: function () {
-                return this._items || [];
-            },
-            set: function (v) {
-                this._items = v;
-                this._cdr.markForCheck();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        AXDropdownPanelComponent.prototype._getAllButtons = function () {
-            return __spreadArray(__spreadArray([], __read(Array.from(this._viewButtons))), __read(Array.from(this._contentButtons)));
-        };
-        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 () {
-            this._subs.forEach(function (s) {
-                s === null || s === void 0 ? void 0 : s.unsubscribe();
-            });
-        };
-        AXDropdownPanelComponent.prototype._emitOnItemClickEvent = function (e, item) {
-            this.onItemClick.emit({
-                component: this,
-                htmlElement: this._getHostElement(),
-                nativeEvent: e.nativeEvent,
-                name: item.name,
-                data: item.data,
-            });
-        };
-        AXDropdownPanelComponent.prototype._handleOnItemClick = function (e) {
-            this.close();
-            this._emitOnItemClickEvent(e, e.component);
-        };
-        return AXDropdownPanelComponent;
-    }(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: 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: AXDropdownPanelComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'ax-dropdown-panel',
-                        templateUrl: './dropdown-panel.component.html',
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        encapsulation: i0.ViewEncapsulation.None,
+                        host: { class: 'ax-text-box ax-editor-container' },
                     }]
-            }], ctorParameters: function () {
-            return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: AXButtonComponent, decorators: [{
-                            type: i0.Optional
-                        }] }];
-        }, propDecorators: { _contentButtons: [{
-                    type: i0.ContentChildren,
-                    args: [AXButtonItemComponent]
-                }], _viewButtons: [{
-                    type: i0.ViewChildren,
-                    args: [AXButtonItemComponent]
-                }], onItemClick: [{
-                    type: i0.Output
-                }], popover: [{
-                    type: i0.ViewChild,
-                    args: [AXPopoverComponent]
-                }], items: [{
-                    type: i0.Input
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { _contentMask: [{
+                    type: i0.ContentChild,
+                    args: [AXInputMaskComponent]
+                }], hostClass: [{
+                    type: i0.HostBinding,
+                    args: ['class']
                 }] } });
 
-    var AXDropdownModule = /** @class */ (function () {
-        function AXDropdownModule() {
+    var AXTextBoxModule = /** @class */ (function () {
+        function AXTextBoxModule() {
         }
-        return AXDropdownModule;
+        return AXTextBoxModule;
     }());
-    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, AXPopoverModule], 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, AXPopoverModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDropdownModule, decorators: [{
+    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,
+            i3.FormsModule,
+            AXButtonModule,
+            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,
+                i3.FormsModule,
+                AXButtonModule,
+                AXEditorDecoratorModule,
+                AXIconModule,
+                i1$3.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, AXButtonModule, i1$2.OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule],
-                        exports: [AXDropdownComponent, AXDropdownPanelComponent],
-                        declarations: [AXDropdownComponent, AXDropdownPanelComponent],
+                        imports: [
+                            i1.CommonModule,
+                            i3.FormsModule,
+                            AXButtonModule,
+                            AXEditorDecoratorModule,
+                            AXIconModule,
+                            i1$3.NgxMaskModule.forChild()
+                        ],
+                        exports: [AXTextBoxComponent],
+                        declarations: [AXTextBoxComponent],
                         providers: [],
                     }]
             }] });
 
-    var COMPONENT$e = [AXDatepickerComponent];
-    var MODULES$e = [i1.CommonModule, AXCalendarModule, AXDropdownModule];
+    var COMPONENT$d = [AXDatePickerComponent];
+    var MODULES$d = [
+        i1.CommonModule,
+        AXCalendarModule,
+        AXTextBoxModule,
+        AXButtonModule,
+        AXPopoverModule,
+        AXEditorDecoratorModule,
+        AXIconModule,
+        i2.AXDateTimeModule,
+        i3.FormsModule
+    ];
     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$e))] });
+    AXDatepickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDatepickerModule, declarations: [AXDatePickerComponent], imports: [i1.CommonModule,
+            AXCalendarModule,
+            AXTextBoxModule,
+            AXButtonModule,
+            AXPopoverModule,
+            AXEditorDecoratorModule,
+            AXIconModule,
+            i2.AXDateTimeModule,
+            i3.FormsModule], 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$d))] });
     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$e)),
-                        imports: __spreadArray([], __read(MODULES$e)),
-                        exports: __spreadArray([], __read(COMPONENT$e)),
+                        declarations: __spreadArray([], __read(COMPONENT$d)),
+                        imports: __spreadArray([], __read(MODULES$d)),
+                        exports: __spreadArray([], __read(COMPONENT$d)),
                         providers: [],
                     }]
             }] });
@@ -4403,7 +4519,7 @@
         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$3.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: [{
@@ -4501,8 +4617,8 @@
                     args: ['axIsLoading']
                 }] } });
 
-    var COMPONENT$d = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
-    var MODULES$d = [i1.CommonModule, i1$2.OverlayModule, i1$1.PortalModule];
+    var COMPONENT$c = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
+    var MODULES$c = [i1.CommonModule, i1$2.OverlayModule, i1$1.PortalModule];
     var AXLoadingModule = /** @class */ (function () {
         function AXLoadingModule() {
             i2.AXConfig.set({
@@ -4517,13 +4633,13 @@
     }());
     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$d))] });
+    AXLoadingModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXLoadingModule, providers: [], imports: [__spreadArray([], __read(MODULES$c))] });
     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$d)),
-                        imports: __spreadArray([], __read(MODULES$d)),
-                        exports: __spreadArray([], __read(COMPONENT$d)),
+                        declarations: __spreadArray([], __read(COMPONENT$c)),
+                        imports: __spreadArray([], __read(MODULES$c)),
+                        exports: __spreadArray([], __read(COMPONENT$c)),
                         providers: [],
                     }]
             }], ctorParameters: function () { return []; } });
@@ -4916,7 +5032,7 @@
                 return this._isLoading;
             },
             set: function (v) {
-                debugger;
+                ;
                 this._isLoading = v;
                 if (this.pageContainer) {
                     this.pageContainer.isLoading = this.isLoading;
@@ -4968,8 +5084,8 @@
                     }]
             }] });
 
-    var COMPONENT$c = [AXDialogComponent];
-    var MODULES$c = [i1.CommonModule, i3$1.DragDropModule, i2$1.A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule];
+    var COMPONENT$b = [AXDialogComponent];
+    var MODULES$b = [i1.CommonModule, i3$1.DragDropModule, i2$1.A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule];
     var AXDialogModule = /** @class */ (function () {
         function AXDialogModule() {
         }
@@ -4977,13 +5093,13 @@
     }());
     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$c))] });
+    AXDialogModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDialogModule, providers: [], imports: [__spreadArray([], __read(MODULES$b))] });
     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$c)),
-                        imports: __spreadArray([], __read(MODULES$c)),
-                        exports: __spreadArray([], __read(COMPONENT$c)),
+                        declarations: __spreadArray([], __read(COMPONENT$b)),
+                        imports: __spreadArray([], __read(MODULES$b)),
+                        exports: __spreadArray([], __read(COMPONENT$b)),
                         providers: [],
                     }]
             }] });
@@ -5213,8 +5329,8 @@
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
-    var COMPONENT$b = [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent];
-    var MODULES$b = [i1.CommonModule];
+    var COMPONENT$a = [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent];
+    var MODULES$a = [i1.CommonModule];
     var AXDrawerModule = /** @class */ (function () {
         function AXDrawerModule() {
         }
@@ -5222,82 +5338,145 @@
     }());
     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$b))] });
+    AXDrawerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDrawerModule, providers: [], imports: [__spreadArray([], __read(MODULES$a))] });
     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$b)),
-                        imports: __spreadArray([], __read(MODULES$b)),
-                        exports: __spreadArray([], __read(COMPONENT$b)),
+                        declarations: __spreadArray([], __read(COMPONENT$a)),
+                        imports: __spreadArray([], __read(MODULES$a)),
+                        exports: __spreadArray([], __read(COMPONENT$a)),
                         providers: [],
                     }]
             }] });
 
-    var AXInputMaskComponent = /** @class */ (function () {
-        function AXInputMaskComponent() {
-            this.showMaskTyped = false;
-            this.clearIfNotMatch = false;
+    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;
         }
-        Object.defineProperty(AXInputMaskComponent.prototype, "prefix", {
-            get: function () {
-                return this._prefix || '';
-            },
-            set: function (v) {
-                this._prefix = v;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AXInputMaskComponent.prototype, "suffix", {
+        AXDropdownComponent.prototype._handleArrowClickEvent = function () {
+            this.toggle();
+        };
+        return AXDropdownComponent;
+    }(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 }], 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: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus" }, 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: __spreadArray(__spreadArray([], __read(DROPDOWN_INPUTS)), __read(INTERACTIVE_INPUTS)),
+                        outputs: __spreadArray(__spreadArray([], __read(DROPDOWN_OUTPUT)), __read(INTERACTIVE_OUTPUT)),
+                        encapsulation: i0.ViewEncapsulation.None,
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { popover: [{
+                    type: i0.ViewChild,
+                    args: [AXPopoverComponent]
+                }] } });
+
+    var AXDropdownPanelComponent = /** @class */ (function (_super) {
+        __extends(AXDropdownPanelComponent, _super);
+        function AXDropdownPanelComponent(elementRef, cdr, _parent) {
+            var _this = _super.call(this, elementRef, cdr) || this;
+            _this._parent = _parent;
+            _this.onItemClick = new i0.EventEmitter();
+            _this._needBorder = false;
+            _this._subs = [];
+            _this._target = _this._parent._getHostElement();
+            return _this;
+        }
+        Object.defineProperty(AXDropdownPanelComponent.prototype, "items", {
             get: function () {
-                return this._suffix || '';
+                return this._items || [];
             },
             set: function (v) {
-                this._suffix = v;
+                this._items = v;
+                this._cdr.markForCheck();
             },
             enumerable: false,
             configurable: true
         });
-        return AXInputMaskComponent;
-    }());
-    AXInputMaskComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXInputMaskComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AXInputMaskComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXInputMaskComponent, selector: "ax-input-mask", inputs: { prefix: "prefix", suffix: "suffix", showMaskTyped: "showMaskTyped", clearIfNotMatch: "clearIfNotMatch", mask: "mask" }, 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: AXInputMaskComponent, decorators: [{
+        AXDropdownPanelComponent.prototype._getAllButtons = function () {
+            return __spreadArray(__spreadArray([], __read(Array.from(this._viewButtons))), __read(Array.from(this._contentButtons)));
+        };
+        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 () {
+            this._subs.forEach(function (s) {
+                s === null || s === void 0 ? void 0 : s.unsubscribe();
+            });
+        };
+        AXDropdownPanelComponent.prototype._emitOnItemClickEvent = function (e, item) {
+            this.onItemClick.emit({
+                component: this,
+                htmlElement: this._getHostElement(),
+                nativeEvent: e.nativeEvent,
+                name: item.name,
+                data: item.data,
+            });
+        };
+        AXDropdownPanelComponent.prototype._handleOnItemClick = function (e) {
+            this.close();
+            this._emitOnItemClickEvent(e, e.component);
+        };
+        return AXDropdownPanelComponent;
+    }(AXBaseDropdownMixin));
+    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: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", items: "items" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", 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: 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: AXDropdownPanelComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'ax-input-mask',
-                        template: '',
+                        selector: 'ax-dropdown-panel',
+                        templateUrl: './dropdown-panel.component.html',
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         encapsulation: i0.ViewEncapsulation.None,
+                        inputs: __spreadArray([], __read(DROPDOWN_INPUTS)),
+                        outputs: __spreadArray([], __read(DROPDOWN_OUTPUT)),
                     }]
-            }], propDecorators: { prefix: [{
-                    type: i0.Input
-                }], suffix: [{
-                    type: i0.Input
-                }], showMaskTyped: [{
-                    type: i0.Input
-                }], clearIfNotMatch: [{
-                    type: i0.Input
-                }], mask: [{
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: AXButtonComponent, decorators: [{
+                            type: i0.Optional
+                        }] }];
+        }, propDecorators: { _contentButtons: [{
+                    type: i0.ContentChildren,
+                    args: [AXButtonItemComponent]
+                }], _viewButtons: [{
+                    type: i0.ViewChildren,
+                    args: [AXButtonItemComponent]
+                }], onItemClick: [{
+                    type: i0.Output
+                }], popover: [{
+                    type: i0.ViewChild,
+                    args: [AXPopoverComponent]
+                }], items: [{
                     type: i0.Input
                 }] } });
 
-    var COMPONENT$a = [AXInputMaskComponent];
-    var MODULES$a = [i1.CommonModule, i1$3.NgxMaskModule.forRoot()];
-    var AXInputMaskModule = /** @class */ (function () {
-        function AXInputMaskModule() {
+    var AXDropdownModule = /** @class */ (function () {
+        function AXDropdownModule() {
         }
-        return AXInputMaskModule;
+        return AXDropdownModule;
     }());
-    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$a))] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXInputMaskModule, decorators: [{
+    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, AXPopoverModule], 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, AXPopoverModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXDropdownModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: __spreadArray([], __read(COMPONENT$a)),
-                        imports: __spreadArray([], __read(MODULES$a)),
-                        exports: __spreadArray([], __read(COMPONENT$a)),
+                        imports: [i1.CommonModule, AXButtonModule, i1$2.OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule],
+                        exports: [AXDropdownComponent, AXDropdownPanelComponent],
+                        declarations: [AXDropdownComponent, AXDropdownPanelComponent],
                         providers: [],
                     }]
             }] });
@@ -5551,7 +5730,7 @@
         };
         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.ɵ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: i1__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,
@@ -5575,7 +5754,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: [{
@@ -5615,7 +5794,7 @@
     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,
             i3.FormsModule,
-            AXButtonModule, i1__namespace$3.NgxMaskModule], exports: [AXNumberBoxComponent] });
+            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$9))] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXNumberBoxModule, decorators: [{
                 type: i0.NgModule,
@@ -5813,7 +5992,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.NgZone }, { 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    </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    </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$3.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: [{
@@ -6202,7 +6381,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            <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", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: ["isOpen", "fitParent", "dropdownWidth", "position", "disabled", "tabIndex"], outputs: ["onOpened", "onClosed", "onBlur", "onFocus"] }, { 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", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__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: [{
@@ -6262,7 +6441,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", 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: 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 dark:ax-text-light-100\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container 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 dark:ax-text-light-100\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>", 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 });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXSelectionListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6586,7 +6765,7 @@
         });
         // @HostBinding('class')
         // private get __hostClass(): string {
-        //     debugger;
+        //     ;
         //     const classes: any = {
         //         'ax-state-active': this.active
         //     }
@@ -6704,7 +6883,7 @@
                 return this._portal;
             },
             set: function (v) {
-                //debugger;
+                //;
                 if (v) {
                     this._portal = v;
                     this._viewContainerRef.clear();
@@ -6863,7 +7042,7 @@
         };
         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.ɵ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: i1__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,
@@ -6876,7 +7055,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: [{
@@ -6906,7 +7085,7 @@
     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,
             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,
@@ -7245,97 +7424,6 @@
                     }]
             }] });
 
-    /**
-     * The Textbox is a component which detects user interaction and triggers a corresponding event
-     *
-     * @category Components
-     */
-    var AXTextBoxComponent = /** @class */ (function (_super) {
-        __extends(AXTextBoxComponent, _super);
-        /**
-        *  @ignore
-        */
-        function AXTextBoxComponent(elementRef, cdr) {
-            return _super.call(this, elementRef, cdr) || this;
-        }
-        Object.defineProperty(AXTextBoxComponent.prototype, "hostClass", {
-            //TODO: prefix suffix text
-            get: function () {
-                return this.cssClass + " ax-" + this.size;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        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 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$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 });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AXTextBoxComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'ax-text-box',
-                        templateUrl: 'textbox.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-text-box ax-editor-container' },
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { _contentMask: [{
-                    type: i0.ContentChild,
-                    args: [AXInputMaskComponent]
-                }], hostClass: [{
-                    type: i0.HostBinding,
-                    args: ['class']
-                }] } });
-
-    var AXTextBoxModule = /** @class */ (function () {
-        function AXTextBoxModule() {
-        }
-        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,
-            i3.FormsModule,
-            AXButtonModule,
-            AXEditorDecoratorModule,
-            AXIconModule, i1__namespace$3.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,
-                i3.FormsModule,
-                AXButtonModule,
-                AXEditorDecoratorModule,
-                AXIconModule,
-                i1$3.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,
-                            i3.FormsModule,
-                            AXButtonModule,
-                            AXEditorDecoratorModule,
-                            AXIconModule,
-                            i1$3.NgxMaskModule.forChild()
-                        ],
-                        exports: [AXTextBoxComponent],
-                        declarations: [AXTextBoxComponent],
-                        providers: [],
-                    }]
-            }] });
-
     // @dynamic
     var AXValidationRules = /** @class */ (function () {
         function AXValidationRules() {
@@ -7504,6 +7592,8 @@
     exports.AXBaseClickableMixin = AXBaseClickableMixin;
     exports.AXBaseComponent = AXBaseComponent;
     exports.AXBaseComponentMixin = AXBaseComponentMixin;
+    exports.AXBaseDatePickerMixin = AXBaseDatePickerMixin;
+    exports.AXBaseDropdownMixin = AXBaseDropdownMixin;
     exports.AXBaseItemButtonMixin = AXBaseItemButtonMixin;
     exports.AXBasePageComponent = AXBasePageComponent;
     exports.AXBaseSelectionDropdownMixin = AXBaseSelectionDropdownMixin;
@@ -7531,7 +7621,7 @@
     exports.AXCommonModule = AXCommonModule;
     exports.AXDataListComponent = AXDataListComponent;
     exports.AXDataListModule = AXDataListModule;
-    exports.AXDatepickerComponent = AXDatepickerComponent;
+    exports.AXDatePickerComponent = AXDatePickerComponent;
     exports.AXDatepickerModule = AXDatepickerModule;
     exports.AXDecoratorContentComponent = AXDecoratorContentComponent;
     exports.AXDecoratorPrefixComponent = AXDecoratorPrefixComponent;