npm - @acorex/components - Versions diffs - 7.5.0 → 7.8.0 - Mend

@acorex/components 7.5.0 → 7.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (452) hide show

package/fesm2022/acorex-components-button.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"acorex-components-button.mjs","sources":["../../../../libs/components/button/src/lib/button-item.component.ts","../../../../libs/components/button/src/lib/button.component.ts","../../../../libs/components/button/src/lib/button.component.html","../../../../libs/components/button/src/lib/button.module.ts","../../../../libs/components/button/src/acorex-components-button.ts"],"sourcesContent":["import { MXColorComponent, MXInteractiveComponent } from '@acorex/components/common';\n\nimport {\n ChangeDetectionStrategy,\n Component,\n HostBinding,\n HostListener,\n Input,\n ViewEncapsulation,\n} from '@angular/core';\nimport { classes } from 'polytype';\n\n@Component({\n selector: 'ax-button-item',\n template: `\n <ng-content select=\"ax-prefix\"> </ng-content>\n <ng-content select=\"ax-loading\"> </ng-content>\n <ng-content select=\"ax-icon\"> </ng-content>\n <span class=\"ax-button-item-text\" ngIf=\"text\">{{ text }}</span>\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n `,\n host: { tabindex: '0' },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n inputs: ['color', 'disabled'],\n outputs: ['onClick', 'onFocus', 'onBlur', 'disabledChange'],\n})\nexport class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorComponent) {\n @Input()\n text: string;\n\n\n private _selected: boolean;\n @Input()\n public get selected(): boolean {\n return this._selected;\n }\n public set selected(v: boolean) {\n this._selected = v;\n this.cdr.markForCheck();\n }\n\n\n @Input()\n divided = false;\n\n @Input()\n data: unknown;\n\n @Input()\n name: string;\n\n @HostListener('click', ['$event'])\n private __hostClick(e: MouseEvent) {\n this.emitOnClickEvent(e);\n }\n\n @HostListener('focus', ['$event'])\n private __hostFocus(e: FocusEvent) {\n this.emitOnFocusEvent(e);\n }\n\n @HostListener('blur', ['$event'])\n private __hostBlur(e: FocusEvent) {\n this.emitOnBlurEvent(e);\n }\n\n @HostBinding('class')\n private get __hostClass(): string {\n const cssClasses = {\n 'ax-button-icon': !this.text,\n 'ax-state-disabled': this.disabled,\n 'ax-state-selected': this.selected,\n 'ax-divided': this.divided,\n };\n cssClasses[`ax-${this.color \|\| 'primary'}-default`] = true;\n return Object.entries(cssClasses)\n .filter((c) => c[1])\n .map((c) => c[0])\n .join(' ');\n }\n}\n","import {\n AXClickEvent,\n AXComponent,\n AXFocusableComponent,\n MXButtonBaseComponent,\n} from '@acorex/components/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n HostBinding,\n Input,\n ViewEncapsulation,\n} from '@angular/core';\nimport { AXButtonType } from './button-item.class';\nimport { AXButtonItemComponent } from './button-item.component';\n\n/\n The Button is a component which detects user interaction and triggers a corresponding event\n \n @category Components\n /\n@Component({\n selector: 'ax-button',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss'],\n inputs: ['disabled', 'size', 'tabIndex', 'color', 'look', 'text', 'toggleable', 'selected'],\n outputs: [\n 'onBlur',\n 'onFocus',\n 'onClick',\n 'selectedChange',\n 'toggleableChange',\n 'lookChange',\n 'colorChange',\n 'disabledChange',\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [\n { provide: AXComponent, useExisting: AXButtonComponent },\n { provide: AXButtonItemComponent, useExisting: AXButtonComponent },\n { provide: AXFocusableComponent, useExisting: AXButtonComponent },\n ],\n})\nexport class AXButtonComponent extends MXButtonBaseComponent implements AfterViewInit {\n /\n Fires each time the user clicks the button.\n * @event\n /\n onClick: EventEmitter<AXClickEvent> = new EventEmitter<AXClickEvent>();\n\n @Input()\n type: AXButtonType = 'button';\n\n ngAfterViewInit(): void {\n this.getHostElement().removeAttribute('tabindex');\n }\n\n private getButton(): HTMLButtonElement {\n return this.getHostElement().firstElementChild as HTMLButtonElement;\n }\n\n _handleClick(e: MouseEvent) {\n if (this.disabled) {\n e.preventDefault();\n return;\n }\n if (this.toggleable) {\n this.selected = !this.selected;\n }\n this.onClick.emit({\n component: this,\n htmlElement: this.getHostElement(),\n nativeEvent: e,\n });\n\n // TODO: check keyboard event\n setTimeout(() => {\n this.blur();\n });\n }\n\n click() {\n this.getButton()?.click();\n }\n\n @HostBinding('class')\n private get __hostClass(): string[] {\n return Object.entries(this.cssClasses)\n .filter((c) => c[1])\n .map((c) => c[0]);\n }\n\n override focus() {\n this.getButton()?.focus();\n this.getButton().classList.add('ax-state-focus');\n }\n override blur() {\n this.getButton().classList.remove('ax-state-focus');\n }\n}\n","<button\n axRipple\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [attr.type]=\"type\"\n>\n <ng-content select=\"ax-prefix, ax-loading, ax-icon\"> </ng-content>\n <ng-content select=\"ax-content\"> </ng-content>\n <span class=\"ax-button-text\" ngIf=\"text\">{{ text }}</span>\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n</button>\n","import { AXCommonModule } from '@acorex/components/common';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXLoadingModule } from '@acorex/components/loading';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXButtonItemComponent } from './button-item.component';\nimport { AXButtonComponent } from './button.component';\n\nconst COMPONENT = [AXButtonComponent, AXButtonItemComponent];\nconst MODULES = [CommonModule, AXCommonModule, AXDecoratorModule, AXLoadingModule];\n\n@NgModule({\n imports: [MODULES],\n exports: [...COMPONENT],\n declarations: [...COMPONENT],\n providers: [],\n})\nexport class AXButtonModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"acorex-components-button.mjs","sources":["../../../../libs/components/button/src/lib/button-item.component.ts","../../../../libs/components/button/src/lib/button.component.ts","../../../../libs/components/button/src/lib/button.component.html","../../../../libs/components/button/src/lib/button.module.ts","../../../../libs/components/button/src/acorex-components-button.ts"],"sourcesContent":["import { AXClickEvent, MXColorComponent, MXInteractiveComponent } from '@acorex/components/common';\n\nimport {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n HostBinding,\n HostListener,\n Input,\n Output,\n ViewEncapsulation,\n} from '@angular/core';\nimport { classes } from 'polytype';\n\n@Component({\n selector: 'ax-button-item',\n template: `\n <ng-content select=\"ax-prefix\"> </ng-content>\n <ng-content select=\"ax-loading\"> </ng-content>\n <ng-content select=\"ax-icon\"> </ng-content>\n <span class=\"ax-button-item-text\" ngIf=\"text\">{{ text }}</span>\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n `,\n host: { tabindex: '0' },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n inputs: ['color', 'disabled'],\n outputs: ['onClick', 'onFocus', 'onBlur', 'disabledChange'],\n})\nexport class AXButtonItemComponent extends classes(MXInteractiveComponent, MXColorComponent) {\n @Input()\n text: string;\n\n private _selected: boolean;\n @Input()\n public get selected(): boolean {\n return this._selected;\n }\n public set selected(v: boolean) {\n this._selected = v;\n this.cdr.markForCheck();\n }\n\n @Input()\n divided = false;\n\n @Input()\n data: unknown;\n\n @Input()\n name: string;\n\n @Output()\n onClick: EventEmitter<AXClickEvent> = new EventEmitter<AXClickEvent>();\n\n @HostListener('click', ['$event'])\n private __hostClick(e: MouseEvent) {\n if (!this.disabled) {\n this.onClick.emit({\n component: this,\n htmlElement: this.getHostElement(),\n nativeEvent: e,\n });\n }\n }\n\n @HostListener('focus', ['$event'])\n private __hostFocus(e: FocusEvent) {\n this.emitOnFocusEvent(e);\n }\n\n @HostListener('blur', ['$event'])\n private __hostBlur(e: FocusEvent) {\n this.emitOnBlurEvent(e);\n }\n\n @HostBinding('class')\n private get __hostClass(): string {\n const cssClasses = {\n 'ax-button-icon': !this.text,\n 'ax-state-disabled': this.disabled,\n 'ax-state-selected': this.selected,\n 'ax-divided': this.divided,\n };\n cssClasses[`ax-${this.color \|\| 'primary'}-default`] = true;\n return Object.entries(cssClasses)\n .filter((c) => c[1])\n .map((c) => c[0])\n .join(' ');\n }\n}\n","import {\n AXClickEvent,\n AXComponent,\n AXFocusableComponent,\n MXButtonBaseComponent,\n} from '@acorex/components/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n HostBinding,\n Input,\n ViewEncapsulation,\n} from '@angular/core';\nimport { AXButtonType } from './button-item.class';\nimport { AXButtonItemComponent } from './button-item.component';\n\n/\n The Button is a component which detects user interaction and triggers a corresponding event\n \n @category Components\n /\n@Component({\n selector: 'ax-button',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss'],\n inputs: ['disabled', 'size', 'tabIndex', 'color', 'look', 'text', 'toggleable', 'selected'],\n outputs: [\n 'onBlur',\n 'onFocus',\n 'onClick',\n 'selectedChange',\n 'toggleableChange',\n 'lookChange',\n 'colorChange',\n 'disabledChange',\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [\n { provide: AXComponent, useExisting: AXButtonComponent },\n { provide: AXButtonItemComponent, useExisting: AXButtonComponent },\n { provide: AXFocusableComponent, useExisting: AXButtonComponent },\n ],\n})\nexport class AXButtonComponent extends MXButtonBaseComponent implements AfterViewInit {\n /\n Fires each time the user clicks the button.\n * @event\n /\n onClick: EventEmitter<AXClickEvent> = new EventEmitter<AXClickEvent>();\n\n @Input()\n type: AXButtonType = 'button';\n\n ngAfterViewInit(): void {\n this.getHostElement().removeAttribute('tabindex');\n }\n\n private getButton(): HTMLButtonElement {\n return this.getHostElement().firstElementChild as HTMLButtonElement;\n }\n\n _handleClick(e: MouseEvent) {\n if (this.disabled) {\n e.preventDefault();\n return;\n }\n if (this.toggleable) {\n this.selected = !this.selected;\n }\n this.onClick.emit({\n component: this,\n htmlElement: this.getHostElement(),\n nativeEvent: e,\n });\n\n // TODO: check keyboard event\n setTimeout(() => {\n this.blur();\n });\n }\n\n click() {\n this.getButton()?.click();\n }\n\n @HostBinding('class')\n private get __hostClass(): string[] {\n return Object.entries(this.cssClasses)\n .filter((c) => c[1])\n .map((c) => c[0]);\n }\n\n override focus() {\n this.getButton()?.focus();\n this.getButton().classList.add('ax-state-focus');\n }\n override blur() {\n this.getButton().classList.remove('ax-state-focus');\n }\n}\n","<button\n axRipple\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n (click)=\"_handleClick($event)\"\n [attr.type]=\"type\"\n>\n <ng-content select=\"ax-prefix, ax-loading, ax-icon\"> </ng-content>\n <ng-content select=\"ax-content\"> </ng-content>\n <span class=\"ax-button-text\" ngIf=\"text\">{{ text }}</span>\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-content select=\"ax-dropdown-panel\"> </ng-content>\n <ng-content select=\".tab-content\"> </ng-content>\n</button>\n","import { AXCommonModule } from '@acorex/components/common';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXLoadingModule } from '@acorex/components/loading';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXButtonItemComponent } from './button-item.component';\nimport { AXButtonComponent } from './button.component';\n\nconst COMPONENT = [AXButtonComponent, AXButtonItemComponent];\nconst MODULES = [CommonModule, AXCommonModule, AXDecoratorModule, AXLoadingModule];\n\n@NgModule({\n imports: [MODULES],\n exports: [...COMPONENT],\n declarations: [...COMPONENT],\n providers: [],\n})\nexport class AXButtonModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-calendar.mjs CHANGED Viewed

@@ -1,10 +1,12 @@
 import { AXRangeChangedEvent, AXItemClickEvent, MXBaseComponent, MXValueComponent, MXInteractiveComponent } from '@acorex/components/common';
+import { AXCalendarService, AXDateTimeRange, AXDateTimeModule } from '@acorex/core/dateTime';
 import * as i0 from '@angular/core';
 import { inject, EventEmitter, Injectable, Input, Output, forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, HostListener, ViewChild, NgModule } from '@angular/core';
 import { classes } from 'polytype';
-import { AXCalendarService, AXDateTimeRange, AXDateTimeModule } from '@acorex/core/dateTime';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i1 from '@angular/common';
+import * as i1 from '@acorex/core/utils';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 /**
@@ -19,63 +21,6 @@ class AXCalendarNavigateEvent extends AXRangeChangedEvent {
  */
 class AXCalendarSlotClick extends AXItemClickEvent {
 }
-// export class AXCalendarView {
-//     private _range: AXDateTimeRange;
-//     private _slots: AXCalendarViewSlot[] = [];
-//     get range(): AXDateTimeRange {
-//         return this.range;
-//     }
-//     get slots(): AXCalendarViewSlot[] {
-//         return this._slots;
-//     }
-//     constructor(
-//         private readonly startDate: AXDateTime,
-//         private readonly view: AXCalendarViewType
-//     ) {
-//         const current = this.startDate;
-//         let textFormat = 'YYYY';
-//         let tooltipFormat = 'YYYY';
-//         switch (this.view) {
-//             case 'year':
-//                 let y = current.startOf('year').year;
-//                 let min = y - (y % 10);
-//                 let max = min + 9;
-//                 this._range = new AXDateTimeRange(
-//                     AXDateTime.from({
-//                         year: min,
-//                         month: 1,
-//                         date: 1,
-//                         calendar: this.startDate.calendar.name(),
-//                     }),
-//                     AXDateTime.from({
-//                         year: max,
-//                         month: 12,
-//                         date: 28,
-//                         calendar: this.startDate.calendar.name(),
-//                     })
-//                 );
-//                 break;
-//             case 'month':
-//                 textFormat = 'MMM';
-//                 tooltipFormat = 'MMMM YYYY';
-//                 this._range = new AXDateTimeRange(
-//                     current.startOf('year'),
-//                     current.endOf('year').add('day', -1)
-//                 );
-//                 break;
-//             default:
-//                 this._range = new AXDateTimeRange(
-//                     current.startOf('month'),
-//                     current.endOf('month')
-//                 );
-//         }
-//         //
-//         this._slots = this.range.enumurate(view).map(r => ({
-//             date: r.date,
-//             tooltip: r.format()
-//         }));
-//     }
-// }
 class MXCalendarBaseComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
@@ -220,15 +165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
             }], holidayDates: [{
                 type: Input
             }] } });
