@acorex/components 5.3.3 → 5.5.0

package/fesm2020/acorex-components.mjs

@@ -4,11 +4,11 @@ import { Injectable, Inject, EventEmitter, Directive, Input, TemplateRef, NgModu
 import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import _ from 'lodash';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
-import * as i1$3 from '@acorex/core';
-import { AXObjectUtil, AXConfig, AXDateTime, AXDateTimeRange, AXDateTimeModule, AXDrawingUtil, AXTranslator, AXTranslationModule, AXStringUtil } from '@acorex/core';
+import * as i1$4 from '@acorex/core';
+import { AXObjectUtil, AXConfig, AXDateTime, AXDateTimeRange, AXDateTimeModule, AXColorUtil, AXDrawingUtil, AXTranslationModule, AXTranslator, AXStringUtil } from '@acorex/core';
 import { Subscription, Subject, fromEvent, merge, asyncScheduler, BehaviorSubject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, pairwise, filter, startWith, exhaustMap, throttleTime, observeOn, finalize } from 'rxjs/operators';
-import * as i1$4 from '@angular/cdk/portal';
+import * as i1$5 from '@angular/cdk/portal';
 import { TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayContainer, Overlay, OverlayModule } from '@angular/cdk/overlay';
@@ -17,15 +17,15 @@ import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i2 from '@angular/cdk/bidi';
 import * as i1$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i8 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
-import * as i1$5 from 'ngx-mask';
+import IMask from 'imask';
+import * as i5 from 'angular-imask';
+import { IMaskDirective, IMaskModule } from 'angular-imask';
+import * as i1$3 from 'ngx-mask';
 import { NgxMaskModule } from 'ngx-mask';
+import * as i7 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
 import * as i3 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import IMask from 'imask';
-import * as i5 from 'angular-imask';
-import { IMaskModule, IMaskDirective } from 'angular-imask';
 
 var _AXBaseComponent_elementRef;
 class AXBaseComponent {
@@ -194,14 +194,17 @@ function _BaseMenuComponentMixin(Base) {
                     });
                 }
             }
