@acorex/components 5.0.10 → 5.0.13

package/fesm2015/acorex-components.js

@@ -1,27 +1,27 @@
 import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import * as i0 from '@angular/core';
-import { Injectable, Inject, EventEmitter, Directive, NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, HostBinding, HostListener, ContentChildren, Optional, ViewChild, ContentChild, ElementRef, ViewChildren, TemplateRef } from '@angular/core';
+import { Injectable, Inject, EventEmitter, Directive, NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, HostBinding, HostListener, ContentChildren, Optional, ViewChild, ContentChild, ElementRef, TemplateRef, ViewChildren } from '@angular/core';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i2 from '@acorex/core';
-import { AXObjectUtil, AXDateTime, AXDateTimeRange, AXDateTimeModule, AXDrawingUtil, AXTranslator, AXConfig } from '@acorex/core';
+import { AXObjectUtil, AXDateTime, AXDateTimeRange, AXDateTimeModule, AXDrawingUtil, AXStringUtil, AXTranslator, AXConfig } from '@acorex/core';
 import { Subscription, Subject, fromEvent, merge, asyncScheduler, BehaviorSubject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, throttleTime, observeOn, finalize } from 'rxjs/operators';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i1$2 from '@angular/cdk/portal';
+import * as i1$3 from '@angular/cdk/portal';
 import { TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import _ from 'lodash';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayModule, OverlayContainer, Overlay } from '@angular/cdk/overlay';
+import * as i1$2 from 'ngx-mask';
+import { NgxMaskModule } from 'ngx-mask';
 import * as i2$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i3$1 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as i2$2 from '@angular/cdk/bidi';
-import * as i1$3 from 'ngx-mask';
-import { NgxMaskModule } from 'ngx-mask';
 import { trigger, transition, style, animate } from '@angular/animations';
 
 var _elementRef;
@@ -78,10 +78,26 @@ class AXBaseComponent {
     }
     onDestroy() {
     }
-    onOptionChanging(option) {
+    _onOptionChanging(option) {
         return option === null || option === void 0 ? void 0 : option.value;
     }
-    onOptionChanged(option) {
+    _onOptionChanged(option) {
+    }
+    _setOption(option) {
+        const oldValue = this[option.name];
+        const 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, oldValue });
+            const emitter = this[`${option.name}Change`];
+            if (emitter)
+                emitter.emit(newValue);
+            if (option.afterCallback)
+                option.afterCallback();
+        }
     }
 }
 _elementRef = new WeakMap();
@@ -108,120 +124,108 @@ const BASE_INPUTS = [
 const BASE_OUTPUT = [];
 
 function _ButtonComponentMixin(Base) {
-    var _color, _look, _toggleable, _selected, _a;
-    return _a = class extends Base {
-            constructor(...args) {
-                super(...args);
-                /**
-                *  Defines the primary text to show inside the button.
-                */
-                this.text = '';
-                /**
-                *  Trigger click event by Enter Key
-                */
-                this.submitBehavior = false;
-                /**
-                *  Trigger click event by Esc Key
-                */
-                this.cancelBehavior = false;
-                this.colorChange = new EventEmitter();
-                _color.set(this, 'primary');
-                this.lookChange = new EventEmitter();
-                _look.set(this, null);
-                this.toggleableChange = new EventEmitter();
-                _toggleable.set(this, false);
-                this.selectedChange = new EventEmitter();
-                _selected.set(this, false);
-            }
+    return class extends Base {
+        constructor(...args) {
+            super(...args);
             /**
-            *  Predefined color schemes
+            *  Defines the primary text to show inside the button.
             */
-            get color() {
-                return __classPrivateFieldGet(this, _color);
-            }
-            set color(value) {
-                value = this.onOptionChanging({ name: 'color', value: value });
-                if (value != __classPrivateFieldGet(this, _color)) {
-                    const oldValue = this.color;
-                    __classPrivateFieldSet(this, _color, value);
-                    this.colorChange.emit(value);
-                    this.onOptionChanged({ name: 'color', oldValue, newValue: value });
-                    this._cdr.markForCheck();
-                }
-            }
+            this.text = '';
             /**
-            *  Predefined look schemes
+            *  Trigger click event by Enter Key
             */
-            get look() {
-                return __classPrivateFieldGet(this, _look);
-            }
-            set look(value) {
-                value = this.onOptionChanging({ name: 'look', value: value });
-                if (value != __classPrivateFieldGet(this, _look)) {
-                    const oldValue = this.color;
-                    __classPrivateFieldSet(this, _look, value);
-                    this.lookChange.emit(value);
-                    this.onOptionChanged({ name: 'look', oldValue, newValue: value });
-                    this._cdr.markForCheck();
-                }
-            }
+            this.submitBehavior = false;
             /**
-            *  Provides visual styling that indicates if the Button is active
+            *  Trigger click event by Esc Key
             */
-            get toggleable() {
-                return __classPrivateFieldGet(this, _toggleable);
-            }
-            set toggleable(value) {
-                value = this.onOptionChanging({ name: 'toggleable', value: value });
-                if (value != __classPrivateFieldGet(this, _toggleable)) {
-                    const oldValue = this.toggleable;
-                    __classPrivateFieldSet(this, _toggleable, value);
-                    this.toggleableChange.emit(value);
-                    this.onOptionChanged({ name: 'toggleable', oldValue, newValue: value });
+            this.cancelBehavior = false;
+            this.colorChange = new EventEmitter();
+            this._color = 'primary';
+            this.lookChange = new EventEmitter();
+            this._look = null;
+            this.toggleableChange = new EventEmitter();
+            this._toggleable = false;
+            this.selectedChange = new EventEmitter();
+            this._selected = false;
+        }
+        /**
+        *  Predefined color schemes
+        */
+        get color() {
+            return this._color;
+        }
+        set color(value) {
+            this._setOption({
+                name: 'color',
+                value,
+                afterCallback: () => {
+                    this._cdr.markForCheck();
                 }
-            }
-            /**
-            *  Indicates if the Button is selected or not
-            */
-            get selected() {
-                return __classPrivateFieldGet(this, _selected);
-            }
-            set selected(value) {
-                value = this.onOptionChanging({ name: 'selected', value: value });
-                if (value != __classPrivateFieldGet(this, _selected)) {
-                    const oldValue = this.selected;
-                    __classPrivateFieldSet(this, _selected, value);
-                    this.selectedChange.emit(value);
+            });
+        }
+        /**
+        *  Predefined look schemes
+        */
+        get look() {
+            return this._look;
+        }
+        set look(value) {
+            this._setOption({
+                name: 'look',
+                value,
+                afterCallback: () => {
                     this._cdr.markForCheck();
-                    this.onOptionChanged({ name: 'selected', oldValue, newValue: value });
                 }
-            }
-            _onInternalViewInit() {
-                super._onInternalViewInit();
-                if (this.submitBehavior) {
-                    setTimeout(() => {
-                        this.focus();
-                    }, 0);
+            });
+        }
+        /**
+        *  Provides visual styling that indicates if the Button is active
+        */
+        get toggleable() {
+            return this._toggleable;
+        }
+        set toggleable(value) {
+            this._setOption({
+                name: 'toggleable',
+                value
+            });
+        }
+        /**
+        *  Indicates if the Button is selected or not
+        */
+        get selected() {
+            return this._selected;
+        }
+        set selected(value) {
+            this._setOption({
+                name: 'selected',
+                value,
+                afterCallback: () => {
+                    this._cdr.markForCheck();
                 }
+            });
+        }
+        _onInternalViewInit() {
+            super._onInternalViewInit();
+            if (this.submitBehavior) {
+                setTimeout(() => {
+                    this.focus();
+                }, 0);
             }
-            _onInternalDestroy() {
-                super._onInternalDestroy();
-            }
-            get _classes() {
-                const cssClasses = {
-                    'ax-button-icon': !this.text,
-                    'ax-state-disabled': this["disabled"],
-                    'ax-state-selected': this.selected
-                };
-                cssClasses[`ax-${this.color || 'primary'}${this.look ? '-' + this.look : ''}`] = true;
-                return cssClasses;
-            }
-        },
-        _color = new WeakMap(),
-        _look = new WeakMap(),
-        _toggleable = new WeakMap(),
-        _selected = new WeakMap(),
-        _a;
+        }
+        _onInternalDestroy() {
+            super._onInternalDestroy();
+        }
+        get _classes() {
+            const cssClasses = {
+                'ax-button-icon': !this.text,
+                'ax-state-disabled': this["disabled"],
+                'ax-state-selected': this.selected
+            };
+            cssClasses[`ax-${this.color || 'primary'}${this.look ? '-' + this.look : ''}`] = true;
+            return cssClasses;
+        }
+    };
 }
 const BUTTON_INPUTS = [
     'text',
@@ -354,17 +358,15 @@ function _DatalistComponenetMixin(Base) {
 }
 
 function _DropdownComponenetMixin(Base) {
-    var _readonly;
     class Mixin extends Base {
         constructor(...args) {
             super(...args);
-            _readonly.set(this, false);
             this.fitParent = true;
+            this.readonly = false;
             this.onOpened = new EventEmitter();
             this.onClosed = new EventEmitter();
+            this.position = [];
         }
-        get readonly() { return __classPrivateFieldGet(this, _readonly); }
-        set readonly(value) { __classPrivateFieldSet(this, _readonly, coerceBooleanProperty(value)); }
         _emitOnOpenedEvent() {
             //** call from interactive mixin **//
             //(this as any).focus();
@@ -375,16 +377,74 @@ function _DropdownComponenetMixin(Base) {
             });
         }
         _emitOnClosedEvent() {
-            this.focus();
             this.onClosed.emit({
                 component: this,
                 htmlElement: this._getHostElement()
             });
         }
+        onViewInit() {
+            if (this.dropdownWidth == null) {
+                if (this.fitParent === true) {
+                    this.dropdownWidth = this._getInnerElement().offsetWidth;
+                }
+            }
+            // wait for documentElement
+            setTimeout(() => {
+                if (this.position.length == 0) {
+                    const offset = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', ''));
+                    const list = [
+                        {
+                            originX: 'start',
+                            originY: 'bottom',
+                            overlayX: 'start',
+                            overlayY: 'top',
+                            offsetY: offset
+                        },
+                        {
+                            originX: 'start',
+                            originY: 'top',
+                            overlayX: 'start',
+                            overlayY: 'bottom',
+                            offsetY: -offset
+                        }
+                    ];
+                    this.position.push(...list);
+                }
+            }, 500);
+        }
+        toggle() {
+            if (this['disabled'] !== true) {
+                this.popover.toggle();
+            }
+        }
+        close() {
+            if (!this.isOpen || this['disabled']) {
+                return;
+            }
+            this.popover.close();
+            this._emitOnClosedEvent();
+        }
+        open() {
+            if (this.isOpen || this['disabled']) {
+                return;
+            }
+            this.popover.open();
+            this._emitOnOpenedEvent();
+        }
+        get isOpen() {
+            var _a;
+            return (_a = this.popover) === null || _a === void 0 ? void 0 : _a.isOpen;
+        }
     }
-    _readonly = new WeakMap();
     return Mixin;
-}
+}
+const DROPDOWN_INPUTS = [
+    'isOpen',
+    'fitParent',
+    'dropdownWidth',
+    'position'
+];
+const DROPDOWN_OUTPUT = ['onOpened', 'onClosed'];
 
 function _InteractiveComponenetMixin(Base) {
     var _disabled, _tabIndex;
@@ -412,11 +472,11 @@ function _InteractiveComponenetMixin(Base) {
         */
         get disabled() { return __classPrivateFieldGet(this, _disabled); }
         set disabled(value) {
-            value = this.onOptionChanging({ name: 'disabled', value: value });
+            value = this._onOptionChanging({ name: 'disabled', value: value });
             if (value != this.disabled) {
                 const oldValue = this.disabled;
                 __classPrivateFieldSet(this, _disabled, coerceBooleanProperty(value));
-                this.onOptionChanged({ name: 'disabled', oldValue, newValue: value });
+                this._onOptionChanged({ name: 'disabled', oldValue, newValue: value });
                 this._cdr.markForCheck();
             }
         }
@@ -687,7 +747,7 @@ function _ValueComponenetMixin(Base) {
                 return __classPrivateFieldGet(this, _value);
             }
             set value(v) {
-                v = this._onValueChanging(v);
+                v = this._onInternalValueChanging(v);
                 if (!this._isInited || this.debounceTime == 0) {
                     this._setValue(v);
                 }
@@ -705,6 +765,11 @@ function _ValueComponenetMixin(Base) {
                 });
                 this._onValueChanged(oldValue, __classPrivateFieldGet(this, _value));
             }
+            _onInternalValueChanging(value) {
+                if (this.readonly)
+                    return this.value;
+                return this._onValueChanging(value);
+            }
             _onValueChanging(value) {
                 return value;
             }
@@ -865,7 +930,7 @@ const AXBaseTextBoxMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_
 const AXBaseSelectionValueMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_DatalistComponenetMixin(_SelectionComponenetMixin(_ValueComponenetMixin(AXBaseComponent)))));
 const AXBaseValueDropdownMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_DropdownComponenetMixin(_DatalistComponenetMixin(_ValueComponenetMixin(AXBaseComponent)))));
 const AXBaseSelectionDropdownMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_DropdownComponenetMixin(_DatalistComponenetMixin(_SelectionComponenetMixin(_ValueComponenetMixin(AXBaseComponent))))));
