@acorex/components 5.0.8 → 5.0.9

package/fesm2015/acorex-components.js

@@ -6,21 +6,21 @@ import * as i2 from '@acorex/core';
 import { AXObjectUtil, AXDateTime, AXDateTimeRange, AXDateTimeModule, AXDrawingUtil, AXTranslator, AXConfig } from '@acorex/core';
 import { Subscription, Subject, fromEvent, merge, asyncScheduler, BehaviorSubject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, throttleTime, observeOn, finalize } from 'rxjs/operators';
-import * as i4 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i1$1 from '@angular/cdk/portal';
+import * as i1$2 from '@angular/cdk/portal';
 import { TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import _ from 'lodash';
-import * as i1 from '@angular/cdk/overlay';
+import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayModule, OverlayContainer, Overlay } from '@angular/cdk/overlay';
 import * as i2$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i3$1 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as i2$2 from '@angular/cdk/bidi';
-import * as i1$2 from 'ngx-mask';
+import * as i1$3 from 'ngx-mask';
 import { NgxMaskModule } from 'ngx-mask';
 import { trigger, transition, style, animate } from '@angular/animations';
 
@@ -62,6 +62,7 @@ class AXBaseComponent {
         // this._getInnerElement()?.classList.add(this.rtl ? 'ax-rtl' : 'ax-ltr');
         // this._getHostElement().setAttribute('data-id', this.id);
         this.onInit();
+        this.onRenderCssClass();
     }
     _onInternalViewInit() {
         this.onViewInit();
@@ -71,6 +72,8 @@ class AXBaseComponent {
     }
     onInit() {
     }
+    onRenderCssClass() {
+    }
     onViewInit() {
     }
     onDestroy() {
@@ -392,7 +395,7 @@ function _InteractiveComponenetMixin(Base) {
         constructor(...args) {
             super(...args);
             _disabled.set(this, false);
-            _tabIndex.set(this, 0);
+            _tabIndex.set(this, null);
             /**
             *  Fires each time the component gets focused.
             *  @event
@@ -646,7 +649,7 @@ function _ValueComponenetMixin(Base) {
                 this.onValueChanged = new EventEmitter();
                 this.valueChange = new EventEmitter();
                 _readonly.set(this, false);
-                _allowNull.set(this, true);
+                _allowNull.set(this, false);
                 _name.set(this, void 0);
                 _debounceTime.set(this, 0);
                 _valueSubscription.set(this, new Subscription());
@@ -769,7 +772,7 @@ function _ValueComponenetMixin(Base) {
                     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 label = formField === null || formField === void 0 ? void 0 : formField.querySelector('ax-label');
                 const target = container || this._getInnerElement();
                 const parent = target.parentElement;
                 switch (state) {
@@ -1070,7 +1073,7 @@ class AXAlertComponent extends AXBaseComponentMixin {
 }
 _visible = new WeakMap();
 AXAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXAlertComponent, selector: "ax-alert", inputs: { icon: "icon", color: "color", timeOut: "timeOut", visible: "visible" }, outputs: { typeChange: "typeChange" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-alert ax-none" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-alert-icon\" *ngIf=\"icon\">\r\n    <i class=\"{{icon}} fa-lg\"></i>\r\n</div>\r\n<div class=\"ax-alert-body\">\r\n    <ng-content select=\"ax-alert-title\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-content\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-footer\">\r\n    </ng-content>\r\n</div>\r\n<ng-content select=\"ax-alert-suffix\">\r\n</ng-content>", directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXAlertComponent, selector: "ax-alert", inputs: { icon: "icon", color: "color", timeOut: "timeOut", visible: "visible" }, outputs: { typeChange: "typeChange" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-alert ax-none" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-alert-icon\" *ngIf=\"icon\">\r\n    <i class=\"{{icon}} fa-lg\"></i>\r\n</div>\r\n<div class=\"ax-alert-body\">\r\n    <ng-content select=\"ax-alert-title\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-content\">\r\n    </ng-content>\r\n    <ng-content select=\"ax-alert-footer\">\r\n    </ng-content>\r\n</div>\r\n<ng-content select=\"ax-alert-suffix\">\r\n</ng-content>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertComponent, decorators: [{
             type: Component,
             args: [{
@@ -1134,7 +1137,7 @@ AXAlertButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", v
 AXAlertButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXAlertButtonComponent, selector: "ax-alert-button", inputs: { title: "title", icon: "icon" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange" }, host: { listeners: { "click": "_handleOnClick($event)", "focus": "_handleOnFocus($event)", "blur": "_handleOnBlur($event)" }, classAttribute: "ax-alert-button" }, usesInheritance: true, ngImport: i0, template: `
        {{title}}
        <i *ngIf="icon" class="{{icon}}"></i>
-    `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -1232,7 +1235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 }]
         }] });
 
-const COMPONENT$n = [
+const COMPONENT$o = [
     AXAlertComponent,
     AXAlertContentComponent,
     AXAlertTitleComponent,
@@ -1240,7 +1243,7 @@ const COMPONENT$n = [
     AXAlertFooterComponent,
     AXAlertSuffixComponent
 ];
-const MODULES$n = [CommonModule];
+const MODULES$o = [CommonModule];
 class AXAlertModule {
 }
 AXAlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1255,13 +1258,13 @@ AXAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         AXAlertButtonComponent,
         AXAlertFooterComponent,
         AXAlertSuffixComponent] });
-AXAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertModule, providers: [], imports: [[...MODULES$n]] });
+AXAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertModule, providers: [], imports: [[...MODULES$o]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAlertModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$n],
-                    imports: [...MODULES$n],
-                    exports: [...COMPONENT$n],
+                    declarations: [...COMPONENT$o],
+                    imports: [...MODULES$o],
+                    exports: [...COMPONENT$o],
                     providers: [],
                 }]
         }] });
@@ -1317,19 +1320,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 type: Input
             }] } });
 
-const COMPONENT$m = [AXAvatarComponent];
-const MODULES$m = [CommonModule];
+const COMPONENT$n = [AXAvatarComponent];
+const MODULES$n = [CommonModule];
 class AXAvatarModule {
 }
 AXAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAvatarModule, declarations: [AXAvatarComponent], imports: [CommonModule], exports: [AXAvatarComponent] });
-AXAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAvatarModule, providers: [], imports: [[...MODULES$m]] });
+AXAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAvatarModule, providers: [], imports: [[...MODULES$n]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXAvatarModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$m],
-                    imports: [...MODULES$m],
-                    exports: [...COMPONENT$m],
+                    declarations: [...COMPONENT$n],
+                    imports: [...MODULES$n],
+                    exports: [...COMPONENT$n],
                     providers: [],
                 }]
         }] });
@@ -1342,7 +1345,7 @@ class AXBadgeComponent extends AXBaseComponentMixin {
         //TODO: ax-badge
     }
     get __hostClass() {
-        return [`ax-bg-${this.color}-100`, `ax-text-${this.color}-600`].join(' ');
+        return [`ax-bg-${this.color}-100`, `ax-text-${this.color}-500`].join(' ');
     }
 }
 AXBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBadgeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
@@ -1365,19 +1368,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 args: ['class']
             }] } });
 
-const COMPONENT$l = [AXBadgeComponent];
-const MODULES$l = [CommonModule];
+const COMPONENT$m = [AXBadgeComponent];
+const MODULES$m = [CommonModule];
 class AXBadgeModule {
 }
 AXBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBadgeModule, declarations: [AXBadgeComponent], imports: [CommonModule], exports: [AXBadgeComponent] });
-AXBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBadgeModule, providers: [], imports: [[...MODULES$l]] });
+AXBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBadgeModule, providers: [], imports: [[...MODULES$m]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXBadgeModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$l],
-                    imports: [...MODULES$l],
-                    exports: [...COMPONENT$l],
+                    declarations: [...COMPONENT$m],
+                    imports: [...MODULES$m],
+                    exports: [...COMPONENT$m],
                     providers: [],
                 }]
         }] });
@@ -1421,7 +1424,7 @@ class AXButtonComponent extends AXBaseButtonMixin {
     }
 }
 AXButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXButtonComponent, selector: "ax-button", inputs: { disabled: "disabled", tabIndex: "tabIndex", size: "size", text: "text", submitBehavior: "submitBehavior", cancelBehavior: "cancelBehavior", color: "color", look: "look", toggleable: "toggleable", selected: "selected" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange" }, host: { attributes: { "role": "button" }, listeners: { "document:keydown.escape": "onKeydownHandler($event)", "click": "_emitOnClickEvent($event)", "focus": "_emitOnFocusEvent($event)", "blur": "_emitOnBlurEvent($event)" }, properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<!-- <button [ngClass]=\"_classes\" class=\"{{cssClass}} ax-{{size}}\" [disabled]=\"disabled\" [tabindex]=\"tabIndex\" [attr.style]=\"cssStyle\" (click)=\"_emitOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n  <ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n  </ng-content>\r\n  <span *ngIf=\"text\">{{text}}</span>\r\n  <ng-content select=\"ax-suffix\">\r\n  </ng-content>\r\n  <ng-content select=\"ax-dropdown-panel\">\r\n  </ng-content>\r\n</button> -->\r\n<!-- <button [ngClass]=\"_classes\" class=\"{{cssClass}} ax-{{size}}\" [disabled]=\"disabled\" [tabindex]=\"tabIndex\" [attr.style]=\"cssStyle\" (click)=\"_emitOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\"> -->\r\n<ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n</ng-content>\r\n<span *ngIf=\"text\">{{text}}</span>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-dropdown-panel\">\r\n</ng-content>\r\n<!-- </button> -->", directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXButtonComponent, selector: "ax-button", inputs: { disabled: "disabled", tabIndex: "tabIndex", size: "size", text: "text", submitBehavior: "submitBehavior", cancelBehavior: "cancelBehavior", color: "color", look: "look", toggleable: "toggleable", selected: "selected" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange" }, host: { attributes: { "role": "button" }, listeners: { "document:keydown.escape": "onKeydownHandler($event)", "click": "_emitOnClickEvent($event)", "focus": "_emitOnFocusEvent($event)", "blur": "_emitOnBlurEvent($event)" }, properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<!-- <button [ngClass]=\"_classes\" class=\"{{cssClass}} ax-{{size}}\" [disabled]=\"disabled\" [tabindex]=\"tabIndex\" [attr.style]=\"cssStyle\" (click)=\"_emitOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n  <ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n  </ng-content>\r\n  <span *ngIf=\"text\">{{text}}</span>\r\n  <ng-content select=\"ax-suffix\">\r\n  </ng-content>\r\n  <ng-content select=\"ax-dropdown-panel\">\r\n  </ng-content>\r\n</button> -->\r\n<!-- <button [ngClass]=\"_classes\" class=\"{{cssClass}} ax-{{size}}\" [disabled]=\"disabled\" [tabindex]=\"tabIndex\" [attr.style]=\"cssStyle\" (click)=\"_emitOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\"> -->\r\n<ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n</ng-content>\r\n<span *ngIf=\"text\">{{text}}</span>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-dropdown-panel\">\r\n</ng-content>\r\n<!-- </button> -->", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -1612,7 +1615,7 @@ AXButtonItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         <span *ngIf="text">{{text}}</span>
         <ng-content select="ax-suffix">
         </ng-content>
-    `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -1658,7 +1661,7 @@ class AXDecoratorPrefixComponent extends AXBaseComponentMixin {
     }
 }
 AXDecoratorPrefixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDecoratorPrefixComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDecoratorPrefixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDecoratorPrefixComponent, selector: "ax-prefix", host: { classAttribute: "ax-prefix" }, usesInheritance: true, ngImport: i0, template: `
+AXDecoratorPrefixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDecoratorPrefixComponent, selector: "ax-prefix", usesInheritance: true, ngImport: i0, template: `
         <ng-content select="ax-button,ax-loading,ax-icon,ax-badge">
         </ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -1671,8 +1674,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
         </ng-content>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-prefix' }
+                    encapsulation: ViewEncapsulation.None
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
@@ -1682,7 +1684,7 @@ class AXDecoratorSuffixComponent extends AXBaseComponentMixin {
     }
 }
 AXDecoratorSuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDecoratorSuffixComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDecoratorSuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDecoratorSuffixComponent, selector: "ax-suffix", host: { classAttribute: "ax-suffix" }, usesInheritance: true, ngImport: i0, template: `
+AXDecoratorSuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDecoratorSuffixComponent, selector: "ax-suffix", usesInheritance: true, ngImport: i0, template: `
         <ng-content select="ax-button,ax-icon,ax-badge">
         </ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -1693,26 +1695,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                     template: `
         <ng-content select="ax-button,ax-icon,ax-badge">
         </ng-content>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+
+class AXDecoratorContentComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+    }
+}
+AXDecoratorContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDecoratorContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXDecoratorContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDecoratorContentComponent, selector: "ax-content", usesInheritance: true, ngImport: i0, template: `
+        <ng-content>
+        </ng-content>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDecoratorContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-content',
+                    template: `
+        <ng-content>
+        </ng-content>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-suffix' }
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-const COMPONENT$k = [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent];
-const MODULES$k = [CommonModule];
+const COMPONENT$l = [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent];
+const MODULES$l = [CommonModule];
 class AXEditorDecoratorModule {
 }
 AXEditorDecoratorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXEditorDecoratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXEditorDecoratorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXEditorDecoratorModule, declarations: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent], imports: [CommonModule], exports: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent] });
-AXEditorDecoratorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXEditorDecoratorModule, providers: [], imports: [[...MODULES$k]] });
+AXEditorDecoratorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXEditorDecoratorModule, declarations: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent], imports: [CommonModule], exports: [AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorContentComponent] });
+AXEditorDecoratorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXEditorDecoratorModule, providers: [], imports: [[...MODULES$l]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXEditorDecoratorModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$k],
-                    imports: [...MODULES$k],
-                    exports: [...COMPONENT$k],
+                    declarations: [...COMPONENT$l],
+                    imports: [...MODULES$l],
+                    exports: [...COMPONENT$l],
                     providers: [],
                 }]
         }] });
@@ -1742,29 +1766,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 args: ['class']
             }] } });
 
-const COMPONENT$j = [AXIconComponent];
-const MODULES$j = [CommonModule];
+const COMPONENT$k = [AXIconComponent];
+const MODULES$k = [CommonModule];
 class AXIconModule {
 }
 AXIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXIconModule, declarations: [AXIconComponent], imports: [CommonModule], exports: [AXIconComponent] });
-AXIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXIconModule, providers: [], imports: [[...MODULES$j]] });
+AXIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXIconModule, providers: [], imports: [[...MODULES$k]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXIconModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$j],
-                    imports: [...MODULES$j],
-                    exports: [...COMPONENT$j],
+                    declarations: [...COMPONENT$k],
+                    imports: [...MODULES$k],
+                    exports: [...COMPONENT$k],
                     providers: [],
                 }]
         }] });
 
-const COMPONENT$i = [
+const COMPONENT$j = [
     AXButtonComponent,
     AXButtonItemComponent,
     AXButtonGroupComponent,
 ];
-const MODULES$i = [CommonModule, AXIconModule, AXEditorDecoratorModule];
+const MODULES$j = [CommonModule, AXIconModule, AXEditorDecoratorModule];
 class AXButtonModule {
 }
 AXButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1773,13 +1797,13 @@ AXButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         AXButtonGroupComponent], imports: [CommonModule, AXIconModule, AXEditorDecoratorModule], exports: [AXButtonComponent,
         AXButtonItemComponent,
         AXButtonGroupComponent] });
-AXButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonModule, providers: [], imports: [[MODULES$i]] });
+AXButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonModule, providers: [], imports: [[MODULES$j]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXButtonModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [MODULES$i],
-                    exports: [COMPONENT$i],
-                    declarations: [COMPONENT$i],
+                    imports: [MODULES$j],
+                    exports: [COMPONENT$j],
+                    declarations: [COMPONENT$j],
                     providers: [],
                 }]
         }] });
@@ -1806,7 +1830,7 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
                 return new AXDateTimeRange(AXDateTime.convert(new Date(min, 0), this._today.calendar.name()), AXDateTime.convert(new Date(max, 0), this._today.calendar.name()));
             case 'months':
                 //TODO: check add month function
-                return new AXDateTimeRange(current.startOf('year'), current.endOf('year').add('month', 4).add('day', -1));
+                return new AXDateTimeRange(current.startOf('year'), current.endOf('year').add('day', -1));
             default:
                 //return new AXDateTimeRange(current.startOf('month').startOf('week'), current.endOf('month').endOf('week'));
                 return new AXDateTimeRange(current.startOf('month'), current.endOf('month'));
@@ -2031,7 +2055,7 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
     }
 }
 AXCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXCalendarComponent, selector: "ax-calendar", inputs: { readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", disabled: "disabled", tabIndex: "tabIndex", activeView: "activeView", depth: "depth", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-header\">\r\n    <ax-button class=\"ax-nav-button\" [text]=\"_navText\" color=\"light\" look=\"blank\" (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n    </ax-button>\r\n    <ax-button class=\"ax-prev-button\" color=\"light\" look=\"blank\" (onClick)=\"_handlePrevClick($event)\" [disabled]=\"disabled\">\r\n        <ax-prefix>\r\n            <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax-rotate-90\"></ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button class=\"ax-next-button\" color=\"light\" look=\"blank\" (onClick)=\"_handleNextClick($event)\" [disabled]=\"disabled\">\r\n        <ax-prefix>\r\n            <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div>\r\n<div class=\"ax-calendar-body\">\r\n    <div [ngSwitch]=\"activeView\">\r\n        <ng-container *ngSwitchCase=\"'years'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [ngClass]=\"slot.cssClass\" \r\n                    (click)=\"_handleSlotClick(slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'months'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\" \r\n                    (click)=\"_handleSlotClick(slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n            <div class=\"ax-calendar-week\">\r\n                <div>SU</div>\r\n                <div>MO</div>\r\n                <div>TU</div>\r\n                <div>WE</div>\r\n                <div>TH</div>\r\n                <div>FR</div>\r\n                <div>SA</div>\r\n            </div>\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\"  [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick(slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-footer\">\r\n    <ax-button [text]=\"_todayText\" color=\"dark\" look=\"blank\" size=\"sm\" (onClick)=\"_handleGoToday()\" [disabled]=\"disabled\"></ax-button>\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXCalendarComponent, selector: "ax-calendar", inputs: { readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", disabled: "disabled", tabIndex: "tabIndex", activeView: "activeView", depth: "depth", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-header\">\r\n    <ax-button class=\"ax-nav-button\" [text]=\"_navText\" color=\"light\" look=\"blank\" (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n    </ax-button>\r\n    <ax-button class=\"ax-prev-button\" color=\"light\" look=\"blank\" (onClick)=\"_handlePrevClick($event)\" [disabled]=\"disabled\">\r\n        <ax-prefix>\r\n            <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax-rotate-90\"></ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button class=\"ax-next-button\" color=\"light\" look=\"blank\" (onClick)=\"_handleNextClick($event)\" [disabled]=\"disabled\">\r\n        <ax-prefix>\r\n            <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div>\r\n<div class=\"ax-calendar-body\">\r\n    <div [ngSwitch]=\"activeView\">\r\n        <ng-container *ngSwitchCase=\"'years'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [ngClass]=\"slot.cssClass\" \r\n                    (click)=\"_handleSlotClick(slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'months'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\" \r\n                    (click)=\"_handleSlotClick(slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n            <div class=\"ax-calendar-week\">\r\n                <div>SU</div>\r\n                <div>MO</div>\r\n                <div>TU</div>\r\n                <div>WE</div>\r\n                <div>TH</div>\r\n                <div>FR</div>\r\n                <div>SA</div>\r\n            </div>\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\"  [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick(slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-footer\">\r\n    <ax-button [text]=\"_todayText\" color=\"dark\" look=\"blank\" size=\"sm\" (onClick)=\"_handleGoToday()\" [disabled]=\"disabled\"></ax-button>\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarComponent, decorators: [{
             type: Component,
             args: [{
@@ -2061,19 +2085,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 args: ['class']
             }] } });
 
-const COMPONENT$h = [AXCalendarComponent];
-const MODULES$h = [CommonModule, AXButtonModule, AXIconModule, AXEditorDecoratorModule, AXDateTimeModule];
+const COMPONENT$i = [AXCalendarComponent];
+const MODULES$i = [CommonModule, AXButtonModule, AXIconModule, AXEditorDecoratorModule, AXDateTimeModule];
 class AXCalendarModule {
 }
 AXCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent], imports: [CommonModule, AXButtonModule, AXIconModule, AXEditorDecoratorModule, AXDateTimeModule], exports: [AXCalendarComponent] });
-AXCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarModule, providers: [], imports: [[...MODULES$h]] });
+AXCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarModule, providers: [], imports: [[...MODULES$i]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCalendarModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$h],
-                    imports: [...MODULES$h],
-                    exports: [...COMPONENT$h],
+                    declarations: [...COMPONENT$i],
+                    imports: [...MODULES$i],
+                    exports: [...COMPONENT$i],
                     providers: [],
                 }]
         }] });
@@ -2528,7 +2552,7 @@ AXCarouselPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 AXCarouselPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXCarouselPagerComponent, selector: "ax-carousel-pager", host: { classAttribute: "ax-carousel-pager" }, usesInheritance: true, ngImport: i0, template: `
         <button  *ngFor="let d of _dots;let i=index" [class.ax-state-active]="i==_pageIndex" (click)="_handleClick($event,i)">
         </button>
-    `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselPagerComponent, decorators: [{
             type: Component,
             args: [{
@@ -2543,14 +2567,145 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXCarouselComponent }]; } });
 
-const COMPONENT$g = [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent];
-const MODULES$g = [CommonModule];
+const COMPONENT$h = [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent];
+const MODULES$h = [CommonModule];
 class AXCarouselModule {
 }
 AXCarouselModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXCarouselModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselModule, declarations: [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent], imports: [CommonModule], exports: [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent] });
-AXCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselModule, providers: [], imports: [[...MODULES$g]] });
+AXCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselModule, providers: [], imports: [[...MODULES$h]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCarouselModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT$h],
+                    imports: [...MODULES$h],
+                    exports: [...COMPONENT$h],
+                    providers: [],
+                }]
+        }] });
+
+class AXFormFieldComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+    }
+}
+AXFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXFormFieldComponent, selector: "ax-form-field", usesInheritance: true, ngImport: i0, template: '<div class="ax-form-field"><ng-content></ng-content></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-form-field',
+                    template: '<div class="ax-form-field"><ng-content></ng-content></div>',
+                    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: "12.2.6", ngImport: i0, type: AXFormHintComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXFormHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXFormHintComponent, selector: "ax-form-hint", usesInheritance: true, ngImport: i0, template: ' <p class="ax-text-gray-400 ax-text-xs ax-py-1"><ng-content></ng-content></p>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormHintComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-form-hint',
+                    template: ' <p class="ax-text-gray-400 ax-text-xs ax-py-1"><ng-content></ng-content></p>',
+                    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: "12.2.6", ngImport: i0, type: AXFormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXFormComponent, selector: "ax-form", usesInheritance: true, ngImport: i0, template: '<div class="ax-form"><ng-content></ng-content></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormComponent, decorators: [{
+            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: "12.2.6", ngImport: i0, type: AXFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormModule, declarations: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent], imports: [CommonModule], exports: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent] });
+AXFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormModule, decorators: [{
+            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: "12.2.6", ngImport: i0, type: AXLabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXLabelComponent, selector: "ax-label", usesInheritance: true, ngImport: i0, template: "<label>\r\n    <ng-content></ng-content>\r\n</label>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-label',
+                    templateUrl: './label.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+
+const COMPONENT$g = [AXLabelComponent];
+const MODULES$g = [CommonModule];
+class AXLabelModule {
+}
+AXLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelModule, declarations: [AXLabelComponent], imports: [CommonModule], exports: [AXLabelComponent] });
+AXLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelModule, providers: [], imports: [[...MODULES$g]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$g],
@@ -2563,37 +2718,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
 class AXCheckBoxComponent extends AXBaseValueComponentMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
-        //TODO: apply it
-        this.indeterminate = false;
-        this._id = `ax-checkbox-${Math.floor(Math.random() * 1000)}`;
     }
     onInit() {
         super.onInit();
-        if (!this.indeterminate && this.value == null) {
+        debugger;
+        if (!this.allowNull && this.value == null) {
             this.value = false;
         }
     }
+    _onValueChanging(value) {
+        debugger;
+        if (this.allowNull && value == null) {
+            this._stateIndeterminate = true;
+        }
+        else {
+            this._stateIndeterminate = false;
+            value = value == true ? true : false;
+        }
+        return value;
+    }
     _handleOnClickEvent(e) {
+        debugger;
         if (this.readonly || this.disabled) {
             e.preventDefault();
             e.stopPropagation();
+            return false;
         }
     }
 }
 AXCheckBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCheckBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXCheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", indeterminate: "indeterminate" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-items-start ax-checkbox-container\">\r\n    <div class=\"ax-flex ax-items-center ax-h-5\">\r\n        <input [id]=\"_id\" class=\"ax-checkbox\" type=\"checkbox\" [(ngModel)]=\"value\" [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    </div>\r\n    <div class=\"ax-ms-2 ax-text-sm ax-flex ax-flex-col\">\r\n        <label [for]=\"_id\" class=\"ax-font-medium ax-text-light-700\">\r\n            <ng-content></ng-content><br>\r\n        </label>\r\n    </div>\r\n    <!-- <div class=\"ax-ms-3 ax-text-sm\">\r\n     \r\n    </div> -->\r\n</div>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", directives: [{ type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXCheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, queries: [{ propertyName: "_hint", predicate: AXFormHintComponent }, { propertyName: "_label", predicate: AXLabelComponent }], usesInheritance: true, ngImport: i0, template: "<!-- <div class=\"ax-wrapper ax-flex ax-flex-row \" [class.ax-items-center]=\"_hint.length==0\"\r\n    [class.ax-items-start]=\"_hint.length>=0\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"disabled\">\r\n    <input [id]=\"id\" type=\"checkbox\" [indeterminate]=\"_stateIndeterminate\" [(ngModel)]=\"value\" [checked]=\"value\"\r\n        [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\"\r\n        (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n    <div class=\"ax-suffix ax-ms-3\" *ngIf=\"_label.length||_hint.length\">\r\n        <div *ngIf=\"_label.length\">\r\n            <ng-content select=\"ax-label\"></ng-content>\r\n        </div>\r\n        <div *ngIf=\"_hint.length\">\r\n            <ng-content select=\"ax-form-hint\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div> -->\r\n\r\n<div class=\"ax-flex ax-items-start\">\r\n    <div class=\"ax-flex ax-items-center ax-h-5\">\r\n        <input [id]=\"id\" class=\"ax-h-4 ax-w-4\" type=\"checkbox\" [indeterminate]=\"_stateIndeterminate\" [(ngModel)]=\"value\" [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\"\r\n            (blur)=\"_emitOnBlurEvent($event)\">\r\n    </div>\r\n    <div class=\"ax-ms-3 ax-text-sm\">\r\n        <ng-content select=\"ax-label\"></ng-content>\r\n        <ng-content select=\"ax-form-hint\"></ng-content>\r\n    </div>\r\n</div>\r\n\r\n<ng-content select=\"ax-validation-rule\"></ng-content>", directives: [{ type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXCheckBoxComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-check-box',
                     templateUrl: './checkbox.component.html',
-                    inputs: ['disabled', 'readonly', 'tabIndex', 'size', 'value'],
-                    outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus'],
+                    inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS],
+                    outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { indeterminate: [{
-                type: Input
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _hint: [{
+                type: ContentChildren,
+                args: [AXFormHintComponent]
+            }], _label: [{
+                type: ContentChildren,
+                args: [AXLabelComponent]
             }] } });
 
 class AXCheckBoxModule {
@@ -2656,7 +2826,7 @@ class AXDataListComponent extends AXBaseSelectionValueMixin {
     }
 }
 AXDataListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDataListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDataListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDataListComponent, selector: "ax-datalist", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", items: "items", pageSize: "pageSize", itemTemplate: "itemTemplate", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-list ax-list-container" }, queries: [{ propertyName: "_contentItemTemplate", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true, static: true }, { propertyName: "_contentloadingTemplate", first: true, predicate: ["loadingTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-list-items-container ax-default ax-vertical\" (scroll)=\"_handleListScroll($event)\" #container>\r\n    <ng-container *ngFor=\"let item of displayItems;trackBy : _trackByFunction\">\r\n        <ng-container *ngIf=\"itemTemplate; else elseTemplate\">\r\n            <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                {{ item ? _getItemDisplayTextTemplte(item) : 'Loading...'}}\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            Empty!\r\n        </ng-template>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isLoading\">\r\n        <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #elseLoadingTemplate>\r\n            <div class=\"ax-list-loading-container\">\r\n                <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n</div>", directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXDataListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDataListComponent, selector: "ax-datalist", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", items: "items", pageSize: "pageSize", itemTemplate: "itemTemplate", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-list ax-list-container" }, queries: [{ propertyName: "_contentItemTemplate", first: true, predicate: ["itemTemplate"], descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true, static: true }, { propertyName: "_contentloadingTemplate", first: true, predicate: ["loadingTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-list-items-container ax-default ax-vertical\" (scroll)=\"_handleListScroll($event)\" #container>\r\n    <ng-container *ngFor=\"let item of displayItems;trackBy : _trackByFunction\">\r\n        <ng-container *ngIf=\"itemTemplate; else elseTemplate\">\r\n            <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                {{ item ? _getItemDisplayTextTemplte(item) : 'Loading...'}}\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            Empty!\r\n        </ng-template>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isLoading\">\r\n        <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #elseLoadingTemplate>\r\n            <div class=\"ax-list-loading-container\">\r\n                <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n</div>", directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDataListComponent, decorators: [{
             type: Component,
             args: [{
@@ -2885,7 +3055,7 @@ class AXPopoverComponent extends AXBaseComponent {
         this._subs.push(sub);
     }
 }
-AXPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.Overlay }, { token: i2.AXPlatform }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+AXPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$1.Overlay }, { token: i2.AXPlatform }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
 AXPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXPopoverComponent, selector: "ax-popover", inputs: { target: "target", position: "position", openTrigger: "openTrigger", closeTrigger: "closeTrigger", hasBackdrop: "hasBackdrop", backdropClass: "backdropClass" }, host: { listeners: { "document:keydown": "_handleKeydownHandler($event)" } }, viewQueries: [{ propertyName: "_baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #baseTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopoverComponent, decorators: [{
             type: Component,
@@ -2895,7 +3065,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.Overlay }, { type: i2.AXPlatform }, { type: i0.ViewContainerRef }]; }, propDecorators: { target: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$1.Overlay }, { type: i2.AXPlatform }, { type: i0.ViewContainerRef }]; }, propDecorators: { target: [{
                 type: Input
             }], position: [{
                 type: Input
@@ -3169,7 +3339,7 @@ class AXDropdownPanelComponent extends AXBaseDropDownComponent {
     }
 }
 AXDropdownPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownPanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXButtonComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AXDropdownPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: { items: "items" }, outputs: { onItemClick: "onItemClick" }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonItemComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }, { propertyName: "_viewButtons", predicate: AXButtonItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'toggle'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-dropdown-list]=\"_needBorder\" >\r\n        <ng-container *ngIf=\"items && items.length;else panelTpl\">\r\n            <ax-button-item [text]=\"item.text\" [color]=\"item.color\" *ngFor=\"let item of items\">\r\n                <ax-prefix *ngIf=\"item.iconClass\">\r\n                    <ax-icon [icon]=\"item.iconClass\"></ax-icon>\r\n                </ax-prefix>\r\n            </ax-button-item>\r\n        </ng-container>\r\n        <ng-template #panelTpl>\r\n            <ng-content select=\"[panel],ax-button-item\">\r\n            </ng-content>\r\n        </ng-template>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"] }, { type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["text", "tooltip", "selected", "seperated", "name", "data", "color"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXDropdownPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: { items: "items" }, outputs: { onItemClick: "onItemClick" }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonItemComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }, { propertyName: "_viewButtons", predicate: AXButtonItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'toggle'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-dropdown-list]=\"_needBorder\" >\r\n        <ng-container *ngIf=\"items && items.length;else panelTpl\">\r\n            <ax-button-item [text]=\"item.text\" [color]=\"item.color\" *ngFor=\"let item of items\">\r\n                <ax-prefix *ngIf=\"item.iconClass\">\r\n                    <ax-icon [icon]=\"item.iconClass\"></ax-icon>\r\n                </ax-prefix>\r\n            </ax-button-item>\r\n        </ng-container>\r\n        <ng-template #panelTpl>\r\n            <ng-content select=\"[panel],ax-button-item\">\r\n            </ng-content>\r\n        </ng-template>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"] }, { type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["text", "tooltip", "selected", "seperated", "name", "data", "color"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDropdownPanelComponent, decorators: [{
             type: Component,
             args: [{
@@ -3254,7 +3424,7 @@ class AXDialogComponent extends AXBaseComponentMixin {
     }
 }
 AXDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDialogComponent, selector: "ax-dialog", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-dialog ax-{{options.type}}\" tabindex=\"0\" cdkDrag role=\"alert\" cdkDragHandle>\r\n        <div class=\"ax-dialog-icon-side\">\r\n            <i class=\"ax-dialog-icon {{_icon}}\"></i>\r\n        </div>\r\n        <div class=\"ax-dialog-content-side\">\r\n            <div class=\"ax-dialog-title\">{{options.title}}</div>\r\n            <div class=\"ax-dialog-content\">{{options.content}}</div>\r\n        </div>\r\n        <div class=\"ax-dialog-dismiss-icon\">\r\n            <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.dismissible\" (click)=\"close()\"></i>\r\n        </div>\r\n\r\n        <footer class=\"ax-dialog-footer\">\r\n            <ng-container *ngFor=\"let button of options.buttons\">\r\n                <ax-button [text]=\"button.text\"  [submitBehavior]=\"button.submitBehavior\" [cancelBehavior]=\"button.cancelBehavior\" (onClick)=\"_handleButtonClick(button)\" [class]=\"button.cssClass\" [look]=\"button.look\" [color]=\"button.color\"></ax-button>\r\n                <div class=\"ax-ml-2\"></div>\r\n            </ng-container>\r\n        </footer>\r\n    </div>\r\n\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXDialogComponent, selector: "ax-dialog", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-dialog ax-{{options.type}}\" tabindex=\"0\" cdkDrag role=\"alert\" cdkDragHandle>\r\n        <div class=\"ax-dialog-icon-side\">\r\n            <i class=\"ax-dialog-icon {{_icon}}\"></i>\r\n        </div>\r\n        <div class=\"ax-dialog-content-side\">\r\n            <div class=\"ax-dialog-title\">{{options.title}}</div>\r\n            <div class=\"ax-dialog-content\">{{options.content}}</div>\r\n        </div>\r\n        <div class=\"ax-dialog-dismiss-icon\">\r\n            <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.dismissible\" (click)=\"close()\"></i>\r\n        </div>\r\n        <footer class=\"ax-dialog-footer\">\r\n            <ng-container *ngFor=\"let button of options.buttons\">\r\n                <ax-button [text]=\"button.text\"  [submitBehavior]=\"button.submitBehavior\" [cancelBehavior]=\"button.cancelBehavior\" (onClick)=\"_handleButtonClick(button)\" [class]=\"button.cssClass\" [look]=\"button.look\" [color]=\"button.color\"></ax-button>\r\n                <div class=\"ax-ml-2\"></div>\r\n            </ng-container>\r\n        </footer>\r\n    </div>\r\n\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -3398,12 +3568,12 @@ class AXDialogService {
         };
     }
 }
-AXDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogService, deps: [{ token: i1.Overlay }, { token: i0.Injector }, { token: i1.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Injectable });
+AXDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }, { token: i1$1.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Injectable });
 AXDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.Injector }, { type: i1.ScrollStrategyOptions }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.Injector }, { type: i1$1.ScrollStrategyOptions }]; } });
 
 class AXLoadingComponent extends AXBaseComponentMixin {
     /**
@@ -3433,7 +3603,7 @@ class AXLoadingComponent extends AXBaseComponentMixin {
 AXLoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 AXLoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXLoadingComponent, selector: "ax-loading", inputs: { visible: "visible", type: "type" }, outputs: { visibleChange: "visibleChange" }, host: { classAttribute: "ax-loading" }, usesInheritance: true, ngImport: i0, template: `
         <ng-template [cdkPortalOutlet]="_selectedPortal" ></ng-template>
-    `, isInline: true, directives: [{ type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, directives: [{ type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLoadingComponent, decorators: [{
             type: Component,
             args: [{
@@ -3601,17 +3771,17 @@ class DynamicOverlay extends Overlay {
         return super.create(config);
     }
 }
-DynamicOverlay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DynamicOverlay, deps: [{ token: i1.ScrollStrategyOptions }, { token: DynamicOverlayContainer }, { token: i0.ComponentFactoryResolver }, { token: i1.OverlayPositionBuilder }, { token: i1.OverlayKeyboardDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i2$2.Directionality }, { token: i0.RendererFactory2 }, { token: i4.Location }, { token: i1.OverlayOutsideClickDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
+DynamicOverlay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DynamicOverlay, deps: [{ token: i1$1.ScrollStrategyOptions }, { token: DynamicOverlayContainer }, { token: i0.ComponentFactoryResolver }, { token: i1$1.OverlayPositionBuilder }, { token: i1$1.OverlayKeyboardDispatcher }, { token: i0.Injector }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i2$2.Directionality }, { token: i0.RendererFactory2 }, { token: i1.Location }, { token: i1$1.OverlayOutsideClickDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
 DynamicOverlay.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DynamicOverlay, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DynamicOverlay, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ScrollStrategyOptions }, { type: DynamicOverlayContainer }, { type: i0.ComponentFactoryResolver }, { type: i1.OverlayPositionBuilder }, { type: i1.OverlayKeyboardDispatcher }, { type: i0.Injector }, { type: i0.NgZone }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.ScrollStrategyOptions }, { type: DynamicOverlayContainer }, { type: i0.ComponentFactoryResolver }, { type: i1$1.OverlayPositionBuilder }, { type: i1$1.OverlayKeyboardDispatcher }, { type: i0.Injector }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i2$2.Directionality }, { type: i0.RendererFactory2 }, { type: i4.Location }, { type: i1.OverlayOutsideClickDispatcher }]; } });
+                }] }, { type: i2$2.Directionality }, { type: i0.RendererFactory2 }, { type: i1.Location }, { type: i1$1.OverlayOutsideClickDispatcher }]; } });
 
 class AXOverlayService {
     constructor(overlayService, overlayService2, appRef) {
@@ -3691,12 +3861,12 @@ class AXOverlayService {
         };
     }
 }
-AXOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXOverlayService, deps: [{ token: DynamicOverlay }, { token: i1.Overlay }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
+AXOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXOverlayService, deps: [{ token: DynamicOverlay }, { token: i1$1.Overlay }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
 AXOverlayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXOverlayService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXOverlayService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: DynamicOverlay }, { type: i1.Overlay }, { type: i0.ApplicationRef }]; } });
+        }], ctorParameters: function () { return [{ type: DynamicOverlay }, { type: i1$1.Overlay }, { type: i0.ApplicationRef }]; } });
 
 const DEFAULT_LOADER_ID = '_DEFAULT';
 /**
@@ -3880,24 +4050,20 @@ class AXPageFooterComponent {
 }
 AXPageFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 AXPageFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXPageFooterComponent, selector: "ax-page-footer", viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
-       <ng-template>
-            <ng-content select="ax-prefix">
+           <ng-content select="ax-prefix">
             </ng-content>
             <ng-content select="ax-suffix">
             </ng-content>
-       </ng-template>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPageFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-page-footer',
                     template: `
-       <ng-template>
-            <ng-content select="ax-prefix">
+           <ng-content select="ax-prefix">
             </ng-content>
             <ng-content select="ax-suffix">
             </ng-content>
-       </ng-template>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
@@ -3938,6 +4104,7 @@ class AXBasePageComponent {
         return this._isLoading;
     }
     set isLoading(v) {
+        debugger;
         this._isLoading = v;
         if (this.pageContainer) {
             this.pageContainer.isLoading = this.isLoading;
@@ -4251,103 +4418,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 }]
         }] });
 
-class AXFormFieldComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-}
-AXFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXFormFieldComponent, selector: "ax-form-field", usesInheritance: true, ngImport: i0, template: '<div class="ax-form-field"><ng-content></ng-content></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormFieldComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-form-field',
-                    template: '<div class="ax-form-field"><ng-content></ng-content></div>',
-                    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: "12.2.6", ngImport: i0, type: AXFormHintComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXFormHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXFormHintComponent, selector: "ax-form-hint", usesInheritance: true, ngImport: i0, template: ' <p class="ax-text-gray-400 ax-text-xs ax-py-1"><ng-content></ng-content></p>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormHintComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-form-hint',
-                    template: ' <p class="ax-text-gray-400 ax-text-xs ax-py-1"><ng-content></ng-content></p>',
-                    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: "12.2.6", ngImport: i0, type: AXFormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXFormComponent, selector: "ax-form", usesInheritance: true, ngImport: i0, template: '<div class="ax-form"><ng-content></ng-content></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormComponent, decorators: [{
-            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: "12.2.6", ngImport: i0, type: AXFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormModule, declarations: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent], imports: [CommonModule], exports: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent] });
-AXFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXFormModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    exports: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent],
-                    declarations: [AXFormFieldComponent, AXFormComponent, AXFormHintComponent],
-                    providers: [],
-                }]
-        }] });
-
 class AXInputMaskComponent {
     constructor() {
         this.showMaskTyped = false;
@@ -4393,7 +4463,7 @@ const MODULES$a = [CommonModule, NgxMaskModule.forRoot()];
 class AXInputMaskModule {
 }
 AXInputMaskModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXInputMaskModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskModule, declarations: [AXInputMaskComponent], imports: [CommonModule, i1$2.NgxMaskModule], exports: [AXInputMaskComponent] });
+AXInputMaskModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskModule, declarations: [AXInputMaskComponent], imports: [CommonModule, i1$3.NgxMaskModule], exports: [AXInputMaskComponent] });
 AXInputMaskModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskModule, providers: [], imports: [[...MODULES$a]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXInputMaskModule, decorators: [{
             type: NgModule,
@@ -4405,40 +4475,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 }]
         }] });
 
-class AXLabelComponent extends AXSizableComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-}
-AXLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXLabelComponent, selector: "ax-label", usesInheritance: true, ngImport: i0, template: "<label class=\"ax-label {{size}}\">\r\n    <ng-content></ng-content>\r\n</label>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ax-label',
-                    templateUrl: './label.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
-
-const COMPONENT$9 = [AXLabelComponent];
-const MODULES$9 = [CommonModule];
-class AXLabelModule {
-}
-AXLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelModule, declarations: [AXLabelComponent], imports: [CommonModule], exports: [AXLabelComponent] });
-AXLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelModule, providers: [], imports: [[...MODULES$9]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXLabelModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...COMPONENT$9],
-                    imports: [...MODULES$9],
-                    exports: [...COMPONENT$9],
-                    providers: [],
-                }]
-        }] });
-
 /**
  * The NumberBox is a component which detects user interaction and triggers a corresponding event
  *
@@ -4669,8 +4705,8 @@ class AXNumberBoxComponent extends AXBaseTextBoxMixin {
         this._emitOnFocusEvent(e);
     }
 }
-AXNumberBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.MaskApplierService }], target: i0.ɵɵFactoryTarget.Component });
-AXNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", name: "name", separator: "separator", thousandSeparator: "thousandSeparator", step: "step", scale: "scale", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue", displayText: "displayText" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", displayTextChange: "displayTextChange" }, host: { properties: { "class": "this.__hostClass" }, classAttribute: "ax-number-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\" [attr.pattern]=\"'[\\d\\.]*'\" [attr.placeholder]=\"placeholder\" [attr.min]=\"minValue\"\r\n    [attr.max]=\"maxValue\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"displayText\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_handleOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\"\r\n    autocomplete=\"off\">\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && allowNull && !(disabled || readonly)\">\r\n    <i class=\"ax-icon-x icon\"></i>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXNumberBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.MaskApplierService }], target: i0.ɵɵFactoryTarget.Component });
+AXNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", name: "name", separator: "separator", thousandSeparator: "thousandSeparator", step: "step", scale: "scale", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue", displayText: "displayText" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", displayTextChange: "displayTextChange" }, host: { properties: { "class": "this.__hostClass" }, classAttribute: "ax-number-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\" [attr.pattern]=\"'[\\d\\.]*'\" [attr.placeholder]=\"placeholder\" [attr.min]=\"minValue\"\r\n    [attr.max]=\"maxValue\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"displayText\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_handleOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\"\r\n    autocomplete=\"off\">\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && allowNull && !(disabled || readonly)\">\r\n    <i class=\"ax-icon-x icon\"></i>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -4695,7 +4731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     host: { class: 'ax-number-box ax-editor-container' },
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.MaskApplierService }]; }, propDecorators: { __hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.MaskApplierService }]; }, propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }], separator: [{
@@ -4720,8 +4756,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 type: Input
             }] } });
 
-const COMPONENT$8 = [AXNumberBoxComponent];
-const MODULES$8 = [
+const COMPONENT$9 = [AXNumberBoxComponent];
+const MODULES$9 = [
     CommonModule,
     FormsModule,
     AXButtonModule,
@@ -4732,14 +4768,14 @@ class AXNumberBoxModule {
 AXNumberBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXNumberBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxModule, declarations: [AXNumberBoxComponent], imports: [CommonModule,
         FormsModule,
-        AXButtonModule, i1$2.NgxMaskModule], exports: [AXNumberBoxComponent] });
-AXNumberBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxModule, providers: [], imports: [[...MODULES$8]] });
+        AXButtonModule, i1$3.NgxMaskModule], exports: [AXNumberBoxComponent] });
+AXNumberBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxModule, providers: [], imports: [[...MODULES$9]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXNumberBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$8],
-                    imports: [...MODULES$8],
-                    exports: [...COMPONENT$8],
+                    declarations: [...COMPONENT$9],
+                    imports: [...MODULES$9],
+                    exports: [...COMPONENT$9],
                     providers: [],
                 }]
         }] });
@@ -4777,7 +4813,7 @@ class AXPasswordBoxComponent extends AXBaseTextBoxMixin {
     }
 }
 AXPasswordBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPasswordBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXPasswordBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXPasswordBoxComponent, selector: "ax-password-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", cssClass: "cssClass", size: "size", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", value: "value", name: "name", showToggleButton: "showToggleButton" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-password-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [type]=\"_type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n    [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete ? 'on': 'off'\">\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"clear()\" [tabIndex]=\"-1\" *ngIf=\"value && allowNull &&  !(disabled || readonly)\">\r\n    <ax-prefix>\r\n        <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n    </ax-prefix>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"toggleType()\" [tabIndex]=\"-1\" *ngIf=\"showToggleButton\">\r\n    <ax-icon [icon]=\"_icon\"></ax-icon>\r\n</ax-button>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXPasswordBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXPasswordBoxComponent, selector: "ax-password-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", cssClass: "cssClass", size: "size", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", value: "value", name: "name", showToggleButton: "showToggleButton" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-password-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [type]=\"_type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n    [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\" [attr.autocomplete]=\"autoComplete ? 'on': 'off'\">\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"clear()\" [tabIndex]=\"-1\" *ngIf=\"value && allowNull &&  !(disabled || readonly)\">\r\n    <ax-prefix>\r\n        <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n    </ax-prefix>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"toggleType()\" [tabIndex]=\"-1\" *ngIf=\"showToggleButton\">\r\n    <ax-icon [icon]=\"_icon\"></ax-icon>\r\n</ax-button>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPasswordBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -4809,8 +4845,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 type: Input
             }] } });
 
-const COMPONENT$7 = [AXPasswordBoxComponent];
-const MODULES$7 = [
+const COMPONENT$8 = [AXPasswordBoxComponent];
+const MODULES$8 = [
     CommonModule,
     FormsModule,
     AXButtonModule,
@@ -4825,20 +4861,21 @@ AXPasswordBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         AXButtonModule,
         AXEditorDecoratorModule,
         AXIconModule], exports: [AXPasswordBoxComponent] });
-AXPasswordBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPasswordBoxModule, providers: [], imports: [[...MODULES$7]] });
+AXPasswordBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPasswordBoxModule, providers: [], imports: [[...MODULES$8]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPasswordBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$7],
-                    imports: [...MODULES$7],
-                    exports: [...COMPONENT$7],
+                    declarations: [...COMPONENT$8],
+                    imports: [...MODULES$8],
+                    exports: [...COMPONENT$8],
                     providers: [],
                 }]
         }] });
 
 class AXPopupComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr, _viewContainerRef, loadingService) {
+    constructor(elementRef, cdr, _zone, _viewContainerRef, loadingService) {
         super(elementRef, cdr);
+        this._zone = _zone;
         this._viewContainerRef = _viewContainerRef;
         this.loadingService = loadingService;
         this.isLoading = true;
@@ -4878,9 +4915,16 @@ class AXPopupComponent extends AXBaseComponentMixin {
                 });
             }
         }
-        if (ref.instance.footer) {
-            this._footerPortal = new TemplatePortal(ref.instance.footer.template, this._viewContainerRef, { $implicit: this.data, ref: this });
-        }
+        this._zone.runOutsideAngular(() => {
+            const main = this._getHostElement().querySelector('main');
+            const footer = main.querySelector('ax-page-footer');
+            if (footer) {
+                const newFooter = document.createElement('footer');
+                newFooter.append(...Array.from(footer.childNodes));
+                main.after(newFooter);
+                footer.parentNode.removeChild(footer);
+            }
+        });
         this.loadingService.hide(this._loadingId);
         this.focus();
         this._cdr.markForCheck();
@@ -4908,8 +4952,8 @@ class AXPopupComponent extends AXBaseComponentMixin {
     }
     onFullScreen() { }
 }
-AXPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: AXLoadingService }], target: i0.ɵɵFactoryTarget.Component });
-AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXPopupComponent, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-popup ax-{{size}}\" tabindex=\"0\" cdkDrag>\r\n        <ng-container *ngIf=\"showHeader\">\r\n            <header cdkDragHandle class=\"ax-cursor-move\">\r\n                <div>\r\n                    <div class=\"ax-text-lg ax-font-medium\">\r\n                        <span>\r\n                            {{title}}\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"showCloseButton\">\r\n                    <i class=\"ax-ic ax-ic-close ax-text-gray ax-cursor-pointer\" (click)=\"_handleCloseClick()\"\r\n                        tabindex=\"1\"></i>\r\n                </div>\r\n            </header>\r\n        </ng-container>\r\n        <main>\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </main>\r\n        <footer *ngIf=\"_footerPortal\">\r\n            <ng-template [cdkPortalOutlet]=\"_footerPortal\"></ng-template>\r\n        </footer>\r\n    </div>\r\n</div>", directives: [{ type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: AXLoadingService }], target: i0.ɵɵFactoryTarget.Component });
+AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXPopupComponent, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-popup ax-{{size}}\" tabindex=\"0\" cdkDrag>\r\n        <ng-container *ngIf=\"showHeader\">\r\n            <header cdkDragHandle class=\"ax-cursor-move\">\r\n                <div>\r\n                    <div class=\"ax-text-lg ax-font-medium\">\r\n                        <span>\r\n                            {{title}}\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"showCloseButton\">\r\n                    <i class=\"ax-ic ax-ic-close ax-text-gray ax-cursor-pointer\" (click)=\"_handleCloseClick()\"\r\n                        tabindex=\"1\"></i>\r\n                </div>\r\n            </header>\r\n        </ng-container>\r\n        <main>\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </main>\r\n    </div>\r\n</div>", directives: [{ type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
             args: [{
@@ -4918,7 +4962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: AXLoadingService }]; }, propDecorators: { onKeydownHandler: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: AXLoadingService }]; }, propDecorators: { onKeydownHandler: [{
                 type: HostListener,
                 args: ['keydown.escape', ['$event']]
             }] } });
@@ -5012,20 +5056,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: AXOverlayService }]; } });
 
-const COMPONENT$6 = [AXPopupComponent];
-const MODULES$6 = [CommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule];
+const COMPONENT$7 = [AXPopupComponent];
+const MODULES$7 = [CommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule];
 class AXPopupModule {
 }
 AXPopupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXPopupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupModule, declarations: [AXPopupComponent], imports: [CommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule], exports: [AXPopupComponent] });
-AXPopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupModule, providers: [AXPopupService], imports: [[...MODULES$6]] });
+AXPopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupModule, providers: [AXPopupService], imports: [[...MODULES$7]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXPopupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT$7],
+                    imports: [...MODULES$7],
+                    exports: [...COMPONENT$7],
+                    providers: [AXPopupService],
+                }]
+        }] });
+
+class AXRadioComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        //TODO: ax-radio
+    }
+}
+AXRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRadioComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXRadioComponent, selector: "ax-radio", host: { classAttribute: "ax-radio" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-items-start\">\n    <div class=\"ax-flex ax-items-center ax-h-5\">\n        <input [id]=\"id\" class=\"ax-radio\" type=\"radio\">\n    </div>\n    <div class=\"ax-ms-3 ax-text-sm\">\n        <ng-content select=\"ax-label\"></ng-content>\n        <ng-content select=\"ax-form-hint\"></ng-content>\n    </div>\n</div>\n<ng-content select=\"ax-validation-rule\"></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRadioComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-radio',
+                    templateUrl: './radio.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'ax-radio' }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+
+const COMPONENT$6 = [AXRadioComponent];
+const MODULES$6 = [CommonModule];
+class AXRadioModule {
+}
+AXRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRadioModule, declarations: [AXRadioComponent], imports: [CommonModule], exports: [AXRadioComponent] });
+AXRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRadioModule, providers: [], imports: [[...MODULES$6]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXRadioModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$6],
                     imports: [...MODULES$6],
                     exports: [...COMPONENT$6],
-                    providers: [AXPopupService],
+                    providers: [],
                 }]
         }] });
 
@@ -5233,7 +5313,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
     }
 }
 AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", fitParent: "fitParent", value: "value", items: "items", multiple: "multiple", allowNull: "allowNull", valueField: "valueField", textField: "textField" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { listeners: { "document:keydown": "_handleKeydown($event)" }, classAttribute: "ax-select-box" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: AXDropdownComponent, descendants: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down (onOpened)=\"_emitOnOpenedEvent()\" (onClosed)=\"_emitOnClosedEvent()\">\r\n    <ng-container input>\r\n        <ng-content select=\"ax-prefix\">\r\n        </ng-content>\r\n        <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close\" (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n            <!-- <div class=\"ax-selectbox-input\">\r\n                <input type=\"text\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleKeydown($event)\">\r\n            </div> -->\r\n            <ng-content select=\"ax-suffix\">\r\n            </ng-content>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"ax-list ax-list-container\" panel>\r\n        <div class=\"ax-list-items-container ax-vertical ax-default\" (scroll)=\"_handleListScroll($event)\" #listContainer>\r\n            <ng-container *ngFor=\"let item of displayItems;let i = index;trackBy : _trackByFunction\">\r\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                    <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-template #defualtTemplate>\r\n                    <ng-container *ngIf=\"!multiple; then singleTemplate; else multipleTemplate\"></ng-container>\r\n                    <ng-template #singleTemplate>\r\n                        <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\" [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                            {{ _getItemDisplayTextTemplte(item) }}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #multipleTemplate>\r\n                        <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\" [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                            <ax-check-box [value]=\"isItemSelected(item)\">\r\n                            </ax-check-box>\r\n                            {{ _getItemDisplayTextTemplte(item) }}\r\n\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n                <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                    <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template #elseTemplate>\r\n                    Empty!\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"isLoading\">\r\n                <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                    <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template #elseLoadingTemplate>\r\n                    <div class=\"ax-list-loading-container\">\r\n                        <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n                    </div>\r\n                </ng-template>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["disabled", "tabIndex", "size", "fitParent"] }, { type: AXBadgeComponent, selector: "ax-badge", inputs: ["text", "color"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "readonly", "tabIndex", "size", "value", "indeterminate"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", fitParent: "fitParent", value: "value", items: "items", multiple: "multiple", allowNull: "allowNull", valueField: "valueField", textField: "textField" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { listeners: { "document:keydown": "_handleKeydown($event)" }, classAttribute: "ax-select-box" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: AXDropdownComponent, descendants: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-drop-down (onOpened)=\"_emitOnOpenedEvent()\" (onClosed)=\"_emitOnClosedEvent()\">\r\n    <ng-container input>\r\n        <ng-content select=\"ax-prefix\">\r\n        </ng-content>\r\n        <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close\" (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n            <!-- <div class=\"ax-selectbox-input\">\r\n                <input type=\"text\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleKeydown($event)\">\r\n            </div> -->\r\n            <ng-content select=\"ax-suffix\">\r\n            </ng-content>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"ax-list ax-list-container\" panel>\r\n        <div class=\"ax-list-items-container ax-vertical ax-default\" (scroll)=\"_handleListScroll($event)\" #listContainer>\r\n            <ng-container *ngFor=\"let item of displayItems;let i = index;trackBy : _trackByFunction\">\r\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                    <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-template #defualtTemplate>\r\n                    <ng-container *ngIf=\"!multiple; then singleTemplate; else multipleTemplate\"></ng-container>\r\n                    <ng-template #singleTemplate>\r\n                        <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\" [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                            {{ _getItemDisplayTextTemplte(item) }}\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #multipleTemplate>\r\n                        <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\" [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n                            <ax-check-box [value]=\"isItemSelected(item)\">\r\n                            </ax-check-box>\r\n                            {{ _getItemDisplayTextTemplte(item) }}\r\n\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n                <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                    <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template #elseTemplate>\r\n                    Empty!\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"isLoading\">\r\n                <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                    <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template #elseLoadingTemplate>\r\n                    <div class=\"ax-list-loading-container\">\r\n                        <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n                    </div>\r\n                </ng-template>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</ax-drop-down>", components: [{ type: AXDropdownComponent, selector: "ax-drop-down", inputs: ["disabled", "tabIndex", "size", "fitParent"] }, { type: AXBadgeComponent, selector: "ax-badge", inputs: ["text", "color"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -5287,7 +5367,7 @@ class AXSelectionListComponent extends AXBaseSelectionValueMixin {
     }
 }
 AXSelectionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectionListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXSelectionListComponent, selector: "ax-selection-list", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", valueField: "valueField", textField: "textField", multiple: "multiple", items: "items", selectionMode: "selectionMode", cssClass: "cssClass", direction: "direction" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <input [id]=\"id+'-'+i\" class=\"ax-checkbox\" type=\"checkbox\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <input [id]=\"id+'-'+i\" class=\"ax-radio\" type=\"radio\" [attr.name]=\"id\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>", directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXSelectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXSelectionListComponent, selector: "ax-selection-list", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", valueField: "valueField", textField: "textField", multiple: "multiple", items: "items", selectionMode: "selectionMode", cssClass: "cssClass", direction: "direction" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-selection-list ax-{{direction}}\">\r\n    <ng-container *ngIf=\"multiple; then checkboxList; else radioButtonList\"></ng-container>\r\n    <ng-template #checkboxList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-checkbox-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <input [id]=\"id+'-'+i\" class=\"ax-checkbox\" type=\"checkbox\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template #radioButtonList>\r\n        <ng-container *ngFor=\"let item of displayItems;let i = index\">\r\n            <div class=\"ax-flex ax-items-start ax-radio-container ax-mb-2\">\r\n                <div class=\"ax-flex ax-items-center ax-h-5\">\r\n                    <input [id]=\"id+'-'+i\" class=\"ax-radio\" type=\"radio\" [attr.name]=\"id\" (change)=\"_handleOnItemValueChange(item, $event)\" [checked]=\"isItemSelected(item)\" [disabled]=\"disabled || item.disabled\" [readonly]=\"readonly || item.readonly\">\r\n                </div>\r\n                <div class=\"ax-ms-3 ax-text-sm\">\r\n                    <label [for]=\"id+'-'+i\" class=\"ax-font-medium ax-text-light-700\"> {{item[textField]}}</label>\r\n                    <p class=\"ax-text-light-500\"> {{item.hint ? item.hint : item[hintField]}}</p>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-content select=\"ax-validation-rule\">\r\n    </ng-content>\r\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXSelectionListComponent, decorators: [{
             type: Component,
             args: [{
@@ -5581,6 +5661,7 @@ class AXTabItemComponent extends AXBaseClickableMixin {
         this._active = v;
         this.activeChange.emit(v);
         v ? this._getHostElement().classList.add('ax-state-active') : this._getHostElement().classList.remove('ax-state-active');
+        this._cdr.detectChanges();
     }
     // @HostBinding('class')
     // private get __hostClass(): string {
@@ -5599,27 +5680,37 @@ class AXTabItemComponent extends AXBaseClickableMixin {
     }
 }
 AXTabItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTabItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTabItemComponent, selector: "ax-tab-item", inputs: { text: "text", width: "width", active: "active" }, outputs: { activeChange: "activeChange" }, host: { listeners: { "click": "__hostClick($event)" } }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+AXTabItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTabItemComponent, selector: "ax-tab-item", inputs: { text: "text", width: "width", active: "active" }, outputs: { activeChange: "activeChange" }, host: { listeners: { "click": "__hostClick($event)" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <ng-container *ngIf="headerTemplate;else header">
+             <ng-container [ngTemplateOutlet]="headerTemplate" [ngTemplateOutletContext]="{ $implicit: {text,active} }"></ng-container>
+        </ng-container>
+        <ng-template #header>
             <ng-content select="ax-prefix"></ng-content>
             <span>{{text}}</span>
             <ng-content select="ax-suffix"></ng-content>
-            <ng-template>
-                <ng-content>
-                </ng-content>
-            </ng-template>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        </ng-template>
+        <ng-template #content>
+            <ng-content select="ax-content">
+            </ng-content>
+        </ng-template>
+    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-tab-item',
                     template: `
+        <ng-container *ngIf="headerTemplate;else header">
+             <ng-container [ngTemplateOutlet]="headerTemplate" [ngTemplateOutletContext]="{ $implicit: {text,active} }"></ng-container>
+        </ng-container>
+        <ng-template #header>
             <ng-content select="ax-prefix"></ng-content>
             <span>{{text}}</span>
             <ng-content select="ax-suffix"></ng-content>
-            <ng-template>
-                <ng-content>
-                </ng-content>
-            </ng-template>
+        </ng-template>
+        <ng-template #content>
+            <ng-content select="ax-content">
+            </ng-content>
+        </ng-template>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
@@ -5630,7 +5721,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                 type: Input
             }], template: [{
                 type: ViewChild,
-                args: [TemplateRef]
+                args: ['content']
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef, { static: true }]
             }], activeChange: [{
                 type: Output
             }], active: [{
@@ -5643,11 +5737,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
 class AXTabsComponent extends AXBaseComponent {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
-        this.mode = 'default';
-        this.direction = "horizontal";
         this.fitParent = false;
         this.minWidth = false;
     }
+    onRenderCssClass() {
+        const classList = Array.from(this._getHostElement().classList);
+        if (!classList.some(c => ['ax-vertical', 'ax-horizontal'].includes(c))) {
+            this._getHostElement().classList.add('ax-horizontal');
+        }
+        if (!classList.some(c => c.startsWith('ax-look-'))) {
+            this._getHostElement().classList.add('ax-look-default');
+        }
+    }
     onViewInit() {
         this._handleSelectionChanged(this._contentTabs.get(0));
         this._contentTabs.forEach(c => {
@@ -5659,22 +5760,18 @@ class AXTabsComponent extends AXBaseComponent {
     _handleSelectionChanged(e) {
         this._contentTabs.filter(c => c != e).forEach(c => { c.active = false; });
         e.active = true;
-        this.content.portal = e.template;
+        if (this.content) {
+            this.content.portal = e.template;
+        }
         this._cdr.markForCheck();
     }
-    get __hostClass() {
-        return [`ax-tabs-${this.mode ? this.mode : 'default'}`, `ax-tabs-${this.direction}`, `${this.fitParent ? 'ax-tabs-fit' : ''}`].join(' ');
-    }
 }
 AXTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTabsComponent, selector: "ax-tabs", inputs: { mode: "mode", direction: "direction", fitParent: "fitParent", minWidth: "minWidth", content: "content" }, host: { properties: { "class": "this.__hostClass" } }, queries: [{ propertyName: "_contentTabs", predicate: AXTabItemComponent }], usesInheritance: true, ngImport: i0, template: `
+AXTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTabsComponent, selector: "ax-tabs", inputs: { fitParent: "fitParent", minWidth: "minWidth", content: "content" }, queries: [{ propertyName: "_contentTabs", predicate: AXTabItemComponent }], usesInheritance: true, ngImport: i0, template: `
         <div class="ax-items-wrapper">
             <ng-content select="ax-tab-item">
             </ng-content>
         </div>
-        <!-- <div [axTabOutlet]="_activeTabView">
-
-        </div> -->
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabsComponent, decorators: [{
             type: Component,
@@ -5685,9 +5782,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
             <ng-content select="ax-tab-item">
             </ng-content>
         </div>
-        <!-- <div [axTabOutlet]="_activeTabView">
-
-        </div> -->
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
@@ -5695,19 +5789,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _contentTabs: [{
                 type: ContentChildren,
                 args: [AXTabItemComponent]
-            }], mode: [{
-                type: Input
-            }], direction: [{
-                type: Input
             }], fitParent: [{
                 type: Input
             }], minWidth: [{
                 type: Input
             }], content: [{
                 type: Input
-            }], __hostClass: [{
-                type: HostBinding,
-                args: ['class']
             }] } });
 
 class AXTabStripChangedEvent extends AXEvent {
@@ -5722,9 +5809,11 @@ class AXTabContentDirective {
     }
     set portal(v) {
         //debugger;
-        this._portal = v;
-        this._viewContainerRef.clear();
-        const viewRef = this._viewContainerRef.createEmbeddedView(v, null, 0);
+        if (v) {
+            this._portal = v;
+            this._viewContainerRef.clear();
+            const viewRef = this._viewContainerRef.createEmbeddedView(v, null, 0);
+        }
     }
 }
 AXTabContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTabContentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -5852,8 +5941,8 @@ class AXTimeBoxComponent extends AXBaseTextBoxMixin {
         this._emitOnFocusEvent(e);
     }
 }
-AXTimeBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.MaskApplierService }], target: i0.ɵɵFactoryTarget.Component });
-AXTimeBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTimeBoxComponent, selector: "ax-time-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", name: "name", minValue: "minValue", maxValue: "maxValue", format: "format", displayText: "displayText" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", displayTextChange: "displayTextChange" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-time-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\" [attr.pattern]=\"'[\\d\\.]*'\" [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && allowNull && !(disabled || readonly)\">\r\n    <i class=\"ax-icon-x icon\"></i>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXTimeBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.MaskApplierService }], target: i0.ɵɵFactoryTarget.Component });
+AXTimeBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTimeBoxComponent, selector: "ax-time-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", size: "size", value: "value", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", name: "name", minValue: "minValue", maxValue: "maxValue", format: "format", displayText: "displayText" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", displayTextChange: "displayTextChange" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-time-box ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\" [attr.pattern]=\"'[\\d\\.]*'\" [attr.placeholder]=\"placeholder\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && allowNull && !(disabled || readonly)\">\r\n    <i class=\"ax-icon-x icon\"></i>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -5865,7 +5954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     host: { class: 'ax-time-box ax-editor-container' },
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.MaskApplierService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.MaskApplierService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }], minValue: [{
@@ -5892,7 +5981,7 @@ class AXTimeBoxModule {
 AXTimeBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXTimeBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxModule, declarations: [AXTimeBoxComponent], imports: [CommonModule,
         FormsModule,
-        AXButtonModule, i1$2.NgxMaskModule], exports: [AXTimeBoxComponent] });
+        AXButtonModule, i1$3.NgxMaskModule], exports: [AXTimeBoxComponent] });
 AXTimeBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxModule, providers: [], imports: [[...MODULES$2]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTimeBoxModule, decorators: [{
             type: NgModule,
@@ -5938,7 +6027,7 @@ class AXToastComponent extends AXBaseComponentMixin {
     }
 }
 AXToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXToastComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXToastComponent, selector: "ax-toast", host: { classAttribute: "ax-toast" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-toast-icon-side\">\r\n    <i class=\"ax-toast-icon {{_icon}}\"></i>\r\n</div>\r\n<div class=\"ax-toast-content-side\">\r\n    <div class=\"ax-toast-title\">{{options.title}}</div>\r\n    <div class=\"ax-toast-content\" *ngIf=\"options.content\">{{options.content}}</div>\r\n</div>\r\n<div class=\"ax-toast-dismiss-icon\">\r\n    <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.closeable\" (click)=\"close()\"></i>\r\n</div>\r\n<div class=\"ax-toast-progress ax-{{options.type}}\" [style.animation-duration.ms]=\"options.timeOut\" *ngIf=\"options.timeOut\">\r\n</div>", directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXToastComponent, selector: "ax-toast", host: { classAttribute: "ax-toast" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-toast-icon-side\">\r\n    <i class=\"ax-toast-icon {{_icon}}\"></i>\r\n</div>\r\n<div class=\"ax-toast-content-side\">\r\n    <div class=\"ax-toast-title\">{{options.title}}</div>\r\n    <div class=\"ax-toast-content\" *ngIf=\"options.content\">{{options.content}}</div>\r\n</div>\r\n<div class=\"ax-toast-dismiss-icon\">\r\n    <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.closeable\" (click)=\"close()\"></i>\r\n</div>\r\n<div class=\"ax-toast-progress ax-{{options.type}}\" [style.animation-duration.ms]=\"options.timeOut\" *ngIf=\"options.timeOut\">\r\n</div>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXToastComponent, decorators: [{
             type: Component,
             args: [{
@@ -6069,12 +6158,12 @@ class AXToastService {
         }
     }
 }
-AXToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXToastService, deps: [{ token: i1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+AXToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXToastService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
 AXToastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXToastService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXToastService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.Injector }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.Injector }]; } });
 
 class AXTooltipComponent extends AXBaseComponentMixin {
     constructor(elementRef, cdr) {
@@ -6179,12 +6268,12 @@ class AXTooltipDirective {
         this.overlayRef.detach();
     }
 }
-AXTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTooltipDirective, deps: [{ token: i1.Overlay }, { token: i1.OverlayPositionBuilder }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+AXTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTooltipDirective, deps: [{ token: i1$1.Overlay }, { token: i1$1.OverlayPositionBuilder }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
 AXTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.6", type: AXTooltipDirective, selector: "[axTooltip]", inputs: { text: ["axTooltip", "text"], position: ["axTooltipPositon", "position"] }, host: { listeners: { "mouseenter": "show()", "mouseout": "hide()" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTooltipDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axTooltip]' }]
-        }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i1.OverlayPositionBuilder }, { type: i0.ElementRef }]; }, propDecorators: { text: [{
+        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i1$1.OverlayPositionBuilder }, { type: i0.ElementRef }]; }, propDecorators: { text: [{
                 type: Input,
                 args: ['axTooltip']
             }], position: [{
@@ -6233,7 +6322,7 @@ class AXTextBoxComponent extends AXBaseTextBoxMixin {
     }
 }
 AXTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTextBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", cssClass: "cssClass", size: "size", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", value: "value", name: "name" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-text-box ax-editor-container" }, queries: [{ propertyName: "_contentMask", first: true, predicate: AXInputMaskComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" type=\"text\" [mask]=\"_contentMask?.mask\" [prefix]=\"_contentMask?.prefix\"\r\n    [suffix]=\"_contentMask?.suffix\" [showMaskTyped]=\"_contentMask?.showMaskTyped\" [attr.placeholder]=\"placeholder\"\r\n    [attr.maxlength]=\"maxLength\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\"\r\n    [attr.autocomplete]=\"autoComplete ? 'on': 'off'\">\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && allowNull &&  !(disabled || readonly)\">\r\n    <ax-prefix>\r\n        <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n    </ax-prefix>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$2.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", cssClass: "cssClass", size: "size", placeholder: "placeholder", maxLength: "maxLength", allowNull: "allowNull", debounceTime: "debounceTime", value: "value", name: "name" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { properties: { "class": "this.hostClass" }, classAttribute: "ax-text-box ax-editor-container" }, queries: [{ propertyName: "_contentMask", first: true, predicate: AXInputMaskComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" type=\"text\" [mask]=\"_contentMask?.mask\" [prefix]=\"_contentMask?.prefix\"\r\n    [suffix]=\"_contentMask?.suffix\" [showMaskTyped]=\"_contentMask?.showMaskTyped\" [attr.placeholder]=\"placeholder\"\r\n    [attr.maxlength]=\"maxLength\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\"\r\n    [attr.autocomplete]=\"autoComplete ? 'on': 'off'\">\r\n<ax-button color=\"light\" look=\"blank\" [size]=\"size\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && allowNull &&  !(disabled || readonly)\">\r\n    <ax-prefix>\r\n        <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n    </ax-prefix>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$3.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTextBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -6273,7 +6362,7 @@ AXTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         FormsModule,
         AXButtonModule,
         AXEditorDecoratorModule,
-        AXIconModule, i1$2.NgxMaskModule], exports: [AXTextBoxComponent] });
+        AXIconModule, i1$3.NgxMaskModule], exports: [AXTextBoxComponent] });
 AXTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AXTextBoxModule, providers: [], imports: [[
             CommonModule,
             FormsModule,
@@ -6444,5 +6533,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXAlertButtonComponent, AXAlertComponent, AXAlertContentComponent, AXAlertFooterComponent, AXAlertModule, AXAlertSuffixComponent, AXAlertTitleComponent, AXAvatarComponent, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseItemButtonMixin, AXBasePageComponent, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatepickerComponent, AXDatepickerModule, 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, AXRangeSliderComponent, AXRangeSliderModule, AXResponsiveDirective, AXSelectBoxComponent, AXSelectBoxModule, AXSelectionListComponent, AXSelectionListModule, AXSelectionValueChangedEvent, AXSideMenuComponent, AXSideMenuModule, AXSizableComponentMixin, AXSwitchComponent, AXSwitchModule, AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabStripComponent, AXTabViewComponent, AXTabsComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, TAB_META_KEY, _BaseComponenetMixin };
+export { AXAlertButtonComponent, AXAlertComponent, AXAlertContentComponent, AXAlertFooterComponent, AXAlertModule, AXAlertSuffixComponent, AXAlertTitleComponent, AXAvatarComponent, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseItemButtonMixin, AXBasePageComponent, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatepickerComponent, AXDatepickerModule, AXDecoratorContentComponent, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent, AXDrawerModule, AXDropdownComponent, AXDropdownModule, AXDropdownPanelComponent, AXEditorDecoratorModule, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXIconComponent, AXIconModule, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXItemClickEvent, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXNumberBoxComponent, AXNumberBoxModule, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageFooterComponent, AXPageModule, AXPageResult, AXPasswordBoxComponent, AXPasswordBoxModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXRadioComponent, AXRadioModule, AXRangeSliderComponent, AXRangeSliderModule, AXResponsiveDirective, AXSelectBoxComponent, AXSelectBoxModule, AXSelectionListComponent, AXSelectionListModule, AXSelectionValueChangedEvent, AXSideMenuComponent, AXSideMenuModule, AXSizableComponentMixin, AXSwitchComponent, AXSwitchModule, AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabStripComponent, AXTabViewComponent, AXTabsComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, TAB_META_KEY, _BaseComponenetMixin };
 //# sourceMappingURL=acorex-components.js.map