-            _fetchData(parentId) {
+            _fetchData(parentId, searchText) {
                 return new Promise((resolve) => {
                     if (__classPrivateFieldGet(this, _isLoading, "f")) {
                         return;
                     }
                     if (__classPrivateFieldGet(this, _items, "f")) {
                         __classPrivateFieldSet(this, _isLoading, true, "f");
-                        __classPrivateFieldGet(this, _items, "f").call(this, { parentId: parentId })
+                        __classPrivateFieldGet(this, _items, "f").call(this, {
+                            parentId: parentId,
+                            searchQuery: searchText,
+                        })
                             .then((c) => {
                             if (Array.isArray(c)) {
                                 if (parentId) {
@@ -481,7 +484,17 @@ function _DatalistComponenetMixin(Base) {
                 return __classPrivateFieldGet(this, _isLoading, "f");
             }
             _formatData(v) {
-                return _.unionBy(v.map((o, i) => {
+                // return _.unionBy(v.map((o, i) => {
+                //     if (typeof o == 'object')
+                //         return o
+                //     else {
+                //         const no: any = {};
+                //         no[this.valueField] = o;
+                //         no[Array.isArray(this.textField) ? this.textField[0] : this.textField] = o;
+                //         return no;
+                //     }
+                // }), this.valueField);
+                return v.map((o, i) => {
                     if (typeof o == 'object')
                         return o;
                     else {
@@ -490,16 +503,17 @@ function _DatalistComponenetMixin(Base) {
                         no[Array.isArray(this.textField) ? this.textField[0] : this.textField] = o;
                         return no;
                     }
-                }), this.valueField);
+                });
             }
             _fetchData(opts) {
-                if ((this.loadedCount >= this.totalCount && this.totalCount != 0) || __classPrivateFieldGet(this, _isLoading, "f") || !__classPrivateFieldGet(this, _isLazy, "f")) {
+                const skip = __classPrivateFieldGet(this, _currentPage, "f") * this.pageSize, take = this.pageSize;
+                if ((this.loadedCount >= this.totalCount && this.totalCount != 0) || __classPrivateFieldGet(this, _isLoading, "f") || !__classPrivateFieldGet(this, _isLazy, "f") || (skip > this.totalCount)) {
                     return;
                 }
                 if (__classPrivateFieldGet(this, _items, "f")) {
                     __classPrivateFieldSet(this, _isLoading, true, "f");
                     const fetchFn = __classPrivateFieldGet(this, _items, "f");
-                    fetchFn({ skip: __classPrivateFieldGet(this, _currentPage, "f") * this.pageSize, take: this.pageSize, searchQuery: opts?.searchQuery }).then(c => {
+                    fetchFn({ skip, take, searchQuery: opts?.searchQuery }).then(c => {
                         var _a;
                         if (Array.isArray(c)) {
                             __classPrivateFieldSet(this, _loadedItems, this._formatData(c), "f");
@@ -507,7 +521,7 @@ function _DatalistComponenetMixin(Base) {
                         }
                         else {
                             __classPrivateFieldSet(this, _totalItems, c.total || c.items?.length || 0, "f");
-                            __classPrivateFieldSet(this, _loadedItems, __classPrivateFieldGet(this, _loadedItems, "f").concat(this._formatData(c.items)), "f");
+                            __classPrivateFieldSet(this, _loadedItems, [...new Set(__classPrivateFieldGet(this, _loadedItems, "f").concat(this._formatData(c.items)))], "f");
                             __classPrivateFieldSet(this, _currentPage, (_a = __classPrivateFieldGet(this, _currentPage, "f"), _a++, _a), "f");
                         }
                         this._cdr.markForCheck();
@@ -1205,6 +1219,13 @@ AXSearchableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ve
 AXSearchableComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchableComponent });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchableComponent, decorators: [{
             type: Injectable
+        }] });
+class AXValuableComponent {
+}
+AXValuableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXValuableComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AXValuableComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXValuableComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXValuableComponent, decorators: [{
+            type: Injectable
         }] });
 
 /**
@@ -1854,17 +1875,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; } });
 
 const COMPONENT$o = [AXDrawerComponent, AXDrawerContainerComponent];
-const MODULES$o = [CommonModule];
+const MODULES$p = [CommonModule];
 class AXDrawerModule {
 }
 AXDrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXDrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDrawerModule, declarations: [AXDrawerComponent, AXDrawerContainerComponent], imports: [CommonModule], exports: [AXDrawerComponent, AXDrawerContainerComponent] });
-AXDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDrawerModule, providers: [], imports: [[...MODULES$o]] });
+AXDrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDrawerModule, providers: [], imports: [[...MODULES$p]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDrawerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$o],
-                    imports: [...MODULES$o],
+                    imports: [...MODULES$p],
                     exports: [...COMPONENT$o],
                     providers: [],
                 }]
@@ -2283,7 +2304,7 @@ const COMPONENT$n = [
     AXDecoratorTitleComponent,
     AXDecoratorCloseButtonComponent
 ];
-const MODULES$n = [CommonModule];
+const MODULES$o = [CommonModule];
 class AXDecoratorModule {
 }
 AXDecoratorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDecoratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2304,12 +2325,12 @@ AXDecoratorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         AXDecoratorIconComponent,
         AXDecoratorTitleComponent,
         AXDecoratorCloseButtonComponent] });
-AXDecoratorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDecoratorModule, providers: [], imports: [[...MODULES$n]] });
+AXDecoratorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDecoratorModule, providers: [], imports: [[...MODULES$o]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDecoratorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$n],
-                    imports: [...MODULES$n],
+                    imports: [...MODULES$o],
                     exports: [...COMPONENT$n],
                     providers: [],
                 }]
@@ -2320,7 +2341,7 @@ const COMPONENT$m = [
     AXButtonItemComponent,
     AXButtonGroupComponent,
 ];
-const MODULES$m = [CommonModule, AXDecoratorModule];
+const MODULES$n = [CommonModule, AXDecoratorModule];
 class AXButtonModule {
 }
 AXButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2329,11 +2350,11 @@ AXButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         AXButtonGroupComponent], imports: [CommonModule, AXDecoratorModule], exports: [AXButtonComponent,
         AXButtonItemComponent,
         AXButtonGroupComponent] });
-AXButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXButtonModule, providers: [], imports: [[MODULES$m]] });
+AXButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXButtonModule, providers: [], imports: [[MODULES$n]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXButtonModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [MODULES$m],
+                    imports: [MODULES$n],
                     exports: [COMPONENT$m],
                     declarations: [COMPONENT$m],
                     providers: [],
@@ -2531,19 +2552,19 @@ const COMPONENT$l = [
     AXAlertComponent,
     AXAlertButtonComponent
 ];
-const MODULES$l = [CommonModule, AXDecoratorModule];
+const MODULES$m = [CommonModule, AXDecoratorModule];
 class AXAlertModule {
 }
 AXAlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXAlertModule, declarations: [AXAlertComponent,
         AXAlertButtonComponent], imports: [CommonModule, AXDecoratorModule], exports: [AXAlertComponent,
         AXAlertButtonComponent] });
-AXAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXAlertModule, providers: [], imports: [[...MODULES$l]] });
+AXAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXAlertModule, providers: [], imports: [[...MODULES$m]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXAlertModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$l],
-                    imports: [...MODULES$l],
+                    imports: [...MODULES$m],
                     exports: [...COMPONENT$l],
                     providers: [],
                 }]
@@ -2602,17 +2623,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
             }] } });
 
 const COMPONENT$k = [AXAvatarComponent, AXAvatarGroup];
-const MODULES$k = [CommonModule];
+const MODULES$l = [CommonModule];
 class AXAvatarModule {
 }
 AXAvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXAvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXAvatarModule, declarations: [AXAvatarComponent, AXAvatarGroup], imports: [CommonModule], exports: [AXAvatarComponent, AXAvatarGroup] });
-AXAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXAvatarModule, providers: [], imports: [[...MODULES$k]] });
+AXAvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXAvatarModule, providers: [], imports: [[...MODULES$l]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$k],
-                    imports: [...MODULES$k],
+                    imports: [...MODULES$l],
                     exports: [...COMPONENT$k],
                     providers: [],
                 }]
@@ -2643,17 +2664,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
             }] } });
 
 const COMPONENT$j = [AXBadgeComponent];
-const MODULES$j = [CommonModule];
+const MODULES$k = [CommonModule];
 class AXBadgeModule {
 }
 AXBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXBadgeModule, declarations: [AXBadgeComponent], imports: [CommonModule], exports: [AXBadgeComponent] });
-AXBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXBadgeModule, providers: [], imports: [[...MODULES$j]] });
+AXBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXBadgeModule, providers: [], imports: [[...MODULES$k]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXBadgeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$j],
-                    imports: [...MODULES$j],
+                    imports: [...MODULES$k],
                     exports: [...COMPONENT$j],
                     providers: [],
                 }]
@@ -3373,7 +3394,6 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
         return date.dayOfWeek == 7 || date.dayOfWeek == 1;
     }
     _generatePickerItems(view) {
-        debugger;
         switch (view) {
             case 'year':
                 this._pickerYears = _.range(2000, 2050, 1);
@@ -3395,7 +3415,6 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
         }
     }
     _handlePickerChange(item, view) {
-        debugger;
         if (!item)
             return;
         const date = this._viewRange.startTime;
@@ -4094,17 +4113,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXCarouselComponent }]; } });
 
 const COMPONENT$i = [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent];
-const MODULES$i = [CommonModule];
+const MODULES$j = [CommonModule];
 class AXCarouselModule {
 }
 AXCarouselModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXCarouselModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCarouselModule, declarations: [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent], imports: [CommonModule], exports: [AXCarouselComponent, AXCarouselItemComponent, AXCarouselArrowsComponent, AXCarouselPagerComponent] });
-AXCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCarouselModule, providers: [], imports: [[...MODULES$i]] });
+AXCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCarouselModule, providers: [], imports: [[...MODULES$j]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCarouselModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$i],
-                    imports: [...MODULES$i],
+                    imports: [...MODULES$j],
                     exports: [...COMPONENT$i],
                     providers: [],
                 }]
@@ -4126,17 +4145,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
         }] });
 
 const COMPONENT$h = [AXCalendarComponent];
-const MODULES$h = [CommonModule, AXButtonModule, AXDecoratorModule, AXDateTimeModule, AXPickerModule];
+const MODULES$i = [CommonModule, AXButtonModule, AXDecoratorModule, AXDateTimeModule, AXPickerModule];
 class AXCalendarModule {
 }
 AXCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent], imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXDateTimeModule, AXPickerModule], exports: [AXCalendarComponent] });
-AXCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCalendarModule, providers: [], imports: [[...MODULES$h]] });
+AXCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCalendarModule, providers: [], imports: [[...MODULES$i]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$h],
-                    imports: [...MODULES$h],
+                    imports: [...MODULES$i],
                     exports: [...COMPONENT$h],
                     providers: [],
                 }]
@@ -4192,774 +4211,1242 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 }]
         }] });
 
-class AXCollapseComponent extends AXBaseComponent {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-        this.cdr = cdr;
-        this.isCollapsedChange = new EventEmitter();
-        this._isCollapsed = false;
-        this.caption = null;
-    }
-    get isCollapsed() {
-        return this._isCollapsed;
-    }
-    set isCollapsed(v) {
-        if (v != this._isCollapsed) {
-            this._isCollapsed = v;
-            this.isCollapsedChange.emit(v);
-            this._cdr.detectChanges();
-        }
-    }
-    handleHeaderClick() {
-        this.isCollapsed = !this.isCollapsed;
+class AXColorComponent {
+}
+AXColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AXColorComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorComponent, decorators: [{
+            type: Injectable
+        }] });
+
+class AXColorPalettePreviewComponent extends AXBaseComponent {
+    constructor(_elementRef, _cdr, _parent) {
+        super(_elementRef, _cdr);
+        this._parent = _parent;
+        _parent?._onInternalColorChanged$.subscribe(e => {
+            this._colorCode = AXColorUtil.to(e.color, e.mode);
+            this._getHostElement().style.backgroundColor = e.color;
+            const color = AXColorUtil.toHex(e.color);
+            const ratio = AXColorUtil.contrastToWhite(color);
+            this._getHostElement().style.color = !(ratio > 2.0) ? '#000' : '#fff';
+        });
     }
+    ngOnInit() { }
 }
-AXCollapseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCollapseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXCollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXCollapseComponent, selector: "ax-collapse", inputs: { isCollapsed: "isCollapsed", caption: "caption" }, outputs: { isCollapsedChange: "isCollapsedChange" }, host: { classAttribute: "ax-collapse" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\">\r\n    <ng-container *ngIf=\"headerTemplate;else header\">\r\n        <div class=\"ax-collapse-custom-header-container\" (click)=\"handleHeaderClick()\">\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: {caption,isCollapsed} }\"></ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-template #header>\r\n        <div class=\"ax-collapse-header-container\" (click)=\"handleHeaderClick()\">\r\n            <div>\r\n                <span class=\"ax-ic ax-ic-chevron ax-collapse-arrow ax-transition-all\"\r\n                    [class.ax-rotate-90]=\"isCollapsed\"></span>\r\n                <ng-content select=\"ax-prefix\"></ng-content>\r\n                <span>{{caption}}</span>\r\n            </div>\r\n            <div>\r\n                <ng-content select=\"ax-suffix\"></ng-content>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"ax-collapse-body ax-transition-all\" *ngIf=\"!isCollapsed\">\r\n    <ng-content></ng-content>\r\n</div>", directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCollapseComponent, decorators: [{
+AXColorPalettePreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AXColorPalettePreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview", usesInheritance: true, ngImport: i0, template: `{{_colorCode}}`, isInline: true, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPalettePreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-collapse', host: { class: 'ax-collapse' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\">\r\n    <ng-container *ngIf=\"headerTemplate;else header\">\r\n        <div class=\"ax-collapse-custom-header-container\" (click)=\"handleHeaderClick()\">\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: {caption,isCollapsed} }\"></ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-template #header>\r\n        <div class=\"ax-collapse-header-container\" (click)=\"handleHeaderClick()\">\r\n            <div>\r\n                <span class=\"ax-ic ax-ic-chevron ax-collapse-arrow ax-transition-all\"\r\n                    [class.ax-rotate-90]=\"isCollapsed\"></span>\r\n                <ng-content select=\"ax-prefix\"></ng-content>\r\n                <span>{{caption}}</span>\r\n            </div>\r\n            <div>\r\n                <ng-content select=\"ax-suffix\"></ng-content>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"ax-collapse-body ax-transition-all\" *ngIf=\"!isCollapsed\">\r\n    <ng-content></ng-content>\r\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { isCollapsedChange: [{
-                type: Output
-            }], isCollapsed: [{
-                type: Input
-            }], caption: [{
-                type: Input
-            }], headerTemplate: [{
-                type: ContentChild,
-                args: ['header', { static: true }]
-            }] } });
+            args: [{
+                    selector: 'ax-color-palette-preview',
+                    template: `{{_colorCode}}`,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [AXColorComponent]
+                }] }]; } });
 
-class AXCollapseGroupComponent extends AXBaseComponent {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-        this.cdr = cdr;
-        this.accordion = false;
-        this.nonCollapsedIndex = 0;
-        this._subs = [];
-    }
-    onViewInit() {
-        if (this.accordion) {
-            this._items.forEach(c => c.isCollapsed = true);
-            this._items.get(this.nonCollapsedIndex).isCollapsed = false;
-            console.log(this._items[this.nonCollapsedIndex]);
-            this._items.forEach((c1) => {
-                this._subs.push(c1.isCollapsedChange.subscribe(e => {
-                    if (!e)
-                        this._items.toArray().filter(c2 => c2 != c1).forEach(c => c.isCollapsed = true);
-                }));
-            });
+class AXColorPaletteSwatchesComponent extends AXBaseComponent {
+    constructor(_elementRef, _cdr, _parent) {
+        super(_elementRef, _cdr);
+        this._parent = _parent;
+        this.colors = [];
+        this._defaultPalette = [
+            { code: '#000000' },
+            { code: '#ffffff' },
+            // Amber
+            { code: '#fff8e1' },
+            { code: '#ffecb3' },
+            { code: '#ffe082' },
+            { code: '#ffd54f' },
+            { code: '#ffca28' },
+            { code: '#ffc107' },
+            { code: '#ffb300' },
+            { code: '#ffa000' },
+            { code: '#ff8f00' },
+            { code: '#ff6f00' },
+            // Blue Grey
+            { code: '#ECEFF1' },
+            { code: '#CFD8DC' },
+            { code: '#B0BEC5' },
+            { code: '#90A4AE' },
+            { code: '#78909C' },
+            { code: '#607D8B' },
+            { code: '#546E7A' },
+            { code: '#455A64' },
+            { code: '#37474F' },
+            { code: '#263238' },
+            // Blue
+            { code: '#E3F2FD' },
+            { code: '#BBDEFB' },
+            { code: '#90CAF9' },
+            { code: '#64B5F6' },
+            { code: '#42A5F5' },
+            { code: '#2196F3' },
+            { code: '#1E88E5' },
+            { code: '#1976D2' },
+            { code: '#1565C0' },
+            { code: '#0D47A1' },
+            // Brown
+            { code: '#EFEBE9' },
+            { code: '#D7CCC8' },
+            { code: '#BCAAA4' },
+            { code: '#A1887F' },
+            { code: '#8D6E63' },
+            { code: '#795548' },
+            { code: '#6D4C41' },
+            { code: '#5D4037' },
+            { code: '#4E342E' },
+            { code: '#3E2723' },
+            // Cyan
+            { code: '#E0F7FA' },
+            { code: '#B2EBF2' },
+            { code: '#80DEEA' },
+            { code: '#4DD0E1' },
+            { code: '#26C6DA' },
+            { code: '#00BCD4' },
+            { code: '#00ACC1' },
+            { code: '#0097A7' },
+            { code: '#00838F' },
+            { code: '#006064' },
+            // Deep Orange
+            { code: '#FBE9E7' },
+            { code: '#FFCCBC' },
+            { code: '#FFAB91' },
+            { code: '#FF8A65' },
+            { code: '#FF7043' },
+            { code: '#FF5722' },
+            { code: '#F4511E' },
+            { code: '#E64A19' },
+            { code: '#D84315' },
+            { code: '#BF360C' },
+            // Deep Purple
+            { code: '#EDE7F6' },
+            { code: '#D1C4E9' },
+            { code: '#B39DDB' },
+            { code: '#9575CD' },
+            { code: '#7E57C2' },
+            { code: '#673AB7' },
+            { code: '#5E35B1' },
+            { code: '#512DA8' },
+            { code: '#4527A0' },
+            { code: '#311B92' },
+            // Green
+            { code: '#E8F5E9' },
+            { code: '#C8E6C9' },
+            { code: '#A5D6A7' },
+            { code: '#81C784' },
+            { code: '#66BB6A' },
+            { code: '#4CAF50' },
+            { code: '#43A047' },
+            { code: '#388E3C' },
+            { code: '#2E7D32' },
+            { code: '#1B5E20' },
+            // Grey
+            { code: '#FAFAFA' },
+            { code: '#F5F5F5' },
+            { code: '#EEEEEE' },
+            { code: '#E0E0E0' },
+            { code: '#BDBDBD' },
+            { code: '#9E9E9E' },
+            { code: '#757575' },
+            { code: '#616161' },
+            { code: '#424242' },
+            { code: '#212121' },
+            // Indigo
+            { code: '#E8EAF6' },
+            { code: '#C5CAE9' },
+            { code: '#9FA8DA' },
+            { code: '#7986CB' },
+            { code: '#5C6BC0' },
+            { code: '#3F51B5' },
+            { code: '#3949AB' },
+            { code: '#303F9F' },
+            { code: '#283593' },
+            { code: '#1A237E' },
+            // Light Blue
+            { code: '#E1F5FE' },
+            { code: '#B3E5FC' },
+            { code: '#81D4FA' },
+            { code: '#4FC3F7' },
+            { code: '#29B6F6' },
+            { code: '#03A9F4' },
+            { code: '#039BE5' },
+            { code: '#0288D1' },
+            { code: '#0277BD' },
+            { code: '#01579B' },
+            // Light Green
+            { code: '#F1F8E9' },
+            { code: '#DCEDC8' },
+            { code: '#C5E1A5' },
+            { code: '#AED581' },
+            { code: '#9CCC65' },
+            { code: '#8BC34A' },
+            { code: '#7CB342' },
+            { code: '#689F38' },
+            { code: '#558B2F' },
+            { code: '#33691E' },
+            // Lime
+            { code: '#F9FBE7' },
+            { code: '#F0F4C3' },
+            { code: '#E6EE9C' },
+            { code: '#DCE775' },
+            { code: '#D4E157' },
+            { code: '#CDDC39' },
+            { code: '#C0CA33' },
+            { code: '#AFB42B' },
+            { code: '#9E9D24' },
+            { code: '#827717' },
+            // Orange
+            { code: '#FFF3E0' },
+            { code: '#FFE0B2' },
+            { code: '#FFCC80' },
+            { code: '#FFB74D' },
+            { code: '#FFA726' },
+            { code: '#FF9800' },
+            { code: '#FB8C00' },
+            { code: '#F57C00' },
+            { code: '#EF6C00' },
+            { code: '#E65100' },
+            // Pink
+            { code: '#FCE4EC' },
+            { code: '#F8BBD0' },
+            { code: '#F48FB1' },
+            { code: '#F06292' },
+            { code: '#EC407A' },
+            { code: '#E91E63' },
+            { code: '#D81B60' },
+            { code: '#C2185B' },
+            { code: '#AD1457' },
+            { code: '#880E4F' },
+            // Purple
+            { code: '#F3E5F5' },
+            { code: '#E1BEE7' },
+            { code: '#CE93D8' },
+            { code: '#BA68C8' },
+            { code: '#AB47BC' },
+            { code: '#9C27B0' },
+            { code: '#8E24AA' },
+            { code: '#7B1FA2' },
+            { code: '#6A1B9A' },
+            { code: '#4A148C' },
+            // Red
+            { code: '#FFEBEE' },
+            { code: '#FFCDD2' },
+            { code: '#EF9A9A' },
+            { code: '#E57373' },
+            { code: '#EF5350' },
+            { code: '#F44336' },
+            { code: '#E53935' },
+            { code: '#D32F2F' },
+            { code: '#C62828' },
+            { code: '#B71C1C' },
+            // Teal
+            { code: '#E0F2F1' },
+            { code: '#B2DFDB' },
+            { code: '#80CBC4' },
+            { code: '#4DB6AC' },
+            { code: '#26A69A' },
+            { code: '#009688' },
+            { code: '#00897B' },
+            { code: '#00796B' },
+            { code: '#00695C' },
+            { code: '#004D40' },
+            // Yellow
+            { code: '#FFFDE7' },
+            { code: '#FFF9C4' },
+            { code: '#FFF59D' },
+            { code: '#FFF176' },
+            { code: '#FFEE58' },
+            { code: '#FFEB3B' },
+            { code: '#FDD835' },
+            { code: '#FBC02D' },
+            { code: '#F9A825' },
+            { code: '#F57F17' },
+        ];
+        _parent?._onInternalColorChanged$.subscribe(e => {
+            this._selected = AXColorUtil.toHex(e.color);
+        });
+        if (this._getHostElement().tagName.toLocaleLowerCase() != 'ax-color-palette-favorite') {
+            this.colors = this._defaultPalette;
         }
     }
-    onDestroy() {
-        this._subs.forEach(s => s.unsubscribe());
-        this._subs = [];
+    _handleClick(e, color) {
+        this._selected = color.code;
+        this._parent._onInternalColorChanged$.next({ color: color.code, mode: this._parent.mode });
     }
 }
-AXCollapseGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCollapseGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXCollapseGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: { accordion: "accordion", nonCollapsedIndex: "nonCollapsedIndex" }, host: { classAttribute: "ax-collapse-group" }, queries: [{ propertyName: "_items", predicate: AXCollapseComponent }], usesInheritance: true, ngImport: i0, template: `<ng-content select="ax-collapse"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCollapseGroupComponent, decorators: [{
+AXColorPaletteSwatchesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AXColorPaletteSwatchesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: { colors: "colors" }, usesInheritance: true, ngImport: i0, template: `<div class="palette-items">  
+    <div *ngFor="let color of colors" [style.background-color]="color.code" [attr.title]="color.code" [class.ax-state-selected]="color.code==_selected" (click)="_handleClick($event,color)" >        
+    </div>
+</div>`, isInline: true, directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPaletteSwatchesComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-collapse-group',
-                    template: `<ng-content select="ax-collapse"></ng-content>`,
-                    host: { class: 'ax-collapse-group' },
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
+                    selector: 'ax-color-palette-swatches, ax-color-palette-favorite',
+                    template: `<div class="palette-items">  
+    <div *ngFor="let color of colors" [style.background-color]="color.code" [attr.title]="color.code" [class.ax-state-selected]="color.code==_selected" (click)="_handleClick($event,color)" >        
+    </div>
+</div>`,
+                    encapsulation: ViewEncapsulation.None
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { accordion: [{
-                type: Input
-            }], nonCollapsedIndex: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [AXColorComponent]
+                }] }]; }, propDecorators: { colors: [{
                 type: Input
-            }], _items: [{
-                type: ContentChildren,
-                args: [AXCollapseComponent]
             }] } });
 
-class AXCollapseModule {
+/**
+ * The Textbox is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+class AXTextBoxComponent extends AXBaseTextBoxMixin {
+    /**
+    *  @ignore
+    */
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+    }
 }
-AXCollapseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXCollapseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCollapseModule, declarations: [AXCollapseComponent, AXCollapseGroupComponent], imports: [CommonModule], exports: [AXCollapseComponent, AXCollapseGroupComponent] });
-AXCollapseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCollapseModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCollapseModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [AXCollapseComponent, AXCollapseGroupComponent],
-                    imports: [CommonModule],
-                    exports: [AXCollapseComponent, AXCollapseGroupComponent],
-                    providers: [],
-                }]
-        }] });
+AXTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXTextBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [attr.autocomplete]=\"autoComplete\" [attr.type]=\"type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\">\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>", directives: [{ type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXTextBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-text-box', inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-editor-container' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [attr.autocomplete]=\"autoComplete\" [attr.type]=\"type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\">\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-class AXPopoverComponent extends AXInteractiveComponenetMixin {
-    constructor(_elementRef, _cdr, _zone, _overlay, _platform, _viewContainerRef) {
-        super(_elementRef, _cdr);
-        this._elementRef = _elementRef;
-        this._cdr = _cdr;
-        this._zone = _zone;
-        this._overlay = _overlay;
-        this._platform = _platform;
-        this._viewContainerRef = _viewContainerRef;
-        this.position = [
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom'
-            }
-        ];
-        this._subs = [];
-        //
-        this.openTrigger = 'toggle';
-        //
-        this.closeTrigger = 'clickout';
-        //
-        this.hasBackdrop = false;
-        this.adaptivityEnabled = false;
-        //
-        this._mousePos = { x: 0, y: 0 };
-        this._isScrollAttached = false;
-        //
-        this.onOpened = new EventEmitter();
-        this.onClosed = new EventEmitter();
-    }
-    get target() {
-        return this._target;
-    }
-    set target(v) {
-        if (v instanceof HTMLElement)
-            this._target = v;
-        else if (v instanceof ElementRef)
-            this._target = v.nativeElement;
-        else if (v instanceof AXBaseComponent)
-            this._target = v._getInnerElement();
+/**
+ * The NumberBox is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+class AXNumberBoxComponent extends AXBaseTextBoxMixin {
+    /**
+    *  @ignore
+    */
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.cdr = cdr;
+        this._padDecimalZeros = false;
+        /**
+       *  Specifies the value that is used to increment or decrement the **Integer** part of number
+       */
+        this.step = 1;
+        this._decimals = 0;
+        /**
+        *  Specifies the value that is used to increment or decrement the **Deciaml** part of number
+        */
+        this.decimalStep = 'auto';
+        /**
+        *  Specifies whether the Up and Down spin buttons will be rendered or not
+        */
+        this.showSpinButtons = true;
+        this._minValue = Number.MIN_SAFE_INTEGER;
+        this._maxValue = Number.MAX_SAFE_INTEGER;
     }
-    _emitOnOpenedEvent() {
-        this.onOpened.emit({
-            component: this,
-            htmlElement: this._getHostElement()
-        });
+    /**
+    *  A character value that specifies the separator character.
+    */
+    get thousandsSeparator() {
+        return this._thousandsSeparator;
     }
-    _emitOnClosedEvent() {
-        this.onClosed.emit({
-            component: this,
-            htmlElement: this._getHostElement()
+    set thousandsSeparator(v) {
+        this._setOption({
+            name: "thousandsSeparator",
+            value: v ?? '',
         });
     }
-    //
-    onViewInit() {
-        if (this._target) {
-            if (this.openTrigger === 'mouseover') {
-                const mouseEnter$ = fromEvent(this._target, 'mouseover');
-                this._addSub(mouseEnter$.subscribe(e => {
-                    const point = { x: e.clientX, y: e.clientY };
-                    if (AXDrawingUtil.isInElementBound(point, this._target))
-                        this.open();
-                }));
-            }
-            if (this.closeTrigger === 'mouseout') {
-                const mouseMove$ = fromEvent(document, 'mousemove');
-                this._addSub(mouseMove$.pipe(throttleTime(50)).subscribe(e => {
-                    this._mousePos.x = e.clientX;
-                    this._mousePos.y = e.clientY;
-                    if (this.isOpen) {
-                        setTimeout(() => {
-                            if (!_.some([this._target, this._overlayRef.overlayElement], el => _.includes(document.elementsFromPoint(this._mousePos.x, this._mousePos.y), el)))
-                                this.close();
-                        }, 100);
-                    }
-                }));
-            }
-            //
-            if (this.openTrigger === 'click' || this.openTrigger === 'toggle') {
-                const click$ = fromEvent(this._target, 'click');
-                this._addSub(click$.subscribe(e => {
-                    this.openTrigger == 'toggle' ? this.toggle() : this.open();
-                }));
-            }
-        }
+    /**
+    *  A character value that specifies the separator character.
+    */
+    get padDecimalZeros() {
+        return this._padDecimalZeros;
     }
-    //
-    onDestroy() {
-        this._overlayRef?.detach();
-        this._overlayRef?.dispose();
-        this._subs.forEach(s => {
-            s?.unsubscribe();
+    set padDecimalZeros(v) {
+        this._setOption({
+            name: "padDecimalZeros",
+            value: v,
         });
     }
-    _handleKeydownHandler(e) {
-        // if (e.key === 'Enter' && e.type === 'keydown') {
-        //   this.toggle();
-        // }
-        if (e.key === 'Escape') {
-            if (this.isOpen) {
-                this.close();
-                e.stopPropagation();
-            }
-        }
+    /**
+    *  Specifies the number of decimals that the user can enter
+    */
+    get decimals() {
+        return this._decimals;
     }
-    toggle() {
-        this.isOpen ? this.close() : this.open();
+    set decimals(v) {
+        this._setOption({
+            name: "decimals",
+            value: v ?? 0,
+        });
     }
-    //
-    close() {
-        if (!this.isOpen) {
-            return;
-        }
-        this._overlayRef?.detach();
-        this._emitOnClosedEvent();
+    /**
+    *  Specifies the smallest value that is valid
+    */
+    get minValue() {
+        return this._minValue;
     }
-    dispose() {
-        this.close();
-        this._overlayRef?.dispose();
-        this._overlayRef = null;
+    set minValue(v) {
+        this._setOption({
+            name: "minValue",
+            value: v != null ? Number(v) : Number.MIN_SAFE_INTEGER,
+        });
     }
-    //
-    open() {
-        if (this.isOpen) {
-            return;
+    /**
+    *  Specifies the greatest value that is valid
+    */
+    get maxValue() {
+        return this._maxValue;
+    }
+    set maxValue(v) {
+        this._setOption({
+            name: "maxValue",
+            value: v != null ? Number(v) : Number.MAX_SAFE_INTEGER,
+        });
+    }
+    onViewInit() {
+        super.onViewInit();
+        this._updateMask();
+    }
+    _onOptionChanged(option) {
+        super._onOptionChanged(option);
+        this._updateMask();
+    }
+    _updateMask() {
+        if (!this._maskObj) {
+            this._maskObj = IMask.createMask({
+                mask: Number,
+                min: this.minValue,
+                max: this.maxValue,
+                thousandsSeparator: this.thousandsSeparator || '',
+                scale: this.decimals,
+                radix: '.',
+                padFractionalZeros: this.decimals > 0 && this.padDecimalZeros
+            });
         }
-        this._ensureOverlayCreated();
-        this._overlayRef.attach(this._templatePortal);
-        this._emitOnOpenedEvent();
+        else {
+            this._maskObj.updateOptions({
+                min: this.minValue,
+                max: this.maxValue,
+                thousandsSeparator: this.thousandsSeparator || '',
+                scale: this.decimals,
+                radix: '.',
+                padFractionalZeros: this.decimals > 0 && this.padDecimalZeros
+            });
+        }
+        this._maskDirective?.maskRef?.updateValue();
+        this._maskDirective?.maskRef?.updateControl();
     }
-    _ensureOverlayCreated() {
-        const targetRef = this._target;
-        if (!targetRef)
-            return;
-        if (!this._overlayRef) {
-            if (this._platform.is('Mobile') && this.adaptivityEnabled) {
-                this._openAsActionsheet();
+    _handleOnKeydownEvent(e) {
+        const ignore = () => {
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        const input = e.target;
+        const valStr = input.value;
+        const decimalPointIndex = valStr.indexOf('.');
+        const _cursorPos = input.selectionStart;
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            if (decimalPointIndex > 0 && _cursorPos > decimalPointIndex && this.decimals > 0) {
+                e.key === 'ArrowDown' ? this.decimalStepDown() : this.decimalStepUp();
             }
             else {
-                this._openAsPopover(targetRef);
-            }
-            if (this.closeTrigger == 'clickout') {
-                this._addSub(this._overlayRef._outsidePointerEvents.subscribe(c => {
-                    const target = c.target;
-                    const comElem = targetRef;
-                    if (!(comElem.contains(target))) {
-                        this.close();
-                    }
-                }));
+                e.key === 'ArrowDown' ? this.stepDown() : this.stepUp();
             }
-            this._addSub(this._overlayRef.attachments().subscribe(() => {
-                if (!this._isScrollAttached) {
-                    this._addSub(this._platform.scroll.subscribe(c => {
-                        if (!c.nativeEvent.target.closest('.ax-overlay-pane'))
-                            this.updatePosition();
-                    }));
-                    this._isScrollAttached = true;
-                }
-            }));
-        }
-        if (!this._templatePortal) {
-            this._templatePortal = new TemplatePortal(this._baseTemplate, this._viewContainerRef);
+            ignore();
+            setTimeout(() => {
+                input.setSelectionRange(_cursorPos, _cursorPos);
+            }, 5);
         }
+        super._emitOnKeydownEvent(e);
     }
-    _openAsPopover(targetRef) {
-        this._overlayRef = this._overlay.create({
-            positionStrategy: this._overlay.position()
-                .flexibleConnectedTo(targetRef)
-                .withPositions(Array.isArray(this.position) ? this.position : [this.position])
-                .withPush(false),
-            disposeOnNavigation: true,
-            panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
-            maxHeight: 'unset',
-            hasBackdrop: this.hasBackdrop,
-            backdropClass: [this.backdropClass || 'cdk-overlay-transparent-backdrop']
-        });
+    _handleUpDownClick(e, v) {
+        v == 1 ? this.stepUp() : this.stepDown();
     }
-    _openAsActionsheet() {
-        this._overlayRef = this._overlay.create({
-            positionStrategy: this._overlay.position().flexibleConnectedTo(document.body).withPositions([
-                {
-                    originX: 'center',
-                    originY: 'bottom',
-                    overlayX: 'center',
-                    overlayY: 'bottom'
-                }
-            ]),
-            disposeOnNavigation: true,
-            panelClass: ['ax-animate-slideInUp', 'ax-animate-faster'],
-            hasBackdrop: true,
-            width: '100%'
-        });
+    _onValueChanging(value) {
+        const v = _.toNumber(value);
+        if (v < this.minValue)
+            return this.minValue;
+        if (v > this.maxValue)
+            return this.maxValue;
+        return v;
     }
-    get isOpen() {
-        return this._overlayRef ? this._overlayRef.hasAttached() : false;
+    stepUp() {
+        this.value += _.toNumber(this.step);
     }
-    _addSub(sub) {
-        this._subs.push(sub);
+    stepDown() {
+        this.value -= _.toNumber(this.step);
     }
-    updatePosition() {
-        this._overlayRef?.updatePosition();
-        this.focus();
+    decimalStepUp() {
+        this.value += _.toNumber(this.decimalStep == 'auto' ? (1 / Math.pow(10, this.decimals)) : this.decimalStep);
+    }
+    decimalStepDown() {
+        this.value -= _.toNumber(this.decimalStep == 'auto' ? (1 / Math.pow(10, this.decimals)) : this.decimalStep);
     }
 }
-AXPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.Overlay }, { token: i1$3.AXPlatform }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-AXPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXPopoverComponent, selector: "ax-popover", inputs: { target: "target", position: "position", openTrigger: "openTrigger", closeTrigger: "closeTrigger", hasBackdrop: "hasBackdrop", backdropClass: "backdropClass", adaptivityEnabled: "adaptivityEnabled" }, outputs: { onOpened: "onOpened", onClosed: "onClosed" }, host: { listeners: { "keydown": "_handleKeydownHandler($event)" } }, viewQueries: [{ propertyName: "_baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #baseTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopoverComponent, decorators: [{
+AXNumberBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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", type: "type", autoComplete: "autoComplete", name: "name", checked: "checked", thousandsSeparator: "thousandsSeparator", padDecimalZeros: "padDecimalZeros", step: "step", decimals: "decimals", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-editor-container" }, viewQueries: [{ propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\"  \r\n    [attr.placeholder]=\"placeholder\" \r\n    [imask]=\"_maskObj\" \r\n    [unmask]=\"'typed'\"\r\n    [attr.min]=\"minValue\"\r\n    [attr.max]=\"maxValue\" \r\n    [class.ax-state-disabled]=\"disabled\" \r\n    [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" \r\n    [readonly]=\"readonly\" \r\n    [tabindex]=\"tabIndex\" \r\n    [(ngModel)]=\"value\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" \r\n    (blur)=\"_emitOnFocusEvent($event)\" \r\n    (keydown)=\"_handleOnKeydownEvent($event)\"\r\n    [attr.autocomplete]=\"autoComplete\">\r\n\r\n<div class=\"ax-number-box-arrows\" *ngIf=\"showSpinButtons && !(disabled || readonly)\">\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax-rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,-1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax--rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #baseTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.Overlay }, { type: i1$3.AXPlatform }, { type: i0.ViewContainerRef }]; }, propDecorators: { target: [{
+            args: [{ selector: 'ax-number-box', inputs: [
+                        'disabled',
+                        'readonly',
+                        'tabIndex',
+                        'size',
+                        'value',
+                        ...TEXTBOX_INPUTS,
+                    ], outputs: [
+                        'valueChange',
+                        'onValueChanged',
+                        'onBlur',
+                        'onFocus',
+                        ...TEXTBOX_OUTPUT,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\"  \r\n    [attr.placeholder]=\"placeholder\" \r\n    [imask]=\"_maskObj\" \r\n    [unmask]=\"'typed'\"\r\n    [attr.min]=\"minValue\"\r\n    [attr.max]=\"maxValue\" \r\n    [class.ax-state-disabled]=\"disabled\" \r\n    [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" \r\n    [readonly]=\"readonly\" \r\n    [tabindex]=\"tabIndex\" \r\n    [(ngModel)]=\"value\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" \r\n    (blur)=\"_emitOnFocusEvent($event)\" \r\n    (keydown)=\"_handleOnKeydownEvent($event)\"\r\n    [attr.autocomplete]=\"autoComplete\">\r\n\r\n<div class=\"ax-number-box-arrows\" *ngIf=\"showSpinButtons && !(disabled || readonly)\">\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax-rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,-1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax--rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { thousandsSeparator: [{
                 type: Input
-            }], position: [{
+            }], padDecimalZeros: [{
                 type: Input
-            }], _baseTemplate: [{
-                type: ViewChild,
-                args: ['baseTemplate']
-            }], openTrigger: [{
+            }], step: [{
                 type: Input
-            }], closeTrigger: [{
+            }], decimals: [{
                 type: Input
-            }], hasBackdrop: [{
+            }], decimalStep: [{
                 type: Input
-            }], backdropClass: [{
+            }], showSpinButtons: [{
                 type: Input
-            }], adaptivityEnabled: [{
+            }], minValue: [{
                 type: Input
-            }], onOpened: [{
-                type: Output
-            }], onClosed: [{
+            }], maxValue: [{
+                type: Input
+            }], _maskDirective: [{
+                type: ViewChild,
+                args: [IMaskDirective]
+            }] } });
+
+class AXColorPaletteInputComponent extends AXBaseComponent {
+    constructor(_elementRef, _cdr, _parent) {
+        super(_elementRef, _cdr);
+        this._parent = _parent;
+        this._rgba = {
+            r: 255,
+            g: 255,
+            b: 255,
+            a: 0
+        };
+        this._hex = "#000000";
+        _parent?._onInternalColorChanged$.subscribe(e => {
+            if (this._hex != AXColorUtil.toHex(e.color)) {
+                this._hex = AXColorUtil.toHex(e.color);
+                Object.assign(this._rgba, AXColorUtil.toRGB(e.color));
+            }
+        });
+    }
+    _handleChangeInputMode(e) {
+        // switch (this.inputMode) {
+        //     case 'rgba':
+        //         this.inputMode = 'hsla'
+        //         break;
+        //     case 'hsla':
+        //         this.inputMode = 'hwba'
+        //         break;
+        //     case 'hwba':
+        //         this.inputMode = 'hex'
+        //         break;
+        //     case 'hex':
+        //         this.inputMode = 'rgba'
+        //         break;
+        // }
+        this._parent.mode = (this._parent.mode == 'rgba' ? 'hex' : 'rgba');
+    }
+    _handleRGBAValueChanged(e) {
+        const { r, g, b, a } = this._rgba;
+        const _color = `rgba(${r},${g},${b},${a})`;
+        this._parent._onInternalColorChanged$.next({ color: AXColorUtil.toRGB(_color), mode: 'rgba' });
+    }
+    _handleHEXAValueChanged(e) {
+        this._parent._onInternalColorChanged$.next({ color: AXColorUtil.toHex(e.value), mode: 'hex' });
+    }
+}
+AXColorPaletteInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPaletteInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AXColorPaletteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input", usesInheritance: true, ngImport: i0, template: "<div class=\"palette-input-container\" [ngSwitch]=\"_parent.mode\">\r\n    <div class=\"palette-inputs\">\r\n        <ng-container *ngSwitchCase=\"'hex'\">\r\n            <div>\r\n                <ax-text-box class=\"ax-w-full\" [(value)]=\"_hex\"  [debounceTime]=\"300\" (onValueChanged)=\"_handleHEXAValueChanged($event)\">\r\n                </ax-text-box>\r\n                <label>HEX</label>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'rgba'\">\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.r\" [showSpinButtons]=\"false\"\r\n                    (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>R</label>\r\n            </div>\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.g\" [showSpinButtons]=\"false\"\r\n                    (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>G</label>\r\n            </div>\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.b\" [showSpinButtons]=\"false\"\r\n                    (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>B</label>\r\n            </div>\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"1\" [(value)]=\"_rgba.a\" [decimals]=\"2\" [step]=\"0.1\"\r\n                    [showSpinButtons]=\"false\" (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>A</label>\r\n            </div>\r\n        </ng-container>\r\n        <!-- <ng-container *ngSwitchCase=\"'hsla'\">\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>H</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>S</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>L</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>A</label>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'hwba'\">\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>H</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>W</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>B</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>A</label>\r\n            </div>\r\n        </ng-container> -->\r\n    </div>\r\n    <ax-button color=\"light\" class=\"ax-w-base\" (onClick)=\"_handleChangeInputMode($event)\">\r\n        <ax-icon class=\"ax-ic ax-ic-unfold\"></ax-icon>\r\n    </ax-button>\r\n</div>", components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked", "placeholder", "maxLength", "type", "autoComplete"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "size", "value", "placeholder", "maxLength", "allowNull", "debounceTime", "type", "autoComplete", "name", "checked", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-color-palette-input', encapsulation: ViewEncapsulation.None, template: "<div class=\"palette-input-container\" [ngSwitch]=\"_parent.mode\">\r\n    <div class=\"palette-inputs\">\r\n        <ng-container *ngSwitchCase=\"'hex'\">\r\n            <div>\r\n                <ax-text-box class=\"ax-w-full\" [(value)]=\"_hex\"  [debounceTime]=\"300\" (onValueChanged)=\"_handleHEXAValueChanged($event)\">\r\n                </ax-text-box>\r\n                <label>HEX</label>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'rgba'\">\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.r\" [showSpinButtons]=\"false\"\r\n                    (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>R</label>\r\n            </div>\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.g\" [showSpinButtons]=\"false\"\r\n                    (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>G</label>\r\n            </div>\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"255\" [(value)]=\"_rgba.b\" [showSpinButtons]=\"false\"\r\n                    (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>B</label>\r\n            </div>\r\n            <div>\r\n                <ax-number-box [minValue]=\"0\" [maxValue]=\"1\" [(value)]=\"_rgba.a\" [decimals]=\"2\" [step]=\"0.1\"\r\n                    [showSpinButtons]=\"false\" (onValueChanged)=\"_handleRGBAValueChanged($event)\">\r\n                </ax-number-box>\r\n                <label>A</label>\r\n            </div>\r\n        </ng-container>\r\n        <!-- <ng-container *ngSwitchCase=\"'hsla'\">\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>H</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>S</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>L</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>A</label>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'hwba'\">\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>H</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>W</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>B</label>\r\n            </div>\r\n            <div>\r\n                <ax-text-box [value]=\"'255'\">\r\n                </ax-text-box>\r\n                <label>A</label>\r\n            </div>\r\n        </ng-container> -->\r\n    </div>\r\n    <ax-button color=\"light\" class=\"ax-w-base\" (onClick)=\"_handleChangeInputMode($event)\">\r\n        <ax-icon class=\"ax-ic ax-ic-unfold\"></ax-icon>\r\n    </ax-button>\r\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXColorComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [AXColorComponent]
+                }] }]; } });
+
+class AXColorPalleteComponent extends AXBaseValueComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this._onInternalColorChanged$ = new Subject();
+        this.modeChange = new EventEmitter();
+        this._mode = 'hex';
+        //
+        this._onInternalColorChanged$.subscribe(e => {
+            this.value = e.color;
+        });
+    }
+    /**
+    *  A character value that specifies the separator character.
+    */
+    get mode() {
+        return this._mode;
+    }
+    set mode(v) {
+        this._setOption({
+            name: "mode",
+            value: v,
+        });
+    }
+}
+AXColorPalleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPalleteComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXColorPalleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", mode: "mode" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", modeChange: "modeChange" }, providers: [{ provide: AXColorComponent, useExisting: AXColorPalleteComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select='ax-header'></ng-content>\r\n\r\n<ng-container [ngTemplateOutlet]=\"default\"></ng-container>\r\n\r\n<ng-template #default>\r\n    <ax-color-palette-preview></ax-color-palette-preview>\r\n    <ax-color-palette-swatches></ax-color-palette-swatches>\r\n    <ng-content select=\"ax-color-palette-favorite\"></ng-content>\r\n    <ax-color-palette-input></ax-color-palette-input>\r\n</ng-template>\r\n<ng-content select='ax-footer'></ng-content>", components: [{ type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], directives: [{ type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPalleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-color-palette', changeDetection: ChangeDetectionStrategy.OnPush, inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT], encapsulation: ViewEncapsulation.None, providers: [{ provide: AXColorComponent, useExisting: AXColorPalleteComponent }], template: "<ng-content select='ax-header'></ng-content>\r\n\r\n<ng-container [ngTemplateOutlet]=\"default\"></ng-container>\r\n\r\n<ng-template #default>\r\n    <ax-color-palette-preview></ax-color-palette-preview>\r\n    <ax-color-palette-swatches></ax-color-palette-swatches>\r\n    <ng-content select=\"ax-color-palette-favorite\"></ng-content>\r\n    <ax-color-palette-input></ax-color-palette-input>\r\n</ng-template>\r\n<ng-content select='ax-footer'></ng-content>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { modeChange: [{
                 type: Output
-            }], _handleKeydownHandler: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
+            }], mode: [{
+                type: Input
+            }] } });
+
+class AXColorPalettePickerComponent {
+    constructor() { }
+    ngOnInit() { }
+}
+AXColorPalettePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPalettePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXColorPalettePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker", ngImport: i0, template: ``, isInline: true, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-color-palette-picker',
+                    template: ``,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class AXTextBoxModule {
+}
+AXTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXTextBoxModule, declarations: [AXTextBoxComponent], imports: [CommonModule,
+        FormsModule,
+        AXButtonModule,
+        AXDecoratorModule, i1$3.NgxMaskModule], exports: [AXTextBoxComponent] });
+AXTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXTextBoxModule, providers: [], imports: [[
+            CommonModule,
+            FormsModule,
+            AXButtonModule,
+            AXDecoratorModule,
+            NgxMaskModule.forChild()
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXTextBoxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        NgxMaskModule.forChild()
+                    ],
+                    exports: [AXTextBoxComponent],
+                    declarations: [AXTextBoxComponent],
+                    providers: [],
+                }]
+        }] });
+
+class AXLabelComponent extends AXBaseComponentMixin {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+    }
+    get target() {
+        return this._target;
+    }
+    set target(v) {
+        this._target = v;
+        this._cdr.markForCheck();
+    }
+}
+AXLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXLabelComponent, selector: "ax-label", inputs: { class: "class" }, usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"target\" [ngClass]=\"class\">\r\n    <ng-content></ng-content>\r\n</label>", directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<label [attr.for]=\"target\" [ngClass]=\"class\">\r\n    <ng-content></ng-content>\r\n</label>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { class: [{
+                type: Input
             }] } });
 