-const AXCalendarComponentMixin = _ClickableComponenetMixin(_InteractiveComponenetMixin(_ValueComponenetMixin(AXBaseComponent)));
+const AXBaseDropdownMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_DropdownComponenetMixin(AXBaseComponent)));
 
 /**
 *  Contains native event
@@ -1469,7 +1534,7 @@ class AXButtonGroupComponent extends AXInteractiveComponenetMixin {
         return this._selection;
     }
     set selection(value) {
-        value = this.onOptionChanging({ name: 'selection', value: value });
+        value = this._onOptionChanging({ name: 'selection', value: value });
         const oldValue = this.selection;
         if (value != oldValue) {
             this._selection = value;
@@ -1484,7 +1549,7 @@ class AXButtonGroupComponent extends AXInteractiveComponenetMixin {
         return this._color;
     }
     set color(value) {
-        value = this.onOptionChanging({ name: 'color', value: value });
+        value = this._onOptionChanging({ name: 'color', value: value });
         const oldValue = this.color;
         if (value != oldValue) {
             this._color = value;
@@ -1499,7 +1564,7 @@ class AXButtonGroupComponent extends AXInteractiveComponenetMixin {
         return this._look;
     }
     set look(value) {
-        value = this.onOptionChanging({ name: 'look', value: value });
+        value = this._onOptionChanging({ name: 'look', value: value });
         const oldValue = this.look;
         if (value != oldValue) {
             this._look = value;
@@ -1808,73 +1873,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 }]
         }] });
 
-class AXCalendarComponent extends AXCalendarComponentMixin {
+class AXCalendarBaseComponent extends AXBaseComponent {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
-        this.cdr = cdr;
-        this._today = new AXDateTime(new Date());
-        this._navText = '';
-        this._todayText = '';
-        this._slots = [];
+        this.activeViewChange = new EventEmitter();
         this._activeView = 'days';
         this.depthChange = new EventEmitter();
         this._depth = 'days';
-    }
-    get _viewRange() {
-        const current = this._viewStartDate || this._today;
-        switch (this.activeView) {
-            case 'years':
-                let y = current.startOf('year').year;
-                let min = y - (y % 10) - 1;
-                let max = min + 11;
-                return new AXDateTimeRange(AXDateTime.convert(new Date(min, 0), this._today.calendar.name()), AXDateTime.convert(new Date(max, 0), this._today.calendar.name()));
-            case 'months':
-                //TODO: check add month function
-                return new AXDateTimeRange(current.startOf('year'), current.endOf('year').add('day', -1));
-            default:
-                //return new AXDateTimeRange(current.startOf('month').startOf('week'), current.endOf('month').endOf('week'));
-                return new AXDateTimeRange(current.startOf('month'), current.endOf('month'));
-        }
+        this.minChange = new EventEmitter();
+        this.maxChange = new EventEmitter();
+        this.disabledDatesChange = new EventEmitter();
+        this.holidayDatesChange = new EventEmitter();
     }
     get activeView() {
         return this._activeView;
     }
     set activeView(v) {
-        this._activeView = v;
-        this._genearteSlots();
+        this._setOption({ name: 'activeView', value: v });
     }
     get depth() {
         return this._depth;
     }
     set depth(v) {
-        this._depth = v;
-        this._activeView = v;
-        this.depthChange.emit(v);
-        this._genearteSlots();
+        this._setOption({
+            name: 'depth',
+            value: v,
+            beforeCallback: () => {
+                this._activeView = v;
+            }
+        });
     }
     get min() {
         return this._min;
     }
     set min(v) {
-        this._min = v;
+        this._setOption({ name: 'min', value: v });
     }
     get max() {
         return this._max;
     }
     set max(v) {
-        this._max = v;
+        this._setOption({ name: 'max', value: v });
     }
     get disabledDates() {
         return this._disabledDates;
     }
     set disabledDates(v) {
-        this._disabledDates = v;
+        this._setOption({ name: 'disabledDates', value: v });
     }
     get holidayDates() {
         return this._holidayDates;
     }
     set holidayDates(v) {
-        this._holidayDates = v;
+        this._setOption({ name: 'holidayDates', value: v });
+    }
+}
+AXCalendarBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarBaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
+AXCalendarBaseComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarBaseComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarBaseComponent, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { activeViewChange: [{
+                type: Output
+            }], activeView: [{
+                type: Input
+            }], depthChange: [{
+                type: Output
+            }], depth: [{
+                type: Input
+            }], minChange: [{
+                type: Output
+            }], min: [{
+                type: Input
+            }], maxChange: [{
+                type: Output
+            }], max: [{
+                type: Input
+            }], disabledDatesChange: [{
+                type: Output
+            }], disabledDates: [{
+                type: Input
+            }], holidayDatesChange: [{
+                type: Output
+            }], holidayDates: [{
+                type: Input
+            }] } });
+const CALENDAR_INPUTS = [
+    'depth',
+    'activeView',
+    'min',
+    'max',
+    'disabledDates',
+    'holidayDates',
+];
+const CALENDAR_OUTPUTS = ['depthChange'];
+
+const AXCalendarComponentMixin = _ClickableComponenetMixin(_InteractiveComponenetMixin(_ValueComponenetMixin(AXCalendarBaseComponent)));
+class AXCalendarComponent extends AXCalendarComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.cdr = cdr;
+        this._today = new AXDateTime(new Date());
+        this._navText = '';
+        this._todayText = '';
+        this._slots = [];
+    }
+    get _viewRange() {
+        const current = this._viewStartDate || this._today;
+        switch (this.activeView) {
+            case 'years':
+                let y = current.startOf('year').year;
+                let min = y - (y % 10) - 1;
+                let max = min + 11;
+                return new AXDateTimeRange(AXDateTime.convert(new Date(min, 0), this._today.calendar.name()), AXDateTime.convert(new Date(max, 0), this._today.calendar.name()));
+            case 'months':
+                //TODO: check add month function
+                return new AXDateTimeRange(current.startOf('year'), current.endOf('year').add('day', -1));
+            default:
+                //return new AXDateTimeRange(current.startOf('month').startOf('week'), current.endOf('month').endOf('week'));
+                return new AXDateTimeRange(current.startOf('month'), current.endOf('month'));
+        }
     }
     onInit() {
         this.goToday();
@@ -1996,6 +2113,11 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
         else if (this.activeView == 'months')
             this.activeView = 'years';
     }
+    _onOptionChanged(option) {
+        if (option.name == 'depth' || option.name == 'activeView') {
+            this._genearteSlots();
+        }
+    }
     _onValueChanged(oldValue, newValue) {
         this._genearteSlots();
     }
@@ -2033,7 +2155,7 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
     }
     isDisabled(date) {
         if (Array.isArray(this.disabledDates) && this.disabledDates.length != 0) {
-            debugger;
+            ;
             return this.disabledDates.some(d => date.equal(d, 'day'));
         }
         else if (typeof this.disabledDates == 'function') {
@@ -2055,32 +2177,18 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
     }
 }
 AXCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXCalendarComponent, selector: "ax-calendar", inputs: { readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", disabled: "disabled", tabIndex: "tabIndex", activeView: "activeView", depth: "depth", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-header\">\r\n    <ax-button class=\"ax-nav-button\" [text]=\"_navText\" color=\"light\" look=\"blank\" (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n    </ax-button>\r\n    <ax-button class=\"ax-prev-button\" color=\"light\" look=\"blank\" (onClick)=\"_handlePrevClick($event)\" [disabled]=\"disabled\">\r\n        <ax-prefix>\r\n            <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax-rotate-90\"></ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button class=\"ax-next-button\" color=\"light\" look=\"blank\" (onClick)=\"_handleNextClick($event)\" [disabled]=\"disabled\">\r\n        <ax-prefix>\r\n            <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div>\r\n<div class=\"ax-calendar-body\">\r\n    <div [ngSwitch]=\"activeView\">\r\n        <ng-container *ngSwitchCase=\"'years'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [ngClass]=\"slot.cssClass\" \r\n                    (click)=\"_handleSlotClick(slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'months'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\" \r\n                    (click)=\"_handleSlotClick(slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n            <div class=\"ax-calendar-week\">\r\n                <div>SU</div>\r\n                <div>MO</div>\r\n                <div>TU</div>\r\n                <div>WE</div>\r\n                <div>TH</div>\r\n                <div>FR</div>\r\n                <div>SA</div>\r\n            </div>\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\"  [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick(slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-footer\">\r\n    <ax-button [text]=\"_todayText\" color=\"dark\" look=\"blank\" size=\"sm\" (onClick)=\"_handleGoToday()\" [disabled]=\"disabled\"></ax-button>\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "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, 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-calendar',
                     templateUrl: './calendar.component.html',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    inputs: [...VALUE_INPUTS, ...INTERACTIVE_INPUTS],
-                    outputs: [...VALUE_OUTPUT, ...INTERACTIVE_OUTPUT],
+                    inputs: [...VALUE_INPUTS, ...INTERACTIVE_INPUTS, ...CALENDAR_INPUTS],
+                    outputs: [...VALUE_OUTPUT, ...INTERACTIVE_OUTPUT, ...CALENDAR_OUTPUTS],
                     encapsulation: ViewEncapsulation.None,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { activeView: [{
-                type: Input
-            }], depthChange: [{
-                type: Output
-            }], depth: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], disabledDates: [{
-                type: Input
-            }], holidayDates: [{
-                type: Input
-            }], __hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -2607,12 +2715,12 @@ class AXFormHintComponent extends AXBaseComponentMixin {
     }
 }
 AXFormHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormHintComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXFormHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXFormHintComponent, selector: "ax-form-hint", usesInheritance: true, ngImport: i0, template: ' <p class="ax-text-gray-400 ax-text-xs ax-py-1"><ng-content></ng-content></p>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXFormHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXFormHintComponent, selector: "ax-form-hint", usesInheritance: true, ngImport: i0, 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.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormHintComponent, decorators: [{
             type: 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: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
@@ -2721,13 +2829,12 @@ class AXCheckBoxComponent extends AXBaseValueComponentMixin {
     }
     onInit() {
         super.onInit();
-        debugger;
+        ;
         if (!this.allowNull && this.value == null) {
             this.value = false;
         }
     }
     _onValueChanging(value) {
-        debugger;
         if (this.allowNull && value == null) {
             this._stateIndeterminate = true;
         }
@@ -2738,7 +2845,7 @@ class AXCheckBoxComponent extends AXBaseValueComponentMixin {
         return value;
     }
     _handleOnClickEvent(e) {
-        debugger;
+        ;
         if (this.readonly || this.disabled) {
             e.preventDefault();
             e.stopPropagation();
@@ -3085,6 +3192,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 args: ['document:keydown', ['$event']]
             }] } });
 
+const AXBaseDatePickerMixin = _InteractiveComponenetMixin(_DropdownComponenetMixin(_ValueComponenetMixin(_TextboxComponenetMixin(AXCalendarBaseComponent))));
+class AXDatePickerComponent extends AXBaseDatePickerMixin {
+    constructor(_elementRef, _cdr) {
+        super(_elementRef, _cdr);
+        this.formatChange = new EventEmitter();
+        this._format = 'YYYY-MM-dd';
+        this._target = this._getHostElement();
+    }
+    get format() {
+        return this._format;
+    }
+    set format(v) {
+        this._setOption({
+            name: 'format',
+            value: v
+        });
+    }
+    _handleArrowClickEvent(e) {
+        this.toggle();
+    }
+    _onValueChanged(oldValue, newValue) {
+        this.displayText = newValue ? AXDateTime.convert(newValue).format(this._format) : null;
+        this.close();
+    }
+    _handleOnKeydownEvent(e) {
+        var _a, _b;
+        const ignore = () => {
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        const nums = Array(10).fill(0).map((v, i) => i.toString());
+        const chars = ['Backspace', 'ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Tab', 'Enter'];
+        const input = e.target;
+        const key = (e.key);
+        const valStr = input.value;
+        const sStart = input.selectionStart;
+        const sEnd = input.selectionEnd;
+        const dateVal = new AXDateTime(this.value);
+        // //
+        if (![...nums, ...chars].includes(key)) {
+            ignore();
+        }
+        if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+            const re = /[a-zA-Z0-9]+/ig;
+            const next = Array.from(valStr.substr(sEnd).matchAll(re));
+            const 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') {
+            const re = /[a-zA-Z0-9]+/ig;
+            const sign = e.key === 'ArrowUp' ? +1 : -1;
+            const parts = Array.from(this.format.matchAll(re));
+            const word = valStr.substring(sStart, sEnd);
+            const part = parts[Array.from(valStr.matchAll(re)).findIndex(c => c[0] == word)];
+            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(() => {
+                    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);
+    }
+    _handleOnInputClickEvent(e) {
+        const input = e.target;
+        this._highlightPart(input);
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    _highlightPart(input, pos) {
+        const { start, end } = AXStringUtil.getWordBoundsAtPosition(input.value, pos != null ? pos : input.selectionStart);
+        input.setSelectionRange(start, end);
+    }
+}
+AXDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDatePickerComponent, selector: "ax-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, 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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-date-picker',
+                    templateUrl: './datepicker.component.html',
+                    inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...CALENDAR_INPUTS],
+                    outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...CALENDAR_OUTPUTS],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'ax-editor-container ax-drop-down' }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { popover: [{
+                type: ViewChild,
+                args: [AXPopoverComponent]
+            }], formatChange: [{
+                type: Output
+            }], format: [{
+                type: Input
+            }] } });
+
 class AXPopoverModule {
 }
 AXPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3100,178 +3327,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 }]
         }] });
 
-const AXBaseDropdownMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(AXBaseComponent));
-class AXBaseDropDownComponent extends AXBaseDropdownMixin {
+class AXInputMaskComponent {
     constructor() {
-        super(...arguments);
-        this.fitParent = true;
-        this.onOpened = new EventEmitter();
-        this.onClosed = new EventEmitter();
-        this.position = [];
+        this.showMaskTyped = false;
+        this.clearIfNotMatch = false;
     }
-    _emitOnOpenedEvent() {
-        //** call from interactive mixin **//
-        //(this as any).focus();
-        //
-        this.onOpened.emit({
-            component: this,
-            htmlElement: this._getHostElement()
-        });
+    get prefix() {
+        return this._prefix || '';
     }
