@kirbydesign/designsystem 10.1.2 → 10.2.0

package/fesm2022/kirbydesign-designsystem-calendar.mjs

@@ -1,93 +1,18 @@
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, LOCALE_ID, Component, Inject, ViewChild, Output, Input, HostBinding } from '@angular/core';
-import { isBefore, isAfter, format, isSameMonth, startOfMonth, startOfDay, eachDayOfInterval, startOfWeek, endOfWeek, isSameDay, add, isWeekend, getYear } from 'date-fns';
-import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz';
+import { EventEmitter, LOCALE_ID, Component, ChangeDetectionStrategy, Inject, Output, Input, HostBinding } from '@angular/core';
+import { isBefore, isAfter, startOfDay, format, isSameMonth, startOfMonth, eachDayOfInterval, startOfWeek, endOfWeek, isSameDay, add, isWeekend, getYear, lastDayOfWeek } from 'date-fns';
+import { toZonedTime, fromZonedTime } from 'date-fns-tz';
 import { da, enGB, enUS } from 'date-fns/locale';
 import { capitalizeFirstLetter } from '@kirbydesign/core';
-import * as i4 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i3 from '@kirbydesign/designsystem/icon';
-import { IconModule } from '@kirbydesign/designsystem/icon';
+import { ButtonComponent } from '@kirbydesign/designsystem/button';
 import * as i2 from '@kirbydesign/designsystem/dropdown';
 import { DropdownModule } from '@kirbydesign/designsystem/dropdown';