-class AXPopoverModule {
-}
-AXPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopoverModule, declarations: [AXPopoverComponent], imports: [CommonModule], exports: [AXPopoverComponent] });
-AXPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopoverModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopoverModule, decorators: [{
+const COMPONENT$g = [AXLabelComponent];
+const MODULES$h = [CommonModule];
+class AXLabelModule {
+}
+AXLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLabelModule, declarations: [AXLabelComponent], imports: [CommonModule], exports: [AXLabelComponent] });
+AXLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLabelModule, providers: [], imports: [[...MODULES$h]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLabelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT$g],
+                    imports: [...MODULES$h],
+                    exports: [...COMPONENT$g],
+                    providers: [],
+                }]
+        }] });
+
+const COMPONENT$f = [AXNumberBoxComponent];
+const MODULES$g = [
+    CommonModule,
+    FormsModule,
+    AXButtonModule,
+    AXDecoratorModule,
+    IMaskModule
+];
+class AXNumberBoxModule {
+}
+AXNumberBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXNumberBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXNumberBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXNumberBoxModule, declarations: [AXNumberBoxComponent], imports: [CommonModule,
+        FormsModule,
+        AXButtonModule,
+        AXDecoratorModule,
+        IMaskModule], exports: [AXNumberBoxComponent] });
+AXNumberBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXNumberBoxModule, providers: [], imports: [[...MODULES$g]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXNumberBoxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT$f],
+                    imports: [...MODULES$g],
+                    exports: [...COMPONENT$f],
+                    providers: [],
+                }]
+        }] });
+
+const MODULES$f = [
+    AXTextBoxModule,
+    AXLabelModule,
+    AXButtonModule,
+    AXDecoratorModule,
+    AXNumberBoxModule
+];
+const CONPONENTS = [
+    AXColorPalleteComponent,
+    AXColorPalettePreviewComponent,
+    AXColorPaletteSwatchesComponent,
+    AXColorPaletteInputComponent,
+    AXColorPalettePickerComponent
+];
+class AXColorPaletteModule {
+}
+AXColorPaletteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPaletteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXColorPaletteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPaletteModule, declarations: [AXColorPalleteComponent,
+        AXColorPalettePreviewComponent,
+        AXColorPaletteSwatchesComponent,
+        AXColorPaletteInputComponent,
+        AXColorPalettePickerComponent], imports: [CommonModule, AXTextBoxModule,
+        AXLabelModule,
+        AXButtonModule,
+        AXDecoratorModule,
+        AXNumberBoxModule], exports: [AXColorPalleteComponent,
+        AXColorPalettePreviewComponent,
+        AXColorPaletteSwatchesComponent,
+        AXColorPaletteInputComponent,
+        AXColorPalettePickerComponent] });
+AXColorPaletteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPaletteModule, providers: [], imports: [[CommonModule, ...MODULES$f]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPaletteModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [AXPopoverComponent],
-                    imports: [CommonModule],
-                    exports: [AXPopoverComponent],
-                    providers: []
+                    declarations: [...CONPONENTS],
+                    imports: [CommonModule, ...MODULES$f],
+                    exports: [...CONPONENTS],
+                    providers: [],
                 }]
         }] });
 
