@acorex/components 5.0.60 → 5.1.2

package/fesm2020/acorex-components.mjs

@@ -126,6 +126,138 @@ const BASE_OUTPUT = [];
 
 ;
 
+function _BaseMenuComponentMixin(Base) {
+    var _isLoading, _loadedItems, _items, _a;
+    return _a = class extends Base {
+            constructor(...args) {
+                super(...args);
+                this.textField = 'text';
+                this.valueField = 'id';
+                _isLoading.set(this, false);
+                _loadedItems.set(this, []);
+                this.visible = 'visible';
+                this.openMode = 'click';
+                this.onMenuItemClick = new EventEmitter();
+                _items.set(this, []);
+            }
+            get loadedCount() {
+                return __classPrivateFieldGet(this, _loadedItems, "f")?.length || 0;
+            }
+            get items() {
+                return __classPrivateFieldGet(this, _items, "f");
+            }
+            set items(v) {
+                if (Array.isArray(v)) {
+                    __classPrivateFieldSet(this, _items, this._formatData(v), "f");
+                }
+                else if (typeof v === 'function') {
+                    __classPrivateFieldSet(this, _items, v, "f");
+                }
+                else {
+                    __classPrivateFieldSet(this, _items, [], "f");
+                }
+            }
+            get displayItems() {
+                if (Array.isArray(this.items)) {
+                    return __classPrivateFieldGet(this, _items, "f") || [];
+                }
+                else if (typeof __classPrivateFieldGet(this, _items, "f") == 'function') {
+                    return __classPrivateFieldGet(this, _loadedItems, "f") || [];
+                }
+                return [];
+            }
+            get isLoading() {
+                return __classPrivateFieldGet(this, _isLoading, "f");
+            }
+            _formatData(v) {
+                return _.unionBy(v.map((o, i) => {
+                    if (typeof o == 'object')
+                        return o;
+                    else {
+                        const no = {};
+                        no[Array.isArray(this.textField) ? this.textField[0] : this.textField] = o;
+                        return no;
+                    }
+                }));
+            }
+            _findNode(parentId, _children, source) {
+                if (source.length > 0) {
+                    source.forEach((element) => {
+                        if (element.id == parentId) {
+                            element.children = _children;
+                        }
+                        else {
+                            if (element?.children)
+                                this._findNode(parentId, _children, element.children);
+                        }
+                    });
+                }
+            }
+            _fetchData(parentId) {
+                if (__classPrivateFieldGet(this, _isLoading, "f")) {
+                    return;
+                }
+                if (__classPrivateFieldGet(this, _items, "f")) {
+                    __classPrivateFieldSet(this, _isLoading, true, "f");
+                    setTimeout(() => {
+                        __classPrivateFieldGet(this, _items, "f").call(this, { parentId: parentId })
+                            .then((c) => {
+                            if (Array.isArray(c)) {
+                                if (parentId) {
+                                    this._findNode(parentId, c, this.displayItems);
+                                }
+                                else {
+                                    __classPrivateFieldSet(this, _loadedItems, c, "f");
+                                }
+                            }
+                            this._cdr.markForCheck();
+                        })
+                            .finally(() => {
+                            __classPrivateFieldSet(this, _isLoading, false, "f");
+                        });
+                    }, 1000);
+                }
+            }
+            _onInternalInit() {
+                if (typeof __classPrivateFieldGet(this, _items, "f") == 'function') {
+                    this._fetchData();
+                }
+                super._onInternalInit();
+            }
+            _getItemDisplayTextTemplte(item) {
+                if (item)
+                    return Array.isArray(this.textField)
+                        ? this.textField.map((c) => item[c]).join(',')
+                        : item[this.textField];
+                else
+                    return 'Loading...';
+            }
+            _trackLoaded(index, item) {
+                return item[this.textField];
+            }
+        },
+        _isLoading = new WeakMap(),
+        _loadedItems = new WeakMap(),
+        _items = new WeakMap(),
+        _a;
+}
+const BASEMENU_INPUTS = [
+    'textField',
+    'valueField',
+    'items',
+    'id',
+    'parentId',
+    'icon',
+    'tooltip',
+    'isOpen',
+    'isActive',
+    'visible',
+    'disableField',
+    'hasChildField',
+    'openMode',
+];
+const BASEMENU_OUTPUT = ['onMenuItemClick'];
+
 function _ButtonComponentMixin(Base) {
     return class extends Base {
         constructor(...args) {
@@ -1053,8 +1185,8 @@ const AXBaseSelectionValueMixin = _SizableComponenetMixin(_InteractiveComponenet
 const AXBaseValueDropdownMixin = _InteractiveComponenetMixin(_DropdownComponenetMixin(_DatalistComponenetMixin(_ValueComponenetMixin(AXBaseComponent))));
 const AXBaseSelectionDropdownMixin = _DropdownComponenetMixin(AXBaseSelectionValueMixin);
 const AXBaseDropdownMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_DropdownComponenetMixin(AXBaseComponent)));
-const AXBaseProgressMixin = (_ColorLookComponentMixin(AXBaseComponent));
-const AXAvatarMixin = (_ColorLookComponentMixin(AXBaseComponent));
+const AXBaseMenuMixin = _InteractiveComponenetMixin(_BaseMenuComponentMixin(AXBaseComponent));
+const AXAvatarMixin = _ColorLookComponentMixin(AXBaseComponent);
 
 /**
 *  Contains native event
@@ -1106,6 +1238,12 @@ class AXFocusEvent extends AXHtmlEvent {
 * @category Events
 */
 class AXSelectionValueChangedEvent extends AXValueChangedEvent {
+}
+/**
+*  Contains range start & end values
+* @category Events
+*/
+class AXRangeChangedEvent extends AXEvent {
 }
 
 // export type AXPlacement =
@@ -2528,9 +2666,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }] });
 
