@acorex/components 5.0.35 → 5.0.39

package/fesm2015/acorex-components.mjs

@@ -1,27 +1,30 @@
 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, TemplateRef, ViewChildren } from '@angular/core';
+import _ from 'lodash';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
-import * as i2 from '@acorex/core';
-import { AXObjectUtil, AXDateTime, AXDateTimeRange, AXDateTimeModule, AXDrawingUtil, AXStringUtil, AXTranslator, AXConfig } from '@acorex/core';
+import * as i1$3 from '@acorex/core';
+import { AXObjectUtil, AXDateTime, AXDateTimeRange, AXDateTimeModule, AXDrawingUtil, AXTranslator, AXStringUtil, AXConfig, AXTranslationModule } 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 i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i1$4 from '@angular/cdk/portal';
+import * as i1$5 from '@angular/cdk/portal';
 import { TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
-import _ from 'lodash';
 import * as i1$2 from '@angular/cdk/overlay';
 import { OverlayModule, OverlayContainer, Overlay } from '@angular/cdk/overlay';
-import * as i1$3 from 'ngx-mask';
+import * as i1$4 from 'ngx-mask';
 import { NgxMaskModule } from 'ngx-mask';
-import * as i2$1 from '@angular/cdk/a11y';
+import * as i2 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i3 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import * as i2$2 from '@angular/cdk/bidi';
+import * as i2$1 from '@angular/cdk/bidi';
+import IMask from 'imask';
+import * as i5 from 'angular-imask';
+import { IMaskModule, IMaskDirective } from 'angular-imask';
 import { trigger, transition, style, animate } from '@angular/animations';
 
 var _AXBaseComponent_elementRef;
@@ -101,9 +104,9 @@ class AXBaseComponent {
     }
 }
 _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: [{
+AXBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXBaseComponent, deps: [{ token: Array }], target: i0.ɵɵFactoryTarget.Injectable });
+AXBaseComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXBaseComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXBaseComponent, decorators: [{
             type: Injectable
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
@@ -130,10 +133,6 @@ function _ButtonComponentMixin(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;
@@ -151,6 +150,21 @@ function _ButtonComponentMixin(Base) {
             this._selected = false;
         }
         /**
+        *  Defines the primary text to show inside the button.
+        */
+        get text() {
+            return this._text;
+        }
+        set text(v) {
+            this._setOption({
+                name: 'text',
+                value: v,
+                afterCallback: () => {
+                    this._cdr.markForCheck();
+                }
+            });
+        }
+        /**
         *  Predefined color schemes
         */
         get color() {
@@ -291,7 +305,18 @@ function _DatalistComponenetMixin(Base) {
             return __classPrivateFieldGet(this, _items, "f");
         }
         set items(v) {
-            __classPrivateFieldSet(this, _items, v, "f");
+            if (Array.isArray(v)) {
+                __classPrivateFieldSet(this, _items, this._formatData(v), "f");
+                this._onDataLoaded();
+            }
+            else if (typeof v === 'function') {
+                __classPrivateFieldSet(this, _isLazy, true, "f");
+                __classPrivateFieldSet(this, _items, v, "f");
+            }
+            else {
+                __classPrivateFieldSet(this, _items, [], "f");
+                this._onDataLoaded();
+            }
         }
         get displayItems() {
             if (Array.isArray(this.items)) {
@@ -305,6 +330,18 @@ function _DatalistComponenetMixin(Base) {
         get isLoading() {
             return __classPrivateFieldGet(this, _isLoading, "f");
         }
+        _formatData(v) {
+            return _.unionBy(v.map((o, i) => {
+                if (typeof o == 'object')
+                    return o;
+                else {
+                    const no = {};
+                    no[this.valueField] = o;
+                    no[Array.isArray(this.textField) ? this.textField[0] : this.textField] = o;
+                    return no;
+                }
+            }), this.valueField);
+        }
         _fetchData() {
             if ((this.loadedCount >= this.totalCount && this.totalCount != 0) || __classPrivateFieldGet(this, _isLoading, "f") || !__classPrivateFieldGet(this, _isLazy, "f")) {
                 return;
@@ -330,13 +367,13 @@ function _DatalistComponenetMixin(Base) {
                 });
             }
         }
-        _onInternalInit() {
-            if (typeof __classPrivateFieldGet(this, _items, "f") == 'function') {
-                __classPrivateFieldSet(this, _isLazy, true, "f");
-                this._fetchData();
-            }
-            super._onInternalInit();
-        }
+        // _onInternalInit() {
+        //     if (typeof this.#items == 'function') {
+        //         this.#isLazy = true;
+        //         this._fetchData();
+        //     }
+        //     super._onInternalInit();
+        // }
         _onDataLoaded() {
         }
         _getItemDisplayTextTemplte(item) {
@@ -358,13 +395,19 @@ function _DatalistComponenetMixin(Base) {
         _isLazy = new WeakMap(),
         _items = new WeakMap(),
         _a;
-}
+}
+const DATALIST_INPUTS = [
+    'pageSize',
+    'valueField',
+    'textField',
+    'items'
+];
+const DATALIST_OUTPUT = [];
 
 function _DropdownComponenetMixin(Base) {
     class Mixin extends Base {
         constructor(...args) {
             super(...args);
-            this.fitParent = true;
             this.readonly = false;
             this.onOpened = new EventEmitter();
             this.onClosed = new EventEmitter();
@@ -385,12 +428,12 @@ function _DropdownComponenetMixin(Base) {
                 htmlElement: this._getHostElement()
             });
         }
+        onInit() {
+            super.onInit();
+            this.popover.onOpened.subscribe(this.onOpened);
+            this.popover.onClosed.subscribe(this.onClosed);
+        }
         onViewInit() {
-            if (this.dropdownWidth == null) {
-                if (this.fitParent === true) {
-                    this.dropdownWidth = this._getInnerElement().offsetWidth;
-                }
-            }
             // wait for documentElement
             setTimeout(() => {
                 if (this.position.length == 0) {
@@ -409,7 +452,21 @@ function _DropdownComponenetMixin(Base) {
                             overlayX: 'start',
                             overlayY: 'bottom',
                             offsetY: -offset
-                        }
+                        },
+                        {
+                            originX: 'end',
+                            originY: 'bottom',
+                            overlayX: 'end',
+                            overlayY: 'top',
+                            offsetY: offset
+                        },
+                        {
+                            originX: 'end',
+                            originY: 'top',
+                            overlayX: 'end',
+                            overlayY: 'bottom',
+                            offsetY: -offset
+                        },
                     ];
                     this.position.push(...list);
                 }
@@ -425,14 +482,12 @@ function _DropdownComponenetMixin(Base) {
                 return;
             }
             this.popover.close();
-            this._emitOnClosedEvent();
         }
         open() {
             if (this.isOpen || this['disabled']) {
                 return;
             }
             this.popover.open();
-            this._emitOnOpenedEvent();
         }
         get isOpen() {
             var _a;
@@ -486,7 +541,7 @@ function _InteractiveComponenetMixin(Base) {
         /**
         *  Specifies the tabindex of the component.
         */
-        get tabIndex() { return this.disabled || this.readonly ? -1 : __classPrivateFieldGet(this, _Mixin_tabIndex, "f"); }
+        get tabIndex() { return this.disabled ? -1 : __classPrivateFieldGet(this, _Mixin_tabIndex, "f"); }
         set tabIndex(value) {
             __classPrivateFieldSet(this, _Mixin_tabIndex, value != null ? coerceNumberProperty(value) : 0, "f");
         }
@@ -529,6 +584,7 @@ function _SelectionComponenetMixin(Base) {
             super(...args);
             this.valueField = 'id';
             this.textField = 'text';
+            this.disabledField = 'disabled';
             this.multiple = false;
             this.selectionMode = 'value';
             this.valueChange = new EventEmitter();
@@ -567,7 +623,7 @@ function _SelectionComponenetMixin(Base) {
                     selectedItems: this.selectedItems.slice()
                 });
                 if (v == null || v == undefined || v == "") {
-                    this._setErrorState('clear');
+                    this._setState('clear');
                 }
                 else {
                     if (this._isInited) {
@@ -665,7 +721,7 @@ function _SelectionComponenetMixin(Base) {
             if (items && items.length) {
                 items.forEach(item => {
                     if (this.multiple) {
-                        this.selectedItems.includes(item) ? this.unselectItems(item) : this.selectItems(item);
+                        this.isItemSelected(item) ? this.unselectItems(item) : this.selectItems(item);
                     }
                     else {
                         this.selectItems(item);
@@ -676,8 +732,20 @@ function _SelectionComponenetMixin(Base) {
         isItemSelected(item) {
             return this.selectedItems.some(c => c[this.valueField] === item[this.valueField]);
         }
+        isItemDisabled(item) {
+            return coerceBooleanProperty(item[this.disabledField]) === true || (this.disabledCallback ? this.disabledCallback({ item, index: -1 }) : false);
+        }
     };
-}
+}
+const SELECTION_INPUTS = [
+    'valueField',
+    'textField',
+    'disabledField',
+    'disabledCallback',
+    'multiple',
+    'selectionMode'
+];
+const SELECTION_OUTPUT = ['onValueChanged', 'valueChanged'];
 
 function _SizableComponenetMixin(Base) {
     return class extends Base {
@@ -698,7 +766,7 @@ const SIZABLE_INPUTS = [
 const SIZABLE_OUTPUT = [];
 
 function _ValueComponenetMixin(Base) {
-    var _readonly, _allowNull, _name, _debounceTime, _valueSubscription, _valueSubject, _value, _a;
+    var _readonly, _allowNull, _name, _debounceTime, _valueSubscription, _valueSubject, _value, _state, _a;
     return _a = class extends Base {
         /**
           *  @ignore
@@ -712,12 +780,13 @@ function _ValueComponenetMixin(Base) {
             this.onValueChanged = new EventEmitter();
             this.valueChange = new EventEmitter();
             _readonly.set(this, false);
-            _allowNull.set(this, false);
+            _allowNull.set(this, true);
             _name.set(this, void 0);
             _debounceTime.set(this, 0);
             _valueSubscription.set(this, new Subscription());
             _valueSubject.set(this, new Subject());
             _value.set(this, void 0);
+            _state.set(this, 'clear');
         }
         /**
         *  If set to true, user cannot change the value of component.
@@ -758,6 +827,9 @@ function _ValueComponenetMixin(Base) {
                 __classPrivateFieldGet(this, _valueSubject, "f").next(v);
             }
         }
+        get state() {
+            return __classPrivateFieldGet(this, _state, "f");
+        }
         _emitOnValueChangedEvent(oldValue, newValue) {
             this.valueChange.emit(newValue);
             this.onValueChanged.emit({
@@ -769,8 +841,8 @@ function _ValueComponenetMixin(Base) {
             this._onValueChanged(oldValue, __classPrivateFieldGet(this, _value, "f"));
         }
         _onInternalValueChanging(value) {
-            if (this.readonly)
-                return this.value;
+            // if (this.readonly)
+            //   return this.value;
             return this._onValueChanging(value);
         }
         _onValueChanging(value) {
@@ -799,7 +871,7 @@ function _ValueComponenetMixin(Base) {
                 this._emitOnValueChangedEvent(old, __classPrivateFieldGet(this, _value, "f"));
                 this._cdr.markForCheck();
                 if (v == null || v == undefined || v == '') {
-                    this._setErrorState('clear');
+                    this._setState('clear');
                 }
                 else {
                     if (this._isInited) {
@@ -815,7 +887,7 @@ function _ValueComponenetMixin(Base) {
             const rules = Array.from(this._getHostElement().querySelectorAll('ax-validation-rule')).filter((c) => c.__axContext__.enabled);
             //
             if (!rules || rules.length === 0) {
-                this._setErrorState('clear');
+                this._setState('clear');
                 return Promise.resolve({ result: true, value: this.value });
             }
             return new Promise((resolve) => {
@@ -826,26 +898,30 @@ function _ValueComponenetMixin(Base) {
                 })).then((d) => {
                     const error = d.find((c) => c.result === false);
                     if (error) {
-                        this._setErrorState('error', error.message);
+                        this._setState('error', error.message);
                         resolve({ result: false, value: this.value });
                     }
                     else {
-                        this._setErrorState('success');
+                        this._setState('success');
                         resolve({ result: true, value: this.value });
                     }
                 });
             });
         }
-        _setErrorState(state, ...args) {
+        _setState(state, ...args) {
             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 target = container || this._getInnerElement();
+            const label = (formField === null || formField === void 0 ? void 0 : formField.querySelector('ax-label')) || (formField === null || formField === void 0 ? void 0 : formField.querySelector('label'));
+            let target = container || this._getInnerElement();
+            if (target.querySelector('.ax-error-container')) {
+                target = target.querySelector('.ax-error-container');
+            }
             const parent = target.parentElement;
             switch (state) {
                 case 'clear':
+                    __classPrivateFieldSet(this, _state, 'clear', "f");
                     if (parent.querySelector('span.ax-error-msg')) {
                         parent.removeChild(parent.querySelector('span.ax-error-msg'));
                     }
@@ -853,11 +929,12 @@ function _ValueComponenetMixin(Base) {
                     target.classList.remove('ax-state-error', 'ax-state-success');
                     break;
                 case 'success':
-                    this._setErrorState('clear');
+                    this._setState('clear');
                     target.classList.add('ax-state-success');
+                    __classPrivateFieldSet(this, _state, 'success', "f");
                     break;
                 case 'error':
-                    this._setErrorState('clear');
+                    this._setState('clear');
                     if (args[0]) {
                         const span = document.createElement('span');
                         span.innerText = args[0];
@@ -866,8 +943,10 @@ function _ValueComponenetMixin(Base) {
                     }
                     label === null || label === void 0 ? void 0 : label.classList.add('ax-state-error');
                     target.classList.add('ax-state-error');
+                    __classPrivateFieldSet(this, _state, 'error', "f");
                     break;
             }
+            this._cdr.markForCheck();
         }
     },
         _readonly = new WeakMap(),
@@ -877,6 +956,7 @@ function _ValueComponenetMixin(Base) {
         _valueSubscription = new WeakMap(),
         _valueSubject = new WeakMap(),
         _value = new WeakMap(),
+        _state = new WeakMap(),
         _a;
 }
 const VALUE_INPUTS = [
@@ -1019,19 +1099,19 @@ class AXResponsiveDirective {
         this._observer.unobserve(this._elementRef.nativeElement);
     }
 }
-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: [{
+AXResponsiveDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXResponsiveDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+AXResponsiveDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: AXResponsiveDirective, selector: "[ax-responsive]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", 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: "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: [{
+AXCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCommonModule, declarations: [AXResponsiveDirective], exports: [AXResponsiveDirective] });
+AXCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCommonModule, providers: [], imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -1140,9 +1220,9 @@ class AXAlertComponent extends AXBaseComponentMixin {
     }
 }
 _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: [{
+AXAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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.2.0", ngImport: i0, type: AXAlertComponent, decorators: [{
             type: Component,
             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: [{
@@ -1162,12 +1242,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 
 class AXAlertTitleComponent {
 }
-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: `
+AXAlertTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXAlertTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXAlertTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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: "13.1.1", ngImport: i0, type: AXAlertTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXAlertTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-alert-title',
@@ -1195,12 +1275,12 @@ class AXAlertButtonComponent extends AXBaseClickableMixin {
         this._emitOnBlurEvent(e);
     }
 }
-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: { text: "text", 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.2.0", 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.2.0", type: AXAlertButtonComponent, selector: "ax-alert-button", inputs: { text: "text", 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: `
        {{text}}
        <ng-content select="ax-icon"></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: AXAlertButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXAlertButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-alert-button',
@@ -1230,11 +1310,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 
 class AXAlertContentComponent {
 }
-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>
+AXAlertContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXAlertContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXAlertContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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: "13.1.1", ngImport: i0, type: AXAlertContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXAlertContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-alert-content',
@@ -1249,14 +1329,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 
 class AXAlertSuffixComponent {
 }
-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: `
+AXAlertSuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXAlertSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXAlertSuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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: "13.1.1", ngImport: i0, type: AXAlertSuffixComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXAlertSuffixComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-alert-suffix',
@@ -1274,14 +1354,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 
 class AXAlertFooterComponent {
 }
-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: `
+AXAlertFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXAlertFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXAlertFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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: "13.1.1", ngImport: i0, type: AXAlertFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXAlertFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-alert-footer',
@@ -1305,13 +1385,13 @@ class AXIconComponent extends AXSizableComponentMixin {
         return `ax-ic ${this.icon}`;
     }
 }
-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: '<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: AXIconComponent, decorators: [{
+AXIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", type: AXIconComponent, selector: "ax-icon", inputs: { icon: "icon" }, host: { properties: { "class": "this.__iconClass" } }, usesInheritance: true, ngImport: i0, template: '<ng-content select="i,svg,img"></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-icon',
-                    template: '<ng-content></ng-content>',
+                    template: '<ng-content select="i,svg,img"></ng-content>',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                 }]
@@ -1326,10 +1406,10 @@ const COMPONENT$o = [AXIconComponent];
 const MODULES$o = [CommonModule];
 class AXIconModule {
 }
-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$o]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXIconModule, decorators: [{
+AXIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXIconModule, declarations: [AXIconComponent], imports: [CommonModule], exports: [AXIconComponent] });
+AXIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXIconModule, providers: [], imports: [[...MODULES$o]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXIconModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$o],
@@ -1350,8 +1430,8 @@ const COMPONENT$n = [
 const MODULES$n = [CommonModule, AXIconModule];
 class AXAlertModule {
 }
-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,
+AXAlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXAlertModule, declarations: [AXAlertComponent,
         AXAlertContentComponent,
         AXAlertTitleComponent,
         AXAlertButtonComponent,
@@ -1362,8 +1442,8 @@ AXAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         AXAlertButtonComponent,
         AXAlertFooterComponent,
         AXAlertSuffixComponent] });
-AXAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAlertModule, providers: [], imports: [[...MODULES$n]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAlertModule, decorators: [{
+AXAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXAlertModule, providers: [], imports: [[...MODULES$n]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXAlertModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$n],
@@ -1402,9 +1482,9 @@ class AXAvatarComponent extends AXSizableComponentMixin {
         this._abbr = v;
     }
 }
-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: [{
+AXAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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.2.0", ngImport: i0, type: AXAvatarComponent, decorators: [{
             type: Component,
             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: [{
@@ -1421,10 +1501,10 @@ const COMPONENT$m = [AXAvatarComponent];
 const MODULES$m = [CommonModule];
 class AXAvatarModule {
 }
-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$m]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXAvatarModule, decorators: [{
+AXAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXAvatarModule, declarations: [AXAvatarComponent], imports: [CommonModule], exports: [AXAvatarComponent] });
+AXAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXAvatarModule, providers: [], imports: [[...MODULES$m]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$m],
@@ -1445,11 +1525,11 @@ class AXBadgeComponent extends AXBaseComponentMixin {
         return [`ax-${this.color}-default`, !this.text ? 'ax-badge-icon' : ''].join(' ');
     }
 }
-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: [{
+AXBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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 ax-truncate\">{{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.2.0", ngImport: i0, type: AXBadgeComponent, decorators: [{
             type: Component,
-            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>" }]
+            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 ax-truncate\">{{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: [{
@@ -1463,10 +1543,10 @@ const COMPONENT$l = [AXBadgeComponent];
 const MODULES$l = [CommonModule];
 class AXBadgeModule {
 }
-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$l]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXBadgeModule, decorators: [{
+AXBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXBadgeModule, declarations: [AXBadgeComponent], imports: [CommonModule], exports: [AXBadgeComponent] });
+AXBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXBadgeModule, providers: [], imports: [[...MODULES$l]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXBadgeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$l],
@@ -1514,9 +1594,9 @@ 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: "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: [{
+AXButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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.2.0", ngImport: i0, type: AXButtonComponent, decorators: [{
             type: Component,
             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: [{
@@ -1632,9 +1712,9 @@ class AXButtonGroupComponent extends AXInteractiveComponenetMixin {
         });
     }
 }
-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: [{
+AXButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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.2.0", ngImport: i0, type: AXButtonGroupComponent, decorators: [{
             type: Component,
             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: [{
@@ -1667,7 +1747,7 @@ class AXButtonItemComponent extends AXBaseItemButtonMixin {
         this.tooltip = null;
         this.selected = false;
         this.seperated = false;
-        this.color = 'primary';
+        this.color = 'light';
     }
     __hostClick(e) {
         this._emitOnClickEvent(e);
@@ -1682,8 +1762,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: "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: `
+AXButtonItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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" } }, usesInheritance: true, ngImport: i0, template: `
         <ng-content select="ax-prefix">
         </ng-content>
         <ng-content select="ax-icon">
@@ -1692,7 +1772,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: "13.1.1", ngImport: i0, type: AXButtonItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXButtonItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-button-item',
@@ -1707,7 +1787,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
     `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { style: 'cssStyle' }
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
                 type: Input
@@ -1736,12 +1815,12 @@ class AXDecoratorContentComponent extends AXBaseComponentMixin {
         super(elementRef, cdr);
     }
 }
-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: `
+AXDecoratorContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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: "13.1.1", ngImport: i0, type: AXDecoratorContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDecoratorContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-content',
@@ -1754,17 +1833,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
+class AXDecoratorAddOnComponent extends AXBaseComponentMixin {
+    constructor(_elementRef, _cdr) {
+        super(_elementRef, _cdr);
+    }
+}
+AXDecoratorAddOnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDecoratorAddOnComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDecoratorAddOnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: AXDecoratorAddOnComponent, selector: "ax-addon", 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.2.0", ngImport: i0, type: AXDecoratorAddOnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-addon',
+                    template: `<ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+
 class AXDecoratorHeaderComponent extends AXBaseComponentMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
     }
 }
-AXDecoratorHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDecoratorHeaderComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDecoratorHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXDecoratorHeaderComponent, selector: "ax-header", usesInheritance: true, ngImport: i0, template: `
+AXDecoratorHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDecoratorHeaderComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDecoratorHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: AXDecoratorHeaderComponent, selector: "ax-header", 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: AXDecoratorHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDecoratorHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-header',
@@ -1782,17 +1878,17 @@ class AXDecoratorPrefixComponent extends AXBaseComponentMixin {
         super(elementRef, cdr);
     }
 }
-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-content">
+AXDecoratorPrefixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", type: AXDecoratorPrefixComponent, selector: "ax-prefix", usesInheritance: true, ngImport: i0, template: `
+        <ng-content select="ax-button,ax-loading,ax-icon,ax-content,ax-badge,ax-addon">
         </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: AXDecoratorPrefixComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDecoratorPrefixComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-prefix',
                     template: `
-        <ng-content select="ax-button,ax-loading,ax-icon,ax-content">
+        <ng-content select="ax-button,ax-loading,ax-icon,ax-content,ax-badge,ax-addon">
         </ng-content>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1805,17 +1901,17 @@ class AXDecoratorSuffixComponent extends AXBaseComponentMixin {
         super(elementRef, cdr);
     }
 }
-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,ax-content">
+AXDecoratorSuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", type: AXDecoratorSuffixComponent, selector: "ax-suffix", usesInheritance: true, ngImport: i0, template: `
+        <ng-content select="ax-button,ax-loading,ax-icon,ax-content,ax-badge,ax-addon">
         </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: AXDecoratorSuffixComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDecoratorSuffixComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-suffix',
                     template: `
-        <ng-content select="ax-button,ax-icon,ax-badge,ax-content">
+        <ng-content select="ax-button,ax-loading,ax-icon,ax-content,ax-badge,ax-addon">
         </ng-content>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1823,14 +1919,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-const COMPONENT$k = [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent];
+const COMPONENT$k = [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorAddOnComponent];
 const MODULES$k = [CommonModule];
 class AXEditorDecoratorModule {
 }
-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, AXDecoratorHeaderComponent], imports: [CommonModule], exports: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent] });
-AXEditorDecoratorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXEditorDecoratorModule, providers: [], imports: [[...MODULES$k]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXEditorDecoratorModule, decorators: [{
+AXEditorDecoratorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXEditorDecoratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXEditorDecoratorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXEditorDecoratorModule, declarations: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorAddOnComponent], imports: [CommonModule], exports: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorAddOnComponent] });
+AXEditorDecoratorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXEditorDecoratorModule, providers: [], imports: [[...MODULES$k]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXEditorDecoratorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$k],
@@ -1848,14 +1944,14 @@ const COMPONENT$j = [
 const MODULES$j = [CommonModule, AXIconModule, AXEditorDecoratorModule];
 class AXButtonModule {
 }
-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,
+AXButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", 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: "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: [{
+AXButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXButtonModule, providers: [], imports: [[MODULES$j]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [MODULES$j],
@@ -1920,9 +2016,9 @@ class AXCalendarBaseComponent extends AXBaseComponent {
         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: [{
+AXCalendarBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", ngImport: i0, type: AXCalendarBaseComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCalendarBaseComponent, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { activeViewChange: [{
                 type: Output
@@ -2126,6 +2222,11 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
     prev() {
         this._navNextPrev(true);
     }
+    focus() {
+        var _a;
+        debugger;
+        (_a = this._getHostElement().querySelector('.ax-calendar-slots>div')) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     _navNextPrev(prev) {
         const sign = (prev ? -1 : 1);
         if (this.activeView == 'days')
@@ -2171,9 +2272,9 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
         return date.dayOfWeek == 7 || date.dayOfWeek == 1;
     }
 }
-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", checked: "checked", 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: [{
+AXCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", type: AXCalendarComponent, selector: "ax-calendar", inputs: { readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", 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.2.0", ngImport: i0, type: AXCalendarComponent, decorators: [{
             type: Component,
             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: [{
@@ -2185,10 +2286,10 @@ const COMPONENT$i = [AXCalendarComponent];
 const MODULES$i = [CommonModule, AXButtonModule, AXIconModule, AXEditorDecoratorModule, AXDateTimeModule];
 class AXCalendarModule {
 }
-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: [{
+AXCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent], imports: [CommonModule, AXButtonModule, AXIconModule, AXEditorDecoratorModule, AXDateTimeModule], exports: [AXCalendarComponent] });
+AXCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCalendarModule, providers: [], imports: [[...MODULES$i]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$i],
@@ -2200,9 +2301,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 
 class AXCarouselCore {
 }
-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: [{
+AXCarouselCore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCarouselCore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AXCarouselCore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCarouselCore });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCarouselCore, decorators: [{
             type: Injectable
         }] });
 
@@ -2467,12 +2568,12 @@ class AXCarouselComponent extends AXBaseComponentMixin {
         this.core.destroy();
     }
 }
-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: [{
+AXCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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: "13.1.1", ngImport: i0, type: AXCarouselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCarouselComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-carousel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-carousel' }, providers: [{
                             provide: AXCarouselCore,
@@ -2525,9 +2626,9 @@ class AXCarouselItemComponent extends AXBaseComponentMixin {
         super(elementRef, cdr);
     }
 }
-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: [{
+AXCarouselItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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.2.0", ngImport: i0, type: AXCarouselItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-carousel-item',
@@ -2554,8 +2655,8 @@ class AXCarouselArrowsComponent extends AXBaseComponentMixin {
         this.parent.next();
     }
 }
-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: `
+AXCarouselArrowsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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>
@@ -2563,7 +2664,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: "13.1.1", ngImport: i0, type: AXCarouselArrowsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCarouselArrowsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-carousel-arrows',
@@ -2639,12 +2740,12 @@ class AXCarouselPagerComponent extends AXBaseComponentMixin {
         });
     }
 }
-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: `
+AXCarouselPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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: "13.1.1", ngImport: i0, type: AXCarouselPagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCarouselPagerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-carousel-pager',
@@ -2662,10 +2763,10 @@ const COMPONENT$h = [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArr
 const MODULES$h = [CommonModule];
 class AXCarouselModule {
 }
-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: [{
+AXCarouselModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXCarouselModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", ngImport: i0, type: AXCarouselModule, providers: [], imports: [[...MODULES$h]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCarouselModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$h],
@@ -2675,139 +2776,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }] });
 
-class AXFormFieldComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-}
-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: '<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: AXFormFieldComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-form-field',
-                    template: '<ng-content></ng-content>',
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
-
-class AXFormHintComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-}
-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-light-400 ax-text-xs ax-py-1 dark:ax-text-light-300"><ng-content></ng-content></p>',
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
-
-class AXFormComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-        this.cdr = cdr;
-    }
-    _getComponenets() {
-        return Array.from(this._getHostElement().querySelectorAll('[ax-form-input="true"]'));
-    }
-    validate() {
-        const widgets = this._getComponenets();
-        //
-        return new Promise((resolve, reject) => {
-            if (widgets.length === 0) {
-                return Promise.resolve({ result: true });
-            }
-            Promise.all(widgets.map((c) => c.__axContext__.validate())).then((rules) => {
-                const failed = rules.filter((c) => !c.result);
-                if (failed.length) {
-                    reject({
-                        result: false,
-                        items: failed
-                    });
-                }
-                else {
-                    resolve({ result: true });
-                }
-            });
-        });
-    }
-    clear() {
-        const widgets = this._getComponenets();
-        widgets.forEach(w => {
-            w.__axContext__.clear();
-        });
-    }
-}
-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',
-                    template: '<div class="ax-form"><ng-content></ng-content></div>',
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
-
-class AXFormModule {
-}
-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],
-                    exports: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent],
-                    declarations: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent],
-                    providers: [],
-                }]
-        }] });
-
-class AXLabelComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-}
-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', 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: "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],
-                    imports: [...MODULES$g],
-                    exports: [...COMPONENT$g],
-                    providers: [],
-                }]
-        }] });
-
 class AXCheckBoxComponent extends AXBaseValueComponentMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
     }
     onInit() {
         super.onInit();
-        ;
         if (!this.allowNull && this.value == null) {
             this.value = false;
         }
@@ -2830,29 +2804,23 @@ class AXCheckBoxComponent extends AXBaseValueComponentMixin {
         }
     }
 }
-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", checked: "checked" }, 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: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.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: [{
+AXCheckBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, usesInheritance: true, ngImport: i0, template: "<label 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\" [class.ax-state-readonly]=\"readonly\"\r\n            [class.ax-state-disabled]=\"disabled\" [indeterminate]=\"_stateIndeterminate\" [(ngModel)]=\"value\"\r\n            [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n            (click)=\"_handleOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    </div>\r\n    <div class=\"ax-ms-3 ax-text-sm\">\r\n        <ng-content></ng-content>\r\n        <ng-content select=\"ax-form-hint\"></ng-content>\r\n        <span class=\"ax-error-container\"></span>\r\n    </div>\r\n</label>\r\n<ng-content select=\"ax-validation-rule\"></ng-content>", directives: [{ type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.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.2.0", ngImport: i0, type: AXCheckBoxComponent, decorators: [{
             type: Component,
-            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]
-            }], _label: [{
-                type: ContentChildren,
-                args: [AXLabelComponent]
-            }] } });
+            args: [{ selector: 'ax-check-box', inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label 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\" [class.ax-state-readonly]=\"readonly\"\r\n            [class.ax-state-disabled]=\"disabled\" [indeterminate]=\"_stateIndeterminate\" [(ngModel)]=\"value\"\r\n            [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n            (click)=\"_handleOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    </div>\r\n    <div class=\"ax-ms-3 ax-text-sm\">\r\n        <ng-content></ng-content>\r\n        <ng-content select=\"ax-form-hint\"></ng-content>\r\n        <span class=\"ax-error-container\"></span>\r\n    </div>\r\n</label>\r\n<ng-content select=\"ax-validation-rule\"></ng-content>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
 class AXCheckBoxModule {
 }
-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: [{
+AXCheckBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXCheckBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCheckBoxModule, declarations: [AXCheckBoxComponent], imports: [CommonModule, FormsModule, AXEditorDecoratorModule], exports: [AXCheckBoxComponent] });
+AXCheckBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCheckBoxModule, providers: [], imports: [[CommonModule, FormsModule, AXEditorDecoratorModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXCheckBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXCheckBoxComponent],
-                    imports: [CommonModule, FormsModule],
+                    imports: [CommonModule, FormsModule, AXEditorDecoratorModule],
                     exports: [AXCheckBoxComponent],
                     providers: [],
                 }]
@@ -2902,9 +2870,9 @@ class AXDataListComponent extends AXBaseSelectionValueMixin {
         }, 100);
     }
 }
-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: [{
+AXDataListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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.2.0", ngImport: i0, type: AXDataListComponent, decorators: [{
             type: Component,
             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: [{
@@ -2927,19 +2895,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 type: Input
             }] } });
 
-const COMPONENT$f = [AXDataListComponent];
-const MODULES$f = [CommonModule, AXButtonModule];
+const COMPONENT$g = [AXDataListComponent];
+const MODULES$g = [CommonModule, AXButtonModule];
 class AXDataListModule {
 }
-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: [{
+AXDataListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDataListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXDataListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDataListModule, declarations: [AXDataListComponent], imports: [CommonModule, AXButtonModule], exports: [AXDataListComponent] });
+AXDataListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDataListModule, providers: [], imports: [[...MODULES$g]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDataListModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$f],
-                    imports: [...MODULES$f],
-                    exports: [...COMPONENT$f],
+                    declarations: [...COMPONENT$g],
+                    imports: [...MODULES$g],
+                    exports: [...COMPONENT$g],
                     providers: [],
                 }]
         }] });
@@ -2947,6 +2915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 class AXPopoverComponent extends AXBaseComponent {
     constructor(_elementRef, _cdr, _zone, _overlay, _platform, _viewContainerRef) {
         super(_elementRef, _cdr);
+        this._elementRef = _elementRef;
         this._cdr = _cdr;
         this._zone = _zone;
         this._overlay = _overlay;
@@ -3083,28 +3052,26 @@ class AXPopoverComponent extends AXBaseComponent {
         if (!targetRef)
             return;
         if (!this._overlayRef) {
-            let positionStrategy;
-            let scrollStrategy;
-            debugger;
             if (this._platform.is('Mobile')) {
-                positionStrategy = this._overlay.position().global().centerHorizontally().bottom();
-                scrollStrategy = this._overlay.scrollStrategies.noop();
+                this._overlayRef = this._overlay.create({
+                    positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
+                    disposeOnNavigation: true,
+                    panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
+                    hasBackdrop: true
+                });
             }
             else {
-                positionStrategy = this._overlay.position()
-                    .flexibleConnectedTo(targetRef)
-                    .withPositions(Array.isArray(this.position) ? this.position : [this.position])
-                    .withPush(false);
-                scrollStrategy = this._overlay.scrollStrategies.close();
+                this._overlayRef = this._overlay.create({
+                    positionStrategy: this._overlay.position()
+                        .flexibleConnectedTo(targetRef)
+                        .withPositions(Array.isArray(this.position) ? this.position : [this.position])
+                        .withPush(false),
+                    disposeOnNavigation: true,
+                    panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
+                    hasBackdrop: this.hasBackdrop,
+                    backdropClass: [this.backdropClass || 'cdk-overlay-transparent-backdrop']
+                });
             }
-            this._overlayRef = this._overlay.create({
-                positionStrategy,
-                scrollStrategy,
-                panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
-                hasBackdrop: true,
-                backdropClass: [this.backdropClass || 'cdk-overlay-transparent-backdrop']
-            });
-            this._updateOverlay();
             if (this.closeTrigger == 'clickout') {
                 this._addSub(this._overlayRef._outsidePointerEvents.subscribe(c => {
                     const target = c.target;
@@ -3114,15 +3081,15 @@ class AXPopoverComponent extends AXBaseComponent {
                     }
                 }));
             }
-            // this._addSub(this._overlayRef.attachments().subscribe(() => {
-            //   if (!this._isScrollAttached) {
-            //     this._addSub(this._platform.scroll.subscribe(c => {
-            //       // if (!(c.nativeEvent.target as HTMLElement).closest('.ax-overlay-pane'))
-            //       this.close();
-            //     }));
-            //     this._isScrollAttached = true;
-            //   }
-            // }));
+            this._addSub(this._overlayRef.attachments().subscribe(() => {
+                if (!this._isScrollAttached) {
+                    this._addSub(this._platform.scroll.subscribe(c => {
+                        if (!c.nativeEvent.target.closest('.ax-overlay-pane'))
+                            this.updatePosition();
+                    }));
+                    this._isScrollAttached = true;
+                }
+            }));
         }
         if (!this._templatePortal) {
             this._templatePortal = new TemplatePortal(this._baseTemplate, this._viewContainerRef);
@@ -3134,31 +3101,17 @@ class AXPopoverComponent extends AXBaseComponent {
     _addSub(sub) {
         this._subs.push(sub);
     }
-    _updateOverlay() {
-        const targetRef = this._target;
-        let positionStrategy;
-        let scrollStrategy;
-        if (this._platform.is('Mobile')) {
-            positionStrategy = this._overlay.position().global().centerHorizontally().bottom();
-            scrollStrategy = this._overlay.scrollStrategies.noop();
-        }
-        else {
-            positionStrategy = this._overlay.position()
-                .flexibleConnectedTo(targetRef)
-                .withPositions(Array.isArray(this.position) ? this.position : [this.position])
-                .withPush(false);
-            scrollStrategy = this._overlay.scrollStrategies.close();
-        }
-        this._overlayRef.updatePositionStrategy(positionStrategy);
-        this._overlayRef.updateScrollStrategy(scrollStrategy);
+    updatePosition() {
+        var _a;
+        (_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.updatePosition();
     }
 }
-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$2.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" }, outputs: { onOpened: "onOpened", onClosed: "onClosed" }, 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: [{
+AXPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$2.Overlay }, { token: i1$3.AXPlatform }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+AXPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: AXPopoverComponent, selector: "ax-popover", inputs: { target: "target", position: "position", openTrigger: "openTrigger", closeTrigger: "closeTrigger", hasBackdrop: "hasBackdrop", backdropClass: "backdropClass" }, outputs: { onOpened: "onOpened", onClosed: "onClosed" }, 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.2.0", ngImport: i0, type: AXPopoverComponent, decorators: [{
             type: Component,
             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$2.Overlay }, { type: i2.AXPlatform }, { type: i0.ViewContainerRef }]; }, propDecorators: { target: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$2.Overlay }, { type: i1$3.AXPlatform }, { type: i0.ViewContainerRef }]; }, propDecorators: { target: [{
                 type: Input
             }], position: [{
                 type: Input
@@ -3184,12 +3137,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 
 const AXBaseDatePickerMixin = _InteractiveComponenetMixin(_DropdownComponenetMixin(_ValueComponenetMixin(_TextboxComponenetMixin(AXCalendarBaseComponent))));
 class AXDatePickerComponent extends AXBaseDatePickerMixin {
-    constructor(_elementRef, _cdr) {
+    constructor(_elementRef, _cdr, _platform) {
         super(_elementRef, _cdr);
+        this._platform = _platform;
         this._cursorPos = 0;
+        this._isMobile = false;
         this.formatChange = new EventEmitter();
         this._format = 'YYYY-MM-dd';
         this._target = this._getHostElement();
+        this._isMobile = this._platform.is('Mobile');
     }
     get format() {
         return this._format;
@@ -3200,6 +3156,13 @@ class AXDatePickerComponent extends AXBaseDatePickerMixin {
             value: v
         });
     }
+    onViewInit() {
+        super.onViewInit();
+        this._popoverTitle = this.placeholder || AXTranslator.get('datepicker.popover.title');
+        this.popover.onOpened.subscribe(() => {
+            this._calendar.focus();
+        });
+    }
     _handleArrowClickEvent(e) {
         this.toggle();
     }
@@ -3233,7 +3196,6 @@ class AXDatePickerComponent extends AXBaseDatePickerMixin {
                 switch (part[0]) {
                     case 'dd':
                     case 'DD':
-                        debugger;
                         const newVal = Math.max(1, Math.min(31, Number(word + e.key)));
                         this.value = dateVal.set('day', newVal).date;
                         break;
@@ -3305,14 +3267,17 @@ class AXDatePickerComponent extends AXBaseDatePickerMixin {
         input.setSelectionRange(start, end);
     }
 }
-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", checked: "checked", 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            [min]=\"min\"\r\n            [min]=\"max\"\r\n            [disabledDates]=\"disabledDates\"\r\n            [holidayDates]=\"holidayDates\"\r\n            [depth]=\"depth\"\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"], outputs: ["onOpened", "onClosed"] }, { type: AXCalendarComponent, selector: "ax-calendar", inputs: ["readonly", "allowNull", "value", "debounceTime", "name", "checked", "disabled", "tabIndex", "depth", "activeView", "min", "max", "disabledDates", "holidayDates"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange"] }], directives: [{ type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.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: [{
+AXDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
+AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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", checked: "checked", 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, static: true }, { propertyName: "_calendar", first: true, predicate: AXCalendarComponent, descendants: true, static: 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\" [class.ax-state-disabled]=\"disabled\"\r\n        [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        [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\" (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<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane\" >\r\n        <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n            <span >{{placeholder || 'Choose a date'}}</span>\r\n            <i class=\"ax-ic ax-ic-close \"\r\n                (click)=\"close()\" tabindex=\"1\"></i>\r\n        </div>\r\n        <ax-calendar #calendar [disabled]=\"disabled\" [readonly]=\"readonly\" [(value)]=\"value\" [min]=\"min\" [min]=\"max\"\r\n            [disabledDates]=\"disabledDates\" [holidayDates]=\"holidayDates\" [depth]=\"depth\">\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"], outputs: ["onOpened", "onClosed"] }, { type: AXCalendarComponent, selector: "ax-calendar", inputs: ["readonly", "allowNull", "value", "debounceTime", "name", "checked", "disabled", "tabIndex", "depth", "activeView", "min", "max", "disabledDates", "holidayDates"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange"] }], directives: [{ type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.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.2.0", 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            [min]=\"min\"\r\n            [min]=\"max\"\r\n            [disabledDates]=\"disabledDates\"\r\n            [holidayDates]=\"holidayDates\"\r\n            [depth]=\"depth\"\r\n            >\r\n        </ax-calendar>\r\n    </div>\r\n</ax-popover>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { popover: [{
+            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\" [class.ax-state-disabled]=\"disabled\"\r\n        [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        [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\" (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<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane\" >\r\n        <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n            <span >{{placeholder || 'Choose a date'}}</span>\r\n            <i class=\"ax-ic ax-ic-close \"\r\n                (click)=\"close()\" tabindex=\"1\"></i>\r\n        </div>\r\n        <ax-calendar #calendar [disabled]=\"disabled\" [readonly]=\"readonly\" [(value)]=\"value\" [min]=\"min\" [min]=\"max\"\r\n            [disabledDates]=\"disabledDates\" [holidayDates]=\"holidayDates\" [depth]=\"depth\">\r\n        </ax-calendar>\r\n    </div>\r\n</ax-popover>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.AXPlatform }]; }, propDecorators: { popover: [{
+                type: ViewChild,
+                args: [AXPopoverComponent, { static: true }]
+            }], _calendar: [{
                 type: ViewChild,
-                args: [AXPopoverComponent]
+                args: [AXCalendarComponent, { static: true }]
             }], formatChange: [{
                 type: Output
             }], format: [{
@@ -3321,10 +3286,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 
 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: [{
+AXPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPopoverModule, declarations: [AXPopoverComponent], imports: [CommonModule], exports: [AXPopoverComponent] });
+AXPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPopoverModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXPopoverComponent],
@@ -3334,63 +3299,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }] });
 
-class AXInputMaskComponent {
-    constructor() {
-        this.showMaskTyped = false;
-        this.clearIfNotMatch = false;
-    }
-    get prefix() {
-        return this._prefix || '';
-    }
-    set prefix(v) {
-        this._prefix = v;
-    }
-    get suffix() {
-        return this._suffix || '';
-    }
-    set suffix(v) {
-        this._suffix = v;
-    }
-}
-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-input-mask',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                }]
-        }], propDecorators: { prefix: [{
-                type: Input
-            }], suffix: [{
-                type: Input
-            }], showMaskTyped: [{
-                type: Input
-            }], clearIfNotMatch: [{
-                type: Input
-            }], mask: [{
-                type: Input
-            }] } });
-
-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$3.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
  *
@@ -3403,46 +3311,23 @@ class AXTextBoxComponent extends AXBaseTextBoxMixin {
     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: "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", checked: "checked" }, 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: i1$1.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: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.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: [{
+AXTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "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=\"text\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete ? 'on': 'off'\">\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>", directives: [{ type: i1$1.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: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.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.2.0", ngImport: i0, type: AXTextBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-text-box', 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' }, 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']
-            }] } });
+            args: [{ selector: 'ax-text-box', inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-editor-container' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" type=\"text\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete ? 'on': 'off'\">\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 }]; } });
 
 class AXTextBoxModule {
 }
-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,
+AXTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", 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: "13.1.1", ngImport: i0, type: AXTextBoxModule, providers: [], imports: [[
+        AXIconModule, i1$4.NgxMaskModule], exports: [AXTextBoxComponent] });
+AXTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXTextBoxModule, providers: [], imports: [[
             CommonModule,
             FormsModule,
             AXButtonModule,
@@ -3450,7 +3335,7 @@ AXTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             AXIconModule,
             NgxMaskModule.forChild()
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTextBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXTextBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3467,8 +3352,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }] });
 
-const COMPONENT$d = [AXDatePickerComponent];
-const MODULES$d = [
+const COMPONENT$f = [AXDatePickerComponent];
+const MODULES$f = [
     CommonModule,
     AXCalendarModule,
     AXTextBoxModule,
@@ -3481,8 +3366,8 @@ const MODULES$d = [
 ];
 class AXDatepickerModule {
 }
-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,
+AXDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDatepickerModule, declarations: [AXDatePickerComponent], imports: [CommonModule,
         AXCalendarModule,
         AXTextBoxModule,
         AXButtonModule,
@@ -3491,13 +3376,13 @@ AXDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         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: [{
+AXDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDatepickerModule, providers: [], imports: [[...MODULES$f]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$d],
-                    imports: [...MODULES$d],
-                    exports: [...COMPONENT$d],
+                    declarations: [...COMPONENT$f],
+                    imports: [...MODULES$f],
+                    exports: [...COMPONENT$f],
                     providers: [],
                 }]
         }] });
@@ -3528,9 +3413,9 @@ class AXDialogComponent extends AXBaseComponentMixin {
         }
     }
 }
-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}}-default\" 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.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.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: [{
+AXDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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}}-default\" 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.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3.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.2.0", ngImport: i0, type: AXDialogComponent, decorators: [{
             type: Component,
             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}}-default\" 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 }]; } });
@@ -3563,7 +3448,6 @@ class AXDialogService {
                         name: 'confirm',
                         text: AXTranslator.get('common.okay'),
                         color: type,
-                        look: `twotone`,
                         onClick: () => {
                             popup.close();
                             if (resolve) {
@@ -3668,9 +3552,9 @@ class AXDialogService {
         };
     }
 }
-AXDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDialogService, deps: [{ token: i1$2.Overlay }, { token: i0.Injector }, { token: i1$2.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: [{
+AXDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDialogService, deps: [{ token: i1$2.Overlay }, { token: i0.Injector }, { token: i1$2.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Injectable });
+AXDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDialogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1$2.Overlay }, { type: i0.Injector }, { type: i1$2.ScrollStrategyOptions }]; } });
@@ -3699,17 +3583,23 @@ class AXLoadingComponent extends AXBaseComponentMixin {
         this._selectedPortal = new ComponentPortal(loading);
         this._cdr.markForCheck();
     }
+    _handleAttched(ref) {
+        ref = ref;
+        if (ref.instance) {
+            ref.instance.text = this.text;
+        }
+    }
 }
-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$4.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: [{
+AXLoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", type: AXLoadingComponent, selector: "ax-loading", inputs: { visible: "visible", type: "type", text: "text" }, outputs: { visibleChange: "visibleChange" }, host: { classAttribute: "ax-loading" }, usesInheritance: true, ngImport: i0, template: `
+        <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttched($event)"></ng-template>
+    `, isInline: true, directives: [{ type: i1$5.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.2.0", ngImport: i0, type: AXLoadingComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-loading',
                     template: `
-        <ng-template [cdkPortalOutlet]="_selectedPortal" ></ng-template>
+        <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttched($event)"></ng-template>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
@@ -3721,13 +3611,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 type: Input
             }], type: [{
                 type: Input
+            }], text: [{
+                type: Input
             }] } });
 
 class AXLoadingSpinnerComponent {
 }
-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"
+AXLoadingSpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXLoadingSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", ngImport: i0, template: `
+    <svg version="1.1" width="24" height="24" class="ax-fill-current" 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"
         d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
@@ -3735,13 +3627,14 @@ AXLoadingSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             dur="0.6s" repeatCount="indefinite" />
         </path>
     </svg>
-    `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLoadingSpinnerComponent, decorators: [{
+    <span class="ax-ms-3" *ngIf="text"> {{text}} </span>
+    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXLoadingSpinnerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-loading-spinner',
                     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"
+    <svg version="1.1" width="24" height="24" class="ax-fill-current" 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"
         d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
@@ -3749,6 +3642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
             dur="0.6s" repeatCount="indefinite" />
         </path>
     </svg>
+    <span class="ax-ms-3" *ngIf="text"> {{text}} </span>
     `
                 }]
         }] });
@@ -3805,9 +3699,9 @@ class AXLoadingDirective {
         this.renderer.addClass(this.overlayElement, OVERLAY_CLASS);
     }
 }
-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: [{
+AXLoadingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", type: AXLoadingDirective, selector: "[axIsLoading]", inputs: { isLoading: ["axIsLoading", "isLoading"] }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXLoadingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axIsLoading]'
@@ -3817,28 +3711,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 args: ['axIsLoading']
             }] } });
 
-const COMPONENT$c = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
-const MODULES$c = [CommonModule, OverlayModule, PortalModule];
+const COMPONENT$e = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
+const MODULES$e = [CommonModule, OverlayModule, PortalModule];
 class AXLoadingModule {
     constructor() {
         AXConfig.set({
             layout: {
                 loading: {
-                    spinner: AXLoadingSpinnerComponent
+                    spinner: AXLoadingSpinnerComponent,
                 }
             }
         });
     }
 }
-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: [{
+AXLoadingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXLoadingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", ngImport: i0, type: AXLoadingModule, providers: [], imports: [[...MODULES$e]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXLoadingModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$c],
-                    imports: [...MODULES$c],
-                    exports: [...COMPONENT$c],
+                    declarations: [...COMPONENT$e],
+                    imports: [...MODULES$e],
+                    exports: [...COMPONENT$e],
                     providers: [],
                 }]
         }], ctorParameters: function () { return []; } });
@@ -3848,9 +3742,9 @@ class DynamicOverlayContainer extends OverlayContainer {
         this._containerElement = containerElement;
     }
 }
-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: [{
+DynamicOverlayContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DynamicOverlayContainer, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+DynamicOverlayContainer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DynamicOverlayContainer, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DynamicOverlayContainer, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3871,9 +3765,9 @@ class DynamicOverlay extends Overlay {
         return super.create(config);
     }
 }
-DynamicOverlay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DynamicOverlay, deps: [{ token: i1$2.ScrollStrategyOptions }, { token: DynamicOverlayContainer }, { token: i0.ComponentFactoryResolver }, { token: i1$2.OverlayPositionBuilder }, { token: i1$2.OverlayKeyboardDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i2$2.Directionality }, { token: i0.RendererFactory2 }, { token: i1.Location }, { token: i1$2.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: [{
+DynamicOverlay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DynamicOverlay, deps: [{ token: i1$2.ScrollStrategyOptions }, { token: DynamicOverlayContainer }, { token: i0.ComponentFactoryResolver }, { token: i1$2.OverlayPositionBuilder }, { token: i1$2.OverlayKeyboardDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i2$1.Directionality }, { token: i0.RendererFactory2 }, { token: i1.Location }, { token: i1$2.OverlayOutsideClickDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
+DynamicOverlay.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DynamicOverlay, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DynamicOverlay, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3882,7 +3776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
         return [{ type: i1$2.ScrollStrategyOptions }, { type: DynamicOverlayContainer }, { type: i0.ComponentFactoryResolver }, { type: i1$2.OverlayPositionBuilder }, { type: i1$2.OverlayKeyboardDispatcher }, { type: i0.Injector }, { type: i0.NgZone }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [DOCUMENT]
-                    }] }, { type: i2$2.Directionality }, { type: i0.RendererFactory2 }, { type: i1.Location }, { type: i1$2.OverlayOutsideClickDispatcher }];
+                    }] }, { type: i2$1.Directionality }, { type: i0.RendererFactory2 }, { type: i1.Location }, { type: i1$2.OverlayOutsideClickDispatcher }];
     } });
 
 class AXOverlayService {
@@ -3963,9 +3857,9 @@ class AXOverlayService {
         };
     }
 }
-AXOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXOverlayService, deps: [{ token: DynamicOverlay }, { token: i1$2.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: [{
+AXOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXOverlayService, deps: [{ token: DynamicOverlay }, { token: i1$2.Overlay }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
+AXOverlayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXOverlayService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXOverlayService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: DynamicOverlay }, { type: i1$2.Overlay }, { type: i0.ApplicationRef }]; } });
@@ -4110,9 +4004,9 @@ class AXLoadingService {
         return loaderId !== null && loaderId !== void 0 ? loaderId : DEFAULT_LOADER_ID;
     }
 }
-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: [{
+AXLoadingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXLoadingService, deps: [{ token: i0.NgZone }, { token: AXOverlayService }], target: i0.ɵɵFactoryTarget.Injectable });
+AXLoadingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXLoadingService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXLoadingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -4139,9 +4033,9 @@ class AXPageComponent extends AXBaseComponentMixin {
         }
     }
 }
-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: [{
+AXPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", ngImport: i0, type: AXPageComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPageComponent, decorators: [{
             type: Injectable
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
@@ -4152,14 +4046,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 
 class AXPageFooterComponent {
 }
-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: `
+AXPageFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXPageFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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: "13.1.1", ngImport: i0, type: AXPageFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPageFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-page-footer',
@@ -4226,9 +4120,9 @@ class AXBasePageComponent {
         this.onClosed.unsubscribe();
     }
 }
-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: [{
+AXBasePageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXBasePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AXBasePageComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXBasePageComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXBasePageComponent, decorators: [{
             type: Injectable
         }], propDecorators: { pageContainer: [{
                 type: ViewChild,
@@ -4240,10 +4134,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 
 class AXPageModule {
 }
-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: [{
+AXPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPageModule, declarations: [AXPageFooterComponent], exports: [AXPageFooterComponent] });
+AXPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPageModule, providers: [], imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPageModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -4253,19 +4147,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }] });
 
-const COMPONENT$b = [AXDialogComponent];
-const MODULES$b = [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule];
+const COMPONENT$d = [AXDialogComponent];
+const MODULES$d = [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXEditorDecoratorModule];
 class AXDialogModule {
 }
-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: [{
+AXDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", ngImport: i0, type: AXDialogModule, providers: [], imports: [[...MODULES$d]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDialogModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$b],
-                    imports: [...MODULES$b],
-                    exports: [...COMPONENT$b],
+                    declarations: [...COMPONENT$d],
+                    imports: [...MODULES$d],
+                    exports: [...COMPONENT$d],
                     providers: [],
                 }]
         }] });
@@ -4388,12 +4282,12 @@ class AXDrawerComponent extends AXBaseComponentMixin {
         this.collapsed = true;
     }
 }
-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: `
+AXDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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: "13.1.1", ngImport: i0, type: AXDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDrawerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-drawer',
@@ -4456,8 +4350,8 @@ class AXDrawerContainerComponent extends AXBaseComponentMixin {
         });
     }
 }
-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: `
+AXDrawerContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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">
@@ -4465,7 +4359,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: "13.1.1", ngImport: i0, type: AXDrawerContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDrawerContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-drawer-container',
@@ -4492,12 +4386,12 @@ class AXDrawerContentComponent extends AXBaseComponentMixin {
         super(elementRef, cdr);
     }
 }
-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: `
+AXDrawerContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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: "13.1.1", ngImport: i0, type: AXDrawerContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDrawerContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-drawer-content',
@@ -4511,42 +4405,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-const COMPONENT$a = [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent];
-const MODULES$a = [CommonModule];
+const COMPONENT$c = [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent];
+const MODULES$c = [CommonModule];
 class AXDrawerModule {
 }
-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: [{
+AXDrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDrawerModule, declarations: [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent], imports: [CommonModule], exports: [AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent] });
+AXDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDrawerModule, providers: [], imports: [[...MODULES$c]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDrawerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$a],
-                    imports: [...MODULES$a],
-                    exports: [...COMPONENT$a],
+                    declarations: [...COMPONENT$c],
+                    imports: [...MODULES$c],
+                    exports: [...COMPONENT$c],
                     providers: [],
                 }]
         }] });
 
-class AXDropdownComponent extends AXBaseDropdownMixin {
-    constructor(_elementRef, _cdr) {
-        super(_elementRef, _cdr);
-        this._target = this;
-    }
-    _handleArrowClickEvent() {
-        this.toggle();
-    }
-}
-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"], outputs: ["onOpened", "onClosed"] }], 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);
@@ -4593,9 +4468,9 @@ class AXDropdownPanelComponent extends AXBaseDropdownMixin {
         this._emitOnItemClickEvent(e, e.component);
     }
 }
-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"], outputs: ["onOpened", "onClosed"] }, { 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: [{
+AXDropdownPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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, static: 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"], outputs: ["onOpened", "onClosed"] }, { 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.2.0", ngImport: i0, type: AXDropdownPanelComponent, decorators: [{
             type: Component,
             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 () {
@@ -4612,22 +4487,223 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 type: Output
             }], popover: [{
                 type: ViewChild,
-                args: [AXPopoverComponent]
+                args: [AXPopoverComponent, { static: true }]
             }], items: [{
                 type: Input
             }] } });
 
 class AXDropdownModule {
 }
-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: [{
+AXDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDropdownModule, declarations: [AXDropdownPanelComponent], imports: [CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule], exports: [AXDropdownPanelComponent] });
+AXDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDropdownModule, providers: [], imports: [[CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXButtonModule, OverlayModule, AXIconModule, AXEditorDecoratorModule, AXPopoverModule],
-                    exports: [AXDropdownComponent, AXDropdownPanelComponent],
-                    declarations: [AXDropdownComponent, AXDropdownPanelComponent],
+                    exports: [AXDropdownPanelComponent],
+                    declarations: [AXDropdownPanelComponent],
+                    providers: [],
+                }]
+        }] });
+
+class AXFormFieldComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+    }
+}
+AXFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", type: AXFormFieldComponent, selector: "ax-form-field", 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.2.0", ngImport: i0, type: AXFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-form-field',
+                    template: '<ng-content></ng-content>',
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+
+class AXFormHintComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+    }
+}
+AXFormHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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.2.0", ngImport: i0, type: AXFormHintComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-form-hint',
+                    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,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+
+class AXFormComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.cdr = cdr;
+    }
+    _getComponenets() {
+        return Array.from(this._getHostElement().querySelectorAll('[ax-form-input="true"]'));
+    }
+    validate() {
+        const widgets = this._getComponenets();
+        //
+        return new Promise((resolve, reject) => {
+            if (widgets.length === 0) {
+                return Promise.resolve({ result: true });
+            }
+            Promise.all(widgets.map((c) => c.__axContext__.validate())).then((rules) => {
+                const failed = rules.filter((c) => !c.result);
+                if (failed.length) {
+                    reject({
+                        result: false,
+                        items: failed
+                    });
+                }
+                else {
+                    resolve({ result: true });
+                }
+            });
+        });
+    }
+    clear() {
+        const widgets = this._getComponenets();
+        widgets.forEach(w => {
+            w.__axContext__.clear();
+        });
+    }
+}
+AXFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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.2.0", ngImport: i0, type: AXFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-form',
+                    template: '<div class="ax-form"><ng-content></ng-content></div>',
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+
+class AXFormModule {
+}
+AXFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXFormModule, declarations: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent], imports: [CommonModule], exports: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent] });
+AXFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXFormModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent],
+                    declarations: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent],
+                    providers: [],
+                }]
+        }] });
+
+class AXInputMaskComponent extends AXBaseComponent {
+    /**
+    *  @ignore
+    */
+    constructor(_elementRef, _cdr, _textbox) {
+        super(_elementRef, _cdr);
+        this._elementRef = _elementRef;
+        this._textbox = _textbox;
+        this.showMaskTyped = false;
+        this.clearIfNotMatch = false;
+    }
+    onViewInit() {
+        this._maskObj = IMask(this._textbox._getHostElement().querySelector('input'), {
+            mask: this.mask
+        });
+    }
+    get prefix() {
+        return this._prefix || '';
+    }
+    set prefix(v) {
+        this._prefix = v;
+    }
+    get suffix() {
+        return this._suffix || '';
+    }
+    set suffix(v) {
+        this._suffix = v;
+    }
+}
+AXInputMaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXInputMaskComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXTextBoxComponent }], target: i0.ɵɵFactoryTarget.Component });
+AXInputMaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: AXInputMaskComponent, selector: "ax-input-mask", inputs: { prefix: "prefix", suffix: "suffix", showMaskTyped: "showMaskTyped", clearIfNotMatch: "clearIfNotMatch", mask: "mask" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXInputMaskComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-input-mask',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXTextBoxComponent }]; }, propDecorators: { prefix: [{
+                type: Input
+            }], suffix: [{
+                type: Input
+            }], showMaskTyped: [{
+                type: Input
+            }], clearIfNotMatch: [{
+                type: Input
+            }], mask: [{
+                type: Input
+            }] } });
+
+const COMPONENT$b = [AXInputMaskComponent];
+const MODULES$b = [CommonModule, NgxMaskModule.forRoot(), IMaskModule];
+class AXInputMaskModule {
+}
+AXInputMaskModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXInputMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXInputMaskModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXInputMaskModule, declarations: [AXInputMaskComponent], imports: [CommonModule, i1$4.NgxMaskModule, IMaskModule], exports: [AXInputMaskComponent] });
+AXInputMaskModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXInputMaskModule, providers: [], imports: [[...MODULES$b]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXInputMaskModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT$b],
+                    imports: [...MODULES$b],
+                    exports: [...COMPONENT$b],
+                    providers: [],
+                }]
+        }] });
+
+class AXLabelComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+    }
+    get target() {
+        return this._target;
+    }
+    set target(v) {
+        this._target = v;
+        this._cdr.markForCheck();
+    }
+}
+AXLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", type: AXLabelComponent, selector: "ax-label", usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"target\">\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.2.0", ngImport: i0, type: AXLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<label [attr.for]=\"target\">\r\n    <ng-content></ng-content>\r\n</label>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+
+const COMPONENT$a = [AXLabelComponent];
+const MODULES$a = [CommonModule];
+class AXLabelModule {
+}
+AXLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXLabelModule, declarations: [AXLabelComponent], imports: [CommonModule], exports: [AXLabelComponent] });
+AXLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXLabelModule, providers: [], imports: [[...MODULES$a]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXLabelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT$a],
+                    imports: [...MODULES$a],
+                    exports: [...COMPONENT$a],
                     providers: [],
                 }]
         }] });