-class AXLoadingComponent extends AXBaseComponentMixin {
-    /**
-     * @ignore
-     */
+class AXCollapseComponent extends AXBaseComponent {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
-        this.visibleChange = new EventEmitter();
-        this.type = 'spinner';
+        this.cdr = cdr;
+        this.isCollapsedChange = new EventEmitter();
+        this._isCollapsed = false;
+        this.caption = null;
     }
-    get visible() {
-        return this._visible;
+    get isCollapsed() {
+        return this._isCollapsed;
     }
-    set visible(v) {
-        if (v != this._visible) {
-            this._visible = v;
-            v ? this._getHostElement().classList.remove('ax-hide') : this._getHostElement().classList.add('ax-hide');
-            this.visibleChange.emit(v);
+    set isCollapsed(v) {
+        if (v != this._isCollapsed) {
+            this._isCollapsed = v;
+            this.isCollapsedChange.emit(v);
+            this._cdr.detectChanges();
         }
     }
-    onInit() {
-        const loading = AXConfig.get(`layout.loading.${this.type}`);
-        this._selectedPortal = new ComponentPortal(loading);
-        this._cdr.markForCheck();
+    handleHeaderClick() {
+        this.isCollapsed = !this.isCollapsed;
     }
-    _handleAttched(ref) {
-        ref = ref;
-        if (ref.instance) {
-            ref.instance.text = this.text;
+}
+AXCollapseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCollapseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXCollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXCollapseComponent, selector: "ax-collapse", inputs: { isCollapsed: "isCollapsed", caption: "caption" }, outputs: { isCollapsedChange: "isCollapsedChange" }, host: { classAttribute: "ax-collapse" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\">\r\n    <ng-container *ngIf=\"headerTemplate;else header\">\r\n        <div class=\"ax-collapse-custom-header-container\" (click)=\"handleHeaderClick()\">\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: {caption,isCollapsed} }\"></ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-template #header>\r\n        <div class=\"ax-collapse-header-container\" (click)=\"handleHeaderClick()\">\r\n            <div>\r\n                <span class=\"ax-ic ax-ic-chevron ax-collapse-arrow ax-transition-all\"\r\n                    [class.ax-rotate-90]=\"isCollapsed\"></span>\r\n                <ng-content select=\"ax-prefix\"></ng-content>\r\n                <span>{{caption}}</span>\r\n            </div>\r\n            <div>\r\n                <ng-content select=\"ax-suffix\"></ng-content>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"ax-collapse-body ax-transition-all\" *ngIf=\"!isCollapsed\">\r\n    <ng-content></ng-content>\r\n</div>", directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCollapseComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-collapse', host: { class: 'ax-collapse' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\">\r\n    <ng-container *ngIf=\"headerTemplate;else header\">\r\n        <div class=\"ax-collapse-custom-header-container\" (click)=\"handleHeaderClick()\">\r\n            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: {caption,isCollapsed} }\"></ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-template #header>\r\n        <div class=\"ax-collapse-header-container\" (click)=\"handleHeaderClick()\">\r\n            <div>\r\n                <span class=\"ax-ic ax-ic-chevron ax-collapse-arrow ax-transition-all\"\r\n                    [class.ax-rotate-90]=\"isCollapsed\"></span>\r\n                <ng-content select=\"ax-prefix\"></ng-content>\r\n                <span>{{caption}}</span>\r\n            </div>\r\n            <div>\r\n                <ng-content select=\"ax-suffix\"></ng-content>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n\r\n<div class=\"ax-collapse-body ax-transition-all\" *ngIf=\"!isCollapsed\">\r\n    <ng-content></ng-content>\r\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { isCollapsedChange: [{
+                type: Output
+            }], isCollapsed: [{
+                type: Input
+            }], caption: [{
+                type: Input
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: ['header', { static: true }]
+            }] } });
+
+class AXCollapseGroupComponent extends AXBaseComponent {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.cdr = cdr;
+        this.accordion = false;
+        this.nonCollapsedIndex = 0;
+        this._subs = [];
+    }
+    onViewInit() {
+        if (this.accordion) {
+            this._items.forEach(c => c.isCollapsed = true);
+            this._items.get(this.nonCollapsedIndex).isCollapsed = false;
+            console.log(this._items[this.nonCollapsedIndex]);
+            this._items.forEach((c1) => {
+                this._subs.push(c1.isCollapsedChange.subscribe(e => {
+                    if (!e)
+                        this._items.toArray().filter(c2 => c2 != c1).forEach(c => c.isCollapsed = true);
+                }));
+            });
         }
     }
+    onDestroy() {
+        this._subs.forEach(s => s.unsubscribe());
+        this._subs = [];
+    }
 }
-AXLoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLoadingComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXLoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXLoadingComponent, selector: "ax-loading", inputs: { visible: "visible", type: "type", text: "text" }, outputs: { visibleChange: "visibleChange" }, host: { classAttribute: "ax-loading" }, usesInheritance: true, ngImport: i0, template: `
-        <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttched($event)"></ng-template>
-    `, isInline: true, directives: [{ type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLoadingComponent, decorators: [{
+AXCollapseGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCollapseGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXCollapseGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: { accordion: "accordion", nonCollapsedIndex: "nonCollapsedIndex" }, host: { classAttribute: "ax-collapse-group" }, queries: [{ propertyName: "_items", predicate: AXCollapseComponent }], usesInheritance: true, ngImport: i0, template: `<ng-content select="ax-collapse"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCollapseGroupComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ax-loading',
-                    template: `
-        <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttched($event)"></ng-template>
-    `,
+                    selector: 'ax-collapse-group',
+                    template: `<ng-content select="ax-collapse"></ng-content>`,
+                    host: { class: 'ax-collapse-group' },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    host: { class: 'ax-loading' }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { visibleChange: [{
-                type: Output
-            }], visible: [{
-                type: Input
-            }], type: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { accordion: [{
                 type: Input
-            }], text: [{
+            }], nonCollapsedIndex: [{
                 type: Input
+            }], _items: [{
+                type: ContentChildren,
+                args: [AXCollapseComponent]
             }] } });
 
-/**
- * The Button is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-class AXColorPickerComponent extends AXBaseSelectionDropdownMixin {
-    /**
-    *  @ignore
-    */
-    constructor(_elementRef, _cdr, _zone, _platform) {
+class AXCollapseModule {
+}
+AXCollapseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXCollapseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCollapseModule, declarations: [AXCollapseComponent, AXCollapseGroupComponent], imports: [CommonModule], exports: [AXCollapseComponent, AXCollapseGroupComponent] });
+AXCollapseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCollapseModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXCollapseModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXCollapseComponent, AXCollapseGroupComponent],
+                    imports: [CommonModule],
+                    exports: [AXCollapseComponent, AXCollapseGroupComponent],
+                    providers: [],
+                }]
+        }] });
+
+class AXPopoverComponent extends AXInteractiveComponenetMixin {
+    constructor(_elementRef, _cdr, _zone, _overlay, _platform, _viewContainerRef) {
         super(_elementRef, _cdr);
         this._elementRef = _elementRef;
         this._cdr = _cdr;
         this._zone = _zone;
+        this._overlay = _overlay;
         this._platform = _platform;
-        /**
-         *  Defines the clearButton.
-         */
-        this.clearButton = false;
-        /**
-         *  Defines the checkbox.
-         */
-        this.checkbox = false;
-        this._isMobile = false;
-        this._forceFocus = false;
-        this._isMobile = this._platform.is('Mobile');
-        this._platform.resize.subscribe(() => {
-            this._isMobile = this._platform.is('Mobile');
-            this.popover.dispose();
-            this._popoverWidth = this._isMobile ? null : this._target.offsetWidth;
-        });
+        this._viewContainerRef = _viewContainerRef;
+        this.position = [
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom'
+            }
+        ];
+        this._subs = [];
+        //
+        this.openTrigger = 'toggle';
+        //
+        this.closeTrigger = 'clickout';
+        //
+        this.hasBackdrop = false;
+        this.adaptivityEnabled = false;
+        //
+        this._mousePos = { x: 0, y: 0 };
+        this._isScrollAttached = false;
+        //
+        this.onOpened = new EventEmitter();
+        this.onClosed = new EventEmitter();
     }
-    get emptyTemplate() {
-        return this._contentEmptyTemplate;
+    get target() {
+        return this._target;
     }
-    _handleArrowClickEvent(e) {
-        e.nativeEvent.stopPropagation();
-        this.toggle();
+    set target(v) {
+        if (v instanceof HTMLElement)
+            this._target = v;
+        else if (v instanceof ElementRef)
+            this._target = v.nativeElement;
+        else if (v instanceof AXBaseComponent)
+            this._target = v._getInnerElement();
     }
-    _handleInputClickEvent(e) {
-        e.stopPropagation();
-        this.toggle();
+    _emitOnOpenedEvent() {
+        this.onOpened.emit({
+            component: this,
+            htmlElement: this._getHostElement()
+        });
     }
-    onInit() {
-        super.onInit();
-        this._target = this._elementRef.nativeElement;
-        this._popoverTitle = this.placeholder || AXTranslator.get('selectbox.popover.title');
+    _emitOnClosedEvent() {
+        this.onClosed.emit({
+            component: this,
+            htmlElement: this._getHostElement()
+        });
     }
+    //
     onViewInit() {
-        super.onViewInit();
-        this._popoverWidth = this._isMobile ? null : this._target.offsetWidth;
-    }
-    refresh() {
-        this.value = null;
-        super.refresh();
-    }
-    _handleOnItemClick(e, item) {
-        if (this.isItemDisabled(item)) {
-            return;
-        }
-        if (!this.multiple)
-            this.close();
-        this.toggleSelect(item);
-        this._cdr.detectChanges();
-    }
-    _handleListScroll(e) {
-        const list = e.target;
-        if ((list.scrollTop < list.scrollHeight - list.clientHeight)) {
-            return;
+        if (this._target) {
+            if (this.openTrigger === 'mouseover') {
+                const mouseEnter$ = fromEvent(this._target, 'mouseover');
+                this._addSub(mouseEnter$.subscribe(e => {
+                    const point = { x: e.clientX, y: e.clientY };
+                    if (AXDrawingUtil.isInElementBound(point, this._target))
+                        this.open();
+                }));
+            }
+            if (this.closeTrigger === 'mouseout') {
+                const mouseMove$ = fromEvent(document, 'mousemove');
+                this._addSub(mouseMove$.pipe(throttleTime(50)).subscribe(e => {
+                    this._mousePos.x = e.clientX;
+                    this._mousePos.y = e.clientY;
+                    if (this.isOpen) {
+                        setTimeout(() => {
+                            if (!_.some([this._target, this._overlayRef.overlayElement], el => _.includes(document.elementsFromPoint(this._mousePos.x, this._mousePos.y), el)))
+                                this.close();
+                        }, 100);
+                    }
+                }));
+            }
+            //
+            if (this.openTrigger === 'click' || this.openTrigger === 'toggle') {
+                const click$ = fromEvent(this._target, 'click');
+                this._addSub(click$.subscribe(e => {
+                    this.openTrigger == 'toggle' ? this.toggle() : this.open();
+                }));
+            }
         }
-        this._fetchData();
     }
-    _checkForLoadData() {
-        const list = this.listContainer.nativeElement;
-        if (this.loadedCount < this.totalCount && list.scrollHeight < ((list.parentElement.clientHeight) * 1.5)) {
-            this._fetchData();
-        }
+    //
+    onDestroy() {
+        this._overlayRef?.detach();
+        this._overlayRef?.dispose();
+        this._subs.forEach(s => {
+            s?.unsubscribe();
+        });
     }
-    _onDataLoaded() {
-        if (this.popover.isOpen) {
-            setTimeout(() => {
-                this._checkForLoadData();
-                this.popover.updatePosition();
-                if (this._forceFocus) {
-                    this._focusSelectedItem();
-                    this._forceFocus = false;
-                }
-            }, 100);
+    _handleKeydownHandler(e) {
+        // if (e.key === 'Enter' && e.type === 'keydown') {
+        //   this.toggle();
+        // }
+        if (e.key === 'Escape') {
+            if (this.isOpen) {
+                this.close();
+                e.stopPropagation();
+            }
         }
     }
-    _onValueChanged(oldValue, newValue) {
-        super._onValueChanged(oldValue, newValue);
+    toggle() {
+        this.isOpen ? this.close() : this.open();
     }
-    _handleOnRemoveItemClick(e, item) {
-        this.unselectItems(item);
-        e.stopPropagation();
+    //
+    close() {
+        if (!this.isOpen) {
+            return;
+        }
+        this._overlayRef?.detach();
+        this._emitOnClosedEvent();
     }
-    _handleBadgeRemove(e, item) {
-        this.unselectItems(item);
-        e.stopPropagation();
+    dispose() {
         this.close();
+        this._overlayRef?.dispose();
+        this._overlayRef = null;
     }
-    _handleKeydown(e) {
-        const isLetter = new RegExp(/[a-zA-Z0-9\-]/).test(String.fromCharCode(e.keyCode));
-        if (e.code === 'Backspace' && e.type === 'keydown' &&
-            ((this.allowNull === true && this.selectedItems.length > 0) ||
-                (this.allowNull !== true && this.selectedItems.length > 1))) {
-            this.isUserInput = true;
-            this.unselectItems(this.selectedItems.pop());
-            e.preventDefault();
+    //
+    open() {
+        if (this.isOpen) {
             return;
         }
-        else if ((e.code === 'ArrowDown' || e.code === 'ArrowUp' || e.code === 'Space') && !this.popover.isOpen && e.type === 'keydown') {
-            if (this.multiple) {
-                this.open();
+        this._ensureOverlayCreated();
+        this._overlayRef.attach(this._templatePortal);
+        this._emitOnOpenedEvent();
+    }
+    _ensureOverlayCreated() {
+        const targetRef = this._target;
+        if (!targetRef)
+            return;
+        if (!this._overlayRef) {
+            if (this._platform.is('Mobile') && this.adaptivityEnabled) {
+                this._openAsActionsheet();
             }
             else {
-                this.isUserInput = true;
-                if (e.ctrlKey || e.code === 'Space') {
-                    this.open();
-                }
-                else {
-                    this._selectedItemByNav((e.key === 'ArrowDown' ? 1 : -1));
-                }
+                this._openAsPopover(targetRef);
             }
-            e.preventDefault();
-            return;
-        }
-        else if (isLetter) {
-            this.text = e.key;
-            this.open();
-            e.preventDefault();
-            return;
-        }
-    }
-    _handlePopoverKeydown(e) {
-        if (e.target.tagName == "INPUT" && ['Space', 'Backspace'].includes(e.code))
-            return;
-        if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && this.displayItems.length > 0) {
-            this.isUserInput = true;
-            this._focusItemByNav((e.key === 'ArrowDown' ? 1 : -1));
-            e.preventDefault();
-        }
-        else if (e.code === 'Backspace' &&
-            ((this.allowNull === true && this.selectedItems.length > 0) ||
-                (this.allowNull !== true && this.selectedItems.length > 1))) {
-            this.isUserInput = true;
-            this.unselectItems(this.selectedItems.pop());
-            e.preventDefault();
-        }
-        else if ((e.code === 'Space' || e.code === 'Enter')) {
-            debugger;
-            e.preventDefault();
-            const focusedItemId = this.listContainer.nativeElement.querySelector('.ax-state-focus')?.dataset?.id;
-            const focusedItem = _.findLast(this.flatItems, [this.valueField, focusedItemId]);
-            if (focusedItem) {
-                if (this.isItemDisabled(focusedItem)) {
-                    return;
-                }
-                if (this.multiple) {
-                    this.isUserInput = true;
-                    this.toggleSelect(focusedItem);
-                }
-                else {
-                    this.isUserInput = true;
-                    this.selectItems(focusedItem);
-                    this.close();
-                }
+            if (this.closeTrigger == 'clickout') {
+                this._addSub(this._overlayRef._outsidePointerEvents.subscribe(c => {
+                    const target = c.target;
+                    const comElem = targetRef;
+                    if (!(comElem.contains(target))) {
+                        this.close();
+                    }
+                }));
             }
-        }
-        else if (e.code === "Tab") {
-            this.close();
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        else if (e.key === 'Escape') {
-            this.close();
-            e.preventDefault();
-            e.stopPropagation();
-        }
-    }
-    async _handlePopupOnOpened(e) {
-        this.popover.focus();
-        if (this.displayItems.length == 0) {
-            this._forceFocus = true;
-            this._fetchData();
-        }
-        else {
-            this._focusSelectedItem();
-        }
-        debugger;
-        if (this._searchBox && !this._isMobile) {
-            this._searchBox.focus();
-        }
-    }
-    _handlePopupOnClosed(e) {
-        this.focus();
-    }
-    _focusItemByNav(sign) {
-        const list = this.listContainer.nativeElement;
-        const fn = (s) => list.querySelector(s);
-        const itemDiv = fn(`.ax-list-item.ax-state-focus`) || fn(`.ax-list-item.ax-state-selected`) || fn(`.ax-list-item`);
-        let next = (sign == 1 ? itemDiv.nextElementSibling : itemDiv.previousElementSibling);
-        if (next) {
-            this._focusItemElement(next);
-        }
-        else {
-            const parent = itemDiv.closest('.ax-list-item-group');
-            if (parent) {
-                const lis = (sign == 1 ? parent.nextElementSibling : parent.previousElementSibling)?.querySelectorAll('li');
-                const a = sign == 1 ? _.first(lis) : _.last(lis);
-                if (a) {
-                    this._focusItemElement(a);
+            this._addSub(this._overlayRef.attachments().subscribe(() => {
+                if (!this._isScrollAttached) {
+                    this._addSub(this._platform.scroll.subscribe(c => {
+                        if (!c.nativeEvent.target.closest('.ax-overlay-pane'))
+                            this.updatePosition();
+                    }));
+                    this._isScrollAttached = true;
                 }
-            }
+            }));
+        }
+        if (!this._templatePortal) {
+            this._templatePortal = new TemplatePortal(this._baseTemplate, this._viewContainerRef);
         }
     }
-    _focusSelectedItem() {
-        this._zone.runOutsideAngular(() => {
-            const list = this.listContainer.nativeElement;
-            const fn = (s) => list.querySelector(s);
-            const itemDiv = fn(`.ax-list-item.ax-state-selected`) || fn(`.ax-list-item`);
-            if (itemDiv) {
-                this._focusItemElement(itemDiv);
-            }
+    _openAsPopover(targetRef) {
+        this._overlayRef = this._overlay.create({
+            positionStrategy: this._overlay.position()
+                .flexibleConnectedTo(targetRef)
+                .withPositions(Array.isArray(this.position) ? this.position : [this.position])
+                .withPush(false),
+            disposeOnNavigation: true,
+            panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
+            maxHeight: 'unset',
+            hasBackdrop: this.hasBackdrop,
+            backdropClass: [this.backdropClass || 'cdk-overlay-transparent-backdrop']
         });
     }
-    _focusItemElement(el) {
-        this._zone.runOutsideAngular(() => {
-            const list = this.listContainer.nativeElement;
-            list.querySelectorAll('.ax-list-item').forEach(c => {
-                if (c == el) {
-                    c.classList.add('ax-state-focus');
-                    el.scrollIntoView({ behavior: 'auto' });
-                }
-                else {
-                    c.classList.remove('ax-state-focus');
+    _openAsActionsheet() {
+        this._overlayRef = this._overlay.create({
+            positionStrategy: this._overlay.position().flexibleConnectedTo(document.body).withPositions([
+                {
+                    originX: 'center',
+                    originY: 'bottom',
+                    overlayX: 'center',
+                    overlayY: 'bottom'
                 }
-            });
-            if (!this._isMobile && this._searchBox)
-                this._searchBox.focus();
-            else
-                el.focus();
+            ]),
+            disposeOnNavigation: true,
+            panelClass: ['ax-animate-slideInUp', 'ax-animate-faster'],
+            hasBackdrop: true,
+            width: '100%'
         });
     }
-    _selectedItemByNav(sign) {
-        const last = _.last(this.selectedItems);
-        let i = 0;
-        if (last) {
-            i = _.findLastIndex(this.flatItems, [this.valueField, last[this.valueField]]);
-        }
-        i += sign;
-        let next = _.nth(this.flatItems, i);
-        while (next?.children && next?.children.length) {
-            i += sign;
-            next = _.nth(this.flatItems, i);
-        }
-        if (next) {
-            this.selectItems(next);
-        }
-        else if (next == null && sign == 1) {
-            this._fetchData();
-        }
-    }
-    _onSearchExprChanged(e) {
-        this.empty();
-        this._forceFocus = true;
-        this._fetchData();
+    get isOpen() {
+        return this._overlayRef ? this._overlayRef.hasAttached() : false;
     }
-    search(exp) {
-        debugger;
-        this.empty();
-        this._forceFocus = true;
-        this._fetchData();
+    _addSub(sub) {
+        this._subs.push(sub);
     }
-    _fetchData() {
-        super._fetchData({ searchQuery: this._searchBox?.searchExp });
+    updatePosition() {
+        this._overlayRef?.updatePosition();
+        this.focus();
     }
 }
-AXColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$3.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-AXColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete", clearButton: "clearButton", checkbox: "checkbox" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, classAttribute: "ax-editor-container ax-drop-down" }, providers: [
-        { provide: AXClosbaleComponent, useExisting: AXColorPickerComponent }
-    ], queries: [{ propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    \r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"true\"\r\n    (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"_searchBox ||  isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n       \r\n    </div>\r\n</ax-popover> ", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPickerComponent, decorators: [{
+AXPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.Overlay }, { token: i1$4.AXPlatform }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+AXPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXPopoverComponent, selector: "ax-popover", inputs: { target: "target", position: "position", openTrigger: "openTrigger", closeTrigger: "closeTrigger", hasBackdrop: "hasBackdrop", backdropClass: "backdropClass", adaptivityEnabled: "adaptivityEnabled" }, outputs: { onOpened: "onOpened", onClosed: "onClosed" }, host: { listeners: { "keydown": "_handleKeydownHandler($event)" } }, viewQueries: [{ propertyName: "_baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #baseTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-color-picker', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        { provide: AXClosbaleComponent, useExisting: AXColorPickerComponent }
-                    ], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    \r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"true\"\r\n    (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"_searchBox ||  isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n       \r\n    </div>\r\n</ax-popover> " }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$3.AXPlatform }]; }, propDecorators: { popover: [{
-                type: ViewChild,
-                args: [AXPopoverComponent, { static: true }]
-            }], clearButton: [{
+            args: [{ selector: 'ax-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #baseTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.Overlay }, { type: i1$4.AXPlatform }, { type: i0.ViewContainerRef }]; }, propDecorators: { target: [{
                 type: Input
-            }], checkbox: [{
+            }], position: [{
                 type: Input
-            }], listContainer: [{
+            }], _baseTemplate: [{
                 type: ViewChild,
-                args: ['listContainer', { static: true }]
-            }], _contentEmptyTemplate: [{
-                type: ContentChild,
-                args: ['emptyTemplate']
-            }], _handleKeydown: [{
+                args: ['baseTemplate']
+            }], openTrigger: [{
+                type: Input
+            }], closeTrigger: [{
+                type: Input
+            }], hasBackdrop: [{
+                type: Input
+            }], backdropClass: [{
+                type: Input
+            }], adaptivityEnabled: [{
+                type: Input
+            }], onOpened: [{
+                type: Output
+            }], onClosed: [{
+                type: Output
+            }], _handleKeydownHandler: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }] } });
 
+class AXPopoverModule {
+}
+AXPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopoverModule, declarations: [AXPopoverComponent], imports: [CommonModule], exports: [AXPopoverComponent] });
+AXPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopoverModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopoverModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXPopoverComponent],
+                    imports: [CommonModule],
+                    exports: [AXPopoverComponent],
+                    providers: []
+                }]
+        }] });
+
+const AXBaseColorPickerMixin = _InteractiveComponenetMixin(_DropdownComponenetMixin(_ValueComponenetMixin(_TextboxComponenetMixin(AXBaseComponent))));
 /**
- * The Textbox is a component which detects user interaction and triggers a corresponding event
+ * The Button is a component which detects user interaction and triggers a corresponding event
  *
  * @category Components
  */
-class AXTextBoxComponent extends AXBaseTextBoxMixin {
+class AXColorPickerComponent extends AXBaseColorPickerMixin {
     /**
     *  @ignore
     */
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
+    constructor(_elementRef, _cdr, _zone, _platform) {
+        super(_elementRef, _cdr);
+        this._elementRef = _elementRef;
+        this._zone = _zone;
+        this._platform = _platform;
+        this._mode = 'hex';
+        this._isMobile = false;
+        this._isMobile = this._platform.is('Mobile');
+        this._platform.resize.subscribe(() => {
+            this._isMobile = this._platform.is('Mobile');
+            this.popover.dispose();
+        });
+    }
+    _handleArrowClickEvent(e) {
+        e.nativeEvent.stopPropagation();
+        this.toggle();
+    }
+    _handleInputClickEvent(e) {
+        e.stopPropagation();
+        this.toggle();
+    }
+    onInit() {
+        super.onInit();
+        this._target = this._elementRef.nativeElement;
+    }
+    onViewInit() {
+        super.onViewInit();
+    }
+    _onValueChanged(oldValue, newValue) {
+        super._onValueChanged(oldValue, newValue);
+        this._colorCode = AXColorUtil.to(newValue, this._mode);
+    }
+    async _handlePopupOnOpened(e) {
+    }
+    _handlePopupOnClosed(e) {
+        this.focus();
     }
 }
-AXTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXTextBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXTextBoxComponent, selector: "ax-text-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-editor-container" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [attr.autocomplete]=\"autoComplete\" [attr.type]=\"type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\">\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>", directives: [{ type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXTextBoxComponent, decorators: [{
+AXColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$4.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
+AXColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, providers: [
+        { provide: AXClosbaleComponent, useExisting: AXColorPickerComponent }
+    ], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div *ngIf=\"value\" class=\"color-badge\" [ngStyle]=\"{'background-color': value}\"></div>\r\n    <div class=\"ax-uppercase\">{{_colorCode}}</div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\" *ngIf=\"value &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    [adaptivityEnabled]=\"true\"  (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-w-full]=\"_isMobile\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\">\r\n        <ax-color-palette [(value)]=\"value\" [(mode)]=\"_mode\">\r\n        </ax-color-palette>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked", "mode"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "modeChange"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-text-box', inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-editor-container' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" [attr.name]=\"name\" [attr.autocomplete]=\"autoComplete\" [attr.type]=\"type\" [attr.placeholder]=\"placeholder\" [attr.maxlength]=\"maxLength\"\r\n    [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\"\r\n    [readonly]=\"readonly\" [tabindex]=\"tabIndex\" [(ngModel)]=\"value\" (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\">\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-input-mask\">\r\n</ng-content>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+            args: [{ selector: 'ax-color-picker', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: AXClosbaleComponent, useExisting: AXColorPickerComponent }
+                    ], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div *ngIf=\"value\" class=\"color-badge\" [ngStyle]=\"{'background-color': value}\"></div>\r\n    <div class=\"ax-uppercase\">{{_colorCode}}</div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\" *ngIf=\"value &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    [adaptivityEnabled]=\"true\"  (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-w-full]=\"_isMobile\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\">\r\n        <ax-color-palette [(value)]=\"value\" [(mode)]=\"_mode\">\r\n        </ax-color-palette>\r\n    </div>\r\n</ax-popover>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$4.AXPlatform }]; }, propDecorators: { popover: [{
+                type: ViewChild,
+                args: [AXPopoverComponent, { static: true }]
+            }] } });
 
-class AXTextBoxModule {
+class AXLoadingComponent extends AXBaseComponentMixin {
+    /**
+     * @ignore
+     */
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.visibleChange = new EventEmitter();
+        this.type = 'spinner';
+    }
+    get visible() {
+        return this._visible;
+    }
+    set visible(v) {
+        if (v != this._visible) {
+            this._visible = v;
+            v ? this._getHostElement().classList.remove('ax-hide') : this._getHostElement().classList.add('ax-hide');
+            this.visibleChange.emit(v);
+        }
+    }
+    onInit() {
+        const loading = AXConfig.get(`layout.loading.${this.type}`);
+        this._selectedPortal = new ComponentPortal(loading);
+        this._cdr.markForCheck();
+    }
+    _handleAttched(ref) {
+        ref = ref;
+        if (ref.instance) {
+            ref.instance.text = this.text;
+        }
+    }
 }
-AXTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXTextBoxModule, declarations: [AXTextBoxComponent], imports: [CommonModule,
-        FormsModule,
-        AXButtonModule,
-        AXDecoratorModule, i1$5.NgxMaskModule], exports: [AXTextBoxComponent] });
-AXTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXTextBoxModule, providers: [], imports: [[
-            CommonModule,
-            FormsModule,
-            AXButtonModule,
-            AXDecoratorModule,
-            NgxMaskModule.forChild()
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXTextBoxModule, decorators: [{
-            type: NgModule,
+AXLoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLoadingComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXLoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXLoadingComponent, selector: "ax-loading", inputs: { visible: "visible", type: "type", text: "text" }, outputs: { visibleChange: "visibleChange" }, host: { classAttribute: "ax-loading" }, usesInheritance: true, ngImport: i0, template: `
+        <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttched($event)"></ng-template>
+    `, isInline: true, directives: [{ type: i1$5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLoadingComponent, decorators: [{
+            type: Component,
             args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        AXButtonModule,
-                        AXDecoratorModule,
-                        NgxMaskModule.forChild()
-                    ],
-                    exports: [AXTextBoxComponent],
-                    declarations: [AXTextBoxComponent],
-                    providers: [],
+                    selector: 'ax-loading',
+                    template: `
+        <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttched($event)"></ng-template>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'ax-loading' }
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { visibleChange: [{
+                type: Output
+            }], visible: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }] } });
 
 class AXLoadingSpinnerComponent {
 }
@@ -5057,8 +5544,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 args: ['axIsLoading']
             }] } });
 
