@acorex/components 5.0.10 → 5.0.16

package/{fesm2015/acorex-components.js → fesm2020/acorex-components.mjs}

@@ -1,38 +1,38 @@
 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;
+var _AXBaseComponent_elementRef;
 class AXBaseComponent {
     /**
     *  @ignore
     */
     constructor(...args) {
         this.id = `AX${Math.round(Math.random() * Math.pow(10, 10))}`;
-        _elementRef.set(this, void 0);
-        __classPrivateFieldSet(this, _elementRef, args[0]);
+        _AXBaseComponent_elementRef.set(this, void 0);
+        __classPrivateFieldSet(this, _AXBaseComponent_elementRef, args[0], "f");
         this._cdr = args[1];
     }
     ngOnInit() {
@@ -47,7 +47,7 @@ class AXBaseComponent {
         this._onInternalDestroy();
     }
     _getHostElement() {
-        return __classPrivateFieldGet(this, _elementRef).nativeElement;
+        return __classPrivateFieldGet(this, _AXBaseComponent_elementRef, "f").nativeElement;
     }
     _getInnerElement() {
         return this._getHostElement().firstElementChild;
@@ -78,16 +78,32 @@ class AXBaseComponent {
     }
     onDestroy() {
     }
-    onOptionChanging(option) {
-        return option === null || option === void 0 ? void 0 : option.value;
+    _onOptionChanging(option) {
+        return 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();
-AXBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBaseComponent, deps: [{ token: Array }], target: i0.ɵɵFactoryTarget.Injectable });
-AXBaseComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBaseComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBaseComponent, decorators: [{
+_AXBaseComponent_elementRef = new WeakMap();
+AXBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXBaseComponent, deps: [{ token: Array }], target: i0.ɵɵFactoryTarget.Injectable });
+AXBaseComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXBaseComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXBaseComponent, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
@@ -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',
@@ -275,57 +279,56 @@ function _DatalistComponenetMixin(Base) {
                 _items.set(this, []);
             }
             get totalCount() {
-                return __classPrivateFieldGet(this, _totalItems);
+                return __classPrivateFieldGet(this, _totalItems, "f");
             }
             get loadedCount() {
-                var _a;
-                return ((_a = __classPrivateFieldGet(this, _loadedItems)) === null || _a === void 0 ? void 0 : _a.length) || 0;
+                return __classPrivateFieldGet(this, _loadedItems, "f")?.length || 0;
             }
             get items() {
-                return __classPrivateFieldGet(this, _items);
+                return __classPrivateFieldGet(this, _items, "f");
             }
             set items(v) {
-                __classPrivateFieldSet(this, _items, v);
+                __classPrivateFieldSet(this, _items, v, "f");
             }
             get displayItems() {
                 if (Array.isArray(this.items)) {
-                    return __classPrivateFieldGet(this, _items) || [];
+                    return __classPrivateFieldGet(this, _items, "f") || [];
                 }
-                else if (typeof __classPrivateFieldGet(this, _items) == 'function') {
-                    return __classPrivateFieldGet(this, _loadedItems) || [];
+                else if (typeof __classPrivateFieldGet(this, _items, "f") == 'function') {
+                    return __classPrivateFieldGet(this, _loadedItems, "f") || [];
                 }
                 return [];
             }
             get isLoading() {
-                return __classPrivateFieldGet(this, _isLoading);
+                return __classPrivateFieldGet(this, _isLoading, "f");
             }
             _fetchData() {
-                if ((this.loadedCount >= this.totalCount && this.totalCount != 0) || __classPrivateFieldGet(this, _isLoading) || !__classPrivateFieldGet(this, _isLazy)) {
+                if ((this.loadedCount >= this.totalCount && this.totalCount != 0) || __classPrivateFieldGet(this, _isLoading, "f") || !__classPrivateFieldGet(this, _isLazy, "f")) {
                     return;
                 }
-                if (__classPrivateFieldGet(this, _items)) {
-                    __classPrivateFieldSet(this, _isLoading, true);
-                    __classPrivateFieldGet(this, _items).call(this, { skip: __classPrivateFieldGet(this, _currentPage) * this.pageSize, take: this.pageSize }).then(c => {
+                if (__classPrivateFieldGet(this, _items, "f")) {
+                    __classPrivateFieldSet(this, _isLoading, true, "f");
+                    __classPrivateFieldGet(this, _items, "f").call(this, { skip: __classPrivateFieldGet(this, _currentPage, "f") * this.pageSize, take: this.pageSize }).then(c => {
                         var _a;
                         if (Array.isArray(c)) {
-                            __classPrivateFieldSet(this, _loadedItems, c);
-                            __classPrivateFieldSet(this, _totalItems, c.length);
+                            __classPrivateFieldSet(this, _loadedItems, c, "f");
+                            __classPrivateFieldSet(this, _totalItems, c.length, "f");
                         }
                         else {
-                            __classPrivateFieldSet(this, _totalItems, c.total || ((_a = c.items) === null || _a === void 0 ? void 0 : _a.length) || 0);
-                            __classPrivateFieldSet(this, _loadedItems, __classPrivateFieldGet(this, _loadedItems).concat(c.items));
-                            __classPrivateFieldSet(this, _currentPage, +__classPrivateFieldGet(this, _currentPage) + 1);
+                            __classPrivateFieldSet(this, _totalItems, c.total || c.items?.length || 0, "f");
+                            __classPrivateFieldSet(this, _loadedItems, __classPrivateFieldGet(this, _loadedItems, "f").concat(c.items), "f");
+                            __classPrivateFieldSet(this, _currentPage, (_a = __classPrivateFieldGet(this, _currentPage, "f"), _a++, _a), "f");
                         }
                         this._cdr.markForCheck();
                     }).finally(() => {
-                        __classPrivateFieldSet(this, _isLoading, false);
+                        __classPrivateFieldSet(this, _isLoading, false, "f");
                         this._onDataLoaded();
                     });
                 }
             }
             _onInternalInit() {
-                if (typeof __classPrivateFieldGet(this, _items) == 'function') {
-                    __classPrivateFieldSet(this, _isLazy, true);
+                if (typeof __classPrivateFieldGet(this, _items, "f") == 'function') {
+                    __classPrivateFieldSet(this, _isLazy, true, "f");
                     this._fetchData();
                 }
                 super._onInternalInit();
@@ -354,17 +357,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,27 +376,84 @@ 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() {
+            return this.popover?.isOpen;
+        }
     }
-    _readonly = new WeakMap();
     return Mixin;
-}
+}
+const DROPDOWN_INPUTS = [
+    'isOpen',
+    'fitParent',
+    'dropdownWidth',
+    'position'
+];
+const DROPDOWN_OUTPUT = ['onOpened', 'onClosed'];
 
 function _InteractiveComponenetMixin(Base) {
-    var _disabled, _tabIndex;
+    var _Mixin_disabled, _Mixin_tabIndex;
     class Mixin extends Base {
         /**
         *  @ignore
         */
         constructor(...args) {
             super(...args);
-            _disabled.set(this, false);
-            _tabIndex.set(this, null);
+            _Mixin_disabled.set(this, false);
+            _Mixin_tabIndex.set(this, null);
             /**
             *  Fires each time the component gets focused.
             *  @event
@@ -410,22 +468,22 @@ function _InteractiveComponenetMixin(Base) {
         /**
         *  If set to true, it disables the component.
         */
-        get disabled() { return __classPrivateFieldGet(this, _disabled); }
+        get disabled() { return __classPrivateFieldGet(this, _Mixin_disabled, "f"); }
         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 });
+                __classPrivateFieldSet(this, _Mixin_disabled, coerceBooleanProperty(value), "f");
+                this._onOptionChanged({ name: 'disabled', oldValue, newValue: value });
                 this._cdr.markForCheck();
             }
         }
         /**
         *  Specifies the tabindex of the component.
         */
-        get tabIndex() { return this.disabled || this.readonly ? -1 : __classPrivateFieldGet(this, _tabIndex); }
+        get tabIndex() { return this.disabled || this.readonly ? -1 : __classPrivateFieldGet(this, _Mixin_tabIndex, "f"); }
         set tabIndex(value) {
-            __classPrivateFieldSet(this, _tabIndex, value != null ? coerceNumberProperty(value) : 0);
+            __classPrivateFieldSet(this, _Mixin_tabIndex, value != null ? coerceNumberProperty(value) : 0, "f");
         }
         _emitOnFocusEvent(e) {
             this.onFocus.emit({
@@ -451,7 +509,7 @@ function _InteractiveComponenetMixin(Base) {
             }
         }
     }
-    _disabled = new WeakMap(), _tabIndex = new WeakMap();
+    _Mixin_disabled = new WeakMap(), _Mixin_tabIndex = new WeakMap();
     return Mixin;
 }
 const INTERACTIVE_INPUTS = [
@@ -660,39 +718,39 @@ function _ValueComponenetMixin(Base) {
             *  If set to true, user cannot change the value of component.
             */
             get readonly() {
-                return __classPrivateFieldGet(this, _readonly);
+                return __classPrivateFieldGet(this, _readonly, "f");
             }
             set readonly(value) {
-                __classPrivateFieldSet(this, _readonly, coerceBooleanProperty(value));
+                __classPrivateFieldSet(this, _readonly, coerceBooleanProperty(value), "f");
             }
             get allowNull() {
-                return __classPrivateFieldGet(this, _allowNull);
+                return __classPrivateFieldGet(this, _allowNull, "f");
             }
             set allowNull(value) {
-                __classPrivateFieldSet(this, _allowNull, coerceBooleanProperty(value));
+                __classPrivateFieldSet(this, _allowNull, coerceBooleanProperty(value), "f");
             }
             get name() {
-                return __classPrivateFieldGet(this, _name);
+                return __classPrivateFieldGet(this, _name, "f");
             }
             set name(value) {
-                __classPrivateFieldSet(this, _name, value);
+                __classPrivateFieldSet(this, _name, value, "f");
             }
             get debounceTime() {
-                return __classPrivateFieldGet(this, _debounceTime);
+                return __classPrivateFieldGet(this, _debounceTime, "f");
             }
             set debounceTime(value) {
-                __classPrivateFieldSet(this, _debounceTime, coerceNumberProperty(value));
+                __classPrivateFieldSet(this, _debounceTime, coerceNumberProperty(value), "f");
             }
             get value() {
-                return __classPrivateFieldGet(this, _value);
+                return __classPrivateFieldGet(this, _value, "f");
             }
             set value(v) {
-                v = this._onValueChanging(v);
+                v = this._onInternalValueChanging(v);
                 if (!this._isInited || this.debounceTime == 0) {
                     this._setValue(v);
                 }
                 else {
-                    __classPrivateFieldGet(this, _valueSubject).next(v);
+                    __classPrivateFieldGet(this, _valueSubject, "f").next(v);
                 }
             }
             _emitOnValueChangedEvent(oldValue, newValue) {
@@ -703,7 +761,12 @@ function _ValueComponenetMixin(Base) {
                     oldValue: oldValue,
                     name: this.name
                 });
-                this._onValueChanged(oldValue, __classPrivateFieldGet(this, _value));
+                this._onValueChanged(oldValue, __classPrivateFieldGet(this, _value, "f"));
+            }
+            _onInternalValueChanging(value) {
+                if (this.readonly)
+                    return this.value;
+                return this._onValueChanging(value);
             }
             _onValueChanging(value) {
                 return value;
@@ -711,23 +774,24 @@ function _ValueComponenetMixin(Base) {
             _onValueChanged(oldValue, newValue) { }
             _onInternalInit() {
                 this._getHostElement().setAttribute('ax-form-input', 'true');
-                __classPrivateFieldSet(this, _valueSubscription, __classPrivateFieldGet(this, _valueSubject).pipe(debounceTime(__classPrivateFieldGet(this, _debounceTime)))
+                __classPrivateFieldSet(this, _valueSubscription, __classPrivateFieldGet(this, _valueSubject, "f")
+                    .pipe(debounceTime(__classPrivateFieldGet(this, _debounceTime, "f")))
                     .pipe(distinctUntilChanged())
                     .subscribe((v) => {
                     this._setValue(v);
-                }));
+                }), "f");
                 super._onInternalInit();
             }
             _onInternalDestroy() {
-                __classPrivateFieldGet(this, _valueSubscription).unsubscribe();
+                __classPrivateFieldGet(this, _valueSubscription, "f").unsubscribe();
                 super.onDestroy();
             }
             _setValue(v) {
-                const old = __classPrivateFieldGet(this, _value);
+                const old = __classPrivateFieldGet(this, _value, "f");
                 // TODO: check real equality
                 if (v != old) {
-                    __classPrivateFieldSet(this, _value, v);
-                    this._emitOnValueChangedEvent(old, __classPrivateFieldGet(this, _value));
+                    __classPrivateFieldSet(this, _value, v, "f");
+                    this._emitOnValueChangedEvent(old, __classPrivateFieldGet(this, _value, "f"));
                     this._cdr.markForCheck();
                     if (v == null || v == undefined || v == '') {
                         this._setErrorState('clear');
@@ -751,7 +815,7 @@ function _ValueComponenetMixin(Base) {
                 }
                 return new Promise((resolve) => {
                     Promise.all(rules
-                        .filter((c) => { var _a; return typeof ((_a = c) === null || _a === void 0 ? void 0 : _a.validate) === 'function'; })
+                        .filter((c) => typeof c?.validate === 'function')
                         .map((c) => {
                         return c.validate(this.value);
                     })).then((d) => {
@@ -771,8 +835,8 @@ function _ValueComponenetMixin(Base) {
                 const container = this._getHostElement().classList.contains('ax-editor-container') ?
                     this._getHostElement() :
                     this._getHostElement().querySelector('.ax-editor-container');
-                const formField = container === null || container === void 0 ? void 0 : container.closest('.ax-form-field');
-                const label = formField === null || formField === void 0 ? void 0 : formField.querySelector('ax-label');
+                const formField = container?.closest('.ax-form-field');
+                const label = formField?.querySelector('ax-label');
                 const target = container || this._getInnerElement();
                 const parent = target.parentElement;
                 switch (state) {
@@ -780,7 +844,7 @@ function _ValueComponenetMixin(Base) {
                         if (parent.querySelector('span.ax-error-msg')) {
                             parent.removeChild(parent.querySelector('span.ax-error-msg'));
                         }
-                        label === null || label === void 0 ? void 0 : label.classList.remove('ax-state-error');
+                        label?.classList.remove('ax-state-error');
                         target.classList.remove('ax-state-error', 'ax-state-success');
                         break;
                     case 'success':
@@ -795,7 +859,7 @@ function _ValueComponenetMixin(Base) {
                             span.classList.add('ax-error-msg');
                             parent.appendChild(span);
                         }
-                        label === null || label === void 0 ? void 0 : label.classList.add('ax-state-error');
+                        label?.classList.add('ax-state-error');
                         target.classList.add('ax-state-error');
                         break;
                 }
@@ -865,7 +929,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
@@ -951,19 +1015,19 @@ class AXResponsiveDirective {
         this._observer.unobserve(this._elementRef.nativeElement);
     }
 }
-AXResponsiveDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXResponsiveDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-AXResponsiveDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.6", type: AXResponsiveDirective, selector: "[ax-responsive]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXResponsiveDirective, decorators: [{
+AXResponsiveDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXResponsiveDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+AXResponsiveDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: AXResponsiveDirective, selector: "[ax-responsive]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXResponsiveDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ax-responsive]' }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
 class AXCommonModule {
 }
-AXCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCommonModule, declarations: [AXResponsiveDirective], exports: [AXResponsiveDirective] });
-AXCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCommonModule, providers: [], imports: [[]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCommonModule, decorators: [{
+AXCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCommonModule, declarations: [AXResponsiveDirective], exports: [AXResponsiveDirective] });
+AXCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCommonModule, providers: [], imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -973,7 +1037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 }]
         }] });
 
-var _visible;
+var _AXAlertComponent_visible;
 /**
  * Regular description
  *
@@ -986,7 +1050,7 @@ class AXAlertComponent extends AXBaseComponentMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
         this.typeChange = new EventEmitter();
-        _visible.set(this, void 0);
+        _AXAlertComponent_visible.set(this, void 0);
     }
     /**
     *  The Alert allows you to set different types of alerts
@@ -1019,11 +1083,11 @@ class AXAlertComponent extends AXBaseComponentMixin {
     *  set the visibility of the Alert
     */
     get visible() {
-        return __classPrivateFieldGet(this, _visible);
+        return __classPrivateFieldGet(this, _AXAlertComponent_visible, "f");
     }
     set visible(v) {
-        if (__classPrivateFieldGet(this, _visible) != v) {
-            __classPrivateFieldSet(this, _visible, v);
+        if (__classPrivateFieldGet(this, _AXAlertComponent_visible, "f") != v) {
+            __classPrivateFieldSet(this, _AXAlertComponent_visible, v, "f");
             const host = this._getHostElement();
             if (v) {
                 host.classList.remove('ax-state-hidden');
@@ -1071,18 +1135,12 @@ class AXAlertComponent extends AXBaseComponentMixin {
         this.visible = true;
     }
 }
-_visible = new WeakMap();
-AXAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXAlertComponent, selector: "ax-alert", inputs: { icon: "icon", color: "color", timeOut: "timeOut", visible: "visible" }, outputs: { typeChange: "typeChange" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-alert ax-none" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-alert-icon\" *ngIf=\"icon\">\r\n    <i class=\"{{icon}} fa-lg\"></i>\r\n</div>\r\n<div class=\"ax-alert-body\">\r\n    <ng-content select=\"ax-alert-title\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-content\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-footer\">\r\n    </ng-content>\r\n</div>\r\n<ng-content select=\"ax-alert-suffix\">\r\n</ng-content>", directives: [{ type: 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: AXAlertComponent, decorators: [{
+_AXAlertComponent_visible = new WeakMap();
+AXAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAlertComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXAlertComponent, selector: "ax-alert", inputs: { icon: "icon", color: "color", timeOut: "timeOut", visible: "visible" }, outputs: { typeChange: "typeChange" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-alert ax-none" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-alert-icon\" *ngIf=\"icon\">\r\n    <i class=\"{{icon}} fa-lg\"></i>\r\n</div>\r\n<div class=\"ax-alert-body\">\r\n    <ng-content select=\"ax-alert-title\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-content\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-footer\">\r\n    </ng-content>\r\n</div>\r\n<ng-content select=\"ax-alert-suffix\">\r\n</ng-content>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAlertComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-alert',
-                    templateUrl: './alert.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-alert ax-none' }
-                }]
+            args: [{ selector: 'ax-alert', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-alert ax-none' }, template: "<div class=\"ax-alert-icon\" *ngIf=\"icon\">\r\n    <i class=\"{{icon}} fa-lg\"></i>\r\n</div>\r\n<div class=\"ax-alert-body\">\r\n    <ng-content select=\"ax-alert-title\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-content\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-footer\">\r\n    </ng-content>\r\n</div>\r\n<ng-content select=\"ax-alert-suffix\">\r\n</ng-content>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { icon: [{
                 type: Input
             }], typeChange: [{
@@ -1100,12 +1158,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
 
 class AXAlertTitleComponent {
 }
-AXAlertTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXAlertTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXAlertTitleComponent, selector: "ax-alert-title", host: { classAttribute: "ax-alert-title" }, ngImport: i0, template: `
+AXAlertTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAlertTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXAlertTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXAlertTitleComponent, selector: "ax-alert-title", host: { classAttribute: "ax-alert-title" }, ngImport: i0, template: `
         <ng-content>
         </ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAlertTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-alert-title',
@@ -1133,12 +1191,12 @@ class AXAlertButtonComponent extends AXBaseClickableMixin {
         this._emitOnBlurEvent(e);
     }
 }
-AXAlertButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXAlertButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXAlertButtonComponent, selector: "ax-alert-button", inputs: { title: "title", icon: "icon" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange" }, host: { listeners: { "click": "_handleOnClick($event)", "focus": "_handleOnFocus($event)", "blur": "_handleOnBlur($event)" }, classAttribute: "ax-alert-button" }, usesInheritance: true, ngImport: i0, template: `
+AXAlertButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAlertButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXAlertButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXAlertButtonComponent, selector: "ax-alert-button", inputs: { title: "title", icon: "icon" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange" }, host: { listeners: { "click": "_handleOnClick($event)", "focus": "_handleOnFocus($event)", "blur": "_handleOnBlur($event)" }, classAttribute: "ax-alert-button" }, usesInheritance: true, ngImport: i0, template: `
        {{title}}
        <i *ngIf="icon" class="{{icon}}"></i>
     `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAlertButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-alert-button',
@@ -1168,11 +1226,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
 
 class AXAlertContentComponent {
 }
-AXAlertContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXAlertContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXAlertContentComponent, selector: "ax-alert-content", host: { classAttribute: "ax-alert-content" }, ngImport: i0, template: `<ng-content>
+AXAlertContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAlertContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXAlertContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXAlertContentComponent, selector: "ax-alert-content", host: { classAttribute: "ax-alert-content" }, ngImport: i0, template: `<ng-content>
         </ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAlertContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-alert-content',
@@ -1187,14 +1245,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
 
 class AXAlertSuffixComponent {
 }
-AXAlertSuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXAlertSuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXAlertSuffixComponent, selector: "ax-alert-suffix", host: { classAttribute: "ax-alert-suffix" }, ngImport: i0, template: `
+AXAlertSuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAlertSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXAlertSuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXAlertSuffixComponent, selector: "ax-alert-suffix", host: { classAttribute: "ax-alert-suffix" }, ngImport: i0, template: `
         <div class="ax-alert-buttons">
             <ng-content select="ax-alert-button">
             </ng-content>
         </div>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertSuffixComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAlertSuffixComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-alert-suffix',
@@ -1212,14 +1270,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
 
 class AXAlertFooterComponent {
 }
-AXAlertFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXAlertFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXAlertFooterComponent, selector: "ax-alert-footer", host: { classAttribute: "ax-alert-footer" }, ngImport: i0, template: `
+AXAlertFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAlertFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXAlertFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXAlertFooterComponent, selector: "ax-alert-footer", host: { classAttribute: "ax-alert-footer" }, ngImport: i0, template: `
         <div class="ax-alert-buttons">
             <ng-content select="ax-alert-button">
             </ng-content>
         </div>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAlertFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-alert-footer',
@@ -1246,8 +1304,8 @@ const COMPONENT$o = [
 const MODULES$o = [CommonModule];
 class AXAlertModule {
 }
-AXAlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertModule, declarations: [AXAlertComponent,
+AXAlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAlertModule, declarations: [AXAlertComponent,
         AXAlertContentComponent,
         AXAlertTitleComponent,
         AXAlertButtonComponent,
@@ -1258,8 +1316,8 @@ AXAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         AXAlertButtonComponent,
         AXAlertFooterComponent,
         AXAlertSuffixComponent] });
-AXAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertModule, providers: [], imports: [[...MODULES$o]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertModule, decorators: [{
+AXAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAlertModule, providers: [], imports: [[...MODULES$o]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAlertModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$o],
@@ -1298,18 +1356,11 @@ class AXAvatarComponent extends AXSizableComponentMixin {
         this._abbr = v;
     }
 }
-AXAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAvatarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXAvatarComponent, selector: "ax-avatar", inputs: { rtl: "rtl", cssClass: "cssClass", cssStyle: "cssStyle", size: "size", image: "image", title: "title", icon: "icon", abbr: "abbr" }, host: { classAttribute: "ax-avatar" }, usesInheritance: true, ngImport: i0, template: "\r\n<div>Hi ax-avatar</div>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAvatarComponent, decorators: [{
+AXAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAvatarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXAvatarComponent, selector: "ax-avatar", inputs: { rtl: "rtl", cssClass: "cssClass", cssStyle: "cssStyle", size: "size", image: "image", title: "title", icon: "icon", abbr: "abbr" }, host: { classAttribute: "ax-avatar" }, usesInheritance: true, ngImport: i0, template: "\r\n<div>Hi ax-avatar</div>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAvatarComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-avatar',
-                    templateUrl: './avatar.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    inputs: [...BASE_INPUTS, ...SIZABLE_INPUTS],
-                    host: { class: 'ax-avatar' }
-                }]
+            args: [{ selector: 'ax-avatar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: [...BASE_INPUTS, ...SIZABLE_INPUTS], host: { class: 'ax-avatar' }, template: "\r\n<div>Hi ax-avatar</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { image: [{
                 type: Input
             }], title: [{
@@ -1324,10 +1375,10 @@ const COMPONENT$n = [AXAvatarComponent];
 const MODULES$n = [CommonModule];
 class AXAvatarModule {
 }
-AXAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAvatarModule, declarations: [AXAvatarComponent], imports: [CommonModule], exports: [AXAvatarComponent] });
-AXAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAvatarModule, providers: [], imports: [[...MODULES$n]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAvatarModule, decorators: [{
+AXAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAvatarModule, declarations: [AXAvatarComponent], imports: [CommonModule], exports: [AXAvatarComponent] });
+AXAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAvatarModule, providers: [], imports: [[...MODULES$n]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$n],
@@ -1348,17 +1399,11 @@ class AXBadgeComponent extends AXBaseComponentMixin {
         return [`ax-bg-${this.color}-100`, `ax-text-${this.color}-500`].join(' ');
     }
 }
-AXBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBadgeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXBadgeComponent, selector: "ax-badge", inputs: { text: "text", color: "color" }, host: { properties: { "class": "this.__hostClass" }, classAttribute: "ax-badge" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<span class=\"ax-font-medium\">{{text}}</span>\r\n<ng-content select=\"ax-suffix\"></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBadgeComponent, decorators: [{
+AXBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXBadgeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXBadgeComponent, selector: "ax-badge", inputs: { text: "text", color: "color" }, host: { properties: { "class": "this.__hostClass" }, classAttribute: "ax-badge" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<span class=\"ax-font-medium\">{{text}}</span>\r\n<ng-content select=\"ax-suffix\"></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXBadgeComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-badge',
-                    templateUrl: './badge.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-badge' }
-                }]
+            args: [{ selector: 'ax-badge', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-badge' }, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<span class=\"ax-font-medium\">{{text}}</span>\r\n<ng-content select=\"ax-suffix\"></ng-content>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
                 type: Input
             }], color: [{
@@ -1372,10 +1417,10 @@ const COMPONENT$m = [AXBadgeComponent];
 const MODULES$m = [CommonModule];
 class AXBadgeModule {
 }
-AXBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBadgeModule, declarations: [AXBadgeComponent], imports: [CommonModule], exports: [AXBadgeComponent] });
-AXBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBadgeModule, providers: [], imports: [[...MODULES$m]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBadgeModule, decorators: [{
+AXBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXBadgeModule, declarations: [AXBadgeComponent], imports: [CommonModule], exports: [AXBadgeComponent] });
+AXBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXBadgeModule, providers: [], imports: [[...MODULES$m]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXBadgeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$m],
@@ -1423,19 +1468,11 @@ class AXButtonComponent extends AXBaseButtonMixin {
         return Object.entries(this._classes).filter(c => c[1]).map(c => c[0]).concat(...[`ax-${this.size}`]).join(' ');
     }
 }
-AXButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXButtonComponent, selector: "ax-button", inputs: { disabled: "disabled", tabIndex: "tabIndex", size: "size", text: "text", submitBehavior: "submitBehavior", cancelBehavior: "cancelBehavior", color: "color", look: "look", toggleable: "toggleable", selected: "selected" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange" }, host: { attributes: { "role": "button" }, listeners: { "document:keydown.escape": "onKeydownHandler($event)", "click": "_emitOnClickEvent($event)", "focus": "_emitOnFocusEvent($event)", "blur": "_emitOnBlurEvent($event)" }, properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<!-- <button [ngClass]=\"_classes\" class=\"{{cssClass}} ax-{{size}}\" [disabled]=\"disabled\" [tabindex]=\"tabIndex\" [attr.style]=\"cssStyle\" (click)=\"_emitOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n  <ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n  </ng-content>\r\n  <span *ngIf=\"text\">{{text}}</span>\r\n  <ng-content select=\"ax-suffix\">\r\n  </ng-content>\r\n  <ng-content select=\"ax-dropdown-panel\">\r\n  </ng-content>\r\n</button> -->\r\n<!-- <button [ngClass]=\"_classes\" class=\"{{cssClass}} ax-{{size}}\" [disabled]=\"disabled\" [tabindex]=\"tabIndex\" [attr.style]=\"cssStyle\" (click)=\"_emitOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\"> -->\r\n<ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n</ng-content>\r\n<span *ngIf=\"text\">{{text}}</span>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-dropdown-panel\">\r\n</ng-content>\r\n<!-- </button> -->", directives: [{ type: 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: AXButtonComponent, decorators: [{
+AXButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXButtonComponent, selector: "ax-button", inputs: { disabled: "disabled", tabIndex: "tabIndex", size: "size", text: "text", submitBehavior: "submitBehavior", cancelBehavior: "cancelBehavior", color: "color", look: "look", toggleable: "toggleable", selected: "selected" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange" }, host: { attributes: { "role": "button" }, listeners: { "document:keydown.escape": "onKeydownHandler($event)", "click": "_emitOnClickEvent($event)", "focus": "_emitOnFocusEvent($event)", "blur": "_emitOnBlurEvent($event)" }, properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<!-- <button [ngClass]=\"_classes\" class=\"{{cssClass}} ax-{{size}}\" [disabled]=\"disabled\" [tabindex]=\"tabIndex\" [attr.style]=\"cssStyle\" (click)=\"_emitOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n  <ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n  </ng-content>\r\n  <span *ngIf=\"text\">{{text}}</span>\r\n  <ng-content select=\"ax-suffix\">\r\n  </ng-content>\r\n  <ng-content select=\"ax-dropdown-panel\">\r\n  </ng-content>\r\n</button> -->\r\n<!-- <button [ngClass]=\"_classes\" class=\"{{cssClass}} ax-{{size}}\" [disabled]=\"disabled\" [tabindex]=\"tabIndex\" [attr.style]=\"cssStyle\" (click)=\"_emitOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\"> -->\r\n<ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n</ng-content>\r\n<span *ngIf=\"text\">{{text}}</span>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-dropdown-panel\">\r\n</ng-content>\r\n<!-- </button> -->", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXButtonComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-button',
-                    templateUrl: './button.component.html',
-                    inputs: ['disabled', 'tabIndex', 'size', ...BUTTON_INPUTS],
-                    outputs: [...BUTTON_OUTPUT],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { role: 'button' }
-                }]
+            args: [{ selector: 'ax-button', inputs: ['disabled', 'tabIndex', 'size', ...BUTTON_INPUTS], outputs: [...BUTTON_OUTPUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { role: 'button' }, template: "<!-- <button [ngClass]=\"_classes\" class=\"{{cssClass}} ax-{{size}}\" [disabled]=\"disabled\" [tabindex]=\"tabIndex\" [attr.style]=\"cssStyle\" (click)=\"_emitOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n  <ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n  </ng-content>\r\n  <span *ngIf=\"text\">{{text}}</span>\r\n  <ng-content select=\"ax-suffix\">\r\n  </ng-content>\r\n  <ng-content select=\"ax-dropdown-panel\">\r\n  </ng-content>\r\n</button> -->\r\n<!-- <button [ngClass]=\"_classes\" class=\"{{cssClass}} ax-{{size}}\" [disabled]=\"disabled\" [tabindex]=\"tabIndex\" [attr.style]=\"cssStyle\" (click)=\"_emitOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\"> -->\r\n<ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n</ng-content>\r\n<span *ngIf=\"text\">{{text}}</span>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-dropdown-panel\">\r\n</ng-content>\r\n<!-- </button> -->" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { onKeydownHandler: [{
                 type: HostListener,
                 args: ['document:keydown.escape', ['$event']]
@@ -1469,7 +1506,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 +1521,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 +1536,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;
@@ -1549,18 +1586,11 @@ class AXButtonGroupComponent extends AXInteractiveComponenetMixin {
         });
     }
 }
-AXButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXButtonGroupComponent, selector: "ax-button-group", inputs: { cssClass: "cssClass", size: "size", cssStyle: "cssStyle", rtl: "rtl", disabled: "disabled", selection: "selection", color: "color", look: "look" }, outputs: { selectionChange: "selectionChange", colorChange: "colorChange", lookChange: "lookChange", onItemClick: "onItemClick" }, host: { attributes: { "role": "group" }, classAttribute: "ax-button-group" }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-button\">\r\n</ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonGroupComponent, decorators: [{
+AXButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXButtonGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXButtonGroupComponent, selector: "ax-button-group", inputs: { cssClass: "cssClass", size: "size", cssStyle: "cssStyle", rtl: "rtl", disabled: "disabled", selection: "selection", color: "color", look: "look" }, outputs: { selectionChange: "selectionChange", colorChange: "colorChange", lookChange: "lookChange", onItemClick: "onItemClick" }, host: { attributes: { "role": "group" }, classAttribute: "ax-button-group" }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-button\">\r\n</ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXButtonGroupComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-button-group',
-                    templateUrl: 'button-group.component.html',
-                    inputs: ['cssClass', 'size', 'cssStyle', 'rtl', 'disabled'],
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'ax-button-group', role: 'group' }
-                }]
+            args: [{ selector: 'ax-button-group', inputs: ['cssClass', 'size', 'cssStyle', 'rtl', 'disabled'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-button-group', role: 'group' }, template: "<ng-content select=\"ax-button\">\r\n</ng-content>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { selectionChange: [{
                 type: Output
             }], selection: [{
@@ -1606,8 +1636,8 @@ class AXButtonItemComponent extends AXBaseItemButtonMixin {
         return Object.entries(cssClasses).filter(c => c[1]).map(c => c[0]).join(' ');
     }
 }
-AXButtonItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXButtonItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXButtonItemComponent, selector: "ax-button-item", inputs: { text: "text", tooltip: "tooltip", selected: "selected", seperated: "seperated", name: "name", data: "data", color: "color" }, host: { listeners: { "click": "__hostClick($event)" }, properties: { "class": "this.__hostClass" }, styleAttribute: "cssStyle" }, usesInheritance: true, ngImport: i0, template: `
+AXButtonItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXButtonItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXButtonItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXButtonItemComponent, selector: "ax-button-item", inputs: { text: "text", tooltip: "tooltip", selected: "selected", seperated: "seperated", name: "name", data: "data", color: "color" }, host: { listeners: { "click": "__hostClick($event)" }, properties: { "class": "this.__hostClass" }, styleAttribute: "cssStyle" }, usesInheritance: true, ngImport: i0, template: `
         <ng-content select="ax-prefix">
         </ng-content>
         <ng-content select="ax-icon">
@@ -1616,7 +1646,7 @@ AXButtonItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         <ng-content select="ax-suffix">
         </ng-content>
     `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXButtonItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-button-item',
@@ -1660,12 +1690,12 @@ class AXDecoratorPrefixComponent extends AXBaseComponentMixin {
         super(elementRef, cdr);
     }
 }
-AXDecoratorPrefixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDecoratorPrefixComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDecoratorPrefixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDecoratorPrefixComponent, selector: "ax-prefix", usesInheritance: true, ngImport: i0, template: `
+AXDecoratorPrefixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDecoratorPrefixComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDecoratorPrefixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXDecoratorPrefixComponent, selector: "ax-prefix", usesInheritance: true, ngImport: i0, template: `
         <ng-content select="ax-button,ax-loading,ax-icon,ax-badge">
         </ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDecoratorPrefixComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDecoratorPrefixComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-prefix',
@@ -1683,12 +1713,12 @@ class AXDecoratorSuffixComponent extends AXBaseComponentMixin {
         super(elementRef, cdr);
     }
 }
-AXDecoratorSuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDecoratorSuffixComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDecoratorSuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDecoratorSuffixComponent, selector: "ax-suffix", usesInheritance: true, ngImport: i0, template: `
+AXDecoratorSuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDecoratorSuffixComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDecoratorSuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXDecoratorSuffixComponent, selector: "ax-suffix", usesInheritance: true, ngImport: i0, template: `
         <ng-content select="ax-button,ax-icon,ax-badge">
         </ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDecoratorSuffixComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDecoratorSuffixComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-suffix',
@@ -1706,12 +1736,12 @@ class AXDecoratorContentComponent extends AXBaseComponentMixin {
         super(elementRef, cdr);
     }
 }
-AXDecoratorContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDecoratorContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDecoratorContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDecoratorContentComponent, selector: "ax-content", usesInheritance: true, ngImport: i0, template: `
+AXDecoratorContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDecoratorContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDecoratorContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXDecoratorContentComponent, selector: "ax-content", usesInheritance: true, ngImport: i0, template: `
         <ng-content>
         </ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDecoratorContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDecoratorContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-content',
@@ -1728,10 +1758,10 @@ const COMPONENT$l = [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXD
 const MODULES$l = [CommonModule];
 class AXEditorDecoratorModule {
 }
-AXEditorDecoratorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXEditorDecoratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXEditorDecoratorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXEditorDecoratorModule, declarations: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent], imports: [CommonModule], exports: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent] });
-AXEditorDecoratorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXEditorDecoratorModule, providers: [], imports: [[...MODULES$l]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXEditorDecoratorModule, decorators: [{
+AXEditorDecoratorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXEditorDecoratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXEditorDecoratorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXEditorDecoratorModule, declarations: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent], imports: [CommonModule], exports: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent] });
+AXEditorDecoratorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXEditorDecoratorModule, providers: [], imports: [[...MODULES$l]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXEditorDecoratorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$l],
@@ -1749,9 +1779,9 @@ class AXIconComponent extends AXSizableComponentMixin {
         return `ax-ic ${this.icon}`;
     }
 }
-AXIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXIconComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXIconComponent, selector: "ax-icon", inputs: { icon: "icon" }, host: { properties: { "class": "this.__iconClass" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXIconComponent, decorators: [{
+AXIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXIconComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXIconComponent, selector: "ax-icon", inputs: { icon: "icon" }, host: { properties: { "class": "this.__iconClass" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-icon',
@@ -1770,10 +1800,10 @@ const COMPONENT$k = [AXIconComponent];
 const MODULES$k = [CommonModule];
 class AXIconModule {
 }
-AXIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXIconModule, declarations: [AXIconComponent], imports: [CommonModule], exports: [AXIconComponent] });
-AXIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXIconModule, providers: [], imports: [[...MODULES$k]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXIconModule, decorators: [{
+AXIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXIconModule, declarations: [AXIconComponent], imports: [CommonModule], exports: [AXIconComponent] });
+AXIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXIconModule, providers: [], imports: [[...MODULES$k]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXIconModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$k],
@@ -1791,14 +1821,14 @@ const COMPONENT$j = [
 const MODULES$j = [CommonModule, AXIconModule, AXEditorDecoratorModule];
 class AXButtonModule {
 }
-AXButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonModule, declarations: [AXButtonComponent,
+AXButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXButtonModule, declarations: [AXButtonComponent,
         AXButtonItemComponent,
         AXButtonGroupComponent], imports: [CommonModule, AXIconModule, AXEditorDecoratorModule], exports: [AXButtonComponent,
         AXButtonItemComponent,
         AXButtonGroupComponent] });
-AXButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonModule, providers: [], imports: [[MODULES$j]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonModule, decorators: [{
+AXButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXButtonModule, providers: [], imports: [[MODULES$j]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [MODULES$j],
@@ -1808,73 +1838,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: "13.1.1", ngImport: i0, type: AXCalendarBaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
+AXCalendarBaseComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCalendarBaseComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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 +2078,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 +2120,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') {
@@ -2054,33 +2141,12 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
         return date.dayOfWeek == 7 || date.dayOfWeek == 1;
     }
 }
-AXCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXCalendarComponent, selector: "ax-calendar", inputs: { 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarComponent, decorators: [{
+AXCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCalendarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", 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],
-                    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: [{
+            args: [{ selector: 'ax-calendar', changeDetection: ChangeDetectionStrategy.OnPush, inputs: [...VALUE_INPUTS, ...INTERACTIVE_INPUTS, ...CALENDAR_INPUTS], outputs: [...VALUE_OUTPUT, ...INTERACTIVE_OUTPUT, ...CALENDAR_OUTPUTS], encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-calendar-header\">\r\n    <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>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -2089,10 +2155,10 @@ const COMPONENT$i = [AXCalendarComponent];
 const MODULES$i = [CommonModule, AXButtonModule, AXIconModule, AXEditorDecoratorModule, AXDateTimeModule];
 class AXCalendarModule {
 }
-AXCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent], imports: [CommonModule, AXButtonModule, AXIconModule, AXEditorDecoratorModule, AXDateTimeModule], exports: [AXCalendarComponent] });
-AXCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarModule, providers: [], imports: [[...MODULES$i]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarModule, decorators: [{
+AXCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent], imports: [CommonModule, AXButtonModule, AXIconModule, AXEditorDecoratorModule, AXDateTimeModule], exports: [AXCalendarComponent] });
+AXCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCalendarModule, providers: [], imports: [[...MODULES$i]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$i],
@@ -2104,9 +2170,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
 
 class AXCarouselCore {
 }
-AXCarouselCore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselCore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-AXCarouselCore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselCore });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselCore, decorators: [{
+AXCarouselCore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCarouselCore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AXCarouselCore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCarouselCore });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCarouselCore, decorators: [{
             type: Injectable
         }] });
 
@@ -2330,8 +2396,7 @@ class AXCarouselComponent extends AXBaseComponentMixin {
         this._visibleIndex = v;
     }
     get items() {
-        var _a;
-        return (_a = this._items) !== null && _a !== void 0 ? _a : [];
+        return this._items ?? [];
     }
     set items(v) {
         const oldValue = this.items.slice();
@@ -2371,24 +2436,17 @@ class AXCarouselComponent extends AXBaseComponentMixin {
         this.core.destroy();
     }
 }
-AXCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: AXCarouselCore }], target: i0.ɵɵFactoryTarget.Component });
-AXCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXCarouselComponent, selector: "ax-carousel", inputs: { pageSize: "pageSize", gap: "gap", autoplay: "autoplay", interval: "interval", padding: "padding", centered: "centered", vertical: "vertical", loop: "loop", rewind: "rewind" }, outputs: { onOptionsChanged: "onOptionsChanged", onSlideChanged: "onSlideChanged", pageSizeChange: "pageSizeChange", autoplayChange: "autoplayChange", intervalChange: "intervalChange", paddingChange: "paddingChange", centeredChange: "centeredChange", verticalChange: "verticalChange", loopChange: "loopChange", rewindChange: "rewindChange", onItemsChanged: "onItemsChanged" }, host: { classAttribute: "ax-carousel" }, providers: [{
+AXCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCarouselComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: AXCarouselCore }], target: i0.ɵɵFactoryTarget.Component });
+AXCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXCarouselComponent, selector: "ax-carousel", inputs: { pageSize: "pageSize", gap: "gap", autoplay: "autoplay", interval: "interval", padding: "padding", centered: "centered", vertical: "vertical", loop: "loop", rewind: "rewind" }, outputs: { onOptionsChanged: "onOptionsChanged", onSlideChanged: "onSlideChanged", pageSizeChange: "pageSizeChange", autoplayChange: "autoplayChange", intervalChange: "intervalChange", paddingChange: "paddingChange", centeredChange: "centeredChange", verticalChange: "verticalChange", loopChange: "loopChange", rewindChange: "rewindChange", onItemsChanged: "onItemsChanged" }, host: { classAttribute: "ax-carousel" }, providers: [{
             provide: AXCarouselCore,
             useClass: AXCarouselSplideJS
         }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-carousel-list-container\">\r\n    <div class=\"ax-carousel-list\">\r\n        <ng-content select=\"ax-carousel-item\">\r\n        </ng-content>\r\n    </div>\r\n    <ng-content select=\"ax-carousel-arrows\">\r\n    </ng-content>\r\n</div>\r\n\r\n<ng-content select=\"ax-carousel-pager\">\r\n</ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCarouselComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-carousel',
-                    templateUrl: './carousel.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-carousel' },
-                    providers: [{
+            args: [{ selector: 'ax-carousel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-carousel' }, providers: [{
                             provide: AXCarouselCore,
                             useClass: AXCarouselSplideJS
-                        }]
-                }]
+                        }], template: "<div class=\"ax-carousel-list-container\">\r\n    <div class=\"ax-carousel-list\">\r\n        <ng-content select=\"ax-carousel-item\">\r\n        </ng-content>\r\n    </div>\r\n    <ng-content select=\"ax-carousel-arrows\">\r\n    </ng-content>\r\n</div>\r\n\r\n<ng-content select=\"ax-carousel-pager\">\r\n</ng-content>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: AXCarouselCore }]; }, propDecorators: { onOptionsChanged: [{
                 type: Output
             }], onSlideChanged: [{
@@ -2436,9 +2494,9 @@ class AXCarouselItemComponent extends AXBaseComponentMixin {
         super(elementRef, cdr);
     }
 }
-AXCarouselItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXCarouselItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXCarouselItemComponent, selector: "ax-carousel-item", host: { classAttribute: "ax-carousel-item" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselItemComponent, decorators: [{
+AXCarouselItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCarouselItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXCarouselItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXCarouselItemComponent, selector: "ax-carousel-item", host: { classAttribute: "ax-carousel-item" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCarouselItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-carousel-item',
@@ -2465,8 +2523,8 @@ class AXCarouselArrowsComponent extends AXBaseComponentMixin {
         this.parent.next();
     }
 }
-AXCarouselArrowsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselArrowsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXCarouselComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AXCarouselArrowsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXCarouselArrowsComponent, selector: "ax-carousel-arrows", outputs: { onNextClick: "onNextClick", onPrevClick: "onPrevClick" }, host: { classAttribute: "ax-carousel-arrows" }, usesInheritance: true, ngImport: i0, template: `
+AXCarouselArrowsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCarouselArrowsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXCarouselComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AXCarouselArrowsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXCarouselArrowsComponent, selector: "ax-carousel-arrows", outputs: { onNextClick: "onNextClick", onPrevClick: "onPrevClick" }, host: { classAttribute: "ax-carousel-arrows" }, usesInheritance: true, ngImport: i0, template: `
         <button class="ax-carousel-arrow-prev" (click)="_handlePrevClick($event)">
             <i class="ax-ic ax-ic-keyboard-arrow-left"></i>
         </button>
@@ -2474,7 +2532,7 @@ AXCarouselArrowsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             <i class="ax-ic ax-ic-keyboard-arrow-right"></i>
         </button>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselArrowsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCarouselArrowsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-carousel-arrows',
@@ -2548,12 +2606,12 @@ class AXCarouselPagerComponent extends AXBaseComponentMixin {
         });
     }
 }
-AXCarouselPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselPagerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXCarouselComponent }], target: i0.ɵɵFactoryTarget.Component });
-AXCarouselPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXCarouselPagerComponent, selector: "ax-carousel-pager", host: { classAttribute: "ax-carousel-pager" }, usesInheritance: true, ngImport: i0, template: `
+AXCarouselPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCarouselPagerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXCarouselComponent }], target: i0.ɵɵFactoryTarget.Component });
+AXCarouselPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXCarouselPagerComponent, selector: "ax-carousel-pager", host: { classAttribute: "ax-carousel-pager" }, usesInheritance: true, ngImport: i0, template: `
         <button  *ngFor="let d of _dots;let i=index" [class.ax-state-active]="i==_pageIndex" (click)="_handleClick($event,i)">
         </button>
     `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselPagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCarouselPagerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-carousel-pager',
@@ -2571,10 +2629,10 @@ const COMPONENT$h = [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArr
 const MODULES$h = [CommonModule];
 class AXCarouselModule {
 }
-AXCarouselModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXCarouselModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselModule, declarations: [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent], imports: [CommonModule], exports: [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent] });
-AXCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselModule, providers: [], imports: [[...MODULES$h]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselModule, decorators: [{
+AXCarouselModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXCarouselModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCarouselModule, declarations: [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent], imports: [CommonModule], exports: [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent] });
+AXCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCarouselModule, providers: [], imports: [[...MODULES$h]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCarouselModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$h],
@@ -2589,9 +2647,9 @@ class AXFormFieldComponent extends AXBaseComponentMixin {
         super(elementRef, cdr);
     }
 }
-AXFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXFormFieldComponent, selector: "ax-form-field", usesInheritance: true, ngImport: i0, template: '<div class="ax-form-field"><ng-content></ng-content></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormFieldComponent, decorators: [{
+AXFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXFormFieldComponent, selector: "ax-form-field", usesInheritance: true, ngImport: i0, template: '<div class="ax-form-field"><ng-content></ng-content></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-form-field',
@@ -2606,13 +2664,13 @@ class AXFormHintComponent extends AXBaseComponentMixin {
         super(elementRef, cdr);
     }
 }
-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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormHintComponent, decorators: [{
+AXFormHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormHintComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXFormHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", 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,
                 }]
@@ -2654,9 +2712,9 @@ class AXFormComponent extends AXBaseComponentMixin {
         });
     }
 }
-AXFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXFormComponent, selector: "ax-form", usesInheritance: true, ngImport: i0, template: '<div class="ax-form"><ng-content></ng-content></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormComponent, decorators: [{
+AXFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXFormComponent, selector: "ax-form", usesInheritance: true, ngImport: i0, template: '<div class="ax-form"><ng-content></ng-content></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-form',
@@ -2668,10 +2726,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
 
 class AXFormModule {
 }
-AXFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormModule, declarations: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent], imports: [CommonModule], exports: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent] });
-AXFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormModule, decorators: [{
+AXFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormModule, declarations: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent], imports: [CommonModule], exports: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent] });
+AXFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -2686,26 +2744,21 @@ class AXLabelComponent extends AXBaseComponentMixin {
         super(elementRef, cdr);
     }
 }
-AXLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXLabelComponent, selector: "ax-label", usesInheritance: true, ngImport: i0, template: "<label>\r\n    <ng-content></ng-content>\r\n</label>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelComponent, decorators: [{
+AXLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXLabelComponent, selector: "ax-label", usesInheritance: true, ngImport: i0, template: "<label>\r\n    <ng-content></ng-content>\r\n</label>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLabelComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-label',
-                    templateUrl: './label.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'ax-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<label>\r\n    <ng-content></ng-content>\r\n</label>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
 const COMPONENT$g = [AXLabelComponent];
 const MODULES$g = [CommonModule];
 class AXLabelModule {
 }
-AXLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelModule, declarations: [AXLabelComponent], imports: [CommonModule], exports: [AXLabelComponent] });
-AXLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelModule, providers: [], imports: [[...MODULES$g]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelModule, decorators: [{
+AXLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLabelModule, declarations: [AXLabelComponent], imports: [CommonModule], exports: [AXLabelComponent] });
+AXLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLabelModule, providers: [], imports: [[...MODULES$g]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLabelModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$g],
@@ -2721,13 +2774,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 +2790,7 @@ class AXCheckBoxComponent extends AXBaseValueComponentMixin {
         return value;
     }
     _handleOnClickEvent(e) {
-        debugger;
+        ;
         if (this.readonly || this.disabled) {
             e.preventDefault();
             e.stopPropagation();
@@ -2746,18 +2798,11 @@ class AXCheckBoxComponent extends AXBaseValueComponentMixin {
         }
     }
 }
-AXCheckBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCheckBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXCheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, queries: [{ propertyName: "_hint", predicate: AXFormHintComponent }, { propertyName: "_label", predicate: AXLabelComponent }], usesInheritance: true, ngImport: i0, template: "<!-- <div class=\"ax-wrapper ax-flex ax-flex-row \" [class.ax-items-center]=\"_hint.length==0\"\r\n    [class.ax-items-start]=\"_hint.length>=0\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"disabled\">\r\n    <input [id]=\"id\" type=\"checkbox\" [indeterminate]=\"_stateIndeterminate\" [(ngModel)]=\"value\" [checked]=\"value\"\r\n        [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\"\r\n        (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    <div class=\"ax-suffix ax-ms-3\" *ngIf=\"_label.length||_hint.length\">\r\n        <div *ngIf=\"_label.length\">\r\n            <ng-content select=\"ax-label\"></ng-content>\r\n        </div>\r\n        <div *ngIf=\"_hint.length\">\r\n            <ng-content select=\"ax-form-hint\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div> -->\r\n\r\n<div class=\"ax-flex ax-items-start\">\r\n    <div class=\"ax-flex ax-items-center ax-h-5\">\r\n        <input [id]=\"id\" class=\"ax-h-4 ax-w-4\" type=\"checkbox\" [indeterminate]=\"_stateIndeterminate\" [(ngModel)]=\"value\" [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\"\r\n            (blur)=\"_emitOnBlurEvent($event)\">\r\n    </div>\r\n    <div class=\"ax-ms-3 ax-text-sm\">\r\n        <ng-content select=\"ax-label\"></ng-content>\r\n        <ng-content select=\"ax-form-hint\"></ng-content>\r\n    </div>\r\n</div>\r\n\r\n<ng-content select=\"ax-validation-rule\"></ng-content>", directives: [{ type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCheckBoxComponent, decorators: [{
+AXCheckBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCheckBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXCheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, queries: [{ propertyName: "_hint", predicate: AXFormHintComponent }, { propertyName: "_label", predicate: AXLabelComponent }], usesInheritance: true, ngImport: i0, template: "<!-- <div class=\"ax-wrapper ax-flex ax-flex-row \" [class.ax-items-center]=\"_hint.length==0\"\r\n    [class.ax-items-start]=\"_hint.length>=0\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"disabled\">\r\n    <input [id]=\"id\" type=\"checkbox\" [indeterminate]=\"_stateIndeterminate\" [(ngModel)]=\"value\" [checked]=\"value\"\r\n        [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\"\r\n        (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    <div class=\"ax-suffix ax-ms-3\" *ngIf=\"_label.length||_hint.length\">\r\n        <div *ngIf=\"_label.length\">\r\n            <ng-content select=\"ax-label\"></ng-content>\r\n        </div>\r\n        <div *ngIf=\"_hint.length\">\r\n            <ng-content select=\"ax-form-hint\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div> -->\r\n\r\n<div class=\"ax-flex ax-items-start\">\r\n    <div class=\"ax-flex ax-items-center ax-h-5\">\r\n        <input [id]=\"id\" class=\"ax-h-4 ax-w-4\" type=\"checkbox\" [indeterminate]=\"_stateIndeterminate\" [(ngModel)]=\"value\" [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\"\r\n            (blur)=\"_emitOnBlurEvent($event)\">\r\n    </div>\r\n    <div class=\"ax-ms-3 ax-text-sm\">\r\n        <ng-content select=\"ax-label\"></ng-content>\r\n        <ng-content select=\"ax-form-hint\"></ng-content>\r\n    </div>\r\n</div>\r\n\r\n<ng-content select=\"ax-validation-rule\"></ng-content>", directives: [{ type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCheckBoxComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-check-box',
-                    templateUrl: './checkbox.component.html',
-                    inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS],
-                    outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT],
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
+            args: [{ selector: 'ax-check-box', inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div class=\"ax-wrapper ax-flex ax-flex-row \" [class.ax-items-center]=\"_hint.length==0\"\r\n    [class.ax-items-start]=\"_hint.length>=0\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"disabled\">\r\n    <input [id]=\"id\" type=\"checkbox\" [indeterminate]=\"_stateIndeterminate\" [(ngModel)]=\"value\" [checked]=\"value\"\r\n        [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\"\r\n        (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    <div class=\"ax-suffix ax-ms-3\" *ngIf=\"_label.length||_hint.length\">\r\n        <div *ngIf=\"_label.length\">\r\n            <ng-content select=\"ax-label\"></ng-content>\r\n        </div>\r\n        <div *ngIf=\"_hint.length\">\r\n            <ng-content select=\"ax-form-hint\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div> -->\r\n\r\n<div class=\"ax-flex ax-items-start\">\r\n    <div class=\"ax-flex ax-items-center ax-h-5\">\r\n        <input [id]=\"id\" class=\"ax-h-4 ax-w-4\" type=\"checkbox\" [indeterminate]=\"_stateIndeterminate\" [(ngModel)]=\"value\" [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\"\r\n            (blur)=\"_emitOnBlurEvent($event)\">\r\n    </div>\r\n    <div class=\"ax-ms-3 ax-text-sm\">\r\n        <ng-content select=\"ax-label\"></ng-content>\r\n        <ng-content select=\"ax-form-hint\"></ng-content>\r\n    </div>\r\n</div>\r\n\r\n<ng-content select=\"ax-validation-rule\"></ng-content>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _hint: [{
                 type: ContentChildren,
                 args: [AXFormHintComponent]
@@ -2768,10 +2813,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
 
 class AXCheckBoxModule {
 }
-AXCheckBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXCheckBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCheckBoxModule, declarations: [AXCheckBoxComponent], imports: [CommonModule, FormsModule], exports: [AXCheckBoxComponent] });
-AXCheckBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCheckBoxModule, providers: [], imports: [[CommonModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCheckBoxModule, decorators: [{
+AXCheckBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXCheckBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCheckBoxModule, declarations: [AXCheckBoxComponent], imports: [CommonModule, FormsModule], exports: [AXCheckBoxComponent] });
+AXCheckBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCheckBoxModule, providers: [], imports: [[CommonModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCheckBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXCheckBoxComponent],
@@ -2825,19 +2870,11 @@ class AXDataListComponent extends AXBaseSelectionValueMixin {
         }, 100);
     }
 }
-AXDataListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDataListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDataListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDataListComponent, selector: "ax-datalist", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", items: "items", pageSize: "pageSize", itemTemplate: "itemTemplate", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-list ax-list-container" }, queries: [{ propertyName: "_contentItemTemplate", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true, static: true }, { propertyName: "_contentloadingTemplate", first: true, predicate: ["loadingTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-list-items-container ax-default ax-vertical\" (scroll)=\"_handleListScroll($event)\" #container>\r\n    <ng-container *ngFor=\"let item of displayItems;trackBy : _trackByFunction\">\r\n        <ng-container *ngIf=\"itemTemplate; else elseTemplate\">\r\n            <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                {{ item ? _getItemDisplayTextTemplte(item) : 'Loading...'}}\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            Empty!\r\n        </ng-template>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isLoading\">\r\n        <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #elseLoadingTemplate>\r\n            <div class=\"ax-list-loading-container\">\r\n                <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n</div>", directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDataListComponent, decorators: [{
+AXDataListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDataListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDataListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXDataListComponent, selector: "ax-datalist", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", items: "items", pageSize: "pageSize", itemTemplate: "itemTemplate", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-list ax-list-container" }, queries: [{ propertyName: "_contentItemTemplate", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true, static: true }, { propertyName: "_contentloadingTemplate", first: true, predicate: ["loadingTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-list-items-container ax-default ax-vertical\" (scroll)=\"_handleListScroll($event)\" #container>\r\n    <ng-container *ngFor=\"let item of displayItems;trackBy : _trackByFunction\">\r\n        <ng-container *ngIf=\"itemTemplate; else elseTemplate\">\r\n            <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                {{ item ? _getItemDisplayTextTemplte(item) : 'Loading...'}}\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            Empty!\r\n        </ng-template>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isLoading\">\r\n        <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #elseLoadingTemplate>\r\n            <div class=\"ax-list-loading-container\">\r\n                <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n</div>", directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDataListComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-datalist',
-                    templateUrl: './datalist.component.html',
-                    inputs: ['disabled', 'readonly', 'tabIndex', 'size', 'value', 'items', 'pageSize'],
-                    outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-list ax-list-container' }
-                }]
+            args: [{ selector: 'ax-datalist', inputs: ['disabled', 'readonly', 'tabIndex', 'size', 'value', 'items', 'pageSize'], outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-list ax-list-container' }, template: "<div class=\"ax-list-items-container ax-default ax-vertical\" (scroll)=\"_handleListScroll($event)\" #container>\r\n    <ng-container *ngFor=\"let item of displayItems;trackBy : _trackByFunction\">\r\n        <ng-container *ngIf=\"itemTemplate; else elseTemplate\">\r\n            <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                {{ item ? _getItemDisplayTextTemplte(item) : 'Loading...'}}\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            Empty!\r\n        </ng-template>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isLoading\">\r\n        <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #elseLoadingTemplate>\r\n            <div class=\"ax-list-loading-container\">\r\n                <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _container: [{
                 type: ViewChild,
                 args: ['container']
@@ -2862,10 +2899,10 @@ const COMPONENT$f = [AXDataListComponent];
 const MODULES$f = [CommonModule, AXButtonModule];
 class AXDataListModule {
 }
-AXDataListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDataListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXDataListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDataListModule, declarations: [AXDataListComponent], imports: [CommonModule, AXButtonModule], exports: [AXDataListComponent] });
-AXDataListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDataListModule, providers: [], imports: [[...MODULES$f]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDataListModule, decorators: [{
+AXDataListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDataListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXDataListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDataListModule, declarations: [AXDataListComponent], imports: [CommonModule, AXButtonModule], exports: [AXDataListComponent] });
+AXDataListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDataListModule, providers: [], imports: [[...MODULES$f]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDataListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$f],
@@ -2969,11 +3006,10 @@ class AXPopoverComponent extends AXBaseComponent {
     }
     //
     onDestroy() {
-        var _a, _b;
-        (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
-        (_b = this._overlayRef) === null || _b === void 0 ? void 0 : _b.dispose();
+        this._overlayRef?.detach();
+        this._overlayRef?.dispose();
         this._subs.forEach(s => {
-            s === null || s === void 0 ? void 0 : s.unsubscribe();
+            s?.unsubscribe();
         });
     }
     _handleKeydownHandler(e) {
@@ -2993,11 +3029,10 @@ class AXPopoverComponent extends AXBaseComponent {
     }
     //
     close() {
-        var _a;
         if (!this.isOpen) {
             return;
         }
-        (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
+        this._overlayRef?.detach();
         this._emitOnClosedEvent();
     }
     //
@@ -3055,16 +3090,11 @@ class AXPopoverComponent extends AXBaseComponent {
         this._subs.push(sub);
     }
 }
-AXPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$1.Overlay }, { token: i2.AXPlatform }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-AXPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXPopoverComponent, selector: "ax-popover", inputs: { target: "target", position: "position", openTrigger: "openTrigger", closeTrigger: "closeTrigger", hasBackdrop: "hasBackdrop", backdropClass: "backdropClass" }, host: { listeners: { "document:keydown": "_handleKeydownHandler($event)" } }, viewQueries: [{ propertyName: "_baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #baseTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverComponent, decorators: [{
+AXPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$1.Overlay }, { token: i2.AXPlatform }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+AXPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXPopoverComponent, selector: "ax-popover", inputs: { target: "target", position: "position", openTrigger: "openTrigger", closeTrigger: "closeTrigger", hasBackdrop: "hasBackdrop", backdropClass: "backdropClass" }, host: { listeners: { "document:keydown": "_handleKeydownHandler($event)" } }, viewQueries: [{ propertyName: "_baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #baseTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopoverComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-popover',
-                    templateUrl: './popover.component.html',
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
+            args: [{ selector: 'ax-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #baseTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$1.Overlay }, { type: i2.AXPlatform }, { type: i0.ViewContainerRef }]; }, propDecorators: { target: [{
                 type: Input
             }], position: [{
@@ -3085,314 +3115,296 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 args: ['document:keydown', ['$event']]
             }] } });
 
-class AXPopoverModule {
-}
-AXPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverModule, declarations: [AXPopoverComponent], imports: [CommonModule], exports: [AXPopoverComponent] });
-AXPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [AXPopoverComponent],
-                    imports: [CommonModule],
-                    exports: [AXPopoverComponent],
-                    providers: []
-                }]
-        }] });
-
-const AXBaseDropdownMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(AXBaseComponent));
-class AXBaseDropDownComponent extends AXBaseDropdownMixin {
-    constructor() {
-        super(...arguments);
-        this.fitParent = true;
-        this.onOpened = new EventEmitter();
-        this.onClosed = new EventEmitter();
-        this.position = [];
+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();
     }
-    _emitOnOpenedEvent() {
-        //** call from interactive mixin **//
-        //(this as any).focus();
-        //
-        this.onOpened.emit({
-            component: this,
-            htmlElement: this._getHostElement()
-        });
+    get format() {
+        return this._format;
     }
-    _emitOnClosedEvent() {
-        this.onClosed.emit({
-            component: this,
-            htmlElement: this._getHostElement()
+    set format(v) {
+        this._setOption({
+            name: 'format',
+            value: 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);
+    _handleArrowClickEvent(e) {
+        this.toggle();
     }
-    toggle() {
-        if (this.disabled !== true) {
-            this.popover.toggle();
-        }
+    _onValueChanged(oldValue, newValue) {
+        this.displayText = newValue ? AXDateTime.convert(newValue).format(this._format) : null;
+        this.close();
     }
-    close() {
-        if (!this.isOpen || this.disabled) {
-            return;
+    _handleOnKeydownEvent(e) {
+        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();
         }
-        this.popover.close();
-        this._emitOnClosedEvent();
-    }
-    open() {
-        if (this.isOpen || this.disabled) {
-            return;
+        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 + (next[0]?.index || 0)) : (prev[prev.length - 1]?.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();
         }
-        this.popover.open();
-        this._emitOnOpenedEvent();
+        else if (e.key == 'Backspace') {
+            if (this.allowNull) {
+                this.value = null;
+            }
+            ignore();
+        }
+        // else if (nums.includes(key)) {
+        // }
+        // super._emitOnKeydownEvent(e);
     }
-    get isOpen() {
-        return this.popover.isOpen;
+    _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);
     }
 }
-AXBaseDropDownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBaseDropDownComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-AXBaseDropDownComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBaseDropDownComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBaseDropDownComponent, decorators: [{
-            type: Injectable
-        }], propDecorators: { fitParent: [{
-                type: Input
-            }], dropdownWidth: [{
-                type: Input
-            }], onOpened: [{
-                type: Output
-            }], onClosed: [{
+AXDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", ngImport: i0, type: AXDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-date-picker', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...CALENDAR_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...CALENDAR_OUTPUTS], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\"\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>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { popover: [{
+                type: ViewChild,
+                args: [AXPopoverComponent]
+            }], formatChange: [{
                 type: Output
-            }], position: [{
+            }], format: [{
                 type: Input
             }] } });
 
-class AXDropdownComponent extends AXBaseDropDownComponent {
-    constructor(_elementRef, _cdr) {
-        super(_elementRef, _cdr);
-        this._target = this;
+class AXPopoverModule {
+}
+AXPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopoverModule, declarations: [AXPopoverComponent], imports: [CommonModule], exports: [AXPopoverComponent] });
+AXPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopoverModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopoverModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXPopoverComponent],
+                    imports: [CommonModule],
+                    exports: [AXPopoverComponent],
+                    providers: []
+                }]
+        }] });
+
+class AXInputMaskComponent {
+    constructor() {
+        this.showMaskTyped = false;
+        this.clearIfNotMatch = false;
     }
-    _handleArrowClickEvent() {
-        this.toggle();
+    get prefix() {
+        return this._prefix || '';
+    }
+    set prefix(v) {
+        this._prefix = v;
+    }
+    get suffix() {
+        return this._suffix || '';
+    }
+    set suffix(v) {
+        this._suffix = 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: { 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: [{
+AXInputMaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXInputMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXInputMaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", ngImport: i0, type: AXInputMaskComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-drop-down',
-                    templateUrl: 'dropdown.component.html',
-                    inputs: ['disabled', 'tabIndex', 'size', 'fitParent'],
+                    selector: 'ax-input-mask',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { popover: [{
-                type: ViewChild,
-                args: [AXPopoverComponent]
+        }], propDecorators: { prefix: [{
+                type: Input
+            }], suffix: [{
+                type: Input
+            }], showMaskTyped: [{
+                type: Input
+            }], clearIfNotMatch: [{
+                type: Input
+            }], mask: [{
+                type: Input
             }] } });
 
-class AXDatepickerComponent extends AXBaseTextBoxMixin {
+const COMPONENT$e = [AXInputMaskComponent];
+const MODULES$e = [CommonModule, NgxMaskModule.forRoot()];
+class AXInputMaskModule {
+}
+AXInputMaskModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXInputMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXInputMaskModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXInputMaskModule, declarations: [AXInputMaskComponent], imports: [CommonModule, i1$2.NgxMaskModule], exports: [AXInputMaskComponent] });
+AXInputMaskModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXInputMaskModule, providers: [], imports: [[...MODULES$e]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXInputMaskModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT$e],
+                    imports: [...MODULES$e],
+                    exports: [...COMPONENT$e],
+                    providers: [],
+                }]
+        }] });
+
+/**
+ * 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: "13.1.1", ngImport: i0, type: AXTextBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", ngImport: i0, type: AXTextBoxComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-date-picker',
-                    templateUrl: './datepicker.component.html',
-                    inputs: [
+            args: [{ selector: 'ax-text-box', inputs: [
                         'disabled',
                         'readonly',
                         'tabIndex',
                         'cssClass',
                         'size',
                         ...TEXTBOX_INPUTS,
-                    ],
-                    outputs: [
+                    ], outputs: [
                         'valueChange',
                         'onValueChanged',
                         'onBlur',
                         '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,
-                }]
-        }], 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
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-text-box ax-editor-container' }, 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>" }]
+        }], 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: "13.1.1", ngImport: i0, type: AXTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", ngImport: i0, type: AXTextBoxModule, providers: [], imports: [[
+            CommonModule,
+            FormsModule,
+            AXButtonModule,
+            AXEditorDecoratorModule,
+            AXIconModule,
+            NgxMaskModule.forChild()
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDatepickerModule, decorators: [{
+AXDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", ngImport: i0, type: AXDatepickerModule, providers: [], imports: [[...MODULES$d]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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: [],
                 }]
         }] });
@@ -3423,16 +3435,11 @@ class AXDialogComponent extends AXBaseComponentMixin {
         }
     }
 }
-AXDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDialogComponent, selector: "ax-dialog", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-dialog ax-{{options.type}}\" tabindex=\"0\" cdkDrag role=\"alert\" cdkDragHandle>\r\n        <div class=\"ax-dialog-icon-side\">\r\n            <i class=\"ax-dialog-icon {{_icon}}\"></i>\r\n        </div>\r\n        <div class=\"ax-dialog-content-side\">\r\n            <div class=\"ax-dialog-title\">{{options.title}}</div>\r\n            <div class=\"ax-dialog-content\">{{options.content}}</div>\r\n        </div>\r\n        <div class=\"ax-dialog-dismiss-icon\">\r\n            <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.dismissible\" (click)=\"close()\"></i>\r\n        </div>\r\n        <footer class=\"ax-dialog-footer\">\r\n            <ng-container *ngFor=\"let button of options.buttons\">\r\n                <ax-button [text]=\"button.text\"  [submitBehavior]=\"button.submitBehavior\" [cancelBehavior]=\"button.cancelBehavior\" (onClick)=\"_handleButtonClick(button)\" [class]=\"button.cssClass\" [look]=\"button.look\" [color]=\"button.color\"></ax-button>\r\n                <div class=\"ax-ml-2\"></div>\r\n            </ng-container>\r\n        </footer>\r\n    </div>\r\n\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: 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: AXDialogComponent, decorators: [{
+AXDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXDialogComponent, selector: "ax-dialog", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-dialog ax-{{options.type}}\" tabindex=\"0\" cdkDrag role=\"alert\" cdkDragHandle>\r\n        <div class=\"ax-dialog-icon-side\">\r\n            <i class=\"ax-dialog-icon {{_icon}}\"></i>\r\n        </div>\r\n        <div class=\"ax-dialog-content-side\">\r\n            <div class=\"ax-dialog-title\">{{options.title}}</div>\r\n            <div class=\"ax-dialog-content\">{{options.content}}</div>\r\n        </div>\r\n        <div class=\"ax-dialog-dismiss-icon\">\r\n            <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.dismissible\" (click)=\"close()\"></i>\r\n        </div>\r\n        <footer class=\"ax-dialog-footer\">\r\n            <ng-container *ngFor=\"let button of options.buttons\">\r\n                <ax-button [text]=\"button.text\"  [submitBehavior]=\"button.submitBehavior\" [cancelBehavior]=\"button.cancelBehavior\" (onClick)=\"_handleButtonClick(button)\" [class]=\"button.cssClass\" [look]=\"button.look\" [color]=\"button.color\"></ax-button>\r\n                <div class=\"ax-ml-2\"></div>\r\n            </ng-container>\r\n        </footer>\r\n    </div>\r\n\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: 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: "13.1.1", ngImport: i0, type: AXDialogComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-dialog',
-                    templateUrl: './dialog.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'ax-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-dialog ax-{{options.type}}\" tabindex=\"0\" cdkDrag role=\"alert\" cdkDragHandle>\r\n        <div class=\"ax-dialog-icon-side\">\r\n            <i class=\"ax-dialog-icon {{_icon}}\"></i>\r\n        </div>\r\n        <div class=\"ax-dialog-content-side\">\r\n            <div class=\"ax-dialog-title\">{{options.title}}</div>\r\n            <div class=\"ax-dialog-content\">{{options.content}}</div>\r\n        </div>\r\n        <div class=\"ax-dialog-dismiss-icon\">\r\n            <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.dismissible\" (click)=\"close()\"></i>\r\n        </div>\r\n        <footer class=\"ax-dialog-footer\">\r\n            <ng-container *ngFor=\"let button of options.buttons\">\r\n                <ax-button [text]=\"button.text\"  [submitBehavior]=\"button.submitBehavior\" [cancelBehavior]=\"button.cancelBehavior\" (onClick)=\"_handleButtonClick(button)\" [class]=\"button.cssClass\" [look]=\"button.look\" [color]=\"button.color\"></ax-button>\r\n                <div class=\"ax-ml-2\"></div>\r\n            </ng-container>\r\n        </footer>\r\n    </div>\r\n\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
@@ -3520,9 +3527,8 @@ class AXDialogService {
     */
     show(options) {
         return new Promise((resolve) => {
-            var _a;
             const popup = this.open(options);
-            (_a = options.buttons) === null || _a === void 0 ? void 0 : _a.forEach((b) => {
+            options.buttons?.forEach((b) => {
                 const orginalClick = b.onClick;
                 b.onClick = () => {
                     popup.close();
@@ -3568,9 +3574,9 @@ class AXDialogService {
         };
     }
 }
-AXDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }, { token: i1$1.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Injectable });
-AXDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogService, decorators: [{
+AXDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDialogService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }, { token: i1$1.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Injectable });
+AXDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDialogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.Injector }, { type: i1$1.ScrollStrategyOptions }]; } });
@@ -3600,11 +3606,11 @@ class AXLoadingComponent extends AXBaseComponentMixin {
         this._cdr.markForCheck();
     }
 }
-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: `
+AXLoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLoadingComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXLoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingComponent, decorators: [{
+    `, 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: "13.1.1", ngImport: i0, type: AXLoadingComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-loading',
@@ -3625,8 +3631,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
 
 class AXLoadingSpinnerComponent {
 }
-AXLoadingSpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXLoadingSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", ngImport: i0, template: `
+AXLoadingSpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXLoadingSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", ngImport: i0, template: `
     <svg version="1.1" width="100" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         x="0px" y="0px" viewBox="0 0 50 50" xml:space="preserve">
         <path fill="current"
@@ -3636,7 +3642,7 @@ AXLoadingSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
         </path>
     </svg>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLoadingSpinnerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-loading-spinner',
@@ -3705,9 +3711,9 @@ class AXLoadingDirective {
         this.renderer.addClass(this.overlayElement, OVERLAY_CLASS);
     }
 }
-AXLoadingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
-AXLoadingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.6", type: AXLoadingDirective, selector: "[axIsLoading]", inputs: { isLoading: ["axIsLoading", "isLoading"] }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingDirective, decorators: [{
+AXLoadingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLoadingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
+AXLoadingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: AXLoadingDirective, selector: "[axIsLoading]", inputs: { isLoading: ["axIsLoading", "isLoading"] }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLoadingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axIsLoading]'
@@ -3717,8 +3723,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({
@@ -3730,15 +3736,15 @@ 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]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingModule, decorators: [{
+AXLoadingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXLoadingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLoadingModule, declarations: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent], imports: [CommonModule, OverlayModule, PortalModule], exports: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent] });
+AXLoadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLoadingModule, providers: [], imports: [[...MODULES$c]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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 []; } });
@@ -3748,9 +3754,9 @@ class DynamicOverlayContainer extends OverlayContainer {
         this._containerElement = containerElement;
     }
 }
-DynamicOverlayContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DynamicOverlayContainer, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-DynamicOverlayContainer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DynamicOverlayContainer, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DynamicOverlayContainer, decorators: [{
+DynamicOverlayContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DynamicOverlayContainer, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+DynamicOverlayContainer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DynamicOverlayContainer, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DynamicOverlayContainer, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3771,9 +3777,9 @@ class DynamicOverlay extends Overlay {
         return super.create(config);
     }
 }
-DynamicOverlay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DynamicOverlay, deps: [{ token: i1$1.ScrollStrategyOptions }, { token: DynamicOverlayContainer }, { token: i0.ComponentFactoryResolver }, { token: i1$1.OverlayPositionBuilder }, { token: i1$1.OverlayKeyboardDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i2$2.Directionality }, { token: i0.RendererFactory2 }, { token: i1.Location }, { token: i1$1.OverlayOutsideClickDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
-DynamicOverlay.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DynamicOverlay, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DynamicOverlay, decorators: [{
+DynamicOverlay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DynamicOverlay, deps: [{ token: i1$1.ScrollStrategyOptions }, { token: DynamicOverlayContainer }, { token: i0.ComponentFactoryResolver }, { token: i1$1.OverlayPositionBuilder }, { token: i1$1.OverlayKeyboardDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i2$2.Directionality }, { token: i0.RendererFactory2 }, { token: i1.Location }, { token: i1$1.OverlayOutsideClickDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
+DynamicOverlay.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DynamicOverlay, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DynamicOverlay, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3861,9 +3867,9 @@ class AXOverlayService {
         };
     }
 }
-AXOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXOverlayService, deps: [{ token: DynamicOverlay }, { token: i1$1.Overlay }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
-AXOverlayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXOverlayService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXOverlayService, decorators: [{
+AXOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXOverlayService, deps: [{ token: DynamicOverlay }, { token: i1$1.Overlay }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
+AXOverlayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXOverlayService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXOverlayService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: DynamicOverlay }, { type: i1$1.Overlay }, { type: i0.ApplicationRef }]; } });
@@ -3938,14 +3944,13 @@ class AXLoadingService {
     // If loaderId is unspecified, the method will return a logical disjunction of all
     // loader states in the context.
     isLoading(context, loaderId) {
-        var _a;
         const loaderStates = this.loadingStates.get(context);
         if (!loaderStates) {
             return false;
         }
         else {
             if (loaderId !== undefined) {
-                return (_a = loaderStates.get(this.getLoaderId(loaderId))) !== null && _a !== void 0 ? _a : false;
+                return loaderStates.get(this.getLoaderId(loaderId)) ?? false;
             }
             else {
                 return [...loaderStates.values()].filter(state => state).length > 0;
@@ -4005,12 +4010,12 @@ class AXLoadingService {
         return this.loadingStates.get(context).has(loaderId) && this.loadingStates$.get(context).has(loaderId);
     }
     getLoaderId(loaderId) {
-        return loaderId !== null && loaderId !== void 0 ? loaderId : DEFAULT_LOADER_ID;
+        return loaderId ?? DEFAULT_LOADER_ID;
     }
 }
-AXLoadingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingService, deps: [{ token: i0.NgZone }, { token: AXOverlayService }], target: i0.ɵɵFactoryTarget.Injectable });
-AXLoadingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingService, decorators: [{
+AXLoadingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLoadingService, deps: [{ token: i0.NgZone }, { token: AXOverlayService }], target: i0.ɵɵFactoryTarget.Injectable });
+AXLoadingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLoadingService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLoadingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -4037,9 +4042,9 @@ class AXPageComponent extends AXBaseComponentMixin {
         }
     }
 }
-AXPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPageComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXLoadingService }], target: i0.ɵɵFactoryTarget.Injectable });
-AXPageComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPageComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPageComponent, decorators: [{
+AXPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPageComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXLoadingService }], target: i0.ɵɵFactoryTarget.Injectable });
+AXPageComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPageComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPageComponent, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
@@ -4048,14 +4053,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
 
 class AXPageFooterComponent {
 }
-AXPageFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AXPageFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXPageFooterComponent, selector: "ax-page-footer", viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
+AXPageFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXPageFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXPageFooterComponent, selector: "ax-page-footer", viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
            <ng-content select="ax-prefix">
             </ng-content>
             <ng-content select="ax-suffix">
             </ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPageFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPageFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-page-footer',
@@ -4104,7 +4109,7 @@ class AXBasePageComponent {
         return this._isLoading;
     }
     set isLoading(v) {
-        debugger;
+        ;
         this._isLoading = v;
         if (this.pageContainer) {
             this.pageContainer.isLoading = this.isLoading;
@@ -4122,9 +4127,9 @@ class AXBasePageComponent {
         this.onClosed.unsubscribe();
     }
 }
-AXBasePageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBasePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-AXBasePageComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBasePageComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBasePageComponent, decorators: [{
+AXBasePageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXBasePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AXBasePageComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXBasePageComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXBasePageComponent, decorators: [{
             type: Injectable
         }], propDecorators: { pageContainer: [{
                 type: ViewChild,
@@ -4136,10 +4141,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
 
 class AXPageModule {
 }
-AXPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPageModule, declarations: [AXPageFooterComponent], exports: [AXPageFooterComponent] });
-AXPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPageModule, providers: [], imports: [[]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPageModule, decorators: [{
+AXPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPageModule, declarations: [AXPageFooterComponent], exports: [AXPageFooterComponent] });
+AXPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPageModule, providers: [], imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPageModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -4149,19 +4154,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]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogModule, decorators: [{
+AXDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDialogModule, declarations: [AXDialogComponent], imports: [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule], exports: [AXDialogComponent] });
+AXDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDialogModule, providers: [], imports: [[...MODULES$b]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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: [],
                 }]
         }] });