-const CALENDAR_INPUTS = [
-    'depth',
-    'activeView',
-    'min',
-    'max',
-    'disabledDates',
-    'type',
-    'holidayDates',
-];
+const CALENDAR_INPUTS = ['depth', 'activeView', 'min', 'max', 'disabledDates', 'type', 'holidayDates'];
 const CALENDAR_OUTPUTS = [
     'depthChange',
     'typeChange',
@@ -243,21 +180,20 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
     }
     _setDisplayRange(current) {
         switch (this.activeView) {
-            case 'year':
-                {
-                    const y = current.startOf('year').year;
-                    const min = y - (y % 10);
-                    const max = min + 9;
-                    return new AXDateTimeRange(this.calendarService.create({
-                        year: min,
-                        month: 1,
-                        date: 1,
-                    }, this.type), this.calendarService.create({
-                        year: max,
-                        month: 12,
-                        date: 28
-                    }, this.type));
-                }
+            case 'year': {
+                const y = current.startOf('year').year;
+                const min = y - (y % 10);
+                const max = min + 9;
+                return new AXDateTimeRange(this.calendarService.create({
+                    year: min,
+                    month: 1,
+                    date: 1,
+                }, this.type), this.calendarService.create({
+                    year: max,
+                    month: 12,
+                    date: 28,
+                }, this.type));
+            }
             case 'month':
                 return new AXDateTimeRange(current.startOf('year'), current.endOf('year').add('day', -1));
             default:
@@ -266,13 +202,13 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
     }
     _initValues() {
         this._today = this.calendarService.create(new Date(), this.type);
-        this._dayNames = this._today.calendar.dayNames.map(c => c.short);
+        this._dayNames = this._today.calendar.dayNames.map((c) => c.short);
     }
     _refresh() {
         this._initValues();
         this.navTo(this.value || this._today);
     }
-    constructor() {
+    constructor(unsubscriber) {
         super();
         this._today = this.calendarService.create(new Date(), this.type);
         this._navUserInteraction = false;
@@ -283,9 +219,12 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         };
         this.views = [];
         this._dayNames = [];
-        //TODO: must be removed
-        this.onValueChanged.subscribe(this._handleOnValueChanged.bind(this));
-        this.onOptionChanged.subscribe(this._handleOnOptionChanged.bind(this));
+        this.calendarService
+            .onHolidaysChanged
+            .pipe(unsubscriber.takeUntilDestroy)
+            .subscribe(() => {
+            this.render();
+        });
     }
     ngOnInit() {
         super.ngOnInit();
@@ -296,6 +235,8 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
             this.goToday();
         }
     }