@@ -4641,40 +4717,64 @@ class AXNumberBoxComponent extends AXBaseTextBoxMixin {
     /**
     *  @ignore
     */
-    constructor(elementRef, cdr, _maskService) {
+    constructor(elementRef, cdr) {
         super(elementRef, cdr);
         this.cdr = cdr;
-        this._maskService = _maskService;
-        /**
-        *  A character value that specifies the separator character.
-        */
-        this.separator = ',';
-        /**
-       *  Specifies whether the Separator character will be displayed or not
-       */
-        this.thousandSeparator = false;
+        this._padDecimalZeros = false;
         /**
        *  Specifies the value that is used to increment or decrement the **Integer** part of number
        */
         this.step = 1;
-        /**
-        *  Specifies the number of decimals that the user can enter
-        */
-        this.scale = 0;
+        this._decimals = 0;
         /**
         *  Specifies the value that is used to increment or decrement the **Deciaml** part of number
         */
-        this.decimalStep = 0.1;
+        this.decimalStep = 'auto';
         /**
         *  Specifies whether the Up and Down spin buttons will be rendered or not
         */
         this.showSpinButtons = true;
-        this._minValue = Number.MIN_VALUE;
-        this._maxValue = Number.MAX_VALUE;
-        this.displayTextChange = new EventEmitter();
+        this._minValue = Number.MIN_SAFE_INTEGER;
+        this._maxValue = Number.MAX_SAFE_INTEGER;
+        this.toNum = (val) => {
+            return Number(val.replace(/[^0-9.-]+/g, ''));
+        };
     }
-    get __hostClass() {
-        return `${this.cssClass} ax-${this.size}`;
+    /**
+    *  A character value that specifies the separator character.
+    */
+    get thousandsSeparator() {
+        return this._thousandsSeparator;
+    }
+    set thousandsSeparator(v) {
+        this._setOption({
+            name: "thousandsSeparator",
+            value: v !== null && v !== void 0 ? v : '',
+        });
+    }
+    /**
+    *  A character value that specifies the separator character.
+    */
+    get padDecimalZeros() {
+        return this._padDecimalZeros;
+    }
+    set padDecimalZeros(v) {
+        this._setOption({
+            name: "padDecimalZeros",
+            value: v,
+        });
+    }
+    /**
+    *  Specifies the number of decimals that the user can enter
+    */
+    get decimals() {
+        return this._decimals;
+    }
+    set decimals(v) {
+        this._setOption({
+            name: "decimals",
+            value: v !== null && v !== void 0 ? v : 0,
+        });
     }
     /**
     *  Specifies the smallest value that is valid
@@ -4683,7 +4783,10 @@ class AXNumberBoxComponent extends AXBaseTextBoxMixin {
         return this._minValue;
     }
     set minValue(v) {
-        this._minValue = v ? Number(v) : Number.MIN_VALUE;
+        this._setOption({
+            name: "minValue",
+            value: v != null ? Number(v) : Number.MIN_SAFE_INTEGER,
+        });
     }
     /**
     *  Specifies the greatest value that is valid
@@ -4692,179 +4795,92 @@ class AXNumberBoxComponent extends AXBaseTextBoxMixin {
         return this._maxValue;
     }
     set maxValue(v) {
-        this._maxValue = v ? Number(v) : Number.MAX_VALUE;
+        this._setOption({
+            name: "maxValue",
+            value: v != null ? Number(v) : Number.MAX_SAFE_INTEGER,
+        });
     }
-    /**
-    *  The formatted string which is displaying in the numberbox
-    */
-    get displayText() {
-        return this._displayText;
+    onViewInit() {
+        super.onViewInit();
+        this._updateMask();
     }
-    set displayText(v) {
-        this._displayText = v;
-        this.displayTextChange.emit(v);
+    _onOptionChanged(option) {
+        super._onOptionChanged(option);
+        this._updateMask();
+    }
+    _updateMask() {
+        var _a, _b, _c, _d;
+        if (!this._maskObj) {
+            this._maskObj = IMask.createMask({
+                mask: Number,
+                min: this.minValue,
+                max: this.maxValue,
+                thousandsSeparator: this.thousandsSeparator || '',
+                scale: this.decimals,
+                radix: '.',
+                padFractionalZeros: this.decimals > 0 && this.padDecimalZeros
+            });
+        }
+        else {
+            this._maskObj.updateOptions({
+                min: this.minValue,
+                max: this.maxValue,
+                thousandsSeparator: this.thousandsSeparator || '',
+                scale: this.decimals,
+                radix: '.',
+                padFractionalZeros: this.decimals > 0 && this.padDecimalZeros
+            });
+        }
+        (_b = (_a = this._maskDirective) === null || _a === void 0 ? void 0 : _a.maskRef) === null || _b === void 0 ? void 0 : _b.updateValue();
+        (_d = (_c = this._maskDirective) === null || _c === void 0 ? void 0 : _c.maskRef) === null || _d === void 0 ? void 0 : _d.updateControl();
     }
     _handleOnKeydownEvent(e) {
         const ignore = () => {
             e.preventDefault();
             e.stopPropagation();
         };
-        const toNum = (val) => {
-            return Number(val.replace(/[^0-9.-]+/g, ''));
-        };
-        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 val = toNum(valStr);
         const decimalPointIndex = valStr.indexOf('.');
         const selectionStart = input.selectionStart;
         const selectionEnd = input.selectionEnd;
-        //
-        //
-        if (![...nums, ...chars].includes(key)) {
-            ignore();
-        }
-        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-            const stepVal = decimalPointIndex > -1
-                ? selectionStart >= decimalPointIndex
-                    ? this.decimalStep
-                    : this.step
-                : this.step;
-            if (e.key === 'ArrowDown') {
-                this.value = val - stepVal;
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            if (selectionStart > decimalPointIndex && this.decimals > 0) {
+                e.key === 'ArrowDown' ? this.decimalStepDown() : this.decimalStepUp();
             }
             else {
-                this.value = val + stepVal;
+                e.key === 'ArrowDown' ? this.stepDown() : this.stepUp();
             }
             ignore();
-            input.setSelectionRange(selectionStart, selectionStart);
-        }
-        else if (e.key == 'Backspace') {
-            const chr = valStr.substr(selectionStart - 1, 1);
-            if (!nums.includes(chr)) {
-                ignore();
-                input.setSelectionRange(selectionStart - 1, selectionStart - 1);
-            }
-            else {
-                const newVal = toNum(valStr.substr(0, selectionStart - 1) + valStr.substr(selectionEnd));
-                input.value = this._format(newVal);
-                this.value = newVal;
-                ignore();
-                if (newVal == 0) {
-                    input.setSelectionRange(1, 1);
-                }
-                else {
-                    input.setSelectionRange(selectionStart - 1, selectionStart - 1);
-                }
-            }
-        }
-        else if (e.key == '.') {
-            if (!this.scale) {
-                ignore();
-            }
-            else if (decimalPointIndex > -1) {
-                input.setSelectionRange(decimalPointIndex + 1, decimalPointIndex + 1);
-                ignore();
-            }
-            else {
-                if (input.selectionEnd != valStr.length) {
-                    input.setSelectionRange(valStr.length, valStr.length);
-                    ignore();
-                }
-            }
-        }
-        else if (e.key == '-') {
-            const index = valStr.indexOf('-');
-            if (index > -1) {
-                ignore();
-            }
-            else {
-                this.value = Math.abs(this.value) * -1;
-                input.setSelectionRange(index + 1, index + 1);
-                ignore();
-            }
-        }
-        else if (nums.includes(key)) {
-            const newVal = toNum(valStr.substr(0, selectionStart) + key + valStr.substr(selectionEnd));
-            if (newVal < this.minValue) {
-                //TODO : highlight correct number
-                //input.value = this._format(this.minValue);
-                //const diff = this.minValue - val;
-                //this.value = this.minValue;
-                //ignore();
-                // setTimeout(() => {
-                //     input.setSelectionRange(input.selectionStart + 1, this.minValue.toString().length);
-                // }, 50);
-            }
-            else if (newVal > this.maxValue) {
-                input.value = this._format(this.maxValue);
-                this.value = this.maxValue;
-                ignore();
-            }
-            else {
-                input.value = this._format(newVal);
-                this.value = newVal;
-                ignore();
-            }
+            setTimeout(() => {
+                input.setSelectionRange(selectionStart, selectionStart);
+            });
         }
         super._emitOnKeydownEvent(e);
     }
+    _handleUpDownClick(e, v) {
+        v == 1 ? this.stepUp() : this.stepDown();
+    }
     _onValueChanging(value) {
-        return this._fixValue(value);
+        return _.toNumber(value);
     }
-    _fixValue(value) {
-        if (value == null || value == undefined) {
-            return this.allowNull ? null : this.minValue;
-        }
-        else if (value > this.maxValue) {
-            return this.maxValue;
-        }
-        else if (value < this.minValue) {
-            return this.minValue;
-        }
-        return parseFloat(value.toFixed(this.scale));
+    stepUp() {
+        this.value += this.step;
     }
-    _format(value) {
-        if (this.thousandSeparator) {
-            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);
-        }
-        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);
-        }
+    stepDown() {
+        this.value -= this.step;
     }
-    _onValueChanged(oldValue, newValue) {
-        this.displayText = this._format(newValue);
+    decimalStepUp() {
+        this.value += this.decimalStep == 'auto' ? (1 / Math.pow(10, this.decimals)) : this.decimalStep;
     }
-    _handleOnBlurEvent(e) {
-        const input = e.target;
-        this.value = this._fixValue(this.value);
-        input.value = this._format(this.value);
-        this._emitOnFocusEvent(e);
+    decimalStepDown() {
+        this.value -= this.decimalStep == 'auto' ? (1 / Math.pow(10, this.decimals)) : this.decimalStep;
+        ;
     }
 }
-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$3.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", checked: "checked", 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: i1$1.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: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.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: [{
+AXNumberBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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", checked: "checked", thousandsSeparator: "thousandsSeparator", padDecimalZeros: "padDecimalZeros", step: "step", decimals: "decimals", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-editor-container" }, viewQueries: [{ propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\"  \r\n    [attr.placeholder]=\"placeholder\" \r\n    [imask]=\"_maskObj\" \r\n    [unmask]=\"'typed'\"\r\n    [attr.min]=\"minValue\"\r\n    [attr.max]=\"maxValue\" \r\n    [class.ax-state-disabled]=\"disabled\" \r\n    [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" \r\n    [readonly]=\"readonly\" \r\n    [tabindex]=\"tabIndex\" \r\n    [(ngModel)]=\"value\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnFocusEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\"\r\n    autocomplete=\"off\">\r\n\r\n<div class=\"ax-number-box-arrows\" *ngIf=\"showSpinButtons && !(disabled || readonly)\">\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax-rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,-1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax--rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div>\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"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$1.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: i5.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.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.2.0", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-number-box', inputs: [
                         'disabled',
@@ -4879,17 +4895,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                         'onBlur',
                         'onFocus',
                         ...TEXTBOX_OUTPUT,
-                    ], 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$3.MaskApplierService }]; }, propDecorators: { __hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], separator: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\"  \r\n    [attr.placeholder]=\"placeholder\" \r\n    [imask]=\"_maskObj\" \r\n    [unmask]=\"'typed'\"\r\n    [attr.min]=\"minValue\"\r\n    [attr.max]=\"maxValue\" \r\n    [class.ax-state-disabled]=\"disabled\" \r\n    [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" \r\n    [readonly]=\"readonly\" \r\n    [tabindex]=\"tabIndex\" \r\n    [(ngModel)]=\"value\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnFocusEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\"\r\n    autocomplete=\"off\">\r\n\r\n<div class=\"ax-number-box-arrows\" *ngIf=\"showSpinButtons && !(disabled || readonly)\">\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax-rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,-1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax--rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div>\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 }]; }, propDecorators: { thousandsSeparator: [{
                 type: Input
-            }], thousandSeparator: [{
+            }], padDecimalZeros: [{
                 type: Input
             }], step: [{
                 type: Input
-            }], scale: [{
+            }], decimals: [{
                 type: Input
             }], decimalStep: [{
                 type: Input
@@ -4899,10 +4912,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 type: Input
             }], maxValue: [{
                 type: Input
-            }], displayTextChange: [{
-                type: Output
-            }], displayText: [{
-                type: Input
+            }], _maskDirective: [{
+                type: ViewChild,
+                args: [IMaskDirective]
             }] } });
 
 const COMPONENT$9 = [AXNumberBoxComponent];
