@kirbydesign/designsystem 11.11.3 → 12.0.0-dev-67d5287

package/fesm2022/kirbydesign-designsystem-calendar.mjs

@@ -1,521 +1,529 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, LOCALE_ID, HostBinding, Input, Output, Inject, ChangeDetectionStrategy, Component } from '@angular/core';
-import { isBefore, isAfter, startOfDay, format, isSameMonth, startOfMonth, eachDayOfInterval, endOfWeek, startOfWeek, isSameDay, add, isWeekend, getYear, lastDayOfWeek } from 'date-fns';
-import { toZonedTime, fromZonedTime } from 'date-fns-tz';
-import { enUS, enGB, de, da } from 'date-fns/locale';
-import { capitalizeFirstLetter } from '@kirbydesign/core';
-import { ButtonComponent } from '@kirbydesign/designsystem/button';
-import { DropdownComponent } from '@kirbydesign/designsystem/dropdown';
-import { UniqueIdGenerator } from '@kirbydesign/designsystem/helpers';
-import { IconComponent } from '@kirbydesign/designsystem/icon';
-import * as i1 from '@kirbydesign/designsystem/shared';
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Inject, Input, LOCALE_ID, Output } from "@angular/core";
+import { add, eachDayOfInterval, endOfWeek, format, getYear, isAfter, isBefore, isSameDay, isSameMonth, isWeekend, lastDayOfWeek, startOfDay, startOfMonth, startOfWeek } from "date-fns";
+import { fromZonedTime, toZonedTime } from "date-fns-tz";
+import { da, de, enGB, enUS } from "date-fns/locale";
+import { capitalizeFirstLetter } from "@kirbydesign/core";
+import { ButtonComponent } from "@kirbydesign/designsystem/button";
+import { DropdownComponent } from "@kirbydesign/designsystem/dropdown";
+import { UniqueIdGenerator } from "@kirbydesign/designsystem/helpers";
+import { IconComponent } from "@kirbydesign/designsystem/icon";
+import * as i1 from "@kirbydesign/designsystem/shared";
 var TimeUnit;