+    ngOnDestroy() {
+    }
     render() {
         if (!this._viewStartDate)
             return;
@@ -502,7 +443,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         else if (this.activeView == 'month')
             this.activeView = 'year';
     }
-    _handleOnOptionChanged(e) {
+    internalOptionChanged(e) {
         if (e.name == 'depth' ||
             e.name == 'activeView' ||
             e.name == 'disabledDates' ||
@@ -513,12 +454,12 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
             this._refresh();
         }
     }
-    _handleOnValueChanged(e) {
-        const val = this.calendarService.create(e.value, this.type);
+    internalValueChanged(value) {
+        const val = this.calendarService.create(value, this.type);
         if (!this._viewStartDate ||
             val.compare(this.displayRange.startTime, this.activeView) == -1 ||
             val.compare(this.displayRange.endTime, this.activeView) == 1) {
-            this._viewStartDate = this.calendarService.create(e.value, this.type);
+            this._viewStartDate = this.calendarService.create(value, this.type);
         }
         this._footPrint.year = val.year;
         this._footPrint.month = val.monthOfYear;
@@ -594,13 +535,15 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         return false;
     }
     isHoliday(date) {
+        const gh = this.calendarService.holidays.some((d) => date.equal(d.date, 'day'));
+        let dh = this.calendarService.holidays.some((d) => date.equal(d.date, 'day'));
         if (Array.isArray(this.holidayDates) && this.holidayDates.length != 0) {
-            return this.holidayDates.some((d) => date.equal(d, 'day'));
+            dh = this.holidayDates.some((d) => date.equal(d, 'day'));
         }
         else if (typeof this.holidayDates == 'function') {
-            return this.holidayDates(date.date);
+            dh = this.holidayDates(date.date);
         }
-        return false;
+        return gh || dh;
     }
     isWeekend(date) {
         const weekend = this.calendarService.calendar.weekend;
@@ -631,14 +574,15 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
             ignore();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXCalendarComponent, deps: [{ token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXCalendarComponent, selector: "ax-calendar", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", minValue: "minValue", maxValue: "maxValue", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation", count: "count", id: "id" }, 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", countChange: "countChange" }, host: { listeners: { "keydown": "_handleOnKeydownEvent($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AXCalendarComponent),
-                multi: true
-            }
-        ], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\n  <ng-content select=\"ax-header\"></ng-content>\n  <div class=\"ax-calendar-body\">\n    <ng-container *ngFor=\"let v of views; let first = first; let last = last\">\n      <div [ngSwitch]=\"activeView\">\n        <ng-container *ngSwitchCase=\"'year'\">\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-state-disabled\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }} - {{ v.range.endTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon ax-next\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n            <div\n              tabindex=\"0\"\n              *ngFor=\"let slot of v.slots\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\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=\"'month'\">\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n            <div\n              tabindex=\"0\"\n              *ngFor=\"let slot of v.slots\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\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-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'month')\"\n              >\n                {{ v.range.startTime.format('MMM') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\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 v.slots\">\n              <div\n                tabindex=\"0\"\n                class=\"ax-calendar-slot\"\n                [ngClass]=\"slot.cssClass\"\n                (click)=\"_handleSlotClick($event, slot)\"\n              >\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    </ng-container>\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>\n", styles: [".ax-dark ax-calendar{background:rgba(var(--ax-color-default))}html[dir=rtl] ax-calendar .ax-calendar-header-buttons{flex-direction:row-reverse}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));width:max-content}@media (max-width: 599px){ax-calendar{width:100%}}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{display:flex;flex-direction:row}ax-calendar .ax-calendar-body>div{flex:1}@media (max-width: 599px){ax-calendar .ax-calendar-body>div{width:100%}}@media (min-width: 600px){ax-calendar .ax-calendar-body>div{width:20rem}}@media (min-width: 1200px){ax-calendar .ax-calendar-body>div{width:19rem}}@media (min-width: 1800px){ax-calendar .ax-calendar-body>div{width:21rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;padding:.5rem;border-bottom:1px solid;border-bottom-color:rgba(var(--ax-color-border-default))}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem;padding:.5rem}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){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:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){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{color:rgba(var(--ax-color-primary-500));border-width:1px;border-style:solid;border-color:rgba(var(--ax-color-primary-200))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default))}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-selected.ax-state-holiday{color:rgba(var(--ax-color-primary-fore))!important}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));padding:.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}@media (max-width: 599px){ax-calendar .ax-calendar-body{flex-direction:column}}@media (min-width: 600px){ax-calendar .ax-calendar-body{flex-direction:column}}@media (min-width: 1200px){ax-calendar .ax-calendar-body{flex-direction:row}}@media (min-width: 1800px){ax-calendar .ax-calendar-body{flex-direction:row}}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 }); }
+                multi: true,
+            },
+            AXUnsubscriber
+        ], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\n  <ng-content select=\"ax-header\"></ng-content>\n  <div class=\"ax-calendar-body\">\n    <ng-container *ngFor=\"let v of views; let first = first; let last = last\">\n      <div [ngSwitch]=\"activeView\">\n        <ng-container *ngSwitchCase=\"'year'\">\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-state-disabled\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }} - {{ v.range.endTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon ax-next\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n            <div\n              tabindex=\"0\"\n              *ngFor=\"let slot of v.slots\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\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=\"'month'\">\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n            <div\n              tabindex=\"0\"\n              *ngFor=\"let slot of v.slots\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\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-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'month')\"\n              >\n                {{ v.range.startTime.format('MMM') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\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 v.slots\">\n              <div\n                tabindex=\"0\"\n                class=\"ax-calendar-slot\"\n                [ngClass]=\"slot.cssClass\"\n                (click)=\"_handleSlotClick($event, slot)\"\n              >\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    </ng-container>\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>\n", styles: ["html[dir=rtl] ax-calendar .ax-calendar-header-buttons{flex-direction:row-reverse}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));width:max-content}@media (max-width: 599px){ax-calendar{width:100%}}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{display:flex;flex-direction:row}ax-calendar .ax-calendar-body>div{flex:1}@media (max-width: 599px){ax-calendar .ax-calendar-body>div{width:100%}}@media (min-width: 600px){ax-calendar .ax-calendar-body>div{width:20rem}}@media (min-width: 1200px){ax-calendar .ax-calendar-body>div{width:19rem}}@media (min-width: 1800px){ax-calendar .ax-calendar-body>div{width:21rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;padding:.5rem;border-bottom:1px solid;border-bottom-color:rgba(var(--ax-color-border-default))}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem;padding:.5rem}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){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:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){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{color:rgba(var(--ax-color-primary-500));border-width:1px;border-style:solid;border-color:rgba(var(--ax-color-primary-200))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default))}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-selected.ax-state-holiday{color:rgba(var(--ax-color-primary-fore))!important}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));padding:.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}@media (max-width: 599px){ax-calendar .ax-calendar-body{flex-direction:column}}@media (min-width: 600px){ax-calendar .ax-calendar-body{flex-direction:column}}@media (min-width: 1200px){ax-calendar .ax-calendar-body{flex-direction:row}}@media (min-width: 1800px){ax-calendar .ax-calendar-body{flex-direction:row}}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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXCalendarComponent, decorators: [{
             type: Component,
@@ -660,7 +604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                         'showNavigation',
                         'count',
                         'name',
-                        'id'
+                        'id',
                     ], outputs: [
                         'onOptionChanged',
                         'valueChange',
@@ -679,15 +623,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => AXCalendarComponent),
-                            multi: true
-                        }
-                    ], template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\n  <ng-content select=\"ax-header\"></ng-content>\n  <div class=\"ax-calendar-body\">\n    <ng-container *ngFor=\"let v of views; let first = first; let last = last\">\n      <div [ngSwitch]=\"activeView\">\n        <ng-container *ngSwitchCase=\"'year'\">\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-state-disabled\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }} - {{ v.range.endTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon ax-next\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n            <div\n              tabindex=\"0\"\n              *ngFor=\"let slot of v.slots\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\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=\"'month'\">\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n            <div\n              tabindex=\"0\"\n              *ngFor=\"let slot of v.slots\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\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-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'month')\"\n              >\n                {{ v.range.startTime.format('MMM') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\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 v.slots\">\n              <div\n                tabindex=\"0\"\n                class=\"ax-calendar-slot\"\n                [ngClass]=\"slot.cssClass\"\n                (click)=\"_handleSlotClick($event, slot)\"\n              >\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    </ng-container>\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>\n", styles: [".ax-dark ax-calendar{background:rgba(var(--ax-color-default))}html[dir=rtl] ax-calendar .ax-calendar-header-buttons{flex-direction:row-reverse}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));width:max-content}@media (max-width: 599px){ax-calendar{width:100%}}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{display:flex;flex-direction:row}ax-calendar .ax-calendar-body>div{flex:1}@media (max-width: 599px){ax-calendar .ax-calendar-body>div{width:100%}}@media (min-width: 600px){ax-calendar .ax-calendar-body>div{width:20rem}}@media (min-width: 1200px){ax-calendar .ax-calendar-body>div{width:19rem}}@media (min-width: 1800px){ax-calendar .ax-calendar-body>div{width:21rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;padding:.5rem;border-bottom:1px solid;border-bottom-color:rgba(var(--ax-color-border-default))}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem;padding:.5rem}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){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:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){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{color:rgba(var(--ax-color-primary-500));border-width:1px;border-style:solid;border-color:rgba(var(--ax-color-primary-200))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default))}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-selected.ax-state-holiday{color:rgba(var(--ax-color-primary-fore))!important}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));padding:.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}@media (max-width: 599px){ax-calendar .ax-calendar-body{flex-direction:column}}@media (min-width: 600px){ax-calendar .ax-calendar-body{flex-direction:column}}@media (min-width: 1200px){ax-calendar .ax-calendar-body{flex-direction:row}}@media (min-width: 1800px){ax-calendar .ax-calendar-body{flex-direction:row}}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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { __hostClass: [{
+                            multi: true,
+                        },
+                        AXUnsubscriber
+                    ], template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\n  <ng-content select=\"ax-header\"></ng-content>\n  <div class=\"ax-calendar-body\">\n    <ng-container *ngFor=\"let v of views; let first = first; let last = last\">\n      <div [ngSwitch]=\"activeView\">\n        <ng-container *ngSwitchCase=\"'year'\">\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-state-disabled\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }} - {{ v.range.endTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon ax-next\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n            <div\n              tabindex=\"0\"\n              *ngFor=\"let slot of v.slots\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\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=\"'month'\">\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n            <div\n              tabindex=\"0\"\n              *ngFor=\"let slot of v.slots\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\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-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'month')\"\n              >\n                {{ v.range.startTime.format('MMM') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handlePrevClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                (click)=\"_handleNextClick()\"\n              >\n                <i class=\"ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          </div>\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 v.slots\">\n              <div\n                tabindex=\"0\"\n                class=\"ax-calendar-slot\"\n                [ngClass]=\"slot.cssClass\"\n                (click)=\"_handleSlotClick($event, slot)\"\n              >\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    </ng-container>\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>\n", styles: ["html[dir=rtl] ax-calendar .ax-calendar-header-buttons{flex-direction:row-reverse}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));width:max-content}@media (max-width: 599px){ax-calendar{width:100%}}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{display:flex;flex-direction:row}ax-calendar .ax-calendar-body>div{flex:1}@media (max-width: 599px){ax-calendar .ax-calendar-body>div{width:100%}}@media (min-width: 600px){ax-calendar .ax-calendar-body>div{width:20rem}}@media (min-width: 1200px){ax-calendar .ax-calendar-body>div{width:19rem}}@media (min-width: 1800px){ax-calendar .ax-calendar-body>div{width:21rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;padding:.5rem;border-bottom:1px solid;border-bottom-color:rgba(var(--ax-color-border-default))}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem;padding:.5rem}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){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:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){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{color:rgba(var(--ax-color-primary-500));border-width:1px;border-style:solid;border-color:rgba(var(--ax-color-primary-200))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-style:solid;border-color:rgba(var(--ax-color-border-default))}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-selected.ax-state-holiday{color:rgba(var(--ax-color-primary-fore))!important}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));padding:.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}@media (max-width: 599px){ax-calendar .ax-calendar-body{flex-direction:column}}@media (min-width: 600px){ax-calendar .ax-calendar-body{flex-direction:column}}@media (min-width: 1200px){ax-calendar .ax-calendar-body{flex-direction:row}}@media (min-width: 1800px){ax-calendar .ax-calendar-body{flex-direction:row}}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"] }]
+        }], ctorParameters: function () { return [{ type: i1.AXUnsubscriber }]; }, propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }], _handleOnKeydownEvent: [{
                 type: HostListener,
-                args: ["keydown", ["$event"]]
+                args: ['keydown', ['$event']]
             }] } });
 class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractiveComponent, MXCalendarBaseComponent) {
@@ -704,10 +649,7 @@ 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;
         };