+/**
+*  Contains native event
+* @category Events
+*/
+class AXCalendarNavigateEvent extends AXRangeChangedEvent {
+}
 class AXCalendarBaseComponent extends AXBaseComponent {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
+        this.onSlotClick = new EventEmitter();
+        this.onNavigate = new EventEmitter();
         this.activeViewChange = new EventEmitter();
         this._activeView = 'days';
         this.typeChange = new EventEmitter();
@@ -2598,7 +2744,11 @@ AXCalendarBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 AXCalendarBaseComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarBaseComponent });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarBaseComponent, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { activeViewChange: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { onSlotClick: [{
+                type: Output
+            }], onNavigate: [{
+                type: Output
+            }], activeViewChange: [{
                 type: Output
             }], activeView: [{
                 type: Input
@@ -2636,7 +2786,7 @@ const CALENDAR_INPUTS = [
     'type',
     'holidayDates',
 ];
-const CALENDAR_OUTPUTS = ['depthChange', 'typeChange', 'disabledDates', 'holidayDates'];
+const CALENDAR_OUTPUTS = ['depthChange', 'typeChange', 'disabledDatesChange', 'holidayDatesChange', 'onNavigate'];
 
 const AXCalendarComponentMixin = _ClickableComponenetMixin(_InteractiveComponenetMixin(_ValueComponenetMixin(AXCalendarBaseComponent)));
 class AXCalendarComponent extends AXCalendarComponentMixin {
@@ -2648,7 +2798,7 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
         this._todayText = '';
         this._slots = [];
         this._dayNames = [];
-        this.onSlotClick = new EventEmitter();
+        this._isUserInteraction = false;
     }
     get _viewRange() {
         const current = this._viewStartDate || this._today;
@@ -2661,7 +2811,6 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
             case 'months':
                 return new AXDateTimeRange(current.startOf('year'), current.endOf('year').add('day', -1));
             default:
-                //return new AXDateTimeRange(current.startOf('month').startOf('week'), current.endOf('month').endOf('week'));
                 return new AXDateTimeRange(current.startOf('month'), current.endOf('month'));
         }
     }
@@ -2675,7 +2824,8 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
     }
     onInit() {
         this._initValues();
-        this.goToday();
+        if (!this.value)
+            this.goToday();
     }
     _genearteSlots() {
         if (!this._viewStartDate)
@@ -2742,8 +2892,8 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
                 r.date = d.date;
                 r.text = d.dayOfMonth;
                 r.tooltip = d.format();
-                r.disabled = (this.min && d.compare(this.min, 'day') == -1) || (this.max && d.compare(this.max, 'day') == 1);
-                if (r.disabled || this.isDisabled(d)) {
+                r.disabled = ((this.min && d.compare(this.min, 'day') == -1) || (this.max && d.compare(this.max, 'day') == 1)) || this.isDisabled(d);
+                if (r.disabled) {
                     r.cssClass = {
                         'ax-state-disabled': true,
                     };
@@ -2765,10 +2915,14 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
         }
     }
     _handlePrevClick(e) {
+        this._isUserInteraction = true;
         this.prev();
+        this._isUserInteraction = false;
     }
     _handleNextClick(e) {
+        this._isUserInteraction = true;
         this.next();
+        this._isUserInteraction = false;
     }
     _handleSlotClick(e, slot) {
         if (slot.disabled || this.disabled)
@@ -2793,14 +2947,17 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
         this.onSlotClick.emit({
             component: this,
             item: slot.date,
+            isUserInteraction: true,
             nativeEvent: e
         });
     }
     _handleNavClick(e) {
+        this._isUserInteraction = true;
         if (this.activeView == 'days')
             this.activeView = 'months';
         else if (this.activeView == 'months')
             this.activeView = 'years';
+        this._isUserInteraction = false;
     }
     _onOptionChanged(option) {
         if (option.name == 'depth' || option.name == 'activeView' || option.name == 'disabledDates' || option.name == 'holidayDates') {
@@ -2815,8 +2972,10 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
         this._genearteSlots();
     }
     _handleGoToday() {
+        this._isUserInteraction = true;
         this._setDate(this._today.date);
         this.goToday();
+        this._isUserInteraction = false;
     }
     next() {
         this._navNextPrev(false);
@@ -2825,7 +2984,9 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
         this._navNextPrev(true);
     }
     focus() {
-        this._getHostElement().querySelector('.ax-calendar-slots>div')?.focus();
+        const func = (s) => this._getHostElement().querySelector(s);
+        const div = func('.ax-calendar-slots>div.ax-state-selected') || func('.ax-calendar-slots>div');
+        div?.focus();
     }
     _navNextPrev(prev) {
         const sign = (prev ? -1 : 1);
@@ -2841,7 +3002,18 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
     }
     navTo(date) {
         this._viewStartDate = AXDateTime.convert(date, this._today.calendar.name()).startOf();
+        const vr = this._viewRange;
+        this.onNavigate.emit({
+            component: this,
+            isUserInteraction: this._isUserInteraction,
+            start: vr.startTime?.date,
+            end: vr.endTime?.date,
+            htmlElement: this._getHostElement()
+        });
         this._genearteSlots();
+        setTimeout(() => {
+            this.focus();
+        }, 50);
     }
     get __hostClass() {
         const _classes = {
@@ -2875,13 +3047,11 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
     }
 }
 AXCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXCalendarComponent, selector: "ax-calendar", inputs: { readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", disabled: "disabled", tabIndex: "tabIndex", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", type: "type", holidayDates: "holidayDates" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", disabledDates: "disabledDates", holidayDates: "holidayDates", onSlotClick: "onSlotClick" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-header\">\r\n    <div>\r\n        <ng-container *ngIf=\"activeView=='days'; else elseTemplate\">\r\n            <ax-button class=\"ax-nav-button\"  [text]=\"_navText.split(' ')[1]\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[0]\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n            <div class=\"ax-w-28 ax-inline-block\">\r\n\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n    <div>\r\n        <ax-button class=\"ax-prev-button\" color=\"light\" look=\"blank\" (onClick)=\"_handlePrevClick($event)\"\r\n            [disabled]=\"disabled\">\r\n            <ax-prefix>\r\n                <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n            </ax-prefix>\r\n        </ax-button>\r\n        <ax-button class=\"ax-next-button\" color=\"light\" look=\"blank\" (onClick)=\"_handleNextClick($event)\"\r\n            [disabled]=\"disabled\">\r\n            <ax-prefix>\r\n                <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax-rotate-90\"></ax-icon>\r\n               \r\n            </ax-prefix>\r\n        </ax-button>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-body\">\r\n    <div [ngSwitch]=\"activeView\">\r\n        <ng-container *ngSwitchCase=\"'years'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'months'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n            <div class=\"ax-calendar-week\">\r\n                <div *ngFor=\"let d of _dayNames\">{{d}}</div>\r\n            </div>\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-footer\">\r\n    <ax-button class=\"dark:ax-text-danger\" [text]=\"_todayText\" color=\"dark\" look=\"blank\" size=\"sm\"\r\n        (onClick)=\"_handleGoToday()\" [disabled]=\"disabled\"></ax-button>\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"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXCalendarComponent, selector: "ax-calendar", inputs: { readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", disabled: "disabled", tabIndex: "tabIndex", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", type: "type", holidayDates: "holidayDates" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-header\">\r\n    <div>\r\n        <ng-container *ngIf=\"activeView=='days'; else elseTemplate\">\r\n            <ax-button class=\"ax-nav-button\"  [text]=\"_navText.split(' ')[1]\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[0]\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n        </ng-template>\r\n    </div>\r\n    <div class=\"ax-flex\">\r\n        <ax-button class=\"ax-prev-button\" color=\"light\" look=\"blank\" (onClick)=\"_handlePrevClick($event)\"\r\n            [disabled]=\"disabled\">\r\n            <ax-prefix>\r\n                <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n            </ax-prefix>\r\n        </ax-button>\r\n        <ax-button class=\"ax-next-button\" color=\"light\" look=\"blank\" (onClick)=\"_handleNextClick($event)\"\r\n            [disabled]=\"disabled\">\r\n            <ax-prefix>\r\n                <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax-rotate-90\"></ax-icon>\r\n               \r\n            </ax-prefix>\r\n        </ax-button>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-body\">\r\n    <div [ngSwitch]=\"activeView\">\r\n        <ng-container *ngSwitchCase=\"'years'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'months'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n            <div class=\"ax-calendar-week\">\r\n                <div *ngFor=\"let d of _dayNames\">{{d}}</div>\r\n            </div>\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-footer\">\r\n    <ax-button class=\"dark:ax-text-danger\" [text]=\"_todayText\" color=\"dark\" look=\"blank\" size=\"sm\"\r\n        (onClick)=\"_handleGoToday()\" [disabled]=\"disabled\"></ax-button>\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"] }, { type: AXDecoratorPrefixComponent, selector: "ax-prefix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-calendar', changeDetection: ChangeDetectionStrategy.OnPush, inputs: [...VALUE_INPUTS, ...INTERACTIVE_INPUTS, ...CALENDAR_INPUTS], outputs: [...VALUE_OUTPUT, ...INTERACTIVE_OUTPUT, ...CALENDAR_OUTPUTS], encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-calendar-header\">\r\n    <div>\r\n        <ng-container *ngIf=\"activeView=='days'; else elseTemplate\">\r\n            <ax-button class=\"ax-nav-button\"  [text]=\"_navText.split(' ')[1]\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[0]\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n            <div class=\"ax-w-28 ax-inline-block\">\r\n\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n    <div>\r\n        <ax-button class=\"ax-prev-button\" color=\"light\" look=\"blank\" (onClick)=\"_handlePrevClick($event)\"\r\n            [disabled]=\"disabled\">\r\n            <ax-prefix>\r\n                <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n            </ax-prefix>\r\n        </ax-button>\r\n        <ax-button class=\"ax-next-button\" color=\"light\" look=\"blank\" (onClick)=\"_handleNextClick($event)\"\r\n            [disabled]=\"disabled\">\r\n            <ax-prefix>\r\n                <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax-rotate-90\"></ax-icon>\r\n               \r\n            </ax-prefix>\r\n        </ax-button>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-body\">\r\n    <div [ngSwitch]=\"activeView\">\r\n        <ng-container *ngSwitchCase=\"'years'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'months'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n            <div class=\"ax-calendar-week\">\r\n                <div *ngFor=\"let d of _dayNames\">{{d}}</div>\r\n            </div>\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-footer\">\r\n    <ax-button class=\"dark:ax-text-danger\" [text]=\"_todayText\" color=\"dark\" look=\"blank\" size=\"sm\"\r\n        (onClick)=\"_handleGoToday()\" [disabled]=\"disabled\"></ax-button>\r\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { onSlotClick: [{
-                type: Output
-            }], __hostClass: [{
+            args: [{ selector: 'ax-calendar', changeDetection: ChangeDetectionStrategy.OnPush, inputs: [...VALUE_INPUTS, ...INTERACTIVE_INPUTS, ...CALENDAR_INPUTS], outputs: [...VALUE_OUTPUT, ...INTERACTIVE_OUTPUT, ...CALENDAR_OUTPUTS], encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-calendar-header\">\r\n    <div>\r\n        <ng-container *ngIf=\"activeView=='days'; else elseTemplate\">\r\n            <ax-button class=\"ax-nav-button\"  [text]=\"_navText.split(' ')[1]\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText.split(' ')[0]\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n            <ax-button class=\"ax-nav-button\" [text]=\"_navText\" color=\"light\" look=\"blank\"\r\n                (onClick)=\"_handleNavClick($event)\" [disabled]=\"disabled\">\r\n            </ax-button>\r\n        </ng-template>\r\n    </div>\r\n    <div class=\"ax-flex\">\r\n        <ax-button class=\"ax-prev-button\" color=\"light\" look=\"blank\" (onClick)=\"_handlePrevClick($event)\"\r\n            [disabled]=\"disabled\">\r\n            <ax-prefix>\r\n                <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n            </ax-prefix>\r\n        </ax-button>\r\n        <ax-button class=\"ax-next-button\" color=\"light\" look=\"blank\" (onClick)=\"_handleNextClick($event)\"\r\n            [disabled]=\"disabled\">\r\n            <ax-prefix>\r\n                <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax-rotate-90\"></ax-icon>\r\n               \r\n            </ax-prefix>\r\n        </ax-button>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-body\">\r\n    <div [ngSwitch]=\"activeView\">\r\n        <ng-container *ngSwitchCase=\"'years'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'months'\">\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container *ngSwitchDefault>\r\n            <div class=\"ax-calendar-week\">\r\n                <div *ngFor=\"let d of _dayNames\">{{d}}</div>\r\n            </div>\r\n            <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n                <div tabindex=\"0\" *ngFor=\"let slot of _slots\" [title]=\"slot.tooltip\" [ngClass]=\"slot.cssClass\"\r\n                    (click)=\"_handleSlotClick($event,slot)\">{{slot.text}}</div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"ax-calendar-footer\">\r\n    <ax-button class=\"dark:ax-text-danger\" [text]=\"_todayText\" color=\"dark\" look=\"blank\" size=\"sm\"\r\n        (onClick)=\"_handleGoToday()\" [disabled]=\"disabled\"></ax-button>\r\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -2947,16 +3117,22 @@ class AXCarouselSplideJS {
             type: this._instance.loop && !this._instance.rewind ? 'loop' : 'slide',
             rewind: this._instance.rewind,
             gap: this._instance.gap,
-            perPage: this._instance.pageSize,
-            perMove: 1,
+            perPage: this._instance.perPage,
+            perMove: this._instance.perMove,
             start: this._instance.visibleIndex,
             interval: this._instance.interval,
             direction: this._instance.vertical ? 'ttb' : (this._instance.rtl ? 'rtl' : 'ltr'),
             arrows: false,
             pagination: false,
             padding: this._instance.padding,
-            autoWidth: true,
-            focus: this._instance.centered ? 'center' : false,
+            autoWidth: this._instance.autoWidth,
+            focus: this._instance.centered ? 'center' : this._instance.focus,
+            height: this._instance.height,
+            heightRatio: this._instance.heightRatio,
+            wheel: this._instance.wheel,
+            width: this._instance.width,
+            drag: this._instance.drag,
+            snap: this._instance.snap,
         };
     }
     next() {
@@ -3000,11 +3176,29 @@ class AXCarouselComponent extends AXBaseComponentMixin {
         this.core = core;
         this.onOptionsChanged = new EventEmitter();
         this.onSlideChanged = new EventEmitter();
-        this.pageSizeChange = new EventEmitter();
-        this._pageSize = 1;
+        this.perMoveChange = new EventEmitter();
+        this._perMove = 1;
+        this.focusChange = new EventEmitter();
+        this._focus = 0;
+        this.heightRatioChange = new EventEmitter();
+        this._heightRatio = 0;
+        this.heightChange = new EventEmitter();
+        this._height = 'auto';
+        this.widthChange = new EventEmitter();
+        this._width = 'fit-content';
+        this.perPageChange = new EventEmitter();
+        this._perPage = 1;
         this.gap = 10;
         this.autoplayChange = new EventEmitter();
         this._autoplay = false;
+        this.snapChange = new EventEmitter();
+        this._snap = false;
+        this.autoWidthChange = new EventEmitter();
+        this._autoWidth = true;
+        this.dragChange = new EventEmitter();
+        this._drag = true;
+        this.wheelChange = new EventEmitter();
+        this._wheel = false;
         this.intervalChange = new EventEmitter();
         this._interval = 3000;
         this.paddingChange = new EventEmitter();
@@ -3021,17 +3215,70 @@ class AXCarouselComponent extends AXBaseComponentMixin {
         this.onItemsChanged = new EventEmitter();
         this._items = [];
     }
-    get pageSize() {
-        return this._pageSize;
+    get perMove() {
+        return this._perMove;
     }
-    set pageSize(v) {
+    set perMove(v) {
         const val = Math.max(1, coerceNumberProperty(v));
-        if (val != this._pageSize) {
-            this._pageSize = val;
-            if (this._pageSize > 1) {
+        if (val != this._perMove) {
+            this._perMove = val;
+            if (this._perMove > 1) {
                 this._vertical = false;
             }
-            this.pageSizeChange.emit(this.pageSize);
+            this.perMoveChange.emit(this.perMove);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get focus() {
+        return this._focus;
+    }
+    set focus(v) {
+        if (v != this._focus) {
+            this._focus = v;
+            this.paddingChange.emit(v);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get heightRatio() {
+        return this._heightRatio;
+    }
+    set heightRatio(v) {
+        if (v != this._heightRatio) {
+            this._heightRatio = v;
+            this.paddingChange.emit(v);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get height() {
+        return this._height;
+    }
+    set height(v) {
+        const val = v;
+        if (val != this._height) {
+            this._height = val;
+            this.heightChange.emit(this.height);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get width() {
+        return this._width;
+    }
+    set width(v) {
+        const val = v;
+        if (val != this._width) {
+            this._width = val;
+            this.widthChange.emit(this.width);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get perPage() {
+        return this._perPage;
+    }
+    set perPage(v) {
+        const val = v;
+        if (val != this._perPage) {
+            this._perPage = val;
+            this.perPageChange.emit(this.perPage);
             this.onOptionsChanged.emit();
         }
     }
@@ -3046,6 +3293,50 @@ class AXCarouselComponent extends AXBaseComponentMixin {
             this.onOptionsChanged.emit();
         }
     }
+    get snap() {
+        return this._snap;
+    }
+    set snap(v) {
+        const val = coerceBooleanProperty(v);
+        if (val != this._snap) {
+            this._snap = val;
+            this.snapChange.emit(this.snap);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get autoWidth() {
+        return this._autoWidth;
+    }
+    set autoWidth(v) {
+        const val = coerceBooleanProperty(v);
+        if (val != this._autoWidth) {
+            this._autoWidth = val;
+            this.autoWidthChange.emit(this.autoWidth);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get drag() {
+        return this._drag;
+    }
+    set drag(v) {
+        const val = v;
+        if (val != this._drag) {
+            this._drag = val;
+            this.dragChange.emit(this.drag);
+            this.onOptionsChanged.emit();
+        }
+    }
+    get wheel() {
+        return this._wheel;
+    }
+    set wheel(v) {
+        const val = coerceBooleanProperty(v);
+        if (val != this._wheel) {
+            this._wheel = val;
+            this.wheelChange.emit(this.wheel);
+            this.onOptionsChanged.emit();
+        }
+    }
     get interval() {
         return this._interval;
     }
@@ -3172,7 +3463,7 @@ class AXCarouselComponent extends AXBaseComponentMixin {
     }
 }
 AXCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCarouselComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: AXCarouselCore }], target: i0.ɵɵFactoryTarget.Component });
-AXCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXCarouselComponent, selector: "ax-carousel", inputs: { pageSize: "pageSize", gap: "gap", autoplay: "autoplay", interval: "interval", padding: "padding", centered: "centered", vertical: "vertical", loop: "loop", rewind: "rewind" }, outputs: { onOptionsChanged: "onOptionsChanged", onSlideChanged: "onSlideChanged", pageSizeChange: "pageSizeChange", autoplayChange: "autoplayChange", intervalChange: "intervalChange", paddingChange: "paddingChange", centeredChange: "centeredChange", verticalChange: "verticalChange", loopChange: "loopChange", rewindChange: "rewindChange", onItemsChanged: "onItemsChanged" }, host: { classAttribute: "ax-carousel" }, providers: [{
+AXCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXCarouselComponent, selector: "ax-carousel", inputs: { perMove: "perMove", focus: "focus", heightRatio: "heightRatio", height: "height", width: "width", perPage: "perPage", gap: "gap", autoplay: "autoplay", snap: "snap", autoWidth: "autoWidth", drag: "drag", wheel: "wheel", interval: "interval", padding: "padding", centered: "centered", vertical: "vertical", loop: "loop", rewind: "rewind" }, outputs: { onOptionsChanged: "onOptionsChanged", onSlideChanged: "onSlideChanged", perMoveChange: "perMoveChange", focusChange: "focusChange", heightRatioChange: "heightRatioChange", heightChange: "heightChange", widthChange: "widthChange", perPageChange: "perPageChange", autoplayChange: "autoplayChange", snapChange: "snapChange", autoWidthChange: "autoWidthChange", dragChange: "dragChange", wheelChange: "wheelChange", intervalChange: "intervalChange", paddingChange: "paddingChange", centeredChange: "centeredChange", verticalChange: "verticalChange", loopChange: "loopChange", rewindChange: "rewindChange", onItemsChanged: "onItemsChanged" }, host: { classAttribute: "ax-carousel" }, providers: [{
             provide: AXCarouselCore,
             useClass: AXCarouselSplideJS
         }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-carousel-list-container\">\r\n    <div class=\"ax-carousel-list\">\r\n        <ng-content select=\"ax-carousel-item\">\r\n        </ng-content>\r\n    </div>\r\n    <ng-content select=\"ax-carousel-arrows\">\r\n    </ng-content>\r\n</div>\r\n\r\n<ng-content select=\"ax-carousel-pager\">\r\n</ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -3186,9 +3477,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 type: Output
             }], onSlideChanged: [{
                 type: Output
-            }], pageSizeChange: [{
+            }], perMoveChange: [{
+                type: Output
+            }], perMove: [{
+                type: Input
+            }], focusChange: [{
+                type: Output
+            }], focus: [{
+                type: Input
+            }], heightRatioChange: [{
+                type: Output
+            }], heightRatio: [{
+                type: Input
+            }], heightChange: [{
+                type: Output
+            }], height: [{
+                type: Input
+            }], widthChange: [{
+                type: Output
+            }], width: [{
+                type: Input
+            }], perPageChange: [{
                 type: Output
-            }], pageSize: [{
+            }], perPage: [{
                 type: Input
             }], gap: [{
                 type: Input
@@ -3196,6 +3507,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 type: Output
             }], autoplay: [{
                 type: Input
+            }], snapChange: [{
+                type: Output
+            }], snap: [{
+                type: Input
+            }], autoWidthChange: [{
+                type: Output
+            }], autoWidth: [{
+                type: Input
+            }], dragChange: [{
+                type: Output
+            }], drag: [{
+                type: Input
+            }], wheelChange: [{
+                type: Output
+            }], wheel: [{
+                type: Input
             }], intervalChange: [{
                 type: Output
             }], interval: [{
@@ -3260,23 +3587,23 @@ class AXCarouselArrowsComponent extends AXBaseComponentMixin {
 }
 AXCarouselArrowsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCarouselArrowsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXCarouselComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 AXCarouselArrowsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXCarouselArrowsComponent, selector: "ax-carousel-arrows", outputs: { onNextClick: "onNextClick", onPrevClick: "onPrevClick" }, host: { classAttribute: "ax-carousel-arrows" }, usesInheritance: true, ngImport: i0, template: `
-        <button class="ax-carousel-arrow-prev" (click)="_handlePrevClick($event)">
-            <i class="ax-ic ax-ic-keyboard-arrow-left"></i>
+        <button class="ax-carousel-arrow-prev" [ngClass]="{'ax-vertical-arrow ax-top-arrow': this.parent.vertical}" (click)="_handlePrevClick($event)">
+            <i class="ax-ic ax-ic-chevron"></i>
         </button>
-        <button class="ax-carousel-arrow-next" (click)="_handleNextClick($event)">
-            <i class="ax-ic ax-ic-keyboard-arrow-right"></i>
+        <button class="ax-carousel-arrow-next" [ngClass]="{'ax-vertical-arrow ax-bottom-arrow': this.parent.vertical}" (click)="_handleNextClick($event)">
+            <i class="ax-ic ax-ic-chevron ax-block ax-rotate-180"></i>
         </button>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCarouselArrowsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-carousel-arrows',
                     template: `
-        <button class="ax-carousel-arrow-prev" (click)="_handlePrevClick($event)">
-            <i class="ax-ic ax-ic-keyboard-arrow-left"></i>
+        <button class="ax-carousel-arrow-prev" [ngClass]="{'ax-vertical-arrow ax-top-arrow': this.parent.vertical}" (click)="_handlePrevClick($event)">
+            <i class="ax-ic ax-ic-chevron"></i>
         </button>
-        <button class="ax-carousel-arrow-next" (click)="_handleNextClick($event)">
-            <i class="ax-ic ax-ic-keyboard-arrow-right"></i>
+        <button class="ax-carousel-arrow-next" [ngClass]="{'ax-vertical-arrow ax-bottom-arrow': this.parent.vertical}" (click)="_handleNextClick($event)">
+            <i class="ax-ic ax-ic-chevron ax-block ax-rotate-180"></i>
         </button>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -3301,7 +3628,7 @@ class AXCarouselPagerComponent extends AXBaseComponentMixin {
         this._size = 1;
         this._dots = [];
         this._subs = [];
-        _parent.pageSizeChange.subscribe(c => {
+        _parent.perPageChange.subscribe(c => {
             this._size = c;
             this._generateDots();
         });
@@ -3314,7 +3641,7 @@ class AXCarouselPagerComponent extends AXBaseComponentMixin {
         });
     }
     onViewInit() {
-        this._size = this._parent.pageSize;
+        this._size = this._parent.perPage;
         this._visibleIndex = this._parent.visibleIndex;
         this._generateDots();
     }
@@ -3343,7 +3670,7 @@ class AXCarouselPagerComponent extends AXBaseComponentMixin {
 }
 AXCarouselPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCarouselPagerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXCarouselComponent }], target: i0.ɵɵFactoryTarget.Component });
 AXCarouselPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXCarouselPagerComponent, selector: "ax-carousel-pager", host: { classAttribute: "ax-carousel-pager" }, usesInheritance: true, ngImport: i0, template: `
-        <button  *ngFor="let d of _dots;let i=index" [class.ax-state-active]="i==_pageIndex" (click)="_handleClick($event,i)">
+        <button *ngFor="let d of _dots;let i=index" [class.ax-state-active]="i==_pageIndex" (click)="_handleClick($event,i)">
         </button>
     `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCarouselPagerComponent, decorators: [{
@@ -3351,7 +3678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
             args: [{
                     selector: 'ax-carousel-pager',
                     template: `
-        <button  *ngFor="let d of _dots;let i=index" [class.ax-state-active]="i==_pageIndex" (click)="_handleClick($event,i)">
+        <button *ngFor="let d of _dots;let i=index" [class.ax-state-active]="i==_pageIndex" (click)="_handleClick($event,i)">
         </button>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -4302,20 +4629,28 @@ class AXDatePickerComponent extends AXBaseDatePickerMixin {
             value: v
         });
     }
-    onViewInit() {
-        super.onViewInit();
+    onInit() {
         this._popoverTitle = this.placeholder || AXTranslator.get('datepicker.popover.title');
-        this.popover.onOpened.subscribe(() => {
-            this._calendar.focus();
-        });
+    }
+    _updateDisplayText() {
+        this.displayText = this.value ? AXDateTime.convert(this.value, this.type).format(this._format) : null;
+    }
+    _handlePopoverOpened(e) {
+        this._calendar.navTo(this.value || new AXDateTime(new Date(), this.type));
     }
     _handleArrowClickEvent(e) {
         this.toggle();
     }
     _onValueChanged(oldValue, newValue) {
-        this.displayText = newValue ? AXDateTime.convert(newValue, this.type).format(this._format) : null;
+        this._updateDisplayText();
         this.close();
     }
+    _onOptionChanged(option) {
+        super._onOptionChanged(option);
+        if (option.name == 'type') {
+            this._updateDisplayText();
+        }
+    }
     _handleOnKeydownEvent(e) {
         const ignore = () => {
             e.preventDefault();
@@ -4407,16 +4742,19 @@ class AXDatePickerComponent extends AXBaseDatePickerMixin {
         e.preventDefault();
         e.stopPropagation();
     }
+    _handleOnNavigate(e) {
+        this.onNavigate.emit(e);
+    }
     _highlightPart(input, pos) {
         const { start, end } = AXStringUtil.getWordBoundsAtPosition(input.value, pos != null ? pos : input.selectionStart);
         input.setSelectionRange(start, end);
     }
 }
 AXDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", format: "format" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange", typeChange: "typeChange", disabledDates: "disabledDates", holidayDates: "holidayDates", formatChange: "formatChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "_calendar", first: true, predicate: AXCalendarComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\r\n        [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\" (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane ax-w-72\">\r\n        <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n            <span >{{placeholder || 'Choose a date'}}</span>\r\n            <i class=\"ax-ic ax-ic-close \"\r\n                (click)=\"close()\" tabindex=\"1\"></i>\r\n        </div>\r\n        <ax-calendar #calendar [disabled]=\"disabled\" [readonly]=\"readonly\" [(value)]=\"value\" [min]=\"min\" [max]=\"max\"\r\n            [disabledDates]=\"disabledDates\" [holidayDates]=\"holidayDates\" [depth]=\"depth\" [type]=\"type\">\r\n        </ax-calendar>\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: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }, { type: AXCalendarComponent, selector: "ax-calendar", inputs: ["readonly", "allowNull", "value", "debounceTime", "name", "checked", "disabled", "tabIndex", "depth", "activeView", "min", "max", "disabledDates", "type", "holidayDates"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange", "typeChange", "disabledDates", "holidayDates", "onSlotClick"] }], directives: [{ type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", format: "format" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange", typeChange: "typeChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", formatChange: "formatChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "_calendar", first: true, predicate: AXCalendarComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\r\n        [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\" (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-calendar-options\">\r\n\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" (onOpened)=\"_handlePopoverOpened($event)\">\r\n    <div class=\"ax-overlay-pane ax-w-80\">\r\n        <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n            <span >{{placeholder || 'Choose a date'}}</span>\r\n            <i class=\"ax-ic ax-ic-close \"\r\n                (click)=\"close()\" tabindex=\"1\"></i>\r\n        </div>\r\n        <ax-calendar #calendar [disabled]=\"disabled\" [readonly]=\"readonly\" \r\n            [(value)]=\"value\" \r\n            [min]=\"min\" \r\n            [max]=\"max\"\r\n            [disabledDates]=\"disabledDates\" \r\n            [holidayDates]=\"holidayDates\" \r\n            [depth]=\"depth\" \r\n            (onNavigate)=\"_handleOnNavigate($event)\"\r\n            [type]=\"type\">\r\n        </ax-calendar>\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: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }, { type: AXCalendarComponent, selector: "ax-calendar", inputs: ["readonly", "allowNull", "value", "debounceTime", "name", "checked", "disabled", "tabIndex", "depth", "activeView", "min", "max", "disabledDates", "type", "holidayDates"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange", "typeChange", "disabledDatesChange", "holidayDatesChange", "onNavigate"] }], directives: [{ type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXDatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-date-picker', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...CALENDAR_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...CALENDAR_OUTPUTS], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\r\n        [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\" (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n    <div class=\"ax-overlay-pane ax-w-72\">\r\n        <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n            <span >{{placeholder || 'Choose a date'}}</span>\r\n            <i class=\"ax-ic ax-ic-close \"\r\n                (click)=\"close()\" tabindex=\"1\"></i>\r\n        </div>\r\n        <ax-calendar #calendar [disabled]=\"disabled\" [readonly]=\"readonly\" [(value)]=\"value\" [min]=\"min\" [max]=\"max\"\r\n            [disabledDates]=\"disabledDates\" [holidayDates]=\"holidayDates\" [depth]=\"depth\" [type]=\"type\">\r\n        </ax-calendar>\r\n    </div>\r\n</ax-popover>" }]
+            args: [{ selector: 'ax-date-picker', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...CALENDAR_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...CALENDAR_OUTPUTS], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n    <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\r\n        [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n        [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\" (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-calendar-options\">\r\n\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" (onOpened)=\"_handlePopoverOpened($event)\">\r\n    <div class=\"ax-overlay-pane ax-w-80\">\r\n        <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n            <span >{{placeholder || 'Choose a date'}}</span>\r\n            <i class=\"ax-ic ax-ic-close \"\r\n                (click)=\"close()\" tabindex=\"1\"></i>\r\n        </div>\r\n        <ax-calendar #calendar [disabled]=\"disabled\" [readonly]=\"readonly\" \r\n            [(value)]=\"value\" \r\n            [min]=\"min\" \r\n            [max]=\"max\"\r\n            [disabledDates]=\"disabledDates\" \r\n            [holidayDates]=\"holidayDates\" \r\n            [depth]=\"depth\" \r\n            (onNavigate)=\"_handleOnNavigate($event)\"\r\n            [type]=\"type\">\r\n        </ax-calendar>\r\n    </div>\r\n</ax-popover>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$3.AXPlatform }]; }, propDecorators: { popover: [{
                 type: ViewChild,
                 args: [AXPopoverComponent, { static: true }]
@@ -5222,29 +5560,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
  *
  * @category Components
  */
-class AXMenuComponent extends AXBaseComponentMixin {
-    /**
-   *  @ignore
-   */
+class AXMenuComponent extends AXBaseMenuMixin {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
         this.elementRef = elementRef;
         this.cdr = cdr;
-        this.onMenuItemClick = new EventEmitter();
-        //TODO: ax-menu
+    }
+    onInit() {
+        super.onInit();
+        this._fetchData();
+    }
+    ngAfterViewInit() {
+        super.onViewInit();
     }
     onMenuClick(e, item) {
-        this.notActive(this.items);
-        if (item.children?.length > 0) {
-            this.closeChild(item.children);
+        if (!item[this.disableField]) {
+            this.notActive(this.displayItems);
+            if (item.children?.length > 0 || item[this.hasChildField]) {
+                if (item.children?.length > 0 && item[this.hasChildField]) {
+                    item.children = [];
+                }
+                if (item.children?.length > 0) {
+                    this.closeChild(item.children);
+                }
+                item.isOpen = !item.isOpen;
+            }
+            item.isActive = !item.isActive;
+            this.onMenuItemClick.emit({
+                component: this,
+                item: item,
+                nativeEvent: e,
+            });
+            if (item.isOpen && item[this.hasChildField]) {
+                this._fetchData(item.id);
+            }
         }
-        item.isActive = !item.isActive;
-        item.isOpen = !item.isOpen;
-        this.onMenuItemClick.emit({
-            component: this,
-            item: item,
-            nativeEvent: e,
-        });
         e.stopPropagation();
         e.preventDefault();
     }
@@ -5266,28 +5616,24 @@ class AXMenuComponent extends AXBaseComponentMixin {
     }
 }
 AXMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", 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.2", type: AXMenuComponent, selector: "ax-menu", inputs: { items: "items" }, outputs: { onMenuItemClick: "onMenuItemClick" }, host: { classAttribute: "ax-menu" }, usesInheritance: true, ngImport: i0, template: "<ul>\r\n  <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: items }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #recursiveListTmpl let-list=\"list\">\r\n  <ng-container *ngFor=\"let item of list\">\r\n    <li *ngIf=\"item.visible !=false\" (click)=\"onMenuClick($event,item)\">\r\n      <a [ngClass]=\"{'active': item.isActive}\">\r\n        <span>{{item.text}}</span>\r\n        <ax-icon [ngClass]=\"{'active-icon': item.isOpen}\" *ngIf=\"item?.children?.length > 0\" class=\"ax-ic-chevron\">\r\n        </ax-icon>\r\n        <ax-icon *ngIf=\"item.icon\" class=\"{{item.icon}}\">\r\n        </ax-icon>\r\n      </a>\r\n      <ul *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>", components: [{ type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }], directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AXMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXMenuComponent, selector: "ax-menu", inputs: { disabled: "disabled", tabIndex: "tabIndex", textField: "textField", valueField: "valueField", items: "items", id: "id", parentId: "parentId", icon: "icon", tooltip: "tooltip", isOpen: "isOpen", isActive: "isActive", visible: "visible", disableField: "disableField", hasChildField: "hasChildField", openMode: "openMode" }, outputs: { onBlur: "onBlur", onFocus: "onFocus" }, host: { classAttribute: "ax-menu" }, usesInheritance: true, ngImport: i0, template: "<ul>\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 [class.ax-state-disabled]=\"item[disableField]\" *ngIf=\"item.visible !=false\" (click)=\"onMenuClick($event,item)\">\r\n      <a [ngClass]=\"{'active': item.isActive}\">\r\n        <div class=\"ax-menu-start-side\">\r\n          <ax-icon [class]=\"item.icon || item[icon]\" *ngIf=\"item.icon || item[icon]\"></ax-icon>\r\n          <span>{{_getItemDisplayTextTemplte(item)}}</span>\r\n        </div>\r\n        <div class=\"ax-menu-end-side\">\r\n          <ax-icon [ngClass]=\"{'active-icon': item.isOpen}\"\r\n            *ngIf=\"item?.children?.length > 0 && !isLoading || item[hasChildField] && !isLoading\" class=\"ax-ic-chevron\">\r\n          </ax-icon>\r\n        </div>\r\n\r\n        <ax-loading *ngIf=\"isLoading && item.isActive && item.isOpen\">\r\n        </ax-loading>\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>", components: [{ type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }], directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "trans": i1$3.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: "ax-menu" }, template: "<ul>\r\n  <ng-container *ngTemplateOutlet=\"recursiveListTmpl; context:{ list: items }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #recursiveListTmpl let-list=\"list\">\r\n  <ng-container *ngFor=\"let item of list\">\r\n    <li *ngIf=\"item.visible !=false\" (click)=\"onMenuClick($event,item)\">\r\n      <a [ngClass]=\"{'active': item.isActive}\">\r\n        <span>{{item.text}}</span>\r\n        <ax-icon [ngClass]=\"{'active-icon': item.isOpen}\" *ngIf=\"item?.children?.length > 0\" class=\"ax-ic-chevron\">\r\n        </ax-icon>\r\n        <ax-icon *ngIf=\"item.icon\" class=\"{{item.icon}}\">\r\n        </ax-icon>\r\n      </a>\r\n      <ul *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>" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
-                type: Input
-            }], onMenuItemClick: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'ax-menu', inputs: [...INTERACTIVE_INPUTS, ...BASEMENU_INPUTS], outputs: [...INTERACTIVE_OUTPUT], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-menu' }, template: "<ul>\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 [class.ax-state-disabled]=\"item[disableField]\" *ngIf=\"item.visible !=false\" (click)=\"onMenuClick($event,item)\">\r\n      <a [ngClass]=\"{'active': item.isActive}\">\r\n        <div class=\"ax-menu-start-side\">\r\n          <ax-icon [class]=\"item.icon || item[icon]\" *ngIf=\"item.icon || item[icon]\"></ax-icon>\r\n          <span>{{_getItemDisplayTextTemplte(item)}}</span>\r\n        </div>\r\n        <div class=\"ax-menu-end-side\">\r\n          <ax-icon [ngClass]=\"{'active-icon': item.isOpen}\"\r\n            *ngIf=\"item?.children?.length > 0 && !isLoading || item[hasChildField] && !isLoading\" class=\"ax-ic-chevron\">\r\n          </ax-icon>\r\n        </div>\r\n\r\n        <ax-loading *ngIf=\"isLoading && item.isActive && item.isOpen\">\r\n        </ax-loading>\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>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
 const COMPONENT$9 = [AXMenuComponent];
 const MODULES$9 = [CommonModule];
 class AXMenuModule {
 }
 AXMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXMenuModule, declarations: [AXMenuComponent], imports: [CommonModule, AXIconModule], exports: [AXMenuComponent] });
-AXMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXMenuModule, providers: [], imports: [[...MODULES$9, AXIconModule]] });
+AXMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXMenuModule, declarations: [AXMenuComponent], imports: [CommonModule, AXIconModule, AXLoadingModule, AXTranslationModule], exports: [AXMenuComponent] });
+AXMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXMenuModule, providers: [], imports: [[...MODULES$9, AXIconModule, AXLoadingModule, AXTranslationModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT$9],
-                    imports: [...MODULES$9, AXIconModule],
+                    imports: [...MODULES$9, AXIconModule, AXLoadingModule, AXTranslationModule],
                     exports: [...COMPONENT$9],
                     providers: [],
                 }]
@@ -5608,6 +5954,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }] });
 
+class AXPickerComponent extends AXBaseComponent {
+    /**
+    *  @ignore
+    */
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.items = [];
+    }
+}
+AXPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AXPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXPickerComponent, selector: "ax-picker", inputs: { items: "items" }, host: { classAttribute: "ax-picker" }, usesInheritance: true, ngImport: i0, template: "<ax-carousel [vertical]=\"true\" [centered]=\"true\">\r\n    <ax-carousel-item class=\"ax-picker-item\" *ngFor=\"let item of items\">\r\n        {{item.text}}\r\n    </ax-carousel-item>\r\n</ax-carousel>", components: [{ type: AXCarouselComponent, selector: "ax-carousel", inputs: ["perMove", "focus", "heightRatio", "height", "width", "perPage", "gap", "autoplay", "snap", "autoWidth", "drag", "wheel", "interval", "padding", "centered", "vertical", "loop", "rewind"], outputs: ["onOptionsChanged", "onSlideChanged", "perMoveChange", "focusChange", "heightRatioChange", "heightChange", "widthChange", "perPageChange", "autoplayChange", "snapChange", "autoWidthChange", "dragChange", "wheelChange", "intervalChange", "paddingChange", "centeredChange", "verticalChange", "loopChange", "rewindChange", "onItemsChanged"] }, { type: AXCarouselItemComponent, selector: "ax-carousel-item" }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-picker', host: { class: 'ax-picker' }, template: "<ax-carousel [vertical]=\"true\" [centered]=\"true\">\r\n    <ax-carousel-item class=\"ax-picker-item\" *ngFor=\"let item of items\">\r\n        {{item.text}}\r\n    </ax-carousel-item>\r\n</ax-carousel>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
+                type: Input
+            }] } });
+
+class AXPickerModule {
+}
+AXPickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPickerModule, declarations: [AXPickerComponent], imports: [CommonModule, AXCarouselModule], exports: [AXPickerComponent] });
+AXPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPickerModule, providers: [], imports: [[CommonModule, AXCarouselModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXPickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AXPickerComponent],
+                    imports: [CommonModule, AXCarouselModule],
+                    exports: [AXPickerComponent],
+                    providers: [],
+                }]
+        }] });
+
 /**
  * The Button is a component which detects user interaction and triggers a corresponding event
  *
@@ -6490,8 +6869,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 const AXBaseTabItemMixin = _ClickableComponenetMixin(AXBaseComponent);
 class AXTabItemComponent extends AXBaseTabItemMixin {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
+    constructor(_elementRef, _cdr) {
+        super(_elementRef, _cdr);
         this.activeChange = new EventEmitter();
         this._active = false;
         this.disabledChange = new EventEmitter();
@@ -6503,7 +6882,10 @@ class AXTabItemComponent extends AXBaseTabItemMixin {
     set active(value) {
         this._setOption({
             name: 'active',
-            value
+            value,
+            afterCallback: () => {
+                this._cdr.markForCheck();
+            }
         });
     }
     get disabled() {
@@ -6613,10 +6995,10 @@ class AXTabsComponent extends AXBaseComponent {
         return this._contentTabs.toArray();
     }
     get selectedIndex() {
-        return this.items.findIndex(c => c.active);
+        return this.items.indexOf(this._selectedItem);
     }
     get selectedItem() {
-        return this.items.find(c => c.active);
+        return this._selectedItem;
     }
     onRenderCssClass() {
         const classList = Array.from(this._getHostElement().classList);
@@ -6642,6 +7024,7 @@ class AXTabsComponent extends AXBaseComponent {
         //
         if (!tab || this.selectedItem == tabItem)
             return;
+        this._selectedItem = tabItem;
         //
         this.items.forEach(c => c.active = false);
         tabItem.active = true;
@@ -7625,5 +8008,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXActionSheetComponent, AXActionSheetItemComponent, AXActionSheetModule, AXAlertButtonComponent, AXAlertComponent, AXAlertContentComponent, AXAlertFooterComponent, AXAlertModule, AXAlertSuffixComponent, AXAlertTitleComponent, AXAvatarComponent, AXAvatarGroup, AXAvatarMixin, AXAvatarModule, AXBadgeComponent, AXBadgeModule, AXBaseAlertMixin, AXBaseBadgeMixin, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDatePickerMixin, AXBaseDropdownMixin, AXBaseItemButtonMixin, AXBasePageComponent, AXBaseProgressMixin, 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, AXCollapseComponent, AXCollapseGroupComponent, AXCollapseModule, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatePickerComponent, AXDatepickerModule, AXDecoratorAddOnComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent, AXDrawerModule, AXDropdownModule, AXDropdownPanelComponent, AXEditorDecoratorModule, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXIconComponent, AXIconModule, AXInfiniteScrollerDirective, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXItemClickEvent, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXMenuComponent, AXMenuModule, AXNumberBoxComponent, AXNumberBoxModule, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageFooterComponent, AXPageHeaderComponent, AXPageModule, AXPageResult, AXPasswordBoxComponent, AXPasswordBoxModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXProgressBarComponent, AXProgressBarModule, AXRadioComponent, AXRadioModule, AXRangeSliderComponent, AXRangeSliderModule, AXRatingComponent, AXRatingModule, AXResponsiveDirective, AXResultComponent, AXResultModule, 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, AXAlertContentComponent, AXAlertFooterComponent, AXAlertModule, AXAlertSuffixComponent, AXAlertTitleComponent, 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, AXCollapseComponent, AXCollapseGroupComponent, AXCollapseModule, AXCommonModule, AXDataListComponent, AXDataListModule, AXDatePickerComponent, AXDatepickerModule, AXDecoratorAddOnComponent, AXDecoratorContentComponent, AXDecoratorHeaderComponent, AXDecoratorPrefixComponent, AXDecoratorSuffixComponent, AXDialogComponent, AXDialogModule, AXDialogService, AXDrawerComponent, AXDrawerContainerComponent, AXDrawerContentComponent, AXDrawerModule, AXDropdownModule, AXDropdownPanelComponent, AXEditorDecoratorModule, AXEvent, AXFocusEvent, AXFormComponent, AXFormFieldComponent, AXFormHintComponent, AXFormModule, AXHtmlEvent, AXIconComponent, AXIconModule, AXInfiniteScrollerDirective, AXInputMaskComponent, AXInputMaskModule, AXInteractiveComponenetMixin, AXItemClickEvent, AXLabelComponent, AXLabelModule, AXLoadingComponent, AXLoadingDirective, AXLoadingModule, AXLoadingService, AXLoadingSpinnerComponent, AXMenuComponent, AXMenuModule, AXNumberBoxComponent, AXNumberBoxModule, AXPageCloseEvent, AXPageClosedPromise, AXPageClosing, AXPageComponent, AXPageFooterComponent, AXPageHeaderComponent, AXPageModule, AXPageResult, AXPasswordBoxComponent, AXPasswordBoxModule, AXPickerComponent, AXPickerModule, AXPopoverComponent, AXPopoverModule, AXPopupComponent, AXPopupModule, AXPopupService, AXProgressBarComponent, AXProgressBarModule, AXRadioComponent, AXRadioModule, AXRangeChangedEvent, AXRangeSliderComponent, AXRangeSliderModule, AXRatingComponent, AXRatingModule, AXResponsiveDirective, AXResultComponent, AXResultModule, 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 };
 //# sourceMappingURL=acorex-components.mjs.map