-(function (TimeUnit) {
-    TimeUnit["years"] = "years";
-    TimeUnit["months"] = "months";
-    TimeUnit["weeks"] = "weeks";
-    TimeUnit["days"] = "days";
-    TimeUnit["hours"] = "hours";
-    TimeUnit["minutes"] = "minutes";
-    TimeUnit["seconds"] = "seconds";
-    TimeUnit["milliseconds"] = "milliseconds";
+(function(TimeUnit) {
+	TimeUnit["years"] = "years";
+	TimeUnit["months"] = "months";
+	TimeUnit["weeks"] = "weeks";
+	TimeUnit["days"] = "days";
+	TimeUnit["hours"] = "hours";
+	TimeUnit["minutes"] = "minutes";
+	TimeUnit["seconds"] = "seconds";
+	TimeUnit["milliseconds"] = "milliseconds";
 })(TimeUnit || (TimeUnit = {}));
-class CalendarComponent {
-    set locales(locales) {
-        console.warn(`Supplying additional locales to the Kirby Calendar Component via an input property is deprecated and should not be used.
+var CalendarComponent = class CalendarComponent {
+	set locales(locales) {
+		console.warn(`Supplying additional locales to the Kirby Calendar Component via an input property is deprecated and should not be used.
         A future update will allow injecting additional locales via a provider instead.`);
-    }
-    /**
-     * @deprecated This input is no longer needed. The year selection dropdown now always uses popover positioning.
-     * This input will be removed in a future major version.
-     */
-    set usePopover(_value) {
-        console.warn(`[Kirby Calendar] The 'usePopover' input is deprecated and no longer has any effect. 
+	}
+	set usePopover(_value) {
+		console.warn(`[Kirby Calendar] The 'usePopover' input is deprecated and no longer has any effect. 
         The year selection dropdown now always uses popover positioning. This input will be removed in a future major version.`);
-    }
-    get selectedDate() {
-        return this._selectedDate;
-    }
-    set selectedDate(valueLocalOrUTC) {
-        const value = this.normalizeDate(valueLocalOrUTC);
-        if (valueLocalOrUTC) {
-            this.setActiveMonth(value);
-        }
-        if (this.hasDateChanged(value, this._selectedDate)) {
-            this.onSelectedDateChange(value);
-            this.focusDate(value);
-            this._selectedDate = value;
-        }
-    }
-    get disabledDates() {
-        return this._disabledDates;
-    }
-    set disabledDates(value) {
-        this._disabledDates = (value || []).map((date) => this.normalizeDate(date));
-    }
-    get enabledDates() {
-        return this._enabledDates;
-    }
-    set enabledDates(value) {
-        this._enabledDates = (value || []).map((date) => this.normalizeDate(date));
-    }
-    get todayDate() {
-        return this._todayDate;
-    }
-    set todayDate(value) {
-        this._todayDate = this.normalizeDate(value);
-    }
-    get minDate() {
-        return this._minDate;
-    }
-    set minDate(value) {
-        if (value && this.activeMonth && isBefore(this.activeMonth, value)) {
-            this.setActiveMonth(value);
-        }
-        this._minDate = this.normalizeDate(value);
-    }
-    get maxDate() {
-        return this._maxDate;
-    }
-    set maxDate(value) {
-        if (value && this.activeMonth && isAfter(this.activeMonth, value)) {
-            this.setActiveMonth(value);
-        }
-        this._maxDate = this.normalizeDate(value);
-    }
-    get activeMonthName() {
-        return capitalizeFirstLetter(this.formatWithLocale(this.activeMonth, 'MMMM'));
-    }
-    get activeYear() {
-        return this.formatWithLocale(this.activeMonth, 'yyyy');
-    }
-    /**
-     * Gets navigable years for year navigator based on yearNavigatorOptions.
-     */
-    get navigableYears() {
-        const dateOfFirstNavigableYear = this.minDate || this.getDateFromNavigableYear(this.yearNavigatorOptions.from);
-        const dateOfLastNavigableYear = this.maxDate || this.getDateFromNavigableYear(this.yearNavigatorOptions.to);
-        return this.getYearsBetweenDates(dateOfFirstNavigableYear, dateOfLastNavigableYear);
-    }
-    get navigatedYear() {
-        return this.navigableYears.indexOf(this.activeYear);
-    }
-    get _hasYearNavigator() {
-        return !!this.yearNavigatorOptions;
-    }
-    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();
-        this.previousMonthClicked = new EventEmitter();
-        this.nextMonthClicked = new EventEmitter();
-        this.timezone = 'local';
-        this.disableWeekends = false;
-        this.disablePastDates = false;
-        this.disableFutureDates = false;
-        this.alwaysEnableToday = false;
-        this.customLocales = {};
-        this._tableMonthId = UniqueIdGenerator.scopedTo('kirby-calendar-month').next();
-        this._disabledDates = [];
-        this._enabledDates = [];
-        this.includedLocales = { da, de, enGB, enUS };
-        this.locale = this.mapLocale(locale);
-        this.timeZoneName = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    }
-    formatWithLocale(date, formatString) {
-        return format(date, formatString, {
-            locale: this.locale,
-        });
-    }
-    mapLocale(locale) {
-        if (locale === 'en') {
-            locale = 'enGB'; // if english locale is provided without region, we default to GB
-        }
-        locale = locale.replace('-', '');
-        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',
-            de: '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);
-    }
-    ngOnChanges(changes) {
-        if (!this.activeMonth)
-            return;
-        if (changes.disableWeekends ||
-            changes.disablePastDates ||
-            changes.disableFutureDates ||
-            changes.disabledDates ||
-            changes.enabledDates ||
-            changes.minDate ||
-            changes.maxDate ||
-            changes.todayDate ||
-            changes.timezone) {
-            this.refreshActiveMonth();
-        }
-    }
-    setActiveMonth(date = new Date()) {
-        if (!this.activeMonth || !isSameMonth(this.activeMonth, date)) {
-            this.activeMonth = startOfMonth(date);
-            this.refreshActiveMonth();
-        }
-    }
-    // For leniency, the component will accept any Date that points to either UTC midnight
-    // or to local timezone midnight although we will internally normalize the representation
-    // of all received dates to point to local timezone midnight.
-    // We currently log no warnings if the date doesn't match the timezone setting or
-    // if it doesn't point to midnight.
-    normalizeDate(dateLocalOrUTC) {
-        if (!dateLocalOrUTC)
-            return;
-        if (startOfDay(dateLocalOrUTC).getTime() === dateLocalOrUTC.getTime()) {
-            // date is local timezone midnight
-            return dateLocalOrUTC;
-        }
-        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 = toZonedTime(dateLocalOrUTC, this.timeZoneName);
-            return normalizedUTCdate;
-        }
-        // does not point to midnight so we make it
-        return startOfDay(dateLocalOrUTC);
-    }
-    getWeekDays() {
-        const now = new Date();
-        const week = eachDayOfInterval({
-            start: startOfWeek(now, { locale: this.locale }),
-            end: endOfWeek(now, { locale: this.locale }),
-        });
-        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) {
-            return false;
-        }
-        if (newDate instanceof Date && !previousDate) {
-            return true;
-        }
-        return !isSameDay(newDate, previousDate);
-    }
-    isDisabledDate(date) {
-        return this.disabledDates.some((disabledDate) => isSameDay(disabledDate, date));
-    }
-    isEnabledDate(date) {
-        return (this._enabledDates.length === 0 ||
-            this.enabledDates.some((enabledDate) => isSameDay(enabledDate, date)));
-    }
-    refreshActiveMonth() {
-        if (!this.activeMonth)
-            return;
-        const monthStart = startOfMonth(this.activeMonth);
-        const startOfFirstWeek = startOfWeek(monthStart, { locale: this.locale });
-        const totalNumberOfDays = 42; // Always show 42 days (6 weeks) in calendar
-        const daysArray = Array.from(Array(totalNumberOfDays).keys());
-        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 (calendarDay.isSelected) {
-                this.selectedDay = calendarDay;
-            }
-            if (calendarDay.isFocussed) {
-                this.focussedDay = calendarDay;
-            }
-            return calendarDay;
-        });
-        this._month = this.chunk(calendarDays, 7);
-    }
-    getCalendarDayMetadata(date, today, monthStart) {
-        return {
-            isToday: isSameDay(today, date),
-            isPast: isBefore(date, today),
-            isFuture: isAfter(date, today),
-            isWeekend: isWeekend(date),
-            isCurrentMonth: isSameMonth(date, monthStart),
-            isSelectable: this.isSelectable(date, today),
-            isFocusable: this.isWithinAllowedRange(date, today),
-            isSelected: isSameDay(this.selectedDate, date),
-            isFocussed: isSameDay(this.focussedDate, date),
-        };
-    }
-    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 = [];
-        while (array.length) {
-            results.push(array.splice(0, size));
-        }
-        return results;
-    }
-    onSelectedDateChange(newDate) {
-        if (this.selectedDay) {
-            this.selectedDay.isSelected = false;
-        }
-        const newDay = this.getDay(newDate);
-        if (newDay) {
-            newDay.isSelected = true;
-            this.selectedDay = newDay;
-        }
-    }
-    _onDateSelected(newDay) {
-        if (!newDay.isSelectable)
-            return;
-        let newDate = new Date(newDay.year, newDay.monthIndex, newDay.date);
-        if (this.timezone === 'UTC') {
-            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.dateChange.emit(dateToEmit);
-        }
-        this.dateSelect.emit(dateToEmit);
-    }
-    _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)
-            : this.previousMonthClicked.emit(this.activeMonth);
-    }
-    _changeYear(year) {
-        const yearNumeric = Number(year);
-        this.changeActiveView(yearNumeric - getYear(this.activeMonth), TimeUnit.years);
-        this.yearSelect.emit(yearNumeric);
-    }
-    changeActiveView(index, unit) {
-        if (index === 0)
-            return;
-        this.activeMonth = add(this.activeMonth, { [unit]: index });
-        this.focussedDate = add(this.focussedDate, { [unit]: index });
-        this.refreshActiveMonth();
-    }
-    get _canNavigateBack() {
-        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 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;
-    }
-    getDay(date) {
-        let foundDay = null;
-        if (date) {
-            for (const week of this._month) {
-                foundDay = week.find((day) => {
-                    return day.isCurrentMonth && day.date === date.getDate();
-                });
-                if (foundDay) {
-                    break;
-                }
-            }
-        }
-        return foundDay;
-    }
-    subtractTimezoneOffset(date) {
-        const timezoneOffsetInMs = date.getTimezoneOffset() * 60 * 1000;
-        return new Date(date.getTime() - timezoneOffsetInMs);
-    }
-    getDateFromNavigableYear(navigableYear) {
-        if (navigableYear instanceof Date)
-            return navigableYear;
-        const today = this.todayDate || new Date();
-        return new Date(today.getFullYear() + navigableYear, 0, 1);
-    }
-    getYearsBetweenDates(startDate, endDate) {
-        // Ensure years are ordered correctly if parameters are switched:
-        const [startYear, endYear] = [startDate.getFullYear(), endDate.getFullYear()].sort();
-        const numberOfYears = endYear - startYear;
-        return Array.from({ length: numberOfYears + 1 }, (_, i) => (startYear + i).toString());
-    }
-    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;
-        newDate = this.normalizeDate(newDate);
-        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: "21.2.23", 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: "17.0.0", version: "21.2.23", 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      @if (!_hasYearNavigator) {\n        <span class=\"year\">{{ activeYear }}</span>\n      }\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  @if (_hasYearNavigator) {\n    <kirby-dropdown\n      [selectedIndex]=\"navigatedYear\"\n      [items]=\"navigableYears\"\n      [attr.aria-label]=\"translations.get('selectYear')\"\n      popout=\"left\"\n      (change)=\"_changeYear($event)\"\n    ></kirby-dropdown>\n  }\n</div>\n\n<table [attr.aria-labelledby]=\"_tableMonthId\" role=\"grid\">\n  <thead>\n    <tr>\n      @for (weekDay of _weekDays; track weekDay.fullName) {\n        <th scope=\"col\">\n          <span aria-hidden=\"true\">{{ weekDay.firstLetterCapitalized }}</span>\n          <span class=\"kirby-visually-hidden\">{{ weekDay.fullName }}</span>\n        </th>\n      }\n    </tr>\n  </thead>\n\n  <tbody>\n    @for (week of _month; track $index) {\n      <tr>\n        @for (day of week; track day.date + '-' + day.monthIndex + '-' + day.year) {\n          <td [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        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [":host{font-size:var(--kirby-font-size-n)}table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:var(--kirby-spacing-xxs)}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:var(--kirby-spacing-xxs)}th:last-child,td:last-child{padding-right:var(--kirby-spacing-xxs)}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:var(--kirby-spacing-xxs);margin-bottom: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:var(--kirby-font-weight-bold)}.month-and-year .month{margin-right:var(--kirby-spacing-xxs)}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 var(--kirby-spacing-xxs);text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:calc(var(--kirby-spacing-xl) * .5);min-width:var(--kirby-spacing-xl);min-height:var(--kirby-spacing-xl);width:var(--kirby-spacing-xl);height:var(--kirby-spacing-xl);margin:var(--kirby-spacing-xxxs) 0;font-size:var(--kirby-font-size-n)}.day:focus{z-index:var(--kirby-z-index-default)}button[aria-disabled=true]{color:#b4b4b4}.day.selectable:not(.current-month,.selected){color:var(--kirby-text-color-semi-dark)}.day.today{border:1px solid var(--kirby-semi-dark)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}\n"], dependencies: [{ kind: "component", type: DropdownComponent, selector: "kirby-dropdown", inputs: ["items", "selectedIndex", "focusedIndex", "itemTextProperty", "placeholder", "popout", "attentionLevel", "expand", "disabled", "hasError", "size", "tabindex", "usePopover"], outputs: ["hasErrorChange", "change"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CalendarComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [DropdownComponent, ButtonComponent, IconComponent], 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      @if (!_hasYearNavigator) {\n        <span class=\"year\">{{ activeYear }}</span>\n      }\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  @if (_hasYearNavigator) {\n    <kirby-dropdown\n      [selectedIndex]=\"navigatedYear\"\n      [items]=\"navigableYears\"\n      [attr.aria-label]=\"translations.get('selectYear')\"\n      popout=\"left\"\n      (change)=\"_changeYear($event)\"\n    ></kirby-dropdown>\n  }\n</div>\n\n<table [attr.aria-labelledby]=\"_tableMonthId\" role=\"grid\">\n  <thead>\n    <tr>\n      @for (weekDay of _weekDays; track weekDay.fullName) {\n        <th scope=\"col\">\n          <span aria-hidden=\"true\">{{ weekDay.firstLetterCapitalized }}</span>\n          <span class=\"kirby-visually-hidden\">{{ weekDay.fullName }}</span>\n        </th>\n      }\n    </tr>\n  </thead>\n\n  <tbody>\n    @for (week of _month; track $index) {\n      <tr>\n        @for (day of week; track day.date + '-' + day.monthIndex + '-' + day.year) {\n          <td [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        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: [":host{font-size:var(--kirby-font-size-n)}table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:var(--kirby-spacing-xxs)}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:var(--kirby-spacing-xxs)}th:last-child,td:last-child{padding-right:var(--kirby-spacing-xxs)}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:var(--kirby-spacing-xxs);margin-bottom: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:var(--kirby-font-weight-bold)}.month-and-year .month{margin-right:var(--kirby-spacing-xxs)}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 var(--kirby-spacing-xxs);text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:calc(var(--kirby-spacing-xl) * .5);min-width:var(--kirby-spacing-xl);min-height:var(--kirby-spacing-xl);width:var(--kirby-spacing-xl);height:var(--kirby-spacing-xl);margin:var(--kirby-spacing-xxxs) 0;font-size:var(--kirby-font-size-n)}.day:focus{z-index:var(--kirby-z-index-default)}button[aria-disabled=true]{color:#b4b4b4}.day.selectable:not(.current-month,.selected){color:var(--kirby-text-color-semi-dark)}.day.today{border:1px solid var(--kirby-semi-dark)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
-                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.TranslationService }], propDecorators: { dateChange: [{
-                type: Output
-            }], dateSelect: [{
-                type: Output
-            }], yearSelect: [{
-                type: Output
-            }], previousMonthClicked: [{
-                type: Output
-            }], nextMonthClicked: [{
-                type: Output
-            }], timezone: [{
-                type: Input
-            }], disableWeekends: [{
-                type: Input
-            }], disablePastDates: [{
-                type: Input
-            }], disableFutureDates: [{
-                type: Input
-            }], alwaysEnableToday: [{
-                type: Input
-            }], locales: [{
-                type: Input
-            }], customLocales: [{
-                type: Input
-            }], usePopover: [{
-                type: Input
-            }], yearNavigatorOptions: [{
-                type: Input
-            }], selectedDate: [{
-                type: Input
-            }], disabledDates: [{
-                type: Input
-            }], enabledDates: [{
-                type: Input
-            }], todayDate: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], _hasYearNavigator: [{
-                type: HostBinding,
-                args: ['class.has-year-navigator']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+	}
+	get selectedDate() {
+		return this._selectedDate;
+	}
+	set selectedDate(valueLocalOrUTC) {
+		const value = this.normalizeDate(valueLocalOrUTC);
+		if (valueLocalOrUTC) this.setActiveMonth(value);
+		if (this.hasDateChanged(value, this._selectedDate)) {
+			this.onSelectedDateChange(value);
+			this.focusDate(value);
+			this._selectedDate = value;
+		}
+	}
+	get disabledDates() {
+		return this._disabledDates;
+	}
+	set disabledDates(value) {
+		this._disabledDates = (value || []).map((date) => this.normalizeDate(date));
+	}
+	get enabledDates() {
+		return this._enabledDates;
+	}
+	set enabledDates(value) {
+		this._enabledDates = (value || []).map((date) => this.normalizeDate(date));
+	}
+	get todayDate() {
+		return this._todayDate;
+	}
+	set todayDate(value) {
+		this._todayDate = this.normalizeDate(value);
+	}
+	get minDate() {
+		return this._minDate;
+	}
+	set minDate(value) {
+		if (value && this.activeMonth && isBefore(this.activeMonth, value)) this.setActiveMonth(value);
+		this._minDate = this.normalizeDate(value);
+	}
+	get maxDate() {
+		return this._maxDate;
+	}
+	set maxDate(value) {
+		if (value && this.activeMonth && isAfter(this.activeMonth, value)) this.setActiveMonth(value);
+		this._maxDate = this.normalizeDate(value);
+	}
+	get activeMonthName() {
+		return capitalizeFirstLetter(this.formatWithLocale(this.activeMonth, "MMMM"));
+	}
+	get activeYear() {
+		return this.formatWithLocale(this.activeMonth, "yyyy");
+	}
+	get navigableYears() {
+		const dateOfFirstNavigableYear = this.minDate || this.getDateFromNavigableYear(this.yearNavigatorOptions.from);
+		const dateOfLastNavigableYear = this.maxDate || this.getDateFromNavigableYear(this.yearNavigatorOptions.to);
+		return this.getYearsBetweenDates(dateOfFirstNavigableYear, dateOfLastNavigableYear);
+	}
+	get navigatedYear() {
+		return this.navigableYears.indexOf(this.activeYear);
+	}
+	get _hasYearNavigator() {
+		return !!this.yearNavigatorOptions;
+	}
+	getTodayDate() {
+		return startOfDay(this.todayDate ?? /* @__PURE__ */ 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();
+		this.previousMonthClicked = new EventEmitter();
+		this.nextMonthClicked = new EventEmitter();
+		this.timezone = "local";
+		this.disableWeekends = false;
+		this.disablePastDates = false;
+		this.disableFutureDates = false;
+		this.alwaysEnableToday = false;
+		this.customLocales = {};
+		this._tableMonthId = UniqueIdGenerator.scopedTo("kirby-calendar-month").next();
+		this._disabledDates = [];
+		this._enabledDates = [];
+		this.includedLocales = {
+			da,
+			de,
+			enGB,
+			enUS
+		};
+		this.locale = this.mapLocale(locale);
+		this.timeZoneName = Intl.DateTimeFormat().resolvedOptions().timeZone;
+	}
+	formatWithLocale(date, formatString) {
+		return format(date, formatString, { locale: this.locale });
+	}
+	mapLocale(locale) {
+		if (locale === "en") locale = "enGB";
+		locale = locale.replace("-", "");
+		return {
+			...this.includedLocales,
+			...this.locales,
+			...this.customLocales
+		}[locale] || this.includedLocales.enGB;
+	}
+	formatDateLabel() {
+		const localeDateFormats = {
+			da: "d. MMMM",
+			de: "d. MMMM",
+			"en-GB": "d MMMM",
+			"en-US": "MMMM d"
+		};
+		const defaultDateFormat = localeDateFormats["en-US"];
+		return localeDateFormats[this.locale.code] || defaultDateFormat;
+	}
+	ngOnInit() {
+		this.focussedDate = this.getTodayDate();
+		this._weekDays = this.getWeekDays();
+		this.setActiveMonth(this.selectedDate);
+	}
+	ngOnChanges(changes) {
+		if (!this.activeMonth) return;
+		if (changes.disableWeekends || changes.disablePastDates || changes.disableFutureDates || changes.disabledDates || changes.enabledDates || changes.minDate || changes.maxDate || changes.todayDate || changes.timezone) this.refreshActiveMonth();
+	}
+	setActiveMonth(date = /* @__PURE__ */ new Date()) {
+		if (!this.activeMonth || !isSameMonth(this.activeMonth, date)) {
+			this.activeMonth = startOfMonth(date);
+			this.refreshActiveMonth();
+		}
+	}
+	normalizeDate(dateLocalOrUTC) {
+		if (!dateLocalOrUTC) return;
+		if (startOfDay(dateLocalOrUTC).getTime() === dateLocalOrUTC.getTime()) return dateLocalOrUTC;
+		if (startOfDay(toZonedTime(dateLocalOrUTC, this.timeZoneName)).getTime() === toZonedTime(dateLocalOrUTC, this.timeZoneName).getTime()) return toZonedTime(dateLocalOrUTC, this.timeZoneName);
+		return startOfDay(dateLocalOrUTC);
+	}
+	getWeekDays() {
+		const now = /* @__PURE__ */ new Date();
+		const week = eachDayOfInterval({
+			start: startOfWeek(now, { locale: this.locale }),
+			end: endOfWeek(now, { locale: this.locale })
+		});
+		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) return false;
+		if (newDate instanceof Date && !previousDate) return true;
+		return !isSameDay(newDate, previousDate);
+	}
+	isDisabledDate(date) {
+		return this.disabledDates.some((disabledDate) => isSameDay(disabledDate, date));
+	}
+	isEnabledDate(date) {
+		return this._enabledDates.length === 0 || this.enabledDates.some((enabledDate) => isSameDay(enabledDate, date));
+	}
+	refreshActiveMonth() {
+		if (!this.activeMonth) return;
+		const monthStart = startOfMonth(this.activeMonth);
+		const startOfFirstWeek = startOfWeek(monthStart, { locale: this.locale });
+		const daysArray = Array.from(Array(42).keys());
+		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 (calendarDay.isSelected) this.selectedDay = calendarDay;
+			if (calendarDay.isFocussed) this.focussedDay = calendarDay;
+			return calendarDay;
+		});
+		this._month = this.chunk(calendarDays, 7);
+	}
+	getCalendarDayMetadata(date, today, monthStart) {
+		return {
+			isToday: isSameDay(today, date),
+			isPast: isBefore(date, today),
+			isFuture: isAfter(date, today),
+			isWeekend: isWeekend(date),
+			isCurrentMonth: isSameMonth(date, monthStart),
+			isSelectable: this.isSelectable(date, today),
+			isFocusable: this.isWithinAllowedRange(date, today),
+			isSelected: isSameDay(this.selectedDate, date),
+			isFocussed: isSameDay(this.focussedDate, date)
+		};
+	}
+	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 = [];
+		while (array.length) results.push(array.splice(0, size));
+		return results;
+	}
+	onSelectedDateChange(newDate) {
+		if (this.selectedDay) this.selectedDay.isSelected = false;
+		const newDay = this.getDay(newDate);
+		if (newDay) {
+			newDay.isSelected = true;
+			this.selectedDay = newDay;
+		}
+	}
+	_onDateSelected(newDay) {
+		if (!newDay.isSelectable) return;
+		let newDate = new Date(newDay.year, newDay.monthIndex, newDay.date);
+		if (this.timezone === "UTC") 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.dateChange.emit(dateToEmit);
+		}
+		this.dateSelect.emit(dateToEmit);
+	}
+	_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) : this.previousMonthClicked.emit(this.activeMonth);
+	}
+	_changeYear(year) {
+		const yearNumeric = Number(year);
+		this.changeActiveView(yearNumeric - getYear(this.activeMonth), TimeUnit.years);
+		this.yearSelect.emit(yearNumeric);
+	}
+	changeActiveView(index, unit) {
+		if (index === 0) return;
+		this.activeMonth = add(this.activeMonth, { [unit]: index });
+		this.focussedDate = add(this.focussedDate, { [unit]: index });
+		this.refreshActiveMonth();
+	}
+	get _canNavigateBack() {
+		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 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;
+	}
+	getDay(date) {
+		let foundDay = null;
+		if (date) for (const week of this._month) {
+			foundDay = week.find((day) => {
+				return day.isCurrentMonth && day.date === date.getDate();
+			});
+			if (foundDay) break;
+		}
+		return foundDay;
+	}
+	subtractTimezoneOffset(date) {
+		const timezoneOffsetInMs = date.getTimezoneOffset() * 60 * 1e3;
+		return new Date(date.getTime() - timezoneOffsetInMs);
+	}
+	getDateFromNavigableYear(navigableYear) {
+		if (navigableYear instanceof Date) return navigableYear;
+		const today = this.todayDate || /* @__PURE__ */ new Date();
+		return new Date(today.getFullYear() + navigableYear, 0, 1);
+	}
+	getYearsBetweenDates(startDate, endDate) {
+		const [startYear, endYear] = [startDate.getFullYear(), endDate.getFullYear()].sort();
+		const numberOfYears = endYear - startYear;
+		return Array.from({ length: numberOfYears + 1 }, (_, i) => (startYear + i).toString());
+	}
+	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;
+		newDate = this.normalizeDate(newDate);
+		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();
+		this.elementRef.nativeElement.querySelector(".focussed").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);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: CalendarComponent,
+			deps: [
+				{ token: LOCALE_ID },
+				{ token: i0.ElementRef },
+				{ token: i0.ChangeDetectorRef },
+				{ token: i1.TranslationService }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			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      @if (!_hasYearNavigator) {\n        <span class=\"year\">{{ activeYear }}</span>\n      }\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  @if (_hasYearNavigator) {\n    <kirby-dropdown\n      [selectedIndex]=\"navigatedYear\"\n      [items]=\"navigableYears\"\n      [attr.aria-label]=\"translations.get('selectYear')\"\n      popout=\"left\"\n      (change)=\"_changeYear($event)\"\n    ></kirby-dropdown>\n  }\n</div>\n\n<table [attr.aria-labelledby]=\"_tableMonthId\" role=\"grid\">\n  <thead>\n    <tr>\n      @for (weekDay of _weekDays; track weekDay.fullName) {\n        <th scope=\"col\">\n          <span aria-hidden=\"true\">{{ weekDay.firstLetterCapitalized }}</span>\n          <span class=\"kirby-visually-hidden\">{{ weekDay.fullName }}</span>\n        </th>\n      }\n    </tr>\n  </thead>\n\n  <tbody>\n    @for (week of _month; track $index) {\n      <tr>\n        @for (day of week; track day.date + '-' + day.monthIndex + '-' + day.year) {\n          <td [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]=\"day.isSelected ? false : true\"\n              [attentionLevel]=\"day.isSelected ? '1' : null\"\n              [disabled]=\"day.isFocusable ? null : true\"\n              [tabIndex]=\"day.isFocussed ? 0 : -1\"\n            >\n              {{ day.date }}\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n",
+			styles: [":host{font-size:var(--kirby-font-size-n);color:var(--kirby-color-content-base)}table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:var(--kirby-spacing-xxs)}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:var(--kirby-spacing-xxs)}th:last-child,td:last-child{padding-right:var(--kirby-spacing-xxs)}th{height:50px;border-bottom:1px solid var(--kirby-color-border-base-quiet)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:var(--kirby-spacing-xxs);margin-bottom: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:var(--kirby-font-weight-bold)}.month-and-year .month{margin-right:var(--kirby-spacing-xxs)}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 var(--kirby-spacing-xxs);text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:calc(var(--kirby-spacing-xl) * .5);min-width:var(--kirby-spacing-xl);min-height:var(--kirby-spacing-xl);width:var(--kirby-spacing-xl);height:var(--kirby-spacing-xl);margin:var(--kirby-spacing-xxxs) 0;font-size:var(--kirby-font-size-n);padding-inline:0}.day:focus{z-index:var(--kirby-z-index-default)}.day.selectable:not(.current-month,.selected){color:var(--kirby-color-content-base-quiet)}.day.today:not(.selected,:focus-visible){border:1px solid var(--kirby-color-border-base)}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: DropdownComponent,
+					selector: "kirby-dropdown",
+					inputs: [
+						"items",
+						"selectedIndex",
+						"focusedIndex",
+						"itemTextProperty",
+						"placeholder",
+						"popout",
+						"attentionLevel",
+						"expand",
+						"disabled",
+						"hasError",
+						"size",
+						"tabindex",
+						"usePopover"
+					],
+					outputs: ["hasErrorChange", "change"]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "button[kirby-button],Button[kirby-button],a[kirby-button]",
+					inputs: [
+						"attentionLevel",
+						"noDecoration",
+						"themeColor",
+						"expand",
+						"isFloating",
+						"size",
+						"showIconOnly"
+					]
+				},
+				{
+					kind: "component",
+					type: IconComponent,
+					selector: "kirby-icon",
+					inputs: ["size", "name"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: CalendarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			imports: [
+				DropdownComponent,
+				ButtonComponent,
+				IconComponent
+			],
+			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      @if (!_hasYearNavigator) {\n        <span class=\"year\">{{ activeYear }}</span>\n      }\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  @if (_hasYearNavigator) {\n    <kirby-dropdown\n      [selectedIndex]=\"navigatedYear\"\n      [items]=\"navigableYears\"\n      [attr.aria-label]=\"translations.get('selectYear')\"\n      popout=\"left\"\n      (change)=\"_changeYear($event)\"\n    ></kirby-dropdown>\n  }\n</div>\n\n<table [attr.aria-labelledby]=\"_tableMonthId\" role=\"grid\">\n  <thead>\n    <tr>\n      @for (weekDay of _weekDays; track weekDay.fullName) {\n        <th scope=\"col\">\n          <span aria-hidden=\"true\">{{ weekDay.firstLetterCapitalized }}</span>\n          <span class=\"kirby-visually-hidden\">{{ weekDay.fullName }}</span>\n        </th>\n      }\n    </tr>\n  </thead>\n\n  <tbody>\n    @for (week of _month; track $index) {\n      <tr>\n        @for (day of week; track day.date + '-' + day.monthIndex + '-' + day.year) {\n          <td [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]=\"day.isSelected ? false : true\"\n              [attentionLevel]=\"day.isSelected ? '1' : null\"\n              [disabled]=\"day.isFocusable ? null : true\"\n              [tabIndex]=\"day.isFocussed ? 0 : -1\"\n            >\n              {{ day.date }}\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n",
+			styles: [":host{font-size:var(--kirby-font-size-n);color:var(--kirby-color-content-base)}table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:var(--kirby-spacing-xxs)}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:var(--kirby-spacing-xxs)}th:last-child,td:last-child{padding-right:var(--kirby-spacing-xxs)}th{height:50px;border-bottom:1px solid var(--kirby-color-border-base-quiet)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:var(--kirby-spacing-xxs);margin-bottom: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:var(--kirby-font-weight-bold)}.month-and-year .month{margin-right:var(--kirby-spacing-xxs)}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 var(--kirby-spacing-xxs);text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:calc(var(--kirby-spacing-xl) * .5);min-width:var(--kirby-spacing-xl);min-height:var(--kirby-spacing-xl);width:var(--kirby-spacing-xl);height:var(--kirby-spacing-xl);margin:var(--kirby-spacing-xxxs) 0;font-size:var(--kirby-font-size-n);padding-inline:0}.day:focus{z-index:var(--kirby-z-index-default)}.day.selectable:not(.current-month,.selected){color:var(--kirby-color-content-base-quiet)}.day.today:not(.selected,:focus-visible){border:1px solid var(--kirby-color-border-base)}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{
+			type: void 0,
+			decorators: [{
+				type: Inject,
+				args: [LOCALE_ID]
+			}]
+		},
+		{ type: i0.ElementRef },
+		{ type: i0.ChangeDetectorRef },
+		{ type: i1.TranslationService }
+	],
+	propDecorators: {
+		dateChange: [{ type: Output }],
+		dateSelect: [{ type: Output }],
+		yearSelect: [{ type: Output }],
+		previousMonthClicked: [{ type: Output }],
+		nextMonthClicked: [{ type: Output }],
+		timezone: [{ type: Input }],
+		disableWeekends: [{ type: Input }],
+		disablePastDates: [{ type: Input }],
+		disableFutureDates: [{ type: Input }],
+		alwaysEnableToday: [{ type: Input }],
+		locales: [{ type: Input }],
+		customLocales: [{ type: Input }],
+		usePopover: [{ type: Input }],
+		yearNavigatorOptions: [{ type: Input }],
+		selectedDate: [{ type: Input }],
+		disabledDates: [{ type: Input }],
+		enabledDates: [{ type: Input }],
+		todayDate: [{ type: Input }],
+		minDate: [{ type: Input }],
+		maxDate: [{ type: Input }],
+		_hasYearNavigator: [{
+			type: HostBinding,
+			args: ["class.has-year-navigator"]
+		}]
+	}
+});
 export { CalendarComponent };
-//# sourceMappingURL=kirbydesign-designsystem-calendar.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-calendar.mjs.map