-const COMPONENT$g = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
-const MODULES$g = [CommonModule, OverlayModule, PortalModule];
+const COMPONENT$e = [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent];
+const MODULES$e = [CommonModule, OverlayModule, PortalModule];
 class AXLoadingModule {
     constructor() {
         AXConfig.set({
@@ -5072,13 +5559,13 @@ class AXLoadingModule {
 }
 AXLoadingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXLoadingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLoadingModule, declarations: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent], imports: [CommonModule, OverlayModule, PortalModule], exports: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent] });
-AXLoadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLoadingModule, providers: [], imports: [[...MODULES$g]] });
+AXLoadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLoadingModule, providers: [], imports: [[...MODULES$e]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLoadingModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$g],
-                    imports: [...MODULES$g],
-                    exports: [...COMPONENT$g],
+                    declarations: [...COMPONENT$e],
+                    imports: [...MODULES$e],
+                    exports: [...COMPONENT$e],
                     providers: [],
                 }]
         }], ctorParameters: function () { return []; } });
@@ -5243,8 +5730,10 @@ AXColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         A11yModule,
         AXLoadingModule,
         AXTranslationModule,
-        AXTextBoxModule], exports: [AXColorPickerComponent] });
-AXColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPickerModule, providers: [], imports: [[CommonModule,
+        AXTextBoxModule,
+        AXColorPaletteModule], exports: [AXColorPickerComponent] });
+AXColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPickerModule, providers: [], imports: [[
+            CommonModule,
             AXCommonModule,
             FormsModule,
             AXDecoratorModule,
@@ -5253,12 +5742,14 @@ AXColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
             A11yModule,
             AXLoadingModule,
             AXTranslationModule,
-            AXTextBoxModule
+            AXTextBoxModule,
+            AXColorPaletteModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXColorPickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule,
+                    imports: [
+                        CommonModule,
                         AXCommonModule,
                         FormsModule,
                         AXDecoratorModule,
@@ -5267,7 +5758,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                         A11yModule,
                         AXLoadingModule,
                         AXTranslationModule,
-                        AXTextBoxModule
+                        AXTextBoxModule,
+                        AXColorPaletteModule
                     ],
                     exports: [AXColorPickerComponent],
                     declarations: [AXColorPickerComponent],
@@ -5320,7 +5812,7 @@ class AXDataListComponent extends AXBaseSelectionValueMixin {
     }
 }
 AXDataListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDataListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDataListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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 class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n                    <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n</div>", components: [{ type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$3.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXDataListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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 class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n                    <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n</div>", components: [{ type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDataListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-datalist', inputs: ['disabled', 'readonly', 'tabIndex', 'size', 'value', 'items', 'pageSize'], outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-list ax-list-container' }, template: "<div class=\"ax-list-items-container ax-default ax-vertical\" (scroll)=\"_handleListScroll($event)\" #container>\r\n    <ng-container *ngFor=\"let item of displayItems;trackBy : _trackByFunction\">\r\n        <ng-container *ngIf=\"itemTemplate; else elseTemplate\">\r\n            <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                </ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n                {{ item ? _getItemDisplayTextTemplte(item) : 'Loading...'}}\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            Empty!\r\n        </ng-template>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isLoading\">\r\n        <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #elseLoadingTemplate>\r\n            <div class=\"ax-list-loading-container\">\r\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n                    <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n</div>" }]
@@ -5344,19 +5836,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 type: Input
             }] } });
 
-const COMPONENT$f = [AXDataListComponent];
-const MODULES$f = [CommonModule, AXButtonModule, AXLoadingModule, AXTranslationModule];
+const COMPONENT$d = [AXDataListComponent];
+const MODULES$d = [CommonModule, AXButtonModule, AXLoadingModule, AXTranslationModule];
 class AXDataListModule {
 }
 AXDataListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDataListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXDataListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDataListModule, declarations: [AXDataListComponent], imports: [CommonModule, AXButtonModule, AXLoadingModule, AXTranslationModule], exports: [AXDataListComponent] });
-AXDataListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDataListModule, providers: [], imports: [[...MODULES$f]] });
+AXDataListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDataListModule, providers: [], imports: [[...MODULES$d]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDataListModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$f],
-                    imports: [...MODULES$f],
-                    exports: [...COMPONENT$f],
+                    declarations: [...COMPONENT$d],
+                    imports: [...MODULES$d],
+                    exports: [...COMPONENT$d],
                     providers: [],
                 }]
         }] });
@@ -5508,12 +6000,12 @@ class AXDatePickerComponent extends AXBaseDatePickerMixin {
         input.setSelectionRange(start, end);
     }
 }
-AXDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
+AXDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$4.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
 AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", format: "format", interface: "interface" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange", typeChange: "typeChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", formatChange: "formatChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, providers: [{ provide: AXClosbaleComponent, useExisting: AXDatePickerComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "_calendar", first: true, predicate: AXCalendarComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\r\n        [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n        [attr.tabindex]=\"_isMobile ? -1 : tabIndex\" [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (mouseup)=\"_handleOnInputClickEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\"\r\n        (keydown)=\"_handleOnKeydownEvent($event)\">\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-calendar-options\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"true\"\r\n    (onOpened)=\"_handlePopoverOpened($event)\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-w-full]=\"_isMobile\">\r\n        <ax-header *ngIf=\"_isMobile\" >\r\n            <ax-title text=\"{{placeholder || 'Choose a date'}}\"></ax-title>\r\n            <ax-close-button></ax-close-button>\r\n        </ax-header>\r\n        <ng-container *ngIf=\"interface === 'calendar'; then calendarTemplate; else pickerTemplate\"></ng-container>\r\n        <ng-template #calendarTemplate>\r\n            <ax-calendar #calendar [disabled]=\"disabled\" [readonly]=\"readonly\" [(value)]=\"value\" [min]=\"min\" [max]=\"max\"\r\n                [disabledDates]=\"disabledDates\" [holidayDates]=\"holidayDates\" [depth]=\"depth\"\r\n                (onNavigate)=\"_handleOnNavigate($event)\" [type]=\"type\">\r\n            </ax-calendar>\r\n        </ng-template>\r\n        <ng-template #pickerTemplate>\r\n        </ng-template>\r\n\r\n    </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { type: AXDecoratorHeaderComponent, selector: "ax-header" }, { type: AXDecoratorTitleComponent, selector: "ax-title", inputs: ["text"] }, { type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { type: AXCalendarComponent, selector: "ax-calendar", inputs: ["readonly", "allowNull", "value", "debounceTime", "name", "checked", "disabled", "tabIndex", "depth", "activeView", "min", "max", "disabledDates", "type", "holidayDates", "interface"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange", "typeChange", "disabledDatesChange", "holidayDatesChange", "onNavigate"] }], directives: [{ type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-date-picker', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...CALENDAR_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...CALENDAR_OUTPUTS], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXClosbaleComponent, useExisting: AXDatePickerComponent }], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\r\n        [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\"\r\n        [attr.tabindex]=\"_isMobile ? -1 : tabIndex\" [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (mouseup)=\"_handleOnInputClickEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\"\r\n        (keydown)=\"_handleOnKeydownEvent($event)\">\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-calendar-options\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"true\"\r\n    (onOpened)=\"_handlePopoverOpened($event)\">\r\n    <div class=\"ax-overlay-pane\" [class.ax-w-full]=\"_isMobile\">\r\n        <ax-header *ngIf=\"_isMobile\" >\r\n            <ax-title text=\"{{placeholder || 'Choose a date'}}\"></ax-title>\r\n            <ax-close-button></ax-close-button>\r\n        </ax-header>\r\n        <ng-container *ngIf=\"interface === 'calendar'; then calendarTemplate; else pickerTemplate\"></ng-container>\r\n        <ng-template #calendarTemplate>\r\n            <ax-calendar #calendar [disabled]=\"disabled\" [readonly]=\"readonly\" [(value)]=\"value\" [min]=\"min\" [max]=\"max\"\r\n                [disabledDates]=\"disabledDates\" [holidayDates]=\"holidayDates\" [depth]=\"depth\"\r\n                (onNavigate)=\"_handleOnNavigate($event)\" [type]=\"type\">\r\n            </ax-calendar>\r\n        </ng-template>\r\n        <ng-template #pickerTemplate>\r\n        </ng-template>\r\n\r\n    </div>\r\n</ax-popover>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.AXPlatform }]; }, propDecorators: { popover: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$4.AXPlatform }]; }, propDecorators: { popover: [{
                 type: ViewChild,
                 args: [AXPopoverComponent, { static: true }]
             }], _calendar: [{
@@ -5529,8 +6021,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 type: Input
             }] } });
 
-const COMPONENT$e = [AXDatePickerComponent];
-const MODULES$e = [
+const COMPONENT$c = [AXDatePickerComponent];
+const MODULES$c = [
     CommonModule,
     AXCalendarModule,
     AXTextBoxModule,
@@ -5551,13 +6043,13 @@ AXDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         AXDecoratorModule,
         AXDateTimeModule,
         FormsModule], exports: [AXDatePickerComponent] });
-AXDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDatepickerModule, providers: [], imports: [[...MODULES$e]] });
+AXDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDatepickerModule, providers: [], imports: [[...MODULES$c]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$e],
-                    imports: [...MODULES$e],
-                    exports: [...COMPONENT$e],
+                    declarations: [...COMPONENT$c],
+                    imports: [...MODULES$c],
+                    exports: [...COMPONENT$c],
                     providers: [],
                 }]
         }] });
@@ -5589,7 +6081,7 @@ class AXDialogComponent extends AXBaseComponentMixin {
     }
 }
 AXDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXDialogComponent, selector: "ax-dialog", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-dialog ax-{{options.type}}-default\" tabindex=\"0\" cdkDrag role=\"alert\" cdkDragHandle>\r\n        <div class=\"ax-dialog-icon-side\">\r\n            <i class=\"ax-dialog-icon {{_icon}}\"></i>\r\n        </div>\r\n        <div class=\"ax-dialog-content-side\">\r\n            <div class=\"ax-dialog-title\">{{options.title}}</div>\r\n            <div class=\"ax-dialog-content\">{{options.content}}</div>\r\n        </div>\r\n        <div class=\"ax-dialog-dismiss-icon\">\r\n            <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.dismissible\" (click)=\"close()\"></i>\r\n        </div>\r\n        <footer class=\"ax-dialog-footer\">\r\n            <ng-container *ngFor=\"let button of options.buttons\">\r\n                <ax-button [text]=\"button.text\"  [submitBehavior]=\"button.submitBehavior\" [cancelBehavior]=\"button.cancelBehavior\" (onClick)=\"_handleButtonClick(button)\" [class]=\"button.cssClass\" [look]=\"button.look\" [color]=\"button.color\"></ax-button>\r\n                <div class=\"ax-ml-2\"></div>\r\n            </ng-container>\r\n        </footer>\r\n    </div>\r\n\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i8.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.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: "13.3.9", type: AXDialogComponent, selector: "ax-dialog", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-dialog ax-{{options.type}}-default\" tabindex=\"0\" cdkDrag role=\"alert\" cdkDragHandle>\r\n        <div class=\"ax-dialog-icon-side\">\r\n            <i class=\"ax-dialog-icon {{_icon}}\"></i>\r\n        </div>\r\n        <div class=\"ax-dialog-content-side\">\r\n            <div class=\"ax-dialog-title\">{{options.title}}</div>\r\n            <div class=\"ax-dialog-content\">{{options.content}}</div>\r\n        </div>\r\n        <div class=\"ax-dialog-dismiss-icon\">\r\n            <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.dismissible\" (click)=\"close()\"></i>\r\n        </div>\r\n        <footer class=\"ax-dialog-footer\">\r\n            <ng-container *ngFor=\"let button of options.buttons\">\r\n                <ax-button [text]=\"button.text\"  [submitBehavior]=\"button.submitBehavior\" [cancelBehavior]=\"button.cancelBehavior\" (onClick)=\"_handleButtonClick(button)\" [class]=\"button.cssClass\" [look]=\"button.look\" [color]=\"button.color\"></ax-button>\r\n                <div class=\"ax-ml-2\"></div>\r\n            </ng-container>\r\n        </footer>\r\n    </div>\r\n\r\n</div>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" cdkTrapFocus>\r\n    <div class=\"ax-dialog ax-{{options.type}}-default\" tabindex=\"0\" cdkDrag role=\"alert\" cdkDragHandle>\r\n        <div class=\"ax-dialog-icon-side\">\r\n            <i class=\"ax-dialog-icon {{_icon}}\"></i>\r\n        </div>\r\n        <div class=\"ax-dialog-content-side\">\r\n            <div class=\"ax-dialog-title\">{{options.title}}</div>\r\n            <div class=\"ax-dialog-content\">{{options.content}}</div>\r\n        </div>\r\n        <div class=\"ax-dialog-dismiss-icon\">\r\n            <i class=\"ax-ic ax-ic-close\" *ngIf=\"options.dismissible\" (click)=\"close()\"></i>\r\n        </div>\r\n        <footer class=\"ax-dialog-footer\">\r\n            <ng-container *ngFor=\"let button of options.buttons\">\r\n                <ax-button [text]=\"button.text\"  [submitBehavior]=\"button.submitBehavior\" [cancelBehavior]=\"button.cancelBehavior\" (onClick)=\"_handleButtonClick(button)\" [class]=\"button.cssClass\" [look]=\"button.look\" [color]=\"button.color\"></ax-button>\r\n                <div class=\"ax-ml-2\"></div>\r\n            </ng-container>\r\n        </footer>\r\n    </div>\r\n\r\n</div>" }]
@@ -5882,19 +6374,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 }]
         }] });
 
-const COMPONENT$d = [AXDialogComponent];
-const MODULES$d = [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXDecoratorModule];
+const COMPONENT$b = [AXDialogComponent];
+const MODULES$b = [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXDecoratorModule];
 class AXDialogModule {
 }
 AXDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDialogModule, declarations: [AXDialogComponent], imports: [CommonModule, DragDropModule, A11yModule, AXButtonModule, AXPageModule, AXDecoratorModule], exports: [AXDialogComponent] });
-AXDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDialogModule, providers: [], imports: [[...MODULES$d]] });
+AXDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDialogModule, providers: [], imports: [[...MODULES$b]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXDialogModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$d],
-                    imports: [...MODULES$d],
-                    exports: [...COMPONENT$d],
+                    declarations: [...COMPONENT$b],
+                    imports: [...MODULES$b],
+                    exports: [...COMPONENT$b],
                     providers: [],
                 }]
         }] });