@@ -4278,12 +4283,12 @@ class AXDrawerComponent extends AXBaseComponentMixin {
         this.collapsed = true;
     }
 }
-AXDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDrawerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AXDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDrawerComponent, selector: "ax-drawer", inputs: { mode: "mode", location: "location", collapsed: "collapsed" }, outputs: { onChanged: "onChanged" }, host: { listeners: { "window:resize": "_handleWindowsResize($event)" }, classAttribute: "ax-drawer" }, usesInheritance: true, ngImport: i0, template: `
+AXDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDrawerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+AXDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXDrawerComponent, selector: "ax-drawer", inputs: { mode: "mode", location: "location", collapsed: "collapsed" }, outputs: { onChanged: "onChanged" }, host: { listeners: { "window:resize": "_handleWindowsResize($event)" }, classAttribute: "ax-drawer" }, usesInheritance: true, ngImport: i0, template: `
         <ng-content>
         </ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDrawerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-drawer',
@@ -4346,8 +4351,8 @@ class AXDrawerContainerComponent extends AXBaseComponentMixin {
         });
     }
 }
-AXDrawerContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDrawerContainerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AXDrawerContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDrawerContainerComponent, selector: "ax-drawer-container", inputs: { rtl: "rtl" }, host: { classAttribute: "ax-drawer-container" }, queries: [{ propertyName: "drawers", predicate: AXDrawerComponent }], usesInheritance: true, ngImport: i0, template: `
+AXDrawerContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDrawerContainerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+AXDrawerContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXDrawerContainerComponent, selector: "ax-drawer-container", inputs: { rtl: "rtl" }, host: { classAttribute: "ax-drawer-container" }, queries: [{ propertyName: "drawers", predicate: AXDrawerComponent }], usesInheritance: true, ngImport: i0, template: `
         <ng-content select="ax-drawer[location='start']">
         </ng-content>
         <ng-content select="ax-drawer-content">
