@ardium-ui/ui 5.0.0-alpha.0 → 5.0.0-alpha.1

package/fesm2022/ardium-ui-ui.mjs

@@ -6201,7 +6201,7 @@ class DaysViewComponent {
             canGoToPreviousPage: !this.isMonthOutOfRange(this.activeMonth() - 1),
             year: this.activeYear(),
             month: this.activeMonth(),
-            $implicit: new Date(this.activeYear(), this.activeMonth(), 1, 0, 0, 0, 0),
+            $implicit: new Date(this.activeYear(), this.activeMonth(), 2, 0, 0, 0, 0), // second day of month to prevent timezone issues
         }));
         this.weekdayContext = computed(() => (dayIndex) => {
             const date = new Date(1970, 0, 4 + dayIndex);
@@ -6212,7 +6212,7 @@ class DaysViewComponent {
             };
         });
         this.floatingMonthContext = computed(() => {
-            const date = new Date(this.activeYear(), this.activeMonth(), 1, 0, 0, 0, 0);
+            const date = new Date(this.activeYear(), this.activeMonth(), 2, 0, 0, 0, 0); // second day of month to prevent timezone issues
             return {
                 month: this.activeMonth(),
                 date,
@@ -6460,7 +6460,7 @@ class MonthsViewComponent {
             $implicit: this.activeYear(),
         }));
         this.monthContext = computed(() => (month) => {
-            const date = new Date(this.activeYear(), month, 1);
+            const date = new Date(this.activeYear(), month, 2); // second day of month to prevent timezone issues
             return {
                 month,
                 date,
@@ -6619,11 +6619,11 @@ class MonthsViewComponent {
         return isYearOutOfRange(year, this.min(), this.max());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MonthsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MonthsViewComponent, isStandalone: false, selector: "ard-months-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, highlightedMonth: { classPropertyName: "highlightedMonth", publicName: "highlightedMonth", isSignal: true, isRequired: true, transformFunction: null }, monthsViewHeaderTemplate: { classPropertyName: "monthsViewHeaderTemplate", publicName: "monthsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, monthTemplate: { classPropertyName: "monthTemplate", publicName: "monthTemplate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenYearsView: "triggerOpenYearsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectMonth: "triggerSelectMonth", triggeChangeYear: "triggeChangeYear", triggerHighlightMonth: "triggerHighlightMonth", triggerHighlightNextMonth: "triggerHighlightNextMonth", triggerHighlightPreviousMonth: "triggerHighlightPreviousMonth", triggerHighlightFirstMonth: "triggerHighlightFirstMonth", triggerHighlightLastMonth: "triggerHighlightLastMonth", triggerHighlightSameMonthPreviousPage: "triggerHighlightSameMonthPreviousPage", triggerHighlightSameMonthNextPage: "triggerHighlightSameMonthNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-months-view\">\r\n  @if (!readOnly()) {\r\n    <div class=\"ard-calendar__top-toolbar\">\r\n      <ng-template\r\n        #defaultMonthsViewHeaderTemplate\r\n        let-year\r\n        let-nextPage=\"nextPage\"\r\n        let-prevPage=\"prevPage\"\r\n        let-canGoToNextPage=\"canGoToNextPage\"\r\n        let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n        let-openDaysView=\"openDaysView\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <ard-button\r\n            class=\"ard-calendar__header-button\"\r\n            appearance=\"transparent\"\r\n            [color]=\"color()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openDaysView()\"\r\n          >\r\n            {{ year }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div class=\"ard-calendar-arrows\">\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"prevPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToPreviousPage\"\r\n            >\r\n              <ard-icon>chevron_left</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"nextPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToNextPage\"\r\n            >\r\n              <ard-icon>chevron_right</ard-icon>\r\n            </ard-icon-button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n        [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\r\n      />\r\n    </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onMonthGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onMonthGridBlur()\"\r\n    (click)=\"onMonthGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (month of monthsArray(); track $index) {\r\n      <div\r\n        class=\"ard-calendar__entry\"\r\n        [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n        [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n        [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n        [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n        (click)=\"onCalendarMonthClick(month.value)\"\r\n        (mousemove)=\"$event.stopPropagation()\"\r\n        (mouseover)=\"onCalendarMonthMouseover(month.value)\"\r\n        role=\"gridcell\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"ard-calendar__entry-button\"\r\n          tabindex=\"-1\"\r\n        >\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <ng-template\r\n              #defaultMonthTemplate\r\n              let-month\r\n            >\r\n              {{ month | date: 'MMM' | uppercase }}\r\n            </ng-template>\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n              [ngTemplateOutletContext]=\"monthContext()(month.value)\"\r\n            />\r\n          </div>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MonthsViewComponent, isStandalone: false, selector: "ard-months-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, highlightedMonth: { classPropertyName: "highlightedMonth", publicName: "highlightedMonth", isSignal: true, isRequired: true, transformFunction: null }, monthsViewHeaderTemplate: { classPropertyName: "monthsViewHeaderTemplate", publicName: "monthsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, monthTemplate: { classPropertyName: "monthTemplate", publicName: "monthTemplate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenYearsView: "triggerOpenYearsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectMonth: "triggerSelectMonth", triggeChangeYear: "triggeChangeYear", triggerHighlightMonth: "triggerHighlightMonth", triggerHighlightNextMonth: "triggerHighlightNextMonth", triggerHighlightPreviousMonth: "triggerHighlightPreviousMonth", triggerHighlightFirstMonth: "triggerHighlightFirstMonth", triggerHighlightLastMonth: "triggerHighlightLastMonth", triggerHighlightSameMonthPreviousPage: "triggerHighlightSameMonthPreviousPage", triggerHighlightSameMonthNextPage: "triggerHighlightSameMonthNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-months-view\">\r\n  @if (!readOnly()) {\r\n    <div class=\"ard-calendar__top-toolbar\">\r\n      <ng-template\r\n        #defaultMonthsViewHeaderTemplate\r\n        let-year\r\n        let-nextPage=\"nextPage\"\r\n        let-prevPage=\"prevPage\"\r\n        let-canGoToNextPage=\"canGoToNextPage\"\r\n        let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n        let-openDaysView=\"openDaysView\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <ard-button\r\n            class=\"ard-calendar__header-button\"\r\n            appearance=\"transparent\"\r\n            [color]=\"color()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openDaysView()\"\r\n          >\r\n            {{ year }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div class=\"ard-calendar-arrows\">\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"prevPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToPreviousPage\"\r\n            >\r\n              <ard-icon>chevron_left</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"nextPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToNextPage\"\r\n            >\r\n              <ard-icon>chevron_right</ard-icon>\r\n            </ard-icon-button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n        [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\r\n      />\r\n    </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onMonthGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onMonthGridBlur()\"\r\n    (click)=\"onMonthGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (month of monthsArray(); track $index) {\r\n      <div\r\n        class=\"ard-calendar__entry\"\r\n        [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n        [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n        [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n        [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n        (click)=\"onCalendarMonthClick(month.value)\"\r\n        (mousemove)=\"$event.stopPropagation()\"\r\n        (mouseover)=\"onCalendarMonthMouseover(month.value)\"\r\n        role=\"gridcell\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"ard-calendar__entry-button\"\r\n          tabindex=\"-1\"\r\n        >\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <ng-template\r\n              #defaultMonthTemplate\r\n              let-month\r\n            >\r\n              {{ month | date: 'MMM' : '+0000' | uppercase }}\r\n            </ng-template>\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n              [ngTemplateOutletContext]=\"monthContext()(month.value)\"\r\n            />\r\n          </div>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["icon", "variant", "alignIcon", "vertical"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MonthsViewComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-months-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-months-view\">\r\n  @if (!readOnly()) {\r\n    <div class=\"ard-calendar__top-toolbar\">\r\n      <ng-template\r\n        #defaultMonthsViewHeaderTemplate\r\n        let-year\r\n        let-nextPage=\"nextPage\"\r\n        let-prevPage=\"prevPage\"\r\n        let-canGoToNextPage=\"canGoToNextPage\"\r\n        let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n        let-openDaysView=\"openDaysView\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <ard-button\r\n            class=\"ard-calendar__header-button\"\r\n            appearance=\"transparent\"\r\n            [color]=\"color()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openDaysView()\"\r\n          >\r\n            {{ year }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div class=\"ard-calendar-arrows\">\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"prevPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToPreviousPage\"\r\n            >\r\n              <ard-icon>chevron_left</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"nextPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToNextPage\"\r\n            >\r\n              <ard-icon>chevron_right</ard-icon>\r\n            </ard-icon-button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n        [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\r\n      />\r\n    </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onMonthGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onMonthGridBlur()\"\r\n    (click)=\"onMonthGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (month of monthsArray(); track $index) {\r\n      <div\r\n        class=\"ard-calendar__entry\"\r\n        [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n        [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n        [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n        [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n        (click)=\"onCalendarMonthClick(month.value)\"\r\n        (mousemove)=\"$event.stopPropagation()\"\r\n        (mouseover)=\"onCalendarMonthMouseover(month.value)\"\r\n        role=\"gridcell\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"ard-calendar__entry-button\"\r\n          tabindex=\"-1\"\r\n        >\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <ng-template\r\n              #defaultMonthTemplate\r\n              let-month\r\n            >\r\n              {{ month | date: 'MMM' | uppercase }}\r\n            </ng-template>\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n              [ngTemplateOutletContext]=\"monthContext()(month.value)\"\r\n            />\r\n          </div>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ standalone: false, selector: 'ard-months-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-months-view\">\r\n  @if (!readOnly()) {\r\n    <div class=\"ard-calendar__top-toolbar\">\r\n      <ng-template\r\n        #defaultMonthsViewHeaderTemplate\r\n        let-year\r\n        let-nextPage=\"nextPage\"\r\n        let-prevPage=\"prevPage\"\r\n        let-canGoToNextPage=\"canGoToNextPage\"\r\n        let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n        let-openDaysView=\"openDaysView\"\r\n      >\r\n        <div class=\"ard-calendar__calendar-header\">\r\n          <ard-button\r\n            class=\"ard-calendar__header-button\"\r\n            appearance=\"transparent\"\r\n            [color]=\"color()\"\r\n            [tabIndex]=\"tabIndex()\"\r\n            (click)=\"openDaysView()\"\r\n          >\r\n            {{ year }}\r\n            <div class=\"ard-dropdown-arrow\"></div>\r\n          </ard-button>\r\n          <div class=\"ard-calendar-arrows\">\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"prevPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToPreviousPage\"\r\n            >\r\n              <ard-icon>chevron_left</ard-icon>\r\n            </ard-icon-button>\r\n            <ard-icon-button\r\n              size=\"small\"\r\n              appearance=\"transparent\"\r\n              color=\"none\"\r\n              (click)=\"nextPage()\"\r\n              [tabIndex]=\"tabIndex()\"\r\n              [disabled]=\"!canGoToNextPage\"\r\n            >\r\n              <ard-icon>chevron_right</ard-icon>\r\n            </ard-icon-button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n        [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\r\n      />\r\n    </div>\r\n  }\r\n  <div\r\n    #focusableElement\r\n    class=\"ard-calendar__simple-grid\"\r\n    [tabindex]=\"tabIndex()\"\r\n    [ariaLabel]=\"currentAriaLabel()\"\r\n    (focus)=\"focusEvent.emit($event)\"\r\n    (focus)=\"onMonthGridFocus()\"\r\n    (blur)=\"blurEvent.emit($event)\"\r\n    (blur)=\"onMonthGridBlur()\"\r\n    (click)=\"onMonthGridClick()\"\r\n    (keydown)=\"onMainGridKeydown($event)\"\r\n    role=\"grid\"\r\n  >\r\n    @for (month of monthsArray(); track $index) {\r\n      <div\r\n        class=\"ard-calendar__entry\"\r\n        [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n        [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n        [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n        [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n        (click)=\"onCalendarMonthClick(month.value)\"\r\n        (mousemove)=\"$event.stopPropagation()\"\r\n        (mouseover)=\"onCalendarMonthMouseover(month.value)\"\r\n        role=\"gridcell\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"ard-calendar__entry-button\"\r\n          tabindex=\"-1\"\r\n        >\r\n          <div class=\"ard-focus-overlay\"></div>\r\n          <div class=\"ard-button-content\">\r\n            <ng-template\r\n              #defaultMonthTemplate\r\n              let-month\r\n            >\r\n              {{ month | date: 'MMM' : '+0000' | uppercase }}\r\n            </ng-template>\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n              [ngTemplateOutletContext]=\"monthContext()(month.value)\"\r\n            />\r\n          </div>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }], propDecorators: { onMouseMove: [{
                 type: HostListener,
                 args: ['mousemove']