-    _emitOnClosedEvent() {
-        this.onClosed.emit({
-            component: this,
-            htmlElement: this._getHostElement()
-        });
+    set prefix(v) {
+        this._prefix = v;
     }
-    onViewInit() {
-        if (this.dropdownWidth == null) {
-            if (this.fitParent === true) {
-                this.dropdownWidth = this._getInnerElement().offsetWidth;
-            }
-        }
-        // wait for documentElement
-        setTimeout(() => {
-            if (this.position.length == 0) {
-                const offset = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', ''));
-                const list = [
-                    {
-                        originX: 'start',
-                        originY: 'bottom',
-                        overlayX: 'start',
-                        overlayY: 'top',
-                        offsetY: offset
-                    },
-                    {
-                        originX: 'start',
-                        originY: 'top',
-                        overlayX: 'start',
-                        overlayY: 'bottom',
-                        offsetY: -offset
-                    }
-                ];
-                this.position.push(...list);
-            }
-        }, 500);
-    }
-    toggle() {
-        if (this.disabled !== true) {
-            this.popover.toggle();
-        }
-    }
-    close() {
-        if (!this.isOpen || this.disabled) {
-            return;
-        }
-        this.popover.close();
-        this._emitOnClosedEvent();
-    }
-    open() {
-        if (this.isOpen || this.disabled) {
-            return;
-        }
-        this.popover.open();
-        this._emitOnOpenedEvent();
+    get suffix() {
+        return this._suffix || '';
     }
-    get isOpen() {
-        return this.popover.isOpen;
+    set suffix(v) {
+        this._suffix = v;
     }
 }
-AXBaseDropDownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBaseDropDownComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-AXBaseDropDownComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBaseDropDownComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBaseDropDownComponent, decorators: [{
-            type: Injectable
-        }], propDecorators: { fitParent: [{
+AXInputMaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXInputMaskComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-input-mask',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { prefix: [{
+                type: Input
+            }], suffix: [{
                 type: Input
-            }], dropdownWidth: [{
+            }], showMaskTyped: [{
                 type: Input
-            }], onOpened: [{
-                type: Output
-            }], onClosed: [{
-                type: Output
-            }], position: [{
+            }], clearIfNotMatch: [{
+                type: Input
+            }], mask: [{
                 type: Input
             }] } });
 