@@ -4910,16 +4922,21 @@ const MODULES$9 = [
     CommonModule,
     FormsModule,
     AXButtonModule,
-    NgxMaskModule.forChild()
+    AXEditorDecoratorModule,
+    AXIconModule,
+    IMaskModule
 ];
 class AXNumberBoxModule {
 }
-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,
+AXNumberBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXNumberBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXNumberBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXNumberBoxModule, declarations: [AXNumberBoxComponent], imports: [CommonModule,
         FormsModule,
-        AXButtonModule, i1$3.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: [{
+        AXButtonModule,
+        AXEditorDecoratorModule,
+        AXIconModule,
+        IMaskModule], exports: [AXNumberBoxComponent] });
+AXNumberBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXNumberBoxModule, providers: [], imports: [[...MODULES$9]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXNumberBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$9],
@@ -4961,9 +4978,9 @@ class AXPasswordBoxComponent extends AXBaseTextBoxMixin {
         }
     }
 }
-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", checked: "checked", 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: i1$1.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: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.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: [{
+AXPasswordBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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", checked: "checked", 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\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: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$1.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: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.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.2.0", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-password-box', inputs: [
                         'disabled',
@@ -4978,7 +4995,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                         'onBlur',
                         'onFocus',
                         ...TEXTBOX_OUTPUT,