@@ -815,7 +757,7 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXCalendarRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXCalendarRangeComponent, selector: "ax-calendar-range", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", minValue: "minValue", maxValue: "maxValue", 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 type=\"button\" [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\"\n            (click)=\"handleNavClick()\">\n            {{ _navText }}\n        </button>\n    </div>\n    <div class=\"ax-calendar-header-range-buttons\">\n        <button type=\"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 type=\"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\" [minValue]=\"minValue\" [maxValue]=\"maxValue\" [readonly]=\"true\" [depth]=\"depth\"\n        (onSlotClick)=\"handleSlotClick($event)\" (onNavigate)=\"handleNavigate()\"\n        (activeViewChange)=\"handleActiveViewChange1()\">\n    </ax-calendar>\n    <ax-calendar #c2 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\n        [cellTemplate]=\"cellTemplate\" [minValue]=\"minValue\" [maxValue]=\"maxValue\" [readonly]=\"true\" [depth]=\"depth\"\n        (onSlotClick)=\"handleSlotClick($event)\" (activeViewChange)=\"handleActiveViewChange2()\">\n    </ax-calendar>\n</div>", styles: [".ax-dark ax-calendar-range{background:rgba(var(--ax-color-default))}.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", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "count", "id"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXCalendarRangeComponent, selector: "ax-calendar-range", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", minValue: "minValue", maxValue: "maxValue", 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 type=\"button\" [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\"\n            (click)=\"handleNavClick()\">\n            {{ _navText }}\n        </button>\n    </div>\n    <div class=\"ax-calendar-header-range-buttons\">\n        <button type=\"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 type=\"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\" [minValue]=\"minValue\" [maxValue]=\"maxValue\" [readonly]=\"true\" [depth]=\"depth\"\n        (onSlotClick)=\"handleSlotClick($event)\" (onNavigate)=\"handleNavigate()\"\n        (activeViewChange)=\"handleActiveViewChange1()\">\n    </ax-calendar>\n    <ax-calendar #c2 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\n        [cellTemplate]=\"cellTemplate\" [minValue]=\"minValue\" [maxValue]=\"maxValue\" [readonly]=\"true\" [depth]=\"depth\"\n        (onSlotClick)=\"handleSlotClick($event)\" (activeViewChange)=\"handleActiveViewChange2()\">\n    </ax-calendar>\n</div>", styles: [".ax-dark ax-calendar-range{background:rgba(var(--ax-color-default))}.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "count", "id"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXCalendarRangeComponent, decorators: [{
             type: Component,