-class AXDropdownComponent extends AXBaseDropDownComponent {
-    constructor(_elementRef, _cdr) {
-        super(_elementRef, _cdr);
-        this._target = this;
-    }
-    _handleArrowClickEvent() {
-        this.toggle();
-    }
+const COMPONENT$e = [AXInputMaskComponent];
+const MODULES$e = [CommonModule, NgxMaskModule.forRoot()];
+class AXInputMaskModule {
 }
-AXDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDropdownComponent, selector: "ax-drop-down", inputs: { disabled: "disabled", tabIndex: "tabIndex", size: "size", fitParent: "fitParent" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-editor-container\" [class.ax-state-disabled]=\"disabled\">\r\n    <ng-content select=\"ax-prefix\">\r\n    </ng-content>\r\n    <div class=\"ax-dropdown-content\" style=\"display: inline-flex;\" (click)=\"_handleArrowClickEvent()\">\r\n        <ng-content select=\"[input]\">\r\n        </ng-content>\r\n    </div>\r\n    <ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" [size]=\"size\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent()\">\r\n        <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ax-button>\r\n    <ng-content select=\"ax-suffix\">\r\n    </ng-content>\r\n</div>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane\"  [style.min-width.px]=\"dropdownWidth\">\r\n        <ng-content select=\"[panel]\">\r\n        </ng-content>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownComponent, decorators: [{
-            type: Component,
+AXInputMaskModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXInputMaskModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskModule, declarations: [AXInputMaskComponent], imports: [CommonModule, i1$2.NgxMaskModule], exports: [AXInputMaskComponent] });
+AXInputMaskModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskModule, providers: [], imports: [[...MODULES$e]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskModule, decorators: [{
+            type: NgModule,
             args: [{
-                    selector: 'ax-drop-down',
-                    templateUrl: 'dropdown.component.html',
-                    inputs: ['disabled', 'tabIndex', 'size', 'fitParent'],
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    declarations: [...COMPONENT$e],
+                    imports: [...MODULES$e],
+                    exports: [...COMPONENT$e],
+                    providers: [],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { popover: [{
-                type: ViewChild,
-                args: [AXPopoverComponent]
-            }] } });
+        }] });
 