@@ -6032,14 +6524,17 @@ class AXFormComponent extends AXBaseComponentMixin {
     _getComponenets() {
         return Array.from(this._getHostElement().querySelectorAll('[ax-form-input="true"]'));
     }
-    validate() {
+    validate(...args) {
         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) => {
+            Promise.all(widgets.map((c) => c.__axContext__)
+                .filter(c => (args == null || args.length == 0) || args.includes(c.name))
+                .map((c) => c.validate()))
+                .then((rules) => {
                 const failed = rules.filter((c) => !c.result);
                 if (failed.length) {
                     reject({
@@ -6061,12 +6556,12 @@ class AXFormComponent extends AXBaseComponentMixin {
     }
 }
 AXFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXFormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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 });
+AXFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXFormComponent, selector: "ax-form", usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-form',
-                    template: '<div class="ax-form"><ng-content></ng-content></div>',
+                    template: '<ng-content></ng-content>',
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
@@ -6138,57 +6633,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 type: Input
             }] } });
 
-const COMPONENT$c = [AXInputMaskComponent];
-const MODULES$c = [CommonModule, NgxMaskModule.forRoot(), IMaskModule];
+const COMPONENT$a = [AXInputMaskComponent];
+const MODULES$a = [CommonModule, NgxMaskModule.forRoot(), IMaskModule];
 class AXInputMaskModule {
 }
 AXInputMaskModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXInputMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXInputMaskModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXInputMaskModule, declarations: [AXInputMaskComponent], imports: [CommonModule, i1$5.NgxMaskModule, IMaskModule], exports: [AXInputMaskComponent] });
-AXInputMaskModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXInputMaskModule, providers: [], imports: [[...MODULES$c]] });
+AXInputMaskModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXInputMaskModule, declarations: [AXInputMaskComponent], imports: [CommonModule, i1$3.NgxMaskModule, IMaskModule], exports: [AXInputMaskComponent] });
+AXInputMaskModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXInputMaskModule, providers: [], imports: [[...MODULES$a]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXInputMaskModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$c],
-                    imports: [...MODULES$c],
-                    exports: [...COMPONENT$c],
+                    declarations: [...COMPONENT$a],
+                    imports: [...MODULES$a],
+                    exports: [...COMPONENT$a],
                     providers: [],
                 }]
         }] });
 
-class AXLabelComponent extends AXBaseComponentMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
+class AXSearchBoxComponent extends AXBaseComponentMixin {
+    constructor(_elementRef, _cdr, _parent) {
+        super(_elementRef, _cdr);
+        this._parent = _parent;
+        this.placeholder = 'common.search';
+        this.debounceTime = 500;
+        this.searchExp = null;
     }
-    get target() {
-        return this._target;
+    _onSearchExprChanged(e) {
+        if (this._parent && this._parent.search) {
+            this._parent.search(e.value);
+        }
     }
-    set target(v) {
-        this._target = v;
-        this._cdr.markForCheck();
+    focus() {
+        this._textbox?.focus();
+    }
+    clear() {
+        this._textbox._setValue(null);
     }
 }
-AXLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXLabelComponent, selector: "ax-label", inputs: { class: "class" }, usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"target\" [ngClass]=\"class\">\r\n    <ng-content></ng-content>\r\n</label>", directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLabelComponent, decorators: [{
+AXSearchBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXSearchableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AXSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: { placeholder: "placeholder", debounceTime: "debounceTime", searchExp: "searchExp" }, viewQueries: [{ propertyName: "_textbox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box  placeholder=\"{{ placeholder | trans }}\" [debounceTime]=\"debounceTime\" \r\n    [(value)]=\"searchExp\" (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n    <ax-prefix>\r\n        <ax-icon class=\"ax-ic ax-ic-magnify\" >\r\n        </ax-icon>\r\n    </ax-prefix>\r\n    <ax-suffix>\r\n        <ax-button look=\"blank\" color=\"danger\" *ngIf=\"searchExp\" (onClick)=\"clear()\">\r\n            <ax-icon class=\"ax-ic ax-ic-close\">\r\n            </ax-icon>\r\n        </ax-button>\r\n    </ax-suffix>\r\n</ax-text-box>", components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked", "placeholder", "maxLength", "type", "autoComplete"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<label [attr.for]=\"target\" [ngClass]=\"class\">\r\n    <ng-content></ng-content>\r\n</label>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { class: [{
+            args: [{ selector: 'ax-search-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ax-text-box  placeholder=\"{{ placeholder | trans }}\" [debounceTime]=\"debounceTime\" \r\n    [(value)]=\"searchExp\" (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n    <ax-prefix>\r\n        <ax-icon class=\"ax-ic ax-ic-magnify\" >\r\n        </ax-icon>\r\n    </ax-prefix>\r\n    <ax-suffix>\r\n        <ax-button look=\"blank\" color=\"danger\" *ngIf=\"searchExp\" (onClick)=\"clear()\">\r\n            <ax-icon class=\"ax-ic ax-ic-close\">\r\n            </ax-icon>\r\n        </ax-button>\r\n    </ax-suffix>\r\n</ax-text-box>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXSearchableComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [AXSearchableComponent]
+                }] }]; }, propDecorators: { _textbox: [{
+                type: ViewChild,
+                args: [AXTextBoxComponent]
+            }], placeholder: [{
+                type: Input
+            }], debounceTime: [{
+                type: Input
+            }], searchExp: [{
                 type: Input
             }] } });
 
-const COMPONENT$b = [AXLabelComponent];
-const MODULES$b = [CommonModule];
-class AXLabelModule {
+const COMPONENT$9 = [AXSearchBoxComponent];
+const MODULES$9 = [CommonModule, AXTranslationModule, AXDecoratorModule, AXTextBoxModule, AXButtonModule];
+class AXSearchBoxModule {
 }
-AXLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLabelModule, declarations: [AXLabelComponent], imports: [CommonModule], exports: [AXLabelComponent] });
-AXLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLabelModule, providers: [], imports: [[...MODULES$b]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXLabelModule, decorators: [{
+AXSearchBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSearchBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchBoxModule, declarations: [AXSearchBoxComponent], imports: [CommonModule, AXTranslationModule, AXDecoratorModule, AXTextBoxModule, AXButtonModule], exports: [AXSearchBoxComponent] });
+AXSearchBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchBoxModule, providers: [], imports: [[...MODULES$9]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$b],
-                    imports: [...MODULES$b],
-                    exports: [...COMPONENT$b],
+                    declarations: [...COMPONENT$9],
+                    imports: [...MODULES$9],
+                    exports: [...COMPONENT$9],
                     providers: [],
                 }]
         }] });
@@ -6203,6 +6718,19 @@ class AXMenuComponent extends AXBaseMenuMixin {
         super(elementRef, cdr);
         this.elementRef = elementRef;
         this.cdr = cdr;
+        this._forceFocus = false;
+        window.addEventListener('click', (e) => {
+            if (this.displayItems.length > 0) {
+                const target = document.querySelector('UL');
+                if (e.target != target) {
+                    this.displayItems.forEach((element) => {
+                        element.isActive = false;
+                        element.isOpen = false;
+                    });
+                    cdr.detectChanges();
+                }
+            }
+        });
     }
     get emptyTemplate() {
         return this._contentEmptyTemplate;
@@ -6272,328 +6800,104 @@ class AXMenuComponent extends AXBaseMenuMixin {
             this.onMenuItemClick.emit({
                 component: this,
                 item: item,
-                nativeEvent: e,
-            });
-            if (item.isOpen && item[this.hasChildField] && !item.children) {
-                item.isLoading = true;
-                this._fetchData(item[this.valueField]).then(() => {
-                    item.isLoading = false;
-                });
-            }
-        }
-        e.stopPropagation();
-        e.preventDefault();
-    }
-    _onMouseLeave(item) {
-        if (!item[this.disableField] && this.openMode === 'hover') {
-            if (item.children?.length > 0 || item[this.hasChildField]) {
-                if (item.children?.length > 0) {
-                    this._closeChild(item.children);
-                }
-                item.isOpen = false;
-            }
-        }
-    }
-    _notActive(items) {
-        items.forEach((element) => {
-            element.isActive = false;
-            if (element.children?.length > 0) {
-                this._notActive(element.children);
-            }
-        });
-    }
-    _closeChild(items) {
-        items.forEach((element) => {
-            element.isOpen = false;
-            if (element.children?.length > 0) {
-                this._closeChild(element.children);
-            }
-        });
-    }
-    _setParentNode(item, parentId) {
-        item.forEach((element) => {
-            element.parentId = parentId;
-        });
-    }
-    _getDirection() {
-        if (this.direction === 'horizontal') {
-            return 'horizontal-mode';
-        }
-        else {
-            return 'vertical-mode';
-        }
-    }
-}
-AXMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXMenuComponent, selector: "ax-menu", inputs: { disabled: "disabled", tabIndex: "tabIndex", textField: "textField", valueField: "valueField", items: "items", id: "id", parentId: "parentId", iconField: "iconField", tooltip: "tooltip", isOpen: "isOpen", isActive: "isActive", visibleField: "visibleField", disableField: "disableField", hasChildField: "hasChildField", openMode: "openMode", direction: "direction" }, outputs: { onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-menu" }, queries: [{ propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ul [ngClass]=\"_getDirection()\">\r\n  <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: displayItems }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #recursiveListTmpl let-list=\"list\">\r\n  <ng-container *ngFor=\"let item of list;  trackBy: _trackLoaded\">\r\n    <li *ngIf=\"item[visibleField] !=false\" [class.ax-state-disabled]=\"item[disableField]\"\r\n      (click)=\"_onMenuClick($event,item)\" (mouseenter)=\"_onMouseEnter($event,item)\" (mouseleave)=\"_onMouseLeave(item)\">\r\n      <a [ngClass]=\"{'active': item.isActive}\">\r\n        <div class=\"ax-menu-start-side\">\r\n          <ax-icon *ngIf=\"item[iconField]\" [class]=\"item[iconField]\"></ax-icon>\r\n          <span>{{_getItemDisplayTextTemplte(item)}}</span>\r\n        </div>\r\n        <div *ngIf=\"item?.children?.length > 0 || item[hasChildField]\" class=\"ax-menu-end-side\">\r\n          <ax-icon *ngIf=\"!item.isLoading\" [ngClass]=\"{'active-icon': item.isOpen}\" class=\"ax-ic-chevron\">\r\n          </ax-icon>\r\n          <ax-loading *ngIf=\"item.isLoading\">\r\n          </ax-loading>\r\n        </div>\r\n      </a>\r\n      <ul [class.ax-state-disabled]=\"item[disableField]\" *ngIf=\"item?.children?.length > 0 && item.isOpen\">\r\n        <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-container *ngIf=\"isLoading\">\r\n  <ng-template>\r\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n      <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n<ng-template #tmpEmpty>\r\n  <ng-container *ngIf=\"!isLoading\">\r\n    <!--------------- check for custom template  --------------->\r\n    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-template #elseEmptyTemplate>\r\n      <div class=\"ax-list-item\">\r\n        {{ 'common.no-result-found' | trans }}\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>", components: [{ type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "trans": i1$3.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-menu', inputs: [...INTERACTIVE_INPUTS, ...BASEMENU_INPUTS], outputs: [...INTERACTIVE_OUTPUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-menu' }, template: "<ul [ngClass]=\"_getDirection()\">\r\n  <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: displayItems }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #recursiveListTmpl let-list=\"list\">\r\n  <ng-container *ngFor=\"let item of list;  trackBy: _trackLoaded\">\r\n    <li *ngIf=\"item[visibleField] !=false\" [class.ax-state-disabled]=\"item[disableField]\"\r\n      (click)=\"_onMenuClick($event,item)\" (mouseenter)=\"_onMouseEnter($event,item)\" (mouseleave)=\"_onMouseLeave(item)\">\r\n      <a [ngClass]=\"{'active': item.isActive}\">\r\n        <div class=\"ax-menu-start-side\">\r\n          <ax-icon *ngIf=\"item[iconField]\" [class]=\"item[iconField]\"></ax-icon>\r\n          <span>{{_getItemDisplayTextTemplte(item)}}</span>\r\n        </div>\r\n        <div *ngIf=\"item?.children?.length > 0 || item[hasChildField]\" class=\"ax-menu-end-side\">\r\n          <ax-icon *ngIf=\"!item.isLoading\" [ngClass]=\"{'active-icon': item.isOpen}\" class=\"ax-ic-chevron\">\r\n          </ax-icon>\r\n          <ax-loading *ngIf=\"item.isLoading\">\r\n          </ax-loading>\r\n        </div>\r\n      </a>\r\n      <ul [class.ax-state-disabled]=\"item[disableField]\" *ngIf=\"item?.children?.length > 0 && item.isOpen\">\r\n        <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-container *ngIf=\"isLoading\">\r\n  <ng-template>\r\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n      <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n<ng-template #tmpEmpty>\r\n  <ng-container *ngIf=\"!isLoading\">\r\n    <!--------------- check for custom template  --------------->\r\n    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-template #elseEmptyTemplate>\r\n      <div class=\"ax-list-item\">\r\n        {{ 'common.no-result-found' | trans }}\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _contentEmptyTemplate: [{
-                type: ContentChild,
-                args: ['emptyTemplate']
-            }] } });
-
-const COMPONENT$a = [AXMenuComponent];
-const MODULES$a = [CommonModule, AXDecoratorModule];
-class AXMenuModule {
-}
-AXMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXMenuModule, declarations: [AXMenuComponent], imports: [CommonModule, AXDecoratorModule, AXLoadingModule,
-        AXTranslationModule,
-        AXPopoverModule], exports: [AXMenuComponent] });
-AXMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXMenuModule, providers: [], imports: [[
-            ...MODULES$a,
-            AXLoadingModule,
-            AXTranslationModule,
-            AXPopoverModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXMenuModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...COMPONENT$a],
-                    imports: [
-                        ...MODULES$a,
-                        AXLoadingModule,
-                        AXTranslationModule,
-                        AXPopoverModule,
-                    ],
-                    exports: [...COMPONENT$a],
-                    providers: [],
-                }]
-        }] });
-
-/**
- * The NumberBox is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-class AXNumberBoxComponent extends AXBaseTextBoxMixin {
-    /**
-    *  @ignore
-    */
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-        this.cdr = cdr;
-        this._padDecimalZeros = false;
-        /**
-       *  Specifies the value that is used to increment or decrement the **Integer** part of number
-       */
-        this.step = 1;
-        this._decimals = 0;
-        /**
-        *  Specifies the value that is used to increment or decrement the **Deciaml** part of number
-        */
-        this.decimalStep = 'auto';
-        /**
-        *  Specifies whether the Up and Down spin buttons will be rendered or not
-        */
-        this.showSpinButtons = true;
-        this._minValue = Number.MIN_SAFE_INTEGER;
-        this._maxValue = Number.MAX_SAFE_INTEGER;
-    }
-    /**
-    *  A character value that specifies the separator character.
-    */
-    get thousandsSeparator() {
-        return this._thousandsSeparator;
-    }
-    set thousandsSeparator(v) {
-        this._setOption({
-            name: "thousandsSeparator",
-            value: v ?? '',
-        });
-    }
-    /**
-    *  A character value that specifies the separator character.
-    */
-    get padDecimalZeros() {
-        return this._padDecimalZeros;
-    }
-    set padDecimalZeros(v) {
-        this._setOption({
-            name: "padDecimalZeros",
-            value: v,
-        });
-    }
-    /**
-    *  Specifies the number of decimals that the user can enter
-    */
-    get decimals() {
-        return this._decimals;
-    }
-    set decimals(v) {
-        this._setOption({
-            name: "decimals",
-            value: v ?? 0,
-        });
-    }
-    /**
-    *  Specifies the smallest value that is valid
-    */
-    get minValue() {
-        return this._minValue;
-    }
-    set minValue(v) {
-        this._setOption({
-            name: "minValue",
-            value: v != null ? Number(v) : Number.MIN_SAFE_INTEGER,
-        });
-    }
-    /**
-    *  Specifies the greatest value that is valid
-    */
-    get maxValue() {
-        return this._maxValue;
-    }
-    set maxValue(v) {
-        this._setOption({
-            name: "maxValue",
-            value: v != null ? Number(v) : Number.MAX_SAFE_INTEGER,
-        });
-    }
-    onViewInit() {
-        super.onViewInit();
-        this._updateMask();
-    }
-    _onOptionChanged(option) {
-        super._onOptionChanged(option);
-        this._updateMask();
-    }
-    _updateMask() {
-        if (!this._maskObj) {
-            this._maskObj = IMask.createMask({
-                mask: Number,
-                min: this.minValue,
-                max: this.maxValue,
-                thousandsSeparator: this.thousandsSeparator || '',
-                scale: this.decimals,
-                radix: '.',
-                padFractionalZeros: this.decimals > 0 && this.padDecimalZeros
-            });
-        }
-        else {
-            this._maskObj.updateOptions({
-                min: this.minValue,
-                max: this.maxValue,
-                thousandsSeparator: this.thousandsSeparator || '',
-                scale: this.decimals,
-                radix: '.',
-                padFractionalZeros: this.decimals > 0 && this.padDecimalZeros
+                nativeEvent: e,
             });
+            if (item.isOpen && item[this.hasChildField] && !item.children) {
+                item.isLoading = true;
+                this._fetchData(item[this.valueField]).then(() => {
+                    item.isLoading = false;
+                });
+            }
         }
-        this._maskDirective?.maskRef?.updateValue();
-        this._maskDirective?.maskRef?.updateControl();
+        e.stopPropagation();
+        e.preventDefault();
     }
