@ngneers/controls 0.0.1-next.0

package/fesm2022/ngneers-controls-calendar.mjs

@@ -0,0 +1,801 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { viewChild, contentChild, input, computed, Directive, output, inject, viewChildren, Component, booleanAttribute, linkedSignal, signal, effect } from '@angular/core';
+import { templateTypesFn, Platform, NgnTemplate } from '@ngneers/controls/api/ng';
+import { ValueControlBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { I18n } from '@ngneers/controls/i18n';
+import { NgnIcon } from '@ngneers/controls/icon';
+import { NgnMaskInput, getDateOrTimeMask } from '@ngneers/controls/mask-input';
+import { NgnPopover } from '@ngneers/controls/popover';
+import { throwExp, NgnError } from '@ngneers/controls/utils';
+import { calendarControlTemplate } from '@ngneers/controls-themes/templates/calendar';
+import { NgnButton } from '@ngneers/controls/button';
+
+class CalendarTemplates extends ValueControlBase {
+    // Day template
+    _defaultDayTemplate = viewChild.required('defaultDayTemplate');
+    _userDayTemplate = contentChild('day', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_userDayTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Set a custom template for a day.
+     * Can also be set using an `<ng-template>` element with `#day` template reference variable.
+     */
+    templateDay = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateDay" }] : /* istanbul ignore next */ []));
+    dayTemplate = computed(() => this._userDayTemplate() ?? this.templateDay() ?? this._defaultDayTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dayTemplate" }] : /* istanbul ignore next */ []));
+    // Week day template
+    _defaultWeekDayTemplate = viewChild.required('defaultWeekDayTemplate');
+    _userWeekDayTemplate = contentChild('weekDay', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_userWeekDayTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Set a custom template for a week day.
+     * Can also be set using an `<ng-template>` element with `#weekDay` template reference variable.
+     */
+    templateWeekDay = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateWeekDay" }] : /* istanbul ignore next */ []));
+    weekDayTemplate = computed(() => this._userWeekDayTemplate() ?? this.templateWeekDay() ?? this._defaultWeekDayTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekDayTemplate" }] : /* istanbul ignore next */ []));
+    // Month template
+    _defaultMonthTemplate = viewChild.required('defaultMonthTemplate');
+    _userMonthTemplate = contentChild('month', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_userMonthTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Set a custom template for a month.
+     * Can also be set using an `<ng-template>` element with `#month` template reference variable.
+     */
+    templateMonth = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateMonth" }] : /* istanbul ignore next */ []));
+    monthTemplate = computed(() => this._userMonthTemplate() ?? this.templateMonth() ?? this._defaultMonthTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthTemplate" }] : /* istanbul ignore next */ []));
+    // Time template
+    _defaultTimeTemplate = viewChild.required('defaultTimeTemplate');
+    _userTimeTemplate = contentChild('time', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_userTimeTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Set a custom template for the time input.
+     * Can also be set using an `<ng-template>` element with `#time` template reference variable.
+     */
+    templateTime = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateTime" }] : /* istanbul ignore next */ []));
+    timeTemplate = computed(() => this._userTimeTemplate() ?? this.templateTime() ?? this._defaultTimeTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeTemplate" }] : /* istanbul ignore next */ []));
+    // Year template
+    _defaultYearTemplate = viewChild.required('defaultYearTemplate');
+    _userYearTemplate = contentChild('year', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_userYearTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Set a custom template for the year input.
+     * Can also be set using an `<ng-template>` element with `#year` template reference variable.
+     */
+    templateYear = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateYear" }] : /* istanbul ignore next */ []));
+    yearTemplate = computed(() => this._userYearTemplate() ?? this.templateYear() ?? this._defaultYearTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yearTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Types for the calendar templates.
+     */
+    templateTypes = templateTypesFn();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CalendarTemplates, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.5", type: CalendarTemplates, isStandalone: true, inputs: { templateDay: { classPropertyName: "templateDay", publicName: "templateDay", isSignal: true, isRequired: false, transformFunction: null }, templateWeekDay: { classPropertyName: "templateWeekDay", publicName: "templateWeekDay", isSignal: true, isRequired: false, transformFunction: null }, templateMonth: { classPropertyName: "templateMonth", publicName: "templateMonth", isSignal: true, isRequired: false, transformFunction: null }, templateTime: { classPropertyName: "templateTime", publicName: "templateTime", isSignal: true, isRequired: false, transformFunction: null }, templateYear: { classPropertyName: "templateYear", publicName: "templateYear", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_userDayTemplate", first: true, predicate: ["day"], descendants: true, isSignal: true }, { propertyName: "_userWeekDayTemplate", first: true, predicate: ["weekDay"], descendants: true, isSignal: true }, { propertyName: "_userMonthTemplate", first: true, predicate: ["month"], descendants: true, isSignal: true }, { propertyName: "_userTimeTemplate", first: true, predicate: ["time"], descendants: true, isSignal: true }, { propertyName: "_userYearTemplate", first: true, predicate: ["year"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_defaultDayTemplate", first: true, predicate: ["defaultDayTemplate"], descendants: true, isSignal: true }, { propertyName: "_defaultWeekDayTemplate", first: true, predicate: ["defaultWeekDayTemplate"], descendants: true, isSignal: true }, { propertyName: "_defaultMonthTemplate", first: true, predicate: ["defaultMonthTemplate"], descendants: true, isSignal: true }, { propertyName: "_defaultTimeTemplate", first: true, predicate: ["defaultTimeTemplate"], descendants: true, isSignal: true }, { propertyName: "_defaultYearTemplate", first: true, predicate: ["defaultYearTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CalendarTemplates, decorators: [{
+            type: Directive
+        }], propDecorators: { _defaultDayTemplate: [{ type: i0.ViewChild, args: ['defaultDayTemplate', { isSignal: true }] }], _userDayTemplate: [{ type: i0.ContentChild, args: ['day', { isSignal: true }] }], templateDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateDay", required: false }] }], _defaultWeekDayTemplate: [{ type: i0.ViewChild, args: ['defaultWeekDayTemplate', { isSignal: true }] }], _userWeekDayTemplate: [{ type: i0.ContentChild, args: ['weekDay', { isSignal: true }] }], templateWeekDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateWeekDay", required: false }] }], _defaultMonthTemplate: [{ type: i0.ViewChild, args: ['defaultMonthTemplate', { isSignal: true }] }], _userMonthTemplate: [{ type: i0.ContentChild, args: ['month', { isSignal: true }] }], templateMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateMonth", required: false }] }], _defaultTimeTemplate: [{ type: i0.ViewChild, args: ['defaultTimeTemplate', { isSignal: true }] }], _userTimeTemplate: [{ type: i0.ContentChild, args: ['time', { isSignal: true }] }], templateTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateTime", required: false }] }], _defaultYearTemplate: [{ type: i0.ViewChild, args: ['defaultYearTemplate', { isSignal: true }] }], _userYearTemplate: [{ type: i0.ContentChild, args: ['year', { isSignal: true }] }], templateYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateYear", required: false }] }] } });
+
+const MONTHS = [
+    'january',
+    'february',
+    'march',
+    'april',
+    'may',
+    'june',
+    'july',
+    'august',
+    'september',
+    'october',
+    'november',
+    'december',
+];
+const WEEK_DAYS = [
+    'sunday',
+    'monday',
+    'tuesday',
+    'wednesday',
+    'thursday',
+    'friday',
+    'saturday',
+];
+
+// Configuration: Number of weeks to show before and after the current month
+const WEEKS_BEFORE = 1;
+const WEEKS_AFTER = 1;
+class CalendarDays {
+    component = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "component" }] : /* istanbul ignore next */ []));
+    theme = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    year = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "year" }] : /* istanbul ignore next */ []));
+    month = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "month" }] : /* istanbul ignore next */ []));
+    currentValue = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    dayTemplate = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dayTemplate" }] : /* istanbul ignore next */ []));
+    weekDayTemplate = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekDayTemplate" }] : /* istanbul ignore next */ []));
+    timeTemplate = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeTemplate" }] : /* istanbul ignore next */ []));
+    yearTemplate = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yearTemplate" }] : /* istanbul ignore next */ []));
+    monthTemplate = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthTemplate" }] : /* istanbul ignore next */ []));
+    showTime = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTime" }] : /* istanbul ignore next */ []));
+    showSeconds = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
+    previousMonth = output();
+    nextMonth = output();
+    daySelected = output();
+    yearSelected = output();
+    monthSelected = output();
+    timeChanged = output();
+    MONTHS = MONTHS;
+    i18n = inject(I18n).translations;
+    todaysDay = new Date().getDate();
+    todaysMonth = new Date().getMonth();
+    todaysYear = new Date().getFullYear();
+    doTimeChange = (t) => this.timeChanged.emit(t);
+    doYearChange = (t) => this.yearSelected.emit(t);
+    doMonthChange = (t) => this.monthSelected.emit(t);
+    weekDaysSorted = computed(() => WEEK_DAYS.slice(this._firstDayOfWeekIndex())
+        .concat(WEEK_DAYS.slice(0, this._firstDayOfWeekIndex()))
+        .map(day => ({
+        weekDay: day,
+        translation: this.i18n[`calendar_weekdaysShort_${day}`],
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekDaysSorted" }] : /* istanbul ignore next */ []));
+    _dayButton = viewChildren('dayButton', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dayButton" }] : /* istanbul ignore next */ []));
+    _firstDayOfWeekIndex = computed(() => WEEK_DAYS.indexOf(this.firstDayOfWeek()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_firstDayOfWeekIndex" }] : /* istanbul ignore next */ []));
+    _daysInMonth = computed(() => new Date(this.year(), this.month() + 1, 0).getDate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_daysInMonth" }] : /* istanbul ignore next */ []));
+    _daysInPreviousMonth = computed(() => new Date(this.year(), this.month(), 0).getDate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_daysInPreviousMonth" }] : /* istanbul ignore next */ []));
+    _firstDayOfMonth = computed(() => new Date(this.year(), this.month(), 1).getDay(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_firstDayOfMonth" }] : /* istanbul ignore next */ []));
+    monthModel = computed(() => {
+        const firstDayOfMonth = this._firstDayOfMonth();
+        const firstDayOfWeek = this._firstDayOfWeekIndex();
+        const daysInMonth = this._daysInMonth();
+        const daysInPreviousMonth = this._daysInPreviousMonth();
+        // Calculate starting point and total days needed
+        const firstDayOffset = (firstDayOfMonth - firstDayOfWeek + 7) % 7;
+        const daysFromPreviousMonth = firstDayOffset + WEEKS_BEFORE * 7;
+        const daysToNextMonth = (7 - ((daysFromPreviousMonth + daysInMonth) % 7)) % 7;
+        const totalDays = daysFromPreviousMonth + daysInMonth + daysToNextMonth + WEEKS_AFTER * 7;
+        const startDay = daysInPreviousMonth - daysFromPreviousMonth + 1;
+        // Build all days in one pass
+        const allDays = [];
+        let currentDate = startDay;
+        let currentMonth = -1; // -1 = previous, 0 = current, 1 = next
+        for (let i = 0; i < totalDays; i++) {
+            // Determine which month we're in
+            if (currentDate > daysInPreviousMonth && currentMonth === -1) {
+                currentDate = 1;
+                currentMonth = 0;
+            }
+            else if (currentDate > daysInMonth && currentMonth === 0) {
+                currentDate = 1;
+                currentMonth = 1;
+            }
+            allDays.push({
+                date: currentDate,
+                monthOffset: currentMonth,
+            });
+            currentDate++;
+        }
+        // Group into weeks
+        const weeks = [];
+        for (let i = 0; i < allDays.length; i += 7) {
+            weeks.push({
+                days: allDays.slice(i, i + 7),
+            });
+        }
+        return { weeks };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthModel" }] : /* istanbul ignore next */ []));
+    tabFocusDay = computed(() => {
+        const val = this.currentValue();
+        if (val && val.getMonth() === this.month() && val.getFullYear() === this.year()) {
+            return val.getDate();
+        }
+        return 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabFocusDay" }] : /* istanbul ignore next */ []));
+    /** Accessible name of the day grid — the visible month and year. */
+    gridLabel = computed(() => new Date(this.year(), this.month(), 1).toLocaleDateString(undefined, {
+        month: 'long',
+        year: 'numeric',
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridLabel" }] : /* istanbul ignore next */ []));
+    /** Full, localized date used as each day cell's accessible name (e.g. "Thursday, 15 January 2026"). */
+    dayLabel(day) {
+        return new Date(this.year(), this.month() + day.monthOffset, day.date).toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
+    }
+    /** Whether the given day cell holds the currently selected value. */
+    isSelected(day) {
+        const val = this.currentValue();
+        return (!!val &&
+            val.getDate() === day.date &&
+            val.getMonth() === this.month() + day.monthOffset &&
+            val.getFullYear() === this.year());
+    }
+    /** Whether the given day cell is today. */
+    isToday(day) {
+        return (this.todaysMonth === this.month() + day.monthOffset &&
+            this.todaysDay === day.date &&
+            this.todaysYear === this.year());
+    }
+    prev() {
+        this.previousMonth.emit();
+    }
+    next() {
+        this.nextMonth.emit();
+    }
+    selectYear(year) {
+        this.yearSelected.emit(year);
+    }
+    dayKeydown(event, day) {
+        if (['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
+            event.preventDefault();
+            const getCurrentMonthButtons = () => {
+                return this._dayButton()
+                    .map(ref => ref.nativeElement)
+                    .filter(x => !x.classList.contains(this.theme().class('day-other-month')));
+            };
+            const allDayButtons = getCurrentMonthButtons();
+            const index = allDayButtons.indexOf(day);
+            const daysInMonth = this._daysInMonth();
+            if (event.key === 'ArrowRight') {
+                if (index < daysInMonth - 1) {
+                    allDayButtons[index + 1]?.focus();
+                }
+                else {
+                    this.next();
+                    setTimeout(() => {
+                        getCurrentMonthButtons()[0]?.focus();
+                    });
+                }
+            }
+            else if (event.key === 'ArrowLeft') {
+                if (index > 0) {
+                    allDayButtons[index - 1]?.focus();
+                }
+                else {
+                    this.prev();
+                    setTimeout(() => {
+                        const buttons = getCurrentMonthButtons();
+                        buttons[buttons.length - 1]?.focus();
+                    });
+                }
+            }
+            else if (event.key === 'ArrowDown') {
+                if (index < daysInMonth - 7) {
+                    allDayButtons[index + 7]?.focus();
+                }
+                else {
+                    this.next();
+                    const nextIndex = (index + 7) % daysInMonth;
+                    setTimeout(() => {
+                        getCurrentMonthButtons()[nextIndex]?.focus();
+                    });
+                }
+            }
+            else if (event.key === 'ArrowUp') {
+                if (index >= 7) {
+                    allDayButtons[index - 7]?.focus();
+                }
+                else {
+                    this.prev();
+                    setTimeout(() => {
+                        const buttons = getCurrentMonthButtons();
+                        const targetIndex = Math.min(buttons.length - 7 + index, buttons.length - 1);
+                        buttons[targetIndex]?.focus();
+                    });
+                }
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CalendarDays, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CalendarDays, isStandalone: true, selector: "ngn-calendar-days", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: true, transformFunction: null }, year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: true, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null }, currentValue: { classPropertyName: "currentValue", publicName: "currentValue", isSignal: true, isRequired: true, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: true, transformFunction: null }, dayTemplate: { classPropertyName: "dayTemplate", publicName: "dayTemplate", isSignal: true, isRequired: true, transformFunction: null }, weekDayTemplate: { classPropertyName: "weekDayTemplate", publicName: "weekDayTemplate", isSignal: true, isRequired: true, transformFunction: null }, timeTemplate: { classPropertyName: "timeTemplate", publicName: "timeTemplate", isSignal: true, isRequired: true, transformFunction: null }, yearTemplate: { classPropertyName: "yearTemplate", publicName: "yearTemplate", isSignal: true, isRequired: true, transformFunction: null }, monthTemplate: { classPropertyName: "monthTemplate", publicName: "monthTemplate", isSignal: true, isRequired: true, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: true, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { previousMonth: "previousMonth", nextMonth: "nextMonth", daySelected: "daySelected", yearSelected: "yearSelected", monthSelected: "monthSelected", timeChanged: "timeChanged" }, viewQueries: [{ propertyName: "_dayButton", predicate: ["dayButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [ptInt]=\"component()\" [ptClass]=\"'details'\">\n  <div [ptInt]=\"component()\" [ptClass]=\"'header'\">\n    <div [ptInt]=\"component()\" [ptClass]=\"'navigation'\">\n      <button\n        ngnButton\n        [kind]=\"'icon'\"\n        [ptInt]=\"component()\"\n        [ptDep]=\"'previous'\"\n        [attr.aria-label]=\"i18n['calendar_previousMonth']()\"\n        (click)=\"prev()\"\n      >\n        <ngn-icon [defaultIcon]=\"'calendar-previous-month'\" />\n      </button>\n      <button\n        ngnButton\n        [kind]=\"'icon'\"\n        [ptInt]=\"component()\"\n        [ptDep]=\"'next'\"\n        [attr.aria-label]=\"i18n['calendar_nextMonth']()\"\n        (click)=\"next()\"\n      >\n        <ngn-icon [defaultIcon]=\"'calendar-next-month'\" />\n      </button>\n    </div>\n    <ng-container\n      *ngTemplateOutlet=\"\n        monthTemplate();\n        context: {\n          $implicit: {\n            month: MONTHS[month()],\n            change: doMonthChange,\n          },\n        }\n      \"\n    />\n\n    <ng-container\n      *ngTemplateOutlet=\"\n        yearTemplate();\n        context: {\n          $implicit: {\n            year: year(),\n            change: doYearChange,\n          },\n        }\n      \"\n    />\n  </div>\n  <div class=\"ngn-calendar-days\" role=\"grid\" [attr.aria-label]=\"gridLabel()\">\n    <div role=\"row\" style=\"display: contents\">\n      @for (weekDay of weekDaysSorted(); track weekDay) {\n        <span role=\"columnheader\" [ptInt]=\"component()\" [ptClass]=\"'week-day'\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              weekDayTemplate();\n              context: {\n                $implicit: {\n                  weekDay: weekDay.weekDay,\n                  translation: weekDay.translation(),\n                },\n              }\n            \"\n          />\n        </span>\n      }\n    </div>\n    @for (item of monthModel().weeks; track $index) {\n      <div role=\"row\" style=\"display: contents\">\n        @for (day of item.days; track $index) {\n          <div\n            role=\"gridcell\"\n            style=\"display: contents\"\n            [attr.aria-selected]=\"isSelected(day) ? 'true' : null\"\n          >\n            <button\n              #dayButton\n              [ptInt]=\"component()\"\n              [ptClass]=\"{\n                day: true,\n                'day-other-month': day.monthOffset !== 0,\n                'day-today': isToday(day),\n                'day-selected': isSelected(day),\n              }\"\n              [tabIndex]=\"!day.monthOffset && tabFocusDay() === day.date ? 0 : -1\"\n              [attr.aria-current]=\"isToday(day) ? 'date' : null\"\n              [attr.aria-label]=\"dayLabel(day)\"\n              type=\"button\"\n              (click)=\"\n                daySelected.emit({\n                  date: day.date,\n                  monthOffset: day.monthOffset,\n                })\n              \"\n              (keydown)=\"dayKeydown($event, dayButton)\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  dayTemplate();\n                  context: {\n                    $implicit: {\n                      date: day.date,\n                      fromOtherMonth: day.monthOffset !== 0,\n                      selected: isSelected(day),\n                      today: isToday(day),\n                    },\n                  }\n                \"\n              />\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n  @if (showTime()) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        timeTemplate();\n        context: {\n          $implicit: { time: currentValue(), showSeconds: showSeconds(), change: doTimeChange },\n        }\n      \"\n    />\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }, { kind: "directive", type: NgnButton, selector: "button[ngnButton], a[ngnButton]", inputs: ["ngnButtonInline"], exportAs: ["ngnButton"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CalendarDays, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-calendar-days', imports: [NgTemplateOutlet, NgnPt, NgnButton, NgnIcon], template: "<div [ptInt]=\"component()\" [ptClass]=\"'details'\">\n  <div [ptInt]=\"component()\" [ptClass]=\"'header'\">\n    <div [ptInt]=\"component()\" [ptClass]=\"'navigation'\">\n      <button\n        ngnButton\n        [kind]=\"'icon'\"\n        [ptInt]=\"component()\"\n        [ptDep]=\"'previous'\"\n        [attr.aria-label]=\"i18n['calendar_previousMonth']()\"\n        (click)=\"prev()\"\n      >\n        <ngn-icon [defaultIcon]=\"'calendar-previous-month'\" />\n      </button>\n      <button\n        ngnButton\n        [kind]=\"'icon'\"\n        [ptInt]=\"component()\"\n        [ptDep]=\"'next'\"\n        [attr.aria-label]=\"i18n['calendar_nextMonth']()\"\n        (click)=\"next()\"\n      >\n        <ngn-icon [defaultIcon]=\"'calendar-next-month'\" />\n      </button>\n    </div>\n    <ng-container\n      *ngTemplateOutlet=\"\n        monthTemplate();\n        context: {\n          $implicit: {\n            month: MONTHS[month()],\n            change: doMonthChange,\n          },\n        }\n      \"\n    />\n\n    <ng-container\n      *ngTemplateOutlet=\"\n        yearTemplate();\n        context: {\n          $implicit: {\n            year: year(),\n            change: doYearChange,\n          },\n        }\n      \"\n    />\n  </div>\n  <div class=\"ngn-calendar-days\" role=\"grid\" [attr.aria-label]=\"gridLabel()\">\n    <div role=\"row\" style=\"display: contents\">\n      @for (weekDay of weekDaysSorted(); track weekDay) {\n        <span role=\"columnheader\" [ptInt]=\"component()\" [ptClass]=\"'week-day'\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              weekDayTemplate();\n              context: {\n                $implicit: {\n                  weekDay: weekDay.weekDay,\n                  translation: weekDay.translation(),\n                },\n              }\n            \"\n          />\n        </span>\n      }\n    </div>\n    @for (item of monthModel().weeks; track $index) {\n      <div role=\"row\" style=\"display: contents\">\n        @for (day of item.days; track $index) {\n          <div\n            role=\"gridcell\"\n            style=\"display: contents\"\n            [attr.aria-selected]=\"isSelected(day) ? 'true' : null\"\n          >\n            <button\n              #dayButton\n              [ptInt]=\"component()\"\n              [ptClass]=\"{\n                day: true,\n                'day-other-month': day.monthOffset !== 0,\n                'day-today': isToday(day),\n                'day-selected': isSelected(day),\n              }\"\n              [tabIndex]=\"!day.monthOffset && tabFocusDay() === day.date ? 0 : -1\"\n              [attr.aria-current]=\"isToday(day) ? 'date' : null\"\n              [attr.aria-label]=\"dayLabel(day)\"\n              type=\"button\"\n              (click)=\"\n                daySelected.emit({\n                  date: day.date,\n                  monthOffset: day.monthOffset,\n                })\n              \"\n              (keydown)=\"dayKeydown($event, dayButton)\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  dayTemplate();\n                  context: {\n                    $implicit: {\n                      date: day.date,\n                      fromOtherMonth: day.monthOffset !== 0,\n                      selected: isSelected(day),\n                      today: isToday(day),\n                    },\n                  }\n                \"\n              />\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n  @if (showTime()) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        timeTemplate();\n        context: {\n          $implicit: { time: currentValue(), showSeconds: showSeconds(), change: doTimeChange },\n        }\n      \"\n    />\n  }\n</div>\n" }]
+        }], propDecorators: { component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: true }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: true }] }], year: [{ type: i0.Input, args: [{ isSignal: true, alias: "year", required: true }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: true }] }], currentValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentValue", required: true }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: true }] }], dayTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayTemplate", required: true }] }], weekDayTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekDayTemplate", required: true }] }], timeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeTemplate", required: true }] }], yearTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearTemplate", required: true }] }], monthTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthTemplate", required: true }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: true }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: true }] }], previousMonth: [{ type: i0.Output, args: ["previousMonth"] }], nextMonth: [{ type: i0.Output, args: ["nextMonth"] }], daySelected: [{ type: i0.Output, args: ["daySelected"] }], yearSelected: [{ type: i0.Output, args: ["yearSelected"] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }], timeChanged: [{ type: i0.Output, args: ["timeChanged"] }], _dayButton: [{ type: i0.ViewChildren, args: ['dayButton', { isSignal: true }] }] } });
+
+/**
+ * Formats a Date object into a string based on the provided format.
+ * @param value The Date object to format. If null, an empty string is returned.
+ * @param format The format string that specifies how the date should be formatted. Supported tokens include:
+ * Tokens follow the standard (Unicode/moment-style) convention — uppercase `M` is
+ * month, lowercase `m` is minute — matching `getDateOrTimeMask`:
+ * - 'dd': Day of the month, 2 digits with leading zeros (01 to 31)
+ * - 'd': Day of the month without leading zeros (1 to 31)
+ * - 'MM': Month, 2 digits with leading zeros (01 to 12)
+ * - 'M': Month without leading zeros (1 to 12)
+ * - 'yyyy': Year, 4 digits (e.g., 2024)
+ * - 'yy': Year, 2 digits (e.g., 24)
+ * - 'HH': Hours (24-hour), 2 digits with leading zeros (00 to 23)
+ * - 'H': Hours (24-hour) without leading zeros (0 to 23)
+ * - 'hh': Hours (12-hour), 2 digits with leading zeros (01 to 12)
+ * - 'h': Hours (12-hour) without leading zeros (1 to 12)
+ * - 'mm': Minutes, 2 digits with leading zeros (00 to 59)
+ * - 'm': Minutes without leading zeros (0 to 59)
+ * - 'ss': Seconds, 2 digits with leading zeros (00 to 59)
+ * - 's': Seconds without leading zeros (0 to 59)
+ * - 'a': AM/PM marker
+ * - 'SSS': Milliseconds, 3 digits with leading zeros (000 to 999)
+ * @returns The formatted date string.
+ */
+const DATE_TOKEN = /^(yyyy|yy|MM|M|dd|d|HH|H|hh|h|mm|m|ss|s|SSS|a)/;
+/** Maximum digit count per numeric token — bounds the capture so adjacent
+ * numeric tokens (separator-free formats like `MMddyyyy`) still parse. */
+const TOKEN_MAX_DIGITS = {
+    yyyy: 4,
+    yy: 2,
+    MM: 2,
+    M: 2,
+    dd: 2,
+    d: 2,
+    HH: 2,
+    H: 2,
+    hh: 2,
+    h: 2,
+    mm: 2,
+    m: 2,
+    ss: 2,
+    s: 2,
+    SSS: 3,
+};
+/**
+ * Parses a date string according to `format`, the inverse of {@link formatDate}.
+ *
+ * Unlike `new Date(string)` this is format-aware (so e.g. `dd.MM.yyyy` parses
+ * correctly) and, crucially, **clamps the day to the number of days in the
+ * resolved month/year** instead of rolling over: `31` in February becomes the
+ * 28th/29th rather than spilling into March. Returns `null` when the string does
+ * not match the format.
+ *
+ * Two-digit years (`yy`) are interpreted as 2000–2099. Numeric tokens are capped
+ * at their natural digit count so separator-free formats parse unambiguously.
+ */
+function parseDate(str, format) {
+    // Build a regex from the format, remembering the token captured at each group.
+    let pattern = '';
+    const tokens = [];
+    let i = 0;
+    while (i < format.length) {
+        const m = DATE_TOKEN.exec(format.slice(i));
+        if (m) {
+            const tok = m[0]; // the whole match is the token
+            tokens.push(tok);
+            pattern += tok === 'a' ? '(AM|PM)' : `(\\d{1,${TOKEN_MAX_DIGITS[tok]}})`;
+            i += tok.length;
+        }
+        else {
+            pattern += format.charAt(i).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            i++;
+        }
+    }
+    const match = new RegExp(`^${pattern}$`).exec(str);
+    if (!match)
+        return null;
+    const part = {};
+    tokens.forEach((tok, idx) => (part[tok] = match[idx + 1] ?? ''));
+    const num = (...keys) => {
+        for (const k of keys)
+            if (part[k] !== undefined)
+                return Number(part[k]);
+        return undefined;
+    };
+    const now = new Date();
+    const year = num('yyyy') ?? (part['yy'] !== undefined ? 2000 + Number(part['yy']) : now.getFullYear());
+    const month = num('MM', 'M') ?? 1; // 1-12
+    const dayRaw = num('dd', 'd') ?? 1;
+    let hours = num('HH', 'H') ?? 0;
+    const hour12 = num('hh', 'h');
+    if (hour12 !== undefined) {
+        if (hour12 < 1 || hour12 > 12)
+            return null;
+        const pm = part['a'] === 'PM';
+        hours = (hour12 % 12) + (pm ? 12 : 0);
+    }
+    const minutes = num('mm', 'm') ?? 0;
+    const seconds = num('ss', 's') ?? 0;
+    const ms = num('SSS') ?? 0;
+    // Reject out-of-range components rather than letting `new Date` silently
+    // normalize them (e.g. month 13 → next year, hour 25 → next day).
+    if (month < 1 ||
+        month > 12 ||
+        hours < 0 ||
+        hours > 23 ||
+        minutes < 0 ||
+        minutes > 59 ||
+        seconds < 0 ||
+        seconds > 59 ||
+        ms < 0 ||
+        ms > 999) {
+        return null;
+    }
+    // Clamp the day to the resolved month's length (handles leap years) so an
+    // out-of-range day never rolls over into the next month.
+    const daysInMonth = new Date(year, month, 0).getDate();
+    const day = Math.max(1, Math.min(dayRaw, daysInMonth));
+    const date = new Date(year, month - 1, day, hours, minutes, seconds, ms);
+    return isNaN(date.getTime()) ? null : date;
+}
+function formatDate(value, format) {
+    if (!value) {
+        return '';
+    }
+    const day = value.getDate();
+    const month = value.getMonth() + 1;
+    const year = value.getFullYear();
+    const hours = value.getHours();
+    const minutes = value.getMinutes();
+    const seconds = value.getSeconds();
+    const milliseconds = value.getMilliseconds();
+    const ampm = hours >= 12 ? 'PM' : 'AM';
+    const hour12 = hours % 12 || 12;
+    // Longest tokens first within each group; 'a' (AM/PM) last so the inserted
+    // letters are never re-matched by an earlier numeric replacement.
+    return format
+        .replace(/yyyy/g, String(year))
+        .replace(/yy/g, String(year).slice(-2))
+        .replace(/dd/g, String(day).padStart(2, '0'))
+        .replace(/d/g, String(day))
+        .replace(/MM/g, String(month).padStart(2, '0'))
+        .replace(/M/g, String(month))
+        .replace(/HH/g, String(hours).padStart(2, '0'))
+        .replace(/H/g, String(hours))
+        .replace(/hh/g, String(hour12).padStart(2, '0'))
+        .replace(/h/g, String(hour12))
+        .replace(/mm/g, String(minutes).padStart(2, '0'))
+        .replace(/m/g, String(minutes))
+        .replace(/ss/g, String(seconds).padStart(2, '0'))
+        .replace(/s/g, String(seconds))
+        .replace(/SSS/g, String(milliseconds).padStart(3, '0'))
+        .replace(/a/g, ampm);
+}
+
+function generateYearOptions() {
+    const MAX_ITEMS = 200;
+    const currentYear = new Date().getFullYear();
+    return Array.from({ length: MAX_ITEMS }, (_, i) => ({
+        label: (currentYear - MAX_ITEMS / 2 + i).toString(),
+        value: currentYear - MAX_ITEMS / 2 + i,
+    }));
+}
+/**
+ * @category control
+ */
+class NgnCalendar extends CalendarTemplates {
+    /**
+     * Set the first day of the week.
+     * @default 'monday'
+     */
+    firstDayOfWeek = input('monday', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to show the time input.
+     * @default false
+     */
+    showTime = input(false, { ...(ngDevMode ? { debugName: "showTime" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to show seconds in the time input.
+     * @default false
+     */
+    showSeconds = input(false, { ...(ngDevMode ? { debugName: "showSeconds" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to show the calendar inline instead of with a input field & popup.
+     * @default false
+     */
+    inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The format of the date displayed in the input field.
+     * @default 'MM/dd/yyyy'
+     */
+    format = input('MM/dd/yyyy', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    _popover = viewChild(NgnPopover, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_popover" }] : /* istanbul ignore next */ []));
+    _mask = viewChild(NgnMaskInput, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_mask" }] : /* istanbul ignore next */ []));
+    _platform = inject(Platform);
+    i18n = inject(I18n).translations;
+    isFieldControl = true;
+    theme = this.injectThemeTemplate(calendarControlTemplate);
+    get anchorElement() {
+        return (this.element.nativeElement.closest('ngn-input-field') ??
+            this.element.nativeElement);
+    }
+    year = linkedSignal(() => this.value()?.getFullYear() || new Date().getFullYear(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "year" }] : /* istanbul ignore next */ []));
+    month = linkedSignal(() => this.value()?.getMonth() ?? new Date().getMonth(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "month" }] : /* istanbul ignore next */ []));
+    yearOptions = generateYearOptions();
+    monthOptions = computed(() => {
+        const months = Array.from({ length: 12 }, (_, i) => ({
+            label: this.i18n[`calendar_months_${MONTHS[i] ?? throwExp('calendar', 'invalid month index')}`],
+            value: MONTHS[i],
+            testId: `calendar-month-${MONTHS[i]}`,
+        }));
+        return months;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthOptions" }] : /* istanbul ignore next */ []));
+    valueStr = computed(() => {
+        const value = this.value();
+        const format = this.format();
+        if (!value) {
+            return null;
+        }
+        return formatDate(value, format);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueStr" }] : /* istanbul ignore next */ []));
+    maskCfg = computed(() => {
+        const format = this.format();
+        const mask = getDateOrTimeMask(format);
+        const value = this.value();
+        if (!value) {
+            return mask;
+        }
+        // Narrow the day field's max to the current month's length (leap-aware) so
+        // the mask wraps/limits the day correctly within the month (e.g. Feb caps at
+        // 28/29, stepping up from 28 wraps to 1). The mask keeps the typed value
+        // across this change because only min/max — not the structure — differs.
+        const daysInMonth = new Date(value.getFullYear(), value.getMonth() + 1, 0).getDate();
+        return mask.map(seg => typeof seg !== 'string' && seg.kind === 'number' && seg.segment === 'day'
+            ? { ...seg, max: daysInMonth }
+            : seg);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maskCfg" }] : /* istanbul ignore next */ []));
+    previousMonth = () => {
+        const currentMonth = this.month();
+        const currentYear = this.year();
+        if (currentMonth === 0) {
+            this.year.set(currentYear - 1);
+            this.month.set(11); // December
+        }
+        else {
+            this.month.set(currentMonth - 1);
+        }
+    };
+    nextMonth = () => {
+        const currentMonth = this.month();
+        const currentYear = this.year();
+        if (currentMonth === 11) {
+            this.year.set(currentYear + 1);
+            this.month.set(0); // January
+        }
+        else {
+            this.month.set(currentMonth + 1);
+        }
+    };
+    previousYear = () => {
+        this.year.set(this.year() - 1);
+    };
+    nextYear = () => {
+        this.year.set(this.year() + 1);
+    };
+    selectMonth(month) {
+        this.month.set(MONTHS.indexOf(month));
+    }
+    selectYear(year) {
+        this.year.set(year);
+    }
+    selectDay(day) {
+        const newValue = new Date(this.value() || new Date());
+        newValue.setFullYear(this.year());
+        newValue.setMonth(this.month() + day.monthOffset);
+        newValue.setDate(day.date);
+        this.value.set(newValue);
+    }
+    changeTime(newTime) {
+        if (!newTime) {
+            this.value.set(null);
+            return;
+        }
+        const currentValue = this.value();
+        if (currentValue) {
+            const newValue = new Date(currentValue);
+            newValue.setHours(newTime.getHours());
+            newValue.setMinutes(newTime.getMinutes());
+            newValue.setSeconds(newTime.getSeconds());
+            this.value.set(newValue);
+        }
+    }
+    /**
+     * Places focus from a pointer event: forwards the location to the embedded
+     * mask so the section nearest the cursor is selected, then opens the popup.
+     * Implemented as the `NgnBase.focusFromPointer` hook so it also works when the
+     * calendar is wrapped in an `ngn-input-field` — the outer field delegates the
+     * click here (with the real coordinates) instead of synthesising a
+     * coordinate-less click. Invoked by the calendar's own field click too.
+     */
+    focusFromPointer(event) {
+        const handled = this._mask()?.focusFromPointer(event) ?? false;
+        if (!this.inline()) {
+            this.show();
+        }
+        return handled;
+    }
+    /**
+     * Shows the calendar popup. Only works if `inline` is `false`.
+     */
+    show() {
+        if (this.inline()) {
+            throw new NgnError('calendar', 'cannot open inline calendar');
+        }
+        if (this._platform.isTouchDevice() || this.disabled() || this.readonly()) {
+            return;
+        }
+        const popover = this._popover();
+        if (!popover) {
+            throw new NgnError('calendar', 'popover not found despite inline being false');
+        }
+        popover.show();
+    }
+    /**
+     * Hides the calendar popup. Only works if `inline` is `false`.
+     */
+    hide() {
+        if (this.inline()) {
+            throw new NgnError('calendar', 'cannot close inline calendar');
+        }
+        const popover = this._popover();
+        if (!popover) {
+            throw new NgnError('calendar', 'popover not found despite inline being false');
+        }
+        popover.hide();
+    }
+    onKeyDown(event) {
+        // @todo: handle date selection with keys
+        // if event is not handled by the listbox, we can handle it here
+        if (event.key === 'Enter' && !this.inline()) {
+            const popover = this._popover();
+            if (!popover) {
+                throw new NgnError('calendar', 'popover not found despite inline being false');
+            }
+            popover.toggle();
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    /** The current (possibly partial) text in the mask field, awaiting blur. */
+    _inputString = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_inputString" }] : /* istanbul ignore next */ []));
+    _clearingMaskInput = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_clearingMaskInput" }] : /* istanbul ignore next */ []));
+    _clearValueWhenMaskBecomesEmpty = effect(() => {
+        if (!this._clearingMaskInput() || !this._mask()?.empty()) {
+            return;
+        }
+        this._clearingMaskInput.set(false);
+        this.value.set(null);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_clearValueWhenMaskBecomesEmpty" }] : /* istanbul ignore next */ []));
+    stringValueChange(newValue) {
+        this._inputString.set(newValue);
+        // The mask emits null both while mid-typing and when fully cleared. Only the
+        // fully-cleared case should null out the bound value; a partially-typed entry
+        // leaves the previous value intact (one-directional sync).
+        if (!newValue) {
+            if (this._mask()?.empty()) {
+                this._clearingMaskInput.set(false);
+                this.value.set(null);
+            }
+            else {
+                this._clearingMaskInput.set(true);
+            }
+            return;
+        }
+        this._clearingMaskInput.set(false);
+        // One-directional sync: typing updates the calendar value (and thus the
+        // dropdown UI) only once the mask is COMPLETE — a fully filled, parseable
+        // date. Half-typed input never moves the calendar and is never reformatted
+        // back over the input. The calendar UI updates the value directly via
+        // selectDay / selectMonth / selectYear / changeTime (which then flow back
+        // out to the mask text via `valueStr`).
+        if (this._mask()?.complete()) {
+            this.parseInputString();
+        }
+    }
+    /** Parse the complete mask string into the calendar value. */
+    parseInputString() {
+        const raw = this._inputString();
+        if (!raw) {
+            return;
+        }
+        // Format-aware parse that clamps an out-of-range day to the month's length
+        // (e.g. Feb 31 → Feb 28) instead of rolling over into the next month.
+        const date = parseDate(raw, this.format());
+        if (!date) {
+            return;
+        }
+        if (!this.showTime()) {
+            date.setHours(this.value()?.getHours() ?? 0);
+            date.setMinutes(this.value()?.getMinutes() ?? 0);
+            date.setSeconds(this.value()?.getSeconds() ?? 0);
+        }
+        else if (!this.showSeconds()) {
+            date.setSeconds(this.value()?.getSeconds() ?? 0);
+        }
+        // Skip if unchanged — prevents an echo loop when our own valueStr→input
+        // write re-emits a (complete) valueChange for the value we just set.
+        const current = this.value();
+        if (current && current.getTime() === date.getTime()) {
+            // The value is unchanged, but the mask may be showing a non-canonical
+            // string (e.g. a clamped Feb 31 → Feb 28). Push the canonical text back so
+            // the displayed sections match the real value.
+            const canonical = formatDate(date, this.format());
+            if (canonical !== raw) {
+                this._mask()?.value.set(canonical);
+            }
+            return;
+        }
+        this.value.set(date);
+    }
+    potentiallyBlurred() {
+        setTimeout(() => {
+            if (this.element.nativeElement.contains(document.activeElement) || this._popover()?.open()) {
+                return;
+            }
+            this.touched.set(true);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnCalendar, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NgnCalendar, isStandalone: true, selector: "ngn-calendar", inputs: { firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "inline() ? \"fit-content\" : \"100%\"", "attr.aria-invalid": "invalid() ? \"true\" : null" } }, providers: [provideSelf(NgnCalendar)], viewQueries: [{ propertyName: "_popover", first: true, predicate: NgnPopover, descendants: true, isSignal: true }, { propertyName: "_mask", first: true, predicate: NgnMaskInput, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (inline()) {\n  <ng-container *ngTemplateOutlet=\"calendar\"></ng-container>\n} @else {\n  <div\n    #field\n    [ptInt]=\"this\"\n    [ptClass]=\"{ 'input-field': true, invalid: invalid() }\"\n    [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n    (click)=\"focusFromPointer($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (focusout)=\"potentiallyBlurred()\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n  >\n    <ngn-mask-input\n      [ptInt]=\"this\"\n      [ptDep]=\"'input'\"\n      [label]=\"i18n['calendar_input']()\"\n      [mask]=\"maskCfg()\"\n      [invalid]=\"invalid()\"\n      [value]=\"valueStr()\"\n      (valueChange)=\"stringValueChange($event)\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n    />\n    <ngn-icon defaultIcon=\"calendar-trigger\" [ptInt]=\"this\" [ptDep]=\"'trigger-icon'\" />\n  </div>\n  <ngn-popover\n    #popover\n    [ptInt]=\"this\"\n    [ptDep]=\"'popover'\"\n    [anchor]=\"anchorElement\"\n    [id]=\"inputId() + '_popover'\"\n    (closing)=\"potentiallyBlurred()\"\n  >\n    <ng-template #lazy>\n      <ng-container *ngTemplateOutlet=\"calendar\"></ng-container>\n    </ng-template>\n  </ngn-popover>\n}\n\n<ng-template #calendar>\n  <div\n    [ptInt]=\"this\"\n    [ptClass]=\"{\n      root: true,\n      inline: inline(),\n    }\"\n  >\n    <ngn-calendar-days\n      [component]=\"this\"\n      [theme]=\"theme\"\n      [year]=\"year()\"\n      [month]=\"month()\"\n      [currentValue]=\"value()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      (previousMonth)=\"previousMonth()\"\n      (nextMonth)=\"nextMonth()\"\n      (daySelected)=\"selectDay($event)\"\n      (monthSelected)=\"selectMonth($event)\"\n      (yearSelected)=\"selectYear($event)\"\n      (timeChanged)=\"changeTime($event)\"\n      [dayTemplate]=\"dayTemplate()\"\n      [weekDayTemplate]=\"weekDayTemplate()\"\n      [timeTemplate]=\"timeTemplate()\"\n      [yearTemplate]=\"yearTemplate()\"\n      [monthTemplate]=\"monthTemplate()\"\n      [showTime]=\"showTime()\"\n      [showSeconds]=\"showSeconds()\"\n      (focusout)=\"potentiallyBlurred()\"\n    />\n  </div>\n</ng-template>\n<ng-template #defaultDayTemplate [ngnTemplate]=\"templateTypes.day\" let-day>\n  {{ day.date }}\n</ng-template>\n\n<ng-template #defaultWeekDayTemplate [ngnTemplate]=\"templateTypes.weekDay\" let-weekDay>\n  <span>\n    {{ weekDay.translation }}\n  </span>\n</ng-template>\n\n<ng-template #defaultTimeTemplate [ngnTemplate]=\"templateTypes.time\" let-time>\n  @defer {\n    <div [ptInt]=\"this\" [ptClass]=\"'time'\">\n      <ngn-calendar-time\n        [component]=\"this\"\n        [currentValue]=\"time.time\"\n        [showSeconds]=\"time.showSeconds\"\n        (timeChange)=\"time.change($event)\"\n      />\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultYearTemplate [ngnTemplate]=\"templateTypes.year\" let-y>\n  @defer {\n    <ngn-input-field [ptInt]=\"this\" [ptDep]=\"'current-year-field'\">\n      <ngn-select\n        [ptInt]=\"this\"\n        [ptDep]=\"'current-year'\"\n        [editable]=\"true\"\n        [value]=\"year() + ''\"\n        (valueChange)=\"y.change(+($event || 0))\"\n        [options]=\"yearOptions\"\n        [virtual]=\"true\"\n        [itemHeight]=\"40\"\n        [popoverOptions]=\"{ sizeConstraints: { maxHeight: '300px' } }\"\n        [scrollToSelectedItemOnOpen]=\"'center'\"\n        [editableAutoFilter]=\"false\"\n        [tabindex]=\"-1\"\n      >\n        <input ngnInput type=\"number\" [attr.aria-label]=\"i18n['calendar_selectYear']()\" />\n      </ngn-select>\n    </ngn-input-field>\n  }\n</ng-template>\n\n<ng-template #defaultMonthTemplate [ngnTemplate]=\"templateTypes.month\" let-m>\n  @defer {\n    <ngn-input-field [ptInt]=\"this\" [ptDep]=\"'current-month-field'\">\n      <ngn-select\n        [ptInt]=\"this\"\n        [ptDep]=\"'current-month'\"\n        [label]=\"i18n['calendar_selectMonth']()\"\n        [value]=\"m.month\"\n        (valueChange)=\"m.change($event!)\"\n        [options]=\"monthOptions()\"\n        [popoverOptions]=\"{\n          sizeConstraints: { maxHeight: '300px', width: '130px', maxWidth: '130px' },\n        }\"\n        [scrollToSelectedItemOnOpen]=\"'center'\"\n        [tabindex]=\"-1\"\n      />\n    </ngn-input-field>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }, { kind: "component", type: NgnPopover, selector: "ngn-popover", inputs: ["open", "anchor", "options", "hasShrinkableContent", "closeBy"], outputs: ["closed", "closing", "openChange"] }, { kind: "component", type: CalendarDays, selector: "ngn-calendar-days", inputs: ["component", "theme", "year", "month", "currentValue", "firstDayOfWeek", "dayTemplate", "weekDayTemplate", "timeTemplate", "yearTemplate", "monthTemplate", "showTime", "showSeconds"], outputs: ["previousMonth", "nextMonth", "daySelected", "yearSelected", "monthSelected", "timeChanged"] }, { kind: "component", type: NgnMaskInput, selector: "ngn-mask-input", inputs: ["mask"] }], deferBlockDependencies: [() => [NgnPt, /* @ts-ignore */
+                import('./ngneers-controls-calendar-time-CJT5AFlA.mjs').then(m => m.CalendarTime)], () => [NgnPt, /* @ts-ignore */
+                import('@ngneers/controls/input').then(m => m.NgnInput), /* @ts-ignore */
+                import('@ngneers/controls/select').then(m => m.NgnSelect), /* @ts-ignore */
+                import('@ngneers/controls/input-field').then(m => m.NgnInputField)], () => [NgnPt, /* @ts-ignore */
+                import('@ngneers/controls/select').then(m => m.NgnSelect), /* @ts-ignore */
+                import('@ngneers/controls/input-field').then(m => m.NgnInputField)]] });
+}
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.5", ngImport: i0, type: NgnCalendar, resolveDeferredDeps: () => [/* @ts-ignore */
+        import('./ngneers-controls-calendar-time-CJT5AFlA.mjs').then(m => m.CalendarTime), /* @ts-ignore */
+        import('@ngneers/controls/input').then(m => m.NgnInput), /* @ts-ignore */
+        import('@ngneers/controls/select').then(m => m.NgnSelect), /* @ts-ignore */
+        import('@ngneers/controls/input-field').then(m => m.NgnInputField)], resolveMetadata: (CalendarTime, NgnInput, NgnSelect, NgnInputField) => ({ decorators: [{
+                type: Component,
+                args: [{ selector: 'ngn-calendar', imports: [
+                            NgTemplateOutlet,
+                            NgnTemplate,
+                            NgnPt,
+                            NgnInput,
+                            NgnIcon,
+                            NgnSelect,
+                            NgnPopover,
+                            CalendarDays,
+                            CalendarTime,
+                            NgnInputField,
+                            NgnMaskInput,
+                        ], providers: [provideSelf(NgnCalendar)], host: {
+                            '[style.display]': '"block"',
+                            '[style.width]': 'inline() ? "fit-content" : "100%"',
+                            '[attr.aria-invalid]': 'invalid() ? "true" : null',
+                        }, template: "@if (inline()) {\n  <ng-container *ngTemplateOutlet=\"calendar\"></ng-container>\n} @else {\n  <div\n    #field\n    [ptInt]=\"this\"\n    [ptClass]=\"{ 'input-field': true, invalid: invalid() }\"\n    [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n    (click)=\"focusFromPointer($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (focusout)=\"potentiallyBlurred()\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n  >\n    <ngn-mask-input\n      [ptInt]=\"this\"\n      [ptDep]=\"'input'\"\n      [label]=\"i18n['calendar_input']()\"\n      [mask]=\"maskCfg()\"\n      [invalid]=\"invalid()\"\n      [value]=\"valueStr()\"\n      (valueChange)=\"stringValueChange($event)\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n    />\n    <ngn-icon defaultIcon=\"calendar-trigger\" [ptInt]=\"this\" [ptDep]=\"'trigger-icon'\" />\n  </div>\n  <ngn-popover\n    #popover\n    [ptInt]=\"this\"\n    [ptDep]=\"'popover'\"\n    [anchor]=\"anchorElement\"\n    [id]=\"inputId() + '_popover'\"\n    (closing)=\"potentiallyBlurred()\"\n  >\n    <ng-template #lazy>\n      <ng-container *ngTemplateOutlet=\"calendar\"></ng-container>\n    </ng-template>\n  </ngn-popover>\n}\n\n<ng-template #calendar>\n  <div\n    [ptInt]=\"this\"\n    [ptClass]=\"{\n      root: true,\n      inline: inline(),\n    }\"\n  >\n    <ngn-calendar-days\n      [component]=\"this\"\n      [theme]=\"theme\"\n      [year]=\"year()\"\n      [month]=\"month()\"\n      [currentValue]=\"value()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      (previousMonth)=\"previousMonth()\"\n      (nextMonth)=\"nextMonth()\"\n      (daySelected)=\"selectDay($event)\"\n      (monthSelected)=\"selectMonth($event)\"\n      (yearSelected)=\"selectYear($event)\"\n      (timeChanged)=\"changeTime($event)\"\n      [dayTemplate]=\"dayTemplate()\"\n      [weekDayTemplate]=\"weekDayTemplate()\"\n      [timeTemplate]=\"timeTemplate()\"\n      [yearTemplate]=\"yearTemplate()\"\n      [monthTemplate]=\"monthTemplate()\"\n      [showTime]=\"showTime()\"\n      [showSeconds]=\"showSeconds()\"\n      (focusout)=\"potentiallyBlurred()\"\n    />\n  </div>\n</ng-template>\n<ng-template #defaultDayTemplate [ngnTemplate]=\"templateTypes.day\" let-day>\n  {{ day.date }}\n</ng-template>\n\n<ng-template #defaultWeekDayTemplate [ngnTemplate]=\"templateTypes.weekDay\" let-weekDay>\n  <span>\n    {{ weekDay.translation }}\n  </span>\n</ng-template>\n\n<ng-template #defaultTimeTemplate [ngnTemplate]=\"templateTypes.time\" let-time>\n  @defer {\n    <div [ptInt]=\"this\" [ptClass]=\"'time'\">\n      <ngn-calendar-time\n        [component]=\"this\"\n        [currentValue]=\"time.time\"\n        [showSeconds]=\"time.showSeconds\"\n        (timeChange)=\"time.change($event)\"\n      />\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultYearTemplate [ngnTemplate]=\"templateTypes.year\" let-y>\n  @defer {\n    <ngn-input-field [ptInt]=\"this\" [ptDep]=\"'current-year-field'\">\n      <ngn-select\n        [ptInt]=\"this\"\n        [ptDep]=\"'current-year'\"\n        [editable]=\"true\"\n        [value]=\"year() + ''\"\n        (valueChange)=\"y.change(+($event || 0))\"\n        [options]=\"yearOptions\"\n        [virtual]=\"true\"\n        [itemHeight]=\"40\"\n        [popoverOptions]=\"{ sizeConstraints: { maxHeight: '300px' } }\"\n        [scrollToSelectedItemOnOpen]=\"'center'\"\n        [editableAutoFilter]=\"false\"\n        [tabindex]=\"-1\"\n      >\n        <input ngnInput type=\"number\" [attr.aria-label]=\"i18n['calendar_selectYear']()\" />\n      </ngn-select>\n    </ngn-input-field>\n  }\n</ng-template>\n\n<ng-template #defaultMonthTemplate [ngnTemplate]=\"templateTypes.month\" let-m>\n  @defer {\n    <ngn-input-field [ptInt]=\"this\" [ptDep]=\"'current-month-field'\">\n      <ngn-select\n        [ptInt]=\"this\"\n        [ptDep]=\"'current-month'\"\n        [label]=\"i18n['calendar_selectMonth']()\"\n        [value]=\"m.month\"\n        (valueChange)=\"m.change($event!)\"\n        [options]=\"monthOptions()\"\n        [popoverOptions]=\"{\n          sizeConstraints: { maxHeight: '300px', width: '130px', maxWidth: '130px' },\n        }\"\n        [scrollToSelectedItemOnOpen]=\"'center'\"\n        [tabindex]=\"-1\"\n      />\n    </ngn-input-field>\n  }\n</ng-template>\n" }]
+            }], ctorParameters: null, propDecorators: { firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], _popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgnPopover), { isSignal: true }] }], _mask: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgnMaskInput), { isSignal: true }] }] } }) });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MONTHS, NgnCalendar, WEEK_DAYS, formatDate, parseDate };
+//# sourceMappingURL=ngneers-controls-calendar.mjs.map