();\n\n public selectMonth(month: number): void {\n this.selectedMonth.emit(month);\n }\n}\n","\n {{ month | date : 'LLLL' | titlecase }}\n
\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ComponentChange, ComponentChanges } from '@bimeister/pupakit.common';\nimport { filterFalsy, isNil } from '@bimeister/utilities';\nimport { BehaviorSubject, combineLatest, Observable } from 'rxjs';\nimport { distinctUntilChanged, filter, map, switchMap, take, withLatestFrom } from 'rxjs/operators';\nimport { dayInMs } from '../../../../declarations/constants/day-in-ms.const';\nimport { DayOfWeek } from '../../../../declarations/enums/day-of-week.enum';\nimport { dateClearTime } from '../../../../declarations/functions/date-clear-time.function';\nimport { getDaysInMonth } from '../../../../declarations/functions/get-days-in-month.function';\nimport { isDate } from '../../../../declarations/functions/is-date.function';\nimport { sanitizeDate } from '../../../../declarations/functions/sanitize-date.function';\nimport { DatePickerStateService } from '../../services/date-picker-state.service';\nimport { DatePickerPreviewMode } from '../../../../declarations/types/date-picker-preview-mode.type';\n\nconst DEFAULT_CURRENT_DATE_WITH_CLEARED_TIME: Date = dateClearTime(new Date());\nconst YEARS_IN_SECTION: number = 30;\nconst YEARS_START_OFFSET: number = 19;\n\nconst MIN_DAYS_MONTH: number = 28;\n\nenum DatePickerState {\n Years,\n Months,\n Days,\n}\n\n@Component({\n selector: 'pupa-date-picker-simple',\n templateUrl: './date-picker-simple.component.html',\n styleUrls: ['./date-picker-simple.component.scss'],\n encapsulation: ViewEncapsulation.Emulated,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DatePickerSimpleComponent implements OnChanges {\n @Input() public readonly baseDate: Date = DEFAULT_CURRENT_DATE_WITH_CLEARED_TIME;\n public readonly baseDate$: BehaviorSubject = new BehaviorSubject(DEFAULT_CURRENT_DATE_WITH_CLEARED_TIME);\n\n @Input() public readonly isLeftDoubleDatePicker: boolean = false;\n public readonly isLeftDoubleDatePicker$: BehaviorSubject = new BehaviorSubject(false);\n\n @Input() public readonly isRightDoubleDatePicker: boolean = false;\n public readonly isRightDoubleDatePicker$: BehaviorSubject = new BehaviorSubject(false);\n\n @Input() public readonly needAddedWeek: boolean = false;\n public readonly needAddedWeek$: BehaviorSubject = new BehaviorSubject(false);\n\n @Output() public readonly nextMonthClicked: EventEmitter = new EventEmitter();\n @Output() public readonly previousMonthClicked: EventEmitter = new EventEmitter();\n\n public readonly weekDayNames: string[] = this.datePickerStateService.weekDayNames;\n\n public readonly datePickerPreviewMode: typeof DatePickerState = DatePickerState;\n public readonly datePickerPreviewMode$: BehaviorSubject = new BehaviorSubject(\n DatePickerState.Days\n );\n\n public readonly previewMode$: BehaviorSubject = this.datePickerStateService.previewMode$;\n\n public readonly selectedDate$: BehaviorSubject = this.datePickerStateService.selectedDate$;\n public readonly selectedRange$: BehaviorSubject = this.datePickerStateService.selectedRange$;\n\n public readonly isSelectionModeDate$: Observable = this.datePickerStateService.isSelectionModeDate$;\n public readonly isDatePickerDoubleModeEnabled$: Observable = combineLatest([\n this.isLeftDoubleDatePicker$,\n this.isRightDoubleDatePicker$,\n ]).pipe(\n map(([isLeftDoubleDatePicker, isRightDoubleDatePicker]: [boolean, boolean]) =>\n [isLeftDoubleDatePicker, isRightDoubleDatePicker].includes(true)\n )\n );\n\n public readonly hoveredDate$: BehaviorSubject = this.datePickerStateService.hoveredDate$;\n public readonly hoveredRange$: Observable = this.datePickerStateService.hoveredRange$;\n\n public readonly isBackDating$: BehaviorSubject = this.datePickerStateService.isBackDating$;\n public readonly availableEndDate$: BehaviorSubject = this.datePickerStateService.availableEndDate$;\n\n public readonly primarySectionStartDate$: Observable = this.baseDate$.pipe(\n distinctUntilChanged(),\n filter((baseDate: Date) => isDate(baseDate)),\n map((baseDate: Date) => {\n const baseMonthDay: number = baseDate.getDate();\n const baseDateMs: number = baseDate.valueOf();\n return baseDateMs - (baseMonthDay - 1) * dayInMs;\n }),\n map((sectionStartDateMs: number) => dateClearTime(new Date(sectionStartDateMs)))\n );\n\n public readonly baseYear$: Observable = this.primarySectionStartDate$.pipe(\n distinctUntilChanged(),\n map((primarySectionStartDate: Date) => primarySectionStartDate.getFullYear())\n );\n\n public readonly primarySectionEndDate$: Observable = this.baseDate$.pipe(\n distinctUntilChanged(),\n filter((baseDate: Date) => isDate(baseDate)),\n map((baseDate: Date) => {\n const baseMonthDay: number = baseDate.getDate();\n const baseDateMs: number = baseDate.valueOf();\n const daysInMonth: number = getDaysInMonth(baseDate);\n\n return Object.is(baseMonthDay, daysInMonth) ? baseDateMs : baseDateMs + (daysInMonth - baseMonthDay) * dayInMs;\n }),\n map((sectionStartDateMs: number) => dateClearTime(new Date(sectionStartDateMs)))\n );\n\n public readonly primarySectionDates$: Observable = this.primarySectionStartDate$.pipe(\n distinctUntilChanged(),\n map((sectionStartDate: Date) => {\n const daysInMonth: number = getDaysInMonth(sectionStartDate);\n const sectionStartDateMs: number = sectionStartDate.valueOf();\n return new Array(daysInMonth)\n .fill(sectionStartDateMs)\n .map((startDateMs: number, dayInMonth: number) => startDateMs + dayInMonth * dayInMs);\n }),\n map((sectionDatesMs: number[]) => sectionDatesMs.map((dateMs: number) => dateClearTime(new Date(dateMs))))\n );\n\n public readonly primarySectionLeftOffsetDates$: Observable = this.primarySectionStartDate$.pipe(\n distinctUntilChanged(),\n map((sectionStartDate: Date) => {\n const sectionStartDateMs: number = sectionStartDate.valueOf();\n const lastDayOfPreviousMonthMs: number = sectionStartDateMs - dayInMs;\n return dateClearTime(new Date(lastDayOfPreviousMonthMs));\n }),\n map((previousMonthLastDate: Date) => {\n const previousMonthLastDateDayOfWeek: DayOfWeek = previousMonthLastDate.getDay();\n if (previousMonthLastDateDayOfWeek === DayOfWeek.Sunday) {\n return [];\n }\n const previousMonthLastDateMs: number = previousMonthLastDate.valueOf();\n const visibleDaysCount: number = previousMonthLastDateDayOfWeek;\n return new Array(visibleDaysCount)\n .fill(previousMonthLastDateMs)\n .map((lastMonthDateMs: number, multiplier: number) => lastMonthDateMs - multiplier * dayInMs);\n }),\n map((previousMonthDatesMs: number[]) => [...previousMonthDatesMs].reverse()),\n map((reversedPreviousMonthDatesMs: number[]) =>\n reversedPreviousMonthDatesMs.map((dateMs: number) => dateClearTime(new Date(dateMs)))\n )\n );\n\n public readonly primarySectionRightOffsetDates$: Observable = this.needAddedWeek$.pipe(\n switchMap((needAddedWeek: boolean) =>\n this.primarySectionEndDate$.pipe(\n distinctUntilChanged(),\n map((sectionEndDate: Date) => {\n const currentSectionDate: Date = new Date(sectionEndDate);\n const month: number = currentSectionDate.getMonth() + 1;\n currentSectionDate.setDate(1);\n currentSectionDate.setMonth(month);\n\n return [sectionEndDate, dateClearTime(new Date(currentSectionDate))];\n }),\n withLatestFrom(this.previewMode$),\n map(([[currentSectionEndDate, nextMonthFirstDate], previewMode]: [[Date, Date], DatePickerPreviewMode]) => {\n const nextMonthFirstDateDayOfWeek: DayOfWeek = nextMonthFirstDate.getDay();\n const nextMonthFirstDateMs: number = nextMonthFirstDate.valueOf();\n\n const currentDaysInMonth: number = getDaysInMonth(currentSectionEndDate);\n const currentMonthIsSmall: boolean = currentDaysInMonth === MIN_DAYS_MONTH;\n const currentMonthPreviewModeIsDouble: boolean = previewMode === 'double';\n const nextMonthFirstDateDayIsMonday: boolean = nextMonthFirstDateDayOfWeek === DayOfWeek.Monday;\n const nextMonthFirstDateDayIsSunday: boolean = nextMonthFirstDateDayOfWeek === DayOfWeek.Sunday;\n\n const currentMonthIsSmallAndInDouble: boolean = currentMonthIsSmall && currentMonthPreviewModeIsDouble;\n\n if (nextMonthFirstDateDayIsMonday && !currentMonthIsSmallAndInDouble) {\n return [];\n }\n const visibleDaysCount: number = nextMonthFirstDateDayIsSunday ? 1 : 8 - nextMonthFirstDateDayOfWeek;\n\n const resultDaysCount: number = needAddedWeek ? visibleDaysCount + 7 : visibleDaysCount;\n\n return new Array(resultDaysCount)\n .fill(nextMonthFirstDateMs)\n .map((lastMonthDateMs: number, multiplier: number) => lastMonthDateMs + multiplier * dayInMs);\n }),\n map((reversedPreviousMonthDatesMs: number[]) =>\n reversedPreviousMonthDatesMs.map((dateMs: number) => dateClearTime(new Date(dateMs)))\n )\n )\n )\n );\n\n public readonly primarySectionYears$: Observable = this.primarySectionStartDate$.pipe(\n distinctUntilChanged(),\n map((sectionStartDate: Date) => sectionStartDate.getFullYear()),\n map((currentYear: number) => {\n const startYearInSection: number =\n Math.floor(currentYear / YEARS_IN_SECTION) * YEARS_IN_SECTION - YEARS_START_OFFSET;\n\n const resultStartYearInSection: number =\n startYearInSection + YEARS_IN_SECTION > currentYear ? startYearInSection : currentYear;\n\n return Array(YEARS_IN_SECTION)\n .fill(0)\n .map((_year: number, index: number) => resultStartYearInSection + index);\n })\n );\n\n public readonly primarySectionYearsStartYear$: Observable = this.primarySectionYears$.pipe(\n map((years: number[]) => years[0])\n );\n public readonly primarySectionYearsEndYear$: Observable = this.primarySectionYears$.pipe(\n map((years: number[]) => years[years.length - 1])\n );\n\n constructor(private readonly datePickerStateService: DatePickerStateService) {}\n\n public ngOnChanges(changes: ComponentChanges): void {\n this.processBaseDateChange(changes?.baseDate);\n this.processIsLeftDoubleDatePickerChange(changes?.isLeftDoubleDatePicker);\n this.processIsRightDoubleDatePickerChange(changes?.isRightDoubleDatePicker);\n this.processNeedAddedWeekChange(changes?.needAddedWeek);\n }\n\n public switchToPreviousMonth(): void {\n this.baseDate$\n .pipe(\n take(1),\n map((currentBaseDate: Date) => {\n const month: number = currentBaseDate.getMonth() - 1;\n currentBaseDate.setMonth(month, 1);\n return currentBaseDate;\n }),\n map((newBaseDateMs: Date) => dateClearTime(new Date(newBaseDateMs)))\n )\n .subscribe((newBaseDate: Date) => {\n this.baseDate$.next(newBaseDate);\n this.previousMonthClicked.emit();\n });\n }\n\n public switchToNextMonth(): void {\n this.baseDate$\n .pipe(\n take(1),\n map((currentBaseDate: Date) => {\n const month: number = currentBaseDate.getMonth() + 1;\n currentBaseDate.setMonth(month, 1);\n return currentBaseDate;\n }),\n map((newBaseDateMs: Date) => dateClearTime(new Date(newBaseDateMs)))\n )\n .subscribe((newBaseDate: Date) => {\n this.baseDate$.next(newBaseDate);\n this.nextMonthClicked.emit();\n });\n }\n\n public switchToNextYear(): void {\n this.baseYear$.pipe(take(1)).subscribe((year: number) => this.switchToYear(year + 1));\n }\n\n public switchToPreviousYear(): void {\n this.baseYear$.pipe(take(1)).subscribe((year: number) => this.switchToYear(year - 1));\n }\n\n public switchToYear(year: number): void {\n this.baseDate$\n .pipe(\n take(1),\n map((currentBaseDate: Date) => dateClearTime(new Date(currentBaseDate.setFullYear(year))))\n )\n .subscribe((newBaseDate: Date) => {\n this.datePickerPreviewMode$.next(DatePickerState.Months);\n this.baseDate$.next(newBaseDate);\n });\n }\n\n public switchToMonth(month: number): void {\n this.baseDate$\n .pipe(\n take(1),\n map((currentBaseDate: Date) => dateClearTime(new Date(currentBaseDate.setMonth(month, 1))))\n )\n .subscribe((newBaseDate: Date) => {\n this.datePickerPreviewMode$.next(DatePickerState.Days);\n this.baseDate$.next(newBaseDate);\n });\n }\n\n public switchToPreviousYearsPeriod(): void {\n this.primarySectionYearsStartYear$\n .pipe(\n take(1),\n switchMap((primarySectionYearsStartYear: number) => {\n const nextSectionYearsStartYear: number = primarySectionYearsStartYear - YEARS_IN_SECTION;\n\n return this.baseDate$.pipe(\n take(1),\n map((currentBaseDate: Date) =>\n dateClearTime(new Date(currentBaseDate.setFullYear(nextSectionYearsStartYear)))\n )\n );\n })\n )\n .subscribe((newBaseDate: Date) => {\n this.baseDate$.next(newBaseDate);\n });\n }\n\n public switchToNextYearsPeriod(): void {\n this.primarySectionYearsStartYear$\n .pipe(\n take(1),\n switchMap((primarySectionYearsStartYear: number) => {\n const nextSectionYearsStartYear: number = primarySectionYearsStartYear + YEARS_IN_SECTION;\n\n return this.baseDate$.pipe(\n take(1),\n map((currentBaseDate: Date) =>\n dateClearTime(new Date(currentBaseDate.setFullYear(nextSectionYearsStartYear)))\n )\n );\n })\n )\n .subscribe((newBaseDate: Date) => {\n this.baseDate$.next(newBaseDate);\n });\n }\n\n public switchDatePickerPreviewMode(mode: DatePickerState): void {\n this.isDatePickerDoubleModeEnabled$\n .pipe(take(1), filterFalsy())\n .subscribe(() => this.datePickerPreviewMode$.next(mode));\n }\n\n public processDateSelection(date: Date): void {\n this.datePickerStateService.processDateSelection(date);\n }\n\n public processDateHover(date: Date): void {\n this.datePickerStateService.processDateHover(date);\n }\n\n public isSameDate(dateA: Date, dateB: Date): boolean {\n return this.datePickerStateService.isSameDate(dateA, dateB);\n }\n\n public dateIsInDateRange(date: Date, dateRange: Date[]): boolean {\n return this.datePickerStateService.dateIsInDateRange(date, dateRange);\n }\n\n public dateIsInDateArray(date: Date, dateArray: Date[]): boolean {\n return this.datePickerStateService.dateIsInDateArray(date, dateArray);\n }\n\n public dateIsRangeStartDate(date: Date, dateRange: Date[]): boolean {\n return this.datePickerStateService.dateIsRangeStartDate(date, dateRange);\n }\n\n public dateIsRangeEndDate(date: Date, dateRange: Date[]): boolean {\n return this.datePickerStateService.dateIsRangeEndDate(date, dateRange);\n }\n\n public dateIsNotAvailable(date: Date, isBackDating: boolean, availableEndDate: Date | number): boolean {\n return this.datePickerStateService.dateIsNotAvailable(date, isBackDating, availableEndDate);\n }\n\n public isDateStartInHoveredAndSelectedRange(date: Date, hoveredRange: Date[], selectedRange: Date[]): boolean {\n return this.datePickerStateService.isDateStartInHoveredAndSelectedRange(date, hoveredRange, selectedRange);\n }\n\n public isDateEndInHoveredAndSelectedRange(date: Date, hoveredRange: Date[], selectedRange: Date[]): boolean {\n return this.datePickerStateService.isDateEndInHoveredAndSelectedRange(date, hoveredRange, selectedRange);\n }\n\n private processBaseDateChange(change: ComponentChange): void {\n const updatedValue: Date | undefined = change?.currentValue;\n\n if (isNil(updatedValue) || !isDate(updatedValue)) {\n return;\n }\n const sanitizedDate: Date = sanitizeDate(updatedValue);\n const sanitizedDateWithClearedTime: Date = dateClearTime(sanitizedDate);\n this.baseDate$.next(sanitizedDateWithClearedTime);\n }\n\n private processIsLeftDoubleDatePickerChange(change: ComponentChange): void {\n const updatedValue: boolean | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n this.isLeftDoubleDatePicker$.next(updatedValue);\n }\n\n private processIsRightDoubleDatePickerChange(change: ComponentChange): void {\n const updatedValue: boolean | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n this.isRightDoubleDatePicker$.next(updatedValue);\n }\n\n private processNeedAddedWeekChange(change: ComponentChange): void {\n const updatedValue: boolean | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n this.needAddedWeek$.next(updatedValue);\n }\n}\n","\n \n \n \n\n\n\n \n\n \n \n {{ dayName }}\n \n
\n\n \n \n\n \n\n \n
\n\n\n\n \n \n\n\n\n \n \n\n\n\n \n \n \n {{ date | date : 'd' }}\n \n \n \n\n\n\n \n \n \n {{ primarySectionStartDate$ | async | date : 'yyy' | titlecase }}\n \n \n \n \n\n\n\n \n\n\n\n \n\n","import { ChangeDetectionStrategy, Component, Input, OnChanges, ViewEncapsulation } from '@angular/core';\nimport { ComponentChange, ComponentChanges } from '@bimeister/pupakit.common';\nimport { isNil } from '@bimeister/utilities';\nimport { BehaviorSubject, Observable, of } from 'rxjs';\nimport { distinctUntilChanged, filter, map, switchMap, take } from 'rxjs/operators';\nimport { dayInMs } from '../../../../declarations/constants/day-in-ms.const';\nimport { DayOfWeek } from '../../../../declarations/enums/day-of-week.enum';\nimport { dateClearTime } from '../../../../declarations/functions/date-clear-time.function';\nimport { getDaysInMonth } from '../../../../declarations/functions/get-days-in-month.function';\nimport { isDate } from '../../../../declarations/functions/is-date.function';\nimport { sanitizeDate } from '../../../../declarations/functions/sanitize-date.function';\n\nconst DEFAULT_CURRENT_DATE: Date = dateClearTime(new Date());\nconst DAYS_COUNT_IN_STANDARD_GRID: number = 35;\n\n@Component({\n selector: 'pupa-date-picker-double',\n templateUrl: './date-picker-double.component.html',\n styleUrls: ['./date-picker-double.component.scss'],\n encapsulation: ViewEncapsulation.Emulated,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DatePickerDoubleComponent implements OnChanges {\n @Input() public baseDate: Date = DEFAULT_CURRENT_DATE;\n public readonly baseDate$: BehaviorSubject = new BehaviorSubject(DEFAULT_CURRENT_DATE);\n\n public readonly baseDateNextMonth$: Observable = this.baseDate$.pipe(\n map((baseDate: Date) => {\n const currentMonth: number = baseDate.getMonth();\n const nextMonth: number = currentMonth + 1;\n const currentYear: number = baseDate.getFullYear();\n return dateClearTime(new Date(currentYear, nextMonth, 1));\n })\n );\n\n public readonly needLeftCalendarAddedWeek$: Observable = this.baseDateNextMonth$.pipe(\n distinctUntilChanged(),\n switchMap((date: Date) => this.needCalendarAddedWeek(date))\n );\n\n public readonly needRightCalendarAddedWeek$: Observable = this.baseDate$.pipe(\n distinctUntilChanged(),\n switchMap((date: Date) => this.needCalendarAddedWeek(date))\n );\n\n public ngOnChanges(changes: ComponentChanges): void {\n this.processBaseDateChange(changes?.baseDate);\n }\n\n public switchToPreviousMonth(): void {\n this.baseDate$\n .pipe(\n take(1),\n map((currentBaseDate: Date) => {\n const baseDateMonthDay: number = currentBaseDate.getDate();\n const currentBaseDateMs: number = currentBaseDate.valueOf();\n return currentBaseDateMs - baseDateMonthDay * dayInMs;\n }),\n map((newBaseDateMs: number) => dateClearTime(new Date(newBaseDateMs)))\n )\n .subscribe((newBaseDate: Date) => {\n this.baseDate$.next(newBaseDate);\n });\n }\n\n public switchToNextMonth(): void {\n this.baseDate$\n .pipe(\n take(1),\n map((currentBaseDate: Date) => {\n const baseDateMonthDay: number = currentBaseDate.getDate();\n const currentBaseDateMs: number = currentBaseDate.valueOf();\n const currentBaseDateMonthDaysCount: number = getDaysInMonth(currentBaseDate);\n return currentBaseDateMs + (currentBaseDateMonthDaysCount + 1 - baseDateMonthDay) * dayInMs;\n }),\n map((newBaseDateMs: number) => dateClearTime(new Date(newBaseDateMs)))\n )\n .subscribe((newBaseDate: Date) => {\n this.baseDate$.next(newBaseDate);\n });\n }\n\n public needCalendarAddedWeek(date: Date): Observable {\n return of(date).pipe(\n filter((baseDate: Date) => isDate(baseDate)),\n map((baseDate: Date) => {\n const currentDate: Date = baseDate;\n currentDate.setDate(1);\n return currentDate.valueOf();\n }),\n map((sectionStartDateMs: number) => dateClearTime(new Date(sectionStartDateMs))),\n map((startDate: Date) => {\n const daysInMonth: number = getDaysInMonth(startDate);\n const startDateDayOfWeek: DayOfWeek = startDate.getDay();\n const countOfLeftDays: number = startDateDayOfWeek === DayOfWeek.Sunday ? 6 : startDateDayOfWeek - 1;\n\n const resultDaysCount: number = countOfLeftDays + daysInMonth;\n\n return resultDaysCount > DAYS_COUNT_IN_STANDARD_GRID;\n })\n );\n }\n\n private processBaseDateChange(change: ComponentChange): void {\n const updatedValue: Date | undefined = change?.currentValue;\n\n if (isNil(updatedValue) || !isDate(updatedValue)) {\n return;\n }\n const sanitizedDate: Date = sanitizeDate(updatedValue);\n const sanitizedDateWithClearedTime: Date = dateClearTime(sanitizedDate);\n this.baseDate$.next(sanitizedDateWithClearedTime);\n }\n}\n","\n","import { Injectable } from '@angular/core';\n\nconst HOURS: number[] = Array(24)\n .fill(0)\n .map((_hour: number, index: number) => index);\nconst MINUTES: number[] = Array(60)\n .fill(0)\n .map((_hour: number, index: number) => index);\nconst SECONDS: number[] = MINUTES;\n\nconst ITEM_SIZE_PX: number = 28;\n\n@Injectable({ providedIn: 'any' })\nexport class TimePickerStateService {\n public readonly hours: number[] = HOURS;\n public readonly minutes: number[] = MINUTES;\n public readonly seconds: number[] = SECONDS;\n\n public readonly itemSizePx: number = ITEM_SIZE_PX;\n}\n","import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n HostListener,\n Input,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n TrackByFunction,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ComponentChange, ComponentChanges } from '@bimeister/pupakit.common';\nimport { filterNotNil, isNil } from '@bimeister/utilities';\nimport { BehaviorSubject, ReplaySubject, Subscription } from 'rxjs';\nimport { debounceTime, filter, switchMap, withLatestFrom } from 'rxjs/operators';\nimport { TimePickerStateService } from '../../services/time-picker-state.service';\n\n@Component({\n selector: 'pupa-time-picker-digits',\n templateUrl: './time-picker-digits.component.html',\n styleUrls: ['./time-picker-digits.component.scss'],\n encapsulation: ViewEncapsulation.Emulated,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TimePickerDigitsComponent implements OnChanges, OnInit, OnDestroy, AfterContentInit {\n @Input() public readonly digits: number[] = [];\n public readonly digits$: BehaviorSubject = new BehaviorSubject([]);\n\n @Input() public readonly chosenDigit: number = null;\n\n public readonly itemSizePx: number = this.timePickerStateService.itemSizePx;\n\n @ViewChild('viewPort', { static: true }) private readonly viewPort: CdkVirtualScrollViewport;\n private readonly viewPortReference$: ReplaySubject = new ReplaySubject(1);\n\n @Output() private readonly selectedDigit: EventEmitter = new EventEmitter();\n\n private readonly scrolledIndex$: BehaviorSubject = new BehaviorSubject(0);\n public readonly selectedDigit$: BehaviorSubject = new BehaviorSubject(null);\n\n private readonly subscription: Subscription = new Subscription();\n\n constructor(private readonly timePickerStateService: TimePickerStateService) {}\n\n @HostListener('wheel', ['$event'])\n @HostListener('touchstart', ['$event'])\n public windowEventsHandler(event: Event): void {\n event.stopPropagation();\n }\n\n public ngOnInit(): void {\n this.subscription.add(this.handleViewPortScrolledIndexChanges()).add(this.handleChosenDigitChanges());\n }\n\n public ngAfterContentInit(): void {\n this.viewPortReference$.next(this.viewPort);\n }\n\n public ngOnChanges(changes: ComponentChanges): void {\n this.processDigitsChange(changes?.digits);\n this.processChosenDigitChange(changes?.chosenDigit);\n }\n\n public ngOnDestroy(): void {\n this.subscription.unsubscribe();\n }\n\n public readonly trackByItem: TrackByFunction = (index: number, item: number): string => `${index}-${item}`;\n\n public selectDigit(digit: number, index: number): void {\n this.viewPort.scrollToIndex(index, 'smooth');\n this.selectedDigit$.next(digit);\n this.selectedDigit.emit(digit);\n }\n\n private processDigitsChange(change: ComponentChange): void {\n const updatedValue: number[] | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n\n this.digits$.next([...updatedValue, ...updatedValue]);\n this.viewPort.scrollToIndex(updatedValue.length);\n }\n\n private processChosenDigitChange(change: ComponentChange): void {\n const updatedValue: number | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n this.selectedDigit$.next(updatedValue);\n }\n\n private handleChosenDigitChanges(): Subscription {\n return this.selectedDigit$\n .pipe(\n filterNotNil(),\n filter((digit: number) => digit > 0),\n debounceTime(300)\n )\n .subscribe((selectedIndex: number) => {\n const digitsSize: number = this.digits.length;\n const resultScrolledIndex: number = selectedIndex > digitsSize / 2 ? selectedIndex : digitsSize + selectedIndex;\n this.viewPort.scrollToIndex(resultScrolledIndex, 'smooth');\n });\n }\n\n /**\n * @description\n * Infinite loop scrolling function using virtual-scroll. Initially, the base array consists\n * of two default arrays. The selected item is the middle one. If we scroll down,\n * add array. As soon as the first array went out of visible area, then we remove it.\n * When we scroll up, the logic is similar.\n */\n private handleViewPortScrolledIndexChanges(): Subscription {\n return this.selectedDigit$\n .pipe(switchMap(() => this.viewPortReference$))\n .pipe(\n switchMap((viewPort: CdkVirtualScrollViewport) => viewPort.scrolledIndexChange),\n withLatestFrom(this.scrolledIndex$)\n )\n .subscribe(([scrolledIndex, prevScrolledIndex]: [number, number]) => {\n const scrollDiff: number = Math.abs(scrolledIndex - prevScrolledIndex);\n\n this.scrolledIndex$.next(scrolledIndex);\n\n const viewPortSize: number = this.viewPort.getViewportSize();\n const offset: number = this.viewPort.measureScrollOffset();\n const total: number = this.digits.length;\n const scrollingOffset: number = total * this.itemSizePx + offset;\n\n const visibleItems: number = Math.ceil(viewPortSize / this.itemSizePx);\n\n const digitsBaseSize: number = total * 2;\n\n if (scrolledIndex === 0) {\n this.viewPort.scrollToOffset(scrollingOffset);\n return;\n }\n\n if (scrolledIndex + visibleItems === digitsBaseSize) {\n const newDigits: number[] = [...this.digits, ...this.digits, ...this.digits];\n this.digits$.next(newDigits);\n return;\n }\n\n const scrolledIndexInScrolledArea: boolean =\n scrolledIndex > digitsBaseSize && scrolledIndex - digitsBaseSize <= scrollDiff;\n\n if (scrolledIndex === digitsBaseSize || scrolledIndexInScrolledArea) {\n this.digits$.next([...this.digits, ...this.digits]);\n this.viewPort.scrollToIndex(total);\n return;\n }\n });\n }\n}\n","\n \n {{ digit | timeDigitFormat }}\n \n\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ComponentChanges, ComponentChange } from '@bimeister/pupakit.common';\nimport { isNil } from '@bimeister/utilities';\nimport { BehaviorSubject } from 'rxjs';\nimport { TimePickerStateService } from '../../services/time-picker-state.service';\n\n@Component({\n selector: 'pupa-time-picker-simple',\n templateUrl: './time-picker-simple.component.html',\n styleUrls: ['./time-picker-simple.component.scss'],\n encapsulation: ViewEncapsulation.Emulated,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TimePickerSimpleComponent implements OnChanges {\n @Input() public readonly withSeconds: boolean = false;\n public readonly withSeconds$: BehaviorSubject = new BehaviorSubject(false);\n\n @Input() public readonly withGradient: boolean = false;\n public readonly withGradient$: BehaviorSubject = new BehaviorSubject(false);\n\n @Input() public readonly chosenHours: number = null;\n public readonly chosenHours$: BehaviorSubject = new BehaviorSubject(null);\n\n @Input() public readonly chosenMinutes: number = null;\n public readonly chosenMinutes$: BehaviorSubject = new BehaviorSubject(null);\n\n @Input() public readonly chosenSeconds: number = null;\n public readonly chosenSeconds$: BehaviorSubject = new BehaviorSubject(null);\n\n public readonly hours: number[] = this.timePickerStateService.hours;\n public readonly minutes: number[] = this.timePickerStateService.minutes;\n public readonly seconds: number[] = this.timePickerStateService.seconds;\n\n public readonly itemSizePx: number = this.timePickerStateService.itemSizePx;\n\n @Output() private readonly selectedHours: EventEmitter = new EventEmitter();\n @Output() private readonly selectedMinutes: EventEmitter = new EventEmitter();\n @Output() private readonly selectedSeconds: EventEmitter = new EventEmitter();\n\n constructor(private readonly timePickerStateService: TimePickerStateService) {}\n\n public ngOnChanges(changes: ComponentChanges): void {\n this.processWithSecondsChange(changes?.withSeconds);\n this.processWithGradientChange(changes?.withGradient);\n\n this.processChosenHoursChange(changes?.chosenHours);\n this.processChosenMinutesChange(changes?.chosenMinutes);\n this.processChosenSecondsChange(changes?.chosenSeconds);\n }\n\n public selectHours(hour: number): void {\n this.selectedHours.emit(hour);\n }\n\n public selectMinutes(minute: number): void {\n this.selectedMinutes.emit(minute);\n }\n\n public selectSeconds(second: number): void {\n this.selectedSeconds.emit(second);\n }\n\n private processWithSecondsChange(change: ComponentChange): void {\n const updatedValue: boolean | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n this.withSeconds$.next(updatedValue);\n }\n\n private processWithGradientChange(change: ComponentChange): void {\n const updatedValue: boolean | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n this.withGradient$.next(updatedValue);\n }\n\n private processChosenHoursChange(change: ComponentChange): void {\n const updatedValue: number | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n this.chosenHours$.next(updatedValue);\n }\n\n private processChosenMinutesChange(change: ComponentChange): void {\n const updatedValue: number | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n this.chosenMinutes$.next(updatedValue);\n }\n\n private processChosenSecondsChange(change: ComponentChange): void {\n const updatedValue: number | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n this.chosenSeconds$.next(updatedValue);\n }\n}\n","\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ComponentChange, ComponentChanges } from '@bimeister/pupakit.common';\nimport { isNil } from '@bimeister/utilities';\nimport { BehaviorSubject, Observable } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { dateClearTime } from '../../../../declarations/functions/date-clear-time.function';\nimport { isDate } from '../../../../declarations/functions/is-date.function';\nimport { sanitizeDate } from '../../../../declarations/functions/sanitize-date.function';\nimport { DatePickerStateService } from '../../services/date-picker-state.service';\n\nconst DEFAULT_CURRENT_DATE: Date = dateClearTime(new Date());\n\n@Component({\n selector: 'pupa-date-picker-simple-time',\n templateUrl: './date-picker-simple-time.component.html',\n styleUrls: ['./date-picker-simple-time.component.scss'],\n encapsulation: ViewEncapsulation.Emulated,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DatePickerSimpleTimeComponent implements OnChanges {\n @Input() public baseDate: Date = DEFAULT_CURRENT_DATE;\n public readonly baseDate$: BehaviorSubject = new BehaviorSubject(DEFAULT_CURRENT_DATE);\n\n public readonly hours$: BehaviorSubject = this.datePickerStateService.hours$;\n public readonly minutes$: BehaviorSubject = this.datePickerStateService.minutes$;\n public readonly seconds$: BehaviorSubject = this.datePickerStateService.seconds$;\n\n @Output() private readonly selectedHours: EventEmitter = new EventEmitter();\n @Output() private readonly selectedMinutes: EventEmitter = new EventEmitter();\n @Output() private readonly selectedSeconds: EventEmitter = new EventEmitter();\n\n public readonly withSeconds$: BehaviorSubject = this.datePickerStateService.withSeconds$;\n\n public readonly baseDateNextMont$: Observable = this.baseDate$.pipe(\n map((baseDate: Date) => {\n const currentMonth: number = baseDate.getMonth();\n const nextMonth: number = currentMonth + 1;\n const currentYear: number = baseDate.getFullYear();\n return dateClearTime(new Date(currentYear, nextMonth, 1));\n })\n );\n\n constructor(private readonly datePickerStateService: DatePickerStateService) {}\n\n public ngOnChanges(changes: ComponentChanges): void {\n this.processBaseDateChange(changes?.baseDate);\n }\n\n public selectHours(hour: number): void {\n this.selectedHours.emit(hour);\n }\n\n public selectMinutes(minute: number): void {\n this.selectedMinutes.emit(minute);\n }\n\n public selectSeconds(second: number): void {\n this.selectedSeconds.emit(second);\n }\n\n private processBaseDateChange(change: ComponentChange): void {\n const updatedValue: Date | undefined = change?.currentValue;\n\n if (isNil(updatedValue) || !isDate(updatedValue)) {\n return;\n }\n const sanitizedDate: Date = sanitizeDate(updatedValue);\n const sanitizedDateWithClearedTime: Date = dateClearTime(sanitizedDate);\n this.baseDate$.next(sanitizedDateWithClearedTime);\n }\n}\n","\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n HostListener,\n Input,\n OnChanges,\n OnDestroy,\n Output,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ComponentChange, ComponentChanges } from '@bimeister/pupakit.common';\nimport { filterFalsy, filterNotNil, filterTruthy, isEqual, isNil } from '@bimeister/utilities';\nimport { BehaviorSubject, Observable, Subscription } from 'rxjs';\nimport { distinctUntilChanged, filter, map, skip, switchMap } from 'rxjs/operators';\nimport { DatePickerPreviewMode } from '../../../../declarations/types/date-picker-preview-mode.type';\nimport { DatePickerSelectionMode } from '../../../../declarations/types/date-picker-selection-mode.type';\nimport { dateClearTime } from '../../../../declarations/functions/date-clear-time.function';\nimport { isDate } from '../../../../declarations/functions/is-date.function';\nimport { sanitizeDate } from '../../../../declarations/functions/sanitize-date.function';\nimport { DatePickerStateService } from '../../services/date-picker-state.service';\n\nconst VALID_DATES_COUNT: number = 2;\nconst DEFAULT_CURRENT_DATE_WITH_CLEARED_TIME: Date = dateClearTime(new Date());\n\n@Component({\n selector: 'pupa-date-picker',\n templateUrl: './date-picker.component.html',\n styleUrls: ['./date-picker.component.scss'],\n providers: [DatePickerStateService],\n encapsulation: ViewEncapsulation.Emulated,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DatePickerComponent implements OnChanges, OnDestroy {\n public readonly baseDate$: BehaviorSubject = new BehaviorSubject(DEFAULT_CURRENT_DATE_WITH_CLEARED_TIME);\n\n @Input() public selectionMode: DatePickerSelectionMode = 'range';\n private readonly selectionMode$: BehaviorSubject =\n this.datePickerStateService.selectionMode$;\n\n @Input() public readonly selectedDate: Date;\n public readonly selectedDate$: BehaviorSubject = this.datePickerStateService.selectedDate$;\n\n @Input() public readonly selectedRange: Date[];\n public readonly selectedRange$: BehaviorSubject = this.datePickerStateService.selectedRange$;\n\n @Input() public readonly previewMode: DatePickerPreviewMode;\n public readonly previewMode$: BehaviorSubject = this.datePickerStateService.previewMode$;\n\n @Input() public readonly withSeconds: boolean = false;\n public readonly withSeconds$: BehaviorSubject = this.datePickerStateService.withSeconds$;\n\n @Input() public readonly hours: number = null;\n public readonly hours$: BehaviorSubject = this.datePickerStateService.hours$;\n\n @Input() public readonly minutes: number = null;\n public readonly minutes$: BehaviorSubject = this.datePickerStateService.minutes$;\n\n @Input() public readonly seconds: number = null;\n public readonly seconds$: BehaviorSubject = this.datePickerStateService.seconds$;\n\n @Input() public readonly isBackDating: boolean = true;\n public readonly isBackDating$: BehaviorSubject = this.datePickerStateService.isBackDating$;\n\n @Input() public readonly availableEndDate: Date | number = Infinity;\n public readonly availableEndDate$: BehaviorSubject = this.datePickerStateService.availableEndDate$;\n\n @Output() public readonly date: EventEmitter = new EventEmitter();\n @Output() public readonly range: EventEmitter<[Date, Date]> = new EventEmitter<[Date, Date]>();\n\n @Output() private readonly selectedHours: EventEmitter = new EventEmitter();\n @Output() private readonly selectedMinutes: EventEmitter = new EventEmitter();\n @Output() private readonly selectedSeconds: EventEmitter = new EventEmitter();\n\n public readonly isSelectionModeDate$: Observable = this.datePickerStateService.isSelectionModeDate$;\n public readonly hoveredDate$: BehaviorSubject = this.datePickerStateService.hoveredDate$;\n\n private readonly subscription: Subscription = new Subscription();\n constructor(private readonly datePickerStateService: DatePickerStateService) {\n this.subscription.add(this.handleSelectedDateForEmitting()).add(this.handleSelectedRangeForEmitting());\n }\n\n public ngOnChanges(changes: ComponentChanges): void {\n this.processSelectionModeChange(changes?.selectionMode);\n this.processSelectedDateChange(changes?.selectedDate);\n this.processSelectedRangeChange(changes?.selectedRange);\n this.processPreviewModeChange(changes?.previewMode);\n this.processWithSecondsChange(changes?.withSeconds);\n this.processHoursChange(changes?.hours);\n this.processMinutesChange(changes?.minutes);\n this.processSecondsChange(changes?.seconds);\n this.processIsBackDatingChange(changes?.isBackDating);\n this.processAvailableEndDateChange(changes?.availableEndDate);\n }\n\n public ngOnDestroy(): void {\n this.subscription.unsubscribe();\n }\n\n @HostListener('mousedown', ['$event'])\n @HostListener('mousemove', ['$event'])\n @HostListener('touchstart', ['$event'])\n public mouseDownAndTouchStartHandler(event: Event): void {\n event.stopPropagation();\n }\n\n @HostListener('window:mousemove')\n @HostListener('window:click')\n @HostListener('window:touchstart', ['$event'])\n public processWindowClick(): void {\n this.hoveredDate$.next(null);\n }\n\n public selectHours(hour: number): void {\n this.selectedHours.emit(hour);\n }\n\n public selectMinutes(minute: number): void {\n this.selectedMinutes.emit(minute);\n }\n\n public selectSeconds(second: number): void {\n this.selectedSeconds.emit(second);\n }\n\n private processSelectionModeChange(change: ComponentChange): void {\n const updatedValue: DatePickerSelectionMode | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n\n this.selectionMode$.next(updatedValue);\n }\n\n private processPreviewModeChange(change: ComponentChange): void {\n const updatedValue: DatePickerPreviewMode | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n\n this.previewMode$.next(updatedValue);\n }\n\n private processWithSecondsChange(change: ComponentChange): void {\n const updatedValue: boolean | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n\n this.withSeconds$.next(updatedValue);\n }\n\n private processHoursChange(change: ComponentChange): void {\n const updatedValue: number | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n this.hours$.next(updatedValue);\n }\n\n private processMinutesChange(change: ComponentChange): void {\n const updatedValue: number | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n this.minutes$.next(updatedValue);\n }\n\n private processSecondsChange(change: ComponentChange): void {\n const updatedValue: number | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n this.seconds$.next(updatedValue);\n }\n\n private processIsBackDatingChange(change: ComponentChange): void {\n const updatedValue: boolean | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n this.isBackDating$.next(updatedValue);\n }\n\n private processAvailableEndDateChange(change: ComponentChange): void {\n const updatedValue: Date | number | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n this.availableEndDate$.next(updatedValue);\n }\n\n private processSelectedDateChange(change: ComponentChange): void {\n const updatedValue: Date | undefined = change?.currentValue;\n\n if (!isDate(updatedValue)) {\n this.selectedDate$.next(null);\n return;\n }\n\n const sanitizedDate: Date = sanitizeDate(updatedValue);\n const sanitizedDateWithClearedTime: Date = dateClearTime(sanitizedDate);\n this.selectedDate$.next(sanitizedDateWithClearedTime);\n this.baseDate$.next(sanitizedDateWithClearedTime);\n }\n\n private processSelectedRangeChange(change: ComponentChange): void {\n const updatedValue: Date[] | undefined = change?.currentValue;\n\n const isNullValues: boolean = updatedValue?.every((value: Date) => isNil(value));\n if (isNullValues) {\n this.selectedRange$.next([]);\n return;\n }\n\n const parsedArray: Date[] = String(updatedValue)\n .split(',')\n .map((arrayItem: string) => new Date(Date.parse(arrayItem)))\n .filter((rangeDate: Date) => isDate(rangeDate));\n if (!Array.isArray(parsedArray)) {\n return;\n }\n\n const sanitizedRange: Date[] = parsedArray\n .filter((rangeDate: Date) => isDate(rangeDate))\n .map((rangeDate: Date) => dateClearTime(rangeDate));\n if (Object.is(sanitizedRange.length, 0)) {\n return;\n }\n\n this.selectedRange$.next(sanitizedRange);\n this.baseDate$.next(sanitizedRange[0]);\n }\n\n private handleSelectedDateForEmitting(): Subscription {\n return this.isSelectionModeDate$\n .pipe(\n filterNotNil(),\n filterTruthy(),\n switchMap(() => this.selectedDate$),\n // this.date should emit values on user selection only.\n // The first emitted value into this.selectedDate$ is BehaviorSubject's default value (null).\n // The second emitted value into this.selectedDate$ is current value from the pupa-input-date control.\n // Subsequent emitted values are those that the user has manually selected.\n skip(2),\n distinctUntilChanged(this.datePickerStateService.isSameDate),\n filterNotNil()\n )\n .subscribe((selectedDate: Date) => this.date.emit(selectedDate));\n }\n\n private handleSelectedRangeForEmitting(): Subscription {\n return this.isSelectionModeDate$\n .pipe(\n filterNotNil(),\n filterFalsy(),\n switchMap(() => this.selectedRange$),\n map((range: [Date, Date]) => {\n const sortFunction: (dateA: Date, dateB: Date) => number = (dateA: Date, dateB: Date) =>\n dateA.valueOf() - dateB.valueOf();\n return [...range].sort(sortFunction);\n }),\n distinctUntilChanged((previousValue: Date[], currentValue: Date[]) => isEqual(previousValue, currentValue)),\n filter(\n (selectedRangeDates: Date[]) =>\n Array.isArray(selectedRangeDates) && Object.is(selectedRangeDates.length, VALID_DATES_COUNT)\n )\n )\n .subscribe((selectedRange: [Date, Date]) => this.range.emit(selectedRange));\n }\n}\n","\n \n \n \n\n\n\n \n\n\n\n \n\n\n\n \n\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n HostListener,\n Input,\n OnChanges,\n Output,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ComponentChange, ComponentChanges } from '@bimeister/pupakit.common';\nimport { isNil } from '@bimeister/utilities';\nimport { BehaviorSubject } from 'rxjs';\nimport { TimePickerStateService } from '../../services/time-picker-state.service';\n\n@Component({\n selector: 'pupa-time-picker',\n templateUrl: './time-picker.component.html',\n styleUrls: ['./time-picker.component.scss'],\n providers: [TimePickerStateService],\n encapsulation: ViewEncapsulation.Emulated,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TimePickerComponent implements OnChanges {\n @Input() public readonly withSeconds: boolean = false;\n public readonly withSeconds$: BehaviorSubject = new BehaviorSubject(false);\n\n @Input() public readonly hours: number = null;\n public readonly hours$: BehaviorSubject = new BehaviorSubject(null);\n\n @Input() public readonly minutes: number = null;\n public readonly minutes$: BehaviorSubject = new BehaviorSubject(null);\n\n @Input() public readonly seconds: number = null;\n public readonly seconds$: BehaviorSubject = new BehaviorSubject(null);\n\n @Output() private readonly selectedHours: EventEmitter = new EventEmitter();\n @Output() private readonly selectedMinutes: EventEmitter = new EventEmitter();\n @Output() private readonly selectedSeconds: EventEmitter = new EventEmitter();\n\n public ngOnChanges(changes: ComponentChanges): void {\n this.processWithSecondsChange(changes?.withSeconds);\n this.processHoursChange(changes?.hours);\n this.processMinutesChange(changes?.minutes);\n this.processSecondsChange(changes?.seconds);\n }\n\n @HostListener('click', ['$event'])\n @HostListener('mousedown', ['$event'])\n @HostListener('mousemove', ['$event'])\n @HostListener('touchstart', ['$event'])\n public mouseDownAndTouchStartHandler(event: Event): void {\n event.stopPropagation();\n }\n\n public selectHours(hour: number): void {\n this.selectedHours.emit(hour);\n }\n\n public selectMinutes(minute: number): void {\n this.selectedMinutes.emit(minute);\n }\n\n public selectSeconds(second: number): void {\n this.selectedSeconds.emit(second);\n }\n\n private processWithSecondsChange(change: ComponentChange): void {\n const updatedValue: boolean | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n this.withSeconds$.next(updatedValue);\n }\n\n private processHoursChange(change: ComponentChange): void {\n const updatedValue: number | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n this.hours$.next(updatedValue);\n }\n\n private processMinutesChange(change: ComponentChange): void {\n const updatedValue: number | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n this.minutes$.next(updatedValue);\n }\n\n private processSecondsChange(change: ComponentChange): void {\n const updatedValue: number | undefined = change?.currentValue;\n\n if (isNil(updatedValue)) {\n return;\n }\n this.seconds$.next(updatedValue);\n }\n}\n","\n","import { ScrollingModule } from '@angular/cdk/scrolling';\nimport { CommonModule } from '@angular/common';\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';\nimport { PupaPipesModule } from '@bimeister/pupakit.common';\nimport { PupaIconsModule, iosArrowBackIcon, iosArrowForwardIcon } from '@bimeister/pupakit.icons';\nimport { DatePickerDoubleComponent } from './components/date-picker-double/date-picker-double.component';\nimport { DatePickerMonthsComponent } from './components/date-picker-months/date-picker-months.component';\nimport { DatePickerSimpleTimeComponent } from './components/date-picker-simple-time/date-picker-simple-time.component';\nimport { DatePickerSimpleComponent } from './components/date-picker-simple/date-picker-simple.component';\nimport { DatePickerYearsComponent } from './components/date-picker-years/date-picker-years.component';\nimport { DatePickerComponent } from './components/date-picker/date-picker.component';\nimport { TimePickerDigitsComponent } from './components/time-picker-digits/time-picker-digits.component';\nimport { TimePickerSimpleComponent } from './components/time-picker-simple/time-picker-simple.component';\nimport { TimePickerComponent } from './components/time-picker/time-picker.component';\n\nconst EXPORTS: any[] = [DatePickerComponent, TimePickerComponent];\n\nconst DECLARATIONS: any[] = [\n DatePickerComponent,\n DatePickerSimpleComponent,\n DatePickerDoubleComponent,\n DatePickerYearsComponent,\n DatePickerMonthsComponent,\n TimePickerComponent,\n TimePickerSimpleComponent,\n TimePickerDigitsComponent,\n DatePickerSimpleTimeComponent,\n];\n\n@NgModule({\n declarations: [...DECLARATIONS],\n imports: [\n CommonModule,\n ScrollingModule,\n PupaPipesModule,\n PupaIconsModule.forFeature([iosArrowBackIcon, iosArrowForwardIcon]),\n ],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n exports: [...EXPORTS],\n})\nexport class PupaDateTimePickerModule {}\n","import { Injectable } from '@angular/core';\nimport { BehaviorSubject, Observable } from 'rxjs';\nimport { map, tap } from 'rxjs/operators';\nimport { DayOfWeek } from '../../../declarations/enums/day-of-week.enum';\n\n@Injectable()\nexport class DaySelectorStateService {\n private readonly daySelectionStateMap: Map = new Map([\n [DayOfWeek.Monday, false],\n [DayOfWeek.Tuesday, false],\n [DayOfWeek.Wednesday, false],\n [DayOfWeek.Thursday, false],\n [DayOfWeek.Friday, false],\n [DayOfWeek.Saturday, false],\n [DayOfWeek.Sunday, false],\n ]);\n\n private readonly daysWithSelectionStateChanged$: BehaviorSubject = new BehaviorSubject([]);\n\n public readonly isDisabled$: BehaviorSubject = new BehaviorSubject(false);\n public readonly daysOfWeek$: Observable> = this.daysWithSelectionStateChanged$.pipe(\n tap((selectionChangedDays: DayOfWeek[]) => {\n selectionChangedDays.forEach((day: DayOfWeek) => {\n this.daySelectionStateMap.set(day, !this.daySelectionStateMap.get(day));\n });\n }),\n map(() => this.daySelectionStateMap)\n );\n\n public set disabled(isDisabled: boolean) {\n this.isDisabled$.next(isDisabled);\n }\n\n public changeDaysSelectionState(days: DayOfWeek[]): void {\n this.daysWithSelectionStateChanged$.next(days);\n }\n}\n","import { DayOfWeek } from '../enums/day-of-week.enum';\nimport { DaySelectorConfig } from '../interfaces/day-selector-config.interface';\n\nexport const DEFAULT_DAY_SELECTOR_CONFIG: DaySelectorConfig = {\n translates: {\n en: {\n [DayOfWeek.Monday]: 'Mo',\n [DayOfWeek.Tuesday]: 'Tu',\n [DayOfWeek.Wednesday]: 'We',\n [DayOfWeek.Thursday]: 'Th',\n [DayOfWeek.Friday]: 'Fr',\n [DayOfWeek.Saturday]: 'Sa',\n [DayOfWeek.Sunday]: 'Su',\n },\n },\n};\n","import { InjectionToken } from '@angular/core';\nimport { DaySelectorConfig } from '../../declarations/interfaces/day-selector-config.interface';\n\nexport const DAY_SELECTOR_CONFIG_TOKEN: InjectionToken = new InjectionToken(\n 'DAY_SELECTOR_CONFIG_TOKEN'\n);\n","import { Inject, Injectable, Optional } from '@angular/core';\nimport { isNil } from '@bimeister/utilities';\nimport { BehaviorSubject, Observable } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { DEFAULT_LOCALE } from '@bimeister/pupakit.common';\nimport { DaySelectorConfig } from '../../../declarations/interfaces/day-selector-config.interface';\nimport { DayOfWeek } from '../../../declarations/enums/day-of-week.enum';\nimport { DEFAULT_DAY_SELECTOR_CONFIG } from '../../../declarations/constants/default-day-selector-config.const';\nimport { DAY_SELECTOR_CONFIG_TOKEN } from '../../../declarations/tokens/day-selector-config.token';\n\n@Injectable()\nexport class LocaleDayFormatterService {\n private readonly translates: Record>;\n\n private readonly currentLocale$: BehaviorSubject = new BehaviorSubject(DEFAULT_LOCALE);\n\n public readonly localeNames$: Observable> = this.currentLocale$.pipe(\n map((locale: string) => this.translates[locale])\n );\n\n constructor(@Optional() @Inject(DAY_SELECTOR_CONFIG_TOKEN) daySelectorConfig?: DaySelectorConfig) {\n const config: DaySelectorConfig = !isNil(daySelectorConfig) ? daySelectorConfig : DEFAULT_DAY_SELECTOR_CONFIG;\n this.translates = config.translates;\n }\n\n public set locale(value: string) {\n if (isNil(this.translates[value])) throw new Error('No translates for current locale');\n\n this.currentLocale$.next(value);\n }\n}\n","import {\n Component,\n ViewEncapsulation,\n ChangeDetectionStrategy,\n Input,\n Output,\n EventEmitter,\n ElementRef,\n OnChanges,\n SimpleChanges,\n Renderer2,\n SimpleChange,\n} from '@angular/core';\nimport { DaySelectorSize } from '../../../../declarations/types/day-selector-size.type';\nimport { isNil } from '@bimeister/utilities';\n\n@Component({\n selector: 'pupa-day-selector-item',\n templateUrl: './day-selector-item.component.html',\n styleUrls: ['./day-selector-item.component.scss'],\n encapsulation: ViewEncapsulation.Emulated,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DaySelectorItemComponent implements OnChanges {\n @Input() public name: string;\n @Input() public size: DaySelectorSize;\n\n @Input() public selected: boolean = false;\n @Output() public readonly selectedStateChange: EventEmitter = new EventEmitter();\n\n @Input() public disabled: boolean = false;\n\n constructor(private readonly hostElement: ElementRef, private readonly renderer: Renderer2) {}\n\n public ngOnChanges(changes: SimpleChanges): void {\n const size: SimpleChange = changes.size;\n if (!isNil(size) && size.previousValue !== size.currentValue) {\n const element: HTMLElement = this.hostElement.nativeElement;\n this.renderer.removeClass(element, size.previousValue);\n this.renderer.addClass(element, size.currentValue);\n }\n }\n\n public onMouseDown(event: MouseEvent): void {\n event.preventDefault();\n if (this.disabled) {\n return;\n }\n this.selectedStateChange.next();\n }\n\n public onKeyDown(event: KeyboardEvent): void {\n const ENTER_EVENT_CODE: string = 'Enter';\n if (this.disabled || event.code !== ENTER_EVENT_CODE) {\n return;\n }\n this.selectedStateChange.next();\n }\n}\n","\n \n {{ name }}\n
\n\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { combineLatest, Observable } from 'rxjs';\nimport { isNil } from '@bimeister/utilities';\nimport { isEmpty } from '@bimeister/utilities/common';\nimport { map, tap } from 'rxjs/operators';\nimport { DaySelectorStateService } from '../../services/day-selector-state.service';\nimport { LocaleDayFormatterService } from '../../services/locale-day-formatter.service';\nimport { DaySelectorSize } from '../../../../declarations/types/day-selector-size.type';\nimport { DaySelectorItem } from '../../../../declarations/interfaces/day-selector-item.interface';\nimport { OnChangeCallback } from '../../../../declarations/types/on-change-callback.type';\nimport { OnTouchedCallback } from '../../../../declarations/types/on-touched-callback.type';\nimport { DayOfWeek } from '../../../../declarations/enums/day-of-week.enum';\n\n@Component({\n selector: 'pupa-day-selector',\n templateUrl: './day-selector.component.html',\n styleUrls: ['./day-selector.component.scss'],\n encapsulation: ViewEncapsulation.Emulated,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [DaySelectorStateService, LocaleDayFormatterService],\n})\nexport class DaySelectorComponent implements ControlValueAccessor {\n @Input() public size: DaySelectorSize = 'large';\n\n @Input() public set locale(value: string) {\n this.localeDateFormatter.locale = value;\n }\n\n public readonly isDisabled$: Observable = this.daySelectorState.isDisabled$;\n public readonly selectorItems$: Observable = combineLatest([\n this.daySelectorState.daysOfWeek$,\n this.localeDateFormatter.localeNames$,\n ]).pipe(\n map(([daysOfWeek, localeNames]: [Map, Record]) => {\n const selectorItems: DaySelectorItem[] = [];\n daysOfWeek.forEach((isSelected: boolean, day: DayOfWeek) => {\n selectorItems.push({\n isSelected,\n key: day,\n localeName: localeNames[day],\n });\n });\n return selectorItems;\n }),\n tap(this.handleSelectedDaysChanged.bind(this))\n );\n\n private onChangeCallback: OnChangeCallback;\n private onTouchedCallback: OnTouchedCallback;\n\n constructor(\n private readonly daySelectorState: DaySelectorStateService,\n private readonly localeDateFormatter: LocaleDayFormatterService,\n ngControl: NgControl\n ) {\n if (!isNil(ngControl)) {\n ngControl.valueAccessor = this;\n }\n }\n\n public changeDaySelectionState(day: DayOfWeek): void {\n this.daySelectorState.changeDaysSelectionState([day]);\n }\n\n public writeValue(days: DayOfWeek[]): void {\n this.daySelectorState.changeDaysSelectionState(isEmpty(days) ? [] : days);\n }\n\n public registerOnChange(onChangeCallback: OnChangeCallback): void {\n this.onChangeCallback = onChangeCallback;\n }\n\n public registerOnTouched(onTouchedCallback: OnTouchedCallback): void {\n this.onTouchedCallback = onTouchedCallback;\n }\n\n public setDisabledState(isDisabled: boolean): void {\n this.daySelectorState.disabled = isDisabled;\n }\n\n public trackByFunc(_: number, item: DaySelectorItem): DayOfWeek {\n return item.key;\n }\n\n private handleSelectedDaysChanged(selectorItems: DaySelectorItem[]): void {\n if (typeof this.onTouchedCallback === 'function') {\n this.onTouchedCallback();\n }\n\n if (typeof this.onChangeCallback === 'function') {\n const selectedDays: DayOfWeek[] = selectorItems\n .filter((item: DaySelectorItem) => item.isSelected)\n .map((item: DaySelectorItem) => item.key);\n\n this.onChangeCallback(selectedDays);\n }\n }\n}\n","\n","import { NgModule } from '@angular/core';\nimport { DaySelectorComponent } from './components/day-selector/day-selector.component';\nimport { DaySelectorItemComponent } from './components/day-selector-item/day-selector-item.component';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\n\n@NgModule({\n declarations: [DaySelectorComponent, DaySelectorItemComponent],\n imports: [CommonModule, FormsModule, ReactiveFormsModule],\n exports: [DaySelectorComponent],\n})\nexport class PupaDaySelectorModule {}\n","import { Overlay, OverlayConfig, OverlayRef, PositionStrategy } from '@angular/cdk/overlay';\nimport { CdkPortal } from '@angular/cdk/portal';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostListener,\n Input,\n OnDestroy,\n ViewEncapsulation,\n ViewRef,\n} from '@angular/core';\nimport { isNil, VOID } from '@bimeister/utilities';\nimport { BehaviorSubject, Observable, of } from 'rxjs';\nimport { switchMap, take } from 'rxjs/operators';\nimport { DroppableHorizontalPosition } from '../../declarations/types/droppable-horizontal-position.type';\nimport { DroppableVerticalPosition } from '../../declarations/types/droppable-vertical-position.type';\nimport { DroppableWidth } from '../../declarations/types/droppable-width.type';\n\n@Component({\n selector: 'pupa-droppable',\n styleUrls: ['./droppable.component.scss'],\n templateUrl: './droppable.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.Emulated,\n})\nexport class DroppableComponent implements OnDestroy {\n @Input() public closeOnContentClick: boolean = false;\n @Input() public horizontalPosition: DroppableHorizontalPosition = 'start';\n @Input() public verticalPosition: DroppableVerticalPosition = 'bottom';\n @Input() public offsetYPx: number = 10;\n @Input() public viewportMarginPx: number = 15;\n @Input() public hasBackdrop: boolean = false;\n @Input() public widthType: DroppableWidth = 'fit-content';\n\n public triggerRef: ElementRef;\n public contentRef: CdkPortal;\n private overlayRef: OverlayRef;\n private viewRef: ViewRef;\n\n public isOpened: boolean = false;\n public readonly isNativeClick$: BehaviorSubject = new BehaviorSubject(false);\n\n constructor(private readonly overlay: Overlay) {}\n\n public beforeOpen: () => Observable = () => of(VOID);\n public beforeClose: () => Observable = () => of(VOID);\n\n public ngOnDestroy(): void {\n this.close();\n }\n\n @HostListener('click')\n public open(): void {\n if (isNil(this.triggerRef) || isNil(this.contentRef)) {\n return;\n }\n\n this.isNativeClick$.next(true);\n\n this.beforeOpen()\n .pipe(\n take(1),\n switchMap(() => {\n this.overlayRef = this.overlay.create(this.getOverlayConfig());\n this.viewRef = this.overlayRef.attach(this.contentRef);\n\n this.isOpened = true;\n this.viewRef.markForCheck();\n return this.overlayRef.backdropClick();\n })\n )\n .subscribe(() => this.close());\n }\n\n @HostListener('document:wheel')\n @HostListener('document:mousedown')\n @HostListener('document:click')\n public mouseEventsHandler(): void {\n this.isNativeClick$.pipe(take(1)).subscribe((isNativeClick: boolean) => {\n if (isNativeClick) {\n this.isNativeClick$.next(false);\n return;\n }\n\n if (this.hasBackdrop) {\n return;\n }\n\n this.close();\n });\n }\n\n public close(): void {\n if (isNil(this.overlayRef) || isNil(this.viewRef)) {\n return;\n }\n\n this.beforeClose()\n .pipe(take(1))\n .subscribe(() => {\n this.isOpened = false;\n this.viewRef.markForCheck();\n this.overlayRef.dispose();\n });\n }\n\n private getOverlayConfig(): OverlayConfig {\n const positionStrategy: PositionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(this.triggerRef)\n .withPush(true)\n .withViewportMargin(this.viewportMarginPx)\n .withPositions([\n {\n originX: this.horizontalPosition,\n originY: this.verticalPosition,\n overlayX: 'start',\n overlayY: 'top',\n offsetY: this.offsetYPx,\n },\n ]);\n\n return new OverlayConfig({\n positionStrategy,\n hasBackdrop: this.hasBackdrop,\n backdropClass: 'cdk-overlay-transparent-backdrop',\n });\n }\n}\n","\n","import { CdkPortal } from '@angular/cdk/portal';\nimport { AfterViewInit, Directive, Host, ViewChild } from '@angular/core';\nimport { DroppableComponent } from '../../../components/droppable/droppable.component';\n\n@Directive()\nexport abstract class DroppableContent implements AfterViewInit {\n @ViewChild(CdkPortal) public contentRef: CdkPortal;\n\n public get isOpened(): boolean {\n return this.droppable.isOpened;\n }\n\n constructor(@Host() protected readonly droppable: DroppableComponent) {}\n\n public ngAfterViewInit(): void {\n this.droppable.contentRef = this.contentRef;\n }\n\n public mouseDownHandler(event: MouseEvent): void {\n if (!this.droppable.closeOnContentClick) {\n event.stopPropagation();\n }\n }\n\n public mouseWheelHandler(event: WheelEvent): void {\n event.stopPropagation();\n }\n}\n","import { animate, state, style, transition, trigger } from '@angular/animations';\nimport { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\n\nimport { DroppableContent } from '../../declarations/classes/abstract/droppable-content.abstract';\nimport { DroppableWidth } from '../../declarations/types/droppable-width.type';\n\n@Component({\n selector: 'pupa-droppable-content',\n styleUrls: ['./droppable-content.component.scss'],\n templateUrl: './droppable-content.component.html',\n encapsulation: ViewEncapsulation.Emulated,\n changeDetection: ChangeDetectionStrategy.OnPush,\n animations: [\n trigger('openClose', [\n state('open', style({ transform: 'translateY(0)', opacity: 1 })),\n state('closed', style({ transform: 'translateY(-10px)', opacity: 0 })),\n transition('closed => open', [animate('150ms')]),\n ]),\n ],\n})\nexport class DroppableContentComponent extends DroppableContent {\n public get widthType(): DroppableWidth {\n return this.droppable.widthType;\n }\n\n public get widthClassName(): string {\n return `width-${this.widthType}`;\n }\n\n public get triggerWidthPx(): number {\n return this.droppable.triggerRef.nativeElement.getBoundingClientRect().width;\n }\n}\n","\n \n \n \n\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n HostListener,\n Input,\n OnDestroy,\n Renderer2,\n ViewChild,\n} from '@angular/core';\nimport { isNil } from '@bimeister/utilities';\nimport { Observable, Subscription } from 'rxjs';\nimport { DroppableLegacyHorizontalPosition } from '../../declarations/types/droppable-legacy-horizontal-position.type';\n\nconst OFFSET_TOP_PX: number = 4;\n\n@Component({\n selector: 'pupa-droppable-legacy',\n templateUrl: './droppable-legacy.component.html',\n styleUrls: ['./droppable-legacy.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DroppableLegacyComponent implements AfterViewInit, OnDestroy {\n @ViewChild('dropdown', { static: false }) public dropdownRef: ElementRef;\n public get dropdown(): HTMLDivElement | null {\n return !isNil(this.dropdownRef) && !isNil(this.dropdownRef.nativeElement) ? this.dropdownRef.nativeElement : null;\n }\n\n @Input() public anchor: HTMLElement;\n @Input() public positionChange$: Observable;\n @Input() public horizontalPosition: DroppableLegacyHorizontalPosition = 'left';\n @Input() public maxWidth: number = null;\n @Input() public set open(value: boolean) {\n this._open = value;\n globalThis.requestAnimationFrame(() => {\n this.shown = value;\n this.checkPosition();\n });\n }\n public get open(): boolean {\n return this._open;\n }\n\n public shown: boolean = false;\n public topPx: number = 0;\n public leftPx: number = 0;\n\n private readonly subscription: Subscription = new Subscription();\n private anchorOnClickHandlerUnlistener: VoidFunction;\n private _open: boolean = false;\n private isMouseTargetWheel: boolean = false;\n private anchorClientRect: DOMRect;\n private dropdownClientRect: DOMRect;\n\n constructor(protected readonly changeDetectorRef: ChangeDetectorRef, protected readonly renderer: Renderer2) {}\n\n public ngAfterViewInit(): void {\n if (isNil(this.anchor)) {\n return;\n }\n\n this.anchorOnClickHandlerUnlistener = this.renderer.listen(this.anchor, 'click', this.anchorOnClickHandler);\n\n if (!isNil(this.positionChange$)) {\n this.subscription.add(this.positionChange$.subscribe(() => globalThis.requestAnimationFrame(this.checkPosition)));\n }\n this.checkPosition();\n }\n\n public ngOnDestroy(): void {\n if (isNil(this.anchor)) {\n return;\n }\n this.anchorOnClickHandlerUnlistener();\n this.subscription.unsubscribe();\n }\n\n public anchorOnClickHandler = (): void => {\n this.toggle(true);\n };\n\n public toggle(value?: boolean): void {\n this.open = isNil(value) ? !this.open : value;\n this.changeDetectorRef.markForCheck();\n this.checkPosition();\n }\n\n @HostListener('wheel')\n public targetWheelEvent(): void {\n this.isMouseTargetWheel = true;\n }\n\n @HostListener('window:resize')\n @HostListener('window:wheel')\n public close(): void {\n if (!this.open) {\n return;\n }\n\n if (this.isMouseTargetWheel) {\n this.isMouseTargetWheel = false;\n return;\n }\n this.toggle(false);\n }\n\n @HostListener('document:mouseup', ['$event'])\n public clickOutsideCheck(event: MouseEvent): void {\n if (isNil(this.anchor) || isNil(this.dropdown)) {\n return;\n }\n\n const clickedInside: boolean =\n this.anchor.contains(event.target as Node) || this.dropdownRef.nativeElement.contains(event.target as Node);\n\n if (!clickedInside) {\n this.toggle(false);\n }\n }\n\n public readonly checkPosition = (): void => {\n if (isNil(this.anchor) || isNil(this.dropdown)) {\n return;\n }\n\n this.anchorClientRect = this.anchor.getBoundingClientRect();\n this.dropdownClientRect = this.dropdown.getBoundingClientRect();\n\n this.setMaxWidth();\n this.setTopPx();\n this.setLeftPx();\n\n this.changeDetectorRef.markForCheck();\n };\n\n private setMaxWidth(): void {\n if (!isNil(this.maxWidth)) {\n this.renderer.setStyle(this.dropdown, 'maxWidth', `${this.maxWidth}px`);\n return;\n }\n\n this.renderer.setStyle(this.dropdown, 'width', `${this.anchorClientRect.width}px`);\n }\n\n private setTopPx(): void {\n const dropDownBottom: number =\n this.anchorClientRect.top + this.anchorClientRect.height + OFFSET_TOP_PX + this.dropdownClientRect.height;\n\n this.topPx = dropDownBottom < window.innerHeight ? this.getTopVerticalPosition() : this.getBottomVerticalPosition();\n }\n\n private setLeftPx(): void {\n const dropDownRight: number =\n this.anchorClientRect.left + this.anchorClientRect.width + this.dropdownClientRect.width;\n\n switch (this.horizontalPosition) {\n case 'right':\n this.leftPx = this.getRightHorizontalPosition();\n break;\n case 'left':\n default:\n this.leftPx =\n dropDownRight < window.innerWidth ? this.getLeftHorizontalPosition() : this.getRightHorizontalPosition();\n }\n }\n\n private getTopVerticalPosition(): number {\n return this.anchorClientRect.top + this.anchorClientRect.height + OFFSET_TOP_PX;\n }\n\n private getBottomVerticalPosition(): number {\n return this.anchorClientRect.top + this.anchorClientRect.height - this.dropdownClientRect.height;\n }\n\n private getRightHorizontalPosition(): number {\n return this.anchorClientRect.left + this.anchorClientRect.width - this.dropdown.offsetWidth;\n }\n\n private getLeftHorizontalPosition(): number {\n return this.anchorClientRect.left;\n }\n}\n","\n \n\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\nimport { DroppableContent } from '../../declarations/classes/abstract/droppable-content.abstract';\n\n@Component({\n selector: 'pupa-droppable-native-content',\n templateUrl: './droppable-native-content.component.html',\n encapsulation: ViewEncapsulation.Emulated,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DroppableNativeContentComponent extends DroppableContent {}\n","\n \n \n
\n\n","import { Component, ElementRef, Host } from '@angular/core';\n\nimport { DroppableComponent } from '../droppable/droppable.component';\n\n@Component({\n selector: 'pupa-droppable-trigger',\n templateUrl: './droppable-trigger.component.html',\n styleUrls: ['./droppable-trigger.component.scss'],\n})\nexport class DroppableTriggerComponent {\n constructor(\n @Host() private readonly droppable: DroppableComponent,\n private readonly hostRef: ElementRef\n ) {\n this.droppable.triggerRef = this.hostRef;\n }\n}\n","\n","import { OverlayModule } from '@angular/cdk/overlay';\nimport { PortalModule } from '@angular/cdk/portal';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { DroppableContentComponent } from './components/droppable-content/droppable-content.component';\nimport { DroppableLegacyComponent } from './components/droppable-legacy/droppable-legacy.component';\nimport { DroppableNativeContentComponent } from './components/droppable-native-content/droppable-native-content.component';\nimport { DroppableTriggerComponent } from './components/droppable-trigger/droppable-trigger.component';\nimport { DroppableComponent } from './components/droppable/droppable.component';\n\n@NgModule({\n declarations: [\n DroppableLegacyComponent,\n DroppableTriggerComponent,\n DroppableContentComponent,\n DroppableComponent,\n DroppableNativeContentComponent,\n ],\n imports: [CommonModule, OverlayModule, PortalModule],\n exports: [\n DroppableLegacyComponent,\n DroppableTriggerComponent,\n DroppableContentComponent,\n DroppableComponent,\n DroppableNativeContentComponent,\n ],\n})\nexport class PupaDroppableModule {}\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'pupa-form-layout',\n templateUrl: './form-layout.component.html',\n styleUrls: ['./form-layout.component.scss'],\n encapsulation: ViewEncapsulation.Emulated,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FormLayoutComponent {}\n","\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'pupa-form-elements-group',\n templateUrl: './form-elements-group.component.html',\n styleUrls: ['./form-elements-group.component.scss'],\n encapsulation: ViewEncapsulation.Emulated,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FormElementsGroupComponent {}\n","\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'pupa-form-element',\n templateUrl: './form-element.component.html',\n styleUrls: ['./form-element.component.scss'],\n encapsulation: ViewEncapsulation.Emulated,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FormElementComponent {}\n","\n","import { NgModule, Type } from '@angular/core';\nimport { FormLayoutComponent } from './components/form-layout/form-layout.component';\nimport { FormElementsGroupComponent } from './components/form-elements-group/form-elements-group.component';\nimport { FormElementComponent } from './components/form-element/form-element.component';\n\nconst EXPORT_COMPONENTS: Type[] = [FormLayoutComponent, FormElementsGroupComponent, FormElementComponent];\n\n@NgModule({\n declarations: EXPORT_COMPONENTS,\n imports: [],\n exports: EXPORT_COMPONENTS,\n})\nexport class PupaFormLayoutModule {}\n","import { isNil } from '@bimeister/utilities';\nimport { getFormattedTimeDigit } from '@bimeister/pupakit.common';\nimport { ParsedTimeData } from '../interfaces/parsed-time-data.interface';\nimport { ParsedDateData } from '../interfaces/parsed-date-data.interface';\nimport { NumericParsedTimeData } from '../types/numeric-parsed-time-data.type';\n\nexport class InputDateTimeHelper {\n public static getUpdatedValueStringAfterSelectHours(hours: number, inputCurrentValue: string): string {\n const parsedHours: string = getFormattedTimeDigit(hours);\n const { minutes, seconds }: Partial = this.getParsedTimeData(inputCurrentValue);\n\n return `${parsedHours}:${minutes}:${seconds}`;\n }\n\n public static getUpdatedValueStringAfterSelectMinutes(minutes: number, inputCurrentValue: string): string {\n const parsedMinutes: string = getFormattedTimeDigit(minutes);\n const { hours, seconds }: Partial = this.getParsedTimeData(inputCurrentValue);\n\n return `${hours}:${parsedMinutes}:${seconds}`;\n }\n\n public static getUpdatedValueStringAfterSelectSeconds(seconds: number, inputCurrentValue: string): string {\n const parsedSeconds: string = getFormattedTimeDigit(seconds);\n const { hours, minutes }: Partial = this.getParsedTimeData(inputCurrentValue);\n\n return `${hours}:${minutes}:${parsedSeconds}`;\n }\n\n public static getParsedDateData(inputValue: string): ParsedDateData {\n const defaultDateParts: string[] = ['00', '00', '0000'];\n const allowedTimePartsLength: number = defaultDateParts.length;\n\n const convertedDefaultDateParts: string = defaultDateParts.join('.');\n\n const serializedValue: string = isNil(inputValue) ? convertedDefaultDateParts : inputValue;\n const parsedDateParts: string[] = serializedValue.split('.');\n\n const dateParts: string[] = [...parsedDateParts, ...defaultDateParts].slice(0, allowedTimePartsLength);\n\n return { day: dateParts[0], month: dateParts[1], year: dateParts[2] };\n }\n\n public static getParsedNumericTimeData(inputValue: string): NumericParsedTimeData {\n const { hours, minutes, seconds }: ParsedTimeData = InputDateTimeHelper.getParsedTimeData(inputValue);\n\n return {\n hours: Number(hours),\n minutes: Number(minutes),\n seconds: Number(seconds),\n };\n }\n\n public static getParsedTimeData(inputValue: string): ParsedTimeData {\n const defaultTimeParts: string[] = ['00', '00', '00'];\n const allowedTimePartsLength: number = defaultTimeParts.length;\n\n const convertedDefaultTimeParts: string = defaultTimeParts.join(':');\n\n const serializedValue: string = isNil(inputValue) ? convertedDefaultTimeParts : inputValue;\n const parsedTimeParts: string[] = serializedValue\n .split(':')\n .map((timePart: string) => getFormattedTimeDigit(Number(timePart)));\n\n const timeParts: string[] = [...parsedTimeParts, ...defaultTimeParts].slice(0, allowedTimePartsLength);\n\n return { hours: timeParts[0], minutes: timeParts[1], seconds: timeParts[2] };\n }\n}\n","import { FormControlStatus } from '@angular/forms';\n\nconst VALID_STATUSES: FormControlStatus[] = ['VALID', 'PENDING'];\n\nexport const isFormControlValidStatus = (status: FormControlStatus): boolean => VALID_STATUSES.includes(status);\n","import { Directive, OnDestroy, OnInit, Optional } from '@angular/core';\nimport { ControlValueAccessor, FormControlStatus, NgControl } from '@angular/forms';\nimport { filterNotNil, isEmpty, isNil, Nullable, shareReplayWithRefCount } from '@bimeister/utilities';\nimport { BehaviorSubject, combineLatest, Observable, of, Subscription } from 'rxjs';\nimport { delay, distinctUntilChanged, map, startWith, switchMap, take, tap } from 'rxjs/operators';\nimport { isFormControlValidStatus } from '../../functions/is-form-control-valid-status.function';\nimport { OnChangeCallback } from '../../types/on-change-callback.type';\nimport { OnTouchedCallback } from '../../types/on-touched-callback.type';\n\n@Directive()\nexport abstract class InputBaseControlValueAccessor implements ControlValueAccessor, OnDestroy, OnInit {\n protected readonly control$: BehaviorSubject> = new BehaviorSubject(null);\n public readonly value$: BehaviorSubject = new BehaviorSubject(null);\n\n public readonly isDisabled$: BehaviorSubject> = new BehaviorSubject(null);\n public readonly isTouched$: BehaviorSubject> = new BehaviorSubject(null);\n public readonly isFocused$: BehaviorSubject> = new BehaviorSubject(null);\n public readonly isFilled$: BehaviorSubject = new BehaviorSubject(false);\n\n public readonly isValid$: Observable = this.control$.pipe(\n switchMap((control: NgControl) =>\n isNil(control)\n ? of(true)\n : control.statusChanges.pipe(\n startWith(control.status),\n map((status: FormControlStatus) => isFormControlValidStatus(status))\n )\n ),\n distinctUntilChanged(),\n shareReplayWithRefCount()\n );\n\n private readonly onChangeCallback$: BehaviorSubject> = new BehaviorSubject>(\n null\n );\n private readonly onTouchedCallback$: BehaviorSubject = new BehaviorSubject(\n null\n );\n\n protected readonly subscription: Subscription = new Subscription();\n\n constructor(@Optional() protected readonly ngControl: NgControl) {\n if (isNil(ngControl)) {\n return;\n }\n ngControl.valueAccessor = this;\n this.setControlRef(ngControl);\n }\n\n protected abstract setValue(value: T): void;\n\n protected handleChangedValue(onChangeCallback: OnChangeCallback, value: T): void {\n onChangeCallback(value);\n this.setValue(value);\n }\n\n public ngOnInit(): void {\n this.subscription.add(this.processNgControlStatusChangesForHandleIsTouched());\n }\n\n public ngOnDestroy(): void {\n this.subscription.unsubscribe();\n }\n\n public updateValue(updatedValue: T): void {\n this.isTouched$.next(true);\n this.isFilled$.next(!isEmpty(updatedValue));\n\n combineLatest([this.onChangeCallback$, this.onTouchedCallback$])\n .pipe(take(1))\n .subscribe(([onChangeCallback, onTouchedCallback]: [OnChangeCallback, OnTouchedCallback]) => {\n if (typeof onTouchedCallback === 'function') {\n onTouchedCallback();\n }\n\n if (typeof onChangeCallback === 'function') {\n this.handleChangedValue(onChangeCallback, updatedValue);\n }\n });\n }\n\n public writeValue(newValue: T): void {\n this.setValue(newValue);\n }\n\n public registerOnChange(onChange: OnChangeCallback): void {\n this.onChangeCallback$.next(onChange);\n }\n\n public registerOnTouched(onTouched: OnTouchedCallback): void {\n this.onTouchedCallback$.next(onTouched);\n }\n\n public setDisabledState(isDisabled: boolean): void {\n this.processSetDisabledState(isDisabled);\n }\n\n private processSetDisabledState(isDisabled: boolean): void {\n const nextDisabledValue: Nullable = isDisabled ? true : null;\n this.isDisabled$.next(nextDisabledValue);\n }\n\n private setControlRef(control: NgControl): void {\n this.control$.next(control);\n }\n\n private processNgControlStatusChangesForHandleIsTouched(): Subscription {\n return this.control$\n .pipe(\n filterNotNil(),\n switchMap((control: NgControl) =>\n control.statusChanges.pipe(\n delay(0),\n startWith(this.ngControl.touched),\n map(() => this.ngControl.touched),\n tap((isTouched: boolean) => this.isTouched$.next(isTouched))\n )\n )\n )\n .subscribe();\n }\n}\n","import {\n Directive,\n ElementRef,\n EventEmitter,\n HostBinding,\n Input,\n OnChanges,\n Output,\n TemplateRef,\n ViewChild,\n} from '@angular/core';\nimport { ComponentChange, ComponentChanges } from '@bimeister/pupakit.common';\nimport { distinctUntilSerializedChanged, isEmpty, isNil, Nullable } from '@bimeister/utilities';\nimport { BehaviorSubject, combineLatest, Observable } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { isDate } from '../../functions/is-date.function';\nimport { InputSize } from '../../types/input-size.type';\nimport { InputStyleCustomization } from '../../types/input-style-customization.type';\nimport { InputBaseControlValueAccessor } from './input-base-control-value-accessor.abstract';\n\n@Directive()\nexport abstract class InputBase extends InputBaseControlValueAccessor implements OnChanges {\n @HostBinding('attr.pupa-control') public readonly controlAttribute: string = 'input';\n\n @ViewChild('inputElement')\n protected readonly inputElementRef: ElementRef;\n\n @Input() public invalidTooltipHideOnHover: boolean = false;\n @Input() public invalidTooltipDisabled: boolean = false;\n @Input() public invalidTooltip: Nullable = null;\n @Input() public invalidTooltipContentTemplate: Nullable> = null;\n\n @Input() public size: InputSize = 'medium';\n public readonly size$: BehaviorSubject = new BehaviorSubject('medium');\n\n @Input() public placeholder: string = '';\n public readonly placeholder$: BehaviorSubject = new BehaviorSubject('');\n\n @Input() public autocomplete: boolean = false;\n public readonly autocomplete$: BehaviorSubject = new BehaviorSubject(false);\n\n @Input() public withReset: boolean = false;\n public readonly withReset$: BehaviorSubject = new BehaviorSubject(false);\n\n @Input() public isPatched: boolean = false;\n public readonly isPatched$: BehaviorSubject