-                    ], 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>" }]
+                    ], 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\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']
@@ -4996,14 +5013,14 @@ const MODULES$8 = [
 ];
 class AXPasswordBoxModule {
 }
-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,
+AXPasswordBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPasswordBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXPasswordBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPasswordBoxModule, declarations: [AXPasswordBoxComponent], imports: [CommonModule,
         FormsModule,
         AXButtonModule,
         AXEditorDecoratorModule,
         AXIconModule], exports: [AXPasswordBoxComponent] });
-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: [{
+AXPasswordBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPasswordBoxModule, providers: [], imports: [[...MODULES$8]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPasswordBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$8],
@@ -5028,8 +5045,8 @@ class AXPopupComponent extends AXBaseComponentMixin {
         this.showCloseButton = true;
         this.showHeader = true;
     }
-    onViewInit() {
-        debugger;
+    onInit() {
+        super.onInit();
         if (this._platform.is('Mobile')) {
             this.draggable = false;
         }
@@ -5099,12 +5116,12 @@ class AXPopupComponent extends AXBaseComponentMixin {
     }
     onFullScreen() { }
 }
-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 }, { token: i2.AXPlatform }], 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-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\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.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.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$4.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: [{
+AXPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: AXLoadingService }, { token: i1$3.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
+AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <ng-container *ngIf=\"showHeader\">\r\n            <header cdkDragHandle class=\"ax-cursor-move\">\r\n                <span>{{title}}</span>\r\n                <i class=\"ax-ic ax-ic-close\" *ngIf=\"showCloseButton\"\r\n                    (click)=\"_handleCloseClick()\" tabindex=\"1\"></i>\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.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$5.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.2.0", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
-            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-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\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 }, { type: i2.AXPlatform }]; }, propDecorators: { onKeydownHandler: [{
+            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-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <ng-container *ngIf=\"showHeader\">\r\n            <header cdkDragHandle class=\"ax-cursor-move\">\r\n                <span>{{title}}</span>\r\n                <i class=\"ax-ic ax-ic-close\" *ngIf=\"showCloseButton\"\r\n                    (click)=\"_handleCloseClick()\" tabindex=\"1\"></i>\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 }, { type: i1$3.AXPlatform }]; }, propDecorators: { onKeydownHandler: [{
                 type: HostListener,
                 args: ['keydown.escape', ['$event']]
             }] } });