-    _handleOnKeydownEvent(e) {
-        const ignore = () => {
-            e.preventDefault();
-            e.stopPropagation();
-        };
-        const input = e.target;
-        const valStr = input.value;
-        const decimalPointIndex = valStr.indexOf('.');
-        const _cursorPos = input.selectionStart;
-        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-            if (decimalPointIndex > 0 && _cursorPos > decimalPointIndex && this.decimals > 0) {
-                e.key === 'ArrowDown' ? this.decimalStepDown() : this.decimalStepUp();
-            }
-            else {
-                e.key === 'ArrowDown' ? this.stepDown() : this.stepUp();
+    _onMouseLeave(item) {
+        if (!item[this.disableField] && this.openMode === 'hover') {
+            if (item.children?.length > 0 || item[this.hasChildField]) {
+                if (item.children?.length > 0) {
+                    this._closeChild(item.children);
+                }
+                item.isOpen = false;
             }
-            ignore();
-            setTimeout(() => {
-                input.setSelectionRange(_cursorPos, _cursorPos);
-            }, 5);
         }
-        super._emitOnKeydownEvent(e);
-    }
-    _handleUpDownClick(e, v) {
-        v == 1 ? this.stepUp() : this.stepDown();
     }
-    _onValueChanging(value) {
-        const v = _.toNumber(value);
-        if (v < this.minValue)
-            return this.minValue;
-        if (v > this.maxValue)
-            return this.maxValue;
-        return v;
+    _notActive(items) {
+        items.forEach((element) => {
+            element.isActive = false;
+            if (element.children?.length > 0) {
+                this._notActive(element.children);
+            }
+        });
     }
-    stepUp() {
-        this.value += _.toNumber(this.step);
+    _closeChild(items) {
+        items.forEach((element) => {
+            element.isOpen = false;
+            if (element.children?.length > 0) {
+                this._closeChild(element.children);
+            }
+        });
     }
-    stepDown() {
-        this.value -= _.toNumber(this.step);
+    _setParentNode(item, parentId) {
+        item.forEach((element) => {
+            element.parentId = parentId;
+        });
     }
-    decimalStepUp() {
-        this.value += _.toNumber(this.decimalStep == 'auto' ? (1 / Math.pow(10, this.decimals)) : this.decimalStep);
+    _onSearchExprChanged(e) {
+        // this.empty();
+        this._forceFocus = true;
+        this._fetchData(null, this._searchBox?.searchExp);
     }
-    decimalStepDown() {
-        this.value -= _.toNumber(this.decimalStep == 'auto' ? (1 / Math.pow(10, this.decimals)) : this.decimalStep);
+    _getDirection() {
+        if (this.direction === 'horizontal') {
+            return 'horizontal-mode';
+        }
+        else {
+            return 'vertical-mode';
+        }
     }
 }
-AXNumberBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXNumberBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXNumberBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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", type: "type", autoComplete: "autoComplete", name: "name", checked: "checked", thousandsSeparator: "thousandsSeparator", padDecimalZeros: "padDecimalZeros", step: "step", decimals: "decimals", decimalStep: "decimalStep", showSpinButtons: "showSpinButtons", minValue: "minValue", maxValue: "maxValue" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-editor-container" }, viewQueries: [{ propertyName: "_maskDirective", first: true, predicate: IMaskDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\"  \r\n    [attr.placeholder]=\"placeholder\" \r\n    [imask]=\"_maskObj\" \r\n    [unmask]=\"'typed'\"\r\n    [attr.min]=\"minValue\"\r\n    [attr.max]=\"maxValue\" \r\n    [class.ax-state-disabled]=\"disabled\" \r\n    [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" \r\n    [readonly]=\"readonly\" \r\n    [tabindex]=\"tabIndex\" \r\n    [(ngModel)]=\"value\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" \r\n    (blur)=\"_emitOnFocusEvent($event)\" \r\n    (keydown)=\"_handleOnKeydownEvent($event)\"\r\n    [attr.autocomplete]=\"autoComplete\">\r\n\r\n<div class=\"ax-number-box-arrows\" *ngIf=\"showSpinButtons && !(disabled || readonly)\">\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax-rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,-1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax--rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXNumberBoxComponent, decorators: [{
+AXMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXMenuComponent, selector: "ax-menu", inputs: { disabled: "disabled", tabIndex: "tabIndex", textField: "textField", valueField: "valueField", items: "items", id: "id", parentId: "parentId", iconField: "iconField", tooltip: "tooltip", isOpen: "isOpen", isActive: "isActive", visibleField: "visibleField", disableField: "disableField", hasChildField: "hasChildField", openMode: "openMode", direction: "direction" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onMenuItemClick: "onMenuItemClick" }, host: { classAttribute: "ax-menu" }, queries: [{ propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "_searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ul [ngClass]=\"_getDirection()\">\r\n  <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: displayItems }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #recursiveListTmpl let-list=\"list\">\r\n  <ng-container *ngFor=\"let item of list;  trackBy: _trackLoaded\">\r\n    <li *ngIf=\"item[visibleField] !=false\" [class.ax-state-disabled]=\"item[disableField]\"\r\n      (click)=\"_onMenuClick($event,item)\" (mouseenter)=\"_onMouseEnter($event,item)\" (mouseleave)=\"_onMouseLeave(item)\">\r\n      <a [ngClass]=\"{'active': item.isActive}\">\r\n        <div class=\"ax-menu-start-side\">\r\n          <ax-icon *ngIf=\"item[iconField]\" [class]=\"item[iconField]\"></ax-icon>\r\n          <span>{{_getItemDisplayTextTemplte(item)}}</span>\r\n        </div>\r\n        <div class=\"ax-menu-end-side\">\r\n          <ax-icon *ngIf=\"!item.isLoading\"\r\n            [ngClass]=\"{'ax-ic-chevron':item?.children?.length > 0 || item[hasChildField],'active-icon': item.isOpen}\">\r\n          </ax-icon>\r\n          <ax-loading *ngIf=\"item.isLoading\">\r\n          </ax-loading>\r\n        </div>\r\n      </a>\r\n      <ul [class.ax-state-disabled]=\"item[disableField]\" *ngIf=\"item?.children?.length > 0 && item.isOpen\">\r\n        <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-container *ngIf=\"isLoading\">\r\n  <ng-template>\r\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n      <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n<ng-template #tmpEmpty>\r\n  <ng-container *ngIf=\"!isLoading\">\r\n    <!--------------- check for custom template  --------------->\r\n    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-template #elseEmptyTemplate>\r\n      <div class=\"ax-list-item\">\r\n        {{ 'common.no-result-found' | trans }}\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>", components: [{ type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-number-box', inputs: [
-                        'disabled',
-                        'readonly',
-                        'tabIndex',
-                        'size',
-                        'value',
-                        ...TEXTBOX_INPUTS,
-                    ], outputs: [
-                        'valueChange',
-                        'onValueChanged',
-                        'onBlur',
-                        'onFocus',
-                        ...TEXTBOX_OUTPUT,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<input class=\"ax-input\" type=\"text\"  \r\n    [attr.placeholder]=\"placeholder\" \r\n    [imask]=\"_maskObj\" \r\n    [unmask]=\"'typed'\"\r\n    [attr.min]=\"minValue\"\r\n    [attr.max]=\"maxValue\" \r\n    [class.ax-state-disabled]=\"disabled\" \r\n    [class.ax-state-readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" \r\n    [readonly]=\"readonly\" \r\n    [tabindex]=\"tabIndex\" \r\n    [(ngModel)]=\"value\"\r\n    (focus)=\"_emitOnFocusEvent($event)\" \r\n    (blur)=\"_emitOnFocusEvent($event)\" \r\n    (keydown)=\"_handleOnKeydownEvent($event)\"\r\n    [attr.autocomplete]=\"autoComplete\">\r\n\r\n<div class=\"ax-number-box-arrows\" *ngIf=\"showSpinButtons && !(disabled || readonly)\">\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax-rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n    <ax-button color=\"light\" look=\"blank\" (onClick)=\"_handleUpDownClick($event,-1)\">\r\n        <ax-prefix>\r\n            <ax-icon class=\"ax-ic-arrow-fill ax--rotate-90\">\r\n            </ax-icon>\r\n        </ax-prefix>\r\n    </ax-button>\r\n</div>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { thousandsSeparator: [{
-                type: Input
-            }], padDecimalZeros: [{
-                type: Input
-            }], step: [{
-                type: Input
-            }], decimals: [{
-                type: Input
-            }], decimalStep: [{
-                type: Input
-            }], showSpinButtons: [{
-                type: Input
-            }], minValue: [{
-                type: Input
-            }], maxValue: [{
-                type: Input
-            }], _maskDirective: [{
+            args: [{ selector: 'ax-menu', inputs: [...INTERACTIVE_INPUTS, ...BASEMENU_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...BASEMENU_OUTPUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-menu' }, template: "<ul [ngClass]=\"_getDirection()\">\r\n  <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: displayItems }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #recursiveListTmpl let-list=\"list\">\r\n  <ng-container *ngFor=\"let item of list;  trackBy: _trackLoaded\">\r\n    <li *ngIf=\"item[visibleField] !=false\" [class.ax-state-disabled]=\"item[disableField]\"\r\n      (click)=\"_onMenuClick($event,item)\" (mouseenter)=\"_onMouseEnter($event,item)\" (mouseleave)=\"_onMouseLeave(item)\">\r\n      <a [ngClass]=\"{'active': item.isActive}\">\r\n        <div class=\"ax-menu-start-side\">\r\n          <ax-icon *ngIf=\"item[iconField]\" [class]=\"item[iconField]\"></ax-icon>\r\n          <span>{{_getItemDisplayTextTemplte(item)}}</span>\r\n        </div>\r\n        <div class=\"ax-menu-end-side\">\r\n          <ax-icon *ngIf=\"!item.isLoading\"\r\n            [ngClass]=\"{'ax-ic-chevron':item?.children?.length > 0 || item[hasChildField],'active-icon': item.isOpen}\">\r\n          </ax-icon>\r\n          <ax-loading *ngIf=\"item.isLoading\">\r\n          </ax-loading>\r\n        </div>\r\n      </a>\r\n      <ul [class.ax-state-disabled]=\"item[disableField]\" *ngIf=\"item?.children?.length > 0 && item.isOpen\">\r\n        <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: item.children }\"></ng-container>\r\n      </ul>\r\n    </li>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-container *ngIf=\"isLoading\">\r\n  <ng-template>\r\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n      <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n<ng-template #tmpEmpty>\r\n  <ng-container *ngIf=\"!isLoading\">\r\n    <!--------------- check for custom template  --------------->\r\n    <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n      <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-template #elseEmptyTemplate>\r\n      <div class=\"ax-list-item\">\r\n        {{ 'common.no-result-found' | trans }}\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-template>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { popover: [{
                 type: ViewChild,
-                args: [IMaskDirective]
+                args: [AXPopoverComponent, { static: true }]
+            }], _contentEmptyTemplate: [{
+                type: ContentChild,
+                args: ['emptyTemplate']
+            }], _searchBox: [{
+                type: ContentChild,
+                args: [AXSearchBoxComponent, { static: true }]
             }] } });
 
-const COMPONENT$9 = [AXNumberBoxComponent];
-const MODULES$9 = [
-    CommonModule,
-    FormsModule,
-    AXButtonModule,
-    AXDecoratorModule,
-    IMaskModule
-];
-class AXNumberBoxModule {
+const COMPONENT$8 = [AXMenuComponent];
+const MODULES$8 = [CommonModule, AXDecoratorModule];
+class AXMenuModule {
 }
-AXNumberBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXNumberBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXNumberBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXNumberBoxModule, declarations: [AXNumberBoxComponent], imports: [CommonModule,
-        FormsModule,
-        AXButtonModule,
-        AXDecoratorModule,
-        IMaskModule], exports: [AXNumberBoxComponent] });
-AXNumberBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXNumberBoxModule, providers: [], imports: [[...MODULES$9]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXNumberBoxModule, decorators: [{
+AXMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXMenuModule, declarations: [AXMenuComponent], imports: [CommonModule, AXDecoratorModule, AXLoadingModule,
+        AXTranslationModule,
+        AXPopoverModule], exports: [AXMenuComponent] });
+AXMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXMenuModule, providers: [], imports: [[
+            ...MODULES$8,
+            AXLoadingModule,
+            AXTranslationModule,
+            AXPopoverModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXMenuModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$9],
-                    imports: [...MODULES$9],
-                    exports: [...COMPONENT$9],
+                    declarations: [...COMPONENT$8],
+                    imports: [
+                        ...MODULES$8,
+                        AXLoadingModule,
+                        AXTranslationModule,
+                        AXPopoverModule,
+                    ],
+                    exports: [...COMPONENT$8],
                     providers: [],
                 }]
         }] });
@@ -6649,8 +6953,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 type: Input
             }] } });
 
-const COMPONENT$8 = [AXPasswordBoxComponent];
-const MODULES$8 = [
+const COMPONENT$7 = [AXPasswordBoxComponent];
+const MODULES$7 = [
     CommonModule,
     FormsModule,
     AXButtonModule,
@@ -6663,13 +6967,13 @@ AXPasswordBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         FormsModule,
         AXButtonModule,
         AXDecoratorModule], exports: [AXPasswordBoxComponent] });
-AXPasswordBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPasswordBoxModule, providers: [], imports: [[...MODULES$8]] });
+AXPasswordBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPasswordBoxModule, providers: [], imports: [[...MODULES$7]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPasswordBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$8],
-                    imports: [...MODULES$8],
-                    exports: [...COMPONENT$8],
+                    declarations: [...COMPONENT$7],
+                    imports: [...MODULES$7],
+                    exports: [...COMPONENT$7],
                     providers: [],
                 }]
         }] });
@@ -6775,12 +7079,12 @@ class AXPopupComponent extends AXBaseComponentMixin {
     }
     onFullScreen() { }
 }
-AXPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: AXLoadingService }, { token: i1$3.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXPopupComponent, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXPopupComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <div cdkDragHandle class=\"ax-popup-header-container\">\r\n            <ax-header *ngIf=\"showHeader\">\r\n                <ax-title [text]=\"title\"></ax-title>\r\n                <ax-close-button *ngIf=\"showCloseButton\"></ax-close-button>\r\n            </ax-header>\r\n        </div>\r\n        <div class=\"ax-popup-main-container\">\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </div>\r\n        <div class=\"ax-popup-footer-container\"></div>\r\n    </div>\r\n</div>", components: [{ type: AXDecoratorHeaderComponent, selector: "ax-header" }, { type: AXDecoratorTitleComponent, selector: "ax-title", inputs: ["text"] }, { type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }], directives: [{ type: i8.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$4.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: "13.3.9", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: AXLoadingService }, { token: i1$4.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
+AXPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXPopupComponent, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXPopupComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <div cdkDragHandle class=\"ax-popup-header-container\">\r\n            <ax-header *ngIf=\"showHeader\">\r\n                <ax-title [text]=\"title\"></ax-title>\r\n                <ax-close-button *ngIf=\"showCloseButton\"></ax-close-button>\r\n            </ax-header>\r\n        </div>\r\n        <div class=\"ax-popup-main-container\">\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </div>\r\n        <div class=\"ax-popup-footer-container\"></div>\r\n    </div>\r\n</div>", components: [{ type: AXDecoratorHeaderComponent, selector: "ax-header" }, { type: AXDecoratorTitleComponent, selector: "ax-title", inputs: ["text"] }, { type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }], directives: [{ type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXClosbaleComponent, useExisting: AXPopupComponent }], template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\r\n    <div class=\"ax-popup ax-popup-{{size}}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!draggable\">\r\n        <div cdkDragHandle class=\"ax-popup-header-container\">\r\n            <ax-header *ngIf=\"showHeader\">\r\n                <ax-title [text]=\"title\"></ax-title>\r\n                <ax-close-button *ngIf=\"showCloseButton\"></ax-close-button>\r\n            </ax-header>\r\n        </div>\r\n        <div class=\"ax-popup-main-container\">\r\n            <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\r\n        </div>\r\n        <div class=\"ax-popup-footer-container\"></div>\r\n    </div>\r\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: AXLoadingService }, { type: i1$3.AXPlatform }]; }, propDecorators: { onKeydownHandler: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: AXLoadingService }, { type: i1$4.AXPlatform }]; }, propDecorators: { onKeydownHandler: [{
                 type: HostListener,
                 args: ['keydown.escape', ['$event']]
             }] } });
@@ -6875,19 +7179,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: AXOverlayService }]; } });
 
-const COMPONENT$7 = [AXPopupComponent];
-const MODULES$7 = [CommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule, AXDecoratorModule];
+const COMPONENT$6 = [AXPopupComponent];
+const MODULES$6 = [CommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule, AXDecoratorModule];
 class AXPopupModule {
 }
 AXPopupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXPopupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopupModule, declarations: [AXPopupComponent], imports: [CommonModule, DragDropModule, A11yModule, AXButtonModule, PortalModule, AXDecoratorModule], exports: [AXPopupComponent] });
-AXPopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopupModule, providers: [], imports: [[...MODULES$7]] });
+AXPopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopupModule, providers: [], imports: [[...MODULES$6]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXPopupModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$7],
-                    imports: [...MODULES$7],
-                    exports: [...COMPONENT$7],
+                    declarations: [...COMPONENT$6],
+                    imports: [...MODULES$6],
+                    exports: [...COMPONENT$6],
                     providers: [],
                 }]
         }] });
@@ -6965,19 +7269,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
             args: [{ selector: 'ax-radio', inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-radio' }, template: "<div class=\"ax-flex ax-items-start\">\r\n    <div class=\"ax-flex ax-items-center ax-h-5\">\r\n        <input [id]=\"id\" class=\"ax-radio\" type=\"radio\" [(ngModel)]=\"value\" [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\"\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<ng-content select=\"ax-validation-rule\"></ng-content>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-const COMPONENT$6 = [AXRadioComponent];
-const MODULES$6 = [CommonModule, FormsModule];
+const COMPONENT$5 = [AXRadioComponent];
+const MODULES$5 = [CommonModule, FormsModule];
 class AXRadioModule {
 }
 AXRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXRadioModule, declarations: [AXRadioComponent], imports: [CommonModule, FormsModule], exports: [AXRadioComponent] });
-AXRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXRadioModule, providers: [], imports: [[...MODULES$6]] });
+AXRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXRadioModule, providers: [], imports: [[...MODULES$5]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXRadioModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$6],
-                    imports: [...MODULES$6],
-                    exports: [...COMPONENT$6],
+                    declarations: [...COMPONENT$5],
+                    imports: [...MODULES$5],
+                    exports: [...COMPONENT$5],
                     providers: [],
                 }]
         }] });
@@ -6995,19 +7299,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
             args: [{ selector: 'ax-range-slider', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-range-slider' }, template: "<input type=\"range\" min=\"1\" max=\"100\" value=\"50\" class=\"ax-range-slider-input\">" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
-const COMPONENT$5 = [AXRangeSliderComponent];
-const MODULES$5 = [CommonModule];
+const COMPONENT$4 = [AXRangeSliderComponent];
+const MODULES$4 = [CommonModule];
 class AXRangeSliderModule {
 }
 AXRangeSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXRangeSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 AXRangeSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXRangeSliderModule, declarations: [AXRangeSliderComponent], imports: [CommonModule], exports: [AXRangeSliderComponent] });
-AXRangeSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXRangeSliderModule, providers: [], imports: [[...MODULES$5]] });
+AXRangeSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXRangeSliderModule, providers: [], imports: [[...MODULES$4]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXRangeSliderModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...COMPONENT$5],
-                    imports: [...MODULES$5],
-                    exports: [...COMPONENT$5],
+                    declarations: [...COMPONENT$4],
+                    imports: [...MODULES$4],
+                    exports: [...COMPONENT$4],
                     providers: [],
                 }]
         }] });
@@ -7099,61 +7403,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 }]
         }] });
 