-import { ButtonComponent } from '@kirbydesign/designsystem/button';
-import * as i1 from '@kirbydesign/designsystem/types';
-
-class CalendarHelper {
-    constructor(windowRef) {
-        this.windowRef = windowRef;
-        this.embeddedViewReady = false;
-    }
-    init(calendarContainer, options, onDaySelected, onChangeMonth) {
-        if (this.hasEmbeddedView(calendarContainer)) {
-            const iframe = calendarContainer.nativeElement;
-            iframe.onload = () => {
-                this.embeddedViewReady = true;
-                this.emitOptionsToEmbeddedView(options);
-            };
-            this.embeddedView = iframe.contentWindow;
-            this.windowRef.nativeWindow.addEventListener('message', (event) => this.handleMessageEvent(event, onDaySelected, onChangeMonth));
-        }
-    }
-    update(options) {
-        if (this.embeddedViewReady) {
-            this.emitOptionsToEmbeddedView(options);
-        }
-    }
-    setSelectedDay(day) {
-        if (this.embeddedViewReady) {
-            this.embeddedView.postMessage({
-                type: 'kirbyCalendarSetSelectedDay',
-                selectedDay: day,
-            }, '*');
-        }
-    }
-    hasEmbeddedView(calendarContainer) {
-        return (calendarContainer &&
-            calendarContainer.nativeElement &&
-            calendarContainer.nativeElement instanceof HTMLIFrameElement &&
-            calendarContainer.nativeElement.contentWindow);
-    }
-    emitOptionsToEmbeddedView(options) {
-        this.embeddedView.postMessage({
-            type: 'kirbyCalendarInit',
-            ...options,
-        }, '*');
-    }
-    handleMessageEvent(event, onDaySelected, onChangeMonth) {
-        if (this.validateMessage(event)) {
-            switch (event.data.type) {
-                case 'kirbyCalendarDaySelected':
-                    if (this.validateDateSelectedMessage(event)) {
-                        onDaySelected({ isSelectable: true, date: event.data.day });
-                    }
-                    break;
-                case 'kirbyCalendarChangeMonth':
-                    if (this.validateNavigateMonthMessage(event)) {
-                        onChangeMonth(event.data.index);
-                    }
-                    break;
-            }
-        }
-    }
-    validateMessage(event) {
-        return (this.embeddedView === event.source &&
-            event.type === 'message' &&
-            event.data &&
-            event.data.type);
-    }
-    validateDateSelectedMessage(event) {
-        return event.data.type === 'kirbyCalendarDaySelected' && event.data.day;
-    }
-    validateNavigateMonthMessage(event) {
-        return event.data.type === 'kirbyCalendarChangeMonth' && typeof event.data.index === 'number';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CalendarHelper, deps: [{ token: i1.WindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CalendarHelper }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CalendarHelper, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1.WindowRef }] });
+import { UniqueIdGenerator } from '@kirbydesign/designsystem/helpers';
+import * as i3 from '@kirbydesign/designsystem/icon';
+import { IconModule } from '@kirbydesign/designsystem/icon';
+import * as i1 from '@kirbydesign/designsystem/shared';
 
 var TimeUnit;
 (function (TimeUnit) {
@@ -115,6 +40,7 @@ class CalendarComponent {
         }
         if (this.hasDateChanged(value, this._selectedDate)) {
             this.onSelectedDateChange(value);
+            this.focusDate(value);
             this._selectedDate = value;
         }
     }
@@ -174,8 +100,13 @@ class CalendarComponent {
     get _hasYearNavigator() {
         return !!this.yearNavigatorOptions;
     }
-    constructor(calendarHelper, locale) {
-        this.calendarHelper = calendarHelper;
+    getTodayDate() {
+        return startOfDay(this.todayDate ?? new Date());
+    }
+    constructor(locale, elementRef, cdr, translations) {
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.translations = translations;
         this.dateChange = new EventEmitter();
         this.dateSelect = new EventEmitter();
         this.yearSelect = new EventEmitter();
@@ -192,6 +123,7 @@ class CalendarComponent {
           For context see: https://github.com/kirbydesign/designsystem/issues/2087
         */
         this.usePopover = false;
+        this._tableMonthId = UniqueIdGenerator.scopedTo('kirby-calendar-month').next();
         this._disabledDates = [];
         this._enabledDates = [];
         this.includedLocales = { da, enGB, enUS };
@@ -211,13 +143,21 @@ class CalendarComponent {
         const availableLocales = { ...this.includedLocales, ...this.locales, ...this.customLocales };
         return availableLocales[locale] || this.includedLocales.enGB; // Default to enGB if injected locale doesnt exist
     }
+    formatDateLabel() {
+        const localeDateFormats = {
+            da: 'd. MMMM',
+            'en-GB': 'd MMMM',
+            'en-US': 'MMMM d',
+        };
+        const defaultDateFormat = localeDateFormats['en-US'];
+        const dateFormat = localeDateFormats[this.locale.code] || defaultDateFormat;
+        return dateFormat;
+    }
     ngOnInit() {
+        this.focussedDate = this.getTodayDate();
         this._weekDays = this.getWeekDays();
         this.setActiveMonth(this.selectedDate);
     }
-    ngAfterViewInit() {
-        this.calendarHelper.init(this.calendarContainer, this.getHelperOptions(), this._onDateSelected.bind(this), this.onChangeMonth.bind(this));
-    }
     ngOnChanges(changes) {
         if (!this.activeMonth)
             return;
@@ -231,14 +171,12 @@ class CalendarComponent {
             changes.todayDate ||
             changes.timezone) {
             this.refreshActiveMonth();
-            this.calendarHelper.update(this.getHelperOptions());
         }
     }
     setActiveMonth(date = new Date()) {
         if (!this.activeMonth || !isSameMonth(this.activeMonth, date)) {
             this.activeMonth = startOfMonth(date);
             this.refreshActiveMonth();
-            this.calendarHelper.update(this.getHelperOptions());
         }
     }
     // For leniency, the component will accept any Date that points to either UTC midnight
@@ -253,10 +191,10 @@ class CalendarComponent {
             // date is local timezone midnight
             return dateLocalOrUTC;
         }
-        if (startOfDay(utcToZonedTime(dateLocalOrUTC, this.timeZoneName)).getTime() ===
-            utcToZonedTime(dateLocalOrUTC, this.timeZoneName).getTime()) {
+        if (startOfDay(toZonedTime(dateLocalOrUTC, this.timeZoneName)).getTime() ===
+            toZonedTime(dateLocalOrUTC, this.timeZoneName).getTime()) {
             // the date is a UTC midnight; create the equivalent local timezone midnight date
-            const normalizedUTCdate = utcToZonedTime(dateLocalOrUTC, this.timeZoneName);
+            const normalizedUTCdate = toZonedTime(dateLocalOrUTC, this.timeZoneName);
             return normalizedUTCdate;
         }
         // does not point to midnight so we make it
@@ -268,10 +206,12 @@ class CalendarComponent {
             start: startOfWeek(now, { locale: this.locale }),
             end: endOfWeek(now, { locale: this.locale }),
         });
-        return week.map((date) => this.getFirstLetterOfWeekDayCapitalized(date));
-    }
-    getFirstLetterOfWeekDayCapitalized(date) {
-        return this.formatWithLocale(date, 'EEEEE');
+        const weekdayNarrowFormat = 'EEEEE';
+        const weekdayWideFormat = 'EEEE';
+        return week.map((date) => ({
+            firstLetterCapitalized: this.formatWithLocale(date, weekdayNarrowFormat),
+            fullName: this.formatWithLocale(date, weekdayWideFormat),
+        }));
     }
     hasDateChanged(newDate, previousDate) {
         if (!newDate && !previousDate) {
@@ -294,66 +234,64 @@ class CalendarComponent {
             return;
         const monthStart = startOfMonth(this.activeMonth);
         const startOfFirstWeek = startOfWeek(monthStart, { locale: this.locale });
-        const today = this.todayDate ? startOfDay(this.todayDate) : startOfDay(new Date());
         const totalNumberOfDays = 42; // Always show 42 days (6 weeks) in calendar
         const daysArray = Array.from(Array(totalNumberOfDays).keys());
-        const days = daysArray.map((number) => {
-            const cellDate = add(startOfFirstWeek, { [TimeUnit.days]: number });
-            const day = this.getCalendarDay(cellDate, today, monthStart);
-            const isSelectable = this.isSelectable(day, cellDate);
-            const isSelected = isSameDay(this.selectedDate, cellDate);
-            const cell = {
-                date: cellDate.getDate(),
-                monthIndex: cellDate.getMonth(),
-                year: cellDate.getFullYear(),
-                isCurrentMonth: day.isCurrentMonth,
-                isSelectable,
-                isSelected,
-                cssClasses: this.getCssClasses(day, isSelectable, isSelected),
+        const today = this.getTodayDate();
+        const calendarDays = daysArray.map((number) => {
+            const dateOfCalendarDay = add(startOfFirstWeek, { [TimeUnit.days]: number });
+            const calendarDay = {
+                date: dateOfCalendarDay.getDate(),
+                monthIndex: dateOfCalendarDay.getMonth(),
+                year: dateOfCalendarDay.getFullYear(),
+                ariaLabel: this.formatWithLocale(dateOfCalendarDay, this.formatDateLabel()),
+                ...this.getCalendarDayMetadata(dateOfCalendarDay, today, monthStart),
             };
-            if (isSelected) {
-                this.selectedDay = cell;
+            if (calendarDay.isSelected) {
+                this.selectedDay = calendarDay;
             }
-            return cell;
+            if (calendarDay.isFocussed) {
+                this.focussedDay = calendarDay;
+            }
+            return calendarDay;
         });
-        this._month = this.chunk(days, 7);
+        this._month = this.chunk(calendarDays, 7);
     }
-    getCalendarDay(date, today, monthStart) {
+    getCalendarDayMetadata(date, today, monthStart) {
         return {
             isToday: isSameDay(today, date),
             isPast: isBefore(date, today),
             isFuture: isAfter(date, today),
             isWeekend: isWeekend(date),
             isCurrentMonth: isSameMonth(date, monthStart),
-            isDisabled: this.isDisabledDate(date) || !this.isEnabledDate(date),
+            isSelectable: this.isSelectable(date, today),
+            isFocusable: this.isWithinAllowedRange(date, today),
+            isSelected: isSameDay(this.selectedDate, date),
+            isFocussed: isSameDay(this.focussedDate, date),
         };
     }
-    isSelectable(day, date) {
-        return ((this.alwaysEnableToday && day.isToday) ||
-            (!day.isDisabled &&
-                !(this.disableWeekends && day.isWeekend) &&
-                !(this.disablePastDates && day.isPast) &&
-                !(this.disableFutureDates && day.isFuture) &&
-                !(this.minDate && isBefore(date, this.minDate)) &&
-                !(this.maxDate && isAfter(date, this.maxDate))));
-    }
-    getCssClasses(day, isSelectable, isSelected) {
-        const cssClasses = {
-            'current-month': day.isCurrentMonth,
-            weekend: day.isWeekend,
-            today: day.isToday,
-            selectable: isSelectable,
-            selected: isSelected,
-            past: day.isPast,
-            disabled: day.isDisabled,
-        };
-        let cssClassString = 'day';
-        for (const key in cssClasses) {
-            if (cssClasses[key]) {
-                cssClassString += ' ' + key;
-            }
-        }
-        return cssClassString;
+    isSelectable(date, today) {
+        if (this.alwaysEnableToday && isSameDay(today, date))
+            return true;
+        if (!this.isWithinAllowedRange(date, today))
+            return false;
+        if (this.isDisabledDate(date))
+            return false;
+        if (!this.isEnabledDate(date))
+            return false;
+        if (this.disableWeekends && isWeekend(date))
+            return false;
+        return true;
+    }
+    isWithinAllowedRange(date, today) {
+        if (this.disablePastDates && isBefore(date, today))
+            return false;
+        if (this.disableFutureDates && isAfter(date, today))
+            return false;
+        if (this.minDate && isBefore(date, this.minDate))
+            return false;
+        if (this.maxDate && isAfter(date, this.maxDate))
+            return false;
+        return true;
     }
     chunk(array, size) {
         const results = [];
@@ -366,36 +304,33 @@ class CalendarComponent {
         if (this.selectedDay) {
             this.selectedDay.isSelected = false;
         }
-        const newDay = this.getCell(newDate);
+        const newDay = this.getDay(newDate);
         if (newDay) {
             newDay.isSelected = true;
             this.selectedDay = newDay;
         }
-        if (newDate) {
-            this.calendarHelper.setSelectedDay(newDate.getDate());
-        }
     }
     _onDateSelected(newDay) {
         if (!newDay.isSelectable)
             return;
         let newDate = new Date(newDay.year, newDay.monthIndex, newDay.date);
         if (this.timezone === 'UTC') {
-            newDate = zonedTimeToUtc(this.subtractTimezoneOffset(newDate), this.timeZoneName);
+            newDate = fromZonedTime(this.subtractTimezoneOffset(newDate), this.timeZoneName);
         }
         const dateToEmit = newDate;
         if (this.hasDateChanged(newDate, this._selectedDate)) {
             this.setActiveMonth(newDate);
             this.onSelectedDateChange(newDate);
-            this._selectedDate = newDate;
+            this.selectedDate = newDate;
             this.dateChange.emit(dateToEmit);
         }
         this.dateSelect.emit(dateToEmit);
     }
-    onChangeMonth(direction) {
-        this._changeMonth(direction);
-        this.calendarHelper.update(this.getHelperOptions());
-    }
     _changeMonth(index) {
+        if (index > 0 && !this._canNavigateForward)
+            return;
+        if (index < 0 && !this._canNavigateBack)
+            return;
         this.changeActiveView(index, TimeUnit.months);
         index > 0
             ? this.nextMonthClicked.emit(this.activeMonth)
@@ -410,21 +345,24 @@ class CalendarComponent {
         if (index === 0)
             return;
         this.activeMonth = add(this.activeMonth, { [unit]: index });
+        this.focussedDate = add(this.focussedDate, { [unit]: index });
         this.refreshActiveMonth();
     }
     get _canNavigateBack() {
-        const reachedPastDatesLimit = this.disablePastDates && isSameMonth(this.activeMonth, this.todayDate);
+        const today = this.getTodayDate();
+        const reachedPastDatesLimit = this.disablePastDates && isSameMonth(this.activeMonth, today);
         const reachedOrExceededMinDate = this.minDate &&
             (isSameMonth(this.activeMonth, this.minDate) || isBefore(this.activeMonth, this.minDate));
         return !reachedPastDatesLimit && !reachedOrExceededMinDate;
     }
     get _canNavigateForward() {
-        const reachedFutureDatesLimit = this.disableFutureDates && isSameMonth(this.activeMonth, this.todayDate);
+        const today = this.getTodayDate();
+        const reachedFutureDatesLimit = this.disableFutureDates && isSameMonth(this.activeMonth, today);
         const reachedOrExceededMaxDate = this.maxDate &&
             (isSameMonth(this.activeMonth, this.maxDate) || isAfter(this.activeMonth, this.maxDate));
         return !reachedFutureDatesLimit && !reachedOrExceededMaxDate;
     }
-    getCell(date) {
+    getDay(date) {
         let foundDay = null;
         if (date) {
             for (const week of this._month) {
@@ -438,16 +376,6 @@ class CalendarComponent {
         }
         return foundDay;
     }
-    getHelperOptions() {
-        return {
-            canNavigateBack: this._canNavigateBack,
-            canNavigateForward: this._canNavigateForward,
-            year: this.activeYear,
-            monthName: this.activeMonthName,
-            weekDays: this._weekDays,
-            month: this._month,
-        };
-    }
     subtractTimezoneOffset(date) {
         const timezoneOffsetInMs = date.getTimezoneOffset() * 60 * 1000;
         return new Date(date.getTime() - timezoneOffsetInMs);
@@ -464,19 +392,82 @@ class CalendarComponent {
         const numberOfYears = endYear - startYear;
         return Array.from({ length: numberOfYears + 1 }, (_, i) => (startYear + i).toString());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CalendarComponent, deps: [{ token: CalendarHelper }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: CalendarComponent, isStandalone: true, selector: "kirby-calendar", inputs: { timezone: "timezone", disableWeekends: "disableWeekends", disablePastDates: "disablePastDates", disableFutureDates: "disableFutureDates", alwaysEnableToday: "alwaysEnableToday", locales: "locales", customLocales: "customLocales", usePopover: "usePopover", yearNavigatorOptions: "yearNavigatorOptions", selectedDate: "selectedDate", disabledDates: "disabledDates", enabledDates: "enabledDates", todayDate: "todayDate", minDate: "minDate", maxDate: "maxDate" }, outputs: { dateChange: "dateChange", dateSelect: "dateSelect", yearSelect: "yearSelect", previousMonthClicked: "previousMonthClicked", nextMonthClicked: "nextMonthClicked" }, host: { properties: { "class.has-year-navigator": "this._hasYearNavigator" } }, providers: [CalendarHelper], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      type=\"button\"\n      [disabled]=\"!_canNavigateBack\"\n      (click)=\"_changeMonth(-1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-back\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\">\n      <span class=\"month\">{{ activeMonthName }}</span>\n      <span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button\n      type=\"button\"\n      [disabled]=\"!_canNavigateForward\"\n      (click)=\"_changeMonth(1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-more\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [usePopover]=\"usePopover\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  ></kirby-dropdown>\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\">{{ weekDay }}</th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\">\n        <div\n          (click)=\"_onDateSelected(day)\"\n          class=\"{{ day.cssClasses }} contain-state-layer\"\n          [class.selected]=\"day.isSelected\"\n        >\n          <span class=\"state-layer\" aria-hidden=\"true\"></span>\n          <span class=\"content-layer\">{{ day.date }}</span>\n        </div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<!-- <iframe src=\"kirby/components/calendar/calendar.webview.html\" #calendarContainer style=\"width: 320px; height: 304px; border: 0\"> -->\n", styles: ["table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-navigator button:disabled{opacity:.5;pointer-events:none}.month-and-year{-webkit-user-select:none;user-select:none}.month-and-year .month{font-weight:700;margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;width:40px;height:40px;margin:4px 0;color:var(--color, var(--kirby-black));background-color:var(--background-color, transparent)}.day.disabled,.day:not(.selectable){--color: #b4b4b4;pointer-events:none}.day.selectable:not(.current-month){--color: var(--kirby-text-color-semi-dark)}@media (hover: hover){.day.today:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.day.today:active,.day.today.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}@media (hover: hover){.day.selected:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}.day.selected:active,.day.selected.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}.contain-state-layer{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}.contain-state-layer .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}.contain-state-layer .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}.contain-state-layer .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){.contain-state-layer:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.contain-state-layer:active,.contain-state-layer.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"], dependencies: [{ kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2.DropdownComponent, selector: "kirby-dropdown", inputs: ["items", "selectedIndex", "focusedIndex", "itemTextProperty", "placeholder", "popout", "attentionLevel", "expand", "disabled", "hasError", "size", "tabindex", "usePopover"], outputs: ["change"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    setFocussedDay(newDate) {
+        const newDay = this.getDay(newDate);
+        if (!newDay)
+            return;
+        if (this.focussedDay) {
+            this.focussedDay.isFocussed = false;
+        }
+        newDay.isFocussed = true;
+        this.focussedDay = newDay;
+    }
+    focusDate(newDate) {
+        if (!newDate)
+            return;
+        if (this.timezone === 'UTC') {
+            newDate = fromZonedTime(this.subtractTimezoneOffset(newDate), this.timeZoneName);
+        }
+        const today = this.getTodayDate();
+        if (!this.isWithinAllowedRange(newDate, today))
+            return;
+        if (!this.hasDateChanged(newDate, this.focussedDate))
+            return;
+        this.setActiveMonth(newDate);
+        this.setFocussedDay(newDate);
+        this.focussedDate = newDate;
+        this.cdr.detectChanges(); //sync focussed class to template before setting focus
+        const elementMarkedForFocus = this.elementRef.nativeElement.querySelector('.focussed');
+        elementMarkedForFocus.focus();
+    }
+    _onDateKeydown(event) {
+        const { key, shiftKey } = event;
+        let newDate;
+        switch (key) {
+            case 'ArrowUp':
+                newDate = add(this.focussedDate, { days: -7 });
+                break;
+            case 'ArrowDown':
+                newDate = add(this.focussedDate, { days: 7 });
+                break;
+            case 'ArrowRight':
+                newDate = add(this.focussedDate, { days: 1 });
+                break;
+            case 'ArrowLeft':
+                newDate = add(this.focussedDate, { days: -1 });
+                break;
+            case 'Home':
+                newDate = startOfWeek(this.focussedDate, { locale: this.locale });
+                break;
+            case 'End':
+                newDate = lastDayOfWeek(this.focussedDate, { locale: this.locale });
+                break;
+            case 'PageUp':
+                newDate = shiftKey
+                    ? add(this.focussedDate, { years: -1 })
+                    : add(this.focussedDate, { months: -1 });
+                break;
+            case 'PageDown':
+                newDate = shiftKey
+                    ? add(this.focussedDate, { years: 1 })
+                    : add(this.focussedDate, { months: 1 });
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.focusDate(newDate);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalendarComponent, deps: [{ token: LOCALE_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CalendarComponent, isStandalone: true, selector: "kirby-calendar", inputs: { timezone: "timezone", disableWeekends: "disableWeekends", disablePastDates: "disablePastDates", disableFutureDates: "disableFutureDates", alwaysEnableToday: "alwaysEnableToday", locales: "locales", customLocales: "customLocales", usePopover: "usePopover", yearNavigatorOptions: "yearNavigatorOptions", selectedDate: "selectedDate", disabledDates: "disabledDates", enabledDates: "enabledDates", todayDate: "todayDate", minDate: "minDate", maxDate: "maxDate" }, outputs: { dateChange: "dateChange", dateSelect: "dateSelect", yearSelect: "yearSelect", previousMonthClicked: "previousMonthClicked", nextMonthClicked: "nextMonthClicked" }, host: { properties: { "class.has-year-navigator": "this._hasYearNavigator" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      kirby-button\n      type=\"button\"\n      class=\"no-margin\"\n      [attr.aria-label]=\"translations.get('previousMonth')\"\n      [attr.aria-disabled]=\"_canNavigateBack ? null : true\"\n      [noDecoration]=\"true\"\n      (click)=\"_changeMonth(-1)\"\n    >\n      <kirby-icon name=\"arrow-back\" aria-hidden=\"true\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\" [id]=\"_tableMonthId\" aria-live=\"polite\" aria-atomic=\"true\">\n      <span class=\"month\">{{ activeMonthName }}</span>\n      <span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button\n      kirby-button\n      type=\"button\"\n      class=\"no-margin\"\n      [attr.aria-label]=\"translations.get('nextMonth')\"\n      [attr.aria-disabled]=\"_canNavigateForward ? null : true\"\n      [noDecoration]=\"true\"\n      (click)=\"_changeMonth(1)\"\n    >\n      <kirby-icon name=\"arrow-more\" aria-hidden=\"true\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [usePopover]=\"usePopover\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    [attr.aria-label]=\"translations.get('selectYear')\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  ></kirby-dropdown>\n</div>\n\n<table [attr.aria-labelledby]=\"_tableMonthId\" role=\"grid\">\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\" scope=\"col\">\n        <span aria-hidden=\"true\">{{ weekDay.firstLetterCapitalized }}</span>\n        <span class=\"visually-hidden\">{{ weekDay.fullName }}</span>\n      </th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\" [attr.aria-selected]=\"day.isSelected ? true : false\">\n        <button\n          kirby-button\n          type=\"button\"\n          (click)=\"_onDateSelected(day)\"\n          (keydown)=\"_onDateKeydown($event)\"\n          class=\"day\"\n          [class.current-month]=\"day.isCurrentMonth\"\n          [class.weekend]=\"day.isWeekend\"\n          [class.today]=\"day.isToday\"\n          [class.selectable]=\"day.isSelectable\"\n          [class.selected]=\"day.isSelected\"\n          [class.focussed]=\"day.isFocussed\"\n          [class.past]=\"day.isPast\"\n          [attr.aria-label]=\"day.ariaLabel\"\n          [attr.aria-disabled]=\"day.isSelectable ? null : true\"\n          [noDecoration]=\"true\"\n          [disabled]=\"day.isFocusable ? null : true\"\n          [tabIndex]=\"day.isFocussed ? 0 : -1\"\n        >\n          {{ day.date }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host{font-size:16px}table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-and-year{-webkit-user-select:none;user-select:none;font-weight:700}.month-and-year .month{margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;min-width:40px;min-height:40px;width:40px;height:40px;margin:4px 0;font-size:16px}.day:focus{z-index:1}button[aria-disabled=true]{color:#b4b4b4}.day.selectable:not(.current-month,.selected){color:var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}.visually-hidden{position:absolute;scale:0}\n"], dependencies: [{ kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2.DropdownComponent, selector: "kirby-dropdown", inputs: ["items", "selectedIndex", "focusedIndex", "itemTextProperty", "placeholder", "popout", "attentionLevel", "expand", "disabled", "hasError", "size", "tabindex", "usePopover"], outputs: ["change"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [DropdownModule, ButtonComponent, IconModule, CommonModule], selector: 'kirby-calendar', providers: [CalendarHelper], template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      type=\"button\"\n      [disabled]=\"!_canNavigateBack\"\n      (click)=\"_changeMonth(-1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-back\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\">\n      <span class=\"month\">{{ activeMonthName }}</span>\n      <span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button\n      type=\"button\"\n      [disabled]=\"!_canNavigateForward\"\n      (click)=\"_changeMonth(1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-more\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [usePopover]=\"usePopover\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  ></kirby-dropdown>\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\">{{ weekDay }}</th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\">\n        <div\n          (click)=\"_onDateSelected(day)\"\n          class=\"{{ day.cssClasses }} contain-state-layer\"\n          [class.selected]=\"day.isSelected\"\n        >\n          <span class=\"state-layer\" aria-hidden=\"true\"></span>\n          <span class=\"content-layer\">{{ day.date }}</span>\n        </div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<!-- <iframe src=\"kirby/components/calendar/calendar.webview.html\" #calendarContainer style=\"width: 320px; height: 304px; border: 0\"> -->\n", styles: ["table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-navigator button:disabled{opacity:.5;pointer-events:none}.month-and-year{-webkit-user-select:none;user-select:none}.month-and-year .month{font-weight:700;margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;width:40px;height:40px;margin:4px 0;color:var(--color, var(--kirby-black));background-color:var(--background-color, transparent)}.day.disabled,.day:not(.selectable){--color: #b4b4b4;pointer-events:none}.day.selectable:not(.current-month){--color: var(--kirby-text-color-semi-dark)}@media (hover: hover){.day.today:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.day.today:active,.day.today.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}@media (hover: hover){.day.selected:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}.day.selected:active,.day.selected.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}.contain-state-layer{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}.contain-state-layer .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}.contain-state-layer .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}.contain-state-layer .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){.contain-state-layer:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.contain-state-layer:active,.contain-state-layer.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"] }]
-        }], ctorParameters: () => [{ type: CalendarHelper }, { type: undefined, decorators: [{
+            args: [{ standalone: true, imports: [DropdownModule, ButtonComponent, IconModule, CommonModule], selector: 'kirby-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      kirby-button\n      type=\"button\"\n      class=\"no-margin\"\n      [attr.aria-label]=\"translations.get('previousMonth')\"\n      [attr.aria-disabled]=\"_canNavigateBack ? null : true\"\n      [noDecoration]=\"true\"\n      (click)=\"_changeMonth(-1)\"\n    >\n      <kirby-icon name=\"arrow-back\" aria-hidden=\"true\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\" [id]=\"_tableMonthId\" aria-live=\"polite\" aria-atomic=\"true\">\n      <span class=\"month\">{{ activeMonthName }}</span>\n      <span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button\n      kirby-button\n      type=\"button\"\n      class=\"no-margin\"\n      [attr.aria-label]=\"translations.get('nextMonth')\"\n      [attr.aria-disabled]=\"_canNavigateForward ? null : true\"\n      [noDecoration]=\"true\"\n      (click)=\"_changeMonth(1)\"\n    >\n      <kirby-icon name=\"arrow-more\" aria-hidden=\"true\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [usePopover]=\"usePopover\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    [attr.aria-label]=\"translations.get('selectYear')\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  ></kirby-dropdown>\n</div>\n\n<table [attr.aria-labelledby]=\"_tableMonthId\" role=\"grid\">\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\" scope=\"col\">\n        <span aria-hidden=\"true\">{{ weekDay.firstLetterCapitalized }}</span>\n        <span class=\"visually-hidden\">{{ weekDay.fullName }}</span>\n      </th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\" [attr.aria-selected]=\"day.isSelected ? true : false\">\n        <button\n          kirby-button\n          type=\"button\"\n          (click)=\"_onDateSelected(day)\"\n          (keydown)=\"_onDateKeydown($event)\"\n          class=\"day\"\n          [class.current-month]=\"day.isCurrentMonth\"\n          [class.weekend]=\"day.isWeekend\"\n          [class.today]=\"day.isToday\"\n          [class.selectable]=\"day.isSelectable\"\n          [class.selected]=\"day.isSelected\"\n          [class.focussed]=\"day.isFocussed\"\n          [class.past]=\"day.isPast\"\n          [attr.aria-label]=\"day.ariaLabel\"\n          [attr.aria-disabled]=\"day.isSelectable ? null : true\"\n          [noDecoration]=\"true\"\n          [disabled]=\"day.isFocusable ? null : true\"\n          [tabIndex]=\"day.isFocussed ? 0 : -1\"\n        >\n          {{ day.date }}\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host{font-size:16px}table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-and-year{-webkit-user-select:none;user-select:none;font-weight:700}.month-and-year .month{margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;min-width:40px;min-height:40px;width:40px;height:40px;margin:4px 0;font-size:16px}.day:focus{z-index:1}button[aria-disabled=true]{color:#b4b4b4}.day.selectable:not(.current-month,.selected){color:var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}.visually-hidden{position:absolute;scale:0}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
-                }] }], propDecorators: { calendarContainer: [{
-                type: ViewChild,
-                args: ['calendarContainer', { static: false }]
-            }], dateChange: [{
+                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.TranslationService }], propDecorators: { dateChange: [{
                 type: Output
             }], dateSelect: [{
                 type: Output