@acorex/components 5.0.58 → 5.1.0

package/fesm2020/acorex-components.mjs

@@ -1106,6 +1106,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 =
@@ -2482,28 +2488,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
         }] });
 
 class AXBreadCrumbsComponent extends AXBaseComponent {
-    constructor() {
-        super();
+    /**
+      *  @ignore
+      */
+    constructor(_elementRef, _cdr) {
+        super(_elementRef, _cdr);
     }
 }
-AXBreadCrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadCrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXBreadCrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadCrumbsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 AXBreadCrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXBreadCrumbsComponent, selector: "ax-breadcrumbs", host: { classAttribute: "ax-breadcrumbs" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-breadcrumbs-item\"></ng-content>" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadCrumbsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-breadcrumbs', host: { class: 'ax-breadcrumbs' }, template: "<ng-content select=\"ax-breadcrumbs-item\"></ng-content>" }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
 class AXBreadCrumbsItemComponent extends AXBaseComponent {
-    constructor() {
-        super();
+    /**
+       *  @ignore
+       */
+    constructor(_elementRef, _cdr) {
+        super(_elementRef, _cdr);
     }
 }
-AXBreadCrumbsItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadCrumbsItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXBreadCrumbsItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadCrumbsItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 AXBreadCrumbsItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: { text: "text" }, host: { classAttribute: "ax-breadcrumbs-item" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n</ng-content>\r\n<div>{{text}}</div>\r\n<ng-content select=\"ax-suffix,ax-loading,ax-icon\">\r\n</ng-content>" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXBreadCrumbsItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-breadcrumbs-item', host: { class: 'ax-breadcrumbs-item' }, template: "<ng-content select=\"ax-prefix,ax-loading,ax-icon\">\r\n</ng-content>\r\n<div>{{text}}</div>\r\n<ng-content select=\"ax-suffix,ax-loading,ax-icon\">\r\n</ng-content>" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { text: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
                 type: Input
             }] } });
 
@@ -2522,9 +2534,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();
@@ -2592,7 +2612,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
@@ -2630,7 +2654,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 {
@@ -2642,7 +2666,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;
@@ -2655,7 +2679,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'));
         }
     }
@@ -2736,8 +2759,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,
                     };
@@ -2759,10 +2782,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)
@@ -2787,14 +2814,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') {
@@ -2809,8 +2839,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);
@@ -2835,6 +2867,14 @@ 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();
     }
     get __hostClass() {
@@ -2869,13 +2909,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']
             }] } });
@@ -2941,16 +2979,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() {
@@ -2994,11 +3038,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();
@@ -3015,17 +3077,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();
         }
     }
@@ -3040,6 +3155,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;
     }
@@ -3166,7 +3325,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 });
@@ -3180,9 +3339,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
-            }], pageSize: [{
+            }], width: [{
+                type: Input
+            }], perPageChange: [{
+                type: Output
+            }], perPage: [{
                 type: Input
             }], gap: [{
                 type: Input
@@ -3190,6 +3369,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: [{
@@ -3254,23 +3449,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,
@@ -3295,7 +3490,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();
         });
@@ -3308,7 +3503,7 @@ class AXCarouselPagerComponent extends AXBaseComponentMixin {
         });
     }
     onViewInit() {
-        this._size = this._parent.pageSize;
+        this._size = this._parent.perPage;
         this._visibleIndex = this._parent.visibleIndex;
         this._generateDots();
     }
@@ -3337,7 +3532,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: [{
@@ -3345,7 +3540,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,
@@ -3422,8 +3617,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
         }] });
 
 class AXCollapseComponent extends AXBaseComponent {
-    constructor() {
-        super();
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.cdr = cdr;
         this.isCollapsedChange = new EventEmitter();
         this._isCollapsed = false;
         this.caption = '';
@@ -3443,12 +3639,12 @@ class AXCollapseComponent extends AXBaseComponent {
         this.isCollapsed = !this.isCollapsed;
     }
 }
-AXCollapseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXCollapseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", 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.2", 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", 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 []; }, propDecorators: { isCollapsedChange: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { isCollapsedChange: [{
                 type: Output
             }], isCollapsed: [{
                 type: Input
@@ -3460,8 +3656,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
             }] } });
 
 class AXCollapseGroupComponent extends AXBaseComponent {
-    constructor() {
-        super();
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.cdr = cdr;
         this.accordion = false;
         this.nonCollapsedIndex = 0;
     }
@@ -3479,15 +3676,8 @@ class AXCollapseGroupComponent extends AXBaseComponent {
             });
         }
     }
-    ngDoCheck() {
-        //Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.
-        //Add 'implements DoCheck' to the class.
-        // if (this.accordion) {
-        //     this._collapses.forEach(c => c.isCollapsed = false);
-        // }
-    }
 }
-AXCollapseGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXCollapseGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AXCollapseGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", 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.2", type: AXCollapseGroupComponent, selector: "ax-collapse-group", inputs: { accordion: "accordion", nonCollapsedIndex: "nonCollapsedIndex" }, host: { classAttribute: "ax-collapse-group" }, queries: [{ propertyName: "_collapses", 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.2", ngImport: i0, type: AXCollapseGroupComponent, decorators: [{
             type: Component,
@@ -3498,7 +3688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { accordion: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { accordion: [{
                 type: Input
             }], nonCollapsedIndex: [{
                 type: Input
@@ -4301,20 +4491,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;
+    }
     _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();
@@ -4406,16 +4604,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'\">\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'\">\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 }]
@@ -5607,6 +5808,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
  *
@@ -6017,12 +6251,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 type: Input
             }] } });
 
-class ResultModule {
+class AXResultModule {
 }
-ResultModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: ResultModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ResultModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: ResultModule, declarations: [AXResultComponent], imports: [CommonModule], exports: [AXResultComponent] });
-ResultModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: ResultModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: ResultModule, decorators: [{
+AXResultModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXResultModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXResultModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXResultModule, declarations: [AXResultComponent], imports: [CommonModule], exports: [AXResultComponent] });
+AXResultModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXResultModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AXResultModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AXResultComponent],
@@ -7624,5 +7858,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, 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, ResultModule, 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, 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, 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