-class AXDatepickerComponent extends AXBaseTextBoxMixin {
+/**
+ * The Textbox is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+class AXTextBoxComponent extends AXBaseTextBoxMixin {
+    /**
+    *  @ignore
+    */
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
-        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();
-    }
-    showMonths() {
-        this._showDays = false;
-        this._showYears = false;
-        this._showsMonths = true;
-    }
-    showYears() {
-        this._showsMonths = false;
-        this._showDays = false;
-        this._showYears = true;
-    }
-    showDays() {
-        this._showYears = false;
-        this._showsMonths = false;
-        this._showDays = true;
     }
-    createYears() {
-        let number = 1990;
-        for (let i = 0; i < 40; i++) {
-            number = number + 1;
-            this.yearItems.push(number);
-        }
+    //TODO: prefix suffix text
+    get hostClass() {
+        return `${this.cssClass} ax-${this.size}`;
     }
 }
-AXDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDatepickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDatepickerComponent, selector: "ax-date-picker", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", cssClass: "cssClass", size: "size", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", value: "value", name: "name" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, usesInheritance: true, ngImport: i0, template: "<ax-drop-down [fitParent]=\"false\" [disabled]=\"disabled\">\r\n    <ng-container input>\r\n        <ng-content select=\"ax-prefix\">\r\n        </ng-content>\r\n        <ng-content select=\"ax-suffix\">\r\n        </ng-content>\r\n    </ng-container>\r\n    <div class=\"ax-datepicker-body\" panel>\r\n        <ax-calendar></ax-calendar>\r\n        <!-- [showTime]=\"true\" [actionBar]=\"true\" -->\r\n    </div>\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["disabled", "tabIndex", "size", "fitParent"] }, { type: AXCalendarComponent, selector: "ax-calendar", inputs: ["readonly", "allowNull", "value", "debounceTime", "name", "disabled", "tabIndex", "activeView", "depth", "min", "max", "disabledDates", "holidayDates"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDatepickerComponent, decorators: [{
+AXTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTextBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", cssClass: "cssClass", size: "size", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", value: "value", name: "name" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-text-box ax-editor-container" }, queries: [{ propertyName: "_contentMask", first: true, predicate: AXInputMaskComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" type=\"text\" [mask]=\"_contentMask?.mask\" [prefix]=\"_contentMask?.prefix\"\r\n    [suffix]=\"_contentMask?.suffix\" [showMaskTyped]=\"_contentMask?.showMaskTyped\" [attr.placeholder]=\"placeholder\"\r\n    [attr.maxlength]=\"maxLength\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\"\r\n    [attr.autocomplete]=\"autoComplete ? 'on': 'off'\">\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && allowNull &&  !(disabled || readonly)\">\r\n    <ax-prefix>\r\n        <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n    </ax-prefix>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$2.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTextBoxComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-date-picker',
-                    templateUrl: './datepicker.component.html',
+                    selector: 'ax-text-box',
+                    templateUrl: 'textbox.component.html',
                     inputs: [
                         'disabled',
                         'readonly',
@@ -3287,112 +3423,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                         'onFocus',
                         ...TEXTBOX_OUTPUT,
                     ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
-
-class AXDropdownPanelComponent extends AXBaseDropDownComponent {
-    constructor(elementRef, cdr, _parent) {
-        super(elementRef, cdr);
-        this._parent = _parent;
-        this.onItemClick = new EventEmitter();
-        this._needBorder = false;
-        this._subs = [];
-        this._target = this._parent._getHostElement();
-    }
-    get items() {
-        return this._items || [];
-    }
-    set items(v) {
-        this._items = v;
-        this._cdr.markForCheck();
-    }
-    _getAllButtons() {
-        return [...Array.from(this._viewButtons), ...Array.from(this._contentButtons)];
-    }
-    onViewInit() {
-        super.onViewInit();
-        this._getAllButtons().forEach(c => {
-            this._needBorder = true;
-            this._subs.push(c.onClick.subscribe(this._handleOnItemClick.bind(this)));
-            this._cdr.markForCheck();
-        });
-    }
-    onDestroy() {
-        this._subs.forEach(s => {
-            s === null || s === void 0 ? void 0 : s.unsubscribe();
-        });
-    }
-    _emitOnItemClickEvent(e, item) {
-        this.onItemClick.emit({
-            component: this,
-            htmlElement: this._getHostElement(),
-            nativeEvent: e.nativeEvent,
-            name: item.name,
-            data: item.data,
-        });
-    }
-    _handleOnItemClick(e) {
-        this.close();
-        this._emitOnItemClickEvent(e, e.component);
-    }
-}
-AXDropdownPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownPanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXButtonComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AXDropdownPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: { items: "items" }, outputs: { onItemClick: "onItemClick" }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonItemComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }, { propertyName: "_viewButtons", predicate: AXButtonItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'toggle'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-dropdown-list]=\"_needBorder\" >\r\n        <ng-container *ngIf=\"items && items.length;else panelTpl\">\r\n            <ax-button-item [text]=\"item.text\" [color]=\"item.color\" *ngFor=\"let item of items\">\r\n                <ax-prefix *ngIf=\"item.iconClass\">\r\n                    <ax-icon [icon]=\"item.iconClass\"></ax-icon>\r\n                </ax-prefix>\r\n            </ax-button-item>\r\n        </ng-container>\r\n        <ng-template #panelTpl>\r\n            <ng-content select=\"[panel],ax-button-item\">\r\n            </ng-content>\r\n        </ng-template>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"] }, { type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["text", "tooltip", "selected", "seperated", "name", "data", "color"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownPanelComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-dropdown-panel',
-                    templateUrl: './dropdown-panel.component.html',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'ax-text-box ax-editor-container' },
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXButtonComponent, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { _contentButtons: [{
-                type: ContentChildren,
-                args: [AXButtonItemComponent]
-            }], _viewButtons: [{
-                type: ViewChildren,
-                args: [AXButtonItemComponent]
-            }], onItemClick: [{
-                type: Output
-            }], popover: [{
-                type: ViewChild,
-                args: [AXPopoverComponent]
-            }], items: [{
-                type: Input
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _contentMask: [{
+                type: ContentChild,
+                args: [AXInputMaskComponent]
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
-class AXDropdownModule {
+class AXTextBoxModule {
 }
-AXDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownModule, declarations: [AXDropdownComponent, AXDropdownPanelComponent], imports: [CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule], exports: [AXDropdownComponent, AXDropdownPanelComponent] });
-AXDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownModule, providers: [], imports: [[CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownModule, decorators: [{
+AXTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTextBoxModule, declarations: [AXTextBoxComponent], imports: [CommonModule,
+        FormsModule,
+        AXButtonModule,
+        AXEditorDecoratorModule,
+        AXIconModule, i1$2.NgxMaskModule], exports: [AXTextBoxComponent] });
+AXTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTextBoxModule, providers: [], imports: [[
+            CommonModule,
+            FormsModule,
+            AXButtonModule,
+            AXEditorDecoratorModule,
+            AXIconModule,
+            NgxMaskModule.forChild()
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTextBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule],
-                    exports: [AXDropdownComponent, AXDropdownPanelComponent],
-                    declarations: [AXDropdownComponent, AXDropdownPanelComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXButtonModule,
+                        AXEditorDecoratorModule,
+                        AXIconModule,
+                        NgxMaskModule.forChild()
+                    ],
+                    exports: [AXTextBoxComponent],
+                    declarations: [AXTextBoxComponent],
                     providers: [],
                 }]
         }] });
 
-const COMPONENT$e = [AXDatepickerComponent];
-const MODULES$e = [CommonModule, AXCalendarModule, AXDropdownModule];
+const COMPONENT$d = [AXDatePickerComponent];
+const MODULES$d = [
+    CommonModule,
+    AXCalendarModule,
+    AXTextBoxModule,
+    AXButtonModule,
+    AXPopoverModule,
+    AXEditorDecoratorModule,
+    AXIconModule,
+    AXDateTimeModule,
+    FormsModule
+];
 class AXDatepickerModule {
 }
 AXDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDatepickerModule, declarations: [AXDatepickerComponent], imports: [CommonModule, AXCalendarModule, AXDropdownModule], exports: [AXDatepickerComponent] });
-AXDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDatepickerModule, providers: [], imports: [[...MODULES$e]] });
+AXDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDatepickerModule, declarations: [AXDatePickerComponent], imports: [CommonModule,
+        AXCalendarModule,
+        AXTextBoxModule,
+        AXButtonModule,
+        AXPopoverModule,
+        AXEditorDecoratorModule,
+        AXIconModule,
+        AXDateTimeModule,
+        FormsModule], exports: [AXDatePickerComponent] });
+AXDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDatepickerModule, providers: [], imports: [[...MODULES$d]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$e],
-                    imports: [...MODULES$e],
-                    exports: [...COMPONENT$e],
+                    declarations: [...COMPONENT$d],
+                    imports: [...MODULES$d],
+                    exports: [...COMPONENT$d],
                     providers: [],
                 }]
         }] });
@@ -3603,7 +3709,7 @@ class AXLoadingComponent extends AXBaseComponentMixin {
 AXLoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 AXLoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXLoadingComponent, selector: "ax-loading", inputs: { visible: "visible", type: "type" }, outputs: { visibleChange: "visibleChange" }, host: { classAttribute: "ax-loading" }, usesInheritance: true, ngImport: i0, template: `
         <ng-template [cdkPortalOutlet]="_selectedPortal" ></ng-template>
-    `, isInline: true, directives: [{ type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, directives: [{ type: i1$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingComponent, decorators: [{
             type: Component,
             args: [{
@@ -3717,8 +3823,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 args: ['axIsLoading']
             }] } });
 
-const COMPONENT$d = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
-const MODULES$d = [CommonModule, OverlayModule, PortalModule];
+const COMPONENT$c = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
+const MODULES$c = [CommonModule, OverlayModule, PortalModule];
 class AXLoadingModule {
     constructor() {
         AXConfig.set({
@@ -3732,13 +3838,13 @@ class AXLoadingModule {
 }
 AXLoadingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXLoadingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingModule, declarations: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent], imports: [CommonModule, OverlayModule, PortalModule], exports: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent] });
-AXLoadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingModule, providers: [], imports: [[...MODULES$d]] });
+AXLoadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingModule, providers: [], imports: [[...MODULES$c]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$d],
-                    imports: [...MODULES$d],
-                    exports: [...COMPONENT$d],
+                    declarations: [...COMPONENT$c],
+                    imports: [...MODULES$c],
+                    exports: [...COMPONENT$c],
                     providers: [],
                 }]
         }], ctorParameters: function () { return []; } });
@@ -4104,7 +4210,7 @@ class AXBasePageComponent {
         return this._isLoading;
     }
     set isLoading(v) {
-        debugger;
+        ;
         this._isLoading = v;
         if (this.pageContainer) {
             this.pageContainer.isLoading = this.isLoading;
@@ -4149,19 +4255,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 }]
         }] });
 
-const COMPONENT$c = [AXDialogComponent];
-const MODULES$c = [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule];
+const COMPONENT$b = [AXDialogComponent];
+const MODULES$b = [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule];
 class AXDialogModule {
 }
 AXDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogModule, declarations: [AXDialogComponent], imports: [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule], exports: [AXDialogComponent] });
-AXDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogModule, providers: [], imports: [[...MODULES$c]] });
+AXDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogModule, providers: [], imports: [[...MODULES$b]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$c],
-                    imports: [...MODULES$c],
-                    exports: [...COMPONENT$c],
+                    declarations: [...COMPONENT$b],
+                    imports: [...MODULES$b],
+                    exports: [...COMPONENT$b],
                     providers: [],
                 }]
         }] });
@@ -4401,76 +4507,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-const COMPONENT$b = [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent];
-const MODULES$b = [CommonModule];
+const COMPONENT$a = [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent];
+const MODULES$a = [CommonModule];
 class AXDrawerModule {
 }
 AXDrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDrawerModule, declarations: [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent], imports: [CommonModule], exports: [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent] });
-AXDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDrawerModule, providers: [], imports: [[...MODULES$b]] });
+AXDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDrawerModule, providers: [], imports: [[...MODULES$a]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDrawerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$b],
-                    imports: [...MODULES$b],
-                    exports: [...COMPONENT$b],
+                    declarations: [...COMPONENT$a],
+                    imports: [...MODULES$a],
+                    exports: [...COMPONENT$a],
                     providers: [],
                 }]
         }] });
 
-class AXInputMaskComponent {
-    constructor() {
-        this.showMaskTyped = false;
-        this.clearIfNotMatch = false;
+class AXDropdownComponent extends AXBaseDropdownMixin {
+    constructor(_elementRef, _cdr) {
+        super(_elementRef, _cdr);
+        this._target = this;
     }
-    get prefix() {
-        return this._prefix || '';
+    _handleArrowClickEvent() {
+        this.toggle();
     }
-    set prefix(v) {
-        this._prefix = v;
+}
+AXDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDropdownComponent, selector: "ax-drop-down", inputs: { 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, template: "<div class=\"ax-editor-container\" [class.ax-state-disabled]=\"disabled\">\r\n    <ng-content select=\"ax-prefix\">\r\n    </ng-content>\r\n    <div class=\"ax-dropdown-content\" style=\"display: inline-flex;\" (click)=\"_handleArrowClickEvent()\">\r\n        <ng-content select=\"[input]\">\r\n        </ng-content>\r\n    </div>\r\n    <ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" [size]=\"size\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent()\">\r\n        <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ax-button>\r\n    <ng-content select=\"ax-suffix\">\r\n    </ng-content>\r\n</div>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane\"  [style.min-width.px]=\"dropdownWidth\">\r\n        <ng-content select=\"[panel]\">\r\n        </ng-content>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-drop-down',
+                    templateUrl: './dropdown.component.html',
+                    inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS],
+                    outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { popover: [{
+                type: ViewChild,
+                args: [AXPopoverComponent]
+            }] } });
+
+class AXDropdownPanelComponent extends AXBaseDropdownMixin {
+    constructor(elementRef, cdr, _parent) {
+        super(elementRef, cdr);
+        this._parent = _parent;
+        this.onItemClick = new EventEmitter();
+        this._needBorder = false;
+        this._subs = [];
+        this._target = this._parent._getHostElement();
     }
-    get suffix() {
-        return this._suffix || '';
+    get items() {
+        return this._items || [];
     }
-    set suffix(v) {
-        this._suffix = v;
+    set items(v) {
+        this._items = v;
+        this._cdr.markForCheck();
+    }
+    _getAllButtons() {
+        return [...Array.from(this._viewButtons), ...Array.from(this._contentButtons)];
+    }
+    onViewInit() {
+        super.onViewInit();
+        this._getAllButtons().forEach(c => {
+            this._needBorder = true;
+            this._subs.push(c.onClick.subscribe(this._handleOnItemClick.bind(this)));
+            this._cdr.markForCheck();
+        });
+    }
+    onDestroy() {
+        this._subs.forEach(s => {
+            s === null || s === void 0 ? void 0 : s.unsubscribe();
+        });
+    }
+    _emitOnItemClickEvent(e, item) {
+        this.onItemClick.emit({
+            component: this,
+            htmlElement: this._getHostElement(),
+            nativeEvent: e.nativeEvent,
+            name: item.name,
+            data: item.data,
+        });
+    }
+    _handleOnItemClick(e) {
+        this.close();
+        this._emitOnItemClickEvent(e, e.component);
     }
 }
-AXInputMaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXInputMaskComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskComponent, decorators: [{
+AXDropdownPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownPanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXButtonComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AXDropdownPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: { 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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownPanelComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-input-mask',
-                    template: '',
+                    selector: 'ax-dropdown-panel',
+                    templateUrl: './dropdown-panel.component.html',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
+                    inputs: [...DROPDOWN_INPUTS],
+                    outputs: [...DROPDOWN_OUTPUT],
                 }]
-        }], propDecorators: { prefix: [{
-                type: Input
-            }], suffix: [{
-                type: Input
-            }], showMaskTyped: [{
-                type: Input
-            }], clearIfNotMatch: [{
-                type: Input
-            }], mask: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXButtonComponent, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { _contentButtons: [{
+                type: ContentChildren,
+                args: [AXButtonItemComponent]
+            }], _viewButtons: [{
+                type: ViewChildren,
+                args: [AXButtonItemComponent]
+            }], onItemClick: [{
+                type: Output
+            }], popover: [{
+                type: ViewChild,
+                args: [AXPopoverComponent]
+            }], items: [{
                 type: Input
             }] } });
 
-const COMPONENT$a = [AXInputMaskComponent];
-const MODULES$a = [CommonModule, NgxMaskModule.forRoot()];
-class AXInputMaskModule {
+class AXDropdownModule {
 }
-AXInputMaskModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXInputMaskModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskModule, declarations: [AXInputMaskComponent], imports: [CommonModule, i1$3.NgxMaskModule], exports: [AXInputMaskComponent] });
-AXInputMaskModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskModule, providers: [], imports: [[...MODULES$a]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskModule, decorators: [{
+AXDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownModule, declarations: [AXDropdownComponent, AXDropdownPanelComponent], imports: [CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule], exports: [AXDropdownComponent, AXDropdownPanelComponent] });
+AXDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownModule, providers: [], imports: [[CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$a],
-                    imports: [...MODULES$a],
-                    exports: [...COMPONENT$a],
+                    imports: [CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule],
+                    exports: [AXDropdownComponent, AXDropdownPanelComponent],
+                    declarations: [AXDropdownComponent, AXDropdownPanelComponent],
                     providers: [],
                 }]
         }] });
