{"version":3,"file":"talenra-ngx-base-date.mjs","sources":["../../../projects/ngx-base/date/src/date-filters/date-in-the-future.filter.ts","../../../projects/ngx-base/date/src/date-filters/date-in-the-past.filter.ts","../../../projects/ngx-base/date/src/date-filters/first-day-of-month.filter.ts","../../../projects/ngx-base/date/src/date-filters/weekdays.filter.ts","../../../projects/ngx-base/date/src/validators/is-valid-date.function.ts","../../../projects/ngx-base/date/src/validators/validate-date.ts","../../../projects/ngx-base/date/src/validators/validate-date-is-in-the-future.ts","../../../projects/ngx-base/date/src/validators/validate-date-is-in-the-past.ts","../../../projects/ngx-base/date/src/validators/utils/convert-to-utc-date.ts","../../../projects/ngx-base/date/src/validators/validate-start-date-is-before-end-date.ts","../../../projects/ngx-base/date/src/validators/validate-year-is-equal-or-greater.ts","../../../projects/ngx-base/date/src/date/calendar-overlay/calendar-overlay.utils.ts","../../../projects/ngx-base/date/src/date/calendar-overlay/calendar-overlay.keyboard-navigation.ts","../../../projects/ngx-base/date/src/date/calendar-overlay/calendar-overlay.keyboard-navigation.day.ts","../../../projects/ngx-base/date/src/date/calendar-overlay/calendar-overlay.keyboard-navigation.month.ts","../../../projects/ngx-base/date/src/date/calendar-overlay/calendar-overlay.keyboard-navigation.year.ts","../../../projects/ngx-base/date/src/date/calendar-overlay/calendar-overlay.types.ts","../../../projects/ngx-base/date/src/date/calendar-overlay/calendar-overlay.component.ts","../../../projects/ngx-base/date/src/date/calendar-overlay/calendar-overlay.component.html","../../../projects/ngx-base/date/src/date-input/date-input.pipe.ts","../../../projects/ngx-base/date/src/date-input/date-input.directive.ts","../../../projects/ngx-base/date/src/time-input/time-input.pipe.ts","../../../projects/ngx-base/date/src/time-input/time-input.directive.ts","../../../projects/ngx-base/date/src/date/date.component.ts","../../../projects/ngx-base/date/src/date/date.component.html","../../../projects/ngx-base/date/src/date/date.types.ts","../../../projects/ngx-base/date/talenra-ngx-base-date.ts"],"sourcesContent":["import { DateFilterFn } from './date-filter.type';\n\n/**\n * Filter for days in the future (allowToday: true includes today)\n * Only allows to select dates in the future and greys out other options in the overlay\n *\n * ```typescript\n * // Component class\n * import { dateInTheFuture } from '@talenra/ngx-base/date';\n * ```\n *\n * ```html\n * \n * \n * ```\n */\nexport const dateInTheFutureFilter: (allowToday: boolean) => DateFilterFn = (allowToday?: boolean) => {\n const today = new Date();\n if (allowToday) {\n today.setHours(0, 0, 0, 0);\n } else {\n today.setHours(23, 59, 59, 59);\n }\n return (date: Date) => {\n return allowToday ? date >= today : date > today;\n };\n};\n","import { DateFilterFn } from './date-filter.type';\n\n/**\n * Filter for days in the past (allowToday: true includes today)\n * Only allows to select dates in the passt and greys out other options in the overlay\n *\n * ```typescript\n * // Component class\n * import { dateInThePastFilter } from '@talenra/ngx-base/date';\n * ```\n *\n * ```html\n * \n * \n * ```\n */\nexport const dateInThePastFilter: (allowToday: boolean) => DateFilterFn = (allowToday?: boolean) => {\n const today = new Date();\n if (allowToday) {\n today.setHours(23, 59, 59, 59);\n } else {\n today.setHours(0, 0, 0, 0);\n }\n return (date: Date) => {\n return allowToday ? date <= today : date < today;\n };\n};\n","import { DateFilterFn } from './date-filter.type';\n\n/**\n * Filter for first day of month.\n * Only allows to select the first day of each month and greys out other options in the overlay\n *\n * ```typescript\n * // Component class\n * import { firstDayOfMonthFilter } from '@talenra/ngx-base/date';\n * ```\n *\n * ```html\n * \n * \n * ```\n */\nexport const firstDayOfMonthFilter: DateFilterFn = function firstDayOfMonthFilter(date: Date): boolean {\n return date.getDate() === 1;\n};\n","import { DateFilterFn } from './date-filter.type';\n\n/**\n * Filter for weekdays (Monday - Friday)\n * Only allows to select weekdays and greys out other options in the overlay\n *\n * ```typescript\n * // Component class\n * import { weekdaysFilter } from '@talenra/ngx-base/date';\n * ```\n *\n * ```html\n * \n * \n * ```\n */\nexport const weekdaysFilter: DateFilterFn = function weekdaysFilter(date: Date): boolean {\n return !!(date && new Date(date).getDay() % 6);\n};\n","/**\n * Internal Date validator function shared by several validator functions that are exposed by the library\n *\n * @internal\n */\nexport function isValidDateFn(date: Date | undefined | string): boolean {\n if (!date || date === '') {\n return false;\n }\n\n if (!(date instanceof Date)) {\n return false;\n }\n\n if (isNaN(date.getTime())) {\n return false;\n }\n\n return true;\n}\n","import { AbstractControl, ValidatorFn } from '@angular/forms';\nimport { isValidDateFn } from './is-valid-date.function';\n\n/**\n * Checks whether the date is valid. Only basic validation.\n *\n * ```typescript\n * // Component class\n * import { validateDate } from '@talenra/ngx-base/date';\n *\n * const form = new FormGroup({\n * date: new FormControl('', validateDate())\n * });\n * ```\n *\n * ```html\n * \n * \n * \n * \n * \n * ```\n */\nexport function validateDate(): ValidatorFn {\n return (control: AbstractControl): { [key: string]: boolean } | null => {\n const date = new Date(control.value);\n\n if (!isValidDateFn(date)) {\n return { invalidDate: true };\n }\n\n return null;\n };\n}\n","import { AbstractControl, ValidatorFn } from '@angular/forms';\nimport { isValidDateFn } from './is-valid-date.function';\n\n/**\n * Checks whether the date is in the future. Often used in combination with `validateDate`.\n *\n * @param includesToday If true, the date is considered valid if it is today.\n * @param includeTime If true, the time is taken into account for the comparison.\n *\n * ```typescript\n * import { validateDate, validateDateIsInTheFuture } from '@talenra/ngx-base/date';\n *\n * const form = new FormGroup({\n * date: new FormControl('', [validateDate(), validateDateIsInTheFuture())\n * });\n * ```\n *\n * ```html\n * \n * \n * \n * The date must be in the future.\n * \n * \n * The date is invalid.\n * \n * \n * ```\n */\nexport function validateDateIsInTheFuture(includesToday = false, includeTime = false): ValidatorFn {\n return (control: AbstractControl): { [key: string]: boolean } | null => {\n if (control.value === null || control.value === undefined) return null;\n\n const date = new Date(control.value);\n\n if (!isValidDateFn(date)) {\n return { invalidDate: true };\n }\n\n const currentDate = new Date();\n if (!includeTime) {\n currentDate.setHours(0, 0, 0, 0);\n date.setHours(0, 0, 0, 0);\n }\n if (includesToday) {\n if (date < currentDate) {\n return { dateIsInThePast: true };\n }\n } else {\n if (date <= currentDate) {\n return { dateIsInThePast: true };\n }\n }\n\n return null;\n };\n}\n","import { AbstractControl, ValidatorFn } from '@angular/forms';\nimport { isValidDateFn } from './is-valid-date.function';\n\n/**\n * Checks whether the date is in the future.\n *\n * @param includesToday If true, the date is considered valid if it is today.\n * @param includeTime If true, the time is taken into account for the comparison.\n *\n * ```typescript\n * // Component class\n * import { validateDate, validateDateIsInThePast } from '@talenra/ngx-base/date';\n *\n * const form = new FormGroup({\n * date: new FormControl('', [validateDate(), validateDateIsInThePast())\n * });\n * ```\n *\n * ```html\n * \n * \n * \n * \n * The date must be in the past.\n * \n * \n * The date is invalid.\n * \n * \n * ```\n */\nexport function validateDateIsInThePast(includesToday = false, includeTime = false): ValidatorFn {\n return (control: AbstractControl): { [key: string]: boolean } | null => {\n if (control.value === null || control.value === undefined) return null;\n\n const date = new Date(control.value);\n\n if (!isValidDateFn(date)) {\n return { invalidDate: true };\n }\n\n const currentDate = new Date();\n if (!includeTime) {\n currentDate.setHours(0, 0, 0, 0);\n date.setHours(0, 0, 0, 0);\n }\n if (includesToday) {\n if (date > currentDate) {\n return { dateIsInTheFuture: true };\n }\n } else {\n if (date >= currentDate) {\n return { dateIsInTheFuture: true };\n }\n }\n\n return null;\n };\n}\n","/** @internal */\nexport function convertToUtcDate(date: string | Date): Date {\n const utcDate = new Date(date);\n utcDate.setMinutes(0);\n utcDate.setSeconds(0);\n utcDate.setMilliseconds(0);\n return utcDate;\n}\n","import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';\nimport { convertToUtcDate } from './utils/convert-to-utc-date';\n\n/**\n * Checks if the start date is before the end date.\n *\n * @param startDateId Name of the form-control\n * @param endDateId Name of the form-control\n * @param allowSameDay Allows the end date to be on the same day as the start date, default is 'false'\n *\n * @returns Returns a function which in case of an error it returns `{ invalidDateOrder: true }` apart from that `null`.\n */\nexport function validateStartDateIsBeforeEndDate(\n startDateId: string,\n endDateId: string,\n allowSameDay: boolean = false\n): ValidatorFn {\n return (control: AbstractControl): ValidationErrors | null => {\n const isErrorIf = allowSameDay\n ? convertToUtcDate(control.value[endDateId]).getTime() < convertToUtcDate(control.value[startDateId]).getTime()\n : convertToUtcDate(control.value[endDateId]).getTime() <= convertToUtcDate(control.value[startDateId]).getTime();\n if (control.value[startDateId] && control.value[endDateId] && isErrorIf) {\n control.get(startDateId)?.setErrors({ invalidDateOrder: true });\n control.get(endDateId)?.setErrors({ invalidDateOrder: true });\n return { invalidDateOrder: true };\n }\n control.get(startDateId)?.setErrors({ invalidDateOrder: null });\n control.get(endDateId)?.setErrors({ invalidDateOrder: null });\n control.get(startDateId)?.updateValueAndValidity({ onlySelf: true });\n control.get(endDateId)?.updateValueAndValidity({ onlySelf: true });\n return null;\n };\n}\n","import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';\nimport { convertToUtcDate } from './utils/convert-to-utc-date';\n\n/**\n * Checks if a date's year is greater than or equal the threshold's year.\n *\n * @param threshold The minimum year\n *\n * @returns Returns a function which in case of an error it returns `{ invalidPeriodStartYear: true }` apart from that `null`.\n */\nexport function validateYearIsEqualOrGreater(threshold: number): ValidatorFn {\n return (control: AbstractControl): ValidationErrors | null => {\n if (control.value) {\n const utcDate = convertToUtcDate(control.value);\n if (utcDate.getFullYear() < threshold) {\n return { invalidPeriodStartYear: true };\n }\n }\n return null;\n };\n}\n","/**\n * Utilities for the calendar overlay.\n *\n * @internal\n */\nexport class CalendarOverlayUtils {\n /** Returns last day of given month. */\n public static lastDayOfMonth(year: number, month: number): Date {\n return new Date(year, month + 1, 0);\n }\n\n /**\n * Add/substract month like in a physical calendar (flip page). Adding 1 month to a date like Jan 31 might\n * result in unexpected values like Mar 3. This method adjusts the date to the last day of the target month.\n */\n public static offsetMonthFenced(date: Date, months: number): Date {\n let newDate = new Date(date.getTime());\n newDate.setMonth(newDate.getMonth() + months);\n // Check if the month changed and if so, set date to last day of month\n // → `% 12` to compare month independent of year\n // → `+ 12` to prevent negative values\n if (newDate.getMonth() !== (((date.getMonth() + months) % 12) + 12) % 12) {\n newDate = CalendarOverlayUtils.lastDayOfMonth(newDate.getFullYear(), newDate.getMonth() - 1);\n }\n return newDate;\n }\n\n /** Returns the number of months between two given months/years. */\n public static monthDiff(from: { year: number; month: number }, to: { year: number; month: number }): number {\n return (to.year - from.year) * 12 + to.month - from.month;\n }\n}\n","import { CalendarOverlayComponent } from './calendar-overlay.component';\nimport { TCalendarControl } from './calendar-overlay.types';\nimport { CalendarOverlayUtils } from './calendar-overlay.utils';\n\n/**\n * Handles keyboard navigation for the CalendarOverlay component in day mode.\n *\n * @internal\n */\nexport class CalendarOverlayKeyboardNavigation {\n /** Reference to the associated CalendarOverlay component */\n protected calendar: CalendarOverlayComponent;\n\n /**\n * Tab sequence of controls in calendar head.\n */\n protected controlsSequence: TCalendarControl[] = ['prev', 'month', 'year', 'next'];\n\n /** @internal */\n constructor(calendar: CalendarOverlayComponent) {\n this.calendar = calendar;\n }\n\n /** Handle keyboard events */\n public handleKeypress(event: KeyboardEvent): void {\n // Separate handler methods if focus is on calendar's head or body → improves code structure\n if (this.calendar.focussedControl) {\n this.navigateCalendarHead(event);\n } else {\n this.navigateCalendarBody(event);\n }\n }\n\n /** Handle keyboard events if focus is in calendar head (where controls like \"prev/next month\" are). */\n protected navigateCalendarHead(event: KeyboardEvent): void {\n switch (event.key) {\n case 'Tab':\n // Tab through controls in calendar head\n const tabDirection = event.shiftKey ? -1 : 1;\n // Get the index of the next item in sequence\n const nextIndex = this.calendar.focussedControl\n ? this.controlsSequence.indexOf(this.calendar.focussedControl) + tabDirection\n : 0;\n // Update the focussed control or unset it if index is off-sequence\n this.calendar.focussedControl = !this.controlsSequence[nextIndex] ? null : this.controlsSequence[nextIndex];\n break;\n case 'Enter':\n case ' ':\n // Invoke the focussed control\n this.calendar.focussedControl === 'prev' && this.calendar.prevMonth();\n this.calendar.focussedControl === 'next' && this.calendar.nextMonth();\n this.calendar.focussedControl === 'month' && this.calendar.onMonthMode();\n this.calendar.focussedControl === 'year' && this.calendar.onYearMode();\n this.calendar.focussedControl === 'prevYears' && this.offsetYearBy(this.calendar.numberOfYearsInSelection * -1);\n this.calendar.focussedControl === 'nextYears' && this.offsetYearBy(this.calendar.numberOfYearsInSelection);\n break;\n }\n }\n\n /** Handle keyboard events if focus is in calendar body (where dates are selected). */\n protected navigateCalendarBody(event: KeyboardEvent): void {\n if (event.key === 'Tab') {\n // Focus the first control in calendar's head\n this.calendar.focussedControl = event.shiftKey\n ? this.controlsSequence[this.controlsSequence.length - 1]\n : this.controlsSequence[0];\n }\n }\n\n // -- Day manipulations --\n\n /** Moves focussed day by given number of days. */\n protected offsetDateBy(days: number): void {\n if (!this.calendar.focussedDate) return;\n // Update the focussed date\n this.calendar.focussedDate.setDate(this.calendar.focussedDate.getDate() + days);\n // Switch month as required\n this.calendar.setCalendarDate(this.calendar.focussedDate);\n }\n\n /** Moves focussed day by given number of months. */\n protected offsetMonthBy(months: number): void {\n if (!this.calendar.focussedDate) return;\n this.calendar.focussedDate = CalendarOverlayUtils.offsetMonthFenced(this.calendar.focussedDate, months);\n // Switch month as required\n this.calendar.setCalendarDate(this.calendar.focussedDate);\n }\n\n /** Set focussed day to given day. */\n protected setDateTo(day: number | 'last'): void {\n if (!this.calendar.focussedDate) return;\n if (day === 'last') {\n // Get last day of month\n day = CalendarOverlayUtils.lastDayOfMonth(\n this.calendar.focussedDate.getFullYear(),\n this.calendar.focussedDate.getMonth()\n ).getDate();\n }\n // Update the focussed date\n this.calendar.focussedDate.setDate(day);\n // Switch month as required\n this.calendar.setCalendarDate(this.calendar.focussedDate);\n }\n\n // -- Month manipulations --\n\n /** Moves focussed month by given number of months. */\n protected offsetMonthInSameYearBy(months: number): void {\n if (!this.calendar.focussedDate) return;\n const currentMonth = this.calendar.focussedDate.getMonth();\n const targetMonth = (((currentMonth + months) % 12) + 12) % 12; // ensure positive number\n // Update the focussed date\n this.calendar.focussedDate = CalendarOverlayUtils.offsetMonthFenced(\n this.calendar.focussedDate,\n targetMonth - currentMonth\n );\n }\n\n /** Moves focussed month to a given index. */\n protected setMonthTo(month: number): void {\n if (!this.calendar.focussedDate) return;\n // Update the focussed date\n this.calendar.focussedDate.setMonth(month % 12);\n }\n\n // -- Year manipulations --\n\n /** Moves focussed year by given number of years. */\n protected offsetYearBy(years: number): void {\n if (!this.calendar.focussedDate) return;\n const yearToSet = this.calendar.focussedDate.getFullYear() + years;\n // Update the focussed date\n this.calendar.focussedDate.setFullYear(yearToSet);\n // Update year view\n this.updateYearSelection(yearToSet);\n }\n\n /** Set focussed year to given year. */\n protected setYearTo(year: 'first' | 'last'): void {\n if (!this.calendar.focussedDate) return;\n const yearToSet =\n year === 'first'\n ? this.calendar.yearSelection[0]\n : this.calendar.yearSelection[this.calendar.yearSelection.length - 1];\n // Update the focussed date\n this.calendar.focussedDate.setFullYear(yearToSet);\n }\n\n /** Helper: Updates the years selection if focussed year is outside current range. */\n protected updateYearSelection(year: number): void {\n const firstYear: number = this.calendar.yearSelection[0];\n const lastYear: number = this.calendar.yearSelection[this.calendar.yearSelection.length - 1];\n // No update required if focussed year is within current range\n if (year >= firstYear && year <= lastYear) return;\n // One page down/up\n const offset: number = this.calendar.numberOfYearsInSelection * (year < firstYear ? -1 : 1);\n this.calendar.calculateYearSelection(firstYear + offset);\n }\n}\n","import { CalendarOverlayComponent } from './calendar-overlay.component';\nimport { CalendarOverlayKeyboardNavigation } from './calendar-overlay.keyboard-navigation';\n\n/**\n * Handles keyboard navigation for the CalendarOverlay component in day mode.\n *\n * @internal\n */\nexport class CalendarOverlayKeyboardNavigationDay extends CalendarOverlayKeyboardNavigation {\n /** @internal */\n constructor(calendar: CalendarOverlayComponent) {\n super(calendar);\n }\n\n /** Handle keyboard events if focus is in calendar body (where dates are selected). */\n protected navigateCalendarBody(event: KeyboardEvent): void {\n switch (event.key) {\n case 'Tab':\n // Focus the first control in calendar's head (handled in parent class)\n super.navigateCalendarBody(event);\n break;\n case 'ArrowUp':\n // One week back\n this.offsetDateBy(-7);\n break;\n case 'ArrowRight':\n // One day forward\n this.offsetDateBy(1);\n break;\n case 'ArrowDown':\n // One week forward\n this.offsetDateBy(7);\n break;\n case 'ArrowLeft':\n // One day back\n this.offsetDateBy(-1);\n break;\n case 'Home':\n // First day of month\n this.setDateTo(1);\n break;\n case 'End':\n // Last day of month\n this.setDateTo('last');\n break;\n case 'PageUp':\n // One month back\n this.offsetMonthBy(-1);\n break;\n case 'PageDown':\n // One month forward\n this.offsetMonthBy(1);\n break;\n case 'Enter':\n case ' ':\n // Select focussed date\n this.calendar.focussedDate && this.calendar.onSelectDay(this.calendar.focussedDate);\n break;\n }\n }\n}\n","import { CalendarOverlayComponent } from './calendar-overlay.component';\nimport { CalendarOverlayKeyboardNavigation } from './calendar-overlay.keyboard-navigation';\n\n/**\n * Handles keyboard navigation for the CalendarOverlay component in month mode.\n *\n * @internal\n */\nexport class CalendarOverlayKeyboardNavigationMonth extends CalendarOverlayKeyboardNavigation {\n /** @internal */\n constructor(calendar: CalendarOverlayComponent) {\n super(calendar);\n }\n\n /** Handle keyboard events if focus is in calendar body (where dates are selected). */\n protected navigateCalendarBody(event: KeyboardEvent): void {\n switch (event.key) {\n case 'Tab':\n // Focus the first control in calendar's head (handled in parent class)\n super.navigateCalendarBody(event);\n break;\n case 'ArrowUp':\n // One row up\n this.offsetMonthInSameYearBy(-3);\n break;\n case 'ArrowRight':\n // Next month\n this.offsetMonthInSameYearBy(1);\n break;\n case 'ArrowDown':\n // One row down\n this.offsetMonthInSameYearBy(3);\n break;\n case 'ArrowLeft':\n // Previous month\n this.offsetMonthInSameYearBy(-1);\n break;\n case 'Home':\n // First month (January)\n this.setMonthTo(0);\n break;\n case 'End':\n // Last month (December)\n this.setMonthTo(11);\n break;\n case 'Enter':\n case ' ':\n // Select focussed date\n this.calendar.focussedDate && this.calendar.onSelectMonth(this.calendar.focussedDate.getMonth());\n break;\n }\n }\n}\n","import { CalendarOverlayComponent } from './calendar-overlay.component';\nimport { CalendarOverlayKeyboardNavigation } from './calendar-overlay.keyboard-navigation';\n\n/**\n * Handles keyboard navigation for the CalendarOverlay component in year mode.\n *\n * @internal\n */\nexport class CalendarOverlayKeyboardNavigationYear extends CalendarOverlayKeyboardNavigation {\n /** @internal */\n constructor(calendar: CalendarOverlayComponent) {\n super(calendar);\n this.controlsSequence = ['prev', 'month', 'year', 'next', 'prevYears', 'nextYears'];\n }\n\n /** Handle keyboard events if focus is in calendar body (where dates are selected). */\n protected navigateCalendarBody(event: KeyboardEvent): void {\n switch (event.key) {\n case 'Tab':\n // Focus the first control in calendar's head (handled in parent class)\n super.navigateCalendarBody(event);\n break;\n case 'ArrowUp':\n // One row up\n this.offsetYearBy(CalendarOverlayComponent.YEAR_SELECTION_COLS * -1);\n break;\n case 'ArrowRight':\n // Next year\n this.offsetYearBy(1);\n break;\n case 'ArrowDown':\n // One row down\n this.offsetYearBy(CalendarOverlayComponent.YEAR_SELECTION_COLS);\n break;\n case 'ArrowLeft':\n // Previous year\n this.offsetYearBy(-1);\n break;\n case 'Home':\n // First year in table\n this.setYearTo('first');\n break;\n case 'End':\n // Last year in table\n this.setYearTo('last');\n break;\n case 'PageUp':\n // One page up\n this.offsetYearBy(this.calendar.numberOfYearsInSelection * -1);\n break;\n case 'PageDown':\n // One page down\n this.offsetYearBy(this.calendar.numberOfYearsInSelection);\n break;\n case 'Enter':\n case ' ':\n // Select focussed date\n this.calendar.focussedDate && this.calendar.onSelectYear(this.calendar.focussedDate.getFullYear());\n break;\n }\n }\n}\n","/**\n * Values accepted by `CalendarOverlay`'s `overlayMode` property.\n *\n * @internal\n */\nexport const OverlayMode = { Day: 'day', Month: 'month', Year: 'year' } as const;\n\n/**\n * Type of values accepted by `CalendarOverlay`'s `overlayMode` property.\n *\n * @internal\n */\nexport type TOverlayMode = (typeof OverlayMode)[keyof typeof OverlayMode];\n\n/**\n * Controls used in calendar's head.\n *\n * @internal\n */\nexport const CalendarControl = {\n Prev: 'prev',\n Next: 'next',\n Month: 'month',\n Year: 'year',\n PrevYears: 'prevYears',\n NextYears: 'nextYears',\n} as const;\n\n/**\n * Type of controls used in calendar's head.\n *\n * @internal\n */\nexport type TCalendarControl = (typeof CalendarControl)[keyof typeof CalendarControl];\n\n/** @internal */\nexport interface MonthSelection {\n name: string;\n index: number;\n}\n","import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output } from '@angular/core';\nimport { IconComponent } from '@talenra/ngx-base/icons';\nimport { ButtonComponent } from '@talenra/ngx-base/button';\nimport { CalendarOverlayKeyboardNavigationDay } from './calendar-overlay.keyboard-navigation.day';\nimport { CalendarOverlayKeyboardNavigationMonth } from './calendar-overlay.keyboard-navigation.month';\nimport { CalendarOverlayKeyboardNavigationYear } from './calendar-overlay.keyboard-navigation.year';\nimport { MonthSelection, OverlayMode, TCalendarControl, TOverlayMode } from './calendar-overlay.types';\nimport { CalendarOverlayUtils } from './calendar-overlay.utils';\nimport { DateFilterFn } from '../../date-filters/date-filter.type';\n\n/** @internal */\ntype SupportedLocale = 'de' | 'it' | 'fr' | 'en';\n\n/**\n * Overlay calendar allows picking dates using mouse/touch or keyboard. It provides an alternative to typing in a date.\n *\n * A note about naming things:\n * - \"selected\" is used for the value of the date component (e.g \"selected month\" represents the month of the date component's value.)\n * - \"focussed\" is used for the date that is currently focussed/hovered by the user (e.g. \"focussed month\" represents the month of the date that is currently focussed.). This is used for keyboard navigation.\n * - \"current\" is used for the current date (e.g. \"current month\" represents the current month in real world time.)\n * - \"calendar\" is used for the month and year displayed in this calendar (e.g. \"calendar month\" represents the month displayed in the calendar – given the calendar is not in year mode of course.)\n *\n * @internal\n */\n@Component({\n selector: 'talenra-calendar-overlay',\n templateUrl: './calendar-overlay.component.html',\n styleUrls: ['./calendar-overlay.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '(window:keyup)': 'handleKeyup($event)',\n },\n imports: [IconComponent, ButtonComponent],\n})\nexport class CalendarOverlayComponent implements OnInit {\n /** Numbers of rows displayed in the year chooser. */\n static YEAR_SELECTION_ROWS = 4;\n\n /** Numbers of columns displayed in the year chooser. */\n static YEAR_SELECTION_COLS = 5;\n\n /** Localized strings for today */\n private localeLookup: Record = {\n de: 'Heute',\n it: 'Oggi',\n fr: \"Aujourd'hui\",\n en: 'Today',\n };\n\n /** Number of years displayed in the year-chooser. */\n numberOfYearsInSelection =\n CalendarOverlayComponent.YEAR_SELECTION_COLS * CalendarOverlayComponent.YEAR_SELECTION_ROWS;\n\n /** Emits the new date when selected. */\n @Output() dateSelected = new EventEmitter();\n\n /** Function that determines whether a date is selectable. */\n dateFilterFn?: DateFilterFn;\n\n locale: string = 'de-CH';\n\n /** Month displayed in the calendar. */\n private calendarMonth: number;\n\n /** Year displayed in the calendar. */\n calendarYear: number;\n\n /** List of days of the month displayed. */\n daysInMonth: Date[][] = [];\n\n /** Currently selected date (the date component's value). */\n private selectedDate: Date | null = null;\n\n /** Currently focussed date (the date which would be selected, if the user clicks or presses space/enter) */\n focussedDate: Date | null = null;\n\n /** Currently focussed control (the navigation elements in the calendar header, e.g. arrow-left). */\n focussedControl: TCalendarControl | null = null;\n\n /** Current display mode (year, month, day). */\n overlayMode: TOverlayMode = OverlayMode.Day;\n\n /** List of years displayed in the year-chooser. */\n yearSelection: number[] = [];\n\n /** Helper to handle keyboard navigation */\n private keyNav: {\n day: CalendarOverlayKeyboardNavigationDay;\n month: CalendarOverlayKeyboardNavigationMonth;\n year: CalendarOverlayKeyboardNavigationYear;\n };\n\n /** Determines whether keyboard navigation is active. Used to prevent interferences in keyboard handling. */\n private allowKeyboardNavigation = false;\n\n /** @internal */\n constructor() {\n this.keyNav = {\n day: new CalendarOverlayKeyboardNavigationDay(this),\n month: new CalendarOverlayKeyboardNavigationMonth(this),\n year: new CalendarOverlayKeyboardNavigationYear(this),\n };\n this.focussedDate = new Date();\n const today = new Date();\n this.calendarMonth = today.getMonth();\n this.calendarYear = today.getFullYear();\n this.generateCalendar();\n }\n\n /** @internal */\n ngOnInit(): void {\n // Initialize year mode if requested\n if (this.overlayMode === OverlayMode.Year) this.onYearMode();\n // Allow keyboard navigation after the first change detection cycle.\n // Prevents interferences with parent's key handlers.\n setTimeout(() => {\n this.allowKeyboardNavigation = true;\n });\n }\n\n /** Generates the calendar data required for display. */\n private generateCalendar(): void {\n this.daysInMonth = [];\n // First day of the month\n const firstDay = new Date(this.calendarYear, this.calendarMonth, 1);\n // Last day of the month\n const lastDay = new Date(this.calendarYear, this.calendarMonth + 1, 0);\n\n const date = new Date(firstDay);\n while (date.getDay() !== 1) {\n date.setDate(date.getDate() - 1);\n }\n\n while (date <= lastDay || date.getDay() !== 1) {\n const week = [];\n for (let i = 0; i < 7; i++) {\n week.push(new Date(date));\n date.setDate(date.getDate() + 1);\n }\n this.daysInMonth.push(week);\n }\n // Make sure focussed date is within the displayed month\n if (this.focussedDate) {\n const monthDiff = CalendarOverlayUtils.monthDiff(\n { year: this.focussedDate?.getFullYear(), month: this.focussedDate?.getMonth() },\n { year: this.calendarYear, month: this.calendarMonth }\n );\n this.focussedDate = CalendarOverlayUtils.offsetMonthFenced(this.focussedDate, monthDiff);\n }\n }\n\n /** Go one month back into past. */\n prevMonth(): void {\n this.calendarMonth = (this.calendarMonth + 11) % 12;\n this.calendarMonth === 11 && this.calendarYear--;\n this.generateCalendar();\n }\n\n /** Go one month further into future. */\n nextMonth(): void {\n this.calendarMonth = (this.calendarMonth + 1) % 12;\n this.calendarMonth === 0 && this.calendarYear++;\n this.generateCalendar();\n }\n\n /** Update the month displayed. */\n setCalendarDate(date: Date): void {\n // No update if the date is in the same month\n if (this.calendarMonth === date.getMonth() && this.calendarYear === date.getFullYear()) return;\n this.calendarMonth = date.getMonth();\n this.calendarYear = date.getFullYear();\n this.generateCalendar();\n }\n\n /** Updates the selected date and updates the calendar's month and year. */\n setInitialDate(date: Date): void {\n this.selectedDate = date;\n this.focussedDate = new Date(date.getTime()); // cloned, not referenced\n this.setCalendarDate(date);\n }\n\n /** Returns whether a given control has focus. Used for keyboard navigation. */\n isFocussedControl(control: TCalendarControl): boolean {\n return this.focussedControl === control;\n }\n\n /** Returns whether a given date matches the current day. */\n isCurrentDay(date: Date): boolean {\n const today = new Date();\n return (\n date.getDate() === today.getDate() &&\n date.getMonth() === today.getMonth() &&\n date.getFullYear() === today.getFullYear()\n );\n }\n\n /** Returns whether today's date is focussed */\n protected isTodayFocussed(): boolean {\n return !!(this.focussedDate && this.isCurrentDay(this.focussedDate));\n }\n\n /** Returns whether a given date matches the selected day. */\n isSelectedDate(date: Date): boolean {\n if (!this.selectedDate) return false;\n return (\n date.getDate() === this.selectedDate.getDate() &&\n date.getMonth() === this.selectedDate.getMonth() &&\n date.getFullYear() === this.selectedDate.getFullYear()\n );\n }\n\n /** Returns whether a given date matches the focussed day. */\n isFocussedDate(date: Date): boolean {\n if (!this.focussedDate) return false;\n return (\n date.getDate() === this.focussedDate.getDate() &&\n date.getMonth() === this.focussedDate.getMonth() &&\n date.getFullYear() === this.focussedDate.getFullYear()\n );\n }\n\n /** Returns whether a given month matches the selected month. */\n isSelectedMonth(month: MonthSelection): boolean {\n return month.index === this.selectedDate?.getMonth();\n }\n\n /** Returns whether a given month matches the focussed month. */\n isFocussedMonth(month: MonthSelection): boolean {\n return month.index === this.focussedDate?.getMonth();\n }\n\n /** Returns whether a given month matches the current month (real world time). */\n isCurrentMonth(month: MonthSelection): boolean {\n return month.index === new Date().getMonth();\n }\n\n /** Returns whether a given year matches the selected year. */\n isSelectedYear(year: number): boolean {\n return year === this.selectedDate?.getFullYear();\n }\n\n /** Returns whether a given year matches the focussed year. */\n isFocussedYear(year: number): boolean {\n return year === this.focussedDate?.getFullYear();\n }\n\n /** Returns whether a given year matches the current year (real world time). */\n isCurrentYear(year: number): boolean {\n return year === new Date().getFullYear();\n }\n\n /**\n * Returns whether a date belongs to the displayed month.\n *\n * @internal\n */\n belongsToCalendarMonth(date: Date): boolean {\n return date.getMonth() === this.calendarMonth && date.getFullYear() === this.calendarYear;\n }\n\n /**\n * Localized name of the displayed month.\n *\n * @internal\n */\n get calendarMonthName(): string {\n return new Date(`${this.calendarYear}-${(this.calendarMonth + 1).toString().padStart(2, '0')}`).toLocaleString(\n this.locale,\n { month: 'long' }\n );\n }\n\n /** returns the localized name of 'today'. */\n get localizedToday(): string {\n const lookupLocale = this.locale.split('-')[0] as SupportedLocale;\n return this.localeLookup[lookupLocale] || 'Today';\n }\n\n /** Returns the selected month. */\n get monthSelection(): MonthSelection[] {\n const monthSelection = [];\n for (let month = 0; month < 12; month++) {\n const date = new Date(2022, month, 1);\n monthSelection.push({ index: month, name: date.toLocaleString(this.locale, { month: 'long' }) });\n }\n return monthSelection;\n }\n\n /** Generates the list of years available to choose from in year-chooser mode. */\n calculateYearSelection(baseYear: number) {\n this.yearSelection = [];\n for (let year = baseYear; year < baseYear + this.numberOfYearsInSelection; year++) {\n this.yearSelection.push(year);\n }\n }\n\n /** Returns the list of weekdays. */\n get weekdayNames(): string[] {\n const baseDate = new Date(2022, 0, 3); // Just a Monday\n const weekdays = [];\n for (let i = 0; i < 7; i++) {\n const day = new Date(baseDate.getTime() + i * 24 * 60 * 60 * 1000);\n weekdays.push(day.toLocaleDateString(this.locale, { weekday: 'short' }));\n }\n return weekdays;\n }\n\n /** Switch to month-chooser mode. */\n onMonthMode() {\n this.focussedControl = null;\n this.overlayMode = OverlayMode.Month;\n }\n\n /** Switch to year-chooser mode. */\n onYearMode() {\n // First year in calendarYear's decade\n const baseYear: number = Math.floor(this.calendarYear / 10) * 10 + 1;\n this.calculateYearSelection(baseYear);\n this.focussedControl = null;\n this.overlayMode = OverlayMode.Year;\n }\n\n /** Handles user picking a day. Date is validated against the date filter. Invalid dates cannot be selected. */\n onSelectDay(date: Date): void {\n if (this.dateFilterFn && !this.dateFilterFn(date)) return;\n this.selectedDate = date;\n this.dateSelected.emit(date);\n }\n\n /** User picked a month. */\n onSelectMonth(index: number) {\n this.overlayMode = OverlayMode.Day;\n this.calendarMonth = index;\n this.generateCalendar();\n }\n\n /** User picked a year. */\n onSelectYear(year: number) {\n this.overlayMode = OverlayMode.Day;\n this.calendarYear = year;\n this.generateCalendar();\n }\n\n /** Handle/delegate keyboard navigation */\n private handleKeyup(event: KeyboardEvent): void {\n if (!this.allowKeyboardNavigation) return;\n this.keyNav[this.overlayMode].handleKeypress(event);\n }\n\n /** Go to today's date. */\n protected goToToday() {\n const today = new Date();\n this.focussedDate = today;\n this.overlayMode = OverlayMode.Day;\n this.calendarMonth = today.getMonth();\n this.calendarYear = today.getFullYear();\n this.generateCalendar();\n }\n}\n","\n