@@ -5193,26 +5210,27 @@ class AXPopupService {
         }
     }
 }
-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
+AXPopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPopupService, deps: [{ token: AXOverlayService }], target: i0.ɵɵFactoryTarget.Injectable });
+AXPopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPopupService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPopupService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: AXOverlayService }]; } });
 
 const COMPONENT$7 = [AXPopupComponent];
 const MODULES$7 = [CommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule];
 class AXPopupModule {
 }
-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: [{
+AXPopupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXPopupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPopupModule, declarations: [AXPopupComponent], imports: [CommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule], exports: [AXPopupComponent] });
+AXPopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPopupModule, providers: [], imports: [[...MODULES$7]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXPopupModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$7],
                     imports: [...MODULES$7],
                     exports: [...COMPONENT$7],
-                    providers: [AXPopupService],
+                    providers: [],
                 }]
         }] });
 
@@ -5229,9 +5247,9 @@ class AXRadioComponent extends AXBaseValueComponentMixin {
         }
     }
 }
-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", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, 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\" [(ngModel)]=\"value\" [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\"\n        (blur)=\"_emitOnBlurEvent($event)\">\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>", directives: [{ type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.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: AXRadioComponent, decorators: [{
+AXRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", type: AXRadioComponent, selector: "ax-radio", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, 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\" [(ngModel)]=\"value\" [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\"\n        (blur)=\"_emitOnBlurEvent($event)\">\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>", directives: [{ type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.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.2.0", ngImport: i0, type: AXRadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-radio', inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT], 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\" [(ngModel)]=\"value\" [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\"\n        (blur)=\"_emitOnBlurEvent($event)\">\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 }]; } });
@@ -5240,10 +5258,10 @@ const COMPONENT$6 = [AXRadioComponent];
 const MODULES$6 = [CommonModule, FormsModule];
 class AXRadioModule {
 }
-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, FormsModule], 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: [{
+AXRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXRadioModule, declarations: [AXRadioComponent], imports: [CommonModule, FormsModule], exports: [AXRadioComponent] });
+AXRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXRadioModule, providers: [], imports: [[...MODULES$6]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXRadioModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$6],
@@ -5259,9 +5277,9 @@ class AXRangeSliderComponent extends AXBaseComponentMixin {
         //TODO: ax-range-slider
     }
 }
-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: [{
+AXRangeSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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.2.0", ngImport: i0, type: AXRangeSliderComponent, decorators: [{
             type: Component,
             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 }]; } });
@@ -5270,10 +5288,10 @@ const COMPONENT$5 = [AXRangeSliderComponent];
 const MODULES$5 = [CommonModule];
 class AXRangeSliderModule {
 }
-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: [{
+AXRangeSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXRangeSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXRangeSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXRangeSliderModule, declarations: [AXRangeSliderComponent], imports: [CommonModule], exports: [AXRangeSliderComponent] });
+AXRangeSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXRangeSliderModule, providers: [], imports: [[...MODULES$5]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXRangeSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$5],
@@ -5284,27 +5302,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
         }] });
 
 class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
