@siemens/element-ng 47.2.0 → 47.4.0

package/fesm2022/siemens-element-ng-datepicker.mjs

@@ -0,0 +1,4231 @@
+import { getLocaleDayPeriods, FormStyle, TranslationWidth, getLocaleId, getLocaleDateTimeFormat, FormatWidth, getLocaleTimeFormat, getLocaleDateFormat, formatDate, NgClass, DatePipe, NgTemplateOutlet, getLocaleFirstDayOfWeek, WeekDay, DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, model, output, booleanAttribute, computed, signal, inject, LOCALE_ID, HostListener, Directive, ElementRef, viewChildren, Component, ChangeDetectionStrategy, viewChild, HostAttributeToken, ChangeDetectorRef, SimpleChange, DestroyRef, contentChild, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, NgControl } from '@angular/forms';
+import { SI_FORM_ITEM_CONTROL } from '@siemens/element-ng/form';
+import { MediaMatcher, BreakpointObserver } from '@angular/cdk/layout';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { takeUntilDestroyed, outputToObservable } from '@angular/core/rxjs-interop';
+import { isRTL, getOverlayPositions, positionBottomCenter, positionBottomStart, positionBottomEnd, positionTopCenter, positionTopStart, positionTopEnd } from '@siemens/element-ng/common';
+import { BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
+import { Subject, merge } from 'rxjs';
+import { takeUntil, skip, map, filter, tap } from 'rxjs/operators';
+import * as i3 from '@angular/cdk/a11y';
+import { A11yModule, FocusMonitor, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
+import * as i2 from '@siemens/element-translate-ng/translate';
+import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
+import { addIcons, elementRight2, elementLeft2, SiIconNextComponent, elementCalendar } from '@siemens/element-ng/icon';
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+const WEEK_ISO = [
+    { id: 'monday', index: 1, offset: 0, isWeekend: false },
+    { id: 'tuesday', index: 2, offset: 1, isWeekend: false },
+    { id: 'wednesday', index: 3, offset: 2, isWeekend: false },
+    { id: 'thursday', index: 4, offset: 3, isWeekend: false },
+    { id: 'friday', index: 5, offset: 4, isWeekend: false },
+    { id: 'saturday', index: 6, offset: 5, isWeekend: true },
+    { id: 'sunday', index: 7, offset: 6, isWeekend: true }
+];
+const WEEK_START_OFFSET = {
+    'monday': 0,
+    'saturday': 5,
+    'sunday': 6
+};
+const UNITS = {
+    millisecondsPerDay: 86400000,
+    daysPerWeek: 7,
+    thursday: 4
+};
+const dayOfWeekMap = {};
+const getDaysOfWeek = (weekStart) => {
+    weekStart = weekStart ?? 'monday';
+    let weekdays = dayOfWeekMap[weekStart];
+    if (!weekdays) {
+        dayOfWeekMap[weekStart] = weekdays = [];
+        const offset = WEEK_START_OFFSET[weekStart];
+        for (let i = 0; i < 7; i++) {
+            weekdays.push({ ...WEEK_ISO[(i + offset) % 7], offset: i });
+        }
+    }
+    return weekdays;
+};
+/**
+ * Get local specific months using DateTimeFormat.
+ * @param locale - current locale
+ */
+const getLocaleMonthNames = (locale) => {
+    const format = new Intl.DateTimeFormat(locale, { month: 'long', timeZone: 'UTC' }).format;
+    return Array(12)
+        .fill(0)
+        .map((v, m) => format(new Date(Date.UTC(0, m))));
+};
+/**
+ * Get local specific weekdays as string using DateTimeFormat.
+ * @param locale - current local
+ * @param weekStart - start of the week
+ * @param format - display format
+ * @returns array of week days.
+ */
+const getDayStrings = (locale, weekStart = 'monday', format = 'short') => {
+    const dateFormatter = new Intl.DateTimeFormat(locale, { weekday: format, timeZone: 'utc' });
+    const days = [];
+    // Get local specific day strings from sunday (0) .. saturady (6)
+    for (let index = 1; index <= 7; index++) {
+        const day = new Date(Date.UTC(2023, 0, index));
+        days.push(dateFormatter.format(day));
+    }
+    const map = { 'sunday': 0, 'monday': 1, 'saturday': 6 };
+    const index = map[weekStart];
+    return days.slice(index).concat(days.slice(0, index));
+};
+/**
+ * Gets the first day in the specified month.
+ * Expects the month as a value between 1 and 12.
+ * The year is required to handle leap years.
+ *
+ * @returns The first day of the month as a Date.
+ */
+const getFirstDayInMonth = (year, month) => new Date(year, month - 1, 1);
+/**
+ * Gets the week number of the specified date.
+ * Week number according to the ISO-8601 standard, weeks starting on Monday.
+ * The first week of a year is the week that contains the first Thursday of the year (='First 4-day week').
+ * The highest week number in a year is either 52 or 53.
+ *
+ * @param date -The JavaScript date object.
+ * @param weekStart -Name of the first day of the week
+ * @returns The number of the Week
+ */
+const getWeekOfYear = (date, weekStart) => {
+    // Algorithm rewritten from C# example given at http://en.wikipedia.org/wiki/Talk:ISO_week_date
+    const dayOfWeek = getWeekDayOffset(date, weekStart) + 1;
+    const nearestThu = new Date(date);
+    nearestThu.setDate(date.getDate() + (UNITS.thursday - dayOfWeek)); // get nearest Thursday (-3..+3 days)
+    const year = nearestThu.getFullYear();
+    const janfirst = getFirstDayInMonth(year, 1);
+    const days = Math.floor((nearestThu - janfirst) / UNITS.millisecondsPerDay);
+    const week = 1 + Math.floor(days / UNITS.daysPerWeek); // Count of Thursdays
+    return week;
+};
+const getWeekDayOffset = (date, weekStart) => {
+    const offset = WEEK_START_OFFSET[weekStart ?? 'monday'];
+    return (date.getDay() + 6 - offset) % 7;
+};
+/** returns the date string in format YYYY-MM-DD for given date */
+const getStringforDate = (date) => {
+    let month = '' + (date.getMonth() + 1);
+    let day = '' + date.getDate();
+    const year = date.getFullYear();
+    if (month.length < 2) {
+        month = '0' + month;
+    }
+    if (day.length < 2) {
+        day = '0' + day;
+    }
+    return `${year}-${month}-${day}`;
+};
+/**
+ * Creates a new date object on from a date with or without time.
+ * @param value - The date from with the year, month and day is taken.
+ * @param hours - Optional numeric value of the hours, otherwise 0.
+ * @param minutes - Optional numeric value of the minutes, otherwise 0.
+ * @param seconds - Optional numeric value of the seconds, otherwise 0.
+ * @param milliseconds - Optional numeric value of the milliseconds, otherwise 0.
+ * @returns
+ */
+const createDate = (value, hours = 0, minutes = 0, seconds = 0, milliseconds = 0) => {
+    const newDate = new Date(value.getFullYear(), value.getMonth(), value.getDate(), hours, minutes, seconds, milliseconds);
+    // Seems redundant, but makes sure that increasing
+    // the hours does no change the date when switching
+    // from 11pm up.
+    newDate.setFullYear(value.getFullYear());
+    newDate.setMonth(value.getMonth());
+    newDate.setDate(value.getDate());
+    return newDate;
+};
+/** Creates a date but allows the month and date to overflow. */
+const createDateInternal = (year, month, date) => {
+    const d = new Date();
+    d.setFullYear(year, month, date);
+    d.setHours(0, 0, 0, 0);
+    return d;
+};
+const NAMED_FORMATS = {};
+const INVALID_DATE = new Date(NaN);
+/**
+ * @param input - String containing a date or dateTime value (Ex. "05/15/2020"
+ * @param format - Format of the input value (Ex. "M/d/YYYY")
+ * @param locale - Locale of the input value
+ * @returns A JS Date in accordance of the three parameters
+ */
+const parseDate = (input, format, locale) => {
+    if (!input) {
+        return undefined;
+    }
+    const splitFormat = format.split(/[^MydhHmsSa]+/);
+    const splitDate = input.toUpperCase().match(/\d+|\w+/g);
+    if (!splitDate) {
+        return INVALID_DATE;
+    }
+    // in case of some locales where meridian is with special chars
+    const dateAndMeridian = input.split(/ +/);
+    if (splitDate.length > 0 && dateAndMeridian.length > 0) {
+        const parsedMeridian = dateAndMeridian[dateAndMeridian.length - 1].toUpperCase();
+        if (splitDate[splitDate.length - 1] !== parsedMeridian &&
+            getMeridian(parsedMeridian, locale)) {
+            splitDate?.push(parsedMeridian);
+        }
+    }
+    let year = 0;
+    let month = 0;
+    /*
+      date as in the numeric day of the month to be provided for the Date() constructor.
+      default value is 1 since 0 refers to the last date of previous month.
+    */
+    let date = 1;
+    let hour = 0;
+    let minute = 0;
+    let second = 0;
+    let milliseconds = 0;
+    // check if date is invalid and return if it is invalid
+    for (let i = 0; i < splitDate.length; i++) {
+        if (i === splitDate.length - 1) {
+            const parsedMeridian = splitDate[splitDate.length - 1];
+            // skip if its meridian
+            if (getMeridian(parsedMeridian, locale)) {
+                continue;
+            }
+        }
+        const parsedDateVal = parseInt(splitDate[i], 10);
+        if (isNaN(parsedDateVal)) {
+            return INVALID_DATE;
+        }
+    }
+    for (let i = 0; i < splitFormat.length; i++) {
+        const f = splitFormat[i];
+        let parsedNumber = parseInt(splitDate[i], 10);
+        if (f !== 'a' && isNaN(parsedNumber)) {
+            // auto fill seconds and milliseconds if not passed by user
+            if (f === 'ss' || f === 'SSS') {
+                parsedNumber = 0;
+            }
+            else {
+                return INVALID_DATE;
+            }
+        }
+        if (f === 'M' || f === 'MM') {
+            month = parsedNumber;
+        }
+        else if (f === 'd' || f === 'dd') {
+            date = parsedNumber;
+        }
+        else if (f === 'y' || f === 'yy' || f === 'yyyy') {
+            // JS adds 1900 for numbers between 0 and 99. Adjust to be more user-friendly
+            year =
+                parsedNumber < 50
+                    ? parsedNumber + 2000
+                    : parsedNumber < 100
+                        ? parsedNumber + 1900
+                        : parsedNumber;
+        }
+        else if (f === 'h' || f === 'HH') {
+            hour = parsedNumber;
+        }
+        else if (f === 'mm') {
+            minute = parsedNumber;
+        }
+        else if (f === 'ss') {
+            second = parsedNumber;
+        }
+        else if (f === 'SSS') {
+            milliseconds = parsedNumber;
+        }
+        else if (f === 'a') {
+            if (!isNaN(parseInt(splitDate[splitDate.length - 1], 10))) {
+                continue;
+            }
+            const parsedMeridian = splitDate[splitDate.length - 1];
+            const meridian = getMeridian(parsedMeridian, locale);
+            if (hour === 12 && meridian === 'AM') {
+                hour = 0;
+            }
+            else if (meridian === 'PM') {
+                hour = (hour % 12) + 12;
+            }
+            else if (!meridian) {
+                return INVALID_DATE;
+            }
+        }
+    }
+    if (month > 12 || date > 31 || date > new Date(year, month, 0).getDate()) {
+        return INVALID_DATE;
+    }
+    return new Date(year, month - 1, date, hour, minute, second, milliseconds);
+};
+const getMeridian = (parsedMeridian, locale) => {
+    const meridian = getLocaleDayPeriods(locale, FormStyle.Format, TranslationWidth.Short);
+    const usingAM = parsedMeridian === meridian[0].toUpperCase();
+    if (usingAM) {
+        return 'AM';
+    }
+    else {
+        const usingPM = parsedMeridian === meridian[1].toUpperCase();
+        return usingPM ? 'PM' : undefined;
+    }
+};
+// Adapted from: https://github.com/angular/angular/blob/91954cf20e17a386d71cc8ea25d1d17b9ae1e31c/packages/common/src/i18n/format_date.ts
+// unfortunately it is not exported there
+const getNamedFormat = (locale, format) => {
+    const localeId = getLocaleId(locale);
+    NAMED_FORMATS[localeId] = NAMED_FORMATS[localeId] || {};
+    if (NAMED_FORMATS[localeId][format]) {
+        return NAMED_FORMATS[localeId][format];
+    }
+    let formatValue = '';
+    switch (format) {
+        case 'shortDate':
+            formatValue = getLocaleDateFormat(locale, FormatWidth.Short);
+            break;
+        case 'shortTime':
+            formatValue = getLocaleTimeFormat(locale, FormatWidth.Short);
+            break;
+        case 'mediumTime':
+            formatValue = getLocaleTimeFormat(locale, FormatWidth.Medium);
+            break;
+        case 'longTime':
+            formatValue = getLocaleTimeFormat(locale, FormatWidth.Long);
+            break;
+        case 'fullTime':
+            formatValue = getLocaleTimeFormat(locale, FormatWidth.Full);
+            break;
+        case 'short':
+        case 'medium':
+            {
+                const shortTime = getNamedFormat(locale, format === 'short' ? 'shortTime' : 'mediumTime');
+                const shortDate = getNamedFormat(locale, 'shortDate');
+                formatValue = formatDateTime(getLocaleDateTimeFormat(locale, FormatWidth.Short), [
+                    shortTime,
+                    shortDate
+                ]);
+            }
+            break;
+    }
+    if (formatValue) {
+        NAMED_FORMATS[localeId][format] = formatValue;
+    }
+    return formatValue;
+};
+const formatDateTime = (str, optVals) => {
+    if (optVals) {
+        str = str.replace(/\{([^}]+)}/g, (match, key) => optVals != null && key in optVals ? optVals[key] : match);
+    }
+    return str;
+};
+const getDateWithoutTime = (date) => createDate(date, 0, 0, 0, 0);
+/**
+ * Get today
+ * @returns date of today
+ */
+const today = () => new Date();
+/**
+ * Calculate a new date based on the offset while considering the min and max date.
+ * @param current - input date.
+ * @param daysOffset - numeric offset of days.
+ * @returns new date if the range is valid or original date
+ */
+const addDaysInRange = (current, daysOffset, minDate, maxDate) => {
+    const newDate = addDays(current, daysOffset);
+    // Make sure the new date is within the specified limits
+    // MinDate < new data < MaxDate
+    if (isSameOrBetween(newDate, minDate, maxDate)) {
+        return newDate;
+    }
+    return getDateSameOrBetween(newDate, minDate, maxDate);
+};
+/**
+ * Get date delta based on the offset.
+ * @param date - source date object.
+ * @param days - numeric offset of days.
+ * @returns new date.
+ */
+const addDays = (date, days) => {
+    const d = createDate(date);
+    d.setDate(d.getDate() + days);
+    return d;
+};
+/**
+ * Update date/day of give date without changing the month.
+ * In case the day exceed the number of days in the current month the last day in month will be assigned.
+ * @param date - the date object to update the day.
+ * @param day - the day which shall be set.
+ * @returns the updated date object.
+ */
+const changeDay = (date, day) => {
+    const lastDay = daysInMonth(date.getMonth(), date.getFullYear());
+    date.setDate(lastDay <= day ? lastDay : day);
+    return date;
+};
+/**
+ * Get date delta specifically for months based on the offset.
+ * @param current - starting date.
+ * @param monthsOffset - numeric offset of months.
+ * @param minDate - optional minimum allowed date.
+ * @param maxDate - optional maximum allowed date.
+ * @returns a new date object with the updated month.
+ */
+const addMonthsInRange = (current, monthsOffset, minDate, maxDate) => {
+    let newDate = createDateInternal(current.getFullYear(), current.getMonth() + monthsOffset, 1);
+    newDate = changeDay(newDate, current.getDate());
+    if (isSameOrBetween(newDate, minDate, maxDate)) {
+        return newDate;
+    }
+    return getDateSameOrBetween(newDate, minDate, maxDate);
+};
+/**
+ * Get date delta specifically for years based on the offset.
+ * @param current - starting date.
+ * @param yearsOffset - numeric offset of years.
+ * @param minDate - optional minimum allowed date.
+ * @param maxDate - optional maximum allowed date.
+ * @returns a new date object with the updated year.
+ */
+const addYearsInRange = (current, yearsOffset, minDate, maxDate) => {
+    const newDate = createDateInternal(current.getFullYear() + yearsOffset, current.getMonth(), current.getDate());
+    if (isSameOrBetween(newDate, minDate, maxDate)) {
+        return newDate;
+    }
+    return getDateSameOrBetween(newDate, minDate, maxDate);
+};
+/**
+ * Get number of days for the given month and year.
+ * @param month - month as number (0..11).
+ * @param year - year as number.
+ * @returns the number of days for the given month.
+ */
+const daysInMonth = (month, year) => 
+// By using 0 as the day it will give us the last day of the prior
+// month. So passing in 1 as the month number will return the last day
+new Date(year, month + 1, 0).getDate();
+/**
+ * Get the first date of the week based on the input date.
+ * @param current - a date object from where the last date of a week is derived.
+ * @param weekStartDay - optional when a week shall start.
+ * @returns a new date object which is the start of the current week.
+ */
+const getWeekStartDate = (current, weekStartDay = 'monday') => {
+    const weekStartDate = createDate(current);
+    const diff = current.getDate() - getWeekDayOffset(current, weekStartDay);
+    weekStartDate.setDate(diff);
+    return weekStartDate;
+};
+/**
+ * Get the last date of the week based on the input date.
+ * @param current - a date object from where the last date of a week is derived.
+ * @param weekStartDay - optional when a week shall start.
+ * @returns the last date within the week.
+ */
+const getWeekEndDate = (current, weekStartDay = 'monday') => {
+    const weekStartDate = createDate(current);
+    weekStartDate.setDate(current.getDate() + 6 - getWeekDayOffset(current, weekStartDay));
+    return weekStartDate;
+};
+/**
+ * Get the beginning of the month.
+ * @param current - a date object from where the first date in a month is derived.
+ * @returns a new date object which starts a the first.
+ */
+const getFirstDateInMonth = (current) => new Date(current.getFullYear(), current.getMonth(), 1);
+/**
+ * Get the last date of the month.
+ * @param current - a date object from where we derive the last date in a month.
+ * @returns a new date object which is the last day in the current month.
+ */
+const getLastDateInMonth = (current) => new Date(current.getFullYear(), current.getMonth() + 1, 0);
+/**
+ * Get the beginning of the year.
+ * @param current - a date object from where the first date in a year is derived.
+ * @returns a new date object which starts a the first.
+ */
+const getFirstDateInYear = (current) => new Date(current.getFullYear(), 0, 1);
+/**
+ * Are the two dates identical without considering time.
+ */
+const isSameDate = (current, compareTo) => {
+    if (!compareTo) {
+        return false;
+    }
+    return (current.getFullYear() === compareTo.getFullYear() &&
+        current.getMonth() === compareTo.getMonth() &&
+        current.getDate() === compareTo.getDate());
+};
+/**
+ * Are the two months identical without considering time.
+ */
+const isSameMonth = (current, compareTo) => {
+    if (!compareTo) {
+        return false;
+    }
+    return isSameYear(current, compareTo) && current.getMonth() === compareTo.getMonth();
+};
+/**
+ * Are the two years identical.
+ */
+const isSameYear = (current, compareTo) => {
+    if (!compareTo) {
+        return false;
+    }
+    return current.getFullYear() === compareTo.getFullYear();
+};
+/**
+ * Compares two dates.
+ * @param first - The first date to compare.
+ * @param second - The second date to compare.
+ * @returns 0 if the dates are equal, a number less than 0 if the first date is earlier,
+ * a number greater than 0 if the first date is later.
+ */
+const compareDate = (first, second) => compareMonth(first, second) || first.getDate() - second.getDate();
+/**
+ * Compares two months.
+ * @param first - The first month to compare.
+ * @param second - The second month to compare.
+ * @returns 0 if the months are equal, a number less than 0 if the first month is earlier,
+ * a number greater than 0 if the first month is later.
+ */
+const compareMonth = (first, second) => compareYear(first, second) || first.getMonth() - second.getMonth();
+/**
+ * Compares two years.
+ * @param first - The first year to compare.
+ * @param second - The second year to compare.
+ * @returns 0 if the years are equal, a number less than 0 if the first year is earlier,
+ * a number greater than 0 if the first year is later.
+ */
+const compareYear = (first, second) => first.getFullYear() - second.getFullYear();
+/**
+ * Compare the current date is the same date or between start and end date.
+ * @param current - the date object.
+ * @param from - optional min date, if no value is provided we assume true for the min value.
+ * @param to - optional max date, if no value is provided we assume true for the max value.
+ * @returns true if the date is in the provided range.
+ */
+const isSameOrBetween = (current, from, to) => {
+    // from <= d
+    const isInMinRange = from ? compareDate(from, current) <= 0 : true;
+    // d <= to
+    const isInMaxRange = to ? compareDate(current, to) <= 0 : true;
+    return isInMinRange && isInMaxRange;
+};
+/**
+ * Compare the current month is the same month or between start and end month.
+ * @param current - the month object.
+ * @param from - optional min month, if no value is provided we assume true for the min value.
+ * @param to - optional max month, if no value is provided we assume true for the max value.
+ * @returns true if the date is in the provided range.
+ */
+const isSameOrBetweenMonth = (current, from, to) => {
+    // from <= d
+    const isInMinRange = from ? compareMonth(from, current) <= 0 : true;
+    // d <= to
+    const isInMaxRange = to ? compareMonth(current, to) <= 0 : true;
+    return isInMinRange && isInMaxRange;
+};
+/**
+ * Compare the current year is the same year or between start and end year.
+ * @param current - the year object.
+ * @param from - optional min year, if no value is provided we assume true for the min value.
+ * @param to - optional max year, if no value is provided we assume true for the max value.
+ * @returns true if the date is in the provided range.
+ */
+const isSameOrBetweenYears = (current, from, to) => {
+    // from <= d
+    const isInMinRange = from ? compareYear(from, current) <= 0 : true;
+    // d <= to
+    const isInMaxRange = to ? compareYear(current, to) <= 0 : true;
+    return isInMinRange && isInMaxRange;
+};
+/**
+ * Compare the current date is between start and end date.
+ * from \< current \< to
+ */
+const isBetween = (current, from, to) => {
+    const isInMinRange = from ? compareDate(current, from) > 0 : true;
+    const isInMaxRange = to ? compareDate(current, to) < 0 : true;
+    return isInMinRange && isInMaxRange;
+};
+/**
+ * Compare the current month is between start and end month.
+ * from \< current \< to
+ */
+const isBetweenMonth = (current, from, to) => {
+    const isInMinRange = from ? compareMonth(current, from) > 0 : true;
+    const isInMaxRange = to ? compareMonth(current, to) < 0 : true;
+    return isInMinRange && isInMaxRange;
+};
+/**
+ * Compare the current year is between start and end year.
+ * from \< current \< to
+ */
+const isBetweenYears = (current, from, to) => {
+    const isInMinRange = from ? compareYear(current, from) > 0 : true;
+    const isInMaxRange = to ? compareYear(current, to) < 0 : true;
+    return isInMinRange && isInMaxRange;
+};
+/**
+ * Is first date after the second date (without considering the time).
+ * current \> compareTo
+ */
+const isAfter = (current, compareTo) => compareDate(current, compareTo) > 0;
+/**
+ * Is first month after the second month (without considering the time).
+ * current \> compareTo
+ */
+const isAfterMonth = (current, compareTo) => compareMonth(current, compareTo) > 0;
+/**
+ * Is first year after the second year.
+ * current \> compareTo
+ */
+const isAfterYear = (current, compareTo) => compareYear(current, compareTo) > 0;
+/**
+ * Is first date equal or before the second date (without considering the time).
+ * current \>= compareTo
+ */
+const isSameOrBefore = (current, compareTo) => compareDate(current, compareTo) <= 0;
+/**
+ * Is first month equal or before the second month.
+ * current \>= compareTo
+ */
+const isSameOrBeforeMonth = (current, compareTo) => compareMonth(current, compareTo) <= 0;
+/**
+ * Is first year equal or before the second year.
+ * current \>= compareTo
+ */
+const isSameOrBeforeYear = (current, compareTo) => compareMonth(current, compareTo) <= 0;
+/**
+ * Are the two dates in different months.
+ */
+const isAnotherMonth = (current, compareTo) => current.getMonth() !== compareTo.getMonth();
+/**
+ * Are the two dates in different years.
+ */
+const isAnotherYear = (current, compareTo) => current.getFullYear() !== compareTo.getFullYear();
+/**
+ * Are the two dates either in different months or years.
+ */
+const isAnotherMonthOrYear = (current, compareTo) => isAnotherMonth(current, compareTo) || isAnotherYear(current, compareTo);
+/**
+ * Get a date which is in within the range and the close to current.
+ */
+const getDateSameOrBetween = (current, minDate, maxDate) => {
+    if (isSameOrBetween(current, minDate, maxDate)) {
+        return current;
+    }
+    const minDistance = minDate
+        ? Math.ceil(Math.abs(current.getTime() - minDate.getTime()))
+        : Number.MAX_VALUE;
+    const maxDistance = maxDate
+        ? Math.ceil(Math.abs(current.getTime() - maxDate.getTime()))
+        : Number.MAX_VALUE;
+    return minDistance < maxDistance ? createDate(minDate) : createDate(maxDate);
+};
+/**
+ * Get date or absolute min date.
+ * @param date - input date.
+ * @returns date or date of 1.1.1900
+ */
+const getMinDate = (date) => date && !isNaN(date.getTime()) ? date : new Date(Date.UTC(1900, 0, 1));
+/**
+ * Get date or absolute max date.
+ * @param date - input date.
+ * @returns date or date of 31.12.2154
+ */
+const getMaxDate = (date) => date && !isNaN(date.getTime()) ? date : new Date(Date.UTC(2154, 11, 31));
+/**
+ * Is valid date object.
+ */
+const isValid = (date) => !!date && !isNaN(date.getTime());
+/**
+ * Returns the next months of the given date.
+ * @param date - The date for which the next month is returned.
+ * @returns A date of the first day of the following month of the given day.
+ */
+const nextMonth = (date) => {
+    if (date.getMonth() === 11) {
+        return new Date(date.getFullYear() + 1, 0, 1);
+    }
+    else {
+        return new Date(date.getFullYear(), date.getMonth() + 1, 1);
+    }
+};
+/**
+ * Returns the last day of the previous month of the given date object.
+ * @param date - The date for which the previous month is returned.
+ * @returns A date of the last day of the previous month of the given day.
+ */
+const previousMonth = (date) => {
+    if (date.getMonth() === 0) {
+        return new Date(date.getFullYear() - 1, 12, 0);
+    }
+    else {
+        return new Date(date.getFullYear(), date.getMonth(), 0);
+    }
+};
+const minDate = (first, second) => {
+    return !!first && !!second ? (first < second ? first : second) : (first ?? second);
+};
+const maxDate = (first, second) => {
+    return !!first && !!second ? (first > second ? first : second) : (first ?? second);
+};
+
+/**
+ * Returns date / datetime format to be used for rendering a date object as text
+ * to an Html input element, which has the `SiDatepickerDirective`.
+ *
+ * @see https://angular.dev/api/common/DatePipe?tab=usage-notes
+ * @param locale - The locale for which the format is returned.
+ * @param config - The config object of the datepicker.
+ * @param timeWhenDisabled - If `true`, a format with time (medium or short) is returned, even if the `disabledTime` config is `true`.
+ * @returns Either
+ *   - a custom format provided by the config,
+ *   - the localized `medium` format when time and seconds included
+ *   - the localized `short` format when time and no seconds included
+ */
+const getDatepickerFormat = (locale, config, timeWhenDisabled = false) => {
+    // try format from consumer
+    let dateFormat = config?.showTime && !config.disabledTime ? config.dateTimeFormat : config?.dateFormat;
+    if (!dateFormat) {
+        // no format from consumer - use default depending on configuration
+        let named;
+        if (config?.showTime && (!config.disabledTime || timeWhenDisabled)) {
+            named = config.showSeconds ? 'medium' : 'short';
+        }
+        else {
+            named = 'shortDate';
+        }
+        dateFormat = getNamedFormat(locale, named);
+    }
+    // patch 2-digit year to 4-digit year
+    if (!dateFormat.includes('yyyy')) {
+        dateFormat = dateFormat.replace('yy', 'yyyy');
+    }
+    if (config?.onlyMonthSelection && dateFormat.includes('d')) {
+        dateFormat = dateFormat
+            .replace(/\sd/, '')
+            .replace(/\/d/, '')
+            .replace(/d/g, '')
+            .replace(/^\./, '');
+    }
+    return dateFormat;
+};
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Base directive for date input fields.
+ */
+class SiDateInputDirective {
+    static idCounter = 0;
+    /**
+     * @defaultValue
+     * ```
+     * `si-date-input-${SiDateInputDirective.idCounter++}`
+     * ```
+     */
+    id = input(`si-date-input-${SiDateInputDirective.idCounter++}`);
+    /**
+     * Configuration object for the datepicker.
+     *
+     * @defaultValue
+     * ```
+     * {}
+     * ```
+     */
+    siDatepickerConfig = model({});
+    /**
+     * @deprecated Property has no effect and will be removed without a replacement.
+     *
+     * @defaultValue 200
+     */
+    dateInputDebounceTime = input(200);
+    /**
+     * Emits an event to notify about disabling the time from the datepicker.
+     * When time is disable, we construct a pure date object in UTC 00:00:00 time.
+     */
+    siDatepickerDisabledTime = output();
+    /**
+     * Emits an event on state changes e.g. readonly, disable, ... .
+     */
+    stateChange = output();
+    /**
+     * Whether the date range input is disabled.
+     * @defaultValue false
+     */
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    disabledInput = input(false, { alias: 'disabled' });
+    /**
+     * Whether the date range input is readonly.
+     * @defaultValue false
+     */
+    readonly = input(false, { transform: booleanAttribute });
+    /**
+     * Overrides the value of aria-describedby
+     *
+     * @defaultValue
+     * ```
+     * `${this.id()}-errormessage`
+     * ```
+     */
+    errormessageId = input(`${this.id()}-errormessage`);
+    /** @internal */
+    validatorOnChange = () => { };
+    /**
+     * Date form input validator function, validating text format, min and max value.
+     */
+    validator = Validators.compose([
+        () => this.formatValidator(),
+        () => this.minValidator(),
+        () => this.maxValidator()
+    ]);
+    date;
+    /**
+     * Emits a new `date` value on input field value changes.
+     */
+    dateChange = output();
+    /** @internal */
+    disabled = computed(() => this.disabledInput() || this.disabledNgControl());
+    onTouched = () => { };
+    onModelChange = () => { };
+    dateString = signal('');
+    disabledNgControl = signal(false);
+    locale = inject(LOCALE_ID).toString();
+    format = '';
+    ngOnChanges(changes) {
+        if (changes.siDatepickerConfig && !changes.siDatepickerConfig.currentValue) {
+            this.siDatepickerConfig.set({});
+        }
+        if (changes.readonly || changes.disabledInput) {
+            this.stateChange.emit();
+        }
+        if (changes.siDatepickerConfig) {
+            // reflect possible change is date/time format
+            const format = this.format;
+            this.format = '';
+            this.getFormat();
+            const formatChanged = format !== this.format;
+            if (this.date && formatChanged) {
+                this.updateNativeValue();
+            }
+        }
+    }
+    validate(c) {
+        return this.validator(c);
+    }
+    registerOnChange(fn) {
+        this.onModelChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    registerOnValidatorChange(fn) {
+        this.validatorOnChange = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledNgControl.set(isDisabled);
+        this.stateChange.emit();
+    }
+    writeValue(value) {
+        // remove date when user input is empty
+        let emptyString = false;
+        // Flag to define invalid string
+        let invalidDate = false;
+        if (typeof value === 'string') {
+            emptyString = value.trim().length === 0;
+            value = parseDate(value, this.getFormat(), this.locale);
+            invalidDate = !value;
+        }
+        // Only emit changes to prevent that a destroyed output emit a value
+        if (this.date !== value) {
+            this.date = value;
+            this.dateChange.emit(this.date);
+            // We should not change the content of the input field when the user typed
+            // a wrong input. Otherwise the typed content changes and the user cannot
+            // correct the content.
+            if (!invalidDate || emptyString) {
+                this.updateNativeValue();
+            }
+        }
+    }
+    updateNativeValue() {
+        let dtStr = '';
+        if (isValid(this.date)) {
+            dtStr = formatDate(this.date, this.getFormat(), this.locale);
+        }
+        this.dateString.set(dtStr);
+    }
+    /**
+     * Handles `input` events on the input element.
+     * @param value - current input value.
+     */
+    onInput(value) {
+        const parsedDate = parseDate(value, this.getFormat(), this.locale);
+        // Is same date
+        const hasChanged = !(parsedDate === this.date);
+        if (hasChanged) {
+            this.date = parsedDate;
+            this.onModelChange(this.date);
+            this.dateChange.emit(this.date);
+        }
+    }
+    onBlur(event) {
+        this.onTouched();
+    }
+    getFormat() {
+        if (!this.format) {
+            this.format = getDatepickerFormat(this.locale, this.siDatepickerConfig());
+        }
+        return this.format;
+    }
+    /**
+     * Callback when the datepicker changes his value.
+     * @param date - updated date
+     */
+    onDateChanged(date) {
+        // update input element
+        this.writeValue(date);
+        // update the Forms ngModel
+        this.onModelChange(this.date);
+    }
+    /**
+     * Datepicker consider time / ignore time changed.
+     * @param disabledTime - disable time
+     * @internal
+     */
+    onDisabledTime(disabledTime) {
+        this.format = '';
+        // Temporary reset internal date to force an update with the new date format
+        const currentDate = this.date;
+        this.date = undefined;
+        this.siDatepickerConfig().disabledTime = disabledTime;
+        // Ensure the time format will be removed
+        this.onDateChanged(currentDate);
+        this.siDatepickerDisabledTime.emit(disabledTime);
+    }
+    /** The form control validator for date format */
+    formatValidator() {
+        const invalidFormat = this.date && isNaN(this.date.getTime());
+        return invalidFormat ? { dateFormat: { format: this.getFormat() } } : null;
+    }
+    /** The form control validator for the min date. */
+    minValidator() {
+        const controlValue = this.date;
+        const siDatepickerConfig = this.siDatepickerConfig();
+        const min = getMinDate(siDatepickerConfig?.minDate);
+        const withTime = siDatepickerConfig?.showTime;
+        return !min ||
+            !isValid(controlValue) ||
+            (withTime ? controlValue >= min : compareDate(controlValue, min) >= 0)
+            ? null
+            : { minDate: { min, actual: controlValue } };
+    }
+    /** The form control validator for the min date. */
+    maxValidator() {
+        const controlValue = this.date;
+        const siDatepickerConfig = this.siDatepickerConfig();
+        const max = getMaxDate(siDatepickerConfig?.maxDate);
+        const withTime = siDatepickerConfig?.showTime;
+        return !max ||
+            !isValid(controlValue) ||
+            (withTime ? controlValue <= max : compareDate(controlValue, max) <= 0)
+            ? null
+            : { maxDate: { max, actual: controlValue } };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDateInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: SiDateInputDirective, isStandalone: true, selector: "[siDateInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, siDatepickerConfig: { classPropertyName: "siDatepickerConfig", publicName: "siDatepickerConfig", isSignal: true, isRequired: false, transformFunction: null }, dateInputDebounceTime: { classPropertyName: "dateInputDebounceTime", publicName: "dateInputDebounceTime", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, errormessageId: { classPropertyName: "errormessageId", publicName: "errormessageId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { siDatepickerConfig: "siDatepickerConfigChange", siDatepickerDisabledTime: "siDatepickerDisabledTime", stateChange: "stateChange", dateChange: "dateChange" }, host: { listeners: { "input": "onInput($event.target.value)", "blur": "onBlur($event)" }, properties: { "attr.id": "id()", "attr.disabled": "disabled() || null", "attr.readonly": "readonly() || null", "class.readonly": "readonly()", "attr.aria-describedby": "errormessageId()", "value": "dateString()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: SiDateInputDirective,
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: SiDateInputDirective,
+                multi: true
+            },
+            {
+                provide: SI_FORM_ITEM_CONTROL,
+                useExisting: SiDateInputDirective
+            }
+        ], exportAs: ["siDateInput"], usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDateInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siDateInput]',
+                    exportAs: 'siDateInput',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: SiDateInputDirective,
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: SiDateInputDirective,
+                            multi: true
+                        },
+                        {
+                            provide: SI_FORM_ITEM_CONTROL,
+                            useExisting: SiDateInputDirective
+                        }
+                    ],
+                    host: {
+                        '[attr.id]': 'id()',
+                        '[attr.disabled]': 'disabled() || null',
+                        '[attr.readonly]': 'readonly() || null',
+                        '[class.readonly]': 'readonly()',
+                        '[attr.aria-describedby]': 'errormessageId()',
+                        '[value]': 'dateString()'
+                    }
+                }]
+        }], propDecorators: { onInput: [{
+                type: HostListener,
+                args: ['input', ['$event.target.value']]
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur', ['$event']]
+            }] } });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiCalendarDateCellDirective {
+    cell = input.required();
+    compareAdapter = input.required();
+    /** @defaultValue inject(ElementRef) */
+    ref = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCalendarDateCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: SiCalendarDateCellDirective, isStandalone: true, selector: "[siCalendarDateCell]", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, compareAdapter: { classPropertyName: "compareAdapter", publicName: "compareAdapter", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.aria-disabled": "cell().disabled", "class.disabled": "cell().disabled", "attr.aria-label": "cell().ariaLabel", "class.today": "this.cell().isToday", "attr.aria-current": "this.cell().isToday ? \"date\" : null" }, classAttribute: "si-calendar-date-cell" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCalendarDateCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siCalendarDateCell]',
+                    host: {
+                        class: 'si-calendar-date-cell',
+                        '[attr.aria-disabled]': 'cell().disabled',
+                        '[class.disabled]': 'cell().disabled',
+                        '[attr.aria-label]': 'cell().ariaLabel',
+                        '[class.today]': 'this.cell().isToday',
+                        '[attr.aria-current]': 'this.cell().isToday ? "date" : null'
+                    }
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Compare dates in the month view.
+ */
+class DayCompareAdapter {
+    isAfter(current, start) {
+        return isAfter(current, start);
+    }
+    isBetween(current, from, to) {
+        return isBetween(current, from, to);
+    }
+    isEqual(current, other) {
+        return isSameDate(current, other);
+    }
+    isEqualOrBefore(current, other) {
+        return isSameOrBefore(current, other);
+    }
+    isEqualOrBetween(current, from, to) {
+        return isSameOrBetween(current, from, to);
+    }
+}
+/**
+ * Compare dates in the year view.
+ */
+class MonthCompareAdapter {
+    isAfter(current, start) {
+        return isAfterMonth(current, start);
+    }
+    isBetween(current, from, to) {
+        return isBetweenMonth(current, from, to);
+    }
+    isEqual(current, other) {
+        return isSameMonth(current, other);
+    }
+    isEqualOrBefore(current, other) {
+        return isSameOrBeforeMonth(current, other);
+    }
+    isEqualOrBetween(current, from, to) {
+        return isSameOrBetweenMonth(current, from, to);
+    }
+}
+class YearCompareAdapter {
+    isAfter(current, other) {
+        return isAfterYear(current, other);
+    }
+    isBetween(current, from, to) {
+        return isBetweenYears(current, from, to);
+    }
+    isEqual(current, other) {
+        return isSameYear(current, other);
+    }
+    isEqualOrBefore(current, other) {
+        if (!other) {
+            return false;
+        }
+        return isSameOrBeforeYear(current, other);
+    }
+    isEqualOrBetween(current, from, to) {
+        return isSameOrBetweenYears(current, from, to);
+    }
+}
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Base interface for selections.
+ */
+class SelectionStrategy {
+    compare;
+    constructor(compare) {
+        this.compare = compare;
+    }
+}
+/**
+ * Strategy the handle single selection within the {@link SiCalendarBodyComponent}.
+ */
+class SingleSelectionStrategy extends SelectionStrategy {
+    isSelected(cell, start, end) {
+        return this.compare.isEqual(cell.valueRaw, start);
+    }
+    inRange(cell, start, end) {
+        return false;
+    }
+    isRangeSelected(cell, date) {
+        return false;
+    }
+    previewRangeHover(cell, hoverCell, start) {
+        return false;
+    }
+    previewRangeHoverEnd(cell, hoverCell, start) {
+        return false;
+    }
+}
+/**
+ * Strategy the handle range selection within the {@link SiCalendarBodyComponent}.
+ */
+class RangeSelectionStrategy extends SelectionStrategy {
+    isSelected(cell, start, end) {
+        return this.compare.isEqual(cell.valueRaw, start) || this.compare.isEqual(cell.valueRaw, end);
+    }
+    inRange(c, start, end) {
+        if (!start || !end) {
+            return false;
+        }
+        return this.compare.isBetween(c.valueRaw, start, end);
+    }
+    isRangeSelected(cell, date) {
+        return this.compare.isEqual(cell.valueRaw, date);
+    }
+    previewRangeHover(cell, hoverCell, start) {
+        if (!hoverCell || cell.disabled || !start) {
+            return false;
+        }
+        return (this.compare.isAfter(cell.valueRaw, start) &&
+            this.compare.isEqualOrBefore(cell.valueRaw, hoverCell.valueRaw));
+    }
+    previewRangeHoverEnd(cell, hoverCell, start) {
+        if (!hoverCell || cell.disabled || !start) {
+            return false;
+        }
+        return (this.compare.isAfter(cell.valueRaw, start) &&
+            this.compare.isEqual(cell.valueRaw, hoverCell.valueRaw));
+    }
+}
+class SiCalendarBodyComponent {
+    /** The active date, the cell which will receive the focus. */
+    focusedDate = model.required();
+    /** The date which shall be indicated as currently selected. */
+    startDate = input();
+    /** Selected end value which is only considered with enableRangeSelection. */
+    endDate = input();
+    /**
+     * The cells to display in the table.
+     *
+     * @defaultValue []
+     */
+    rows = input([]);
+    /**
+     * Labels for each row, which can be used to display the week number.
+     * @defaultValue undefined
+     */
+    rowLabels = input(undefined);
+    /**
+     * Additional row label CSS class(es).
+     *
+     * @defaultValue []
+     */
+    rowLabelCssClasses = input([]);
+    /**
+     * Choose the selection strategy between single or range selection.
+     * @defaultValue false
+     */
+    enableRangeSelection = input(false);
+    /**
+     * Indicate whether a range preview shall be displayed.
+     * It's necessary since to display a preview also datepicker has a valid endDate.
+     *
+     * @defaultValue true
+     */
+    previewRange = input(true, { transform: booleanAttribute });
+    /** The cell which which has the mouse hover. */
+    activeHover = model();
+    /**
+     * Compare date functions which are necessary to compare a the dates according the current view.
+     *
+     * @defaultValue new DayCompareAdapter()
+     */
+    compareAdapter = input(new DayCompareAdapter());
+    /** Emits when a user select a cell via click, space or enter. */
+    selectedValueChange = output();
+    calendarDateCells = viewChildren(SiCalendarDateCellDirective);
+    selection = computed(() => this.enableRangeSelection()
+        ? new RangeSelectionStrategy(this.compareAdapter())
+        : new SingleSelectionStrategy(this.compareAdapter()));
+    /**
+     * Focus calendar cell which is marked as active cell.
+     */
+    focusActiveCell() {
+        setTimeout(() => {
+            const focusedDateCells = this.calendarDateCells().filter(dateCell => this.compareAdapter().isEqual(this.focusedDate(), dateCell.cell().valueRaw));
+            if (focusedDateCells.length > 0) {
+                focusedDateCells[0].ref.nativeElement.focus();
+            }
+        });
+    }
+    isActive(cell) {
+        return this.compareAdapter().isEqual(this.focusedDate(), cell.valueRaw);
+    }
+    cellCss(cell) {
+        return cell.cssClasses;
+    }
+    emitActiveHover(cell) {
+        this.activeHover.set(cell);
+    }
+    emitSelectCell(selection) {
+        if (selection.disabled) {
+            return;
+        }
+        this.selectedValueChange.emit(selection.valueRaw);
+    }
+    emitActiveDateChange(cell) {
+        if (!cell.disabled && !cell.isPreview) {
+            // To provide a date-range preview it is necessary to maintain hoverCell also in case of keyboard usage
+            this.emitActiveHover(cell);
+            this.focusedDate.set(cell.valueRaw);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCalendarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiCalendarBodyComponent, isStandalone: true, selector: "[si-calendar-body]", inputs: { focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: true, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowLabels: { classPropertyName: "rowLabels", publicName: "rowLabels", isSignal: true, isRequired: false, transformFunction: null }, rowLabelCssClasses: { classPropertyName: "rowLabelCssClasses", publicName: "rowLabelCssClasses", isSignal: true, isRequired: false, transformFunction: null }, enableRangeSelection: { classPropertyName: "enableRangeSelection", publicName: "enableRangeSelection", isSignal: true, isRequired: false, transformFunction: null }, previewRange: { classPropertyName: "previewRange", publicName: "previewRange", isSignal: true, isRequired: false, transformFunction: null }, activeHover: { classPropertyName: "activeHover", publicName: "activeHover", isSignal: true, isRequired: false, transformFunction: null }, compareAdapter: { classPropertyName: "compareAdapter", publicName: "compareAdapter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", activeHover: "activeHoverChange", selectedValueChange: "selectedValueChange" }, host: { classAttribute: "si-calendar-body" }, viewQueries: [{ propertyName: "calendarDateCells", predicate: SiCalendarDateCellDirective, descendants: true, isSignal: true }], exportAs: ["siCalendarBody"], ngImport: i0, template: "@for (row of rows(); track rowIndex; let rowIndex = $index) {\n  <tr role=\"row\">\n    <!-- Typically used for week numbers -->\n    @if (rowLabels()) {\n      <td class=\"si-calendar-row-label\" [attr.data-row]=\"rowIndex\" [ngClass]=\"rowLabelCssClasses()\">\n        {{ rowLabels()?.at(rowIndex) ?? '' }}\n      </td>\n    }\n    @for (col of row; track colIndex; let colIndex = $index) {\n      <td\n        role=\"gridcell\"\n        class=\"si-calendar-cell\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-col]=\"colIndex\"\n        [class.range-hover]=\"\n          previewRange() && selection().previewRangeHover(col, activeHover(), startDate())\n        \"\n        [class.range-hover-end]=\"\n          previewRange() && selection().previewRangeHoverEnd(col, activeHover(), startDate())\n        \"\n        [class.range]=\"selection().inRange(col, startDate(), endDate())\"\n        [class.range-start]=\"selection().isRangeSelected(col, startDate())\"\n        [class.range-end]=\"selection().isRangeSelected(col, endDate())\"\n      >\n        <button\n          siCalendarDateCell\n          type=\"button\"\n          [cell]=\"col\"\n          [compareAdapter]=\"compareAdapter()\"\n          [ngClass]=\"cellCss(col)\"\n          [attr.cdkFocusInitial]=\"isActive(col) ? '' : null\"\n          [class.selected]=\"selection().isSelected(col, startDate(), endDate())\"\n          [class.text-secondary]=\"\n            col.isPreview &&\n            !col.disabled &&\n            !selection().isRangeSelected(col, startDate()) &&\n            !selection().isRangeSelected(col, endDate()) &&\n            !selection().inRange(col, startDate(), endDate())\n          \"\n          [tabindex]=\"isActive(col) ? '0' : '-1'\"\n          (mouseover)=\"emitActiveHover(col)\"\n          (click)=\"emitSelectCell(col)\"\n          (focus)=\"emitActiveDateChange(col)\"\n        >\n          {{ col.displayValue }}\n        </button>\n      </td>\n    }\n  </tr>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: SiCalendarDateCellDirective, selector: "[siCalendarDateCell]", inputs: ["cell", "compareAdapter"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCalendarBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[si-calendar-body]', exportAs: 'siCalendarBody', imports: [NgClass, A11yModule, SiCalendarDateCellDirective], host: {
+                        class: 'si-calendar-body'
+                    }, template: "@for (row of rows(); track rowIndex; let rowIndex = $index) {\n  <tr role=\"row\">\n    <!-- Typically used for week numbers -->\n    @if (rowLabels()) {\n      <td class=\"si-calendar-row-label\" [attr.data-row]=\"rowIndex\" [ngClass]=\"rowLabelCssClasses()\">\n        {{ rowLabels()?.at(rowIndex) ?? '' }}\n      </td>\n    }\n    @for (col of row; track colIndex; let colIndex = $index) {\n      <td\n        role=\"gridcell\"\n        class=\"si-calendar-cell\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-col]=\"colIndex\"\n        [class.range-hover]=\"\n          previewRange() && selection().previewRangeHover(col, activeHover(), startDate())\n        \"\n        [class.range-hover-end]=\"\n          previewRange() && selection().previewRangeHoverEnd(col, activeHover(), startDate())\n        \"\n        [class.range]=\"selection().inRange(col, startDate(), endDate())\"\n        [class.range-start]=\"selection().isRangeSelected(col, startDate())\"\n        [class.range-end]=\"selection().isRangeSelected(col, endDate())\"\n      >\n        <button\n          siCalendarDateCell\n          type=\"button\"\n          [cell]=\"col\"\n          [compareAdapter]=\"compareAdapter()\"\n          [ngClass]=\"cellCss(col)\"\n          [attr.cdkFocusInitial]=\"isActive(col) ? '' : null\"\n          [class.selected]=\"selection().isSelected(col, startDate(), endDate())\"\n          [class.text-secondary]=\"\n            col.isPreview &&\n            !col.disabled &&\n            !selection().isRangeSelected(col, startDate()) &&\n            !selection().isRangeSelected(col, endDate()) &&\n            !selection().inRange(col, startDate(), endDate())\n          \"\n          [tabindex]=\"isActive(col) ? '0' : '-1'\"\n          (mouseover)=\"emitActiveHover(col)\"\n          (click)=\"emitSelectCell(col)\"\n          (focus)=\"emitActiveDateChange(col)\"\n        >\n          {{ col.displayValue }}\n        </button>\n      </td>\n    }\n  </tr>\n}\n" }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiCalendarDirectionButtonComponent {
+    ariaLabel = input.required();
+    /** @defaultValue false */
+    disabled = input(false, { transform: booleanAttribute });
+    direction = input();
+    /**
+     * Emit on button click.
+     */
+    clicked = output();
+    icon = computed(() => this.direction() === 'left' ? this.icons.elementLeft2 : this.icons.elementRight2);
+    buttonClass = computed(() => this.direction() === 'left' ? 'previous-button' : 'next-button');
+    icons = addIcons({ elementLeft2, elementRight2 });
+    onClick() {
+        this.clicked.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCalendarDirectionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: SiCalendarDirectionButtonComponent, isStandalone: true, selector: "si-calendar-direction-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `<button
+    role="button"
+    type="button"
+    class="btn btn-circle btn-sm btn-tertiary"
+    [ngClass]="buttonClass()"
+    [disabled]="disabled() || null"
+    [attr.aria-label]="ariaLabel()"
+    (click)="onClick()"
+  >
+    <si-icon-next class="icon flip-rtl" [icon]="icon()" />
+  </button>`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCalendarDirectionButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'si-calendar-direction-button',
+                    template: `<button
+    role="button"
+    type="button"
+    class="btn btn-circle btn-sm btn-tertiary"
+    [ngClass]="buttonClass()"
+    [disabled]="disabled() || null"
+    [attr.aria-label]="ariaLabel()"
+    (click)="onClick()"
+  >
+    <si-icon-next class="icon flip-rtl" [icon]="icon()" />
+  </button>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgClass, SiIconNextComponent]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Helper directive to set the initial focus to the calendar body cell.
+ */
+class SiInitialFocusComponent {
+    /** The cell which has the mouse hover. */
+    activeHover = model();
+    /** The date which is displayed as selected. */
+    startDate = input();
+    /** The date which is displayed as selected end. The value is only considered with enableRangeSelection. */
+    endDate = input();
+    /**
+     * Guard to set the focus during ngAfterViewInit, we just set the focus after we first initialized the view
+     *
+     * @defaultValue true
+     */
+    initialFocus = input(true);
+    /** The minimum selectable date. */
+    minDate = input();
+    /** The maximum selectable date. */
+    maxDate = input();
+    /**
+     * Optional input to control the minimum month the datepicker can show and the user can navigate.
+     * The `minMonth` can be larger than the `minDate` This option enables the usage of multiple
+     * datepickers next to each other while the more left calendar always
+     * shows an earlier month the more right one.
+     */
+    minMonth = input();
+    /**
+     * Optional input to control the maximum month the datepicker can show and the user can navigate.
+     * The `maxMonth` can be smaller than the `maxDate` This option enables the usage of multiple
+     * datepickers next to each other while the more left calendar always
+     * shows an earlier month the more right one.
+     */
+    maxMonth = input();
+    /** Aria label for the next button. Needed for a11y. */
+    previousLabel = input.required();
+    /**  Aria label for the next button. Needed for a11y. */
+    nextLabel = input.required();
+    /**
+     * Is range selection enabled, when enabled it shows a preview between the startDate and the focused date.
+     *
+     * @defaultValue false
+     */
+    isRangeSelection = input(false, { transform: booleanAttribute });
+    /**
+     * Indicate whether a range preview shall be displayed.
+     * When enabled a preview is visible between startDate and focusedDate.
+     *
+     * @defaultValue true
+     */
+    previewRange = input(true, { transform: booleanAttribute });
+    /**
+     * Emits when a new value is selected. In case where the value is null to
+     * user aborted the selection by Escape.
+     */
+    selectedValueChange = output();
+    /** The body of calendar table */
+    calendarBody = viewChild.required(SiCalendarBodyComponent);
+    ngAfterViewInit() {
+        if (this.initialFocus()) {
+            this.focusActiveCell();
+        }
+    }
+    /**
+     * Focus calendar cell which is marked as active cell.
+     */
+    focusActiveCell() {
+        this.calendarBody().focusActiveCell();
+    }
+    onActiveHoverChange(event) {
+        this.activeHover.set(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiInitialFocusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.6", type: SiInitialFocusComponent, isStandalone: true, selector: "ng-component", inputs: { activeHover: { classPropertyName: "activeHover", publicName: "activeHover", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minMonth: { classPropertyName: "minMonth", publicName: "minMonth", isSignal: true, isRequired: false, transformFunction: null }, maxMonth: { classPropertyName: "maxMonth", publicName: "maxMonth", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: true, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: true, transformFunction: null }, isRangeSelection: { classPropertyName: "isRangeSelection", publicName: "isRangeSelection", isSignal: true, isRequired: false, transformFunction: null }, previewRange: { classPropertyName: "previewRange", publicName: "previewRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeHover: "activeHoverChange", selectedValueChange: "selectedValueChange" }, viewQueries: [{ propertyName: "calendarBody", first: true, predicate: SiCalendarBodyComponent, descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiInitialFocusComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ''
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Show dates of a single month as table and handles the keyboard interactions.
+ * The focusedDate is handled according the keyboard interactions.
+ */
+class SiDaySelectionComponent extends SiInitialFocusComponent {
+    /**
+     * Indicate whether the week numbers shall be hidden.
+     *
+     * @defaultValue false
+     */
+    hideWeekNumbers = input(false, { transform: booleanAttribute });
+    /**
+     * Defines the starting day of the week. Default is `monday`.
+     *
+     * @defaultValue 'monday'
+     */
+    weekStartDay = input('monday');
+    /**
+     * The active date, the cell which will receive the focus.
+     * @defaultValue calendarUtils.today()
+     */
+    focusedDate = model.required();
+    /** Today button text */
+    todayLabel = input();
+    /** Aria label for calendar week column */
+    calenderWeekLabel = input();
+    /** Emits when the active focused date changed to another month / year, typically during keyboard navigation */
+    activeMonthChange = output();
+    /** Emits when the user requests a different to show a different view */
+    viewChange = output();
+    /** The translated list of week days. */
+    days = computed(() => getDayStrings(this.locale, this.weekStartDay()));
+    /** The week numbers which are shown as row label */
+    weekNumbers = computed(() => this.weeks().map(w => getWeekOfYear(w[0].valueRaw, this.weekStartDay()).toString()));
+    /**
+     * The current visible list of calendar days.
+     * Every time the focusedDate changes to either another month or year the list will be rebuild.
+     */
+    weeks = computed(() => {
+        const focusedDate = this.focusedDate();
+        const monthStart = getFirstDateInMonth(focusedDate);
+        const monthEnd = getLastDateInMonth(focusedDate);
+        /**
+         * We start the month with the first day in the week which has the effect that dates are
+         * visible which aren't in the active month.
+         */
+        const startDate = getWeekStartDate(monthStart, this.weekStartDay());
+        const minDate = this.minDate();
+        const maxDate = this.maxDate();
+        const weeks = [[], [], [], [], [], []];
+        let weekIndex = 0;
+        for (let i = 0, date = new Date(startDate); weeks[weeks.length - 1].length < 7; i++, date.setDate(date.getDate() + 1)) {
+            if (i > 0 && i % 7 === 0) {
+                weekIndex++;
+            }
+            const activeMonth = isSameOrBetween(date, monthStart, monthEnd);
+            const isToday = isSameDate(date, today());
+            const outOfRange = !isSameOrBetween(date, minDate, maxDate);
+            weeks.at(weekIndex)?.push({
+                value: date.getDate(),
+                disabled: outOfRange,
+                ariaLabel: date.toDateString(),
+                displayValue: date.getDate().toString(),
+                isPreview: !activeMonth,
+                isToday,
+                valueRaw: createDate(date),
+                cssClasses: ['day', activeMonth ? 'si-title-1' : 'si-body-1']
+            });
+        }
+        return weeks;
+    });
+    /** Compare date based on the current view */
+    compareAdapter = new DayCompareAdapter();
+    /** Disable today button if it is the same month */
+    isTodayButtonDisabled = computed(() => isSameMonth(today(), this.focusedDate()));
+    /**
+     * Indicate the previous button shall be disabled.
+     * This happens when the focusedDate is equal or before the minDate.
+     */
+    isPreviousButtonDisabled = computed(() => {
+        const minDate = this.minDate();
+        const focusedDate = this.focusedDate();
+        return minDate && (isSameMonth(focusedDate, minDate) || isAfterMonth(minDate, focusedDate));
+    });
+    /**
+     * Indicate the next button shall be disabled.
+     * This happens when the focusedDate is equal or after the maxDate.
+     */
+    isNextButtonDisabled = computed(() => {
+        const maxDate = this.maxDate();
+        const focusedDate = this.focusedDate();
+        return maxDate && (isSameMonth(focusedDate, maxDate) || isAfterMonth(focusedDate, maxDate));
+    });
+    locale = inject(LOCALE_ID).toString();
+    calendarBodyKeyDown(event) {
+        const isRtl = isRTL();
+        switch (event.key) {
+            case 'ArrowLeft':
+                this.updateFocusedDateByDay(isRtl ? 1 : -1);
+                break;
+            case 'ArrowRight':
+                this.updateFocusedDateByDay(isRtl ? -1 : 1);
+                break;
+            case 'ArrowUp':
+                this.updateFocusedDateByDay(-7);
+                break;
+            case 'ArrowDown':
+                this.updateFocusedDateByDay(7);
+                break;
+            case 'Home':
+                this.updateFocusedDate(getWeekStartDate(this.focusedDate(), this.weekStartDay()));
+                break;
+            case 'End':
+                this.updateFocusedDate(getWeekEndDate(this.focusedDate(), this.weekStartDay()));
+                break;
+            case 'PageDown':
+                this.updateFocusedDateByMonth(1);
+                break;
+            case 'PageUp':
+                this.updateFocusedDateByMonth(-1);
+                break;
+            case 'Enter':
+            case 'Space':
+            default:
+                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
+                return;
+        }
+        // Prevent unexpected default actions such as form submission.
+        event.preventDefault();
+    }
+    updateFocusedDateByDay(offset) {
+        this.updateFocusedDate(addDaysInRange(this.focusedDate(), offset, this.minDate(), this.maxDate()));
+    }
+    updateFocusedDateByMonth(offset) {
+        this.updateFocusedDate(addMonthsInRange(this.focusedDate(), offset, this.minDate(), this.maxDate()));
+    }
+    updateFocusedDate(newDate) {
+        const prevDate = this.focusedDate();
+        if (!isSameDate(prevDate, newDate)) {
+            this.focusedDate.set(newDate);
+            if (isAnotherMonthOrYear(newDate, prevDate)) {
+                this.activeMonthChange.emit(newDate);
+            }
+            this.focusActiveCell();
+        }
+    }
+    /**
+     * Update month of focusedDate.
+     * @param offset -1 or -1.
+     */
+    setMonthOffset(offset) {
+        // Only update emit focusedDate since the focus shall stay on the button.
+        const actualMonth = addMonthsInRange(this.focusedDate(), offset, this.minDate(), this.maxDate());
+        this.focusedDate.set(actualMonth);
+        this.activeMonthChange.emit(actualMonth);
+    }
+    /** Change the focusedDate to today */
+    goToToday() {
+        this.focusedDate.set(today());
+        this.focusActiveCell();
+    }
+    emitSelectedValue(selected) {
+        if (selected !== this.startDate() || selected !== this.endDate()) {
+            this.selectedValueChange.emit(selected);
+        }
+    }
+    emitActiveDate(active) {
+        this.focusedDate.set(active);
+    }
+    emitViewChange(view) {
+        this.viewChange.emit(view);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDaySelectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiDaySelectionComponent, isStandalone: true, selector: "si-day-selection", inputs: { hideWeekNumbers: { classPropertyName: "hideWeekNumbers", publicName: "hideWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, weekStartDay: { classPropertyName: "weekStartDay", publicName: "weekStartDay", isSignal: true, isRequired: false, transformFunction: null }, focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: true, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, calenderWeekLabel: { classPropertyName: "calenderWeekLabel", publicName: "calenderWeekLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", activeMonthChange: "activeMonthChange", viewChange: "viewChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"header\">\n  <si-calendar-direction-button\n    direction=\"left\"\n    [ariaLabel]=\"previousLabel() | translate\"\n    [disabled]=\"isPreviousButtonDisabled()\"\n    (clicked)=\"setMonthOffset(-1)\"\n  />\n  <div class=\"flex-fill\">\n    <button\n      type=\"button\"\n      class=\"open-month-view flex-fill text-end px-2 btn btn-tertiary calendar-button\"\n      tabindex=\"0\"\n      (click)=\"emitViewChange('month')\"\n    >\n      {{ focusedDate() | date: 'MMMM' }}\n    </button>\n    <button\n      type=\"button\"\n      class=\"open-year-view flex-fill text-start px-2 btn btn-tertiary calendar-button\"\n      tabindex=\"0\"\n      (click)=\"emitViewChange('year')\"\n    >\n      {{ focusedDate() | date: 'yyyy' }}\n    </button>\n  </div>\n  <si-calendar-direction-button\n    direction=\"right\"\n    [ariaLabel]=\"nextLabel() | translate\"\n    [disabled]=\"isNextButtonDisabled()\"\n    (clicked)=\"setMonthOffset(1)\"\n  />\n</div>\n<table class=\"px-9 mt-6\" role=\"grid\">\n  <thead class=\"si-calendar-table-header\">\n    <tr>\n      @if (!hideWeekNumbers()) {\n        <th scope=\"col\" class=\"week-num\">\n          <span class=\"visually-hidden\">{{ calenderWeekLabel() | translate }}</span>\n        </th>\n      }\n      @for (day of days(); track $index) {\n        <th scope=\"col\">\n          <span class=\"si-hidden-xs si-hidden-sm\">{{ day }}</span>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody\n    si-calendar-body\n    rowLabelCssClasses=\"week-num\"\n    [focusedDate]=\"focusedDate()\"\n    [compareAdapter]=\"compareAdapter\"\n    [startDate]=\"startDate()\"\n    [endDate]=\"endDate()\"\n    [enableRangeSelection]=\"isRangeSelection()\"\n    [previewRange]=\"previewRange()\"\n    [rows]=\"weeks()\"\n    [rowLabels]=\"hideWeekNumbers() ? undefined : weekNumbers()\"\n    [activeHover]=\"activeHover()\"\n    (activeHoverChange)=\"onActiveHoverChange($event)\"\n    (selectedValueChange)=\"emitSelectedValue($event)\"\n    (focusedDateChange)=\"emitActiveDate($event!)\"\n    (keydown)=\"calendarBodyKeyDown($event)\"\n  >\n  </tbody>\n</table>\n<div class=\"footer pt-2 ps-8 pe-8\">\n  <button\n    type=\"button\"\n    class=\"today-button btn btn-tertiary flex-fill\"\n    [disabled]=\"isTodayButtonDisabled()\"\n    (click)=\"goToToday()\"\n  >\n    {{ todayLabel() ?? 'Today' | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: SiCalendarBodyComponent, selector: "[si-calendar-body]", inputs: ["focusedDate", "startDate", "endDate", "rows", "rowLabels", "rowLabelCssClasses", "enableRangeSelection", "previewRange", "activeHover", "compareAdapter"], outputs: ["focusedDateChange", "activeHoverChange", "selectedValueChange"], exportAs: ["siCalendarBody"] }, { kind: "component", type: SiCalendarDirectionButtonComponent, selector: "si-calendar-direction-button", inputs: ["ariaLabel", "disabled", "direction"], outputs: ["clicked"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i2.SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDaySelectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-day-selection', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        DatePipe,
+                        SiCalendarBodyComponent,
+                        SiCalendarDirectionButtonComponent,
+                        SiTranslateModule
+                    ], template: "<div class=\"header\">\n  <si-calendar-direction-button\n    direction=\"left\"\n    [ariaLabel]=\"previousLabel() | translate\"\n    [disabled]=\"isPreviousButtonDisabled()\"\n    (clicked)=\"setMonthOffset(-1)\"\n  />\n  <div class=\"flex-fill\">\n    <button\n      type=\"button\"\n      class=\"open-month-view flex-fill text-end px-2 btn btn-tertiary calendar-button\"\n      tabindex=\"0\"\n      (click)=\"emitViewChange('month')\"\n    >\n      {{ focusedDate() | date: 'MMMM' }}\n    </button>\n    <button\n      type=\"button\"\n      class=\"open-year-view flex-fill text-start px-2 btn btn-tertiary calendar-button\"\n      tabindex=\"0\"\n      (click)=\"emitViewChange('year')\"\n    >\n      {{ focusedDate() | date: 'yyyy' }}\n    </button>\n  </div>\n  <si-calendar-direction-button\n    direction=\"right\"\n    [ariaLabel]=\"nextLabel() | translate\"\n    [disabled]=\"isNextButtonDisabled()\"\n    (clicked)=\"setMonthOffset(1)\"\n  />\n</div>\n<table class=\"px-9 mt-6\" role=\"grid\">\n  <thead class=\"si-calendar-table-header\">\n    <tr>\n      @if (!hideWeekNumbers()) {\n        <th scope=\"col\" class=\"week-num\">\n          <span class=\"visually-hidden\">{{ calenderWeekLabel() | translate }}</span>\n        </th>\n      }\n      @for (day of days(); track $index) {\n        <th scope=\"col\">\n          <span class=\"si-hidden-xs si-hidden-sm\">{{ day }}</span>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody\n    si-calendar-body\n    rowLabelCssClasses=\"week-num\"\n    [focusedDate]=\"focusedDate()\"\n    [compareAdapter]=\"compareAdapter\"\n    [startDate]=\"startDate()\"\n    [endDate]=\"endDate()\"\n    [enableRangeSelection]=\"isRangeSelection()\"\n    [previewRange]=\"previewRange()\"\n    [rows]=\"weeks()\"\n    [rowLabels]=\"hideWeekNumbers() ? undefined : weekNumbers()\"\n    [activeHover]=\"activeHover()\"\n    (activeHoverChange)=\"onActiveHoverChange($event)\"\n    (selectedValueChange)=\"emitSelectedValue($event)\"\n    (focusedDateChange)=\"emitActiveDate($event!)\"\n    (keydown)=\"calendarBodyKeyDown($event)\"\n  >\n  </tbody>\n</table>\n<div class=\"footer pt-2 ps-8 pe-8\">\n  <button\n    type=\"button\"\n    class=\"today-button btn btn-tertiary flex-fill\"\n    [disabled]=\"isTodayButtonDisabled()\"\n    (click)=\"goToToday()\"\n  >\n    {{ todayLabel() ?? 'Today' | translate }}\n  </button>\n</div>\n" }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Show months of a single year as table and handles the keyboard interactions.
+ * The focus and focusedDate is handled according the keyboard interactions.
+ */
+class SiMonthSelectionComponent extends SiInitialFocusComponent {
+    /**
+     * The translated list of months.
+     *
+     * @defaultValue []
+     */
+    months = input([]);
+    /**
+     * The active date, the cell which will receive the focus.
+     */
+    focusedDate = model.required();
+    /** Emits when the active focused date is changed to another month / year, typically during keyboard navigation. */
+    activeMonthChange = output();
+    /** Emits when the user requests a different to show a different view. */
+    viewChange = output();
+    /** Listen Escape event to switch view back */
+    triggerEsc(event) {
+        this.selectedValueChange.emit(null);
+        event.preventDefault();
+        event.stopPropagation(); // Prevents the overlay from closing.
+    }
+    /**
+     * The current visible list of calendar months.
+     * Every time the focusedDate changes to another year the list will update.
+     */
+    monthCells = [];
+    compareAdapter = new MonthCompareAdapter();
+    /** Number of column before the row is wrapped */
+    columnCount = 2;
+    /**
+     * Indicate the previous button shall be disabled.
+     * This happens when the focusedDate is equal or before the minDate.
+     */
+    isPreviousButtonDisabled = computed(() => {
+        const minDate = this.minDate();
+        const focusedDate = this.focusedDate();
+        return minDate && (isSameYear(focusedDate, minDate) || isAfterYear(minDate, focusedDate));
+    });
+    /**
+     * Indicate the next button shall be disabled.
+     * This happens when the focusedDate is equal or after the maxDate.
+     */
+    isNextButtonDisabled = computed(() => {
+        const maxDate = this.maxDate();
+        const focusedDate = this.focusedDate();
+        return maxDate && (isSameYear(focusedDate, maxDate) || isAfterYear(focusedDate, maxDate));
+    });
+    ngOnChanges(changes) {
+        if (changes.maxDate ||
+            changes.minDate ||
+            changes.maxMonth ||
+            changes.minMonth ||
+            changes.focusedDate) {
+            this.initView();
+        }
+    }
+    calendarBodyKeyDown(event) {
+        const isRtl = isRTL();
+        switch (event.key) {
+            case 'ArrowLeft':
+                this.updateFocusedDate(isRtl ? 1 : -1);
+                break;
+            case 'ArrowRight':
+                this.updateFocusedDate(isRtl ? -1 : 1);
+                break;
+            case 'ArrowUp':
+                this.updateFocusedDate(-1 * this.columnCount);
+                break;
+            case 'ArrowDown':
+                this.updateFocusedDate(this.columnCount);
+                break;
+            case 'Escape':
+                this.selectedValueChange.emit(null);
+                event.preventDefault();
+                event.stopPropagation(); // Prevents the overlay from closing.
+                return;
+            case 'Enter':
+            case 'Space':
+            default:
+                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
+                return;
+        }
+        // Prevent unexpected default actions such as form submission.
+        event.preventDefault();
+    }
+    updateFocusedDate(offset) {
+        const prevDate = this.focusedDate();
+        const newDate = addMonthsInRange(prevDate, offset, this.minDate(), this.maxDate());
+        this.focusedDate.set(newDate);
+        if (!this.compareAdapter.isEqual(prevDate, newDate)) {
+            // Synchronize focusedDate with year view
+            this.focusActiveCell();
+            this.emitActiveMonthChange(newDate, prevDate);
+        }
+    }
+    /**
+     * Add offset to year and update focusedDate.
+     */
+    setYearOffset(offset) {
+        const prevDate = this.focusedDate();
+        const newActive = createDate(prevDate);
+        newActive.setFullYear(newActive.getFullYear() + offset);
+        this.focusedDate.set(newActive);
+        this.emitActiveMonthChange(newActive, prevDate);
+    }
+    emitSelectedValue(selected) {
+        this.selectedValueChange.emit(selected);
+    }
+    emitFocusedDate(focused) {
+        // Take over the current day on month changes
+        focused.setDate(this.focusedDate().getDate());
+        this.focusedDate.set(focused);
+    }
+    emitActiveMonthChange(focus, prevFocus) {
+        if (isAnotherYear(focus, prevFocus)) {
+            this.activeMonthChange.emit(focus);
+        }
+    }
+    emitViewChange() {
+        this.viewChange.emit('year');
+    }
+    /**
+     * Initialize view based on the focusedDate.
+     */
+    initView() {
+        this.monthCells = [];
+        let row = [];
+        // The cell date object needs to be the first to prevent that we jump to the next month when
+        // setting the month. For example the focusedDate is 31. setting february would result in the
+        // 3. March.
+        const startDate = getFirstDateInYear(this.focusedDate());
+        const today$1 = today();
+        const months = this.months();
+        for (let i = 0; i <= 11; i++) {
+            if (i > 0 && i % this.columnCount === 0) {
+                this.monthCells.push(row);
+                row = [];
+            }
+            const date = new Date(startDate);
+            date.setMonth(i);
+            const isToday = this.compareAdapter.isEqual(date, today$1);
+            const isDisabled = !this.compareAdapter.isEqualOrBetween(date, this.minDate(), this.maxDate());
+            row.push({
+                value: date.getDate(),
+                disabled: isDisabled,
+                ariaLabel: `${months[date.getMonth()]} ${this.focusedDate().getFullYear()}`,
+                displayValue: months[date.getMonth()],
+                isPreview: false,
+                isToday,
+                valueRaw: createDate(date),
+                cssClasses: ['month', 'si-title-1', 'text-truncate']
+            });
+        }
+        this.monthCells.push(row);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiMonthSelectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: SiMonthSelectionComponent, isStandalone: true, selector: "si-month-selection", inputs: { months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", activeMonthChange: "activeMonthChange", viewChange: "viewChange" }, host: { listeners: { "keydown.Escape": "triggerEsc($event)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n  <si-calendar-direction-button\n    direction=\"left\"\n    [ariaLabel]=\"previousLabel()\"\n    [disabled]=\"isPreviousButtonDisabled()\"\n    (clicked)=\"setYearOffset(-1)\"\n  />\n  <button\n    type=\"button\"\n    class=\"open-year-view flex-fill mx-4 btn btn-tertiary calendar-button\"\n    tabindex=\"0\"\n    (click)=\"emitViewChange()\"\n  >\n    {{ focusedDate() | date: 'yyyy' }}\n  </button>\n  <si-calendar-direction-button\n    direction=\"right\"\n    [ariaLabel]=\"nextLabel()\"\n    [disabled]=\"isNextButtonDisabled()\"\n    (clicked)=\"setYearOffset(1)\"\n  />\n</div>\n<table class=\"px-9 mt-6\" role=\"grid\">\n  <tbody\n    si-calendar-body\n    [focusedDate]=\"focusedDate()\"\n    [compareAdapter]=\"compareAdapter\"\n    [startDate]=\"startDate()\"\n    [endDate]=\"endDate()\"\n    [enableRangeSelection]=\"isRangeSelection()\"\n    [previewRange]=\"previewRange()\"\n    [rows]=\"monthCells\"\n    [activeHover]=\"activeHover()\"\n    (activeHoverChange)=\"onActiveHoverChange($event)\"\n    (selectedValueChange)=\"emitSelectedValue($event)\"\n    (focusedDateChange)=\"emitFocusedDate($event)\"\n    (keydown)=\"calendarBodyKeyDown($event)\"\n  >\n  </tbody>\n</table>\n", dependencies: [{ kind: "component", type: SiCalendarDirectionButtonComponent, selector: "si-calendar-direction-button", inputs: ["ariaLabel", "disabled", "direction"], outputs: ["clicked"] }, { kind: "component", type: SiCalendarBodyComponent, selector: "[si-calendar-body]", inputs: ["focusedDate", "startDate", "endDate", "rows", "rowLabels", "rowLabelCssClasses", "enableRangeSelection", "previewRange", "activeHover", "compareAdapter"], outputs: ["focusedDateChange", "activeHoverChange", "selectedValueChange"], exportAs: ["siCalendarBody"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiMonthSelectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-month-selection', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SiCalendarDirectionButtonComponent, SiCalendarBodyComponent, DatePipe], template: "<div class=\"header\">\n  <si-calendar-direction-button\n    direction=\"left\"\n    [ariaLabel]=\"previousLabel()\"\n    [disabled]=\"isPreviousButtonDisabled()\"\n    (clicked)=\"setYearOffset(-1)\"\n  />\n  <button\n    type=\"button\"\n    class=\"open-year-view flex-fill mx-4 btn btn-tertiary calendar-button\"\n    tabindex=\"0\"\n    (click)=\"emitViewChange()\"\n  >\n    {{ focusedDate() | date: 'yyyy' }}\n  </button>\n  <si-calendar-direction-button\n    direction=\"right\"\n    [ariaLabel]=\"nextLabel()\"\n    [disabled]=\"isNextButtonDisabled()\"\n    (clicked)=\"setYearOffset(1)\"\n  />\n</div>\n<table class=\"px-9 mt-6\" role=\"grid\">\n  <tbody\n    si-calendar-body\n    [focusedDate]=\"focusedDate()\"\n    [compareAdapter]=\"compareAdapter\"\n    [startDate]=\"startDate()\"\n    [endDate]=\"endDate()\"\n    [enableRangeSelection]=\"isRangeSelection()\"\n    [previewRange]=\"previewRange()\"\n    [rows]=\"monthCells\"\n    [activeHover]=\"activeHover()\"\n    (activeHoverChange)=\"onActiveHoverChange($event)\"\n    (selectedValueChange)=\"emitSelectedValue($event)\"\n    (focusedDateChange)=\"emitFocusedDate($event)\"\n    (keydown)=\"calendarBodyKeyDown($event)\"\n  >\n  </tbody>\n</table>\n" }]
+        }], propDecorators: { triggerEsc: [{
+                type: HostListener,
+                args: ['keydown.Escape', ['$event']]
+            }] } });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Show months of a single year as table and handles the keyboard interactions.
+ * The focus and focusedDate is handled according the keyboard interactions.
+ */
+class SiYearSelectionComponent extends SiInitialFocusComponent {
+    /**
+     * The active date, the cell which will receive the focus.
+     */
+    focusedDate = model.required();
+    /** Emits when the active focused date changed to another month / year, typically during keyboard navigation. */
+    yearRangeChange = output();
+    /** Listen Escape event to switch view back */
+    triggerEsc(event) {
+        this.selectedValueChange.emit(null);
+        event.preventDefault();
+        event.stopPropagation(); // Prevents the overlay from closing.
+    }
+    /** Number of column before the row is wrapped */
+    columnCount = 3;
+    /** The number of years which shall be displayed, this number should be even and dividable by columnCount */
+    yearsToDisplay = 18;
+    /** Lower windows bound for displayed year range */
+    fromYear = signal(undefined);
+    /** Upper windows bound for displayed year range */
+    toYear = signal(undefined);
+    /**
+     * The current visible list of calendar years.
+     * Every time the focusedDate changes to another year the list will be rebuilt.
+     */
+    yearCells = [];
+    compareAdapter = new YearCompareAdapter();
+    /** Is previous button disabled based on the minDate. */
+    isPreviousButtonDisabled = computed(() => {
+        const minDate$1 = this.minDate();
+        const minMonth = this.minMonth();
+        if (!minDate$1 && !minMonth) {
+            return false;
+        }
+        const min = minDate(minDate$1, minMonth);
+        return (this.compareAdapter.isEqual(this.fromYear(), min) ||
+            this.compareAdapter.isAfter(min, this.fromYear()));
+    });
+    /** Is next button  disabled  based on the maxDate */
+    isNextButtonDisabled = computed(() => {
+        const maxDate = this.maxDate();
+        if (!maxDate) {
+            return false;
+        }
+        return (this.compareAdapter.isEqual(this.toYear(), maxDate) ||
+            this.compareAdapter.isAfter(this.toYear(), maxDate));
+    });
+    ngOnChanges(changes) {
+        if (changes.startDate || changes.focusedDate || changes.maxDate || changes.minDate) {
+            this.initView();
+        }
+    }
+    calendarBodyKeyDown(event) {
+        const isRtl = isRTL();
+        const oldActiveDate = this.focusedDate();
+        switch (event.key) {
+            case 'ArrowLeft':
+                this.setYearOffset(isRtl ? 1 : -1);
+                break;
+            case 'ArrowRight':
+                this.setYearOffset(isRtl ? -1 : 1);
+                break;
+            case 'ArrowUp':
+                this.setYearOffset(-1 * this.columnCount);
+                break;
+            case 'ArrowDown':
+                this.setYearOffset(this.columnCount);
+                break;
+            case 'PageUp':
+                this.setYearOffset(-1 * (oldActiveDate.getFullYear() - this.fromYear().getFullYear()));
+                break;
+            case 'PageDown':
+                this.setYearOffset(this.toYear().getFullYear() - oldActiveDate.getFullYear());
+                break;
+            case 'Escape':
+                this.selectedValueChange.emit(null);
+                event.preventDefault();
+                event.stopPropagation(); // Prevents the overlay from closing.
+                return;
+            case 'Enter':
+            case 'Space':
+            default:
+                // Don't prevent default or focus active cell on keys that we don't explicitly handle.
+                return;
+        }
+        if (!this.compareAdapter.isEqual(oldActiveDate, this.focusedDate())) {
+            this.focusActiveCell();
+        }
+        // Prevent unexpected default actions such as form submission.
+        event.preventDefault();
+    }
+    /**
+     * Change the active date and the range of displayed years.
+     * The windowOffset control the amount of ranges the view shall move forward or backward.
+     * The number of displayed years ia controlled by yearsToDisplay.
+     */
+    changeVisibleYearRange(windowOffset) {
+        const offset = windowOffset * this.yearsToDisplay;
+        this.setYearOffset(offset);
+    }
+    emitSelectedValue(selected) {
+        this.selectedValueChange.emit(selected);
+    }
+    /**
+     * Determine the year range start and end year.
+     * - Based on the active date this function will find the start and
+     * ending year of the current displayed range.
+     * - In case the focusedDate is either before or after the current range the
+     * start and end year will move the entire window (yearsToDisplay)
+     */
+    initYearRange() {
+        // Did we exceed the display current displayed year range
+        let changed = false;
+        const focusedDate = this.focusedDate();
+        const fromYear = this.fromYear();
+        const toYear = this.toYear();
+        if (!fromYear || !toYear) {
+            const start = focusedDate.getFullYear() - this.yearsToDisplay / 2;
+            this.fromYear.set(new Date(start, 0, 1));
+            this.toYear.set(new Date(start + this.yearsToDisplay - 1, 0, 1));
+            changed = true;
+        }
+        else if (this.compareAdapter.isAfter(focusedDate, toYear)) {
+            // Change window forward
+            const rangeDistance = Math.floor(Math.abs(focusedDate.getFullYear() - fromYear.getFullYear()) / this.yearsToDisplay);
+            const newFromYear = fromYear.getFullYear() + rangeDistance * this.yearsToDisplay;
+            this.fromYear.set(new Date(newFromYear, 0, 1));
+            this.toYear.set(new Date(newFromYear + this.yearsToDisplay - 1, 0, 1));
+            changed = true;
+        }
+        else if (this.compareAdapter.isAfter(fromYear, focusedDate)) {
+            // Change window backwards
+            const rangeDistance = Math.ceil(Math.abs(focusedDate.getFullYear() - fromYear.getFullYear()) / this.yearsToDisplay);
+            const newFromYear = fromYear.getFullYear() - rangeDistance * this.yearsToDisplay;
+            this.fromYear.set(new Date(newFromYear, 0, 1));
+            this.toYear.set(new Date(newFromYear + this.yearsToDisplay - 1, 0, 1));
+            changed = true;
+        }
+        if (changed) {
+            this.yearRangeChange.emit([this.fromYear(), this.toYear()]);
+        }
+    }
+    /**
+     * Initialize view based on the focusedDate.
+     */
+    initView() {
+        // Initial year limits
+        this.initYearRange();
+        this.yearCells = [];
+        let row = [];
+        // The cell date object needs to be the first to prevent that we jump to the next month when
+        // setting the month. For example the focusedDate is 31. setting february would result in the
+        // 3. March.
+        const startDate = getFirstDateInYear(this.fromYear());
+        const today$1 = today();
+        for (let i = 0; i < this.yearsToDisplay; i++) {
+            if (i > 0 && i % this.columnCount === 0) {
+                this.yearCells.push(row);
+                row = [];
+            }
+            const date = createDate(startDate);
+            date.setFullYear(date.getFullYear() + i);
+            const isToday = this.compareAdapter.isEqual(date, today$1);
+            const isDisabled = !this.compareAdapter.isEqualOrBetween(date, this.minDate(), this.maxDate());
+            const year = date.getFullYear().toString();
+            row.push({
+                value: date.getDate(),
+                disabled: isDisabled,
+                ariaLabel: year,
+                displayValue: year,
+                isPreview: false,
+                isToday,
+                valueRaw: createDate(date),
+                cssClasses: ['year', 'si-title-1']
+            });
+        }
+        this.yearCells.push(row);
+    }
+    /**
+     * Add offset to year and update focusedDate.
+     * If the new year is outside min/max date the year will set to the closest year in range.
+     */
+    setYearOffset(offset) {
+        const newActive = addYearsInRange(this.focusedDate(), offset, this.minDate(), this.maxDate());
+        this.focusedDate.set(newActive);
+        if (!this.fromYear() || !isBetween(this.focusedDate(), this.fromYear(), this.toYear())) {
+            // Re-calc years view
+            this.initView();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiYearSelectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: SiYearSelectionComponent, isStandalone: true, selector: "si-year-selection", inputs: { focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", yearRangeChange: "yearRangeChange" }, host: { listeners: { "keydown.Escape": "triggerEsc($event)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n  <si-calendar-direction-button\n    direction=\"left\"\n    [ariaLabel]=\"previousLabel()\"\n    [disabled]=\"isPreviousButtonDisabled()\"\n    (clicked)=\"changeVisibleYearRange(-1)\"\n  />\n  <span class=\"year-range-label flex-fill mx-4 si-title-1 text-secondary calendar-button\">\n    {{ fromYear() | date: 'yyyy' }} - {{ toYear() | date: 'yyyy' }}\n  </span>\n  <si-calendar-direction-button\n    direction=\"right\"\n    [ariaLabel]=\"nextLabel()\"\n    [disabled]=\"isNextButtonDisabled()\"\n    (clicked)=\"changeVisibleYearRange(1)\"\n  />\n</div>\n<table class=\"px-9 mt-6\" role=\"grid\">\n  <tbody\n    si-calendar-body\n    [focusedDate]=\"focusedDate()\"\n    [compareAdapter]=\"compareAdapter\"\n    [startDate]=\"startDate()\"\n    [endDate]=\"endDate()\"\n    [enableRangeSelection]=\"isRangeSelection()\"\n    [previewRange]=\"previewRange()\"\n    [rows]=\"yearCells\"\n    (selectedValueChange)=\"emitSelectedValue($event)\"\n    (keydown)=\"calendarBodyKeyDown($event)\"\n  >\n  </tbody>\n</table>\n", dependencies: [{ kind: "component", type: SiCalendarDirectionButtonComponent, selector: "si-calendar-direction-button", inputs: ["ariaLabel", "disabled", "direction"], outputs: ["clicked"] }, { kind: "component", type: SiCalendarBodyComponent, selector: "[si-calendar-body]", inputs: ["focusedDate", "startDate", "endDate", "rows", "rowLabels", "rowLabelCssClasses", "enableRangeSelection", "previewRange", "activeHover", "compareAdapter"], outputs: ["focusedDateChange", "activeHoverChange", "selectedValueChange"], exportAs: ["siCalendarBody"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiYearSelectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-year-selection', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SiCalendarDirectionButtonComponent, SiCalendarBodyComponent, DatePipe], template: "<div class=\"header\">\n  <si-calendar-direction-button\n    direction=\"left\"\n    [ariaLabel]=\"previousLabel()\"\n    [disabled]=\"isPreviousButtonDisabled()\"\n    (clicked)=\"changeVisibleYearRange(-1)\"\n  />\n  <span class=\"year-range-label flex-fill mx-4 si-title-1 text-secondary calendar-button\">\n    {{ fromYear() | date: 'yyyy' }} - {{ toYear() | date: 'yyyy' }}\n  </span>\n  <si-calendar-direction-button\n    direction=\"right\"\n    [ariaLabel]=\"nextLabel()\"\n    [disabled]=\"isNextButtonDisabled()\"\n    (clicked)=\"changeVisibleYearRange(1)\"\n  />\n</div>\n<table class=\"px-9 mt-6\" role=\"grid\">\n  <tbody\n    si-calendar-body\n    [focusedDate]=\"focusedDate()\"\n    [compareAdapter]=\"compareAdapter\"\n    [startDate]=\"startDate()\"\n    [endDate]=\"endDate()\"\n    [enableRangeSelection]=\"isRangeSelection()\"\n    [previewRange]=\"previewRange()\"\n    [rows]=\"yearCells\"\n    (selectedValueChange)=\"emitSelectedValue($event)\"\n    (keydown)=\"calendarBodyKeyDown($event)\"\n  >\n  </tbody>\n</table>\n" }]
+        }], propDecorators: { triggerEsc: [{
+                type: HostListener,
+                args: ['keydown.Escape', ['$event']]
+            }] } });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiTimepickerComponent {
+    static idCounter = 0;
+    /** @internal */
+    invalidHours = false;
+    /** @internal */
+    invalidMinutes = false;
+    /** @internal */
+    invalidSeconds = false;
+    /** @internal */
+    invalidMilliseconds = false;
+    /**
+     * @defaultValue
+     * ```
+     * `__si-timepicker-${SiTimepickerComponent.idCounter++}`
+     * ```
+     */
+    id = input(`__si-timepicker-${SiTimepickerComponent.idCounter++}`);
+    labelledby = inject(new HostAttributeToken('aria-labelledby'), {
+        optional: true
+    }) ?? `${this.id()}-label`;
+    /**
+     * All input fields will be disabled if set to true.
+     *
+     * @defaultValue false
+     */
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    disabledInput = input(false, { alias: 'disabled' });
+    /**
+     * @defaultValue 'hh'
+     */
+    hoursLabel = input('hh');
+    /**
+     * @defaultValue 'mm'
+     */
+    minutesLabel = input('mm');
+    /**
+     * @defaultValue 'ss'
+     */
+    secondsLabel = input('ss');
+    /**
+     * @defaultValue 'ms'
+     */
+    millisecondsLabel = input('ms');
+    /**
+     * Hide the labels of the input fields.
+     * @defaultValue false
+     */
+    hideLabels = input(false, { transform: booleanAttribute });
+    /**
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.HOURS:Hours`
+     * ```
+     */
+    hoursAriaLabel = input($localize `:@@SI_DATEPICKER.HOURS:Hours`);
+    /**
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.MINUTES:Minutes`
+     * ```
+     */
+    minutesAriaLabel = input($localize `:@@SI_DATEPICKER.MINUTES:Minutes`);
+    /**
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.SECONDS:Seconds`
+     * ```
+     */
+    secondsAriaLabel = input($localize `:@@SI_DATEPICKER.SECONDS:Seconds`);
+    /**
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.MILLISECONDS:Milliseconds`
+     * ```
+     */
+    millisecondsAriaLabel = input($localize `:@@SI_DATEPICKER.MILLISECONDS:Milliseconds`);
+    /**
+     * @defaultValue 'hh'
+     */
+    hoursPlaceholder = input('hh');
+    /**
+     * @defaultValue 'mm'
+     */
+    minutesPlaceholder = input('mm');
+    /**
+     * @defaultValue 'ss'
+     */
+    secondsPlaceholder = input('ss');
+    /**
+     * @defaultValue 'ms'
+     */
+    millisecondsPlaceholder = input('ms');
+    meridians = input();
+    /**
+     * @defaultValue 'am/pm'
+     */
+    meridiansLabel = input('am/pm');
+    /**
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.PERIOD:Period`
+     * ```
+     */
+    meridiansAriaLabel = input($localize `:@@SI_DATEPICKER.PERIOD:Period`);
+    /** @defaultValue true */
+    showMinutes = input(true, { transform: booleanAttribute });
+    /** @defaultValue false */
+    showSeconds = input(false, { transform: booleanAttribute });
+    /** @defaultValue false */
+    showMilliseconds = input(false, { transform: booleanAttribute });
+    /**
+     * Show time in 12-hour period including the select to toggle between AM/PM.
+     */
+    showMeridian = input();
+    /**
+     * A minimum time limit. The date part of the date object will be ignored.
+     */
+    min = input();
+    /**
+     * A maximum time limit. The date part of the date object will be ignored.
+     */
+    max = input();
+    /** @defaultValue false */
+    readonly = input(false, { transform: booleanAttribute });
+    isValid = output();
+    meridianChange = output();
+    inputCompleted = output();
+    inputParts = viewChildren('inputPart');
+    /** @internal */
+    errormessageId = `${this.id()}-errormessage`;
+    onChange = () => { };
+    onTouched = () => { };
+    // The following are the time values for the ui.
+    hours = '';
+    minutes = '';
+    seconds = '';
+    milliseconds = '';
+    periods = computed(() => {
+        const meridians = this.meridians();
+        return meridians?.length ? meridians : this.periodDefaults;
+    });
+    use12HourClock = computed(() => this.showMeridian() ?? getLocaleTimeFormat(this.locale, FormatWidth.Full).includes('a'));
+    disabled = computed(() => this.disabledInput() || this.disabledNgControl());
+    meridian = signal('');
+    disabledNgControl = signal(false);
+    locale = inject(LOCALE_ID).toString();
+    cdRef = inject(ChangeDetectorRef);
+    /**
+     * Holds the time as date object that is presented by this control.
+     */
+    time;
+    periodDefaults;
+    constructor() {
+        this.periodDefaults = getLocaleDayPeriods(this.locale, FormStyle.Format, TranslationWidth.Short).slice();
+    }
+    writeValue(obj) {
+        if (this.isValidDate(obj)) {
+            this.setTime(this.parseTime(obj));
+        }
+        else if (obj == null) {
+            this.setTime();
+        }
+        if (obj) {
+            this.isInputValid(this.hours, this.minutes, this.seconds, this.milliseconds, this.isPM());
+        }
+        this.cdRef.markForCheck();
+    }
+    /** @internal */
+    isPM() {
+        return this.use12HourClock() && this.meridian() === 'pm';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledNgControl.set(isDisabled);
+    }
+    /**
+     * Handle Enter, Arrow up/down and Space key press events.
+     */
+    handleKeyPressEvent(event) {
+        const target = event.target;
+        switch (event.key) {
+            case 'Enter':
+                this.focusNext(event);
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                if (!this.readonly()) {
+                    this.changeTimeComponent(target.name, event.key === 'ArrowUp');
+                }
+                else {
+                    event.preventDefault();
+                }
+                break;
+            case ' ':
+                if (this.readonly()) {
+                    event.preventDefault();
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    toHtmlInputElement = (target) => target;
+    updateHours(value) {
+        value = value.toString();
+        if (this.hours !== value) {
+            this.hours = value;
+            const isValid = this.isHourInputValid(this.hours, this.isPM()) && this.isValidLimit();
+            if (!isValid) {
+                this.invalidHours = true;
+                this.isValid.emit(false);
+                this.onChange(null);
+            }
+            else {
+                this.invalidHours = false;
+                this.updateTime();
+            }
+        }
+    }
+    updateMinutes(value) {
+        value = value.toString();
+        if (this.minutes !== value) {
+            this.minutes = value;
+            const isValid = this.isMinuteInputValid(this.minutes) && this.isValidLimit();
+            if (!isValid) {
+                this.invalidMinutes = true;
+                this.isValid.emit(false);
+                this.onChange(null);
+            }
+            else {
+                this.invalidMinutes = false;
+                this.updateTime();
+            }
+        }
+    }
+    updateSeconds(value) {
+        value = value.toString();
+        if (this.seconds !== value) {
+            this.seconds = value.toString();
+            const isValid = this.isSecondInputValid(this.seconds) && this.isValidLimit();
+            if (!isValid) {
+                this.invalidSeconds = true;
+                this.isValid.emit(false);
+                this.onChange(null);
+            }
+            else {
+                this.invalidSeconds = false;
+                this.updateTime();
+            }
+        }
+    }
+    updateMilliseconds(value) {
+        value = value.toString();
+        if (this.milliseconds !== value) {
+            this.milliseconds = value.toString();
+            const isValid = this.isMillisecondInputValid(this.milliseconds) && this.isValidLimit();
+            if (!isValid) {
+                this.invalidMilliseconds = true;
+                this.isValid.emit(false);
+                this.onChange(null);
+            }
+            else {
+                this.invalidMilliseconds = false;
+                this.updateTime();
+            }
+        }
+    }
+    toggleMeridian() {
+        const time = this.changeTime(this.time, { hour: 12 });
+        this.setTime(time);
+    }
+    /**
+     * Takes the current UI values and updates the time object value
+     * accordingly, if they UI input values are valid.
+     */
+    updateTime() {
+        const minutes = this.showMinutes() ? this.minutes : undefined;
+        const seconds = this.showSeconds() ? this.seconds : undefined;
+        const milliseconds = this.showMilliseconds() ? this.milliseconds : undefined;
+        if (!this.isInputValid(this.hours, minutes, seconds, milliseconds, this.isPM())) {
+            this.isValid.emit(false);
+            this.onChange(null);
+            return;
+        }
+        const time = this.createDateUpdate(this.time, {
+            hour: this.hours,
+            minute: this.minutes,
+            seconds: this.seconds,
+            milliseconds: this.milliseconds,
+            isPM: this.isPM()
+        });
+        this.setTime(time);
+    }
+    /**
+     * Sets a new time object as model value, updates the user interface
+     * and invokes onChange to let timepicker clients know about the update.
+     * @param time - The new time to be set.
+     */
+    setTime(time) {
+        if (this.time !== time) {
+            this.time = time;
+            this.updateUI(this.time);
+            this.onChange(this.time);
+        }
+    }
+    /**
+     * Updates the user interface by filling the time components
+     * into the time input fields. Sets empty values if the date
+     * is undefined or invalid.
+     *
+     * @param value - The date object or string from with the time components are taken.
+     */
+    updateUI(value) {
+        if (!value || !this.isValidDate(value)) {
+            this.hours = '';
+            this.minutes = '';
+            this.seconds = '';
+            this.milliseconds = '';
+            this.meridian.set('am');
+            this.meridianChange.emit(this.meridian());
+        }
+        else {
+            const time = this.parseTime(value);
+            if (!time) {
+                return;
+            }
+            let hours = time.getHours();
+            if (this.use12HourClock()) {
+                this.meridian.set(hours >= 12 ? 'pm' : 'am');
+                this.meridianChange.emit(this.meridian());
+                hours = hours % 12;
+                if (hours === 0) {
+                    hours = 12;
+                }
+            }
+            this.hours = hours.toString().padStart(2, '0');
+            this.minutes = time.getMinutes().toString().padStart(2, '0');
+            this.seconds = time.getUTCSeconds().toString().padStart(2, '0');
+            this.milliseconds = time.getUTCMilliseconds().toString().padStart(3, '0');
+        }
+    }
+    isValidDate(value) {
+        if (!value) {
+            return false;
+        }
+        if (typeof value === 'string') {
+            return this.isValidDate(new Date(value));
+        }
+        if (value instanceof Date && isNaN(value.getHours())) {
+            return false;
+        }
+        return true;
+    }
+    parseTime(value) {
+        if (typeof value === 'string') {
+            return new Date(value);
+        }
+        return value;
+    }
+    parseHours(value, isPM = false) {
+        const hour = this.toNumber(value);
+        if (isNaN(hour) || hour < 0 || hour > (isPM ? 12 : 24)) {
+            return NaN;
+        }
+        return hour;
+    }
+    parseMinutes(value) {
+        const minute = this.toNumber(value);
+        if (isNaN(minute) || minute < 0 || minute > 60) {
+            return NaN;
+        }
+        return minute;
+    }
+    parseSeconds(value) {
+        const seconds = this.toNumber(value);
+        if (isNaN(seconds) || seconds < 0 || seconds > 60) {
+            return NaN;
+        }
+        return seconds;
+    }
+    parseMilliseconds(value) {
+        const milliseconds = this.toNumber(value);
+        if (isNaN(milliseconds) || milliseconds < 0 || milliseconds > 1000) {
+            return NaN;
+        }
+        return milliseconds;
+    }
+    createDateUpdate(date, time) {
+        let hour = this.parseHours(time.hour);
+        const minute = this.parseMinutes(time.minute);
+        const seconds = this.parseSeconds(time.seconds) || 0;
+        const milliseconds = this.parseMilliseconds(time.milliseconds) || 0;
+        if (time.isPM && hour !== 12) {
+            hour += 12;
+        }
+        if (!date) {
+            if (!isNaN(hour) && !isNaN(minute)) {
+                return createDate(new Date(), hour, minute, seconds, milliseconds);
+            }
+            else {
+                return date;
+            }
+        }
+        else if (isNaN(hour) || isNaN(minute)) {
+            return date;
+        }
+        else {
+            return createDate(date, hour, minute, seconds, milliseconds);
+        }
+    }
+    toNumber(value) {
+        if (typeof value === 'undefined') {
+            return NaN;
+        }
+        else if (typeof value === 'number') {
+            return value;
+        }
+        return parseInt(value, 10);
+    }
+    isInputValid(hours, minutes = '0', seconds = '0', milliseconds = '0', isPM) {
+        if (!this.isValidLimit()) {
+            this.invalidHours = true;
+            this.invalidMinutes = true;
+            this.invalidSeconds = true;
+            this.invalidMilliseconds = true;
+        }
+        else {
+            this.invalidHours = !this.isHourInputValid(hours, isPM);
+            this.invalidMinutes = !this.isMinuteInputValid(minutes);
+            this.invalidSeconds = !this.isSecondInputValid(seconds);
+            this.invalidMilliseconds = !this.isMillisecondInputValid(milliseconds);
+        }
+        return (!this.invalidHours &&
+            !this.invalidMinutes &&
+            !this.invalidSeconds &&
+            !this.invalidMilliseconds);
+    }
+    isHourInputValid(hours, isPM) {
+        return !isNaN(this.parseHours(hours, isPM));
+    }
+    isMinuteInputValid(minutes) {
+        return !isNaN(this.parseMinutes(minutes));
+    }
+    isSecondInputValid(seconds) {
+        return !isNaN(this.parseSeconds(seconds));
+    }
+    isMillisecondInputValid(milliseconds) {
+        return !isNaN(this.parseMilliseconds(milliseconds));
+    }
+    isValidLimit() {
+        const refDate = new Date();
+        const newDate = this.createDateUpdate(refDate, {
+            hour: this.hours,
+            minute: this.minutes,
+            seconds: this.seconds,
+            milliseconds: this.milliseconds,
+            isPM: this.isPM()
+        });
+        if (!newDate) {
+            return false;
+        }
+        let refMax;
+        const max = this.max();
+        if (max) {
+            refMax = new Date(refDate);
+            refMax.setHours(max.getHours());
+            refMax.setMinutes(max.getMinutes());
+            refMax.setSeconds(max.getSeconds());
+            refMax.setMilliseconds(max.getMilliseconds());
+        }
+        let refMin;
+        const min = this.min();
+        if (min) {
+            refMin = new Date(refDate);
+            refMin.setHours(min.getHours());
+            refMin.setMinutes(min.getMinutes());
+            refMin.setSeconds(min.getSeconds());
+            refMin.setMilliseconds(min.getMilliseconds());
+        }
+        if (refMax && newDate > refMax) {
+            return false;
+        }
+        else if (refMin && newDate < refMin) {
+            return false;
+        }
+        return true;
+    }
+    changeTimeComponent(key, up) {
+        const change = up ? 1 : -1;
+        const date = this.createDateUpdate(new Date(), {
+            hour: this.hours,
+            minute: this.minutes,
+            seconds: this.seconds,
+            milliseconds: this.milliseconds,
+            isPM: this.isPM()
+        });
+        switch (key) {
+            case 'hours': {
+                const newTime = this.changeTime(date, { hour: change });
+                let hour = newTime.getHours();
+                if (this.use12HourClock()) {
+                    hour = hour % 12;
+                    if (hour === 0 && !this.isPM()) {
+                        hour = 12;
+                    }
+                    else if (hour === 0 && this.isPM()) {
+                        this.toggleMeridian();
+                    }
+                }
+                this.updateHours(hour);
+                break;
+            }
+            case 'minutes': {
+                const newTime = this.changeTime(date, { minute: change });
+                this.updateMinutes(newTime.getMinutes());
+                break;
+            }
+            case 'seconds': {
+                const newTime = this.changeTime(date, { seconds: change });
+                this.updateSeconds(newTime.getSeconds());
+                break;
+            }
+            case 'milliseconds': {
+                const newTime = this.changeTime(date, { milliseconds: change });
+                this.updateMilliseconds(newTime.getMilliseconds());
+                break;
+            }
+            default:
+                break;
+        }
+    }
+    changeTime(value, diff) {
+        if (!value) {
+            return this.changeTime(createDate(new Date(), 0, 0, 0, 0), diff);
+        }
+        if (!diff) {
+            return value;
+        }
+        let hour = value.getHours();
+        let minutes = value.getMinutes();
+        let seconds = value.getSeconds();
+        let milliseconds = value.getMilliseconds();
+        if (diff.hour) {
+            hour = hour + this.toNumber(diff.hour);
+        }
+        if (diff.minute) {
+            minutes = minutes + this.toNumber(diff.minute);
+        }
+        if (diff.seconds) {
+            seconds = seconds + this.toNumber(diff.seconds);
+        }
+        if (diff.milliseconds) {
+            milliseconds = milliseconds + this.toNumber(diff.milliseconds);
+        }
+        return createDate(value, hour, minutes, seconds, milliseconds);
+    }
+    /**
+     * Focuses the next available input/select field or emit inputCompleted event.
+     */
+    focusNext(event) {
+        const target = event.target;
+        if (!target) {
+            return;
+        }
+        const targets = this.inputParts();
+        const position = targets?.findIndex(t => t.nativeElement === target);
+        if (position === undefined || position === -1) {
+            return;
+        }
+        if (position < targets.length - 1) {
+            targets[position + 1].nativeElement.focus();
+        }
+        else {
+            this.inputCompleted.emit();
+        }
+    }
+    focusChange(event) {
+        if (event === null) {
+            this.onTouched();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiTimepickerComponent, isStandalone: true, selector: "si-timepicker", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hoursLabel: { classPropertyName: "hoursLabel", publicName: "hoursLabel", isSignal: true, isRequired: false, transformFunction: null }, minutesLabel: { classPropertyName: "minutesLabel", publicName: "minutesLabel", isSignal: true, isRequired: false, transformFunction: null }, secondsLabel: { classPropertyName: "secondsLabel", publicName: "secondsLabel", isSignal: true, isRequired: false, transformFunction: null }, millisecondsLabel: { classPropertyName: "millisecondsLabel", publicName: "millisecondsLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabels: { classPropertyName: "hideLabels", publicName: "hideLabels", isSignal: true, isRequired: false, transformFunction: null }, hoursAriaLabel: { classPropertyName: "hoursAriaLabel", publicName: "hoursAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, minutesAriaLabel: { classPropertyName: "minutesAriaLabel", publicName: "minutesAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, secondsAriaLabel: { classPropertyName: "secondsAriaLabel", publicName: "secondsAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, millisecondsAriaLabel: { classPropertyName: "millisecondsAriaLabel", publicName: "millisecondsAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, hoursPlaceholder: { classPropertyName: "hoursPlaceholder", publicName: "hoursPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, minutesPlaceholder: { classPropertyName: "minutesPlaceholder", publicName: "minutesPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, secondsPlaceholder: { classPropertyName: "secondsPlaceholder", publicName: "secondsPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, millisecondsPlaceholder: { classPropertyName: "millisecondsPlaceholder", publicName: "millisecondsPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, meridians: { classPropertyName: "meridians", publicName: "meridians", isSignal: true, isRequired: false, transformFunction: null }, meridiansLabel: { classPropertyName: "meridiansLabel", publicName: "meridiansLabel", isSignal: true, isRequired: false, transformFunction: null }, meridiansAriaLabel: { classPropertyName: "meridiansAriaLabel", publicName: "meridiansAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, showMinutes: { classPropertyName: "showMinutes", publicName: "showMinutes", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, showMilliseconds: { classPropertyName: "showMilliseconds", publicName: "showMilliseconds", isSignal: true, isRequired: false, transformFunction: null }, showMeridian: { classPropertyName: "showMeridian", publicName: "showMeridian", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isValid: "isValid", meridianChange: "meridianChange", inputCompleted: "inputCompleted" }, host: { attributes: { "role": "group" }, properties: { "class.readonly": "readonly()", "attr.aria-labelledby": "labelledby" }, classAttribute: "form-custom-control" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: SiTimepickerComponent,
+                multi: true
+            },
+            {
+                provide: SI_FORM_ITEM_CONTROL,
+                useExisting: SiTimepickerComponent
+            }
+        ], viewQueries: [{ propertyName: "inputParts", predicate: ["inputPart"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"d-flex flex-row flex-wrap\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"focusChange($event)\"\n>\n  <label class=\"min-width\">\n    @if (!hideLabels()) {\n      <span class=\"form-label\">{{ (hoursLabel() | translate) || '&nbsp;' }}</span>\n    }\n    <input\n      #inputPart\n      type=\"text\"\n      inputmode=\"numeric\"\n      pattern=\"2[0-4]|[01]?[0-9]\"\n      class=\"form-control hide-feedback-icon\"\n      name=\"hours\"\n      maxlength=\"2\"\n      autocomplete=\"off\"\n      [attr.aria-label]=\"hoursAriaLabel() | translate\"\n      [attr.aria-describedby]=\"errormessageId\"\n      [class.is-invalid]=\"invalidHours\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [placeholder]=\"hoursPlaceholder()\"\n      [value]=\"hours\"\n      (change)=\"updateHours(toHtmlInputElement($event.target).value)\"\n      (blur)=\"updateHours(toHtmlInputElement($event.target).value)\"\n      (keydown)=\"handleKeyPressEvent($event)\"\n    />\n  </label>\n\n  @if (showMinutes()) {\n    <ng-container *ngTemplateOutlet=\"separator\" />\n    <label class=\"min-width\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (minutesLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        type=\"text\"\n        inputmode=\"numeric\"\n        pattern=\"[0-5]?[0-9]\"\n        class=\"form-control hide-feedback-icon\"\n        name=\"minutes\"\n        maxlength=\"2\"\n        autocomplete=\"off\"\n        [attr.aria-label]=\"minutesAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId\"\n        [class.is-invalid]=\"invalidMinutes\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [placeholder]=\"minutesPlaceholder()\"\n        [value]=\"minutes\"\n        (change)=\"updateMinutes(toHtmlInputElement($event.target).value)\"\n        (blur)=\"updateMinutes(toHtmlInputElement($event.target).value)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\n\n  @if (showSeconds()) {\n    <ng-container *ngTemplateOutlet=\"separator\" />\n    <label class=\"min-width\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (secondsLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        type=\"text\"\n        inputmode=\"numeric\"\n        pattern=\"[0-5]?[0-9]\"\n        class=\"form-control hide-feedback-icon\"\n        name=\"seconds\"\n        maxlength=\"2\"\n        autocomplete=\"off\"\n        [attr.aria-label]=\"secondsAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId\"\n        [class.is-invalid]=\"invalidSeconds\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [placeholder]=\"secondsPlaceholder()\"\n        [value]=\"seconds\"\n        (change)=\"updateSeconds(toHtmlInputElement($event.target).value)\"\n        (blur)=\"updateSeconds(toHtmlInputElement($event.target).value)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\n\n  @if (showMilliseconds()) {\n    <ng-container *ngTemplateOutlet=\"separator; context: { separator: '.' }\" />\n    <label class=\"min-width\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (millisecondsLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        type=\"text\"\n        inputmode=\"numeric\"\n        pattern=\"[0-9]{1,3}\"\n        class=\"form-control hide-feedback-icon\"\n        name=\"milliseconds\"\n        maxlength=\"3\"\n        autocomplete=\"off\"\n        [attr.aria-label]=\"millisecondsAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId\"\n        [class.is-invalid]=\"invalidMilliseconds\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [placeholder]=\"millisecondsPlaceholder()\"\n        [value]=\"milliseconds\"\n        (change)=\"updateMilliseconds(toHtmlInputElement($event.target).value)\"\n        (blur)=\"updateMilliseconds(toHtmlInputElement($event.target).value)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\n\n  @if (use12HourClock()) {\n    <label class=\"ms-2\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (meridiansLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <select\n        #inputPart\n        class=\"form-control\"\n        [attr.aria-label]=\"meridiansAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId\"\n        [class.readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (change)=\"toggleMeridian()\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      >\n        <option value=\"am\" [selected]=\"meridian() === 'am'\">{{ periods()[0] }}</option>\n        <option value=\"pm\" [selected]=\"meridian() === 'pm'\">{{ periods()[1] }}</option>\n      </select>\n    </label>\n  }\n</div>\n\n<ng-template #separator let-separator=\"separator\">\n  <div class=\"align-self-end pb-3 px-1\" aria-hidden=\"true\">{{ separator ? separator : ':' }}</div>\n</ng-template>\n", styles: [":host{display:block}.min-width{inline-size:100%;max-inline-size:45px;min-inline-size:35px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i2.SiTranslatePipe, name: "translate" }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTimepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-timepicker', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: SiTimepickerComponent,
+                            multi: true
+                        },
+                        {
+                            provide: SI_FORM_ITEM_CONTROL,
+                            useExisting: SiTimepickerComponent
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, FormsModule, SiTranslateModule, A11yModule], host: {
+                        role: 'group',
+                        class: 'form-custom-control',
+                        '[class.readonly]': 'readonly()',
+                        '[attr.aria-labelledby]': 'labelledby'
+                    }, template: "<div\n  class=\"d-flex flex-row flex-wrap\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"focusChange($event)\"\n>\n  <label class=\"min-width\">\n    @if (!hideLabels()) {\n      <span class=\"form-label\">{{ (hoursLabel() | translate) || '&nbsp;' }}</span>\n    }\n    <input\n      #inputPart\n      type=\"text\"\n      inputmode=\"numeric\"\n      pattern=\"2[0-4]|[01]?[0-9]\"\n      class=\"form-control hide-feedback-icon\"\n      name=\"hours\"\n      maxlength=\"2\"\n      autocomplete=\"off\"\n      [attr.aria-label]=\"hoursAriaLabel() | translate\"\n      [attr.aria-describedby]=\"errormessageId\"\n      [class.is-invalid]=\"invalidHours\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [placeholder]=\"hoursPlaceholder()\"\n      [value]=\"hours\"\n      (change)=\"updateHours(toHtmlInputElement($event.target).value)\"\n      (blur)=\"updateHours(toHtmlInputElement($event.target).value)\"\n      (keydown)=\"handleKeyPressEvent($event)\"\n    />\n  </label>\n\n  @if (showMinutes()) {\n    <ng-container *ngTemplateOutlet=\"separator\" />\n    <label class=\"min-width\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (minutesLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        type=\"text\"\n        inputmode=\"numeric\"\n        pattern=\"[0-5]?[0-9]\"\n        class=\"form-control hide-feedback-icon\"\n        name=\"minutes\"\n        maxlength=\"2\"\n        autocomplete=\"off\"\n        [attr.aria-label]=\"minutesAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId\"\n        [class.is-invalid]=\"invalidMinutes\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [placeholder]=\"minutesPlaceholder()\"\n        [value]=\"minutes\"\n        (change)=\"updateMinutes(toHtmlInputElement($event.target).value)\"\n        (blur)=\"updateMinutes(toHtmlInputElement($event.target).value)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\n\n  @if (showSeconds()) {\n    <ng-container *ngTemplateOutlet=\"separator\" />\n    <label class=\"min-width\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (secondsLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        type=\"text\"\n        inputmode=\"numeric\"\n        pattern=\"[0-5]?[0-9]\"\n        class=\"form-control hide-feedback-icon\"\n        name=\"seconds\"\n        maxlength=\"2\"\n        autocomplete=\"off\"\n        [attr.aria-label]=\"secondsAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId\"\n        [class.is-invalid]=\"invalidSeconds\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [placeholder]=\"secondsPlaceholder()\"\n        [value]=\"seconds\"\n        (change)=\"updateSeconds(toHtmlInputElement($event.target).value)\"\n        (blur)=\"updateSeconds(toHtmlInputElement($event.target).value)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\n\n  @if (showMilliseconds()) {\n    <ng-container *ngTemplateOutlet=\"separator; context: { separator: '.' }\" />\n    <label class=\"min-width\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (millisecondsLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <input\n        #inputPart\n        type=\"text\"\n        inputmode=\"numeric\"\n        pattern=\"[0-9]{1,3}\"\n        class=\"form-control hide-feedback-icon\"\n        name=\"milliseconds\"\n        maxlength=\"3\"\n        autocomplete=\"off\"\n        [attr.aria-label]=\"millisecondsAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId\"\n        [class.is-invalid]=\"invalidMilliseconds\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [placeholder]=\"millisecondsPlaceholder()\"\n        [value]=\"milliseconds\"\n        (change)=\"updateMilliseconds(toHtmlInputElement($event.target).value)\"\n        (blur)=\"updateMilliseconds(toHtmlInputElement($event.target).value)\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      />\n    </label>\n  }\n\n  @if (use12HourClock()) {\n    <label class=\"ms-2\">\n      @if (!hideLabels()) {\n        <span class=\"form-label\">{{ (meridiansLabel() | translate) || '&nbsp;' }}</span>\n      }\n      <select\n        #inputPart\n        class=\"form-control\"\n        [attr.aria-label]=\"meridiansAriaLabel() | translate\"\n        [attr.aria-describedby]=\"errormessageId\"\n        [class.readonly]=\"readonly()\"\n        [disabled]=\"disabled()\"\n        (change)=\"toggleMeridian()\"\n        (keydown)=\"handleKeyPressEvent($event)\"\n      >\n        <option value=\"am\" [selected]=\"meridian() === 'am'\">{{ periods()[0] }}</option>\n        <option value=\"pm\" [selected]=\"meridian() === 'pm'\">{{ periods()[1] }}</option>\n      </select>\n    </label>\n  }\n</div>\n\n<ng-template #separator let-separator=\"separator\">\n  <div class=\"align-self-end pb-3 px-1\" aria-hidden=\"true\">{{ separator ? separator : ':' }}</div>\n</ng-template>\n", styles: [":host{display:block}.min-width{inline-size:100%;max-inline-size:45px;min-inline-size:35px}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+let idCounter = 1;
+class SiDatepickerComponent {
+    locale = inject(LOCALE_ID).toString();
+    /**
+     * The date which is currently focused
+     * Compare to the selected date or range the calendar requires to have one element to focus.
+     */
+    focusedDate = model();
+    /**
+     * The selected date of the datepicker. Use for
+     * initialization and for bidirectional binding.
+     */
+    date = model();
+    /**
+     * The selected date range of the datepicker. Use for
+     * initialization and for bidirectional binding.
+     */
+    dateRange = model();
+    /** @internal */
+    dateRangeRole = input();
+    /**
+     * Set initial focus to calendar body.
+     *
+     * @defaultValue false
+     */
+    initialFocus = input(false);
+    /**
+     * Disabled the optional visible time picker.
+     *
+     * @defaultValue false
+     */
+    disabledTime = model(false);
+    /**
+     * Object to configure the datepicker.
+     *
+     * @defaultValue
+     * ```
+     * {}
+     * ```
+     */
+    config = model({});
+    /**
+     * Aria label for the previous button. Needed for a11y.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.PREVIOUS:Previous`
+     * ```
+     */
+    previousLabel = input($localize `:@@SI_DATEPICKER.PREVIOUS:Previous`);
+    /**
+     * Aria label for the next button. Needed for a11y.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.NEXT:Next`
+     * ```
+     */
+    nextLabel = input($localize `:@@SI_DATEPICKER.NEXT:Next`);
+    /**
+     * Aria label for week number column
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.CALENDAR_WEEK_LABEL:Calendar week`
+     * ```
+     */
+    calenderWeekLabel = input($localize `:@@SI_DATEPICKER.CALENDAR_WEEK_LABEL:Calendar week`);
+    /**
+     * Enable/disable 12H mode in timepicker. Defaults to locale
+     *
+     * @defaultValue undefined
+     */
+    time12h = input(undefined, {
+        transform: booleanAttribute
+    });
+    /**
+     * Use this to force date range operation to select either start date or end date.
+     *
+     * @defaultValue 'START'
+     */
+    rangeType = model('START');
+    /**
+     * Optional input to control the minimum month the datepicker can show and the user can navigate.
+     * The `minMonth` can be larger than the `minDate` This option enables the usage of multiple
+     * datepickers next to each other while the more left calendar always
+     * shows a earlier month the the more right one.
+     * @internal
+     */
+    minMonth = input();
+    /**
+     * Optional input to control the maximum month the datepicker can show and the user can navigate.
+     * The `maxMonth` can be smaller than the `maxDate` This option enables the usage of multiple
+     * datepickers next to each other while the more left calendar always
+     * shows a earlier month the the more right one.
+     * @internal
+     */
+    maxMonth = input();
+    /**
+     * Option to hide the time switch.
+     *
+     * @defaultValue false
+     */
+    hideTimeToggle = input(false);
+    /** @internal */
+    hideCalendar = input(false);
+    /**
+     * Optional timepicker label.
+     */
+    timepickerLabel = input();
+    get startDate() {
+        return this.config().enableDateRange ? this.dateRange()?.start : this.date();
+    }
+    get endDate() {
+        return this.config().enableDateRange ? this.dateRange()?.end : undefined;
+    }
+    /**
+     * Returns the date object if not range selection is enabled. Otherwise, if
+     * the date range role is 'END', the date range end date is returned. If
+     * date range role is not 'END', the date range start date is returned.
+     */
+    getRelevantDate() {
+        return !this.config().enableDateRange
+            ? this.date()
+            : this.dateRangeRole() === 'END'
+                ? this.dateRange()?.end
+                : this.dateRange()?.start;
+    }
+    defaultDisabledTimeText = $localize `:@@SI_DATEPICKER.DISABLED_TIME_TEXT:Ignore time`;
+    defaultEnableTimeText = $localize `:@@SI_DATEPICKER.ENABLED_TIME_TEXT:Consider time`;
+    includeTimeLabel = computed(() => this.disabledTime()
+        ? (this.config().disabledTimeText ?? this.defaultDisabledTimeText)
+        : (this.config().enabledTimeText ?? this.defaultEnableTimeText));
+    get weekStartDay() {
+        return this.config().weekStartDay ?? this.localeWeekStart;
+    }
+    get hideWeekNumbers() {
+        return this.config().hideWeekNumbers ?? false;
+    }
+    /**
+     * The active view
+     */
+    view = signal('week');
+    /**
+     * Get the current shown view.
+     */
+    activeView = computed(() => {
+        switch (this.view()) {
+            case 'month':
+                return this.monthSelection();
+            case 'year':
+                return this.yearSelection();
+            default:
+                return this.daySelection();
+        }
+    });
+    actualFocusedDate = computed(() => this.focusedDate() ?? today());
+    requireFocus = signal(this.initialFocus());
+    /** When the user switch from the year or month view via keyboard selection we force the focus. */
+    forceFocus = computed(() => this.requireFocus() || this.initialFocus());
+    months = [];
+    switchId = `__si-datepicker-switch-id-${idCounter++}`;
+    timepickerId = `__si-datepicker-timepicker-id-${idCounter++}`;
+    /**
+     * Configuration which view shall be shown after year selection,
+     * when onlyMonthSelection is enabled the month view is shown otherwise the week view.
+     */
+    yearViewSwitchTo = 'week';
+    monthViewSwitchTo = 'week';
+    cdRef = inject(ChangeDetectorRef);
+    localeWeekStart;
+    /**
+     * Date object to track and change the time. Keeping time and date
+     * in separate objects to not change the date when flipping time.
+     * After change, a new date object is created with an adapted time.
+     */
+    time;
+    /**
+     * Used to hold the last time when setting the time to disabled.
+     * Value will be reset on enabling the time again.
+     */
+    previousTime;
+    timePicker = viewChild(SiTimepickerComponent);
+    /** Reference to the current day selection component. Shown when view === 'week' */
+    daySelection = viewChild(SiDaySelectionComponent);
+    /** Reference to the current month selection component. Shown when view === 'month' */
+    monthSelection = viewChild(SiMonthSelectionComponent);
+    /** Reference to the current year selection component. Shown when view === 'year' */
+    yearSelection = viewChild(SiYearSelectionComponent);
+    /**
+     * The cell which which has the mouse hover.
+     * @internal
+     */
+    activeHover = model();
+    constructor() {
+        this.initCalendarLabels();
+        const weekStart = getLocaleFirstDayOfWeek(this.locale);
+        this.localeWeekStart =
+            weekStart === WeekDay.Sunday
+                ? 'sunday'
+                : weekStart === WeekDay.Saturday
+                    ? 'saturday'
+                    : 'monday';
+    }
+    ngOnChanges(changes) {
+        const config = this.config();
+        if (changes.date && !config.enableDateRange) {
+            if (this.date() && !isValid(this.date())) {
+                this.date.set(undefined);
+            }
+            const date = this.date();
+            if (date) {
+                if (changes.date.isFirstChange()) {
+                    this.previousTime = new Date(date);
+                    this.time = date;
+                }
+                if (this.time?.getTime() !== date?.getTime()) {
+                    this.time = date;
+                }
+                this.focusedDate.set(date);
+            }
+        }
+        if (changes.config?.currentValue?.disabledTime) {
+            this.disabledTime.set(changes.config?.currentValue?.disabledTime);
+            this.onDisabledTimeChanged();
+        }
+        if (changes.config?.firstChange) {
+            if (config.onlyMonthSelection) {
+                this.yearViewSwitchTo = 'month';
+                this.monthViewSwitchTo = 'month';
+                this.view.set('month');
+            }
+        }
+        // Date-range input field has changed
+        if (changes.dateRange) {
+            // Ensure the dateRange object only contain valid start/end dates
+            const dateRange = this.dateRange();
+            if (dateRange) {
+                if (!isValid(dateRange?.start)) {
+                    dateRange.start = undefined;
+                }
+                if (!isValid(dateRange?.end)) {
+                    dateRange.end = undefined;
+                }
+            }
+            // Only one calendar is used when no dateRangeRole is available.
+            const dateRangeRole = this.dateRangeRole();
+            if (!dateRangeRole) {
+                const previous = changes.dateRange.previousValue;
+                if (dateRange?.end && !isSameDate(dateRange.end, previous?.end)) {
+                    this.focusedDate.set(dateRange.end);
+                }
+                if (dateRange?.start && !isSameDate(dateRange.start, previous?.start)) {
+                    this.focusedDate.set(dateRange.start);
+                }
+            }
+            else {
+                // Date range selection with two calendars
+                const newDate = dateRangeRole === 'START' ? dateRange?.start : dateRange?.end;
+                if (newDate && changes.dateRange.isFirstChange()) {
+                    this.previousTime = new Date(newDate);
+                    this.time = newDate;
+                }
+            }
+        }
+        if (changes.minMonth?.currentValue &&
+            isAfter(changes.minMonth.currentValue, this.actualFocusedDate())) {
+            this.focusedDate.set(changes.minMonth.currentValue);
+        }
+        if (changes.maxMonth?.currentValue &&
+            isAfter(this.actualFocusedDate(), changes.maxMonth.currentValue)) {
+            this.focusedDate.set(changes.maxMonth.currentValue);
+        }
+    }
+    ngOnInit() {
+        const config = this.config();
+        const dateRange = this.dateRange();
+        const dateRangeRole = this.dateRangeRole();
+        if (config.enableDateRange && this.rangeType() === 'END' && dateRange?.end && !dateRangeRole) {
+            // The user chose to trigger the datepicker from the date-range end, in this
+            // case we
+            this.focusedDate.set(dateRange.end);
+        }
+        else if (config.enableDateRange && dateRangeRole === 'START') {
+            const maxMonth = config?.onlyMonthSelection ? this.maxMonth() : config.maxDate;
+            this.focusedDate.set(getDateSameOrBetween(dateRange?.start ? dateRange.start : (this.focusedDate() ?? today()), config.minDate, maxMonth));
+        }
+        else if (config.enableDateRange && dateRangeRole === 'END') {
+            const minMonth = config?.onlyMonthSelection ? this.minMonth() : config.minDate;
+            this.focusedDate.set(getDateSameOrBetween(dateRange?.end ? dateRange.end : (this.focusedDate() ?? today()), minMonth, config.maxDate));
+        }
+        else {
+            this.focusedDate.set(getDateSameOrBetween(isValid(this.startDate) ? this.startDate : (this.focusedDate() ?? today()), config.minDate, config.maxDate));
+        }
+    }
+    ngAfterViewInit() {
+        // After the view is created the first time we want that the children components set
+        // the focus to the calendarBody. Means when we select a date in month-selection,
+        // the day selection shall focus automatically the day in calendarBody.
+        setTimeout(() => this.requireFocus.set(true));
+    }
+    /** Initialize day and month labels */
+    initCalendarLabels() {
+        this.months = getLocaleMonthNames(this.locale.toString());
+    }
+    /**
+     * Validates and sets a new date to the this.date model object of this component
+     * and fires the related events. The model object shall not be updated elsewhere
+     * with a new date object. Shall only be called on simple date selection and not
+     * on date range selection.
+     *
+     * @param newDate - The new date to be set.
+     */
+    setDate(newDate) {
+        const dateWithoutTime = getDateWithoutTime(newDate);
+        const config = this.config();
+        const validForMinDate = !(config?.minDate && dateWithoutTime < getDateWithoutTime(config.minDate));
+        const configValue = this.config();
+        const validForMaxDate = !(configValue?.maxDate && dateWithoutTime > getDateWithoutTime(configValue.maxDate));
+        const date = this.date();
+        if (date !== newDate && validForMinDate && validForMaxDate) {
+            const previousValue = date;
+            this.date.set(newDate);
+            // eslint-disable-next-line @angular-eslint/no-lifecycle-call
+            this.ngOnChanges({
+                date: new SimpleChange(previousValue, date, previousValue === undefined)
+            });
+            //this.dateChange.emit(date);
+        }
+        else if (!validForMinDate || !validForMaxDate) {
+            // eslint-disable-next-line @angular-eslint/no-lifecycle-call
+            this.ngOnChanges({ date: new SimpleChange(undefined, date, true) });
+        }
+        if (config.enableTimeValidation && this.timePicker() && (config.minDate || config.maxDate)) {
+            this.validateTime(newDate);
+        }
+        this.cdRef.markForCheck();
+    }
+    /**
+     * Validates and sets the new date range to the dateRange model
+     * object.
+     * @param newDateRange - The new range to be set.
+     * @returns True if the new range is valid and set. Otherwise false.
+     */
+    setDateRange(newDateRange) {
+        const config = this.config();
+        if (newDateRange.start) {
+            const isValidRange = isSameOrBetween(newDateRange.start, config?.minDate, config?.maxDate);
+            if (!isValidRange) {
+                return false;
+            }
+        }
+        if (newDateRange.end) {
+            const isValidRange = isSameOrBetween(newDateRange.end, config?.minDate, config?.maxDate);
+            if (!isValidRange) {
+                return false;
+            }
+        }
+        this.dateRange.set(newDateRange);
+        return true;
+    }
+    timeSelected(newTime) {
+        if (!newTime) {
+            return;
+        }
+        // Break event cycle
+        if (this.time?.getTime() === newTime.getTime()) {
+            this.validateTime(newTime);
+            return;
+        }
+        this.previousTime = this.time;
+        this.time = newTime;
+        const oldDate = this.getRelevantDate() ?? new Date();
+        let newDate;
+        if (this.disabledTime()) {
+            // if time is disabled, ensure that 00:00:00 is displayed in any timezone
+            newDate = createDate(oldDate);
+            this.time = newDate;
+        }
+        else {
+            newDate = createDate(oldDate, this.time.getHours(), this.time.getMinutes(), this.time.getSeconds(), this.time.getMilliseconds());
+        }
+        if (!this.config().enableDateRange) {
+            this.setDate(newDate);
+        }
+        else {
+            const newDateRange = this.dateRangeRole() === 'START'
+                ? { start: newDate, end: this.dateRange()?.end }
+                : { start: this.dateRange()?.start, end: newDate };
+            this.setDateRange(newDateRange);
+        }
+    }
+    toggleDisabledTime() {
+        this.disabledTime.update(previous => !previous);
+        this.config.update(c => {
+            c.disabledTime = this.disabledTime();
+            return c;
+        });
+        this.onDisabledTimeChanged();
+    }
+    onDisabledTimeChanged() {
+        if (!this.config().enableDateRange) {
+            if (this.disabledTime()) {
+                const date = this.date() ?? new Date();
+                const newTime = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0));
+                this.timeSelected(newTime);
+            }
+            else if (this.previousTime) {
+                this.timeSelected(this.previousTime);
+            }
+            else {
+                this.timeSelected(new Date());
+            }
+        }
+    }
+    validateTime(date) {
+        // wait for a cycle to initialize timepicker
+        setTimeout(() => {
+            const config = this.config();
+            const timePicker = this.timePicker();
+            if (!this.disabledTime() &&
+                ((config.minDate && date < config.minDate) || (config.maxDate && date > config.maxDate))) {
+                timePicker.invalidHours = timePicker.invalidMinutes = true;
+                timePicker.invalidSeconds = timePicker.invalidMilliseconds = true;
+            }
+            else {
+                timePicker.invalidHours = timePicker.invalidMinutes = false;
+                timePicker.invalidSeconds = timePicker.invalidMilliseconds = false;
+            }
+            this.cdRef.markForCheck();
+        });
+    }
+    /**
+     * Handle selection in the day view.
+     * @param selection - selected date.
+     */
+    selectionChange(selection) {
+        const newDate = createDate(selection, this.time?.getHours(), this.time?.getMinutes(), this.time?.getSeconds(), this.time?.getMilliseconds());
+        if (this.config().enableDateRange) {
+            const rangeType = this.rangeType();
+            let newDateRange = !rangeType || rangeType === 'START'
+                ? { start: newDate, end: undefined }
+                : { start: this.dateRange()?.start, end: newDate };
+            let newRangeType = !rangeType || rangeType === 'START' ? 'START' : 'END';
+            // The user selected a date before the current range start. Now the clicked day
+            // is used as new start and the end is cleared
+            if (newDateRange.start && newDateRange.end && newDateRange.end < newDateRange.start) {
+                newDateRange = { start: newDateRange.end, end: undefined };
+                newRangeType = 'START'; // Switch back to start so that the next selection is end
+            }
+            // Reset end range when we started start
+            if (newRangeType === 'START' && newDateRange.end) {
+                newDateRange.end = undefined;
+            }
+            const rangeValid = this.setDateRange(newDateRange);
+            if (rangeValid) {
+                // Toggle rangeType every time the user uses the datepicker to change the range
+                this.rangeType.set(newRangeType === 'START' ? 'END' : 'START');
+            }
+        }
+        else {
+            this.focusedDate.set(newDate);
+            this.setDate(newDate);
+        }
+    }
+    /**
+     * Handle month/year changes
+     * @param selection - the selected month or null of cancelled.
+     */
+    activeMonthChange(selection) {
+        if (selection) {
+            this.focusedDate.set(changeDay(selection, this.actualFocusedDate().getDate()));
+            const config = this.config();
+            if (config.onlyMonthSelection) {
+                if (config.enableDateRange) {
+                    this.selectionChange(selection);
+                }
+                else {
+                    this.setDate(selection);
+                }
+            }
+        }
+        this.view.set(this.monthViewSwitchTo);
+    }
+    /**
+     * Handle year changes
+     * @param selection - the selected year or null of cancelled.
+     */
+    activeYearChange(selection) {
+        if (selection) {
+            selection.setMonth(this.actualFocusedDate().getMonth());
+            this.focusedDate.set(changeDay(selection, this.actualFocusedDate().getDate()));
+        }
+        this.view.set(this.yearViewSwitchTo);
+    }
+    /**
+     * Focus the active cell in view.
+     * The function is required to transfer the focus from input to the active date cell.
+     */
+    focusActiveCell() {
+        this.activeView()?.focusActiveCell();
+    }
+    onActiveHoverChange(event) {
+        this.activeHover.set(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiDatepickerComponent, isStandalone: true, selector: "si-datepicker", inputs: { focusedDate: { classPropertyName: "focusedDate", publicName: "focusedDate", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: true, isRequired: false, transformFunction: null }, dateRangeRole: { classPropertyName: "dateRangeRole", publicName: "dateRangeRole", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, disabledTime: { classPropertyName: "disabledTime", publicName: "disabledTime", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, calenderWeekLabel: { classPropertyName: "calenderWeekLabel", publicName: "calenderWeekLabel", isSignal: true, isRequired: false, transformFunction: null }, time12h: { classPropertyName: "time12h", publicName: "time12h", isSignal: true, isRequired: false, transformFunction: null }, rangeType: { classPropertyName: "rangeType", publicName: "rangeType", isSignal: true, isRequired: false, transformFunction: null }, minMonth: { classPropertyName: "minMonth", publicName: "minMonth", isSignal: true, isRequired: false, transformFunction: null }, maxMonth: { classPropertyName: "maxMonth", publicName: "maxMonth", isSignal: true, isRequired: false, transformFunction: null }, hideTimeToggle: { classPropertyName: "hideTimeToggle", publicName: "hideTimeToggle", isSignal: true, isRequired: false, transformFunction: null }, hideCalendar: { classPropertyName: "hideCalendar", publicName: "hideCalendar", isSignal: true, isRequired: false, transformFunction: null }, timepickerLabel: { classPropertyName: "timepickerLabel", publicName: "timepickerLabel", isSignal: true, isRequired: false, transformFunction: null }, activeHover: { classPropertyName: "activeHover", publicName: "activeHover", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusedDate: "focusedDateChange", date: "dateChange", dateRange: "dateRangeChange", disabledTime: "disabledTimeChange", config: "configChange", rangeType: "rangeTypeChange", activeHover: "activeHoverChange" }, viewQueries: [{ propertyName: "timePicker", first: true, predicate: SiTimepickerComponent, descendants: true, isSignal: true }, { propertyName: "daySelection", first: true, predicate: SiDaySelectionComponent, descendants: true, isSignal: true }, { propertyName: "monthSelection", first: true, predicate: SiMonthSelectionComponent, descendants: true, isSignal: true }, { propertyName: "yearSelection", first: true, predicate: SiYearSelectionComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (!hideCalendar()) {\n  <div class=\"text-center pb-6 calendar\">\n    @switch (view()) {\n      @case ('year') {\n        <si-year-selection\n          [focusedDate]=\"actualFocusedDate()\"\n          [startDate]=\"startDate\"\n          [endDate]=\"endDate\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [maxMonth]=\"maxMonth()\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          (selectedValueChange)=\"activeYearChange($event)\"\n        />\n      }\n      @case ('month') {\n        <si-month-selection\n          [startDate]=\"startDate\"\n          [endDate]=\"endDate\"\n          [months]=\"months\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [maxMonth]=\"maxMonth()\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previewRange]=\"rangeType() === 'END'\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          [activeHover]=\"activeHover()\"\n          [focusedDate]=\"actualFocusedDate()\"\n          (activeHoverChange)=\"onActiveHoverChange($event)\"\n          (focusedDateChange)=\"focusedDate.set($event)\"\n          (selectedValueChange)=\"activeMonthChange($event)\"\n          (viewChange)=\"view.set($event)\"\n        />\n      }\n      @case ('week') {\n        <si-day-selection\n          [initialFocus]=\"forceFocus()\"\n          [startDate]=\"startDate\"\n          [endDate]=\"dateRange()?.end\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previewRange]=\"rangeType() === 'END'\"\n          [hideWeekNumbers]=\"hideWeekNumbers\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [weekStartDay]=\"weekStartDay\"\n          [calenderWeekLabel]=\"calenderWeekLabel()\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          [todayLabel]=\"config().todayText\"\n          [activeHover]=\"activeHover()\"\n          [focusedDate]=\"actualFocusedDate()\"\n          (activeHoverChange)=\"onActiveHoverChange($event)\"\n          (focusedDateChange)=\"focusedDate.set($event)\"\n          (selectedValueChange)=\"selectionChange($event!)\"\n          (viewChange)=\"view.set($event)\"\n        />\n      }\n    }\n  </div>\n}\n@if (this.config().showTime) {\n  <div\n    class=\"timepicker-container px-9 pb-6\"\n    [class.pt-6]=\"!hideCalendar()\"\n    [class.border-top]=\"!hideCalendar()\"\n  >\n    @if (!config().mandatoryTime && !hideTimeToggle()) {\n      <div class=\"mb-5 form-check form-switch\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          role=\"switch\"\n          [id]=\"switchId\"\n          [checked]=\"!disabledTime()\"\n          (change)=\"toggleDisabledTime()\"\n        />\n        <label class=\"form-check-label\" [for]=\"switchId\">{{\n          includeTimeLabel() | translate\n        }}</label>\n      </div>\n    }\n    <div class=\"mt-auto\">\n      @if (timepickerLabel()) {\n        <label class=\"form-label\" [for]=\"timepickerId\">{{ timepickerLabel() | translate }}</label>\n      }\n      <si-timepicker\n        #timePicker\n        [id]=\"timepickerId\"\n        [ngModel]=\"time\"\n        [disabled]=\"disabledTime()\"\n        [hoursLabel]=\"config().hoursLabel ?? timePicker.hoursLabel()\"\n        [minutesLabel]=\"config().minutesLabel ?? timePicker.minutesLabel()\"\n        [secondsLabel]=\"config().secondsLabel ?? timePicker.secondsLabel()\"\n        [millisecondsLabel]=\"config().millisecondsLabel ?? timePicker.millisecondsLabel()\"\n        [hideLabels]=\"config().hideLabels ?? timePicker.hideLabels()\"\n        [hoursAriaLabel]=\"config().hoursAriaLabel ?? timePicker.hoursAriaLabel()\"\n        [minutesAriaLabel]=\"config().minutesAriaLabel ?? timePicker.minutesAriaLabel()\"\n        [secondsAriaLabel]=\"config().secondsAriaLabel ?? timePicker.secondsAriaLabel()\"\n        [millisecondsAriaLabel]=\"\n          config().millisecondsAriaLabel ?? timePicker.millisecondsAriaLabel()\n        \"\n        [hoursPlaceholder]=\"config().hoursPlaceholder ?? timePicker.hoursPlaceholder()\"\n        [minutesPlaceholder]=\"config().minutesPlaceholder ?? timePicker.minutesPlaceholder()\"\n        [secondsPlaceholder]=\"config().secondsPlaceholder ?? timePicker.secondsPlaceholder()\"\n        [millisecondsPlaceholder]=\"\n          config().millisecondsPlaceholder ?? timePicker.millisecondsPlaceholder()\n        \"\n        [meridians]=\"config().meridians ?? timePicker.meridians()\"\n        [meridiansLabel]=\"config().meridiansLabel ?? timePicker.meridiansLabel()\"\n        [meridiansAriaLabel]=\"config().meridiansAriaLabel ?? timePicker.meridiansAriaLabel()\"\n        [showMinutes]=\"config().showMinutes ?? true\"\n        [showSeconds]=\"config().showSeconds ?? false\"\n        [showMilliseconds]=\"config().showMilliseconds ?? false\"\n        [showMeridian]=\"time12h()\"\n        (ngModelChange)=\"timeSelected($event)\"\n      />\n    </div>\n  </div>\n}\n", styles: [":host ::ng-deep .selection .month:not(.disabled):hover,:host ::ng-deep .selection .year:not(.disabled):hover,:host ::ng-deep .year:not(.disabled):not(.selected):hover,:host ::ng-deep .month:not(.disabled):not(.selected):hover,:host ::ng-deep .day:not(.disabled):not(.selected):hover{background:var(--element-base-1-hover);color:var(--element-ui-0)}:host ::ng-deep .year,:host ::ng-deep .month,:host ::ng-deep .day{block-size:32px;line-height:32px;inline-size:100%}:host ::ng-deep .day{inline-size:32px}:host ::ng-deep .year,:host ::ng-deep .month,:host ::ng-deep .day{margin-inline:auto;position:relative;border:unset;background-color:unset;padding:0;cursor:pointer;border-radius:var(--element-button-radius)}:host{background:var(--element-base-1);border-radius:var(--element-radius-2);display:flex;flex-direction:column;inline-size:348px}:host ::ng-deep .header,:host ::ng-deep .footer{display:flex;align-items:center}:host ::ng-deep .header{padding-block-start:12px;padding-block-end:16px;padding-inline:32px;border-block-end:1px solid var(--element-ui-4)}:host ::ng-deep .header a{text-decoration:none;cursor:pointer}:host ::ng-deep .footer{margin-block-start:4px;text-align:center}:host ::ng-deep table{inline-size:100%;border-collapse:separate;border-spacing:0 3px;table-layout:fixed;margin-block-end:-3px}:host ::ng-deep .day.selected{background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep .month.selected{background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep .year.selected{background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep td[role=gridcell]{text-align:center}:host ::ng-deep th{font-weight:400;text-align:center;block-size:32px}:host ::ng-deep .week-num,:host ::ng-deep th{font-size:.75rem;color:var(--element-text-secondary);inline-size:32px;cursor:default}:host ::ng-deep .today.selected:before{border-color:var(--element-ui-5)}:host ::ng-deep .today:before{position:absolute;content:\"\";inset:1px;border:1px solid var(--element-ui-1);border-radius:var(--element-radius-2);display:inline-block}:host ::ng-deep .selection .month,:host ::ng-deep .selection .year{block-size:30px;line-height:30px;cursor:pointer}:host ::ng-deep .selection .month{inline-size:50%}:host ::ng-deep .selection .year{inline-size:33.3%}:host ::ng-deep .disabled{color:var(--element-text-disabled);font-weight:400!important;cursor:default!important}:host ::ng-deep .range{background-color:var(--element-ui-4)}:host ::ng-deep .range:hover{background:var(--element-base-1-hover)}:host ::ng-deep .range:hover div.si-title-1:hover{background:transparent}:host ::ng-deep .range-hover{background-color:var(--element-base-1-hover)}:host ::ng-deep .range-hover-end{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}:host ::ng-deep td:is(.range-start,.range-end){background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep td:is(.range-start,.range-end) div.si-title-1:hover,:host ::ng-deep td:is(.range-start,.range-end) div.si-body-1:hover{background:transparent;color:var(--element-base-1)}:host ::ng-deep td:is(.range-start,.range-end) .today:before{border-color:var(--element-ui-5)}:host ::ng-deep td.range-start{border-start-start-radius:var(--element-button-radius);border-end-start-radius:var(--element-button-radius)}:host ::ng-deep td.range-end{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}:host ::ng-deep .calendar-button{font-weight:700;font-size:.875rem;line-height:1.143;color:var(--element-text-active);min-inline-size:0!important}:host ::ng-deep .calendar{block-size:28em}:host ::ng-deep .timepicker-container{display:flex;flex:1 1 auto;flex-direction:column}\n"], dependencies: [{ kind: "component", type: SiYearSelectionComponent, selector: "si-year-selection", inputs: ["focusedDate"], outputs: ["focusedDateChange", "yearRangeChange"] }, { kind: "component", type: SiMonthSelectionComponent, selector: "si-month-selection", inputs: ["months", "focusedDate"], outputs: ["focusedDateChange", "activeMonthChange", "viewChange"] }, { kind: "component", type: SiDaySelectionComponent, selector: "si-day-selection", inputs: ["hideWeekNumbers", "weekStartDay", "focusedDate", "todayLabel", "calenderWeekLabel"], outputs: ["focusedDateChange", "activeMonthChange", "viewChange"] }, { kind: "component", type: SiTimepickerComponent, selector: "si-timepicker", inputs: ["id", "disabled", "hoursLabel", "minutesLabel", "secondsLabel", "millisecondsLabel", "hideLabels", "hoursAriaLabel", "minutesAriaLabel", "secondsAriaLabel", "millisecondsAriaLabel", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder", "millisecondsPlaceholder", "meridians", "meridiansLabel", "meridiansAriaLabel", "showMinutes", "showSeconds", "showMilliseconds", "showMeridian", "min", "max", "readonly"], outputs: ["isValid", "meridianChange", "inputCompleted"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i2.SiTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-datepicker', imports: [
+                        SiYearSelectionComponent,
+                        SiMonthSelectionComponent,
+                        SiDaySelectionComponent,
+                        SiTimepickerComponent,
+                        FormsModule,
+                        SiTranslateModule
+                    ], template: "@if (!hideCalendar()) {\n  <div class=\"text-center pb-6 calendar\">\n    @switch (view()) {\n      @case ('year') {\n        <si-year-selection\n          [focusedDate]=\"actualFocusedDate()\"\n          [startDate]=\"startDate\"\n          [endDate]=\"endDate\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [maxMonth]=\"maxMonth()\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          (selectedValueChange)=\"activeYearChange($event)\"\n        />\n      }\n      @case ('month') {\n        <si-month-selection\n          [startDate]=\"startDate\"\n          [endDate]=\"endDate\"\n          [months]=\"months\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [maxMonth]=\"maxMonth()\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previewRange]=\"rangeType() === 'END'\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          [activeHover]=\"activeHover()\"\n          [focusedDate]=\"actualFocusedDate()\"\n          (activeHoverChange)=\"onActiveHoverChange($event)\"\n          (focusedDateChange)=\"focusedDate.set($event)\"\n          (selectedValueChange)=\"activeMonthChange($event)\"\n          (viewChange)=\"view.set($event)\"\n        />\n      }\n      @case ('week') {\n        <si-day-selection\n          [initialFocus]=\"forceFocus()\"\n          [startDate]=\"startDate\"\n          [endDate]=\"dateRange()?.end\"\n          [isRangeSelection]=\"config().enableDateRange!\"\n          [previewRange]=\"rangeType() === 'END'\"\n          [hideWeekNumbers]=\"hideWeekNumbers\"\n          [minDate]=\"config().minDate\"\n          [maxDate]=\"config().maxDate\"\n          [minMonth]=\"minMonth()\"\n          [weekStartDay]=\"weekStartDay\"\n          [calenderWeekLabel]=\"calenderWeekLabel()\"\n          [previousLabel]=\"previousLabel() | translate\"\n          [nextLabel]=\"nextLabel() | translate\"\n          [todayLabel]=\"config().todayText\"\n          [activeHover]=\"activeHover()\"\n          [focusedDate]=\"actualFocusedDate()\"\n          (activeHoverChange)=\"onActiveHoverChange($event)\"\n          (focusedDateChange)=\"focusedDate.set($event)\"\n          (selectedValueChange)=\"selectionChange($event!)\"\n          (viewChange)=\"view.set($event)\"\n        />\n      }\n    }\n  </div>\n}\n@if (this.config().showTime) {\n  <div\n    class=\"timepicker-container px-9 pb-6\"\n    [class.pt-6]=\"!hideCalendar()\"\n    [class.border-top]=\"!hideCalendar()\"\n  >\n    @if (!config().mandatoryTime && !hideTimeToggle()) {\n      <div class=\"mb-5 form-check form-switch\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          role=\"switch\"\n          [id]=\"switchId\"\n          [checked]=\"!disabledTime()\"\n          (change)=\"toggleDisabledTime()\"\n        />\n        <label class=\"form-check-label\" [for]=\"switchId\">{{\n          includeTimeLabel() | translate\n        }}</label>\n      </div>\n    }\n    <div class=\"mt-auto\">\n      @if (timepickerLabel()) {\n        <label class=\"form-label\" [for]=\"timepickerId\">{{ timepickerLabel() | translate }}</label>\n      }\n      <si-timepicker\n        #timePicker\n        [id]=\"timepickerId\"\n        [ngModel]=\"time\"\n        [disabled]=\"disabledTime()\"\n        [hoursLabel]=\"config().hoursLabel ?? timePicker.hoursLabel()\"\n        [minutesLabel]=\"config().minutesLabel ?? timePicker.minutesLabel()\"\n        [secondsLabel]=\"config().secondsLabel ?? timePicker.secondsLabel()\"\n        [millisecondsLabel]=\"config().millisecondsLabel ?? timePicker.millisecondsLabel()\"\n        [hideLabels]=\"config().hideLabels ?? timePicker.hideLabels()\"\n        [hoursAriaLabel]=\"config().hoursAriaLabel ?? timePicker.hoursAriaLabel()\"\n        [minutesAriaLabel]=\"config().minutesAriaLabel ?? timePicker.minutesAriaLabel()\"\n        [secondsAriaLabel]=\"config().secondsAriaLabel ?? timePicker.secondsAriaLabel()\"\n        [millisecondsAriaLabel]=\"\n          config().millisecondsAriaLabel ?? timePicker.millisecondsAriaLabel()\n        \"\n        [hoursPlaceholder]=\"config().hoursPlaceholder ?? timePicker.hoursPlaceholder()\"\n        [minutesPlaceholder]=\"config().minutesPlaceholder ?? timePicker.minutesPlaceholder()\"\n        [secondsPlaceholder]=\"config().secondsPlaceholder ?? timePicker.secondsPlaceholder()\"\n        [millisecondsPlaceholder]=\"\n          config().millisecondsPlaceholder ?? timePicker.millisecondsPlaceholder()\n        \"\n        [meridians]=\"config().meridians ?? timePicker.meridians()\"\n        [meridiansLabel]=\"config().meridiansLabel ?? timePicker.meridiansLabel()\"\n        [meridiansAriaLabel]=\"config().meridiansAriaLabel ?? timePicker.meridiansAriaLabel()\"\n        [showMinutes]=\"config().showMinutes ?? true\"\n        [showSeconds]=\"config().showSeconds ?? false\"\n        [showMilliseconds]=\"config().showMilliseconds ?? false\"\n        [showMeridian]=\"time12h()\"\n        (ngModelChange)=\"timeSelected($event)\"\n      />\n    </div>\n  </div>\n}\n", styles: [":host ::ng-deep .selection .month:not(.disabled):hover,:host ::ng-deep .selection .year:not(.disabled):hover,:host ::ng-deep .year:not(.disabled):not(.selected):hover,:host ::ng-deep .month:not(.disabled):not(.selected):hover,:host ::ng-deep .day:not(.disabled):not(.selected):hover{background:var(--element-base-1-hover);color:var(--element-ui-0)}:host ::ng-deep .year,:host ::ng-deep .month,:host ::ng-deep .day{block-size:32px;line-height:32px;inline-size:100%}:host ::ng-deep .day{inline-size:32px}:host ::ng-deep .year,:host ::ng-deep .month,:host ::ng-deep .day{margin-inline:auto;position:relative;border:unset;background-color:unset;padding:0;cursor:pointer;border-radius:var(--element-button-radius)}:host{background:var(--element-base-1);border-radius:var(--element-radius-2);display:flex;flex-direction:column;inline-size:348px}:host ::ng-deep .header,:host ::ng-deep .footer{display:flex;align-items:center}:host ::ng-deep .header{padding-block-start:12px;padding-block-end:16px;padding-inline:32px;border-block-end:1px solid var(--element-ui-4)}:host ::ng-deep .header a{text-decoration:none;cursor:pointer}:host ::ng-deep .footer{margin-block-start:4px;text-align:center}:host ::ng-deep table{inline-size:100%;border-collapse:separate;border-spacing:0 3px;table-layout:fixed;margin-block-end:-3px}:host ::ng-deep .day.selected{background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep .month.selected{background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep .year.selected{background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep td[role=gridcell]{text-align:center}:host ::ng-deep th{font-weight:400;text-align:center;block-size:32px}:host ::ng-deep .week-num,:host ::ng-deep th{font-size:.75rem;color:var(--element-text-secondary);inline-size:32px;cursor:default}:host ::ng-deep .today.selected:before{border-color:var(--element-ui-5)}:host ::ng-deep .today:before{position:absolute;content:\"\";inset:1px;border:1px solid var(--element-ui-1);border-radius:var(--element-radius-2);display:inline-block}:host ::ng-deep .selection .month,:host ::ng-deep .selection .year{block-size:30px;line-height:30px;cursor:pointer}:host ::ng-deep .selection .month{inline-size:50%}:host ::ng-deep .selection .year{inline-size:33.3%}:host ::ng-deep .disabled{color:var(--element-text-disabled);font-weight:400!important;cursor:default!important}:host ::ng-deep .range{background-color:var(--element-ui-4)}:host ::ng-deep .range:hover{background:var(--element-base-1-hover)}:host ::ng-deep .range:hover div.si-title-1:hover{background:transparent}:host ::ng-deep .range-hover{background-color:var(--element-base-1-hover)}:host ::ng-deep .range-hover-end{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}:host ::ng-deep td:is(.range-start,.range-end){background:var(--element-ui-0);color:var(--element-base-1)}:host ::ng-deep td:is(.range-start,.range-end) div.si-title-1:hover,:host ::ng-deep td:is(.range-start,.range-end) div.si-body-1:hover{background:transparent;color:var(--element-base-1)}:host ::ng-deep td:is(.range-start,.range-end) .today:before{border-color:var(--element-ui-5)}:host ::ng-deep td.range-start{border-start-start-radius:var(--element-button-radius);border-end-start-radius:var(--element-button-radius)}:host ::ng-deep td.range-end{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}:host ::ng-deep .calendar-button{font-weight:700;font-size:.875rem;line-height:1.143;color:var(--element-text-active);min-inline-size:0!important}:host ::ng-deep .calendar{block-size:28em}:host ::ng-deep .timepicker-container{display:flex;flex:1 1 auto;flex-direction:column}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiDatepickerOverlayComponent {
+    minMonth = signal(undefined);
+    maxMonth = signal(undefined);
+    datepicker = viewChild.required(SiDatepickerComponent);
+    /**
+     * {@inheritDoc SiDatepickerComponent#initialFocus}
+     * @defaultValue false
+     */
+    initialFocus = input(false, { transform: booleanAttribute });
+    /**
+     * {@inheritDoc SiDatepickerComponent#config}
+     * @defaultValue
+     * ```
+     * {}
+     * ```
+     */
+    config = input({});
+    /**
+     * {@inheritDoc SiDatepickerComponent#date}
+     */
+    date = model();
+    /**
+     * {@inheritDoc SiDatepickerComponent#dateRange}
+     */
+    dateRange = model();
+    /**
+     * {@inheritDoc SiDatepickerComponent#rangeType}
+     */
+    rangeType = model();
+    /**
+     * {@inheritDoc SiDatepickerComponent#time12h}
+     * @defaultValue false
+     */
+    time12h = input(false, { transform: booleanAttribute });
+    /**
+     * Emits an event to notify about disabling the time from the datepicker.
+     * When time is disable, we construct a pure date object in UTC 00:00:00 time.
+     */
+    disabledTimeChange = output();
+    /**
+     * @deprecated Property provides internal information that should not be used.
+     *
+     * @defaultValue false
+     */
+    isFocused = false;
+    document = inject(DOCUMENT);
+    elementRef = inject(ElementRef);
+    focusMonitor = inject(FocusMonitor);
+    focusTrapFactory = inject(ConfigurableFocusTrapFactory);
+    focusTrap;
+    previousActiveElement;
+    disableTime = false;
+    activeHover;
+    isTwoMonthDateRange = computed(() => !!this.config().enableDateRange &&
+        (!!this.config().enableTwoMonthDateRange || !!this.config().showTime));
+    firstDatepickerConfig = signal({});
+    secondDatepickerConfig = signal({});
+    /**
+     * Indicate that the overlay is opened in small screen.
+     * A modal dialog animation display when true and a wrapped two month calendar layout is displayed.
+     *
+     * @defaultValue false
+     */
+    isMobile = input(false);
+    completeAnimation = signal(false);
+    ngOnChanges(changes) {
+        if (changes.config) {
+            const config = this.config();
+            this.firstDatepickerConfig.set(!this.isTwoMonthDateRange ? config : { ...config, hideLabels: true });
+            this.secondDatepickerConfig.set({ ...config, hideLabels: true });
+        }
+        const dateRange = this.dateRange();
+        if (changes.config?.currentValue?.onlyMonthSelection &&
+            this.isTwoMonthDateRange() &&
+            dateRange?.start) {
+            this.minMonth.set(new Date(dateRange?.start.getFullYear(), 0, 1));
+        }
+        this.rangeType.set('START');
+        if (isValid(changes.dateRange?.currentValue?.start) &&
+            !isValid(changes.dateRange?.currentValue?.end)) {
+            this.rangeType.set('END');
+        }
+    }
+    ngOnInit() {
+        this.focusTrap = this.focusTrapFactory.create(this.elementRef.nativeElement);
+        this.previousActiveElement = this.document.activeElement ?? undefined;
+        if (this.isMobile()) {
+            setTimeout(() => this.completeAnimation.set(true), 150);
+        }
+    }
+    ngAfterViewInit() {
+        // Monitor focus events
+        this.focusMonitor
+            .monitor(this.elementRef, true)
+            .subscribe(origin => (this.isFocused = origin !== undefined));
+    }
+    ngOnDestroy() {
+        this.focusMonitor.stopMonitoring(this.elementRef);
+        this.focusTrap.destroy();
+        if (this.initialFocus() && this.previousActiveElement && 'focus' in this.previousActiveElement)
+            this.previousActiveElement.focus();
+    }
+    /**
+     * Focus active cell in the current datepicker view.
+     */
+    focusActiveCell() {
+        this.datepicker().focusActiveCell();
+    }
+    firstDatepickerFocusDateChange(newFocusedDate) {
+        if (!newFocusedDate) {
+            return;
+        }
+        if (this.config()?.onlyMonthSelection) {
+            this.minMonth.set(new Date(newFocusedDate.getFullYear() + 1, 0, 1));
+        }
+        else if (newFocusedDate !== this.maxMonth()) {
+            this.minMonth.set(nextMonth(newFocusedDate));
+        }
+    }
+    secondDatepickerFocusDateChange(newFocusedDate) {
+        if (newFocusedDate && newFocusedDate !== this.minMonth()) {
+            if (this.config()?.onlyMonthSelection) {
+                this.maxMonth.set(new Date(newFocusedDate.getFullYear() - 1, 11, 31));
+            }
+            else {
+                this.maxMonth.set(previousMonth(newFocusedDate));
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiDatepickerOverlayComponent, isStandalone: true, selector: "si-datepicker-overlay", inputs: { initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: true, isRequired: false, transformFunction: null }, rangeType: { classPropertyName: "rangeType", publicName: "rangeType", isSignal: true, isRequired: false, transformFunction: null }, time12h: { classPropertyName: "time12h", publicName: "time12h", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange", dateRange: "dateRangeChange", rangeType: "rangeTypeChange", disabledTimeChange: "disabledTimeChange" }, host: { properties: { "class.flex-wrap": "isMobile()", "class.mobile-datepicker-overlay": "isMobile()", "class.fade": "isMobile()", "class.show": "completeAnimation()" }, classAttribute: "mt-md-1 d-flex elevation-2 rounded-2 overflow-auto align-items-stretch" }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: SiDatepickerComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `
+    <si-datepicker
+      #datepicker
+      tabindex="-1"
+      [initialFocus]="initialFocus()"
+      [config]="firstDatepickerConfig()"
+      [class.first-datepicker]="isTwoMonthDateRange() && !isMobile()"
+      [class.first-datepicker-mobile]="isTwoMonthDateRange() && isMobile()"
+      [date]="date()"
+      [dateRange]="dateRange()"
+      [dateRangeRole]="isTwoMonthDateRange() ? 'START' : undefined"
+      [time12h]="time12h()"
+      [timepickerLabel]="firstDatepickerConfig().startTimeLabel"
+      [maxMonth]="maxMonth()"
+      [rangeType]="rangeType()"
+      [(activeHover)]="activeHover"
+      (dateChange)="date.set($event)"
+      (dateRangeChange)="dateRange.set($event)"
+      (disabledTimeChange)="disableTime = $event; disabledTimeChange.emit($event)"
+      (focusedDateChange)="firstDatepickerFocusDateChange($event)"
+      (rangeTypeChange)="rangeType.set($event)"
+    />
+    @if (isTwoMonthDateRange()) {
+      <si-datepicker
+        #datepickerTwo
+        class="mh-100 overflow-auto"
+        tabindex="-1"
+        dateRangeRole="END"
+        [class.second-datepicker]="!isMobile()"
+        [class.second-datepicker-mobile]="isMobile()"
+        [hideTimeToggle]="true"
+        [initialFocus]="initialFocus()"
+        [config]="secondDatepickerConfig()"
+        [date]="date()"
+        [hideCalendar]="isMobile()"
+        [minMonth]="minMonth()"
+        [dateRange]="dateRange()"
+        [disabledTime]="disableTime"
+        [time12h]="time12h()"
+        [timepickerLabel]="secondDatepickerConfig().endTimeLabel"
+        [rangeType]="rangeType()"
+        [(activeHover)]="activeHover"
+        (dateRangeChange)="dateRange.set($event)"
+        (focusedDateChange)="secondDatepickerFocusDateChange($event)"
+        (rangeTypeChange)="rangeType.set($event)"
+      />
+    }
+  `, isInline: true, styles: [":host{max-block-size:max-content;max-inline-size:min-content}:host.fade{transition:transform calc(.3s * var(--element-animations-enabled, 1)) ease-out;transform:translateY(-50px)}:host.show{transform:none}.mobile-datepicker-overlay{max-inline-size:348px}.first-datepicker{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.second-datepicker{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.first-datepicker-mobile{border-block-end:0;border-end-start-radius:0;border-end-end-radius:0}.second-datepicker-mobile{border-block-start:0;border-start-start-radius:0;border-start-end-radius:0}\n"], dependencies: [{ kind: "component", type: SiDatepickerComponent, selector: "si-datepicker", inputs: ["focusedDate", "date", "dateRange", "dateRangeRole", "initialFocus", "disabledTime", "config", "previousLabel", "nextLabel", "calenderWeekLabel", "time12h", "rangeType", "minMonth", "maxMonth", "hideTimeToggle", "hideCalendar", "timepickerLabel", "activeHover"], outputs: ["focusedDateChange", "dateChange", "dateRangeChange", "disabledTimeChange", "configChange", "rangeTypeChange", "activeHoverChange"] }, { kind: "ngmodule", type: A11yModule }], changeDetection: i0.ChangeDetectionStrategy.Default });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-datepicker-overlay', host: {
+                        class: 'mt-md-1 d-flex elevation-2 rounded-2 overflow-auto align-items-stretch',
+                        '[class.flex-wrap]': 'isMobile()',
+                        '[class.mobile-datepicker-overlay]': 'isMobile()',
+                        '[class.fade]': 'isMobile()',
+                        '[class.show]': 'completeAnimation()'
+                    }, template: `
+    <si-datepicker
+      #datepicker
+      tabindex="-1"
+      [initialFocus]="initialFocus()"
+      [config]="firstDatepickerConfig()"
+      [class.first-datepicker]="isTwoMonthDateRange() && !isMobile()"
+      [class.first-datepicker-mobile]="isTwoMonthDateRange() && isMobile()"
+      [date]="date()"
+      [dateRange]="dateRange()"
+      [dateRangeRole]="isTwoMonthDateRange() ? 'START' : undefined"
+      [time12h]="time12h()"
+      [timepickerLabel]="firstDatepickerConfig().startTimeLabel"
+      [maxMonth]="maxMonth()"
+      [rangeType]="rangeType()"
+      [(activeHover)]="activeHover"
+      (dateChange)="date.set($event)"
+      (dateRangeChange)="dateRange.set($event)"
+      (disabledTimeChange)="disableTime = $event; disabledTimeChange.emit($event)"
+      (focusedDateChange)="firstDatepickerFocusDateChange($event)"
+      (rangeTypeChange)="rangeType.set($event)"
+    />
+    @if (isTwoMonthDateRange()) {
+      <si-datepicker
+        #datepickerTwo
+        class="mh-100 overflow-auto"
+        tabindex="-1"
+        dateRangeRole="END"
+        [class.second-datepicker]="!isMobile()"
+        [class.second-datepicker-mobile]="isMobile()"
+        [hideTimeToggle]="true"
+        [initialFocus]="initialFocus()"
+        [config]="secondDatepickerConfig()"
+        [date]="date()"
+        [hideCalendar]="isMobile()"
+        [minMonth]="minMonth()"
+        [dateRange]="dateRange()"
+        [disabledTime]="disableTime"
+        [time12h]="time12h()"
+        [timepickerLabel]="secondDatepickerConfig().endTimeLabel"
+        [rangeType]="rangeType()"
+        [(activeHover)]="activeHover"
+        (dateRangeChange)="dateRange.set($event)"
+        (focusedDateChange)="secondDatepickerFocusDateChange($event)"
+        (rangeTypeChange)="rangeType.set($event)"
+      />
+    }
+  `, changeDetection: ChangeDetectionStrategy.Default, imports: [SiDatepickerComponent, A11yModule], styles: [":host{max-block-size:max-content;max-inline-size:min-content}:host.fade{transition:transform calc(.3s * var(--element-animations-enabled, 1)) ease-out;transform:translateY(-50px)}:host.show{transform:none}.mobile-datepicker-overlay{max-inline-size:348px}.first-datepicker{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.second-datepicker{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.first-datepicker-mobile{border-block-end:0;border-end-start-radius:0;border-end-end-radius:0}.second-datepicker-mobile{border-block-start:0;border-start-start-radius:0;border-start-end-radius:0}\n"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+// eslint-disable-next-line no-restricted-syntax
+var CloseCause;
+(function (CloseCause) {
+    CloseCause["Backdrop"] = "backdrop";
+    CloseCause["Detach"] = "detach";
+    CloseCause["Escape"] = "escape";
+    CloseCause["Select"] = "select";
+})(CloseCause || (CloseCause = {}));
+/**
+ * Directive with the responsibility to open/close datepicker overlay.
+ */
+class SiDatepickerOverlayDirective {
+    /**
+     * Position of the datepicker overlay. Accepts an array of positions or a single position.
+     * The position will be chosen based on the first position that fits into the viewport.
+     * The input is necessary since the positions between the siDatepicker directive and si-date-range
+     * component are different.
+     * @internal
+     */
+    placement = signal([
+        {
+            overlayX: 'start',
+            overlayY: 'top',
+            originX: 'start',
+            originY: 'bottom'
+        },
+        {
+            overlayX: 'start',
+            overlayY: 'bottom',
+            originX: 'start',
+            originY: 'top'
+        }
+    ]);
+    /**
+     * Output event on closing datepicker e.g. by clicking backdrop or escape key.
+     */
+    siDatepickerClose = output();
+    overlayRef;
+    datepickerRef;
+    autoCloseSelection = new Subject();
+    /** Guard for siDatepickerClose event emitter to make sure the cause is emitter just once */
+    ignoreClose = false;
+    overlay = inject(Overlay);
+    triggerElementRef = inject(ElementRef);
+    mediaMatcher = inject(MediaMatcher);
+    breakpointObserver = inject(BreakpointObserver);
+    destroyRef = inject(DestroyRef);
+    /**
+     * When the media query matches on open the overlay is displayed like a modal dialog.
+     * In case, users change the screen size to the matching media query we close the overlay
+     * if it is open with a connected overlay strategy.
+     */
+    smallScreenQuery = `(max-width: ${BOOTSTRAP_BREAKPOINTS.mdMinimum}px) or (max-height: ${BOOTSTRAP_BREAKPOINTS.smMinimum}px)`;
+    ngOnDestroy() {
+        this.overlayRef?.dispose();
+        this.datepickerRef = undefined;
+    }
+    /**
+     * Toggle open/close overlay.
+     * @param focus - move focus to the datepicker.
+     * @param inputs - for datepicker.
+     * @returns create datepicker overlay instance or undefined
+     *
+     * @deprecated Use {@link showOverlay} or {@link closeOverlay} instead.
+     */
+    toggleOverlay(focus, inputs) {
+        if (!this.datepickerRef) {
+            return this.showDatepicker().setInputs(inputs).focus(focus).datepickerRef;
+        }
+        else {
+            return this.closeOverlay();
+        }
+    }
+    /**
+     * Show datepicker overlay.
+     * @param focus - move focus to the datepicker.
+     * @returns create datepicker overlay instance
+     */
+    showOverlay(focus = false, inputs) {
+        return this.showDatepicker().setInputs(inputs).focus(focus).datepickerRef;
+    }
+    /**
+     * Close datepicker.
+     */
+    closeOverlay() {
+        if (this.overlayRef?.hasAttached()) {
+            this.overlayRef?.detach();
+            this.overlayRef?.dispose();
+        }
+        this.datepickerRef = undefined;
+        return undefined;
+    }
+    /**
+     * Focus active cell in datepicker.
+     * @param focus - show transfer focus.
+     * @returns current instance.
+     */
+    focus(focus = true) {
+        if (focus) {
+            this.datepickerRef?.setInput('initialFocus', true);
+            this.datepickerRef?.instance.focusActiveCell();
+            this.datepickerRef?.changeDetectorRef.markForCheck();
+        }
+        return this;
+    }
+    /** @deprecated Property provides internal information that should not be used. */
+    isFocused() {
+        return this.datepickerRef?.instance.isFocused ?? false;
+    }
+    /**
+     * Indicate the datepicker is visible.
+     * @returns is visible.
+     */
+    isShown() {
+        return this.datepickerRef;
+    }
+    /** Set datepicker inputs */
+    setInputs(inputs) {
+        if (this.datepickerRef && inputs) {
+            Object.entries(inputs).forEach(([key, value]) => {
+                this.datepickerRef.setInput(key.toString(), value);
+            });
+        }
+        return this;
+    }
+    /** Close overlay with cause select, which will recover the focus */
+    closeAfterSelection() {
+        this.autoCloseSelection.next();
+    }
+    /** Indicate whether the HTML element is a child of the datepicker overlay. */
+    contains(element) {
+        if (!element) {
+            return false;
+        }
+        return this.overlayRef?.overlayElement?.contains(element) ?? false;
+    }
+    showDatepicker() {
+        if (this.overlayRef?.hasAttached()) {
+            return this;
+        }
+        // Since the connected overlay strategy has some limitations in small screens e.g.
+        // the overlay is moved via style top without recalculating the (max)height which
+        // can result in a cut of time picker.
+        // To overcome this issue the overlay use the global position strategy in small screens.
+        const smallScreen = this.mediaMatcher.matchMedia(this.smallScreenQuery).matches;
+        if (smallScreen) {
+            this.createMobileOverlay();
+        }
+        else {
+            this.createDesktopOverlay();
+        }
+        this.closeStream(this.overlayRef)
+            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(outputToObservable(this.siDatepickerClose)))
+            .subscribe(cause => {
+            // The handler is called multiple times since we need to listen to detach events
+            if (this.datepickerRef && !this.ignoreClose) {
+                this.ignoreClose = true;
+                this.closeOverlay();
+                this.ignoreClose = false;
+                this.siDatepickerClose.emit(cause);
+            }
+        });
+        const portal = new ComponentPortal(SiDatepickerOverlayComponent);
+        this.datepickerRef = this.overlayRef.attach(portal);
+        if (smallScreen) {
+            this.datepickerRef.setInput('isMobile', true);
+        }
+        // Automatically close the overlay if we reach the small screen breakpoint
+        // and the picker does not use the global position strategy.
+        this.breakpointObserver
+            .observe(this.smallScreenQuery)
+            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(outputToObservable(this.siDatepickerClose)), skip(1))
+            .subscribe(() => this.closeOverlay());
+        return this;
+    }
+    createMobileOverlay() {
+        this.overlayRef = this.overlay.create({
+            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
+            direction: isRTL() ? 'rtl' : 'ltr',
+            hasBackdrop: true,
+            backdropClass: 'modal-backdrop'
+        });
+    }
+    createDesktopOverlay() {
+        const popoverPositions = getOverlayPositions(this.triggerElementRef, this.placement(), false);
+        this.overlayRef = this.overlay.create({
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo(this.triggerElementRef)
+                .withPositions(popoverPositions)
+                .withPush(true)
+                .withGrowAfterOpen(true)
+                .withFlexibleDimensions(true)
+                .withViewportMargin(4),
+            direction: isRTL() ? 'rtl' : 'ltr',
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop'
+        });
+    }
+    /**
+     * Merge events which shall close the overlay
+     * @param overlayRef - source for backdrop, detach or escape events.
+     * @returns merged observable
+     */
+    closeStream(overlayRef) {
+        return merge(this.autoCloseSelection.pipe(map(() => CloseCause.Select)), overlayRef.backdropClick().pipe(map(() => CloseCause.Backdrop)), overlayRef.detachments().pipe(map(() => CloseCause.Detach)), overlayRef.keydownEvents().pipe(filter(event => event.key === 'Escape'), tap(event => event.stopPropagation()), // ESC handled, prevent closing modal, etc.
+        map(() => CloseCause.Escape)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiDatepickerOverlayDirective, isStandalone: true, selector: "[siDatepickerOverlay]", outputs: { siDatepickerClose: "siDatepickerClose" }, exportAs: ["siDatepickerOverlay"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerOverlayDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siDatepickerOverlay]',
+                    exportAs: 'siDatepickerOverlay'
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiDatepickerDirective extends SiDateInputDirective {
+    /**
+     * Automatically close overlay on date selection.
+     * Do not use this behavior with config showTime = true, because it
+     * will close the overlay when the user change one of the time units.
+     *
+     * @defaultValue false
+     */
+    autoClose = input(false, { transform: booleanAttribute });
+    /**
+     * @deprecated Property has no effect and will be removed without replacement.
+     *
+     * @defaultValue inject(ElementRef)
+     */
+    triggeringInput = input(inject(ElementRef));
+    /**
+     * During focus on close the datepicker will not show since we recover the focus on element.
+     * The focus on close is only relevant when the directive is configured without a calendar button.
+     */
+    overlaySubscriptions;
+    externalTrigger;
+    overlayToggle = inject(SiDatepickerOverlayDirective);
+    ngAfterViewInit() {
+        // Update datepicker with new date value
+        this.dateChange.subscribe(date => this.overlayToggle.setInputs({ date }));
+    }
+    /** @internal */
+    touch() {
+        this.onTouched();
+    }
+    /**
+     * On click shall show datepicker.
+     */
+    onClick() {
+        if (!this.externalTrigger) {
+            this.show();
+        }
+    }
+    /**
+     * Focus out shall close the datepicker except we are moving the focus to the datepicker.
+     * @param event - focus out event with the related target
+     */
+    onBlur(event) {
+        const target = event.relatedTarget;
+        if (!this.externalTrigger && !this.overlayToggle.contains(target)) {
+            this.overlayToggle.closeOverlay();
+            this.onTouched();
+        }
+    }
+    onTab() {
+        if (this.overlayToggle.isShown()) {
+            this.overlayToggle.closeOverlay();
+        }
+    }
+    /**
+     * @internal
+     */
+    show(initialFocus = false) {
+        if (this.disabled() || this.readonly() || this.overlayToggle.isShown()) {
+            return;
+        }
+        this.subscribeDateChanges(this.overlayToggle.showOverlay(initialFocus, {
+            config: this.siDatepickerConfig(),
+            date: this.date,
+            time12h: this.getTime12h()
+        }));
+    }
+    /**
+     * @internal
+     */
+    useExternalTrigger(element) {
+        this.externalTrigger = element;
+    }
+    focusChange() {
+        if (!this.externalTrigger) {
+            this.show();
+        }
+    }
+    getTime12h() {
+        const dateFormat = getDatepickerFormat(this.locale, this.siDatepickerConfig(), true);
+        return dateFormat?.includes('a');
+    }
+    subscribeDateChanges(overlay) {
+        this.overlaySubscriptions?.forEach(s => s.unsubscribe());
+        overlay?.instance.date.subscribe(d => this.onDateChanged(d));
+        overlay?.instance.disabledTimeChange.subscribe(d => this.onDisabledTime(d));
+    }
+    /**
+     * Callback when the datepicker changes his value.
+     * @param date - updated date
+     */
+    onDateChanged(date) {
+        // While typing a date can be invalid and the datepicker component will automatically change the date to undefined.
+        // Since we don't want to reset the current input value it is necessary to ignore those updates.
+        if (!date) {
+            return;
+        }
+        super.onDateChanged(date);
+        if (this.autoClose()) {
+            // a tick later so the event won't end on the wrong element
+            setTimeout(() => this.overlayToggle.closeAfterSelection());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: SiDatepickerDirective, isStandalone: true, selector: "[siDatepicker]", inputs: { autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, triggeringInput: { classPropertyName: "triggeringInput", publicName: "triggeringInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown.tab": "onTab()", "focus": "focusChange()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: SiDatepickerDirective,
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: SiDatepickerDirective,
+                multi: true
+            },
+            {
+                provide: SI_FORM_ITEM_CONTROL,
+                useExisting: SiDatepickerDirective
+            }
+        ], exportAs: ["siDatepicker"], usesInheritance: true, hostDirectives: [{ directive: SiDatepickerOverlayDirective, outputs: ["siDatepickerClose", "siDatepickerClose"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siDatepicker]',
+                    exportAs: 'siDatepicker',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: SiDatepickerDirective,
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: SiDatepickerDirective,
+                            multi: true
+                        },
+                        {
+                            provide: SI_FORM_ITEM_CONTROL,
+                            useExisting: SiDatepickerDirective
+                        }
+                    ],
+                    hostDirectives: [
+                        {
+                            directive: SiDatepickerOverlayDirective,
+                            outputs: ['siDatepickerClose']
+                        }
+                    ]
+                }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onTab: [{
+                type: HostListener,
+                args: ['keydown.tab']
+            }], focusChange: [{
+                type: HostListener,
+                args: ['focus']
+            }] } });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiDateRangeComponent {
+    static idCounter = 0;
+    inputDirectives = viewChildren(SiDateInputDirective);
+    startInput = viewChild.required('startInput');
+    endInput = viewChild.required('endInput');
+    button = viewChild.required('button');
+    /**
+     * @defaultValue
+     * ```
+     * `__si-date-range-${SiDateRangeComponent.idCounter++}`
+     * ```
+     */
+    id = input(`__si-date-range-${SiDateRangeComponent.idCounter++}`);
+    labelledby = inject(new HostAttributeToken('aria-labelledby'), {
+        optional: true
+    }) ?? `${this.id()}-label`;
+    /**
+     * Date range component configuration.
+     *
+     * @defaultValue
+     * ```
+     * { enableDateRange: true }
+     * ```
+     */
+    siDatepickerConfig = model({ enableDateRange: true });
+    /**
+     * Placeholder of the start date input.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.START_DATE_PLACEHOLDER:Start date`
+     * ```
+     */
+    startDatePlaceholder = input($localize `:@@SI_DATEPICKER.START_DATE_PLACEHOLDER:Start date`);
+    /**
+     * Placeholder of the end date input.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.END_DATE_PLACEHOLDER:End date`
+     * ```
+     */
+    endDatePlaceholder = input($localize `:@@SI_DATEPICKER.END_DATE_PLACEHOLDER:End date`);
+    /**
+     * Aria label of the date-range calendar toggle button.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON:Open calendar`
+     * ```
+     */
+    ariaLabelCalendarButton = input($localize `:@@SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON:Open calendar`);
+    /**
+     * Form label of the start timepicker.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.START_TIME_LABEL:from`
+     * ```
+     */
+    startTimeLabel = input($localize `:@@SI_DATEPICKER.START_TIME_LABEL:from`);
+    /**
+     * Form label of the start timepicker.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.END_TIME_LABEL:to`
+     * ```
+     */
+    endTimeLabel = input($localize `:@@SI_DATEPICKER.END_TIME_LABEL:to`);
+    /**
+     * @deprecated Property has no effect and will be removed without a replacement.
+     *
+     * @defaultValue 200
+     */
+    debounceTime = input(200);
+    /**
+     * Automatically close overlay on date selection.
+     *
+     * @defaultValue false
+     */
+    autoClose = input(false, { transform: booleanAttribute });
+    /** Emits on the date range value changes. */
+    siDatepickerRangeChange = output();
+    /**
+     * Emits an event to notify about disabling the time from the range picker.
+     * When time is disable, we construct a pure date objects in UTC 00:00:00 time.
+     */
+    disabledTimeChange = output();
+    /**
+     * Whether the date range input is disabled.
+     *
+     * @defaultValue false
+     */
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    disabledInput = input(false, { alias: 'disabled' });
+    /**
+     * Whether the date range input is readonly.
+     *
+     * @defaultValue false
+     */
+    readonly = input(false, { transform: booleanAttribute });
+    /**
+     * Set the date-range object displayed in the control.
+     * The input can be used if the control is used outside Angular forms.
+     */
+    value = model();
+    /** @internal */
+    errormessageId = `${this.id()}-errormessage`;
+    validator;
+    onChange = (val) => { };
+    onTouch = () => { };
+    icons = addIcons({ elementCalendar });
+    disabled = computed(() => this.disabledInput() || this.disabledNgControl());
+    disabledNgControl = signal(false);
+    cdRef = inject(ChangeDetectorRef);
+    overlayToggle = inject(SiDatepickerOverlayDirective);
+    elementRef = inject(ElementRef);
+    defaultPlacement = [
+        positionBottomCenter,
+        positionBottomStart,
+        positionBottomEnd,
+        positionTopCenter,
+        positionTopStart,
+        positionTopEnd
+    ];
+    ngOnChanges(changes) {
+        if (changes.siDatepickerConfig) {
+            this.siDatepickerConfig.set({
+                ...changes.siDatepickerConfig.currentValue,
+                enableDateRange: true,
+                startTimeLabel: changes.siDatepickerConfig.currentValue.startTimeLabel ?? this.startTimeLabel(),
+                endTimeLabel: changes.siDatepickerConfig.currentValue.endTimeLabel ?? this.endTimeLabel()
+            });
+            if (changes.value) {
+                this.updateValue(this.value());
+            }
+        }
+        this.overlayToggle.setInputs({ config: this.siDatepickerConfig(), dateRange: this.value() });
+    }
+    ngAfterViewInit() {
+        this.validator = Validators.compose([
+            () => this.endAfterStartValidator(),
+            this.childValidation
+        ]);
+        this.overlayToggle.placement.set(this.defaultPlacement);
+        this.overlayToggle.siDatepickerClose.subscribe(cause => {
+            if ([CloseCause.Escape, CloseCause.Select].includes(cause)) {
+                this.button().nativeElement.focus();
+            }
+            else {
+                // Mark component as touch when the focus isn't recovered on input
+                this.onTouch();
+                this.cdRef.markForCheck();
+            }
+        });
+    }
+    writeValue(dateRange) {
+        this.updateValue(dateRange);
+        this.overlayToggle.setInputs({ dateRange });
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledNgControl.set(isDisabled);
+    }
+    validate(c) {
+        return this.validator ? this.validator(c) : null;
+    }
+    /**
+     * Focus out shall close the datepicker except we are moving the focus to the datepicker or one of the input elements.
+     * @param event - focus out event with the related target
+     */
+    onFocusOut(event) {
+        const target = event.relatedTarget;
+        if (!this.overlayToggle.contains(target)) {
+            this.overlayToggle.closeOverlay();
+            // Only mark the component as touched when the focus is not moved to the datepicker or one of the input elements.
+            if (!this.elementRef.nativeElement.contains(target)) {
+                this.onTouch();
+            }
+        }
+    }
+    /** Forward date range input changes to datepicker overlay */
+    onInputChanged(dateRange) {
+        this.updateValue(dateRange);
+        this.onChange(this.value());
+        this.siDatepickerRangeChange.emit(this.value());
+    }
+    show() {
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
+        this.subscribeRangeChanges(this.overlayToggle.showOverlay(true, {
+            config: this.siDatepickerConfig(),
+            dateRange: this.value()
+        }));
+    }
+    subscribeRangeChanges(overlay) {
+        overlay?.instance.dateRange.subscribe(d => this.onRangeChanged(d));
+        overlay?.instance.disabledTimeChange.subscribe(disabledTime => {
+            this.inputDirectives().forEach(inputDirective => inputDirective.onDisabledTime(disabledTime));
+            this.disabledTimeChange.emit(disabledTime);
+        });
+    }
+    onRangeChanged(range) {
+        this.updateValue(range);
+        this.onChange(range);
+        this.siDatepickerRangeChange.emit(range);
+        this.validateChildren();
+        if (this.autoClose() && this.value()?.start && this.value()?.end) {
+            // We have to queue the close in the another cycle since other output event
+            // emitters like rangeTypeChange can complete before we destroy the overlay.
+            setTimeout(() => this.overlayToggle.closeAfterSelection());
+        }
+    }
+    /** Run validators on the start/end inputs. */
+    validateChildren() {
+        this.inputDirectives().forEach(d => d.validatorOnChange());
+    }
+    /** The form control validator for the end date is greater equal start date. */
+    endAfterStartValidator() {
+        const endDate = this.endInput().value;
+        const startDate = this.startInput().value;
+        return !endDate || !startDate || endDate >= startDate
+            ? null
+            : {
+                endBeforeStart: {
+                    start: startDate,
+                    end: endDate
+                }
+            };
+    }
+    childValidation = () => {
+        const errors = {};
+        this.readErrorsFromInnerControl(this.startInput(), 'Start', errors);
+        this.readErrorsFromInnerControl(this.endInput(), 'End', errors);
+        if (Object.keys(errors).length) {
+            return errors;
+        }
+        return null;
+    };
+    readErrorsFromInnerControl(control, type, errors) {
+        if (control.invalid) {
+            const formatError = control.getError('dateFormat');
+            if (formatError) {
+                errors[`invalid${type}DateFormat`] = formatError;
+            }
+            const minError = control.getError('minDate');
+            const siDatepickerConfig = this.siDatepickerConfig();
+            if (minError) {
+                errors.rangeBeforeMinDate = {
+                    min: getMinDate(siDatepickerConfig.minDate),
+                    start: this.startInput().value,
+                    end: this.endInput().value
+                };
+            }
+            const maxError = control.getError('maxDate');
+            if (maxError) {
+                errors.rangeAfterMaxDate = {
+                    max: getMaxDate(siDatepickerConfig.maxDate),
+                    start: this.startInput().value,
+                    end: this.endInput().value
+                };
+            }
+        }
+    }
+    updateValue(value) {
+        // this allows angular's built in required validator to work correctly
+        if (!value?.start && !value?.end) {
+            this.value.set(undefined);
+        }
+        else {
+            this.value.set(value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.6", type: SiDateRangeComponent, isStandalone: true, selector: "si-date-range", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, siDatepickerConfig: { classPropertyName: "siDatepickerConfig", publicName: "siDatepickerConfig", isSignal: true, isRequired: false, transformFunction: null }, startDatePlaceholder: { classPropertyName: "startDatePlaceholder", publicName: "startDatePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, endDatePlaceholder: { classPropertyName: "endDatePlaceholder", publicName: "endDatePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelCalendarButton: { classPropertyName: "ariaLabelCalendarButton", publicName: "ariaLabelCalendarButton", isSignal: true, isRequired: false, transformFunction: null }, startTimeLabel: { classPropertyName: "startTimeLabel", publicName: "startTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, endTimeLabel: { classPropertyName: "endTimeLabel", publicName: "endTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { siDatepickerConfig: "siDatepickerConfigChange", siDatepickerRangeChange: "siDatepickerRangeChange", disabledTimeChange: "disabledTimeChange", value: "valueChange" }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onFocusOut($event)" }, properties: { "class.disabled": "disabled()", "class.readonly": "readonly()", "attr.aria-labelledby": "labelledby" }, classAttribute: "form-control d-flex align-items-center pe-2" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: SiDateRangeComponent,
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: SiDateRangeComponent,
+                multi: true
+            },
+            {
+                provide: SI_FORM_ITEM_CONTROL,
+                useExisting: SiDateRangeComponent
+            }
+        ], viewQueries: [{ propertyName: "inputDirectives", predicate: SiDateInputDirective, descendants: true, isSignal: true }, { propertyName: "startInput", first: true, predicate: ["startInput"], descendants: true, isSignal: true }, { propertyName: "endInput", first: true, predicate: ["endInput"], descendants: true, isSignal: true }, { propertyName: "button", first: true, predicate: ["button"], descendants: true, isSignal: true }], usesOnChanges: true, hostDirectives: [{ directive: SiDatepickerOverlayDirective, outputs: ["siDatepickerClose", "siDatepickerClose"] }], ngImport: i0, template: "<input\n  #startInput=\"ngModel\"\n  type=\"text\"\n  class=\"border-0 p-0 focus-none\"\n  siDateInput\n  [ngModel]=\"value()?.start ?? null\"\n  [siDatepickerConfig]=\"siDatepickerConfig()\"\n  [placeholder]=\"startDatePlaceholder() | translate\"\n  [attr.aria-label]=\"startDatePlaceholder() | translate\"\n  [errormessageId]=\"errormessageId\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  (ngModelChange)=\"onInputChanged({ start: $event, end: value()?.end })\"\n/>\n<span class=\"mx-3\">-</span>\n<input\n  #endInput=\"ngModel\"\n  type=\"text\"\n  class=\"border-0 p-0 focus-none text-end\"\n  siDateInput\n  [ngModel]=\"value()?.end ?? null\"\n  [siDatepickerConfig]=\"siDatepickerConfig()\"\n  [placeholder]=\"endDatePlaceholder() | translate\"\n  [attr.aria-label]=\"endDatePlaceholder() | translate\"\n  [errormessageId]=\"errormessageId\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  (ngModelChange)=\"onInputChanged({ start: value()?.start, end: $event })\"\n/>\n<button\n  #button\n  type=\"button\"\n  class=\"btn btn-circle btn-tertiary btn-xs\"\n  [attr.aria-label]=\"ariaLabelCalendarButton() | translate\"\n  [disabled]=\"disabled() || readonly()\"\n  (click)=\"show()\"\n>\n  <si-icon-next [icon]=\"icons.elementCalendar\" />\n</button>\n", styles: [":host{display:block;min-inline-size:237px;--si-action-icon-offset: 22px}:host(:focus-within){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}input{flex-grow:1;background-color:transparent;min-inline-size:80px}input::placeholder{opacity:1;color:var(--element-text-secondary)}input:disabled,input[readonly]{background-color:var(--element-base-1);opacity:1}input:disabled::placeholder{color:transparent}input:not([readonly]):focus::placeholder,input:focus:not([readonly]):focus::placeholder{color:transparent}.disabled,.disabled:hover,.disabled:focus{--border-color: var(--element-ui-3);color:var(--element-text-disabled)}.btn-circle{margin-inline-start:var(--si-feedback-icon-offset, 4px)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SiDateInputDirective, selector: "[siDateInput]", inputs: ["id", "siDatepickerConfig", "dateInputDebounceTime", "disabled", "readonly", "errormessageId"], outputs: ["siDatepickerConfigChange", "siDatepickerDisabledTime", "stateChange", "dateChange"], exportAs: ["siDateInput"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i2.SiTranslatePipe, name: "translate" }, { kind: "ngmodule", type: A11yModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDateRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-date-range', host: {
+                        class: 'form-control d-flex align-items-center pe-2',
+                        role: 'group',
+                        '[class.disabled]': 'disabled()',
+                        '[class.readonly]': 'readonly()',
+                        '[attr.aria-labelledby]': 'labelledby'
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: SiDateRangeComponent,
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: SiDateRangeComponent,
+                            multi: true
+                        },
+                        {
+                            provide: SI_FORM_ITEM_CONTROL,
+                            useExisting: SiDateRangeComponent
+                        }
+                    ], hostDirectives: [
+                        {
+                            directive: SiDatepickerOverlayDirective,
+                            outputs: ['siDatepickerClose']
+                        }
+                    ], imports: [FormsModule, SiDateInputDirective, SiIconNextComponent, SiTranslateModule, A11yModule], template: "<input\n  #startInput=\"ngModel\"\n  type=\"text\"\n  class=\"border-0 p-0 focus-none\"\n  siDateInput\n  [ngModel]=\"value()?.start ?? null\"\n  [siDatepickerConfig]=\"siDatepickerConfig()\"\n  [placeholder]=\"startDatePlaceholder() | translate\"\n  [attr.aria-label]=\"startDatePlaceholder() | translate\"\n  [errormessageId]=\"errormessageId\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  (ngModelChange)=\"onInputChanged({ start: $event, end: value()?.end })\"\n/>\n<span class=\"mx-3\">-</span>\n<input\n  #endInput=\"ngModel\"\n  type=\"text\"\n  class=\"border-0 p-0 focus-none text-end\"\n  siDateInput\n  [ngModel]=\"value()?.end ?? null\"\n  [siDatepickerConfig]=\"siDatepickerConfig()\"\n  [placeholder]=\"endDatePlaceholder() | translate\"\n  [attr.aria-label]=\"endDatePlaceholder() | translate\"\n  [errormessageId]=\"errormessageId\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  (ngModelChange)=\"onInputChanged({ start: value()?.start, end: $event })\"\n/>\n<button\n  #button\n  type=\"button\"\n  class=\"btn btn-circle btn-tertiary btn-xs\"\n  [attr.aria-label]=\"ariaLabelCalendarButton() | translate\"\n  [disabled]=\"disabled() || readonly()\"\n  (click)=\"show()\"\n>\n  <si-icon-next [icon]=\"icons.elementCalendar\" />\n</button>\n", styles: [":host{display:block;min-inline-size:237px;--si-action-icon-offset: 22px}:host(:focus-within){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}input{flex-grow:1;background-color:transparent;min-inline-size:80px}input::placeholder{opacity:1;color:var(--element-text-secondary)}input:disabled,input[readonly]{background-color:var(--element-base-1);opacity:1}input:disabled::placeholder{color:transparent}input:not([readonly]):focus::placeholder,input:focus:not([readonly]):focus::placeholder{color:transparent}.disabled,.disabled:hover,.disabled:focus{--border-color: var(--element-ui-3);color:var(--element-text-disabled)}.btn-circle{margin-inline-start:var(--si-feedback-icon-offset, 4px)}\n"] }]
+        }], propDecorators: { onFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }] } });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Calendar toggle button used in combination with a datepicker directive.
+ *
+ * @example
+ * ```
+ * <si-calendar-button class="w-100">
+ *   <input
+ *     class="form-control"
+ *     type="text"
+ *     siDatepicker
+ *     [siDatepickerConfig]="config"
+ *   />
+ * </si-calendar-button>
+ * ```
+ */
+class SiCalendarButtonComponent {
+    /**
+     * Aria label for the calendar toggle button.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON:Open calendar`
+     * ```
+     */
+    ariaLabel = input($localize `:@@SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON:Open calendar`);
+    button = viewChild.required('calendarButton');
+    /** Datepicker input directive instance used to watch for state changes and required to open the calendar. */
+    datepicker = contentChild.required(SiDatepickerDirective);
+    datepickerOverlay = contentChild.required(SiDatepickerOverlayDirective);
+    ngControl = contentChild(NgControl);
+    disabled = signal(false);
+    icons = addIcons({ elementCalendar });
+    destroyerRef = inject(DestroyRef);
+    focusMonitor = inject(FocusMonitor);
+    elementRef = inject(ElementRef);
+    // Add classes here to enable error messages in si-form-item
+    showValidationMessages = signal(false);
+    ngOnInit() {
+        // Monitor input state changes and update the button accordingly
+        this.datepicker().stateChange.subscribe(() => this.updateState());
+        this.focusMonitor
+            .monitor(this.elementRef, true)
+            .pipe(takeUntilDestroyed(this.destroyerRef))
+            .subscribe(origin => {
+            setTimeout(() => {
+                if (origin === null && !this.datepickerOverlay().isShown()) {
+                    this.datepicker().touch();
+                }
+            });
+        });
+    }
+    ngDoCheck() {
+        const control = this.ngControl()?.control;
+        this.showValidationMessages.set(!!control?.touched && !!control?.invalid);
+    }
+    ngAfterContentInit() {
+        this.datepicker().useExternalTrigger(this.button());
+        this.updateState();
+    }
+    show() {
+        this.datepicker().show(true);
+    }
+    updateState() {
+        const datepicker = this.datepicker();
+        this.disabled.set(datepicker.disabled() || datepicker.readonly());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCalendarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.6", type: SiCalendarButtonComponent, isStandalone: true, selector: "si-calendar-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ng-invalid": "showValidationMessages()", "class.ng-touched": "showValidationMessages()" }, classAttribute: "d-inline-block position-relative form-control-wrapper" }, queries: [{ propertyName: "datepicker", first: true, predicate: SiDatepickerDirective, descendants: true, isSignal: true }, { propertyName: "datepickerOverlay", first: true, predicate: SiDatepickerOverlayDirective, descendants: true, isSignal: true }, { propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["calendarButton"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />
+    <button
+      #calendarButton
+      name="open-calendar"
+      type="button"
+      class="btn btn-circle btn-tertiary btn-xs position-absolute end-0 top-0 me-2 mt-2"
+      [attr.aria-label]="ariaLabel() | translate"
+      [disabled]="disabled()"
+      (click)="show()"
+    >
+      <si-icon-next [icon]="icons.elementCalendar" />
+    </button>`, isInline: true, styles: [":host{--si-action-icon-offset: 24px}\n"], dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i2.SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCalendarButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-calendar-button', template: `<ng-content />
+    <button
+      #calendarButton
+      name="open-calendar"
+      type="button"
+      class="btn btn-circle btn-tertiary btn-xs position-absolute end-0 top-0 me-2 mt-2"
+      [attr.aria-label]="ariaLabel() | translate"
+      [disabled]="disabled()"
+      (click)="show()"
+    >
+      <si-icon-next [icon]="icons.elementCalendar" />
+    </button>`, host: {
+                        class: 'd-inline-block position-relative form-control-wrapper',
+                        '[class.ng-invalid]': 'showValidationMessages()',
+                        '[class.ng-touched]': 'showValidationMessages()'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SiIconNextComponent, SiTranslateModule], styles: [":host{--si-action-icon-offset: 24px}\n"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiDatepickerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerModule, imports: [SiCalendarButtonComponent,
+            SiDateInputDirective,
+            SiDatepickerComponent,
+            SiDatepickerDirective,
+            SiDateRangeComponent,
+            SiTimepickerComponent], exports: [SiCalendarButtonComponent,
+            SiDateInputDirective,
+            SiDatepickerComponent,
+            SiDatepickerDirective,
+            SiDateRangeComponent,
+            SiTimepickerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerModule, imports: [SiCalendarButtonComponent,
+            SiDatepickerComponent,
+            SiDateRangeComponent,
+            SiTimepickerComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDatepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        SiCalendarButtonComponent,
+                        SiDateInputDirective,
+                        SiDatepickerComponent,
+                        SiDatepickerDirective,
+                        SiDateRangeComponent,
+                        SiTimepickerComponent
+                    ],
+                    exports: [
+                        SiCalendarButtonComponent,
+                        SiDateInputDirective,
+                        SiDatepickerComponent,
+                        SiDatepickerDirective,
+                        SiDateRangeComponent,
+                        SiTimepickerComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CloseCause, SiCalendarButtonComponent, SiDateInputDirective, SiDateRangeComponent, SiDatepickerComponent, SiDatepickerDirective, SiDatepickerModule, SiDatepickerOverlayComponent, SiDatepickerOverlayDirective, SiTimepickerComponent, WEEK_START_OFFSET, addDays, addDaysInRange, addMonthsInRange, addYearsInRange, changeDay, compareDate, compareMonth, compareYear, createDate, daysInMonth, getDateSameOrBetween, getDateWithoutTime, getDatepickerFormat, getDayStrings, getDaysOfWeek, getFirstDateInMonth, getFirstDateInYear, getFirstDayInMonth, getLastDateInMonth, getLocaleMonthNames, getMaxDate, getMinDate, getNamedFormat, getStringforDate, getWeekDayOffset, getWeekEndDate, getWeekOfYear, getWeekStartDate, isAfter, isAfterMonth, isAfterYear, isAnotherMonth, isAnotherMonthOrYear, isAnotherYear, isBetween, isBetweenMonth, isBetweenYears, isSameDate, isSameMonth, isSameOrBefore, isSameOrBeforeMonth, isSameOrBeforeYear, isSameOrBetween, isSameOrBetweenMonth, isSameOrBetweenYears, isSameYear, isValid, maxDate, minDate, nextMonth, parseDate, previousMonth, today };
+//# sourceMappingURL=siemens-element-ng-datepicker.mjs.map