{"version":3,"file":"usitsdasdesign-dds-ng-datepicker.mjs","sources":["../../src/app/dds/datepicker/typings.ts","../../src/app/dds/datepicker/constants.ts","../../src/app/dds/datepicker/date.utils.ts","../../src/app/dds/datepicker/datepicker.token.ts","../../src/app/dds/datepicker/daypicker/daypicker.component.ts","../../src/app/dds/datepicker/daypicker/daypicker.component.html","../../src/app/dds/datepicker/monthpicker/monthpicker.component.ts","../../src/app/dds/datepicker/monthpicker/monthpicker.component.html","../../src/app/dds/datepicker/yearpicker/yearpicker.component.ts","../../src/app/dds/datepicker/yearpicker/yearpicker.component.html","../../src/app/dds/datepicker/datepicker-inner/datepicker-inner.component.ts","../../src/app/dds/datepicker/datepicker-inner/datepicker-inner.component.html","../../src/app/dds/datepicker/datepicker/datepicker.component.ts","../../src/app/dds/datepicker/datepicker/datepicker.component.html","../../src/app/dds/datepicker/daterangepicker/daterangepicker.component.ts","../../src/app/dds/datepicker/daterangepicker/daterangepicker.component.html","../../src/app/dds/datepicker/datepicker.module.ts","../../src/app/dds/datepicker/usitsdasdesign-dds-ng-datepicker.ts"],"sourcesContent":["import { ErrorState, KeyCodes, LabelPosition, PositionState, Size } from '@usitsdasdesign/dds-ng/shared';\n\nexport interface DatepickerOptions {\n value?: Date;\n label?: string;\n labelPosition?: LabelPosition | string;\n description?: string;\n errorMessage?: string;\n errorState?: string | ErrorState;\n size?: Size | string;\n placeholder?: string;\n format?: string;\n icon?: string;\n customClass?: string;\n openedDate?: Date;\n disabled?: boolean;\n isResponsive?: boolean;\n isInverse?: boolean;\n isRequired?: boolean;\n readonly?: boolean;\n minMode?: DatepickerStates | string;\n startState?: DatepickerStates | string;\n minDate?: Date;\n maxDate?: Date;\n isUTCFormat?: boolean;\n isError?: boolean;\n isManualInput?: boolean;\n inputByFormatMask?: boolean;\n disabledDates?: DisabledDates;\n isClearBtnEnabled?: boolean;\n\n stickerPosition?: PositionState | string;\n stickerIndent?: number;\n stickerShift?: number;\n stickerMaxHeight?: number | string;\n stickerCustomClass?: string;\n stickerIsDisabled?: boolean;\n stickerIsDynamic?: boolean;\n}\n\nexport interface DaterangepickerOptions {\n value?: Date[];\n label?: string;\n openedDate?: Date;\n labelPosition?: LabelPosition | string;\n description?: string;\n errorMessage?: string;\n errorState?: string | ErrorState;\n size?: Size | string;\n placeholder?: string[];\n format?: string;\n icon?: string;\n customClass?: string;\n minDate?: Date;\n maxDate?: Date;\n isUTCFormat?: boolean;\n disabled?: boolean;\n isInverse?: boolean;\n isResponsive?: boolean;\n readonly?: boolean;\n isError?: boolean;\n isRequired?: boolean;\n isManualInput?: boolean;\n inputByFormatMask?: boolean;\n isStartDateEmitted?: boolean;\n disabledDates?: DisabledDates;\n isClearBtnEnabled?: boolean;\n\n stickerPosition?: PositionState | string;\n stickerIndent?: number;\n stickerShift?: number;\n stickerMaxHeight?: number | string;\n stickerCustomClass?: string;\n stickerIsDisabled?: boolean;\n stickerIsDynamic?: boolean;\n}\n\nexport interface DatepickerItem {\n value: number;\n date: Date;\n isActive?: boolean;\n isCurrent?: boolean;\n disabled?: boolean;\n inRange?: boolean;\n isOtherMonth?: boolean;\n}\n\nexport interface DisabledDates {\n before?: Date;\n after?: Date;\n days?: number[];\n daysOfMonth?: number[];\n dates?: Date[];\n ranges?: DisabledRanges[];\n}\n\nexport interface DisabledRanges {\n from: Date;\n to: Date;\n}\n\nexport interface SelectedDate {\n year?: number;\n month?: number;\n day?: number;\n}\n\nexport interface DaterangepickerInfo {\n start?: Date;\n end?: Date;\n}\n\nexport interface DaterangepickerPlaceholder {\n start?: string;\n end?: string;\n}\n\nexport interface DaterangepickerHeaderOption {\n isEndPicker?: boolean;\n isHeaderBtns?: boolean;\n directionKeycode?: KeyCodes.ARROW_LEFT | KeyCodes.ARROW_RIGHT;\n}\n\nexport enum DaterangepickerItems {\n end = 'end',\n start = 'start',\n}\n\nexport enum DatepickerYearsActions {\n prev = 'prev',\n next = 'next',\n}\n\nexport enum DatepickerStates {\n year = 'year',\n month = 'month',\n day = 'day',\n}\n","import { DatepickerStates } from './typings';\n\n// Datepicker\nexport const LOCALE = 'en-US';\nexport const DEFAULT_PLACEHOLDER = 'Choose Date';\nexport const DEFAULT_DATEPICKER_MODE = DatepickerStates.day;\nexport const SHIFT = 0;\nexport const DATEPICKER_WIDTH = 280;\nexport const DATEPICKER_WIDTH_TABLET = 320;\nexport const DATERANGEPICKER_WIDTH = 586;\nexport const DATERANGEPICKER_WIDTH_TABLET = 654;\nexport const HEADER_MONTH_FORMAT = 'MMMM';\nexport const HEADER_YEAR_FORMAT = 'yyyy';\nexport const DATEPICKER_BTN = '.dds-btn';\nexport const BTN_ACTIVE_DATE = '.dds-datepicker__item_active';\nexport const BTN_CURRENT_DATE = '.dds-datepicker__item_current';\nexport const DATERANGEPICKER_POPUP = 'dds-daterangepicker-popup';\nexport const DEFAULT_ICON = 'dds-icon_calendar';\n// Day\nexport const DAYS_COUNT = 42;\nexport const STARTING_DAY = 0;\nexport const DAYS_PER_WEEKS = 7;\nexport const MONTHS_PER_ROW = 4;\nexport const YEARS_PER_ROW = 4;\n// Month\nexport const MONTH_PICKER_FORMAT = 'MMM';\n// Year\nexport const NUMBER_YEARS_OF_CALENDAR = 12;\nexport const YEAR_PICKER_FORMAT = 'yyyy';\n// Rangepicker\nexport const RANGE_MAX_LENGTH = 2;\nexport const RANGE_INDEX = {\n start: 0,\n end: 1,\n};\n","import { DatepickerStates, DisabledRanges } from './typings';\n\nexport function parseDateByFormat(value: string, format: string): Date {\n const separator = new RegExp(/[\\s,.\\/-]+/);\n const isDay = new RegExp(/d/);\n const isMonth = new RegExp(/M/);\n const isYear = new RegExp(/y/);\n\n const valueArray = value.split(separator);\n const formatArray = format.split(separator);\n\n let day, month, year;\n\n formatArray.forEach((formatItem, index) => {\n if (isDay.test(formatItem)) day = valueArray[index];\n\n if (isMonth.test(formatItem)) month = valueArray[index];\n\n if (isYear.test(formatItem)) year = valueArray[index];\n });\n\n const separatorForCreateDate = isNaN(month) ? ' ' : '/';\n\n return new Date(`${month + separatorForCreateDate + day + separatorForCreateDate + year}`);\n}\n\nexport function getMaskByFormat(format: string): string {\n const replaceDay = format.replace(/d/g, '0'); // only number\n const replaceYear = replaceDay.replace(/y/g, '0'); // only number\n const replaceMonth = replaceYear\n .replace(/M{5}/, 'S') // S\n .replace(/M{4}/, 'S*') // September\n .replace(/M{3}/, 'SSS') // Sep\n .replace(/M/g, '0'); // 09\n\n return replaceMonth;\n}\n\nexport function isValidDate(date: Date): boolean {\n return date instanceof Date && !isNaN(date.getTime());\n}\n\nexport function getPrevDay(date: Date): Date {\n return new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1);\n}\n\nexport function getNextDay(date: Date): Date {\n return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);\n}\n\nexport function includeDisabledDays(disabledDays: number[], date: Date): boolean {\n return disabledDays?.includes(date.getDay());\n}\n\nexport function includeDisabledDaysOfMonth(disabledDaysOfMonth: number[], date: Date): boolean {\n return disabledDaysOfMonth?.includes(date.getDate());\n}\n\nexport function includeDisabledDates(disabledDates: Date[], date: Date): boolean {\n return disabledDates?.some((disabledDate) => {\n const disabledDateZeroTime = disabledDate.setHours(0, 0, 0, 0);\n const dateZeroTime = date?.setHours(0, 0, 0, 0);\n\n return disabledDateZeroTime === dateZeroTime;\n });\n}\n\nexport function includeDisabledRanges(disabledRanges: DisabledRanges[], date: Date): boolean {\n return disabledRanges?.some((disabledRange) => {\n const dateFrom = disabledRange.from.setHours(0, 0, 0, 0);\n const dateTo = disabledRange.to.setHours(0, 0, 0, 0);\n const dateZeroTime = date?.setHours(0, 0, 0, 0);\n\n return dateZeroTime >= dateFrom && dateZeroTime <= dateTo;\n });\n}\n\n// Method to get date with zero time\nexport function getDateWithZeroTime(date: Date): Date {\n return date ? new Date(date.setHours(0, 0, 0, 0)) : date;\n}\n\n// Method to get date with minimum mode\nexport function getDateWithMinMode(date: Date, minMode: string): Date {\n if (!date || !minMode) return date;\n\n switch (minMode) {\n case DatepickerStates.month:\n return new Date(date.getFullYear(), date.getMonth(), 1);\n case DatepickerStates.year:\n return new Date(date.getFullYear(), 0, 1);\n default:\n return date;\n }\n}\n\n// Method to set the time to a date\nexport function setTimeToDate(date: Date): Date {\n date.setHours(new Date().getHours());\n date.setMinutes(new Date().getMinutes());\n date.setSeconds(new Date().getSeconds());\n\n return date;\n}\n\n// Method to get the index of the focused item\nexport function getIndexFocusedItem(items: HTMLButtonElement[]): number {\n let indexFocusedItem = 0;\n\n items.forEach((item, index) => {\n if (item === document.activeElement) {\n indexFocusedItem = index;\n }\n });\n\n return indexFocusedItem;\n}\n\n// Method to compare two dates\nexport function compareDate(date1: Date, date2: Date): number {\n const compareDate1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());\n const compareDate2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());\n\n return compareDate1.getTime() - compareDate2.getTime();\n}\n\n/**\n * Compares two dates by year.\n */\nexport function compareYears(date1: Date, date2: Date): number {\n const compareDate1 = date1.getFullYear();\n const compareDate2 = date2.getFullYear();\n\n return compareDate1 - compareDate2;\n}\n\nexport function getNextMonth(date: Date): number {\n return date.getMonth() + 1;\n}\n\n// Gets the last day and month of the given date.\nexport function getLastDayAndMonthOfDate(date: Date): Date {\n const lastMonth = 11;\n const year = date.getFullYear();\n\n return new Date(year, lastMonth + 1, 0);\n}\n\n// Gets the first day and month of the given date.\nexport function getFirstDayAndMonthOfDate(date: Date): Date {\n const firstDay = 1;\n const firstMonth = 0;\n const year = date.getFullYear();\n\n return new Date(year, firstMonth, firstDay);\n}\n\n// Checks if the given date is the current date.\nexport function isCurrentDate(date: Date): boolean {\n return compareYears(date, new Date()) === 0;\n}\n","import { InjectionToken } from '@angular/core';\n\nexport const DATEPICKER = new InjectionToken('Datepicker Component');\nexport const DATERANGEPICKER = new InjectionToken('DateRangepicker Component');\nexport const DATEPICKER_INNER = new InjectionToken('DatepickerInner Component');\n","import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n Inject,\n Input,\n OnChanges,\n OnInit,\n SimpleChanges,\n ViewChild,\n} from '@angular/core';\nimport { ButtonModule, ButtonOptions } from '@usitsdasdesign/dds-ng/button';\nimport { DestroyCtor, DestroyMixin } from '@usitsdasdesign/dds-ng/core/common-behaviors';\nimport { ButtonKind, KeyCodes, Size, Themes, WidthState } from '@usitsdasdesign/dds-ng/shared';\nimport { I18nService } from '@usitsdasdesign/dds-ng/shared/i18n';\nimport { takeUntil } from 'rxjs/operators';\nimport { DATEPICKER_BTN, DAYS_COUNT, DAYS_PER_WEEKS, RANGE_MAX_LENGTH, STARTING_DAY } from '../constants';\nimport { compareDate, getIndexFocusedItem, includeDisabledDates, includeDisabledDays, includeDisabledDaysOfMonth, includeDisabledRanges } from '../date.utils';\nimport type { DatepickerInnerComponent } from '../datepicker-inner/datepicker-inner.component';\nimport { DATEPICKER_INNER } from '../datepicker.token';\nimport { DatepickerItem, DatepickerStates, DisabledDates } from '../typings';\n\nconst DaypickerBase: DestroyCtor = DestroyMixin();\n\n@Component({\n selector: 'dds-daypicker',\n templateUrl: './daypicker.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [CommonModule, ButtonModule],\n})\nexport class DaypickerComponent extends DaypickerBase implements OnInit, OnChanges {\n // The date that is currently hovered over.\n @Input() hovered: Date;\n\n // The dates that are disabled for selection.\n @Input() disabledDates: DisabledDates;\n\n // The currently selected date.\n @Input() value: Date;\n\n // The names of the days of the week.\n public daysName: { short: string, long: string }[];\n\n // The list of dates to be displayed in the date picker.\n public dayList: DatepickerItem[];\n\n // A specific date that is disabled.\n public disabledDate: Date;\n\n // Options for the buttons in the date picker.\n public btnOptions: ButtonOptions = {\n theme: Themes.dark,\n width: WidthState.full,\n size: Size.md,\n };\n\n // Indicates whether the date picker is in inverse mode.\n public isInverse: boolean;\n\n // A reference to the day picker body element.\n @ViewChild('daypickerBody') daypickerBody: ElementRef;\n\n constructor(\n @Inject(DATEPICKER_INNER) private datepickerInner: DatepickerInnerComponent,\n private cdr: ChangeDetectorRef,\n private i18n: I18nService\n ) {\n super();\n this.isInverse = datepickerInner.isInverse;\n }\n\n // Initializes the component.\n // Sets up the daysName and dayList properties and subscribes to the date picker status changes.\n public ngOnInit(): void {\n this.daysName = this.getDaysName();\n this.dayList = this.getDates();\n\n this.datepickerInner.status.pipe(takeUntil(this.destroy)).subscribe(() => {\n this.dayList = this.getDates();\n this.cdr.markForCheck();\n });\n }\n\n // Handles changes to the input properties.\n public ngOnChanges(changes: SimpleChanges) {\n if (changes.hovered && !changes.hovered.firstChange) {\n this.hoverOverDay();\n }\n if (changes.value) {\n this.dayList = this.getDates();\n }\n }\n\n // Gets the button kind for a given day.\n public getButtonKind(day: DatepickerItem): string {\n return (day.isActive && this.datepickerInner.selectedDate.day) || (day.inRange && !day.isOtherMonth)\n ? ButtonKind.primaryLoud\n : ButtonKind.silent;\n }\n\n // Selects a day.\n public selectDay(day: DatepickerItem, event: Event): void {\n event.stopPropagation();\n this.datepickerInner.selectDate(DatepickerStates.day, day);\n this.dayList = this.getDates();\n }\n\n // Handles hovering over a day.\n public hoverOverDay(hoverDay?: DatepickerItem): void {\n if (hoverDay) {\n this.datepickerInner.dateHovered.emit(hoverDay.date);\n }\n\n if (this.datepickerInner.rangeValue && this.datepickerInner.rangeValue.length < RANGE_MAX_LENGTH) {\n const dateStart = this.datepickerInner.rangeValue[0];\n const dateEnd = this.hovered;\n\n this.dayList.forEach((day) => {\n day.inRange = day.date.getTime() > dateStart.getTime() && day.date.getTime() < dateEnd?.getTime() && !day.disabled;\n });\n }\n }\n\n // Handles keydown events.\n public onKeydown(event: KeyboardEvent): void {\n const btnElmts = this.daypickerBody.nativeElement.querySelectorAll(DATEPICKER_BTN);\n const currentItems = [...btnElmts].filter((item) => !item.disabled);\n const indexFocusedItem = getIndexFocusedItem(currentItems);\n\n switch (event.keyCode) {\n case KeyCodes.TAB:\n case event.shiftKey && KeyCodes.TAB:\n this.closeOnTabOut();\n break;\n\n case KeyCodes.ARROW_LEFT:\n const indexPrev = indexFocusedItem - 1;\n\n event.preventDefault();\n if (this.datepickerInner.isRange) {\n this.datepickerInner.focusRangeItem(this.daypickerBody, currentItems, indexPrev, this.daypickerBody, KeyCodes.ARROW_LEFT);\n } else {\n this.datepickerInner.focusPrevItem(this.daypickerBody, currentItems, indexPrev);\n }\n break;\n\n case KeyCodes.ARROW_UP:\n const indexPrevWeek = indexFocusedItem - DAYS_PER_WEEKS;\n const headerBtnElmts = this.datepickerInner.datepickerHeader.nativeElement.querySelectorAll(DATEPICKER_BTN);\n\n event.preventDefault();\n if (indexPrevWeek < 0) {\n this.datepickerInner.focusPrevItem(\n this.datepickerInner.datepickerHeader,\n headerBtnElmts,\n headerBtnElmts.length - 1,\n this.daypickerBody\n );\n } else {\n this.datepickerInner.focusPrevItem(this.daypickerBody, currentItems, indexPrevWeek);\n }\n break;\n\n case KeyCodes.ARROW_RIGHT:\n const indexNext = indexFocusedItem + 1;\n\n event.preventDefault();\n if (this.datepickerInner.isRange) {\n this.datepickerInner.focusRangeItem(this.daypickerBody, currentItems, indexNext, this.daypickerBody, KeyCodes.ARROW_RIGHT);\n } else {\n this.datepickerInner.focusNextItem(this.daypickerBody, currentItems, indexNext);\n }\n break;\n\n case KeyCodes.ARROW_DOWN:\n const indexNextWeek = indexFocusedItem + DAYS_PER_WEEKS;\n\n event.preventDefault();\n this.datepickerInner.focusNextItem(this.daypickerBody, currentItems, indexNextWeek);\n break;\n }\n }\n\n // Handles mouse enter event on the date wrapper.\n public onDateWrapMouseenter(): void {\n this.datepickerInner.dateWrapMouseenter.emit();\n }\n\n // Handles mouse leave event on the date wrapper.\n public onDateWrapMouseleave(): void {\n this.datepickerInner.dateWrapMouseleave.emit();\n }\n\n // Gets the first day of the calendar.\n get firstDayOfCalendar(): Date {\n const activeYear = this.value.getFullYear();\n const activeMonth = this.value.getMonth();\n const firstDayOfCalendar = new Date(activeYear, activeMonth, 1);\n const difference = STARTING_DAY - firstDayOfCalendar.getDay();\n const numberDayFromPrevMonth = difference > 0 ? DAYS_PER_WEEKS - difference : -difference;\n\n if (numberDayFromPrevMonth > 0) {\n firstDayOfCalendar.setDate(-numberDayFromPrevMonth + 1);\n }\n\n return firstDayOfCalendar;\n }\n\n // Closes the date picker on tab out.\n private closeOnTabOut(): void {\n this.datepickerInner.stickerRef.hide();\n }\n\n // Retrieves the list of day names based on the current locale.\n private getDaysName(): { short: string, long: string }[] {\n const shortFormatter = new Intl.DateTimeFormat(this.i18n.getLocale(), { weekday: 'narrow' });\n const longFormatter = new Intl.DateTimeFormat(this.i18n.getLocale(), { weekday: 'long' });\n\n const daysNameList = Array.from({ length: 7 }, (_, i) => {\n const date = new Date(1970, 0, i + 4);\n return {\n short: shortFormatter.format(date),\n long: longFormatter.format(date)\n };\n });\n\n return daysNameList;\n }\n\n // Retrieves the list of dates to be displayed in the date picker.\n private getDates(): DatepickerItem[] {\n const dates: DatepickerItem[] = [];\n let current = this.firstDayOfCalendar;\n let i = 0;\n let date: Date;\n\n while (i < DAYS_COUNT) {\n date = current;\n dates[i++] = {\n date: date,\n value: date.getDate(),\n disabled: this.disabled(date),\n isActive: this.isActiveDay(date) && !this.disabled(date),\n isCurrent: this.isCurrentDate(date) && !this.disabled(date),\n inRange: this.isSelectedDate(date) && !this.disabled(date),\n isOtherMonth: this.isOtherMonth(date),\n };\n current = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);\n }\n\n return this.checkLastWeekIsOtherMonth(dates);\n }\n\n // Checks if a date is the current date.\n private isCurrentDate(date: Date): boolean {\n return compareDate(date, new Date()) === 0;\n }\n\n // Checks if a date is an active day.\n private isActiveDay(date: Date): boolean {\n const rangeValue = this.datepickerInner.rangeValue;\n const selectedDate = new Date(\n this.datepickerInner.selectedDate.year,\n this.datepickerInner.selectedDate.month,\n this.datepickerInner.selectedDate.day\n );\n let result: boolean;\n\n if (rangeValue && rangeValue.length > 1) {\n rangeValue.forEach((dateItem) => {\n if (compareDate(date, dateItem) === 0) {\n result = true;\n }\n });\n } else {\n result = compareDate(date, selectedDate) === 0;\n }\n\n return result;\n }\n\n // Checks if a date is disabled.\n private disabled(date: Date): boolean {\n const isMinDate = this.isMinDate(date);\n const isMaxDate = this.isMaxDate(date);\n const isIncludeDisabledDays = this.includeDisabledDays(date);\n const isIncludeDisabledDaysOfMonth = this.includeDisabledDaysOfMonth(date);\n const isIncludeDisabledDates = this.includeDisabledDates(date);\n const isIncludeDisabledRanges = this.includeDisabledRanges(date);\n\n return (\n isMinDate || isMaxDate || isIncludeDisabledDays || isIncludeDisabledDaysOfMonth || isIncludeDisabledDates || isIncludeDisabledRanges\n );\n }\n\n // Checks if a date is in another month.\n private isOtherMonth(date: Date): boolean {\n return this.isDayOfPrevMonth(date) || this.isDayOfNextMonth(date);\n }\n\n // Checks if the last week of the dates is in another month.\n private checkLastWeekIsOtherMonth(dates: DatepickerItem[]): DatepickerItem[] {\n const datesListLength = dates.length;\n const lastWeekStartIndex = datesListLength - DAYS_PER_WEEKS;\n const lastWeekIsOtherMonth = dates.slice(lastWeekStartIndex, datesListLength).every((day) => day.isOtherMonth);\n\n if (lastWeekIsOtherMonth) {\n dates.splice(lastWeekStartIndex, DAYS_PER_WEEKS);\n }\n\n return dates;\n }\n\n // Checks if a date is the minimum date.\n private isMinDate(date: Date): boolean {\n return this.datepickerInner.minDate && compareDate(date, this.datepickerInner.minDate) <= 0;\n }\n\n // Checks if a date is the maximum date.\n private isMaxDate(date: Date): boolean {\n return this.datepickerInner.maxDate && compareDate(date, this.datepickerInner.maxDate) >= 0;\n }\n\n // Checks if a date is included in the disabled days.\n private includeDisabledDays(date: Date): boolean {\n return includeDisabledDays(this.disabledDates?.days, date);\n }\n\n // Checks if a date is included in the disabled days of the month.\n private includeDisabledDaysOfMonth(date: Date): boolean {\n return includeDisabledDaysOfMonth(this.disabledDates?.daysOfMonth, date);\n }\n\n // Checks if a date is included in the disabled dates.\n private includeDisabledDates(date: Date): boolean {\n return includeDisabledDates(this.disabledDates?.dates, date);\n }\n\n // Checks if a date is included in the disabled ranges.\n private includeDisabledRanges(date: Date): boolean {\n return includeDisabledRanges(this.disabledDates?.ranges, date);\n }\n\n // Checks if a date is a day of the previous month.\n private isDayOfPrevMonth(date: Date): boolean {\n const activeYear = this.value.getFullYear();\n const activeMonth = this.value.getMonth();\n\n return compareDate(date, new Date(activeYear, activeMonth, 1)) < 0;\n }\n\n // Checks if a date is a day of the next month.\n private isDayOfNextMonth(date: Date): boolean {\n const activeYear = this.value.getFullYear();\n const activeMonth = this.value.getMonth();\n\n return compareDate(date, new Date(activeYear, activeMonth + 1, 0)) > 0;\n }\n\n // Checks if a date is a selected date.\n private isSelectedDate(date: Date): boolean {\n const rangeValue = this.datepickerInner.rangeValue;\n let result: boolean;\n\n if (rangeValue && rangeValue.length > 1) {\n result = date.getTime() > rangeValue[0].getTime() && date.getTime() < rangeValue[1].getTime();\n }\n\n return result;\n }\n}\n","
\n\n \n
\n @for (dayName of daysName; track dayName) {\n
{{ dayName?.short }}
\n }\n
\n \n\n \n\n \n @for (week of dayList | slice:0:dayList.length; track week; let i = $index) {\n @if(i % 7 === 0) {\n
\n \n @for (day of dayList.slice(i, i + 7); track day) {\n \n {{day.value}}\n \n }\n }\n }\n
\n
\n","import { CommonModule, FormStyle, TranslationWidth, getLocaleMonthNames } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ElementRef, Inject, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\nimport { ButtonModule, ButtonOptions } from '@usitsdasdesign/dds-ng/button';\nimport { ButtonKind, KeyCodes, Themes, WidthState } from '@usitsdasdesign/dds-ng/shared';\nimport { I18nModule } from '@usitsdasdesign/dds-ng/shared/i18n';\nimport { DATEPICKER_BTN, LOCALE, MONTHS_PER_ROW, MONTH_PICKER_FORMAT } from '../constants';\nimport { compareDate, getIndexFocusedItem } from '../date.utils';\nimport type { DatepickerInnerComponent } from '../datepicker-inner/datepicker-inner.component';\nimport { DATEPICKER_INNER } from '../datepicker.token';\nimport { DatepickerItem, DatepickerStates } from '../typings';\n\n@Component({\n selector: 'dds-monthpicker',\n templateUrl: './monthpicker.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [\n CommonModule,\n ButtonModule,\n I18nModule\n ]\n})\nexport class MonthpickerComponent implements OnInit, OnChanges {\n // The selected date value.\n @Input() value: Date;\n\n // The format used for displaying the month picker.\n public monthPickerFormat: string = MONTH_PICKER_FORMAT;\n\n // The list of months to be displayed in the month picker.\n public monthList: DatepickerItem[];\n\n // The date that should be disabled in the month picker.\n public disabledDate: Date;\n\n // Options for the button appearance in the month picker.\n public btnOptions: ButtonOptions = {\n theme: Themes.dark,\n width: WidthState.full,\n };\n\n // Indicates whether the month picker should use the inverse theme.\n public isInverse: boolean;\n\n // Reference to the month picker element.\n @ViewChild('monthpicker') monthpicker: ElementRef;\n\n constructor(@Inject(DATEPICKER_INNER) private datepickerInner: DatepickerInnerComponent) {\n this.isInverse = datepickerInner.isInverse;\n }\n\n public ngOnInit(): void {\n this.monthList = this.getMonths();\n }\n\n public ngOnChanges(changes: SimpleChanges) {\n if (changes.value) {\n this.monthList = this.getMonths();\n }\n }\n\n // Determines the button kind for a given month.\n public getButtonKind(month: DatepickerItem): string {\n return month.isActive && this.datepickerInner.selectedDate.month >= 0 ? ButtonKind.primaryLoud : ButtonKind.silent;\n }\n\n // Selects a month and updates the month list.\n public selectMonth(month: DatepickerItem, event: Event) {\n event.stopPropagation();\n this.datepickerInner.selectDate(DatepickerStates.month, month);\n this.monthList = this.getMonths();\n }\n\n // Handles keyboard navigation within the month picker.\n public onKeydown(event: KeyboardEvent): void {\n const btnElmts = this.monthpicker.nativeElement.querySelectorAll(DATEPICKER_BTN);\n const currentItems = [...btnElmts].filter((item) => !item.disabled);\n const indexFocusedItem = getIndexFocusedItem(currentItems);\n\n switch (event.keyCode) {\n case KeyCodes.TAB:\n case event.shiftKey && KeyCodes.TAB:\n event.preventDefault();\n this.closeOnTabOut();\n break;\n\n case KeyCodes.ARROW_LEFT:\n const indexPrev = indexFocusedItem - 1;\n\n event.preventDefault();\n if (this.datepickerInner.isRange) {\n this.datepickerInner.focusRangeItem(this.monthpicker, currentItems, indexPrev, this.monthpicker, KeyCodes.ARROW_LEFT);\n } else {\n this.datepickerInner.focusPrevItem(this.monthpicker, currentItems, indexPrev);\n }\n break;\n\n case KeyCodes.ARROW_UP:\n const indexPrevWeek = indexFocusedItem - MONTHS_PER_ROW;\n const headerBtnElmts = this.datepickerInner.datepickerHeader.nativeElement.querySelectorAll(DATEPICKER_BTN);\n\n event.preventDefault();\n if (indexPrevWeek < 0) {\n this.datepickerInner.focusPrevItem(\n this.datepickerInner.datepickerHeader,\n headerBtnElmts,\n headerBtnElmts.length - 1,\n this.monthpicker\n );\n } else {\n this.datepickerInner.focusPrevItem(this.monthpicker, currentItems, indexPrevWeek);\n }\n break;\n\n case KeyCodes.ARROW_RIGHT:\n const indexNext = indexFocusedItem + 1;\n\n event.preventDefault();\n if (this.datepickerInner.isRange) {\n this.datepickerInner.focusRangeItem(this.monthpicker, currentItems, indexNext, this.monthpicker, KeyCodes.ARROW_RIGHT);\n } else {\n this.datepickerInner.focusNextItem(this.monthpicker, currentItems, indexNext);\n }\n break;\n\n case KeyCodes.ARROW_DOWN:\n const indexNextWeek = indexFocusedItem + MONTHS_PER_ROW;\n\n event.preventDefault();\n this.datepickerInner.focusNextItem(this.monthpicker, currentItems, indexNextWeek);\n break;\n }\n }\n\n // Emits an event when the mouse enters the date wrapper.\n public onDateWrapMouseenter(): void {\n this.datepickerInner.dateWrapMouseenter.emit();\n }\n\n // Emits an event when the mouse leaves the date wrapper.\n public onDateWrapMouseleave(): void {\n this.datepickerInner.dateWrapMouseleave.emit();\n }\n\n // Generates the list of months to be displayed in the month picker.\n private getMonths(): DatepickerItem[] {\n const monthData: DatepickerItem[] = [];\n const monthNameArray: readonly string[] = getLocaleMonthNames(LOCALE, FormStyle.Standalone, TranslationWidth.Wide);\n const activeDay = this.value.getDate();\n const activeYear = this.value.getFullYear();\n const firstMonth: Date = new Date(activeYear, 0, activeDay);\n\n let current = firstMonth;\n let i = 0;\n let date: Date;\n\n while (i < monthNameArray.length) {\n const monthNumber = i;\n\n date = current;\n monthData[i++] = {\n date: date,\n value: monthNumber,\n disabled: this.disabled(date),\n isActive: this.isActiveMonth(date) && !this.disabled(date),\n isCurrent: this.isCurrentDate(date),\n };\n\n const nextMonthForLastDay = date.getMonth() + 2;\n const lastDayOfNextMonth = new Date(date.getFullYear(), nextMonthForLastDay, 0).getDate();\n const dayForGenerateMonth = activeDay > lastDayOfNextMonth ? lastDayOfNextMonth : activeDay;\n\n current = new Date(date.getFullYear(), date.getMonth() + 1, dayForGenerateMonth);\n }\n\n return monthData;\n }\n\n // Closes the date picker when the tab key is pressed.\n private closeOnTabOut(): void {\n this.datepickerInner.stickerRef.hide();\n }\n\n // Checks if the given date is the current date.\n private isCurrentDate(date: Date): boolean {\n const currentDay = new Date().getDate();\n const month = date.getMonth();\n const year = date.getFullYear();\n\n return compareDate(new Date(year, month, currentDay), new Date()) === 0;\n }\n\n // Checks if the given date is the active month.\n private isActiveMonth(date: Date): boolean {\n const firstDay = 1;\n const selectedDate = new Date(this.datepickerInner.selectedDate.year, this.datepickerInner.selectedDate.month, firstDay);\n\n date = new Date(date.getFullYear(), date.getMonth(), firstDay);\n\n return compareDate(date, selectedDate) === 0 && !!this.datepickerInner.selectedDate.day;\n }\n\n // Checks if the given date is disabled.\n private disabled(date: Date): boolean {\n return this.isMinDate(date) || this.isMaxDate(date);\n }\n\n // Checks if the given date is before the minimum allowed date.\n private isMinDate(date: Date): boolean {\n if (this.datepickerInner.minDate) {\n const minDate = this.datepickerInner.minDate;\n const firstDayOfDate = this.getFirstDayOfDate(date);\n const firstDayOfMinDate = this.getFirstDayOfDate(this.datepickerInner.minDate);\n const lastDayOfDate = this.getLastDayOfDate(date);\n const isLastDayOfMonthDisabled = compareDate(lastDayOfDate, minDate) === 0;\n let result = isLastDayOfMonthDisabled;\n\n if (!result) {\n result = compareDate(firstDayOfDate, firstDayOfMinDate) < 0;\n }\n\n return result;\n }\n }\n\n // Checks if the given date is after the maximum allowed date.\n private isMaxDate(date: Date): boolean {\n if (this.datepickerInner.maxDate) {\n const maxDate = this.datepickerInner.maxDate;\n const firstDayOfDate = this.getFirstDayOfDate(date);\n const firstDayOfMaxDate = this.getFirstDayOfDate(this.datepickerInner.maxDate);\n const isFirstDayOfMonthDisabled = compareDate(firstDayOfDate, maxDate) === 0;\n let result = isFirstDayOfMonthDisabled;\n\n if (!result) {\n result = compareDate(firstDayOfDate, firstDayOfMaxDate) > 0;\n }\n\n return result;\n }\n }\n\n // Gets the first day of the given date's month.\n private getFirstDayOfDate(date: Date): Date {\n const month = date.getMonth();\n const year = date.getFullYear();\n\n return new Date(year, month, 1);\n }\n\n // Gets the last day of the given date's month.\n private getLastDayOfDate(date: Date): Date {\n const month = date.getMonth();\n const year = date.getFullYear();\n\n return new Date(year, month + 1, 0);\n }\n}\n","
\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';\nimport { ButtonModule, ButtonOptions } from '@usitsdasdesign/dds-ng/button';\nimport { DestroyCtor, DestroyMixin, I18nCtor, I18nMixin } from '@usitsdasdesign/dds-ng/core/common-behaviors';\nimport { ButtonKind, KeyCodes, Themes, WidthState } from '@usitsdasdesign/dds-ng/shared';\nimport { I18nService, ITranslation } from '@usitsdasdesign/dds-ng/shared/i18n';\nimport { takeUntil } from 'rxjs/operators';\nimport { DATEPICKER_BTN, NUMBER_YEARS_OF_CALENDAR, YEARS_PER_ROW, YEAR_PICKER_FORMAT } from '../constants';\nimport { compareDate, compareYears, getFirstDayAndMonthOfDate, getIndexFocusedItem, getLastDayAndMonthOfDate, isCurrentDate } from '../date.utils';\nimport type { DatepickerInnerComponent } from '../datepicker-inner/datepicker-inner.component';\nimport { DATEPICKER_INNER } from '../datepicker.token';\nimport { DatepickerItem, DatepickerStates, DatepickerYearsActions } from '../typings';\n\nconst YearpickerBase: DestroyCtor & I18nCtor = DestroyMixin(I18nMixin());\n@Component({\n selector: 'dds-yearpicker',\n templateUrl: './yearpicker.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [\n CommonModule,\n ButtonModule\n ]\n})\nexport class YearpickerComponent extends YearpickerBase implements OnInit {\n // List of years to be displayed in the year picker.\n public yearList: DatepickerItem[];\n\n // Options for the button used in the year picker.\n public btnOptions: ButtonOptions = {\n theme: Themes.dark,\n width: WidthState.full,\n kind: ButtonKind.silent,\n };\n\n // Date to be disabled in the year picker.\n public disabledDate: Date;\n\n // Flag to disable the previous year button.\n public disabledBtnPrev: boolean;\n\n // Flag to disable the next year button.\n public disabledBtnNext: boolean;\n\n // Actions for the year picker.\n public calendarYearsActions = DatepickerYearsActions;\n\n // Format for the year picker.\n public yearPickerFormat = YEAR_PICKER_FORMAT;\n\n // ARIA label for the previous year button.\n public prevYearBtnAriaLabel: string;\n\n // ARIA label for the next year button.\n public nextYearBtnAriaLabel: string;\n\n // ARIA label for the year value.\n public yearValueAriaLabel: string;\n\n // Flag to indicate if the year picker is in inverse mode.\n public isInverse: boolean;\n\n private firstYear: Date;\n\n @ViewChild('yearpicker') yearpicker: ElementRef;\n\n constructor(\n @Inject(DATEPICKER_INNER) private datepickerInner: DatepickerInnerComponent,\n public i18n: I18nService,\n public cdr: ChangeDetectorRef\n ) {\n super();\n this.isInverse = datepickerInner.isInverse;\n }\n\n // Lifecycle hook that is called after data-bound properties are initialized.\n public ngOnInit(): void {\n this.yearList = this.getYears();\n this.checkDisabledBtn();\n this.datepickerInner.changeYearAction.pipe(takeUntil(this.destroy)).subscribe((action) => {\n this.changeYear(action);\n this.cdr.markForCheck();\n });\n super.ngOnInit();\n }\n\n // Gets the button kind based on the year.\n public getButtonKind(year: DatepickerItem): string {\n return year.isActive && this.datepickerInner.selectedDate.year ? ButtonKind.primaryLoud : ButtonKind.silent;\n }\n\n // Changes the year based on the action.\n public changeYear(action: string): void {\n const activeMonth = this.datepickerInner.value.getMonth();\n const activeDay = this.datepickerInner.value.getDate();\n const firstYearInList: number = this.yearList[0].value;\n const lastYearInList: number = this.yearList[this.yearList.length - 1].value;\n\n switch (action) {\n case DatepickerYearsActions.prev:\n this.firstYear = new Date(firstYearInList - NUMBER_YEARS_OF_CALENDAR, activeMonth, activeDay);\n this.yearList = this.getYears();\n break;\n case DatepickerYearsActions.next:\n this.firstYear = new Date(lastYearInList + 1, activeMonth, activeDay);\n this.yearList = this.getYears();\n break;\n }\n\n this.checkDisabledBtn();\n }\n\n // Selects a year.\n public selectYear(year: DatepickerItem, event: Event) {\n event.stopPropagation();\n this.datepickerInner.selectDate(DatepickerStates.year, year);\n this.yearList = this.getYears();\n }\n\n // Gets the ARIA label for the year.\n public getAriaLabel(year: string): string {\n return year + ' ' + this.yearValueAriaLabel;\n }\n\n // Handles keydown events for the year picker.\n public onKeydown(event: KeyboardEvent): void {\n const btnElmts = this.yearpicker.nativeElement.querySelectorAll(DATEPICKER_BTN);\n const currentItems = [...btnElmts].filter((item) => !item.disabled);\n const indexFocusedItem = getIndexFocusedItem(currentItems);\n\n switch (event.keyCode) {\n case KeyCodes.TAB:\n case event.shiftKey && KeyCodes.TAB:\n event.preventDefault();\n this.closeOnTabOut();\n break;\n\n case KeyCodes.ARROW_LEFT:\n const indexPrev = indexFocusedItem - 1;\n\n event.preventDefault();\n if (this.datepickerInner.isRange) {\n this.datepickerInner.focusRangeItem(this.yearpicker, currentItems, indexPrev, this.yearpicker, KeyCodes.ARROW_LEFT);\n } else {\n this.datepickerInner.focusPrevItem(this.yearpicker, currentItems, indexPrev);\n }\n break;\n\n case KeyCodes.ARROW_UP:\n const indexPrevWeek = indexFocusedItem - YEARS_PER_ROW;\n const headerBtnElmts = this.datepickerInner.datepickerHeader.nativeElement.querySelectorAll(DATEPICKER_BTN);\n\n event.preventDefault();\n if (indexPrevWeek < 0) {\n this.datepickerInner.focusPrevItem(\n this.datepickerInner.datepickerHeader,\n headerBtnElmts,\n headerBtnElmts.length - 1,\n this.yearpicker\n );\n } else {\n this.datepickerInner.focusPrevItem(this.yearpicker, currentItems, indexPrevWeek);\n }\n\n break;\n\n case KeyCodes.ARROW_RIGHT:\n const indexNext = indexFocusedItem + 1;\n\n event.preventDefault();\n if (this.datepickerInner.isRange) {\n this.datepickerInner.focusRangeItem(this.yearpicker, currentItems, indexNext, this.yearpicker, KeyCodes.ARROW_RIGHT);\n } else {\n this.datepickerInner.focusNextItem(this.yearpicker, currentItems, indexNext);\n }\n break;\n\n case KeyCodes.ARROW_DOWN:\n const indexNextWeek = indexFocusedItem + YEARS_PER_ROW;\n\n event.preventDefault();\n this.datepickerInner.focusNextItem(this.yearpicker, currentItems, indexNextWeek);\n break;\n }\n }\n\n // Handles mouse enter event on the date wrap.\n public onDateWrapMouseenter(): void {\n this.datepickerInner.dateWrapMouseenter.emit();\n }\n\n // Handles mouse leave event on the date wrap.\n public onDateWrapMouseleave(): void {\n this.datepickerInner.dateWrapMouseleave.emit();\n }\n\n // Gets the list of years to be displayed in the year picker.\n private getYears(): DatepickerItem[] {\n const yearData: DatepickerItem[] = [];\n let current =\n this.firstYear ||\n new Date(this.datepickerInner.value.getFullYear() - 4, this.datepickerInner.value.getMonth(), this.datepickerInner.value.getDate());\n let i = 0;\n let date: Date;\n\n while (i < NUMBER_YEARS_OF_CALENDAR) {\n date = current;\n yearData[i++] = {\n date: date,\n value: current.getFullYear(),\n isActive: this.isActive(date),\n disabled: this.disabled(date),\n isCurrent: isCurrentDate(date),\n };\n current = new Date(date.getFullYear() + 1, date.getMonth(), date.getDate());\n }\n\n return yearData;\n }\n\n // Closes the datepicker on tab out.\n private closeOnTabOut(): void {\n this.datepickerInner.stickerRef.hide();\n }\n\n // Checks if the given date is active.\n private isActive(date: Date): boolean {\n const selectedDate = new Date(\n this.datepickerInner.selectedDate.year,\n this.datepickerInner.selectedDate.month,\n this.datepickerInner.selectedDate.day\n );\n return compareYears(date, selectedDate) === 0;\n }\n\n // Checks if the given date is disabled.\n private disabled(date: Date): boolean {\n return this.isMinDate(date) || this.isMaxDate(date);\n }\n\n // Sets the i18n texts for the component.\n protected setI18nTexts(translation: ITranslation): void {\n this.prevYearBtnAriaLabel = translation.DATEPICKER.A11Y.PREV_YEAR_BTN_ARIA_LABEL;\n this.nextYearBtnAriaLabel = translation.DATEPICKER.A11Y.NEXT_YEAR_BTN_ARIA_LABEL;\n this.yearValueAriaLabel = translation.DATEPICKER.A11Y.YEAR_VALUE_ARIA_LABEL;\n this.cdr.detectChanges();\n }\n\n // Checks if the given date is the minimum date.\n private isMinDate(date: Date): boolean {\n if (this.datepickerInner.minDate) {\n const minDate = this.datepickerInner.minDate;\n const lastDayAndMonthOfDate = getLastDayAndMonthOfDate(date);\n const isLastMonthOfYearDisabled = compareDate(lastDayAndMonthOfDate, minDate) === 0;\n\n return isLastMonthOfYearDisabled || compareYears(date, minDate) < 0;\n }\n }\n\n // Checks if the given date is the maximum date.\n private isMaxDate(date: Date): boolean {\n if (this.datepickerInner.maxDate) {\n const maxDate = this.datepickerInner.maxDate;\n const firstDayAndMonthOfDate = getFirstDayAndMonthOfDate(date);\n const isFirstMonthOfYearDisabled = compareDate(firstDayAndMonthOfDate, maxDate) === 0;\n\n return isFirstMonthOfYearDisabled || compareYears(date, maxDate) > 0;\n }\n }\n\n // Checks if the previous and next buttons should be disabled.\n private checkDisabledBtn(): void {\n const firstYearInList: number = this.yearList[0].value;\n const lastYearInList: number = this.yearList[this.yearList.length - 1].value;\n\n this.disabledBtnPrev = this.isMinDate(new Date(firstYearInList - 1, 0, 1));\n this.disabledBtnNext = this.isMaxDate(new Date(lastYearInList + 1, 0, 1));\n }\n}\n","