@@ -4705,7 +4870,7 @@ class AXNumberBoxComponent extends AXBaseTextBoxMixin {
         this._emitOnFocusEvent(e);
     }
 }
-AXNumberBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.MaskApplierService }], target: i0.ɵɵFactoryTarget.Component });
+AXNumberBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.MaskApplierService }], target: i0.ɵɵFactoryTarget.Component });
 AXNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", name: "name", separator: "separator", thousandSeparator: "thousandSeparator", step: "step", scale: "scale", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue", displayText: "displayText" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", displayTextChange: "displayTextChange" }, host: { properties: { "class": "this.__hostClass" }, classAttribute: "ax-number-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\" [attr.pattern]=\"'[\\d\\.]*'\" [attr.placeholder]=\"placeholder\" [attr.min]=\"minValue\"\r\n    [attr.max]=\"maxValue\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"displayText\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_handleOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\"\r\n    autocomplete=\"off\">\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && allowNull && !(disabled || readonly)\">\r\n    <i class=\"ax-icon-x icon\"></i>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
             type: Component,
@@ -4731,7 +4896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     host: { class: 'ax-number-box ax-editor-container' },
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.MaskApplierService }]; }, propDecorators: { __hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.MaskApplierService }]; }, propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }], separator: [{
@@ -4768,7 +4933,7 @@ class AXNumberBoxModule {
 AXNumberBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXNumberBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxModule, declarations: [AXNumberBoxComponent], imports: [CommonModule,
         FormsModule,
-        AXButtonModule, i1$3.NgxMaskModule], exports: [AXNumberBoxComponent] });
+        AXButtonModule, i1$2.NgxMaskModule], exports: [AXNumberBoxComponent] });
 AXNumberBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxModule, providers: [], imports: [[...MODULES$9]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxModule, decorators: [{
             type: NgModule,
@@ -4953,7 +5118,7 @@ class AXPopupComponent extends AXBaseComponentMixin {
     onFullScreen() { }
 }
 AXPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: AXLoadingService }], target: i0.ɵɵFactoryTarget.Component });
-AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXPopupComponent, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-popup ax-{{size}}\" tabindex=\"0\" cdkDrag>\r\n        <ng-container *ngIf=\"showHeader\">\r\n            <header cdkDragHandle class=\"ax-cursor-move\">\r\n                <div>\r\n                    <div class=\"ax-text-lg ax-font-medium\">\r\n                        <span>\r\n                            {{title}}\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"showCloseButton\">\r\n                    <i class=\"ax-ic ax-ic-close ax-text-gray ax-cursor-pointer\" (click)=\"_handleCloseClick()\"\r\n                        tabindex=\"1\"></i>\r\n                </div>\r\n            </header>\r\n        </ng-container>\r\n        <main>\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </main>\r\n    </div>\r\n</div>", directives: [{ type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXPopupComponent, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-popup ax-{{size}}\" tabindex=\"0\" cdkDrag>\r\n        <ng-container *ngIf=\"showHeader\">\r\n            <header cdkDragHandle class=\"ax-cursor-move\">\r\n                <div>\r\n                    <div class=\"ax-text-lg ax-font-medium\">\r\n                        <span>\r\n                            {{title}}\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"showCloseButton\">\r\n                    <i class=\"ax-ic ax-ic-close ax-text-gray ax-cursor-pointer\" (click)=\"_handleCloseClick()\"\r\n                        tabindex=\"1\"></i>\r\n                </div>\r\n            </header>\r\n        </ng-container>\r\n        <main>\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </main>\r\n    </div>\r\n</div>", directives: [{ type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
             args: [{
@@ -5313,7 +5478,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
     }
 }
 AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", fitParent: "fitParent", value: "value", items: "items", multiple: "multiple", allowNull: "allowNull", valueField: "valueField", textField: "textField" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { listeners: { "document:keydown": "_handleKeydown($event)" }, classAttribute: "ax-select-box" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: AXDropdownComponent, descendants: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down (onOpened)=\"_emitOnOpenedEvent()\" (onClosed)=\"_emitOnClosedEvent()\">\r\n    <ng-container input>\r\n        <ng-content select=\"ax-prefix\">\r\n        </ng-content>\r\n        <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n            <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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", fitParent: "fitParent", value: "value", items: "items", multiple: "multiple", allowNull: "allowNull", valueField: "valueField", textField: "textField" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { listeners: { "document:keydown": "_handleKeydown($event)" }, classAttribute: "ax-select-box" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: AXDropdownComponent, descendants: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down (onOpened)=\"_emitOnOpenedEvent()\" (onClosed)=\"_emitOnClosedEvent()\">\r\n    <ng-container input>\r\n        <ng-content select=\"ax-prefix\">\r\n        </ng-content>\r\n        <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close\" (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n            <!-- <div class=\"ax-selectbox-input\">\r\n                <input type=\"text\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleKeydown($event)\">\r\n            </div> -->\r\n            <ng-content select=\"ax-suffix\">\r\n            </ng-content>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"ax-list ax-list-container\" panel>\r\n        <div class=\"ax-list-items-container ax-vertical ax-default\" (scroll)=\"_handleListScroll($event)\" #listContainer>\r\n            <ng-container *ngFor=\"let item of displayItems;let i = index;trackBy : _trackByFunction\">\r\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                    <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-template #defualtTemplate>\r\n                    <ng-container *ngIf=\"!multiple; then singleTemplate; else multipleTemplate\"></ng-container>\r\n                    <ng-template #singleTemplate>\r\n                        <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\" [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                            {{ _getItemDisplayTextTemplte(item) }}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #multipleTemplate>\r\n                        <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\" [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                            <ax-check-box [value]=\"isItemSelected(item)\">\r\n                            </ax-check-box>\r\n                            {{ _getItemDisplayTextTemplte(item) }}\r\n\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n                <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                    <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template #elseTemplate>\r\n                    Empty!\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"isLoading\">\r\n                <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                    <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template #elseLoadingTemplate>\r\n                    <div class=\"ax-list-loading-container\">\r\n                        <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n                    </div>\r\n                </ng-template>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -5367,7 +5532,7 @@ class AXSelectionListComponent extends AXBaseSelectionValueMixin {
     }
 }
 AXSelectionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectionListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXSelectionListComponent, selector: "ax-selection-list", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", valueField: "valueField", textField: "textField", multiple: "multiple", items: "items", selectionMode: "selectionMode", cssClass: "cssClass", direction: "direction" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <input [id]=\"id+'-'+i\" class=\"ax-checkbox\" type=\"checkbox\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <input [id]=\"id+'-'+i\" class=\"ax-radio\" type=\"radio\" [attr.name]=\"id\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXSelectionListComponent, selector: "ax-selection-list", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", valueField: "valueField", textField: "textField", multiple: "multiple", items: "items", selectionMode: "selectionMode", cssClass: "cssClass", direction: "direction" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <input [id]=\"id+'-'+i\" class=\"ax-checkbox\" type=\"checkbox\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectionListComponent, decorators: [{
             type: Component,
             args: [{
@@ -5665,7 +5830,7 @@ class AXTabItemComponent extends AXBaseClickableMixin {
     }
     // @HostBinding('class')
     // private get __hostClass(): string {
-    //     debugger;
+    //     ;
     //     const classes: any = {
     //         'ax-state-active': this.active
     //     }
@@ -5808,7 +5973,7 @@ class AXTabContentDirective {
         return this._portal;
     }
     set portal(v) {
-        //debugger;
+        //;
         if (v) {
             this._portal = v;
             this._viewContainerRef.clear();
@@ -5941,7 +6106,7 @@ class AXTimeBoxComponent extends AXBaseTextBoxMixin {
         this._emitOnFocusEvent(e);
     }
 }
-AXTimeBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.MaskApplierService }], target: i0.ɵɵFactoryTarget.Component });
+AXTimeBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.MaskApplierService }], target: i0.ɵɵFactoryTarget.Component });
 AXTimeBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTimeBoxComponent, selector: "ax-time-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", name: "name", minValue: "minValue", maxValue: "maxValue", format: "format", displayText: "displayText" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", displayTextChange: "displayTextChange" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-time-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\" [attr.pattern]=\"'[\\d\\.]*'\" [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && allowNull && !(disabled || readonly)\">\r\n    <i class=\"ax-icon-x icon\"></i>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxComponent, decorators: [{
             type: Component,