@@ -4355,7 +4360,7 @@ AXDrawerContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         <ng-content select="ax-drawer[location='end']">
         </ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDrawerContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDrawerContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-drawer-container',
@@ -4382,12 +4387,12 @@ class AXDrawerContentComponent extends AXBaseComponentMixin {
         super(elementRef, cdr);
     }
 }
-AXDrawerContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDrawerContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDrawerContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDrawerContentComponent, selector: "ax-drawer-content", host: { classAttribute: "ax-drawer-content" }, usesInheritance: true, ngImport: i0, template: `
+AXDrawerContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDrawerContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDrawerContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXDrawerContentComponent, selector: "ax-drawer-content", host: { classAttribute: "ax-drawer-content" }, usesInheritance: true, ngImport: i0, template: `
         <ng-content>
         </ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDrawerContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDrawerContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-drawer-content',
@@ -4401,76 +4406,121 @@ 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]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDrawerModule, decorators: [{
+AXDrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDrawerModule, declarations: [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent], imports: [CommonModule], exports: [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent] });
+AXDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDrawerModule, providers: [], imports: [[...MODULES$a]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", ngImport: i0, type: AXDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", ngImport: i0, type: AXDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-drop-down', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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>" }]
+        }], 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?.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: "13.1.1", 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: "13.1.1", 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: "13.1.1", ngImport: i0, type: AXDropdownPanelComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-input-mask',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                }]
-        }], propDecorators: { prefix: [{
-                type: Input
-            }], suffix: [{
-                type: Input
-            }], showMaskTyped: [{
-                type: Input
-            }], clearIfNotMatch: [{
-                type: Input
-            }], mask: [{
+            args: [{ selector: 'ax-dropdown-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: [...DROPDOWN_INPUTS], outputs: [...DROPDOWN_OUTPUT], 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>" }]
+        }], 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: "13.1.1", ngImport: i0, type: AXDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", ngImport: i0, type: AXDropdownModule, providers: [], imports: [[CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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: [],
                 }]
         }] });