-    constructor(elementRef, cdr, zone) {
-        super(elementRef, cdr);
-        this.zone = zone;
+    constructor(_elementRef, _cdr, _zone, _platform) {
+        super(_elementRef, _cdr);
+        this._elementRef = _elementRef;
+        this._cdr = _cdr;
+        this._zone = _zone;
+        this._platform = _platform;
+        this.checkbox = false;
         this._currentfocusedIndex = -1;
-        this._target = this._getHostElement();
+        this._isMobile = false;
     }
     _handleArrowClickEvent(e) {
+        e.nativeEvent.stopPropagation();
         this.toggle();
     }
-    onViewInit() {
-        debugger;
-        super.onViewInit();
-        this.dropdownWidth = this._target._getHostElement().offsetWidth;
+    _handleInputClickEvent(e) {
+        e.stopPropagation();
+        this.toggle();
+    }
+    onInit() {
+        super.onInit();
+        this._target = this._elementRef.nativeElement;
+        this._isMobile = this._platform.is('Mobile');
+        this._popoverTitle = this.placeholder || AXTranslator.get('selectbox.popover.title');
         this.onOpened.subscribe(() => {
-            this._focusSelectedItem();
+            if (this.displayItems.length == 0) {
+                this._fetchData();
+            }
+            else {
+                this._focusSelectedItem();
+            }
+        });
+        this.onClosed.subscribe(() => {
+            this.focus();
         });
     }
+    onViewInit() {
+        super.onViewInit();
+        this._popoverWidth = this._isMobile ? null : this._target.offsetWidth;
+    }
     _handleOnItemClick(e, item) {
+        if (this.isItemDisabled(item)) {
+            return;
+        }
         if (!this.multiple)
             this.close();
         this.toggleSelect(item);
+        this._cdr.detectChanges();
     }
     _handleListScroll(e) {
         const list = e.target;
@@ -5314,14 +5358,17 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         this._fetchData();
     }
     _checkForLoadData() {
+        var _a;
         const list = this.listContainer.nativeElement;
-        if (this.loadedCount < this.totalCount && list.clientHeight < list.parentElement.clientHeight) {
+        const headerSize = ((_a = list.parentElement.querySelector('.ax-overlay-pane-header')) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+        if (this.loadedCount < this.totalCount && list.scrollHeight < ((list.parentElement.clientHeight - headerSize) * 1.5)) {
             this._fetchData();
         }
     }
     _onDataLoaded() {
         setTimeout(() => {
             this._checkForLoadData();
+            this.popover.updatePosition();
         }, 100);
     }
     _handleOnRemoveItemClick(e, item) {
@@ -5331,6 +5378,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
     _handleBadgeRemove(e, item) {
         this.unselectItems(item);
         e.stopPropagation();
+        this.close();
     }
     _handleKeydown(e) {
         if (!(this._getHostElement() == document.activeElement ||
@@ -5352,7 +5400,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
             e.preventDefault();
             return;
         }
-        else if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && this.displayItems.length > 0 && !this.dropdown.isOpen && e.type === 'keydown') {
+        else if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && this.displayItems.length > 0 && !this.popover.isOpen && e.type === 'keydown') {
             if (this.multiple) {
                 this.open();
             }
@@ -5374,7 +5422,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
             e.preventDefault();
             return;
         }
-        if (this.dropdown.isOpen) {
+        if (this.popover.isOpen) {
             if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && this.displayItems.length > 0) {
                 this.isUserInput = true;
                 this._focusItemByNav((e.key === 'ArrowDown' ? 1 : -1));
@@ -5384,9 +5432,14 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
                 e.preventDefault();
                 return;
             }
-            if ((e.key === 'Enter' || e.code === 'Space')) {
+            //e.key === 'Enter' ||
+            if ((e.code === 'Space')) {
+                e.preventDefault();
                 const focusedItem = this.displayItems[this._currentfocusedIndex];
                 if (focusedItem) {
+                    if (this.isItemDisabled(focusedItem)) {
+                        return;
+                    }
                     if (this.multiple) {
                         this.isUserInput = true;
                         this.toggleSelect(focusedItem);
@@ -5397,7 +5450,6 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
                         this.close();
                     }
                 }
-                e.preventDefault();
                 return;
             }
         }
@@ -5421,7 +5473,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
     }
     _focusItemByIndex(inedx) {
         if (this.listContainer) {
-            this.zone.runOutsideAngular(() => {
+            this._zone.runOutsideAngular(() => {
                 const itemDiv = this.listContainer.nativeElement.querySelector(`.ax-list-item:nth-child(${inedx + 1})`);
                 if (itemDiv) {
                     itemDiv.focus();
@@ -5446,14 +5498,16 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         this._currentfocusedIndex = index;
     }
 }
-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: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", items: "items", multiple: "multiple", valueField: "valueField", textField: "textField" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange" }, host: { listeners: { "document:keydown": "_handleKeydown($event)" }, classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-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>\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        <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    </div>\r\n</ax-popover>", components: [{ type: AXBadgeComponent, selector: "ax-badge", inputs: ["text", "color"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked"], 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: [{
+AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$3.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
+AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", pageSize: "pageSize", valueField: "valueField", textField: "textField", items: "items", disabledField: "disabledField", disabledCallback: "disabledCallback", multiple: "multiple", selectionMode: "selectionMode", checkbox: "checkbox" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", valueChanged: "valueChanged" }, host: { listeners: { "document:keydown": "_handleKeydown($event)" }, classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (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 ax-cursor-pointer\"\r\n                                (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>\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (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-validation-rule\">\r\n</ng-content>\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 \" [class.ax-overlay-center]=\"_isMobile\" [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list ax-list-container\" panel>\r\n            <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n                <span>{{_popoverTitle}}</span>\r\n                <i class=\"ax-ic {{multiple?'ax-ic-check':'ax-ic-close'}}\" (click)=\"close()\" tabindex=\"1\"></i>\r\n            </div>\r\n            <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                (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                            [class.ax-state-disabled]=\"isItemDisabled(item)\">\r\n                            <ng-container\r\n                                *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)\"\r\n                                [attr.tabindex]=\"i\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                (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)\"\r\n                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                (click)=\"_handleOnItemClick($event,item)\">\r\n                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\" *ngIf=\"checkbox\"\r\n                                    [checked]=\"isItemSelected(item)\" [disabled]=\"isItemDisabled(item)\">\r\n                                &nbsp;\r\n                                {{ _getItemDisplayTextTemplte(item) }}\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-flex ax-items-center ax-justify-center ax-p-4\">\r\n                            <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXBadgeComponent, selector: "ax-badge", inputs: ["text", "color"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }], 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"] }], pipes: { "trans": i1$3.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-select-box', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...CALENDAR_INPUTS, 'items', 'multiple', 'allowNull', 'valueField', 'textField'], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...CALENDAR_OUTPUTS], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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    <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>\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        <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    </div>\r\n</ax-popover>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { popover: [{
+            args: [{ selector: 'ax-select-box', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...DATALIST_INPUTS, ...SELECTION_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...SELECTION_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (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 ax-cursor-pointer\"\r\n                                (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>\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (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-validation-rule\">\r\n</ng-content>\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 \" [class.ax-overlay-center]=\"_isMobile\" [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list ax-list-container\" panel>\r\n            <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n                <span>{{_popoverTitle}}</span>\r\n                <i class=\"ax-ic {{multiple?'ax-ic-check':'ax-ic-close'}}\" (click)=\"close()\" tabindex=\"1\"></i>\r\n            </div>\r\n            <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                (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                            [class.ax-state-disabled]=\"isItemDisabled(item)\">\r\n                            <ng-container\r\n                                *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)\"\r\n                                [attr.tabindex]=\"i\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                (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)\"\r\n                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                (click)=\"_handleOnItemClick($event,item)\">\r\n                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\" *ngIf=\"checkbox\"\r\n                                    [checked]=\"isItemSelected(item)\" [disabled]=\"isItemDisabled(item)\">\r\n                                &nbsp;\r\n                                {{ _getItemDisplayTextTemplte(item) }}\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-flex ax-items-center ax-justify-center ax-p-4\">\r\n                            <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ax-popover>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$3.AXPlatform }]; }, propDecorators: { popover: [{
                 type: ViewChild,
-                args: [AXPopoverComponent]
+                args: [AXPopoverComponent, { static: true }]
+            }], checkbox: [{
+                type: Input
             }], listContainer: [{
                 type: ViewChild,
                 args: ['listContainer', { static: true }]
@@ -5464,13 +5518,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 
 class AXSelectBoxModule {
 }
-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, AXPopoverModule, AXButtonModule], 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, AXPopoverModule, AXButtonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxModule, decorators: [{
+AXSelectBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSelectBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [CommonModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXTranslationModule, AXIconModule, AXPopoverModule, AXButtonModule, AXLabelModule, AXLoadingModule], exports: [AXSelectBoxComponent] });
+AXSelectBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXSelectBoxModule, providers: [], imports: [[CommonModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXTranslationModule, AXIconModule, AXPopoverModule, AXButtonModule, AXLabelModule, AXLoadingModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXSelectBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, AXDropdownModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule, AXPopoverModule, AXButtonModule],
+                    imports: [CommonModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXTranslationModule, AXIconModule, AXPopoverModule, AXButtonModule, AXLabelModule, AXLoadingModule],
                     exports: [AXSelectBoxComponent],
                     declarations: [AXSelectBoxComponent],
                     providers: [],
@@ -5492,9 +5546,9 @@ class AXSelectionListComponent extends AXBaseSelectionValueMixin {
         }
     }
 }
-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 ax-check-box\">\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 ax-radio\">\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>\r\n\r\n<!-- <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                    <ax-check-box [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                       \r\n                        <ax-label> {{item[textField]}} |  {{isItemSelected(item)}}</ax-label>\r\n                        <ax-form-hint *ngIf=\"item[hintField]\"> {{item[hintField]}} </ax-form-hint>\r\n                    </ax-check-box>\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                    <ax-radio [id]=\"id+'-'+i\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                        <ax-label>{{item[textField]}} |  {{isItemSelected(item)}}</ax-label>\r\n                        <ax-form-hint *ngIf=\"item[hintField]\"> {{item[hintField]}} </ax-form-hint>\r\n                    </ax-radio>\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: [{
+AXSelectionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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 ax-check-box\">\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 ax-radio\">\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>\r\n\r\n<!-- <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                    <ax-check-box [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                       \r\n                        <ax-label> {{item[textField]}} |  {{isItemSelected(item)}}</ax-label>\r\n                        <ax-form-hint *ngIf=\"item[hintField]\"> {{item[hintField]}} </ax-form-hint>\r\n                    </ax-check-box>\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                    <ax-radio [id]=\"id+'-'+i\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                        <ax-label>{{item[textField]}} |  {{isItemSelected(item)}}</ax-label>\r\n                        <ax-form-hint *ngIf=\"item[hintField]\"> {{item[hintField]}} </ax-form-hint>\r\n                    </ax-radio>\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.2.0", ngImport: i0, type: AXSelectionListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-selection-list', inputs: [
                         'disabled',
@@ -5515,10 +5569,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 
 class AXSelectionListModule {
 }
-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, AXRadioModule, AXLabelModule, AXFormModule], exports: [AXSelectionListComponent] });
-AXSelectionListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectionListModule, providers: [], imports: [[CommonModule, FormsModule, AXCheckBoxModule, AXRadioModule, AXLabelModule, AXFormModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectionListModule, decorators: [{
+AXSelectionListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXSelectionListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSelectionListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXSelectionListModule, declarations: [AXSelectionListComponent], imports: [CommonModule, FormsModule, AXCheckBoxModule, AXRadioModule, AXLabelModule, AXFormModule], exports: [AXSelectionListComponent] });
+AXSelectionListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXSelectionListModule, providers: [], imports: [[CommonModule, FormsModule, AXCheckBoxModule, AXRadioModule, AXLabelModule, AXFormModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXSelectionListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXSelectionListComponent],
@@ -5533,9 +5587,9 @@ class AXSideMenuComponent extends AXBaseComponentMixin {
         super(elementRef, cdr);
     }
 }
-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: [{
+AXSideMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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.2.0", ngImport: i0, type: AXSideMenuComponent, decorators: [{
             type: Component,
             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 }]; } });
@@ -5544,10 +5598,10 @@ const COMPONENT$4 = [AXSideMenuComponent];
 const MODULES$4 = [CommonModule];
 class AXSideMenuModule {
 }
-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: [{
+AXSideMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXSideMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSideMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXSideMenuModule, declarations: [AXSideMenuComponent], imports: [CommonModule], exports: [AXSideMenuComponent] });
+AXSideMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXSideMenuModule, providers: [], imports: [[...MODULES$4]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXSideMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$4],
@@ -5571,9 +5625,9 @@ class AXSwitchComponent extends AXBaseValueComponentMixin {
         return this._classes;
     }
 }
-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", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { properties: { "class": "this.__hostClass" } }, 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\r\n -->\r\n\r\n<!-- <label for=\"toggle-example\" class=\"ax-flex ax-items-center ax-cursor-pointer ax-relative ax-mb-4\">\r\n    <input type=\"checkbox\" id=\"toggle-example\" class=\"ax-sr-only\">\r\n    <div class=\"ax-switch ax-bg-gray-200 ax-border-2 ax-border-gray-200 ax-h-6 ax-rounded-full\"></div>\r\n    <span class=\"ax-ml-3 ax-text-gray-900 ax-text-sm ax-font-medium\">Toggle me</span>\r\n  </label> -->\r\n\r\n<label class=\"ax-switch\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    (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: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.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: [{
+AXSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { properties: { "class": "this.__hostClass" } }, 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\r\n -->\r\n\r\n<!-- <label for=\"toggle-example\" class=\"ax-flex ax-items-center ax-cursor-pointer ax-relative ax-mb-4\">\r\n    <input type=\"checkbox\" id=\"toggle-example\" class=\"ax-sr-only\">\r\n    <div class=\"ax-switch ax-bg-gray-200 ax-border-2 ax-border-gray-200 ax-h-6 ax-rounded-full\"></div>\r\n    <span class=\"ax-ml-3 ax-text-gray-900 ax-text-sm ax-font-medium\">Toggle me</span>\r\n  </label> -->\r\n\r\n<label class=\"ax-switch\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    (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: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.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.2.0", ngImport: i0, type: AXSwitchComponent, decorators: [{
             type: Component,
             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\r\n -->\r\n\r\n<!-- <label for=\"toggle-example\" class=\"ax-flex ax-items-center ax-cursor-pointer ax-relative ax-mb-4\">\r\n    <input type=\"checkbox\" id=\"toggle-example\" class=\"ax-sr-only\">\r\n    <div class=\"ax-switch ax-bg-gray-200 ax-border-2 ax-border-gray-200 ax-h-6 ax-rounded-full\"></div>\r\n    <span class=\"ax-ml-3 ax-text-gray-900 ax-text-sm ax-font-medium\">Toggle me</span>\r\n  </label> -->\r\n\r\n<label class=\"ax-switch\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    (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 }]; }, propDecorators: { __hostClass: [{
@@ -5583,10 +5637,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 
 class AXSwitchModule {
 }
-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: [{
+AXSwitchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSwitchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXSwitchModule, declarations: [AXSwitchComponent], imports: [CommonModule, FormsModule], exports: [AXSwitchComponent] });
+AXSwitchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXSwitchModule, providers: [], imports: [[CommonModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXSwitchModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXSwitchComponent],
@@ -5628,8 +5682,8 @@ class AXTabItemComponent extends AXBaseClickableMixin {
         });
     }
 }
-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: ["header"], 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.2.0", 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.2.0", 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: ["header"], 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>
@@ -5647,7 +5701,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: "13.1.1", ngImport: i0, type: AXTabItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXTabItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-tab-item',
@@ -5730,14 +5784,14 @@ class AXTabsComponent extends AXBaseComponent {
         });
     }
 }
-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" }, outputs: { onActiveTabChanged: "onActiveTabChanged" }, queries: [{ propertyName: "_contentTabs", predicate: AXTabItemComponent }], usesInheritance: true, ngImport: i0, template: `
+AXTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", type: AXTabsComponent, selector: "ax-tabs", inputs: { fitParent: "fitParent", minWidth: "minWidth", content: "content" }, outputs: { onActiveTabChanged: "onActiveTabChanged" }, 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: "13.1.1", ngImport: i0, type: AXTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXTabsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-tabs',
@@ -5782,9 +5836,9 @@ class AXTabContentDirective {
         }
     }
 }
-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: [{
+AXTabContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXTabContentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+AXTabContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: AXTabContentDirective, selector: "[axTabContent]", inputs: { portal: ["axTabContent", "portal"] }, exportAs: ["axTabContent"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXTabContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axTabContent]',
@@ -5797,10 +5851,10 @@ const COMPONENT$3 = [AXTabsComponent, AXTabItemComponent, AXTabContentDirective]
 const MODULES$3 = [CommonModule, PortalModule, AXEditorDecoratorModule];
 class AXTabsModule {
 }
-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: [{
+AXTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", ngImport: i0, type: AXTabsModule, providers: [], imports: [[...MODULES$3]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXTabsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$3],
@@ -5907,12 +5961,12 @@ class AXTimeBoxComponent extends AXBaseTextBoxMixin {
         this._emitOnFocusEvent(e);
     }
 }
-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$3.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", checked: "checked", 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: i1$1.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: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.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: [{
+AXTimeBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXTimeBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$4.MaskApplierService }], target: i0.ɵɵFactoryTarget.Component });
+AXTimeBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", 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", checked: "checked", 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<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", directives: [{ type: i1$1.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: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.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.2.0", ngImport: i0, type: AXTimeBoxComponent, decorators: [{
             type: Component,
-            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$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<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$4.MaskApplierService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }], minValue: [{
@@ -5936,12 +5990,12 @@ const MODULES$2 = [
 ];
 class AXTimeBoxModule {
 }
-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,
+AXTimeBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXTimeBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTimeBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXTimeBoxModule, declarations: [AXTimeBoxComponent], imports: [CommonModule,
         FormsModule,
-        AXButtonModule, i1$3.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: [{
+        AXButtonModule, i1$4.NgxMaskModule], exports: [AXTimeBoxComponent] });
+AXTimeBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXTimeBoxModule, providers: [], imports: [[...MODULES$2]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXTimeBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$2],
@@ -5984,9 +6038,9 @@ class AXToastComponent extends AXBaseComponentMixin {
         }
     }
 }
-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: [{
+AXToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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.2.0", ngImport: i0, type: AXToastComponent, decorators: [{
             type: Component,
             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 }]; } });