@@ -5954,7 +6119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     host: { class: 'ax-time-box ax-editor-container' },
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.MaskApplierService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.MaskApplierService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }], minValue: [{
@@ -5981,7 +6146,7 @@ class AXTimeBoxModule {
 AXTimeBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXTimeBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxModule, declarations: [AXTimeBoxComponent], imports: [CommonModule,
         FormsModule,
-        AXButtonModule, i1$3.NgxMaskModule], exports: [AXTimeBoxComponent] });
+        AXButtonModule, i1$2.NgxMaskModule], exports: [AXTimeBoxComponent] });
 AXTimeBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxModule, providers: [], imports: [[...MODULES$2]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxModule, decorators: [{
             type: NgModule,
@@ -6304,90 +6469,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 }]
         }] });
 
-/**
- * The Textbox is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-class AXTextBoxComponent extends AXBaseTextBoxMixin {
-    /**
-    *  @ignore
-    */
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-    //TODO: prefix suffix text
-    get hostClass() {
-        return `${this.cssClass} ax-${this.size}`;
-    }
-}
-AXTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTextBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", cssClass: "cssClass", size: "size", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", value: "value", name: "name" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-text-box ax-editor-container" }, queries: [{ propertyName: "_contentMask", first: true, predicate: AXInputMaskComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" type=\"text\" [mask]=\"_contentMask?.mask\" [prefix]=\"_contentMask?.prefix\"\r\n    [suffix]=\"_contentMask?.suffix\" [showMaskTyped]=\"_contentMask?.showMaskTyped\" [attr.placeholder]=\"placeholder\"\r\n    [attr.maxlength]=\"maxLength\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\"\r\n    [attr.autocomplete]=\"autoComplete ? 'on': 'off'\">\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && allowNull &&  !(disabled || readonly)\">\r\n    <ax-prefix>\r\n        <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n    </ax-prefix>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$3.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTextBoxComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-text-box',
-                    templateUrl: 'textbox.component.html',
-                    inputs: [
-                        'disabled',
-                        'readonly',
-                        'tabIndex',
-                        'cssClass',
-                        'size',
-                        ...TEXTBOX_INPUTS,
-                    ],
-                    outputs: [
-                        'valueChange',
-                        'onValueChanged',
-                        'onBlur',
-                        'onFocus',
-                        ...TEXTBOX_OUTPUT,
-                    ],
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'ax-text-box ax-editor-container' },
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _contentMask: [{
-                type: ContentChild,
-                args: [AXInputMaskComponent]
-            }], hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class AXTextBoxModule {
-}
-AXTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTextBoxModule, declarations: [AXTextBoxComponent], imports: [CommonModule,
-        FormsModule,
-        AXButtonModule,
-        AXEditorDecoratorModule,
-        AXIconModule, i1$3.NgxMaskModule], exports: [AXTextBoxComponent] });
-AXTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTextBoxModule, providers: [], imports: [[
-            CommonModule,
-            FormsModule,
-            AXButtonModule,
-            AXEditorDecoratorModule,
-            AXIconModule,
-            NgxMaskModule.forChild()
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTextBoxModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        AXButtonModule,
-                        AXEditorDecoratorModule,
-                        AXIconModule,
-                        NgxMaskModule.forChild()
-                    ],
-                    exports: [AXTextBoxComponent],
-                    declarations: [AXTextBoxComponent],
-                    providers: [],
-                }]
-        }] });
-
 // @dynamic
 class AXValidationRules {
     static addRule(name, rule) {
@@ -6533,5 +6614,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXAlertButtonComponent, AXAlertComponent, AXAlertContentComponent, AXAlertFooterComponent, AXAlertModule, AXAlertSuffixComponent, AXAlertTitleComponent, AXAvatarComponent, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseItemButtonMixin, AXBasePageComponent, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatepickerComponent, AXDatepickerModule, AXDecoratorContentComponent, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent, AXDrawerModule, AXDropdownComponent, AXDropdownModule, AXDropdownPanelComponent, AXEditorDecoratorModule, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXIconComponent, AXIconModule, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXItemClickEvent, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXNumberBoxComponent, AXNumberBoxModule, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageFooterComponent, AXPageModule, AXPageResult, AXPasswordBoxComponent, AXPasswordBoxModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXRadioComponent, AXRadioModule, AXRangeSliderComponent, AXRangeSliderModule, AXResponsiveDirective, AXSelectBoxComponent, AXSelectBoxModule, AXSelectionListComponent, AXSelectionListModule, AXSelectionValueChangedEvent, AXSideMenuComponent, AXSideMenuModule, AXSizableComponentMixin, AXSwitchComponent, AXSwitchModule, AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabStripComponent, AXTabViewComponent, AXTabsComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, TAB_META_KEY, _BaseComponenetMixin };
+export { AXAlertButtonComponent, AXAlertComponent, AXAlertContentComponent, AXAlertFooterComponent, AXAlertModule, AXAlertSuffixComponent, AXAlertTitleComponent, AXAvatarComponent, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDatePickerMixin, AXBaseDropdownMixin, AXBaseItemButtonMixin, AXBasePageComponent, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatePickerComponent, AXDatepickerModule, AXDecoratorContentComponent, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent, AXDrawerModule, AXDropdownComponent, AXDropdownModule, AXDropdownPanelComponent, AXEditorDecoratorModule, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXIconComponent, AXIconModule, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXItemClickEvent, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXNumberBoxComponent, AXNumberBoxModule, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageFooterComponent, AXPageModule, AXPageResult, AXPasswordBoxComponent, AXPasswordBoxModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXRadioComponent, AXRadioModule, AXRangeSliderComponent, AXRangeSliderModule, AXResponsiveDirective, AXSelectBoxComponent, AXSelectBoxModule, AXSelectionListComponent, AXSelectionListModule, AXSelectionValueChangedEvent, AXSideMenuComponent, AXSideMenuModule, AXSizableComponentMixin, AXSwitchComponent, AXSwitchModule, AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabStripComponent, AXTabViewComponent, AXTabsComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, TAB_META_KEY, _BaseComponenetMixin };
 //# sourceMappingURL=acorex-components.js.map