@@ -4686,13 +4736,13 @@ class AXNumberBoxComponent extends AXBaseTextBoxMixin {
             this._maskService.thousandSeparator = this.separator;
             this._maskService.allowNegativeNumbers = true;
             const format = `separator.${this.scale}`;
-            return this._maskService.applyMask(value === null || value === void 0 ? void 0 : value.toString(), format);
+            return this._maskService.applyMask(value?.toString(), format);
         }
         else {
             this._maskService.thousandSeparator = '';
             this._maskService.allowNegativeNumbers = true;
             const format = `separator.${this.scale}`;
-            return this._maskService.applyMask(value === null || value === void 0 ? void 0 : value.toString(), format);
+            return this._maskService.applyMask(value?.toString(), format);
         }
     }
     _onValueChanged(oldValue, newValue) {
@@ -4705,33 +4755,25 @@ class AXNumberBoxComponent extends AXBaseTextBoxMixin {
         this._emitOnFocusEvent(e);
     }
 }
-AXNumberBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.MaskApplierService }], target: i0.ɵɵFactoryTarget.Component });
-AXNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", name: "name", separator: "separator", thousandSeparator: "thousandSeparator", step: "step", scale: "scale", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue", displayText: "displayText" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", displayTextChange: "displayTextChange" }, host: { properties: { "class": "this.__hostClass" }, classAttribute: "ax-number-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\" [attr.pattern]=\"'[\\d\\.]*'\" [attr.placeholder]=\"placeholder\" [attr.min]=\"minValue\"\r\n    [attr.max]=\"maxValue\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"displayText\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_handleOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\"\r\n    autocomplete=\"off\">\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && allowNull && !(disabled || readonly)\">\r\n    <i class=\"ax-icon-x icon\"></i>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "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: [{
+AXNumberBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", 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: "13.1.1", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-number-box',
-                    templateUrl: './number-box.component.html',
-                    inputs: [
+            args: [{ selector: 'ax-number-box', inputs: [
                         'disabled',
                         'readonly',
                         'tabIndex',
                         'size',
                         'value',
                         ...TEXTBOX_INPUTS,
-                    ],
-                    outputs: [
+                    ], outputs: [
                         'valueChange',
                         'onValueChanged',
                         'onBlur',
                         'onFocus',
                         ...TEXTBOX_OUTPUT,
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    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: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-number-box ax-editor-container' }, 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>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.MaskApplierService }]; }, propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }], separator: [{
@@ -4765,12 +4807,12 @@ const MODULES$9 = [
 ];
 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,
+AXNumberBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXNumberBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXNumberBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXNumberBoxModule, declarations: [AXNumberBoxComponent], imports: [CommonModule,
         FormsModule,
-        AXButtonModule, i1$3.NgxMaskModule], exports: [AXNumberBoxComponent] });
-AXNumberBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxModule, providers: [], imports: [[...MODULES$9]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxModule, decorators: [{
+        AXButtonModule, i1$2.NgxMaskModule], exports: [AXNumberBoxComponent] });
+AXNumberBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXNumberBoxModule, providers: [], imports: [[...MODULES$9]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXNumberBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$9],
@@ -4812,32 +4854,24 @@ class AXPasswordBoxComponent extends AXBaseTextBoxMixin {
         }
     }
 }
-AXPasswordBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPasswordBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXPasswordBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXPasswordBoxComponent, selector: "ax-password-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", cssClass: "cssClass", size: "size", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", value: "value", name: "name", showToggleButton: "showToggleButton" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-password-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [type]=\"_type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n    [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete ? 'on': 'off'\">\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"clear()\" [tabIndex]=\"-1\" *ngIf=\"value && allowNull &&  !(disabled || readonly)\">\r\n    <ax-prefix>\r\n        <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n    </ax-prefix>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"toggleType()\" [tabIndex]=\"-1\" *ngIf=\"showToggleButton\">\r\n    <ax-icon [icon]=\"_icon\"></ax-icon>\r\n</ax-button>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: 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: AXPasswordBoxComponent, decorators: [{
+AXPasswordBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPasswordBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXPasswordBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXPasswordBoxComponent, selector: "ax-password-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", cssClass: "cssClass", size: "size", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", value: "value", name: "name", showToggleButton: "showToggleButton" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-password-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [type]=\"_type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n    [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete ? 'on': 'off'\">\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"clear()\" [tabIndex]=\"-1\" *ngIf=\"value && allowNull &&  !(disabled || readonly)\">\r\n    <ax-prefix>\r\n        <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n    </ax-prefix>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"toggleType()\" [tabIndex]=\"-1\" *ngIf=\"showToggleButton\">\r\n    <ax-icon [icon]=\"_icon\"></ax-icon>\r\n</ax-button>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-password-box',
-                    templateUrl: 'password-box.component.html',
-                    inputs: [
+            args: [{ selector: 'ax-password-box', inputs: [
                         'disabled',
                         'readonly',
                         'tabIndex',
                         'cssClass',
                         'size',
                         ...TEXTBOX_INPUTS,
-                    ],
-                    outputs: [
+                    ], outputs: [
                         'valueChange',
                         'onValueChanged',
                         'onBlur',
                         'onFocus',
                         ...TEXTBOX_OUTPUT,
-                    ],
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'ax-password-box ax-editor-container' },
-                }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-password-box ax-editor-container' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [type]=\"_type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n    [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete ? 'on': 'off'\">\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"clear()\" [tabIndex]=\"-1\" *ngIf=\"value && allowNull &&  !(disabled || readonly)\">\r\n    <ax-prefix>\r\n        <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n    </ax-prefix>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"toggleType()\" [tabIndex]=\"-1\" *ngIf=\"showToggleButton\">\r\n    <ax-icon [icon]=\"_icon\"></ax-icon>\r\n</ax-button>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -4855,14 +4889,14 @@ const MODULES$8 = [
 ];
 class AXPasswordBoxModule {
 }
-AXPasswordBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPasswordBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXPasswordBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPasswordBoxModule, declarations: [AXPasswordBoxComponent], imports: [CommonModule,
+AXPasswordBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPasswordBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXPasswordBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPasswordBoxModule, declarations: [AXPasswordBoxComponent], imports: [CommonModule,
         FormsModule,
         AXButtonModule,
         AXEditorDecoratorModule,
         AXIconModule], exports: [AXPasswordBoxComponent] });
-AXPasswordBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPasswordBoxModule, providers: [], imports: [[...MODULES$8]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPasswordBoxModule, decorators: [{
+AXPasswordBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPasswordBoxModule, providers: [], imports: [[...MODULES$8]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPasswordBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$8],
@@ -4952,16 +4986,11 @@ 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupComponent, decorators: [{
+AXPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", 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: "13.1.1", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-popup',
-                    templateUrl: './popup.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                }]
+            args: [{ selector: 'ax-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: AXLoadingService }]; }, propDecorators: { onKeydownHandler: [{
                 type: HostListener,
                 args: ['keydown.escape', ['$event']]
@@ -5018,7 +5047,6 @@ class AXPopupService {
         return promise;
     }
     closePopup(popup, com, result) {
-        var _a, _b;
         const closeFunc = (e) => {
             com.dispose();
             this.stack.pop();
@@ -5029,7 +5057,7 @@ class AXPopupService {
             }
         };
         const e = { cancel: false };
-        const closingFunc = (_b = (_a = popup[TAB_META_KEY]) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.onClosing;
+        const closingFunc = popup[TAB_META_KEY]?.component?.onClosing;
         if (closingFunc) {
             const res = closingFunc(e);
             if (res instanceof Promise) {
@@ -5050,9 +5078,9 @@ class AXPopupService {
         }
     }
 }
-AXPopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupService, deps: [{ token: AXOverlayService }], target: i0.ɵɵFactoryTarget.Injectable });
-AXPopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupService, decorators: [{
+AXPopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopupService, deps: [{ token: AXOverlayService }], target: i0.ɵɵFactoryTarget.Injectable });
+AXPopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopupService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopupService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: AXOverlayService }]; } });
 
@@ -5060,10 +5088,10 @@ const COMPONENT$7 = [AXPopupComponent];
 const MODULES$7 = [CommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule];
 class AXPopupModule {
 }
-AXPopupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXPopupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupModule, declarations: [AXPopupComponent], imports: [CommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule], exports: [AXPopupComponent] });
-AXPopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupModule, providers: [AXPopupService], imports: [[...MODULES$7]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupModule, decorators: [{
+AXPopupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXPopupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopupModule, declarations: [AXPopupComponent], imports: [CommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule], exports: [AXPopupComponent] });
+AXPopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopupModule, providers: [AXPopupService], imports: [[...MODULES$7]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopupModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$7],
@@ -5079,27 +5107,21 @@ class AXRadioComponent extends AXBaseComponentMixin {
         //TODO: ax-radio
     }
 }
-AXRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRadioComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXRadioComponent, selector: "ax-radio", host: { classAttribute: "ax-radio" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-items-start\">\n    <div class=\"ax-flex ax-items-center ax-h-5\">\n        <input [id]=\"id\" class=\"ax-radio\" type=\"radio\">\n    </div>\n    <div class=\"ax-ms-3 ax-text-sm\">\n        <ng-content select=\"ax-label\"></ng-content>\n        <ng-content select=\"ax-form-hint\"></ng-content>\n    </div>\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRadioComponent, decorators: [{
+AXRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXRadioComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXRadioComponent, selector: "ax-radio", host: { classAttribute: "ax-radio" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-items-start\">\n    <div class=\"ax-flex ax-items-center ax-h-5\">\n        <input [id]=\"id\" class=\"ax-radio\" type=\"radio\">\n    </div>\n    <div class=\"ax-ms-3 ax-text-sm\">\n        <ng-content select=\"ax-label\"></ng-content>\n        <ng-content select=\"ax-form-hint\"></ng-content>\n    </div>\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXRadioComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-radio',
-                    templateUrl: './radio.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-radio' }
-                }]
+            args: [{ selector: 'ax-radio', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-radio' }, template: "<div class=\"ax-flex ax-items-start\">\n    <div class=\"ax-flex ax-items-center ax-h-5\">\n        <input [id]=\"id\" class=\"ax-radio\" type=\"radio\">\n    </div>\n    <div class=\"ax-ms-3 ax-text-sm\">\n        <ng-content select=\"ax-label\"></ng-content>\n        <ng-content select=\"ax-form-hint\"></ng-content>\n    </div>\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
 const COMPONENT$6 = [AXRadioComponent];
 const MODULES$6 = [CommonModule];
 class AXRadioModule {
 }
-AXRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRadioModule, declarations: [AXRadioComponent], imports: [CommonModule], exports: [AXRadioComponent] });
-AXRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRadioModule, providers: [], imports: [[...MODULES$6]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRadioModule, decorators: [{
+AXRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXRadioModule, declarations: [AXRadioComponent], imports: [CommonModule], exports: [AXRadioComponent] });
+AXRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXRadioModule, providers: [], imports: [[...MODULES$6]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXRadioModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$6],
@@ -5115,27 +5137,21 @@ class AXRangeSliderComponent extends AXBaseComponentMixin {
         //TODO: ax-range-slider
     }
 }
-AXRangeSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRangeSliderComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXRangeSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXRangeSliderComponent, selector: "ax-range-slider", host: { classAttribute: "ax-range-slider" }, usesInheritance: true, ngImport: i0, template: "<input type=\"range\" min=\"1\" max=\"100\" value=\"50\" class=\"ax-range-slider-input\">", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRangeSliderComponent, decorators: [{
+AXRangeSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXRangeSliderComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXRangeSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXRangeSliderComponent, selector: "ax-range-slider", host: { classAttribute: "ax-range-slider" }, usesInheritance: true, ngImport: i0, template: "<input type=\"range\" min=\"1\" max=\"100\" value=\"50\" class=\"ax-range-slider-input\">", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXRangeSliderComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-range-slider',
-                    templateUrl: './range-slider.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-range-slider' }
-                }]
+            args: [{ selector: 'ax-range-slider', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-range-slider' }, template: "<input type=\"range\" min=\"1\" max=\"100\" value=\"50\" class=\"ax-range-slider-input\">" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
 const COMPONENT$5 = [AXRangeSliderComponent];
 const MODULES$5 = [CommonModule];
 class AXRangeSliderModule {
 }
-AXRangeSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRangeSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXRangeSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRangeSliderModule, declarations: [AXRangeSliderComponent], imports: [CommonModule], exports: [AXRangeSliderComponent] });
-AXRangeSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRangeSliderModule, providers: [], imports: [[...MODULES$5]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRangeSliderModule, decorators: [{
+AXRangeSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXRangeSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXRangeSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXRangeSliderModule, declarations: [AXRangeSliderComponent], imports: [CommonModule], exports: [AXRangeSliderComponent] });
+AXRangeSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXRangeSliderModule, providers: [], imports: [[...MODULES$5]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXRangeSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$5],
@@ -5312,19 +5328,11 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         this._currentfocusedIndex = index;
     }
 }