-class AXSearchBoxComponent extends AXBaseComponentMixin {
-    constructor(_elementRef, _cdr, _parent) {
-        super(_elementRef, _cdr);
-        this._parent = _parent;
-        this.placeholder = 'common.search';
-        this.debounceTime = 300;
-        this.searchExp = null;
-    }
-    _onSearchExprChanged(e) {
-        if (this._parent && this._parent.search) {
-            this._parent.search(e.value);
-        }
-    }
-    focus() {
-        this._textbox?.focus();
-    }
-}
-AXSearchBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXSearchableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AXSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: { placeholder: "placeholder", debounceTime: "debounceTime", searchExp: "searchExp" }, viewQueries: [{ propertyName: "_textbox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box  placeholder=\"{{ placeholder | trans }}\" [debounceTime]=\"debounceTime\" \r\n    [(value)]=\"searchExp\" (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n    <ax-prefix>\r\n        <ax-icon class=\"ax-ic ax-ic-magnify\">\r\n        </ax-icon>\r\n    </ax-prefix>\r\n</ax-text-box>", components: [{ type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked", "placeholder", "maxLength", "type", "autoComplete"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], pipes: { "trans": i1$3.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-search-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ax-text-box  placeholder=\"{{ placeholder | trans }}\" [debounceTime]=\"debounceTime\" \r\n    [(value)]=\"searchExp\" (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n    <ax-prefix>\r\n        <ax-icon class=\"ax-ic ax-ic-magnify\">\r\n        </ax-icon>\r\n    </ax-prefix>\r\n</ax-text-box>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXSearchableComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [AXSearchableComponent]
-                }] }]; }, propDecorators: { _textbox: [{
-                type: ViewChild,
-                args: [AXTextBoxComponent]
-            }], placeholder: [{
-                type: Input
-            }], debounceTime: [{
-                type: Input
-            }], searchExp: [{
-                type: Input
-            }] } });
-
-const COMPONENT$4 = [AXSearchBoxComponent];
-const MODULES$4 = [CommonModule, AXTranslationModule, AXDecoratorModule, AXTextBoxModule];
-class AXSearchBoxModule {
-}
-AXSearchBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSearchBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchBoxModule, declarations: [AXSearchBoxComponent], imports: [CommonModule, AXTranslationModule, AXDecoratorModule, AXTextBoxModule], exports: [AXSearchBoxComponent] });
-AXSearchBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchBoxModule, providers: [], imports: [[...MODULES$4]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSearchBoxModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...COMPONENT$4],
-                    imports: [...MODULES$4],
-                    exports: [...COMPONENT$4],
-                    providers: [],
-                }]
-        }] });
-
 /**
  * The Button is a component which detects user interaction and triggers a corresponding event
  *
@@ -7200,7 +7449,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
     onInit() {
         super.onInit();
         this._target = this._elementRef.nativeElement;
-        this._popoverTitle = this.placeholder || AXTranslator.get('selectbox.popover.title');
+        this._updatePopupTitle();
     }
     onViewInit() {
         super.onViewInit();
@@ -7210,6 +7459,11 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         this.value = null;
         super.refresh();
     }
+    _updatePopupTitle() {
+        // const count =this.selectedItems?.length;
+        // this._popoverTitle =  count > 1 ?  `(${count}) items selected`:  this.placeholder || AXTranslator.get('selectbox.popover.title')
+        this._popoverTitle = this.placeholder || AXTranslator.get('selectbox.popover.title');
+    }
     _handleOnItemClick(e, item) {
         if (this.isItemDisabled(item)) {
             return;
@@ -7241,6 +7495,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
                     this._focusSelectedItem();
                     this._forceFocus = false;
                 }
+                this._focusSearchBox();
             }, 100);
         }
     }
@@ -7305,7 +7560,6 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
             e.preventDefault();
         }
         else if ((e.code === 'Space' || e.code === 'Enter')) {
-            debugger;
             e.preventDefault();
             const focusedItemId = this.listContainer.nativeElement.querySelector('.ax-state-focus')?.dataset?.id;
             const focusedItem = _.findLast(this.flatItems, [this.valueField, focusedItemId]);
@@ -7344,14 +7598,16 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         else {
             this._focusSelectedItem();
         }
-        debugger;
-        if (this._searchBox && !this._isMobile) {
-            this._searchBox.focus();
-        }
+        this._focusSearchBox();
     }
     _handlePopupOnClosed(e) {
         this.focus();
     }
+    _focusSearchBox() {
+        if (this._searchBox && (!this._isMobile || this._searchBox.searchExp)) {
+            this._searchBox.focus();
+        }
+    }
     _focusItemByNav(sign) {
         const list = this.listContainer.nativeElement;
         const fn = (s) => list.querySelector(s);
@@ -7418,11 +7674,6 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
             this._fetchData();
         }
     }
-    _onSearchExprChanged(e) {
-        this.empty();
-        this._forceFocus = true;
-        this._fetchData();
-    }
     search(exp) {
         debugger;
         this.empty();
@@ -7433,18 +7684,18 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         super._fetchData({ searchQuery: this._searchBox?.searchExp });
     }
 }
-AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$3.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
+AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$4.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
 AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete", pageSize: "pageSize", valueField: "valueField", textField: "textField", items: "items", disabledField: "disabledField", disabledCallback: "disabledCallback", multiple: "multiple", selectionMode: "selectionMode", clearButton: "clearButton", checkbox: "checkbox" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", valueChanged: "valueChanged" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, classAttribute: "ax-editor-container ax-drop-down" }, providers: [
         { provide: AXClosbaleComponent, useExisting: AXSelectBoxComponent },
         { provide: AXSearchableComponent, useExisting: AXSelectBoxComponent }
-    ], queries: [{ propertyName: "_searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close ax-cursor-pointer\"\r\n                                    (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template #showPlaceholder>\r\n            <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\"> {{placeholder}}</div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"true\"\r\n    (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"_searchBox ||  isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list\" >\r\n            <ax-header *ngIf=\"_isMobile\" >\r\n                <ax-title [text]=\"_popoverTitle\"></ax-title>\r\n                <ax-close-button [icon]=\"multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'\"></ax-close-button>\r\n            </ax-header>\r\n            <div class=\"ax-p-2\" [class.ax-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox!=null\">\r\n                <ng-content select=\"ax-search-box\" ></ng-content>\r\n            </div>\r\n            <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\"\r\n                #listContainer>\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <ul>\r\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\">\r\n                        </ng-container>\r\n                        <ng-template #tmpTree let-list=\"list\">\r\n                            <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                                    <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                                        [attr.data-id]=\"item[this.valueField]\">\r\n                                        <ng-container\r\n                                            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                                        </ng-container>\r\n                                    </li>\r\n                                </ng-container>\r\n                                <ng-template #defualtTemplate>\r\n                                    <ng-container *ngIf=\"item.children?.length > 0;else tmpItem\">\r\n                                        <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\r\n                                            <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            <ul *ngIf=\"item.children?.length > 0\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"tmpTree; context:{ list:  item.children }\">\r\n                                                </ng-container>\r\n                                            </ul>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <ng-template #tmpItem>\r\n                                        <ng-container *ngIf=\"!multiple;  else multipleTemplate\">\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-container>\r\n                                        <ng-template #multipleTemplate>\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                    *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\"\r\n                                                    [disabled]=\"isItemDisabled(item)\">\r\n                                                <span class=\"ax-ms-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-template>\r\n                                    </ng-template>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </ng-template>\r\n                    </ul>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseLoadingTemplate>\r\n                        <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n                            <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-template #tmpEmpty>\r\n                    <ng-container *ngIf=\"!isLoading\">\r\n                        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseEmptyTemplate>\r\n                            <div class=\"ax-list-item\">\r\n                                {{ 'common.no-result-found' | trans }}\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n            </div>\r\n            <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n            <!-- <div class=\"ax-footer\">footer</div> -->\r\n        </div>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { type: AXDecoratorHeaderComponent, selector: "ax-header" }, { type: AXDecoratorTitleComponent, selector: "ax-title", inputs: ["text"] }, { type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$3.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "_searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close ax-cursor-pointer\"\r\n                                    (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template #showPlaceholder>\r\n            <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\"> {{placeholder}}</div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    [adaptivityEnabled]=\"true\" (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"_searchBox ||  isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list\">\r\n            <ax-header *ngIf=\"_isMobile\">\r\n                <ax-title [text]=\"_popoverTitle\"></ax-title>\r\n                <ax-close-button [icon]=\"multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'\"></ax-close-button>\r\n            </ax-header>\r\n            <div class=\"ax-p-2\" [class.ax-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox!=null\">\r\n                <ng-content select=\"ax-search-box\"></ng-content>\r\n            </div>\r\n            <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\"\r\n                #listContainer>\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <ul>\r\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\">\r\n                        </ng-container>\r\n                        <ng-template #tmpTree let-list=\"list\">\r\n                            <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                                    <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                                        [attr.data-id]=\"item[this.valueField]\">\r\n                                        <ng-container\r\n                                            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                                        </ng-container>\r\n                                    </li>\r\n                                </ng-container>\r\n                                <ng-template #defualtTemplate>\r\n                                    <ng-container *ngIf=\"item.children?.length > 0;else tmpItem\">\r\n                                        <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\r\n                                            <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            <ul *ngIf=\"item.children?.length > 0\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"tmpTree; context:{ list:  item.children }\">\r\n                                                </ng-container>\r\n                                            </ul>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <ng-template #tmpItem>\r\n                                        <ng-container *ngIf=\"!multiple;  else multipleTemplate\">\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-container>\r\n                                        <ng-template #multipleTemplate>\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                    *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\"\r\n                                                    [disabled]=\"isItemDisabled(item)\">\r\n                                                <span class=\"ax-ms-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-template>\r\n                                    </ng-template>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </ng-template>\r\n                    </ul>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseLoadingTemplate>\r\n                        <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n                            <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-template #tmpEmpty>\r\n                    <ng-container *ngIf=\"!isLoading\">\r\n                        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseEmptyTemplate>\r\n                            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\"\r\n                                [innerHTML]=\"'common.no-result-for' | trans:{exp:this._searchBox?  this._searchBox.searchExp :''}\">\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n            </div>\r\n            <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n            <!-- <div class=\"ax-footer\">footer</div> -->\r\n        </div>\r\n    </div>\r\n</ax-popover>", components: [{ type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "color", "look", "text", "submitBehavior", "cancelBehavior", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { type: AXDecoratorHeaderComponent, selector: "ax-header" }, { type: AXDecoratorTitleComponent, selector: "ax-title", inputs: ["text"] }, { type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "trans": i1$4.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-select-box', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...DATALIST_INPUTS, ...SELECTION_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...SELECTION_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: AXClosbaleComponent, useExisting: AXSelectBoxComponent },
                         { provide: AXSearchableComponent, useExisting: AXSelectBoxComponent }
-                    ], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close ax-cursor-pointer\"\r\n                                    (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template #showPlaceholder>\r\n            <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\"> {{placeholder}}</div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"true\"\r\n    (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"_searchBox ||  isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list\" >\r\n            <ax-header *ngIf=\"_isMobile\" >\r\n                <ax-title [text]=\"_popoverTitle\"></ax-title>\r\n                <ax-close-button [icon]=\"multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'\"></ax-close-button>\r\n            </ax-header>\r\n            <div class=\"ax-p-2\" [class.ax-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox!=null\">\r\n                <ng-content select=\"ax-search-box\" ></ng-content>\r\n            </div>\r\n            <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\"\r\n                #listContainer>\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <ul>\r\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\">\r\n                        </ng-container>\r\n                        <ng-template #tmpTree let-list=\"list\">\r\n                            <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                                    <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                                        [attr.data-id]=\"item[this.valueField]\">\r\n                                        <ng-container\r\n                                            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                                        </ng-container>\r\n                                    </li>\r\n                                </ng-container>\r\n                                <ng-template #defualtTemplate>\r\n                                    <ng-container *ngIf=\"item.children?.length > 0;else tmpItem\">\r\n                                        <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\r\n                                            <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            <ul *ngIf=\"item.children?.length > 0\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"tmpTree; context:{ list:  item.children }\">\r\n                                                </ng-container>\r\n                                            </ul>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <ng-template #tmpItem>\r\n                                        <ng-container *ngIf=\"!multiple;  else multipleTemplate\">\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-container>\r\n                                        <ng-template #multipleTemplate>\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                    *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\"\r\n                                                    [disabled]=\"isItemDisabled(item)\">\r\n                                                <span class=\"ax-ms-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-template>\r\n                                    </ng-template>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </ng-template>\r\n                    </ul>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseLoadingTemplate>\r\n                        <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n                            <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-template #tmpEmpty>\r\n                    <ng-container *ngIf=\"!isLoading\">\r\n                        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseEmptyTemplate>\r\n                            <div class=\"ax-list-item\">\r\n                                {{ 'common.no-result-found' | trans }}\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n            </div>\r\n            <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n            <!-- <div class=\"ax-footer\">footer</div> -->\r\n        </div>\r\n    </div>\r\n</ax-popover>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$3.AXPlatform }]; }, propDecorators: { popover: [{
+                    ], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close ax-cursor-pointer\"\r\n                                    (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template #showPlaceholder>\r\n            <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\"> {{placeholder}}</div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    [adaptivityEnabled]=\"true\" (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"_searchBox ||  isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list\">\r\n            <ax-header *ngIf=\"_isMobile\">\r\n                <ax-title [text]=\"_popoverTitle\"></ax-title>\r\n                <ax-close-button [icon]=\"multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'\"></ax-close-button>\r\n            </ax-header>\r\n            <div class=\"ax-p-2\" [class.ax-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox!=null\">\r\n                <ng-content select=\"ax-search-box\"></ng-content>\r\n            </div>\r\n            <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\"\r\n                #listContainer>\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <ul>\r\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\">\r\n                        </ng-container>\r\n                        <ng-template #tmpTree let-list=\"list\">\r\n                            <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                                    <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                                        [attr.data-id]=\"item[this.valueField]\">\r\n                                        <ng-container\r\n                                            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n                                        </ng-container>\r\n                                    </li>\r\n                                </ng-container>\r\n                                <ng-template #defualtTemplate>\r\n                                    <ng-container *ngIf=\"item.children?.length > 0;else tmpItem\">\r\n                                        <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\r\n                                            <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            <ul *ngIf=\"item.children?.length > 0\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"tmpTree; context:{ list:  item.children }\">\r\n                                                </ng-container>\r\n                                            </ul>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <ng-template #tmpItem>\r\n                                        <ng-container *ngIf=\"!multiple;  else multipleTemplate\">\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-container>\r\n                                        <ng-template #multipleTemplate>\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                    *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\"\r\n                                                    [disabled]=\"isItemDisabled(item)\">\r\n                                                <span class=\"ax-ms-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                                            </li>\r\n                                        </ng-template>\r\n                                    </ng-template>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </ng-template>\r\n                    </ul>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isLoading\">\r\n                    <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n                        <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseLoadingTemplate>\r\n                        <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n                            <ax-loading text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-container>\r\n                <ng-template #tmpEmpty>\r\n                    <ng-container *ngIf=\"!isLoading\">\r\n                        <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n                            <ng-container *ngTemplateOutlet=\"emptyTemplate\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseEmptyTemplate>\r\n                            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\"\r\n                                [innerHTML]=\"'common.no-result-for' | trans:{exp:this._searchBox?  this._searchBox.searchExp :''}\">\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ng-template>\r\n\r\n            </div>\r\n            <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n            <!-- <div class=\"ax-footer\">footer</div> -->\r\n        </div>\r\n    </div>\r\n</ax-popover>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$4.AXPlatform }]; }, propDecorators: { popover: [{
                 type: ViewChild,
                 args: [AXPopoverComponent, { static: true }]
             }], _searchBox: [{
@@ -8670,16 +8921,17 @@ class AXValidationRuleComponent extends AXBaseComponentMixin {
         if (this.enabled === false) {
             return Promise.resolve({ result: true });
         }
-        const regRule = AXValidationRules.get(this.rule);
-        if (regRule) {
-            return this._internalValidate(regRule.rule.rule, value, this.message || regRule.rule.message, regRule.rule.value);
-        }
-        else {
-            return this._internalValidate(this.rule, value, this.message, this.value);
+        if (this.rule == 'custom') {
+            const regRule = AXConfig.get(`form.validation.rules.${this.value}`);
+            if (regRule) {
+                return this._internalValidate(regRule.rule, value, this.message || regRule.message, regRule.value);
+            }
         }
+        return this._internalValidate(this.rule, value, this.message, this.value);
     }
     _internalValidate(type, value, message, ruleValue) {
         return new Promise(resolve => {
+            debugger;
             switch (type) {
                 case 'required':
                     resolve({
@@ -8694,7 +8946,6 @@ class AXValidationRuleComponent extends AXBaseComponentMixin {
                         result: ex.test(value)
                     });
                     break;
-                case 'custom':
                 case 'callback':
                     if (typeof ruleValue === 'function') {
                         const res = {};
@@ -8715,11 +8966,17 @@ class AXValidationRuleComponent extends AXBaseComponentMixin {
                         }
                     }
                     else {
-                        resolve({ result: true });
+                        resolve({
+                            message: AXTranslator.get('validation.messages.invalid-rull-fn'),
+                            result: false
+                        });
                     }
                     break;
                 default:
-                    resolve({ result: true });
+                    resolve({
+                        message: AXTranslator.get('validation.messages.invalid-rull-name'),
+                        result: false
+                    });
             }
         });
     }
@@ -8782,5 +9039,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXActionSheetComponent, AXActionSheetItemComponent, AXActionSheetModule, AXAlertButtonComponent, AXAlertComponent, AXAlertModule, AXAvatarComponent, AXAvatarGroup, AXAvatarMixin, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseAlertMixin, AXBaseBadgeMixin, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDatePickerMixin, AXBaseDropdownMixin, AXBaseItemButtonMixin, AXBaseMenuMixin, AXBasePageComponent, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTabItemMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXBreadCrumbsComponent, AXBreadCrumbsItemComponent, AXBreadcrumbsModule, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXClosbaleComponent, AXCollapseComponent, AXCollapseGroupComponent, AXCollapseModule, AXColorPickerComponent, AXColorPickerModule, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatePickerComponent, AXDatepickerModule, AXDecoratorAddOnComponent, AXDecoratorCloseButtonComponent, AXDecoratorContentComponent, AXDecoratorFooterComponent, AXDecoratorHeaderComponent, AXDecoratorIconComponent, AXDecoratorModule, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorTitleComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerModule, AXDropdownModule, AXDropdownPanelComponent, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXInfiniteScrollerDirective, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXItemClickEvent, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXMenuComponent, AXMenuModule, AXNumberBoxComponent, AXNumberBoxModule, AXOverlayService, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageModule, AXPageResult, AXPasswordBoxComponent, AXPasswordBoxModule, AXPickerComponent, AXPickerModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXProgressBarComponent, AXProgressBarModule, AXRadioComponent, AXRadioModule, AXRangeChangedEvent, AXRangeSliderComponent, AXRangeSliderModule, AXRatingComponent, AXRatingModule, AXResponsiveDirective, AXResultComponent, AXResultModule, AXSearchBoxComponent, AXSearchBoxModule, AXSearchableComponent, AXSelectBoxComponent, AXSelectBoxModule, AXSelectionListComponent, AXSelectionListModule, AXSelectionValueChangedEvent, AXSizableComponentMixin, AXSwitchComponent, AXSwitchModule, AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTextareaComponent, AXTextareaModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXTreeViewComponent, AXTreeViewModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, TAB_META_KEY, _BaseComponenetMixin };
+export { AXActionSheetComponent, AXActionSheetItemComponent, AXActionSheetModule, AXAlertButtonComponent, AXAlertComponent, AXAlertModule, AXAvatarComponent, AXAvatarGroup, AXAvatarMixin, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseAlertMixin, AXBaseBadgeMixin, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseColorPickerMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDatePickerMixin, AXBaseDropdownMixin, AXBaseItemButtonMixin, AXBaseMenuMixin, AXBasePageComponent, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTabItemMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXBreadCrumbsComponent, AXBreadCrumbsItemComponent, AXBreadcrumbsModule, AXButtonClickEvent, AXButtonComponent, AXButtonGroupComponent, AXButtonItemComponent, AXButtonModule, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCarouselArrowsComponent, AXCarouselComponent, AXCarouselCore, AXCarouselItemComponent, AXCarouselModule, AXCarouselPagerComponent, AXCheckBoxComponent, AXCheckBoxModule, AXClickEvent, AXClosbaleComponent, AXCollapseComponent, AXCollapseGroupComponent, AXCollapseModule, AXColorPaletteInputComponent, AXColorPaletteModule, AXColorPalettePickerComponent, AXColorPalettePreviewComponent, AXColorPaletteSwatchesComponent, AXColorPalleteComponent, AXColorPickerComponent, AXColorPickerModule, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatePickerComponent, AXDatepickerModule, AXDecoratorAddOnComponent, AXDecoratorCloseButtonComponent, AXDecoratorContentComponent, AXDecoratorFooterComponent, AXDecoratorHeaderComponent, AXDecoratorIconComponent, AXDecoratorModule, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDecoratorTitleComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerModule, AXDropdownModule, AXDropdownPanelComponent, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXInfiniteScrollerDirective, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXItemClickEvent, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXMenuComponent, AXMenuModule, AXNumberBoxComponent, AXNumberBoxModule, AXOverlayService, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageModule, AXPageResult, AXPasswordBoxComponent, AXPasswordBoxModule, AXPickerComponent, AXPickerModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXProgressBarComponent, AXProgressBarModule, AXRadioComponent, AXRadioModule, AXRangeChangedEvent, AXRangeSliderComponent, AXRangeSliderModule, AXRatingComponent, AXRatingModule, AXResponsiveDirective, AXResultComponent, AXResultModule, AXSearchBoxComponent, AXSearchBoxModule, AXSearchableComponent, AXSelectBoxComponent, AXSelectBoxModule, AXSelectionListComponent, AXSelectionListModule, AXSelectionValueChangedEvent, AXSizableComponentMixin, AXSwitchComponent, AXSwitchModule, AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule, AXTextBoxComponent, AXTextBoxModule, AXTextareaComponent, AXTextareaModule, AXTimeBoxComponent, AXTimeBoxModule, AXToastComponent, AXToastModule, AXToastService, AXTooltipComponent, AXTooltipDirective, AXTooltipModule, AXTreeViewComponent, AXTreeViewModule, AXValidationModule, AXValidationRuleComponent, AXValidationRules, AXValuableComponent, AXValueChangedEvent, AX_DIRECTIONS, AX_LOCATIONS, AX_STYLE_TYPES, BASE_INPUTS, BASE_OUTPUT, TAB_META_KEY, _BaseComponenetMixin };
 //# sourceMappingURL=acorex-components.mjs.map