@@ -5995,10 +6049,10 @@ const COMPONENT$1 = [AXToastComponent];
 const MODULES$1 = [CommonModule, AXButtonModule];
 class AXToastModule {
 }
-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: [{
+AXToastModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXToastModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXToastModule, declarations: [AXToastComponent], imports: [CommonModule, AXButtonModule], exports: [AXToastComponent] });
+AXToastModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXToastModule, providers: [], imports: [[...MODULES$1]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXToastModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$1],
@@ -6110,9 +6164,9 @@ class AXToastService {
         }
     }
 }
-AXToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXToastService, deps: [{ token: i1$2.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: [{
+AXToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXToastService, deps: [{ token: i1$2.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+AXToastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXToastService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXToastService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1$2.Overlay }, { type: i0.Injector }]; } });
@@ -6124,8 +6178,8 @@ class AXTooltipComponent extends AXBaseComponentMixin {
         this.position = 'top';
     }
 }
-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: [
+AXTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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 }),
@@ -6134,7 +6188,7 @@ 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: "13.1.1", ngImport: i0, type: AXTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXTooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-tooltip' }, animations: [
                         trigger('tooltip', [
@@ -6213,9 +6267,9 @@ class AXTooltipDirective {
         this.overlayRef.detach();
     }
 }
-AXTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXTooltipDirective, deps: [{ token: i1$2.Overlay }, { token: i1$2.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: [{
+AXTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXTooltipDirective, deps: [{ token: i1$2.Overlay }, { token: i1$2.OverlayPositionBuilder }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+AXTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", ngImport: i0, type: AXTooltipDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axTooltip]' }]
         }], ctorParameters: function () { return [{ type: i1$2.Overlay }, { type: i1$2.OverlayPositionBuilder }, { type: i0.ElementRef }]; }, propDecorators: { text: [{
@@ -6236,10 +6290,10 @@ const COMPONENT = [AXTooltipComponent, AXTooltipDirective];
 const MODULES = [CommonModule, OverlayModule];
 class AXTooltipModule {
 }
-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: [{
+AXTooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXTooltipModule, declarations: [AXTooltipComponent, AXTooltipDirective], imports: [CommonModule, OverlayModule], exports: [AXTooltipComponent, AXTooltipDirective] });
+AXTooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXTooltipModule, providers: [], imports: [[...MODULES]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXTooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],
@@ -6336,9 +6390,9 @@ class AXValidationRuleComponent extends AXBaseComponentMixin {
         });
     }
 }
-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: [{
+AXValidationRuleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", 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.2.0", 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.2.0", ngImport: i0, type: AXValidationRuleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-validation-rule',
@@ -6372,10 +6426,10 @@ class AXValidationModule {
         });
     }
 }
-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: [{
+AXValidationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXValidationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXValidationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXValidationModule, declarations: [AXValidationRuleComponent], imports: [CommonModule], exports: [AXValidationRuleComponent] });
+AXValidationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXValidationModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AXValidationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXValidationRuleComponent],
@@ -6394,5 +6448,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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, AXDecoratorHeaderComponent, 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, AXTabsComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, TAB_META_KEY, _BaseComponenetMixin };
+export { AXAlertButtonComponent, AXAlertComponent, AXAlertContentComponent, AXAlertFooterComponent, AXAlertModule, AXAlertSuffixComponent, AXAlertTitleComponent, AXAvatarComponent, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDatePickerMixin, AXBaseDropdownMixin, AXBaseItemButtonMixin, AXBasePageComponent, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatePickerComponent, AXDatepickerModule, AXDecoratorAddOnComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent, AXDrawerModule, 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, 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