-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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
+AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", 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: "13.1.1", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-select-box',
-                    templateUrl: 'selectbox.component.html',
-                    inputs: ['disabled', 'readonly', 'tabIndex', 'size', 'fitParent', 'value', 'items', 'multiple', 'allowNull', 'valueField', 'textField'],
-                    outputs: ['onOpened', 'onClosed', 'valueChange', 'onValueChanged', 'onBlur', 'onFocus'],
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { 'class': 'ax-select-box' }
-                }]
+            args: [{ selector: 'ax-select-box', inputs: ['disabled', 'readonly', 'tabIndex', 'size', 'fitParent', 'value', 'items', 'multiple', 'allowNull', 'valueField', 'textField'], outputs: ['onOpened', 'onClosed', 'valueChange', 'onValueChanged', 'onBlur', 'onFocus'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { 'class': 'ax-select-box' }, 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>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { dropdown: [{
                 type: ViewChild,
                 args: [AXDropdownComponent]
@@ -5338,10 +5346,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
 
 class AXSelectBoxModule {
 }
-AXSelectBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSelectBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [CommonModule, AXDropdownModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule], exports: [AXSelectBoxComponent] });
-AXSelectBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectBoxModule, providers: [], imports: [[CommonModule, AXDropdownModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectBoxModule, decorators: [{
+AXSelectBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSelectBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [CommonModule, AXDropdownModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule], exports: [AXSelectBoxComponent] });
+AXSelectBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxModule, providers: [], imports: [[CommonModule, AXDropdownModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXDropdownModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule],
@@ -5366,14 +5374,11 @@ 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectionListComponent, decorators: [{
+AXSelectionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectionListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", ngImport: i0, type: AXSelectionListComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-selection-list',
-                    templateUrl: './selection-list.component.html',
-                    inputs: [
+            args: [{ selector: 'ax-selection-list', inputs: [
                         'disabled',
                         'readonly',
                         'tabIndex',
@@ -5385,21 +5390,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                         'items',
                         'selectionMode',
                         'cssClass'
-                    ],
-                    outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus'],
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
+                    ], outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { direction: [{
                 type: Input
             }] } });
 
 class AXSelectionListModule {
 }
-AXSelectionListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectionListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSelectionListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectionListModule, declarations: [AXSelectionListComponent], imports: [CommonModule, FormsModule, AXCheckBoxModule], exports: [AXSelectionListComponent] });
-AXSelectionListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectionListModule, providers: [], imports: [[CommonModule, FormsModule, AXCheckBoxModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectionListModule, decorators: [{
+AXSelectionListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectionListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSelectionListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectionListModule, declarations: [AXSelectionListComponent], imports: [CommonModule, FormsModule, AXCheckBoxModule], exports: [AXSelectionListComponent] });
+AXSelectionListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectionListModule, providers: [], imports: [[CommonModule, FormsModule, AXCheckBoxModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectionListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXSelectionListComponent],
@@ -5414,27 +5415,21 @@ class AXSideMenuComponent extends AXBaseComponentMixin {
         super(elementRef, cdr);
     }
 }
-AXSideMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSideMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSideMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXSideMenuComponent, selector: "ax-side-menu", host: { classAttribute: "ax-side-menu" }, usesInheritance: true, ngImport: i0, template: "\r\n<div>Hi ax-side-menu</div>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSideMenuComponent, decorators: [{
+AXSideMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSideMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSideMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXSideMenuComponent, selector: "ax-side-menu", host: { classAttribute: "ax-side-menu" }, usesInheritance: true, ngImport: i0, template: "\r\n<div>Hi ax-side-menu</div>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSideMenuComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-side-menu',
-                    templateUrl: './side-menu.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-side-menu' }
-                }]
+            args: [{ selector: 'ax-side-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-side-menu' }, template: "\r\n<div>Hi ax-side-menu</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
 const COMPONENT$4 = [AXSideMenuComponent];
 const MODULES$4 = [CommonModule];
 class AXSideMenuModule {
 }
-AXSideMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSideMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSideMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSideMenuModule, declarations: [AXSideMenuComponent], imports: [CommonModule], exports: [AXSideMenuComponent] });
-AXSideMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSideMenuModule, providers: [], imports: [[...MODULES$4]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSideMenuModule, decorators: [{
+AXSideMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSideMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSideMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSideMenuModule, declarations: [AXSideMenuComponent], imports: [CommonModule], exports: [AXSideMenuComponent] });
+AXSideMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSideMenuModule, providers: [], imports: [[...MODULES$4]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSideMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$4],
@@ -5455,33 +5450,25 @@ class AXSwitchComponent extends AXBaseValueComponentMixin {
         }
     }
 }
-AXSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSwitchComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXSwitchComponent, selector: "ax-switch", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", cssClass: "cssClass", cssStyle: "cssStyle", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, usesInheritance: true, ngImport: i0, template: "<label class=\"ax-switch {{cssClass}} ax-{{size}}\" [class.ax-state-disabled]=\"disabled\"\r\n    [class.ax-state-readonly]=\"readonly\" [attr.style]=\"cssStyle\" (click)=\"handleOnClickEvent($event)\">\r\n    <input type=\"checkbox\" [(ngModel)]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    <span class=\"ax-switch-slider\"></span>\r\n</label>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", directives: [{ type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSwitchComponent, decorators: [{
+AXSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSwitchComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXSwitchComponent, selector: "ax-switch", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", cssClass: "cssClass", cssStyle: "cssStyle", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, usesInheritance: true, ngImport: i0, template: "<label class=\"ax-switch {{cssClass}} ax-{{size}}\" [class.ax-state-disabled]=\"disabled\"\r\n    [class.ax-state-readonly]=\"readonly\" [attr.style]=\"cssStyle\" (click)=\"handleOnClickEvent($event)\">\r\n    <input type=\"checkbox\" [(ngModel)]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    <span class=\"ax-switch-slider\"></span>\r\n</label>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", directives: [{ type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSwitchComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-switch',
-                    templateUrl: './switch.component.html',
-                    inputs: ['disabled', 'readonly', 'tabIndex', 'size', 'cssClass', 'cssStyle', ...VALUE_INPUTS],
-                    outputs: ['onBlur', 'onFocus', ...VALUE_OUTPUT],
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
+            args: [{ selector: 'ax-switch', inputs: ['disabled', 'readonly', 'tabIndex', 'size', 'cssClass', 'cssStyle', ...VALUE_INPUTS], outputs: ['onBlur', 'onFocus', ...VALUE_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"ax-switch {{cssClass}} ax-{{size}}\" [class.ax-state-disabled]=\"disabled\"\r\n    [class.ax-state-readonly]=\"readonly\" [attr.style]=\"cssStyle\" (click)=\"handleOnClickEvent($event)\">\r\n    <input type=\"checkbox\" [(ngModel)]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    <span class=\"ax-switch-slider\"></span>\r\n</label>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
 class AXSwitchModule {
 }
-AXSwitchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSwitchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSwitchModule, declarations: [AXSwitchComponent], imports: [CommonModule, FormsModule], exports: [AXSwitchComponent] });
-AXSwitchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSwitchModule, providers: [], imports: [[CommonModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSwitchModule, decorators: [{
+AXSwitchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSwitchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSwitchModule, declarations: [AXSwitchComponent], imports: [CommonModule, FormsModule], exports: [AXSwitchComponent] });
+AXSwitchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSwitchModule, providers: [], imports: [[CommonModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSwitchModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXSwitchComponent],
                     imports: [CommonModule, FormsModule],
                     exports: [AXSwitchComponent],
-                    entryComponents: [AXSwitchComponent],
-                    providers: [],
+                    providers: []
                 }]
         }] });
 
@@ -5522,18 +5509,11 @@ class AXTabStripComponent extends AXSizableComponentMixin {
         return [`ax-tabs`, `ax-tabs-${this.mode ? this.mode : 'default'}`, `ax-tabs-${this.direction}`, `${this.fitParent ? 'ax-tabs-fit' : ''}`].join(' ');
     }
 }
-AXTabStripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabStripComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTabStripComponent, selector: "ax-tab-strip", inputs: { size: "size", items: "items", mode: "mode", direction: "direction", fitParent: "fitParent", minWidth: "minWidth" }, outputs: { onSelectionChanged: "onSelectionChanged" }, host: { properties: { "class": "this.__hostClass" }, classAttribute: "ax-tab-strip" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngFor=\"let item of items;let i = index\">\r\n    <div class=\"ax-tab-item\" [class.ax-state-active]=\"item.active\" [class.ax-state-disabled]=\"item.disabled\" *ngIf=\"item.visible!=false\" (click)=\"_handleClick(item,i)\">\r\n        <ng-content select=\"ax-prefix\"></ng-content>\r\n        <span *ngIf=\"item.text\">{{item.text}}</span>\r\n        <ng-content select=\"ax-suffix\"></ng-content>\r\n    </div>\r\n</ng-container>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabStripComponent, decorators: [{
+AXTabStripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTabStripComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXTabStripComponent, selector: "ax-tab-strip", inputs: { size: "size", items: "items", mode: "mode", direction: "direction", fitParent: "fitParent", minWidth: "minWidth" }, outputs: { onSelectionChanged: "onSelectionChanged" }, host: { properties: { "class": "this.__hostClass" }, classAttribute: "ax-tab-strip" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngFor=\"let item of items;let i = index\">\r\n    <div class=\"ax-tab-item\" [class.ax-state-active]=\"item.active\" [class.ax-state-disabled]=\"item.disabled\" *ngIf=\"item.visible!=false\" (click)=\"_handleClick(item,i)\">\r\n        <ng-content select=\"ax-prefix\"></ng-content>\r\n        <span *ngIf=\"item.text\">{{item.text}}</span>\r\n        <ng-content select=\"ax-suffix\"></ng-content>\r\n    </div>\r\n</ng-container>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTabStripComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-tab-strip',
-                    templateUrl: './tab-strip.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    inputs: ['size'],
-                    host: { class: 'ax-tab-strip' },
-                }]
+            args: [{ selector: 'ax-tab-strip', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['size'], host: { class: 'ax-tab-strip' }, template: "<ng-container *ngFor=\"let item of items;let i = index\">\r\n    <div class=\"ax-tab-item\" [class.ax-state-active]=\"item.active\" [class.ax-state-disabled]=\"item.disabled\" *ngIf=\"item.visible!=false\" (click)=\"_handleClick(item,i)\">\r\n        <ng-content select=\"ax-prefix\"></ng-content>\r\n        <span *ngIf=\"item.text\">{{item.text}}</span>\r\n        <ng-content select=\"ax-suffix\"></ng-content>\r\n    </div>\r\n</ng-container>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
                 type: Input
             }], mode: [{
@@ -5569,14 +5549,14 @@ class AXTabComponent extends AXBaseComponentMixin {
         this._getHostElement().style.display = 'none';
     }
 }
-AXTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTabComponent, selector: "ax-tab", inputs: { name: "name", caption: "caption", tooltip: "tooltip", icon: "icon", visible: "visible", disabled: "disabled", data: "data" }, host: { styleAttribute: "display:none", classAttribute: "ax-tab" }, usesInheritance: true, ngImport: i0, template: `
+AXTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTabComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXTabComponent, selector: "ax-tab", inputs: { name: "name", caption: "caption", tooltip: "tooltip", icon: "icon", visible: "visible", disabled: "disabled", data: "data" }, host: { styleAttribute: "display:none", classAttribute: "ax-tab" }, usesInheritance: true, ngImport: i0, template: `
       <div *ngIf="_render" >
         <ng-content>
         </ng-content>
       </div>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTabComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-tab',
@@ -5630,18 +5610,11 @@ class AXTabViewComponent extends AXBaseComponent {
         tabs[e.selectedIndex].show();
     }
 }
-AXTabViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTabViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTabViewComponent, selector: "ax-tab-view", inputs: { size: "size" }, host: { classAttribute: "ax-tab-view" }, queries: [{ propertyName: "_contentTabs", predicate: AXTabComponent }], usesInheritance: true, ngImport: i0, template: "<!-- <ax-tab-strip [items]=\"_tabs\" (onSelectionChanged)=\"_handleSelectionChanged($event)\">\r\n\r\n</ax-tab-strip> -->\r\n<div class=\"ax-tab-view-container\">\r\n    <ng-content select=\"ax-tab\">\r\n    </ng-content>\r\n</div>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabViewComponent, decorators: [{
+AXTabViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTabViewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTabViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXTabViewComponent, selector: "ax-tab-view", inputs: { size: "size" }, host: { classAttribute: "ax-tab-view" }, queries: [{ propertyName: "_contentTabs", predicate: AXTabComponent }], usesInheritance: true, ngImport: i0, template: "<!-- <ax-tab-strip [items]=\"_tabs\" (onSelectionChanged)=\"_handleSelectionChanged($event)\">\r\n\r\n</ax-tab-strip> -->\r\n<div class=\"ax-tab-view-container\">\r\n    <ng-content select=\"ax-tab\">\r\n    </ng-content>\r\n</div>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTabViewComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-tab-view',
-                    templateUrl: './tab-view.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    inputs: ['size'],
-                    host: { class: 'ax-tab-view' }
-                }]
+            args: [{ selector: 'ax-tab-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['size'], host: { class: 'ax-tab-view' }, template: "<!-- <ax-tab-strip [items]=\"_tabs\" (onSelectionChanged)=\"_handleSelectionChanged($event)\">\r\n\r\n</ax-tab-strip> -->\r\n<div class=\"ax-tab-view-container\">\r\n    <ng-content select=\"ax-tab\">\r\n    </ng-content>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _contentTabs: [{
                 type: ContentChildren,
                 args: [AXTabComponent]
@@ -5665,7 +5638,7 @@ class AXTabItemComponent extends AXBaseClickableMixin {
     }
     // @HostBinding('class')
     // private get __hostClass(): string {
-    //     debugger;
+    //     ;
     //     const classes: any = {
     //         'ax-state-active': this.active
     //     }
@@ -5679,8 +5652,8 @@ class AXTabItemComponent extends AXBaseClickableMixin {
         });
     }
 }
-AXTabItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTabItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTabItemComponent, selector: "ax-tab-item", inputs: { text: "text", width: "width", active: "active" }, outputs: { activeChange: "activeChange" }, host: { listeners: { "click": "__hostClick($event)" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+AXTabItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTabItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTabItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXTabItemComponent, selector: "ax-tab-item", inputs: { text: "text", width: "width", active: "active" }, outputs: { activeChange: "activeChange" }, host: { listeners: { "click": "__hostClick($event)" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <ng-container *ngIf="headerTemplate;else header">
              <ng-container [ngTemplateOutlet]="headerTemplate" [ngTemplateOutletContext]="{ $implicit: {text,active} }"></ng-container>
         </ng-container>
@@ -5694,7 +5667,7 @@ AXTabItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             </ng-content>
         </ng-template>
     `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTabItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-tab-item',
@@ -5766,14 +5739,14 @@ class AXTabsComponent extends AXBaseComponent {
         this._cdr.markForCheck();
     }
 }
-AXTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTabsComponent, selector: "ax-tabs", inputs: { fitParent: "fitParent", minWidth: "minWidth", content: "content" }, queries: [{ propertyName: "_contentTabs", predicate: AXTabItemComponent }], usesInheritance: true, ngImport: i0, template: `
+AXTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTabsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXTabsComponent, selector: "ax-tabs", inputs: { fitParent: "fitParent", minWidth: "minWidth", content: "content" }, queries: [{ propertyName: "_contentTabs", predicate: AXTabItemComponent }], usesInheritance: true, ngImport: i0, template: `
         <div class="ax-items-wrapper">
             <ng-content select="ax-tab-item">
             </ng-content>
         </div>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTabsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-tabs',
@@ -5808,7 +5781,7 @@ class AXTabContentDirective {
         return this._portal;
     }
     set portal(v) {
-        //debugger;
+        //;
         if (v) {
             this._portal = v;
             this._viewContainerRef.clear();
@@ -5816,9 +5789,9 @@ class AXTabContentDirective {
         }
     }
 }
-AXTabContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabContentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-AXTabContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.6", type: AXTabContentDirective, selector: "[axTabContent]", inputs: { portal: ["axTabContent", "portal"] }, exportAs: ["axTabContent"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabContentDirective, decorators: [{
+AXTabContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTabContentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+AXTabContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: AXTabContentDirective, selector: "[axTabContent]", inputs: { portal: ["axTabContent", "portal"] }, exportAs: ["axTabContent"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTabContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axTabContent]',
@@ -5831,10 +5804,10 @@ const COMPONENT$3 = [AXTabsComponent, AXTabItemComponent, AXTabContentDirective]
 const MODULES$3 = [CommonModule, PortalModule, AXEditorDecoratorModule];
 class AXTabsModule {
 }
-AXTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabsModule, declarations: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective], imports: [CommonModule, PortalModule, AXEditorDecoratorModule], exports: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective] });
-AXTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabsModule, providers: [], imports: [[...MODULES$3]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabsModule, decorators: [{
+AXTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTabsModule, declarations: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective], imports: [CommonModule, PortalModule, AXEditorDecoratorModule], exports: [AXTabsComponent, AXTabItemComponent, AXTabContentDirective] });
+AXTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTabsModule, providers: [], imports: [[...MODULES$3]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTabsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$3],
@@ -5941,20 +5914,12 @@ class AXTimeBoxComponent extends AXBaseTextBoxMixin {
         this._emitOnFocusEvent(e);
     }
 }
-AXTimeBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.MaskApplierService }], target: i0.ɵɵFactoryTarget.Component });
-AXTimeBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTimeBoxComponent, selector: "ax-time-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", name: "name", minValue: "minValue", maxValue: "maxValue", format: "format", displayText: "displayText" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", displayTextChange: "displayTextChange" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-time-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\" [attr.pattern]=\"'[\\d\\.]*'\" [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && allowNull && !(disabled || readonly)\">\r\n    <i class=\"ax-icon-x icon\"></i>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "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: [{
+AXTimeBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", 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: "13.1.1", 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: "13.1.1", ngImport: i0, type: AXTimeBoxComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-time-box',
-                    templateUrl: './time-box.component.html',
-                    inputs: ['disabled', 'readonly', 'tabIndex', 'size', 'value', ...TEXTBOX_INPUTS],
-                    outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus', ...TEXTBOX_OUTPUT],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    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: [{
+            args: [{ selector: 'ax-time-box', inputs: ['disabled', 'readonly', 'tabIndex', 'size', 'value', ...TEXTBOX_INPUTS], outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus', ...TEXTBOX_OUTPUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-time-box ax-editor-container' }, 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>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.MaskApplierService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }], minValue: [{
@@ -5978,12 +5943,12 @@ const MODULES$2 = [
 ];
 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,
+AXTimeBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTimeBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTimeBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTimeBoxModule, declarations: [AXTimeBoxComponent], imports: [CommonModule,
         FormsModule,
-        AXButtonModule, i1$3.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: [{
+        AXButtonModule, i1$2.NgxMaskModule], exports: [AXTimeBoxComponent] });
+AXTimeBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTimeBoxModule, providers: [], imports: [[...MODULES$2]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTimeBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$2],
@@ -6026,27 +5991,21 @@ class AXToastComponent extends AXBaseComponentMixin {
         }
     }
 }
-AXToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXToastComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXToastComponent, selector: "ax-toast", host: { classAttribute: "ax-toast" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-toast-icon-side\">\r\n    <i class=\"ax-toast-icon {{_icon}}\"></i>\r\n</div>\r\n<div class=\"ax-toast-content-side\">\r\n    <div class=\"ax-toast-title\">{{options.title}}</div>\r\n    <div class=\"ax-toast-content\" *ngIf=\"options.content\">{{options.content}}</div>\r\n</div>\r\n<div class=\"ax-toast-dismiss-icon\">\r\n    <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.closeable\" (click)=\"close()\"></i>\r\n</div>\r\n<div class=\"ax-toast-progress ax-{{options.type}}\" [style.animation-duration.ms]=\"options.timeOut\" *ngIf=\"options.timeOut\">\r\n</div>", directives: [{ type: 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: AXToastComponent, decorators: [{
+AXToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXToastComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXToastComponent, selector: "ax-toast", host: { classAttribute: "ax-toast" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-toast-icon-side\">\r\n    <i class=\"ax-toast-icon {{_icon}}\"></i>\r\n</div>\r\n<div class=\"ax-toast-content-side\">\r\n    <div class=\"ax-toast-title\">{{options.title}}</div>\r\n    <div class=\"ax-toast-content\" *ngIf=\"options.content\">{{options.content}}</div>\r\n</div>\r\n<div class=\"ax-toast-dismiss-icon\">\r\n    <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.closeable\" (click)=\"close()\"></i>\r\n</div>\r\n<div class=\"ax-toast-progress ax-{{options.type}}\" [style.animation-duration.ms]=\"options.timeOut\" *ngIf=\"options.timeOut\">\r\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXToastComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-toast',
-                    templateUrl: './toast.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-toast' }
-                }]
+            args: [{ selector: 'ax-toast', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-toast' }, template: "<div class=\"ax-toast-icon-side\">\r\n    <i class=\"ax-toast-icon {{_icon}}\"></i>\r\n</div>\r\n<div class=\"ax-toast-content-side\">\r\n    <div class=\"ax-toast-title\">{{options.title}}</div>\r\n    <div class=\"ax-toast-content\" *ngIf=\"options.content\">{{options.content}}</div>\r\n</div>\r\n<div class=\"ax-toast-dismiss-icon\">\r\n    <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.closeable\" (click)=\"close()\"></i>\r\n</div>\r\n<div class=\"ax-toast-progress ax-{{options.type}}\" [style.animation-duration.ms]=\"options.timeOut\" *ngIf=\"options.timeOut\">\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
 const COMPONENT$1 = [AXToastComponent];
 const MODULES$1 = [CommonModule, AXButtonModule];
 class AXToastModule {
 }
-AXToastModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXToastModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXToastModule, declarations: [AXToastComponent], imports: [CommonModule, AXButtonModule], exports: [AXToastComponent] });
-AXToastModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXToastModule, providers: [], imports: [[...MODULES$1]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXToastModule, decorators: [{
+AXToastModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXToastModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXToastModule, declarations: [AXToastComponent], imports: [CommonModule, AXButtonModule], exports: [AXToastComponent] });
+AXToastModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXToastModule, providers: [], imports: [[...MODULES$1]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXToastModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$1],
@@ -6158,9 +6117,9 @@ class AXToastService {
         }
     }
 }
-AXToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXToastService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-AXToastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXToastService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXToastService, decorators: [{
+AXToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXToastService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+AXToastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXToastService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXToastService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.Injector }]; } });
@@ -6172,8 +6131,8 @@ class AXTooltipComponent extends AXBaseComponentMixin {
         this.position = 'top';
     }
 }
-AXTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTooltipComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTooltipComponent, selector: "ax-tooltip", inputs: { text: "text", position: "position" }, host: { classAttribute: "ax-tooltip" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-tooltip-container\">\r\n    <div class=\"ax-tooltip\" @tooltip>\r\n        {{ text }}\r\n    </div>\r\n    <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{position}}\"></div>\r\n</div>", animations: [
+AXTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTooltipComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXTooltipComponent, selector: "ax-tooltip", inputs: { text: "text", position: "position" }, host: { classAttribute: "ax-tooltip" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-tooltip-container\">\r\n    <div class=\"ax-tooltip\" @tooltip>\r\n        {{ text }}\r\n    </div>\r\n    <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{position}}\"></div>\r\n</div>", animations: [
         trigger('tooltip', [
             transition(':enter', [
                 style({ opacity: 0 }),
@@ -6182,15 +6141,9 @@ AXTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             transition(':leave', [animate(50, style({ opacity: 0 }))]),
         ]),
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTooltipComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ax-tooltip',
-                    templateUrl: './tooltip.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-tooltip' },
-                    animations: [
+            args: [{ selector: 'ax-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-tooltip' }, animations: [
                         trigger('tooltip', [
                             transition(':enter', [
                                 style({ opacity: 0 }),
@@ -6198,8 +6151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                             ]),
                             transition(':leave', [animate(50, style({ opacity: 0 }))]),
                         ]),
-                    ],
-                }]
+                    ], template: "<div class=\"ax-tooltip-container\">\r\n    <div class=\"ax-tooltip\" @tooltip>\r\n        {{ text }}\r\n    </div>\r\n    <div class=\"ax-tooltip-tringle ax-tooltip-tringle-{{position}}\"></div>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
                 type: Input
             }], position: [{
@@ -6268,9 +6220,9 @@ class AXTooltipDirective {
         this.overlayRef.detach();
     }
 }
-AXTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTooltipDirective, deps: [{ token: i1$1.Overlay }, { token: i1$1.OverlayPositionBuilder }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-AXTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.6", type: AXTooltipDirective, selector: "[axTooltip]", inputs: { text: ["axTooltip", "text"], position: ["axTooltipPositon", "position"] }, host: { listeners: { "mouseenter": "show()", "mouseout": "hide()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTooltipDirective, decorators: [{
+AXTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTooltipDirective, deps: [{ token: i1$1.Overlay }, { token: i1$1.OverlayPositionBuilder }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+AXTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: AXTooltipDirective, selector: "[axTooltip]", inputs: { text: ["axTooltip", "text"], position: ["axTooltipPositon", "position"] }, host: { listeners: { "mouseenter": "show()", "mouseout": "hide()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTooltipDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axTooltip]' }]
         }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i1$1.OverlayPositionBuilder }, { type: i0.ElementRef }]; }, propDecorators: { text: [{
@@ -6291,10 +6243,10 @@ const COMPONENT = [AXTooltipComponent, AXTooltipDirective];
 const MODULES = [CommonModule, OverlayModule];
 class AXTooltipModule {
 }
-AXTooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTooltipModule, declarations: [AXTooltipComponent, AXTooltipDirective], imports: [CommonModule, OverlayModule], exports: [AXTooltipComponent, AXTooltipDirective] });
-AXTooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTooltipModule, providers: [], imports: [[...MODULES]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTooltipModule, decorators: [{
+AXTooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTooltipModule, declarations: [AXTooltipComponent, AXTooltipDirective], imports: [CommonModule, OverlayModule], exports: [AXTooltipComponent, AXTooltipDirective] });
+AXTooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTooltipModule, providers: [], imports: [[...MODULES]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],
@@ -6304,90 +6256,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) {
@@ -6475,9 +6343,9 @@ class AXValidationRuleComponent extends AXBaseComponentMixin {
         });
     }
 }
-AXValidationRuleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXValidationRuleComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXValidationRuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: { rule: "rule", message: "message", showMessage: "showMessage", value: "value", enabled: "enabled" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXValidationRuleComponent, decorators: [{
+AXValidationRuleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXValidationRuleComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXValidationRuleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: { rule: "rule", message: "message", showMessage: "showMessage", value: "value", enabled: "enabled" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXValidationRuleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-validation-rule',
@@ -6511,10 +6379,10 @@ class AXValidationModule {
         });
     }
 }
-AXValidationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXValidationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXValidationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXValidationModule, declarations: [AXValidationRuleComponent], imports: [CommonModule], exports: [AXValidationRuleComponent] });
-AXValidationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXValidationModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXValidationModule, decorators: [{
+AXValidationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXValidationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXValidationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXValidationModule, declarations: [AXValidationRuleComponent], imports: [CommonModule], exports: [AXValidationRuleComponent] });
+AXValidationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXValidationModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXValidationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXValidationRuleComponent],
@@ -6533,5 +6401,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 };
-//# sourceMappingURL=acorex-components.js.map
+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.mjs.map