@acorex/components 7.1.2 → 7.1.5

package/fesm2022/acorex-components-calendar.mjs

@@ -116,10 +116,10 @@ class MXCalendarBaseComponent extends classes(MXBaseComponent) {
     set holidayDates(v) {
         this.setOption({ name: 'holidayDates', value: v });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MXCalendarBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MXCalendarBaseComponent });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: MXCalendarBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: MXCalendarBaseComponent });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MXCalendarBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: MXCalendarBaseComponent, decorators: [{
             type: Injectable
         }], propDecorators: { interface: [{
                 type: Input
@@ -233,10 +233,10 @@ class AXCalendarBaseComponent extends AXBaseComponent {
     set holidayDates(v) {
         this._setOption({ name: 'holidayDates', value: v });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXCalendarBaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXCalendarBaseComponent });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXCalendarBaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXCalendarBaseComponent });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXCalendarBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXCalendarBaseComponent, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { onSlotClick: [{
                 type: Output
@@ -606,10 +606,10 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         const weekend = AXConfig.get(`dateTime.calendars.${this.type}.weekend`);
         return weekend.includes(date.dayOfWeek);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXCalendarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXCalendarComponent, selector: "ax-calendar", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation" }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n  <ng-container *ngIf=\"showNavigation\">\r\n    <ng-content select=\"ax-header\"></ng-content>\r\n    <div class=\"ax-calendar-header\">\r\n      <div class=\"ax-calendar-header-info\">\r\n        <ng-container *ngIf=\"activeView == 'days'; else elseTemplate\">\r\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\r\n            {{ _navText.split(' ')[1] }}\r\n          </button>\r\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\r\n            {{ _navText.split(' ')[0] }}\r\n          </button>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\r\n            {{ _navText }}\r\n          </button>\r\n        </ng-template>\r\n      </div>\r\n      <div class=\"ax-calendar-header-buttons\">\r\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\r\n          (click)=\"_handlePrevClick()\">\r\n          <i class=\"ax-icon\" [ngClass]=\"{\r\n              'ax-icon-chevron-left': !rtl,\r\n              'ax-icon-chevron-right': rtl\r\n            }\"></i>\r\n        </button>\r\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\r\n          (click)=\"_handleNextClick()\">\r\n          <i class=\"ax-icon\" [ngClass]=\"{\r\n              'ax-icon-chevron-left': rtl,\r\n              'ax-icon-chevron-right': !rtl\r\n            }\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\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\" [ngClass]=\"{'ax-default':!cellTemplate}\">\r\n          <div tabindex=\"0\" *ngFor=\"let slot of _slots\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"\r\n            (click)=\"_handleSlotClick($event, slot)\">\r\n            <ng-container *ngIf=\"cellTemplate; else yearTpl\">\r\n              <div >\r\n                <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\r\n                </ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #yearTpl>\r\n              <div [title]=\"slot.tooltip\" >\r\n                {{ slot.text }}\r\n              </div>\r\n            </ng-template>\r\n          </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\" [ngClass]=\"{'ax-default':!cellTemplate}\">\r\n          <div tabindex=\"0\" *ngFor=\"let slot of _slots\"  class=\"ax-calendar-slot\"\r\n            [ngClass]=\"slot.cssClass\" (click)=\"_handleSlotClick($event, slot)\">\r\n            <ng-container *ngIf=\"cellTemplate; else monthTpl\">\r\n              <div >\r\n                <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\r\n                </ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #monthTpl>\r\n              <div [title]=\"slot.tooltip\" >\r\n                {{ slot.text }}\r\n              </div>\r\n            </ng-template>\r\n          </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\" [ngClass]=\"{'ax-default':!cellTemplate}\">\r\n          <ng-container *ngFor=\"let slot of _slots\">\r\n            <div tabindex=\"0\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"  \r\n              (click)=\"_handleSlotClick($event, slot)\">\r\n              <ng-container *ngIf=\"cellTemplate; else dayTpl\">\r\n                <div >\r\n                  <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n              <ng-template #dayTpl>\r\n                <div [title]=\"slot.tooltip\" >\r\n                  {{ slot.text }}\r\n                </div>\r\n              </ng-template>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <ng-content select=\"ax-footer\"></ng-content>\r\n  <!-- <div class=\"ax-calendar-footer\">\r\n    <button\r\n      class=\"ax-today-button\"\r\n      tabindex=\"-1\"\r\n      [class.ax-state-disabled]=\"disabled\"\r\n      [attr.disabled]=\"(disabled || isDisabled(_today)?true:null)\"\r\n      (click)=\"_handleGoToday()\"\r\n      *ngIf=\"activeView == 'days'\">\r\n      {{ _todayText }}\r\n    </button>\r\n  </div> -->\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n  <div class=\"ax-calendar-picker\">//TODO: picker</div>\r\n</ng-template>", styles: [".ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem;width:18rem}@media (max-width: 599px){ax-calendar{width:100%}}@media (min-width: 600px){ax-calendar{width:20rem}}@media (min-width: 1200px){ax-calendar{width:18rem}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-top:.25rem;padding-left:.25rem;padding-right:.25rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{margin:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";display:block;clear:both}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-today){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-today){outline-width:2px;outline-style:solid;outline-color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-width:2px;outline-style:dashed}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-width:2px;border-style:solid;border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today:focus-visible{border-style:dashed;outline-color:transparent}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-color-danger-500))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:.5rem;margin-bottom:.5rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:.875rem;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;cursor:text;margin:.125rem}ax-calendar .ax-calendar-footer{display:flex;justify-content:center;align-items:center;margin-top:1.125rem}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;height:var(--ax-size-default);padding:0 1rem;font-size:.875rem;text-align:center;display:block;background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-primary-400))}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:focus,ax-calendar .ax-calendar-footer .ax-today-button:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-600))}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXCalendarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: AXCalendarComponent, selector: "ax-calendar", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation" }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\n  <ng-container *ngIf=\"showNavigation\">\n    <ng-content select=\"ax-header\"></ng-content>\n    <div class=\"ax-calendar-header\">\n      <div class=\"ax-calendar-header-info\">\n        <ng-container *ngIf=\"activeView == 'days'; else elseTemplate\">\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\n            {{ _navText.split(' ')[1] }}\n          </button>\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\n            {{ _navText.split(' ')[0] }}\n          </button>\n        </ng-container>\n        <ng-template #elseTemplate>\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\n            {{ _navText }}\n          </button>\n        </ng-template>\n      </div>\n      <div class=\"ax-calendar-header-buttons\">\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n          (click)=\"_handlePrevClick()\">\n          <i class=\"ax-icon\" [ngClass]=\"{\n              'ax-icon-chevron-left': !rtl,\n              'ax-icon-chevron-right': rtl\n            }\"></i>\n        </button>\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n          (click)=\"_handleNextClick()\">\n          <i class=\"ax-icon\" [ngClass]=\"{\n              'ax-icon-chevron-left': rtl,\n              'ax-icon-chevron-right': !rtl\n            }\"></i>\n        </button>\n      </div>\n    </div>\n  </ng-container>\n  <div class=\"ax-calendar-body\">\n    <div [ngSwitch]=\"activeView\">\n      <ng-container *ngSwitchCase=\"'years'\">\n        <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n          <div tabindex=\"0\" *ngFor=\"let slot of _slots\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"\n            (click)=\"_handleSlotClick($event, slot)\">\n            <ng-container *ngIf=\"cellTemplate; else yearTpl\">\n              <div >\n                <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\n                </ng-container>\n              </div>\n            </ng-container>\n            <ng-template #yearTpl>\n              <div [title]=\"slot.tooltip\" >\n                {{ slot.text }}\n              </div>\n            </ng-template>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'months'\">\n        <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n          <div tabindex=\"0\" *ngFor=\"let slot of _slots\"  class=\"ax-calendar-slot\"\n            [ngClass]=\"slot.cssClass\" (click)=\"_handleSlotClick($event, slot)\">\n            <ng-container *ngIf=\"cellTemplate; else monthTpl\">\n              <div >\n                <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\n                </ng-container>\n              </div>\n            </ng-container>\n            <ng-template #monthTpl>\n              <div [title]=\"slot.tooltip\" >\n                {{ slot.text }}\n              </div>\n            </ng-template>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchDefault>\n        <div class=\"ax-calendar-week\">\n          <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\n        </div>\n        <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n          <ng-container *ngFor=\"let slot of _slots\">\n            <div tabindex=\"0\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"  \n              (click)=\"_handleSlotClick($event, slot)\">\n              <ng-container *ngIf=\"cellTemplate; else dayTpl\">\n                <div >\n                  <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #dayTpl>\n                <div [title]=\"slot.tooltip\" >\n                  {{ slot.text }}\n                </div>\n              </ng-template>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <ng-content select=\"ax-footer\"></ng-content>\n</ng-container>\n<ng-template #pickerTemplate>\n  <div class=\"ax-calendar-picker\">//TODO: picker</div>\n</ng-template>", styles: [".ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem;width:19rem}@media (max-width: 599px){ax-calendar{width:100%}}@media (min-width: 600px){ax-calendar{width:20rem}}@media (min-width: 1200px){ax-calendar{width:19rem}}@media (min-width: 1800px){ax-calendar{width:21rem}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-top:.25rem;padding-left:.25rem;padding-right:.25rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{margin:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";display:block;clear:both}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-today){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-today){outline-width:2px;outline-style:solid;outline-color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-width:2px;outline-style:dashed}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-width:2px;border-style:solid;border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today:focus-visible{border-style:dashed;outline-color:transparent}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-color-danger-500))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:.5rem;margin-bottom:.5rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:.875rem;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;cursor:text;margin:.125rem}ax-calendar .ax-calendar-footer{display:flex;justify-content:center;align-items:center;margin-top:1.125rem}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;height:var(--ax-size-default);padding:0 1rem;font-size:.875rem;text-align:center;display:block;background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-primary-400))}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:focus,ax-calendar .ax-calendar-footer .ax-today-button:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-600))}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-calendar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: [
                         'rtl',
@@ -640,7 +640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                         'holidayDatesChange',
                         'onNavigate',
                         'onSlotClick'
-                    ], template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n  <ng-container *ngIf=\"showNavigation\">\r\n    <ng-content select=\"ax-header\"></ng-content>\r\n    <div class=\"ax-calendar-header\">\r\n      <div class=\"ax-calendar-header-info\">\r\n        <ng-container *ngIf=\"activeView == 'days'; else elseTemplate\">\r\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\r\n            {{ _navText.split(' ')[1] }}\r\n          </button>\r\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\r\n            {{ _navText.split(' ')[0] }}\r\n          </button>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\r\n            {{ _navText }}\r\n          </button>\r\n        </ng-template>\r\n      </div>\r\n      <div class=\"ax-calendar-header-buttons\">\r\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\r\n          (click)=\"_handlePrevClick()\">\r\n          <i class=\"ax-icon\" [ngClass]=\"{\r\n              'ax-icon-chevron-left': !rtl,\r\n              'ax-icon-chevron-right': rtl\r\n            }\"></i>\r\n        </button>\r\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\r\n          (click)=\"_handleNextClick()\">\r\n          <i class=\"ax-icon\" [ngClass]=\"{\r\n              'ax-icon-chevron-left': rtl,\r\n              'ax-icon-chevron-right': !rtl\r\n            }\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\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\" [ngClass]=\"{'ax-default':!cellTemplate}\">\r\n          <div tabindex=\"0\" *ngFor=\"let slot of _slots\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"\r\n            (click)=\"_handleSlotClick($event, slot)\">\r\n            <ng-container *ngIf=\"cellTemplate; else yearTpl\">\r\n              <div >\r\n                <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\r\n                </ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #yearTpl>\r\n              <div [title]=\"slot.tooltip\" >\r\n                {{ slot.text }}\r\n              </div>\r\n            </ng-template>\r\n          </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\" [ngClass]=\"{'ax-default':!cellTemplate}\">\r\n          <div tabindex=\"0\" *ngFor=\"let slot of _slots\"  class=\"ax-calendar-slot\"\r\n            [ngClass]=\"slot.cssClass\" (click)=\"_handleSlotClick($event, slot)\">\r\n            <ng-container *ngIf=\"cellTemplate; else monthTpl\">\r\n              <div >\r\n                <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\r\n                </ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #monthTpl>\r\n              <div [title]=\"slot.tooltip\" >\r\n                {{ slot.text }}\r\n              </div>\r\n            </ng-template>\r\n          </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\" [ngClass]=\"{'ax-default':!cellTemplate}\">\r\n          <ng-container *ngFor=\"let slot of _slots\">\r\n            <div tabindex=\"0\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"  \r\n              (click)=\"_handleSlotClick($event, slot)\">\r\n              <ng-container *ngIf=\"cellTemplate; else dayTpl\">\r\n                <div >\r\n                  <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n              <ng-template #dayTpl>\r\n                <div [title]=\"slot.tooltip\" >\r\n                  {{ slot.text }}\r\n                </div>\r\n              </ng-template>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <ng-content select=\"ax-footer\"></ng-content>\r\n  <!-- <div class=\"ax-calendar-footer\">\r\n    <button\r\n      class=\"ax-today-button\"\r\n      tabindex=\"-1\"\r\n      [class.ax-state-disabled]=\"disabled\"\r\n      [attr.disabled]=\"(disabled || isDisabled(_today)?true:null)\"\r\n      (click)=\"_handleGoToday()\"\r\n      *ngIf=\"activeView == 'days'\">\r\n      {{ _todayText }}\r\n    </button>\r\n  </div> -->\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n  <div class=\"ax-calendar-picker\">//TODO: picker</div>\r\n</ng-template>", styles: [".ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem;width:18rem}@media (max-width: 599px){ax-calendar{width:100%}}@media (min-width: 600px){ax-calendar{width:20rem}}@media (min-width: 1200px){ax-calendar{width:18rem}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-top:.25rem;padding-left:.25rem;padding-right:.25rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{margin:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";display:block;clear:both}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-today){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-today){outline-width:2px;outline-style:solid;outline-color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-width:2px;outline-style:dashed}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-width:2px;border-style:solid;border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today:focus-visible{border-style:dashed;outline-color:transparent}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-color-danger-500))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:.5rem;margin-bottom:.5rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:.875rem;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;cursor:text;margin:.125rem}ax-calendar .ax-calendar-footer{display:flex;justify-content:center;align-items:center;margin-top:1.125rem}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;height:var(--ax-size-default);padding:0 1rem;font-size:.875rem;text-align:center;display:block;background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-primary-400))}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:focus,ax-calendar .ax-calendar-footer .ax-today-button:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-600))}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"] }]
+                    ], template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\n  <ng-container *ngIf=\"showNavigation\">\n    <ng-content select=\"ax-header\"></ng-content>\n    <div class=\"ax-calendar-header\">\n      <div class=\"ax-calendar-header-info\">\n        <ng-container *ngIf=\"activeView == 'days'; else elseTemplate\">\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\n            {{ _navText.split(' ')[1] }}\n          </button>\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\n            {{ _navText.split(' ')[0] }}\n          </button>\n        </ng-container>\n        <ng-template #elseTemplate>\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\n            {{ _navText }}\n          </button>\n        </ng-template>\n      </div>\n      <div class=\"ax-calendar-header-buttons\">\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n          (click)=\"_handlePrevClick()\">\n          <i class=\"ax-icon\" [ngClass]=\"{\n              'ax-icon-chevron-left': !rtl,\n              'ax-icon-chevron-right': rtl\n            }\"></i>\n        </button>\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n          (click)=\"_handleNextClick()\">\n          <i class=\"ax-icon\" [ngClass]=\"{\n              'ax-icon-chevron-left': rtl,\n              'ax-icon-chevron-right': !rtl\n            }\"></i>\n        </button>\n      </div>\n    </div>\n  </ng-container>\n  <div class=\"ax-calendar-body\">\n    <div [ngSwitch]=\"activeView\">\n      <ng-container *ngSwitchCase=\"'years'\">\n        <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n          <div tabindex=\"0\" *ngFor=\"let slot of _slots\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"\n            (click)=\"_handleSlotClick($event, slot)\">\n            <ng-container *ngIf=\"cellTemplate; else yearTpl\">\n              <div >\n                <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\n                </ng-container>\n              </div>\n            </ng-container>\n            <ng-template #yearTpl>\n              <div [title]=\"slot.tooltip\" >\n                {{ slot.text }}\n              </div>\n            </ng-template>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'months'\">\n        <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n          <div tabindex=\"0\" *ngFor=\"let slot of _slots\"  class=\"ax-calendar-slot\"\n            [ngClass]=\"slot.cssClass\" (click)=\"_handleSlotClick($event, slot)\">\n            <ng-container *ngIf=\"cellTemplate; else monthTpl\">\n              <div >\n                <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\n                </ng-container>\n              </div>\n            </ng-container>\n            <ng-template #monthTpl>\n              <div [title]=\"slot.tooltip\" >\n                {{ slot.text }}\n              </div>\n            </ng-template>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchDefault>\n        <div class=\"ax-calendar-week\">\n          <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\n        </div>\n        <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n          <ng-container *ngFor=\"let slot of _slots\">\n            <div tabindex=\"0\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"  \n              (click)=\"_handleSlotClick($event, slot)\">\n              <ng-container *ngIf=\"cellTemplate; else dayTpl\">\n                <div >\n                  <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #dayTpl>\n                <div [title]=\"slot.tooltip\" >\n                  {{ slot.text }}\n                </div>\n              </ng-template>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <ng-content select=\"ax-footer\"></ng-content>\n</ng-container>\n<ng-template #pickerTemplate>\n  <div class=\"ax-calendar-picker\">//TODO: picker</div>\n</ng-template>", styles: [".ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem;width:19rem}@media (max-width: 599px){ax-calendar{width:100%}}@media (min-width: 600px){ax-calendar{width:20rem}}@media (min-width: 1200px){ax-calendar{width:19rem}}@media (min-width: 1800px){ax-calendar{width:21rem}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-top:.25rem;padding-left:.25rem;padding-right:.25rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{margin:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";display:block;clear:both}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-today){background-color:rgba(var(--ax-color-primary-300));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-today){outline-width:2px;outline-style:solid;outline-color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-width:2px;outline-style:dashed}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-width:2px;border-style:solid;border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today:focus-visible{border-style:dashed;outline-color:transparent}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-color-danger-500))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:.5rem;margin-bottom:.5rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:.875rem;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;cursor:text;margin:.125rem}ax-calendar .ax-calendar-footer{display:flex;justify-content:center;align-items:center;margin-top:1.125rem}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;height:var(--ax-size-default);padding:0 1rem;font-size:.875rem;text-align:center;display:block;background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-primary-400))}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:focus,ax-calendar .ax-calendar-footer .ax-today-button:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-600))}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"] }]
         }], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -649,7 +649,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
 class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractiveComponent, MXCalendarBaseComponent) {
     _c1;
     _c2;
-    _navText = "";
+    _navText = '';
     constructor() {
         super();
         this.defaultValue = { from: null, end: null };
@@ -667,18 +667,17 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
         }
         if (this.value.end && d.equal(end, 'day'))
             return 'ax-range-end';
-        if (this.value.from && this.value.end && (d.compare(from, 'day') > 0) && (d.compare(end, 'day') < 0))
+        if (this.value.from && this.value.end && d.compare(from, 'day') > 0 && d.compare(end, 'day') < 0)
             return 'ax-range-between';
         return null;
     };
     handleSlotClick(e) {
-        debugger;
         if (this._c1.activeView == this.depth) {
             if (!this.value.from || (this.value.from && this.value.end)) {
                 this.value.from = e.item;
                 this.value.end = null;
             }
-            if (this.value.from && (e.item <= this.value.from)) {
+            if (this.value.from && e.item <= this.value.from) {
                 this.value.from = e.item;
             }
             else if (this.value.from && !this.value.end) {
@@ -723,15 +722,15 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
         const d1 = this._c1.displayRange.startTime;
         if (view == 'days') {
             const d2 = this._c2.displayRange.endTime;
-            this._navText = `${d1.format("MMM yyyy")} - ${d2.format("MMM yyyy")}`;
+            this._navText = `${d1.format('MMM yyyy')} - ${d2.format('MMM yyyy')}`;
         }
         else if (view == 'months') {
             const d2 = this._c2.displayRange.endTime;
-            this._navText = `${d1.format("yyyy")} - ${d2.format("yyyy")}`;
+            this._navText = `${d1.format('yyyy')} - ${d2.format('yyyy')}`;
         }
         else if (view == 'years') {
             const d2 = this._c2.displayRange.endTime;
-            this._navText = `${d1.format("yyyy")} - ${d2.format("yyyy")}`;
+            this._navText = `${d1.format('yyyy')} - ${d2.format('yyyy')}`;
         }
     }
     handleNavigate() {
@@ -747,32 +746,32 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
         }
     }
     _syncNav1() {
-        const view = this._c2.activeView = this._c1.activeView;
+        const view = (this._c2.activeView = this._c1.activeView);
         const range = this._c1.displayRange;
         if (view == 'days') {
-            this._c2.navTo(range.startTime.add("month", 1));
+            this._c2.navTo(range.startTime.add('month', 1));
         }
         else if (view == 'months') {
-            this._c2.navTo(range.startTime.add("year", 1));
+            this._c2.navTo(range.startTime.add('year', 1));
         }
         else if (view == 'years') {
-            this._c2.navTo(range.endTime.add("year", 4));
+            this._c2.navTo(range.endTime.add('year', 4));
         }
         this._syncNavText();
     }
     _syncNav2(e) {
         const view = this._c2.activeView;
         if (view == 'months') {
-            this._c1.navTo(e.add("month", -1));
+            this._c1.navTo(e.add('month', -1));
         }
         else if (view == 'years') {
             this._c1.navTo(e.startOf('year'));
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXCalendarRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AXCalendarRangeComponent, selector: "ax-calendar-range", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation" }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick" }, viewQueries: [{ propertyName: "_c1", first: true, predicate: ["c1"], descendants: true, static: true }, { propertyName: "_c2", first: true, predicate: ["c2"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-range-header\">\r\n    <ng-content></ng-content>\r\n    <div class=\"ax-calendar-header-range-info\">\r\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"handleNavClick()\">\r\n            {{ _navText }}\r\n        </button>\r\n    </div>\r\n    <div class=\"ax-calendar-header-range-buttons\">\r\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\r\n            (click)=\"handlePrevClick()\">\r\n            <i class=\"ax-icon\" [ngClass]=\"{\r\n                'ax-icon-chevron-left': !rtl,\r\n                'ax-icon-chevron-right': rtl\r\n              }\"></i>\r\n        </button>\r\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\r\n            (click)=\"handleNextClick()\">\r\n            <i class=\"ax-icon\" [ngClass]=\"{\r\n                'ax-icon-chevron-left': rtl,\r\n                'ax-icon-chevron-right': !rtl\r\n              }\"></i>\r\n        </button>\r\n    </div>\r\n</div>\r\n<div class=\"ax-calendar-range-body\">\r\n    <ax-calendar #c1 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\r\n        [cellTemplate]=\"cellTemplate\" [min]=\"min\" [max]=\"max\" [readonly]=\"true\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\r\n        (onNavigate)=\"handleNavigate()\" (activeViewChange)=\"handleActiveViewChange1()\">\r\n    </ax-calendar>\r\n    <ax-calendar #c2 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\r\n        [cellTemplate]=\"cellTemplate\" [min]=\"min\" [max]=\"max\" [readonly]=\"true\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\r\n        (activeViewChange)=\"handleActiveViewChange2()\">\r\n    </ax-calendar>\r\n</div>", styles: [".ax-dark ax-calendar-range{background:rgba(var(--ax-color-on-surface))}.ax-dark ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:rgba(var(--ax-color-primary-800));color:rgba(var(--ax-color-primary-fore))}ax-calendar-range{background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-top:.25rem;padding-left:.25rem;padding-right:.25rem}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{font-weight:500}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-buttons{display:flex}ax-calendar-range .ax-calendar-range-body{display:flex;flex-direction:row}ax-calendar-range ax-calendar{margin:0;padding:0}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:0;padding-top:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:rgba(var(--ax-color-primary-100));color:rgba(var(--ax-color-primary-500))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "min", "max", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXCalendarRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: AXCalendarRangeComponent, selector: "ax-calendar-range", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation" }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick" }, viewQueries: [{ propertyName: "_c1", first: true, predicate: ["c1"], descendants: true, static: true }, { propertyName: "_c2", first: true, predicate: ["c2"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-range-header\">\n    <ng-content></ng-content>\n    <div class=\"ax-calendar-header-range-info\">\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"handleNavClick()\">\n            {{ _navText }}\n        </button>\n    </div>\n    <div class=\"ax-calendar-header-range-buttons\">\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n            (click)=\"handlePrevClick()\">\n            <i class=\"ax-icon\" [ngClass]=\"{\n                'ax-icon-chevron-left': !rtl,\n                'ax-icon-chevron-right': rtl\n              }\"></i>\n        </button>\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n            (click)=\"handleNextClick()\">\n            <i class=\"ax-icon\" [ngClass]=\"{\n                'ax-icon-chevron-left': rtl,\n                'ax-icon-chevron-right': !rtl\n              }\"></i>\n        </button>\n    </div>\n</div>\n<div class=\"ax-calendar-range-body\">\n    <ax-calendar #c1 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\n        [cellTemplate]=\"cellTemplate\" [min]=\"min\" [max]=\"max\" [readonly]=\"true\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\n        (onNavigate)=\"handleNavigate()\" (activeViewChange)=\"handleActiveViewChange1()\">\n    </ax-calendar>\n    <ax-calendar #c2 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\n        [cellTemplate]=\"cellTemplate\" [min]=\"min\" [max]=\"max\" [readonly]=\"true\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\n        (activeViewChange)=\"handleActiveViewChange2()\">\n    </ax-calendar>\n</div>", styles: [".ax-dark ax-calendar-range{background:rgba(var(--ax-color-on-surface))}.ax-dark ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:rgba(var(--ax-color-primary-800));color:rgba(var(--ax-color-primary-fore))}ax-calendar-range{background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-top:.25rem;padding-left:.25rem;padding-right:.25rem}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{font-weight:500}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-buttons{display:flex}ax-calendar-range .ax-calendar-range-body{display:flex;flex-direction:row}ax-calendar-range ax-calendar{margin:0;padding:0}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:0;padding-top:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:rgba(var(--ax-color-primary-100));color:rgba(var(--ax-color-primary-500))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "min", "max", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXCalendarRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXCalendarRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-calendar-range', encapsulation: ViewEncapsulation.None, inputs: [
                         'rtl',
@@ -789,7 +788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                         'type',
                         'cellTemplate',
                         'cellClass',
-                        'showNavigation'
+                        'showNavigation',
                     ], outputs: [
                         'onOptionChanged',
                         'valueChange',
@@ -802,24 +801,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                         'disabledDatesChange',
                         'holidayDatesChange',
                         'onNavigate',
-                        'onSlotClick'
-                    ], template: "<div class=\"ax-calendar-range-header\">\r\n    <ng-content></ng-content>\r\n    <div class=\"ax-calendar-header-range-info\">\r\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"handleNavClick()\">\r\n            {{ _navText }}\r\n        </button>\r\n    </div>\r\n    <div class=\"ax-calendar-header-range-buttons\">\r\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\r\n            (click)=\"handlePrevClick()\">\r\n            <i class=\"ax-icon\" [ngClass]=\"{\r\n                'ax-icon-chevron-left': !rtl,\r\n                'ax-icon-chevron-right': rtl\r\n              }\"></i>\r\n        </button>\r\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\r\n            (click)=\"handleNextClick()\">\r\n            <i class=\"ax-icon\" [ngClass]=\"{\r\n                'ax-icon-chevron-left': rtl,\r\n                'ax-icon-chevron-right': !rtl\r\n              }\"></i>\r\n        </button>\r\n    </div>\r\n</div>\r\n<div class=\"ax-calendar-range-body\">\r\n    <ax-calendar #c1 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\r\n        [cellTemplate]=\"cellTemplate\" [min]=\"min\" [max]=\"max\" [readonly]=\"true\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\r\n        (onNavigate)=\"handleNavigate()\" (activeViewChange)=\"handleActiveViewChange1()\">\r\n    </ax-calendar>\r\n    <ax-calendar #c2 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\r\n        [cellTemplate]=\"cellTemplate\" [min]=\"min\" [max]=\"max\" [readonly]=\"true\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\r\n        (activeViewChange)=\"handleActiveViewChange2()\">\r\n    </ax-calendar>\r\n</div>", styles: [".ax-dark ax-calendar-range{background:rgba(var(--ax-color-on-surface))}.ax-dark ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:rgba(var(--ax-color-primary-800));color:rgba(var(--ax-color-primary-fore))}ax-calendar-range{background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-top:.25rem;padding-left:.25rem;padding-right:.25rem}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{font-weight:500}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-buttons{display:flex}ax-calendar-range .ax-calendar-range-body{display:flex;flex-direction:row}ax-calendar-range ax-calendar{margin:0;padding:0}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:0;padding-top:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:rgba(var(--ax-color-primary-100));color:rgba(var(--ax-color-primary-500))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}\n"] }]
+                        'onSlotClick',
+                    ], template: "<div class=\"ax-calendar-range-header\">\n    <ng-content></ng-content>\n    <div class=\"ax-calendar-header-range-info\">\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"handleNavClick()\">\n            {{ _navText }}\n        </button>\n    </div>\n    <div class=\"ax-calendar-header-range-buttons\">\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n            (click)=\"handlePrevClick()\">\n            <i class=\"ax-icon\" [ngClass]=\"{\n                'ax-icon-chevron-left': !rtl,\n                'ax-icon-chevron-right': rtl\n              }\"></i>\n        </button>\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n            (click)=\"handleNextClick()\">\n            <i class=\"ax-icon\" [ngClass]=\"{\n                'ax-icon-chevron-left': rtl,\n                'ax-icon-chevron-right': !rtl\n              }\"></i>\n        </button>\n    </div>\n</div>\n<div class=\"ax-calendar-range-body\">\n    <ax-calendar #c1 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\n        [cellTemplate]=\"cellTemplate\" [min]=\"min\" [max]=\"max\" [readonly]=\"true\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\n        (onNavigate)=\"handleNavigate()\" (activeViewChange)=\"handleActiveViewChange1()\">\n    </ax-calendar>\n    <ax-calendar #c2 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\n        [cellTemplate]=\"cellTemplate\" [min]=\"min\" [max]=\"max\" [readonly]=\"true\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\n        (activeViewChange)=\"handleActiveViewChange2()\">\n    </ax-calendar>\n</div>", styles: [".ax-dark ax-calendar-range{background:rgba(var(--ax-color-on-surface))}.ax-dark ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:rgba(var(--ax-color-primary-800));color:rgba(var(--ax-color-primary-fore))}ax-calendar-range{background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-top:.25rem;padding-left:.25rem;padding-right:.25rem}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{font-weight:500}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-buttons{display:flex}ax-calendar-range .ax-calendar-range-body{display:flex;flex-direction:row}ax-calendar-range ax-calendar{margin:0;padding:0}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:0;padding-top:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:rgba(var(--ax-color-primary-100));color:rgba(var(--ax-color-primary-500))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { _c1: [{
                 type: ViewChild,
-                args: ["c1", { static: true }]
+                args: ['c1', { static: true }]
             }], _c2: [{
                 type: ViewChild,
-                args: ["c2", { static: true }]
+                args: ['c2', { static: true }]
             }] } });
 
 const COMPONENT = [AXCalendarComponent, AXCalendarRangeComponent];
 const MODULES = [CommonModule, AXDateTimeModule];
 class AXCalendarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent, AXCalendarRangeComponent], imports: [CommonModule, AXDateTimeModule], exports: [AXCalendarComponent, AXCalendarRangeComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXCalendarModule, imports: [MODULES] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent, AXCalendarRangeComponent], imports: [CommonModule, AXDateTimeModule], exports: [AXCalendarComponent, AXCalendarRangeComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXCalendarModule, imports: [MODULES] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXCalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],