@brickclay/calendar 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Potentially problematic release.
This version of @brickclay/calendar might be problematic. Click here for more details.
- package/README.md +417 -0
- package/assets/calender/calender.svg +19 -0
- package/assets/calender/chevron-down.svg +10 -0
- package/assets/calender/chevron-left.svg +3 -0
- package/assets/calender/chevron-right.svg +3 -0
- package/assets/calender/chevron-up.svg +10 -0
- package/assets/calender/pagination-left-gray.svg +3 -0
- package/assets/calender/pagination-right-gray.svg +10 -0
- package/assets/calender/timer.svg +4 -0
- package/calendar/calendar.module.d.ts +21 -0
- package/calendar/components/custom-calendar/custom-calendar.component.d.ts +173 -0
- package/calendar/components/scheduled-date-picker/scheduled-date-picker.component.d.ts +78 -0
- package/calendar/components/time-picker/time-picker.component.d.ts +48 -0
- package/calendar/services/calendar-manager.service.d.ts +20 -0
- package/fesm2022/brickclay-calendar.mjs +2421 -0
- package/fesm2022/brickclay-calendar.mjs.map +1 -0
- package/index.d.ts +5 -0
- package/lib/calendar.component.d.ts +36 -0
- package/lib/calendar.service.d.ts +6 -0
- package/package.json +26 -0
- package/public-api.d.ts +7 -0
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
import { EventEmitter, OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
|
|
2
|
+
import { CalendarManagerService } from '../../services/calendar-manager.service';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export interface CalendarRange {
|
|
5
|
+
start: Date;
|
|
6
|
+
end: Date;
|
|
7
|
+
}
|
|
8
|
+
export interface CalendarSelection {
|
|
9
|
+
startDate: Date | null;
|
|
10
|
+
endDate: Date | null;
|
|
11
|
+
selectedDates?: Date[];
|
|
12
|
+
}
|
|
13
|
+
export declare class CustomCalendarComponent implements OnInit, OnDestroy, OnChanges {
|
|
14
|
+
private calendarManager;
|
|
15
|
+
enableTimepicker: boolean;
|
|
16
|
+
autoApply: boolean;
|
|
17
|
+
closeOnAutoApply: boolean;
|
|
18
|
+
showCancel: boolean;
|
|
19
|
+
linkedCalendars: boolean;
|
|
20
|
+
singleDatePicker: boolean;
|
|
21
|
+
showWeekNumbers: boolean;
|
|
22
|
+
showISOWeekNumbers: boolean;
|
|
23
|
+
customRangeDirection: boolean;
|
|
24
|
+
lockStartDate: boolean;
|
|
25
|
+
position: 'center' | 'left' | 'right';
|
|
26
|
+
drop: 'up' | 'down';
|
|
27
|
+
dualCalendar: boolean;
|
|
28
|
+
showRanges: boolean;
|
|
29
|
+
timeFormat: 12 | 24;
|
|
30
|
+
enableSeconds: boolean;
|
|
31
|
+
customRanges?: Record<string, CalendarRange>;
|
|
32
|
+
multiDateSelection: boolean;
|
|
33
|
+
maxDate?: Date;
|
|
34
|
+
minDate?: Date;
|
|
35
|
+
placeholder: string;
|
|
36
|
+
opens: 'left' | 'right' | 'center';
|
|
37
|
+
inline: boolean;
|
|
38
|
+
isDisplayCrossIcon: boolean;
|
|
39
|
+
selected: EventEmitter<CalendarSelection>;
|
|
40
|
+
opened: EventEmitter<void>;
|
|
41
|
+
closed: EventEmitter<void>;
|
|
42
|
+
/**
|
|
43
|
+
* External value passed from parent. If provided, component will select these dates on init / change.
|
|
44
|
+
* Accepts { startDate: Date|null, endDate: Date|null, selectedDates?: Date[] }
|
|
45
|
+
*/
|
|
46
|
+
selectedValue: CalendarSelection | null;
|
|
47
|
+
/** Optional display format for the input value. Uses moment formatting tokens. */
|
|
48
|
+
displayFormat: string;
|
|
49
|
+
show: boolean;
|
|
50
|
+
today: Date;
|
|
51
|
+
month: number;
|
|
52
|
+
year: number;
|
|
53
|
+
calendar: {
|
|
54
|
+
day: number;
|
|
55
|
+
currentMonth: boolean;
|
|
56
|
+
}[][];
|
|
57
|
+
leftMonth: number;
|
|
58
|
+
leftYear: number;
|
|
59
|
+
rightMonth: number;
|
|
60
|
+
rightYear: number;
|
|
61
|
+
leftCalendar: {
|
|
62
|
+
day: number;
|
|
63
|
+
currentMonth: boolean;
|
|
64
|
+
}[][];
|
|
65
|
+
rightCalendar: {
|
|
66
|
+
day: number;
|
|
67
|
+
currentMonth: boolean;
|
|
68
|
+
}[][];
|
|
69
|
+
startDate: Date | null;
|
|
70
|
+
endDate: Date | null;
|
|
71
|
+
selectedDates: Date[];
|
|
72
|
+
disableHighlight: boolean;
|
|
73
|
+
hoveredDate: Date | null;
|
|
74
|
+
minuteInputValues: {
|
|
75
|
+
[key: string]: string;
|
|
76
|
+
};
|
|
77
|
+
selectedHour: number;
|
|
78
|
+
selectedMinute: number;
|
|
79
|
+
selectedSecond: number;
|
|
80
|
+
selectedAMPM: 'AM' | 'PM';
|
|
81
|
+
startHour: number;
|
|
82
|
+
startMinute: number;
|
|
83
|
+
startSecond: number;
|
|
84
|
+
startAMPM: 'AM' | 'PM';
|
|
85
|
+
endHour: number;
|
|
86
|
+
endMinute: number;
|
|
87
|
+
endSecond: number;
|
|
88
|
+
endAMPM: 'AM' | 'PM';
|
|
89
|
+
openTimePickerId: string | null;
|
|
90
|
+
closePickerCounter: {
|
|
91
|
+
[key: string]: number;
|
|
92
|
+
};
|
|
93
|
+
defaultRanges: Record<string, CalendarRange>;
|
|
94
|
+
activeRange: string | null;
|
|
95
|
+
rangeOrder: string[];
|
|
96
|
+
private unregisterFn?;
|
|
97
|
+
private closeAllSubscription?;
|
|
98
|
+
private closeFn?;
|
|
99
|
+
constructor(calendarManager: CalendarManagerService);
|
|
100
|
+
onClickOutside(event: MouseEvent): void;
|
|
101
|
+
ngOnInit(): void;
|
|
102
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
103
|
+
ngOnDestroy(): void;
|
|
104
|
+
checkAndSetActiveRange(): void;
|
|
105
|
+
initializeDefaultRanges(): void;
|
|
106
|
+
initializeTimeFromDate(date: Date, isStart: boolean): void;
|
|
107
|
+
toggle(): void;
|
|
108
|
+
close(): void;
|
|
109
|
+
onDateHover(day: number | null, fromRight?: boolean): void;
|
|
110
|
+
onDateLeave(): void;
|
|
111
|
+
selectDate(day: number | null, fromRight?: boolean): void;
|
|
112
|
+
handleMultiDateSelection(selected: Date): void;
|
|
113
|
+
getDateString(date: Date): string;
|
|
114
|
+
isDateInMultiSelection(year: number, month: number, day: number): boolean;
|
|
115
|
+
apply(): void;
|
|
116
|
+
cancel(): void;
|
|
117
|
+
clear(): void;
|
|
118
|
+
chooseRange(key: string): void;
|
|
119
|
+
emitSelection(): void;
|
|
120
|
+
addDays(date: Date, days: number): Date;
|
|
121
|
+
generateCalendar(): void;
|
|
122
|
+
nextMonth(): void;
|
|
123
|
+
prevMonth(): void;
|
|
124
|
+
nextLeftMonth(): void;
|
|
125
|
+
prevLeftMonth(): void;
|
|
126
|
+
nextRightMonth(): void;
|
|
127
|
+
prevRightMonth(): void;
|
|
128
|
+
initializeDual(): void;
|
|
129
|
+
generateDualCalendars(): void;
|
|
130
|
+
buildCalendar(year: number, month: number): {
|
|
131
|
+
day: number;
|
|
132
|
+
currentMonth: boolean;
|
|
133
|
+
}[][];
|
|
134
|
+
isDateSelected(year: number, month: number, day: number): boolean;
|
|
135
|
+
isDateInRange(year: number, month: number, day: number): boolean;
|
|
136
|
+
isDateDisabled(year: number, month: number, day: number): boolean;
|
|
137
|
+
isToday(year: number, month: number, day: number): boolean;
|
|
138
|
+
getDisplayValue(): string;
|
|
139
|
+
getTimeInputValue(isStart?: boolean): string;
|
|
140
|
+
getSingleTimeInputValue(): string;
|
|
141
|
+
getSingleTimePickerDisplay(): string;
|
|
142
|
+
getDualTimePickerDisplay(isStart?: boolean): string;
|
|
143
|
+
onTimePickerOpened(pickerId: string): void;
|
|
144
|
+
onTimePickerClosed(pickerId: string): void;
|
|
145
|
+
shouldClosePicker(pickerId: string): number;
|
|
146
|
+
private parsePickerTimeString;
|
|
147
|
+
onSingleTimePickerChange(time: string): void;
|
|
148
|
+
onDualTimePickerChange(time: string, isStart?: boolean): void;
|
|
149
|
+
onTimeChange(event: any, isStart?: boolean): void;
|
|
150
|
+
onSingleTimeChange(event: any): void;
|
|
151
|
+
incrementHour(isStart?: boolean): void;
|
|
152
|
+
decrementHour(isStart?: boolean): void;
|
|
153
|
+
incrementMinute(isStart?: boolean): void;
|
|
154
|
+
decrementMinute(isStart?: boolean): void;
|
|
155
|
+
toggleAMPM(isStart?: boolean): void;
|
|
156
|
+
incrementSingleHour(): void;
|
|
157
|
+
decrementSingleHour(): void;
|
|
158
|
+
incrementSingleMinute(): void;
|
|
159
|
+
decrementSingleMinute(): void;
|
|
160
|
+
toggleSingleAMPM(): void;
|
|
161
|
+
getMonthName(month: number): string;
|
|
162
|
+
onHourInput(event: any, isStart?: boolean, isSingle?: boolean): void;
|
|
163
|
+
onHourBlur(event: any, isStart?: boolean, isSingle?: boolean): void;
|
|
164
|
+
onMinuteInput(event: any, isStart?: boolean, isSingle?: boolean): void;
|
|
165
|
+
onMinuteBlur(event: any, isStart?: boolean, isSingle?: boolean): void;
|
|
166
|
+
getDisplayHour(hour: number): number;
|
|
167
|
+
getMinuteDisplayValue(isStart: boolean, isSingle: boolean): string;
|
|
168
|
+
applyTimeToDate(date: Date, isStart: boolean): void;
|
|
169
|
+
onTimeInputFocus(event: any): void;
|
|
170
|
+
formatAllMinuteInputs(): void;
|
|
171
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<CustomCalendarComponent, never>;
|
|
172
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<CustomCalendarComponent, "app-custom-calendar", never, { "enableTimepicker": { "alias": "enableTimepicker"; "required": false; }; "autoApply": { "alias": "autoApply"; "required": false; }; "closeOnAutoApply": { "alias": "closeOnAutoApply"; "required": false; }; "showCancel": { "alias": "showCancel"; "required": false; }; "linkedCalendars": { "alias": "linkedCalendars"; "required": false; }; "singleDatePicker": { "alias": "singleDatePicker"; "required": false; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; }; "showISOWeekNumbers": { "alias": "showISOWeekNumbers"; "required": false; }; "customRangeDirection": { "alias": "customRangeDirection"; "required": false; }; "lockStartDate": { "alias": "lockStartDate"; "required": false; }; "position": { "alias": "position"; "required": false; }; "drop": { "alias": "drop"; "required": false; }; "dualCalendar": { "alias": "dualCalendar"; "required": false; }; "showRanges": { "alias": "showRanges"; "required": false; }; "timeFormat": { "alias": "timeFormat"; "required": false; }; "enableSeconds": { "alias": "enableSeconds"; "required": false; }; "customRanges": { "alias": "customRanges"; "required": false; }; "multiDateSelection": { "alias": "multiDateSelection"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "opens": { "alias": "opens"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "isDisplayCrossIcon": { "alias": "isDisplayCrossIcon"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; "displayFormat": { "alias": "displayFormat"; "required": false; }; }, { "selected": "selected"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
|
|
173
|
+
}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { EventEmitter, OnInit } from '@angular/core';
|
|
2
|
+
import { CalendarSelection } from '../custom-calendar/custom-calendar.component';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export interface TimeConfiguration {
|
|
5
|
+
date: Date;
|
|
6
|
+
allDay: boolean;
|
|
7
|
+
startTime: string;
|
|
8
|
+
endTime: string;
|
|
9
|
+
}
|
|
10
|
+
export interface ScheduledDateSelection {
|
|
11
|
+
mode: 'single' | 'multiple' | 'range';
|
|
12
|
+
singleDate?: {
|
|
13
|
+
startDate: Date;
|
|
14
|
+
endDate: Date;
|
|
15
|
+
allDay: boolean;
|
|
16
|
+
startTime: string;
|
|
17
|
+
endTime: string;
|
|
18
|
+
};
|
|
19
|
+
multipleDates?: TimeConfiguration[];
|
|
20
|
+
dateRange?: {
|
|
21
|
+
startDate: Date;
|
|
22
|
+
endDate: Date;
|
|
23
|
+
allDay: boolean;
|
|
24
|
+
startTime: string;
|
|
25
|
+
endTime: string;
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
export declare class ScheduledDatePickerComponent implements OnInit {
|
|
29
|
+
timeFormat: 12 | 24;
|
|
30
|
+
enableSeconds: boolean;
|
|
31
|
+
scheduled: EventEmitter<ScheduledDateSelection>;
|
|
32
|
+
cleared: EventEmitter<void>;
|
|
33
|
+
activeTab: 'single' | 'multiple' | 'range';
|
|
34
|
+
openTimePickerId: string | null;
|
|
35
|
+
closePickerCounter: {
|
|
36
|
+
[key: string]: number;
|
|
37
|
+
};
|
|
38
|
+
singleDate: Date | null;
|
|
39
|
+
singleAllDay: boolean;
|
|
40
|
+
singleStartTime: string;
|
|
41
|
+
singleEndTime: string;
|
|
42
|
+
multipleDates: TimeConfiguration[];
|
|
43
|
+
rangeStartDate: Date | null;
|
|
44
|
+
rangeEndDate: Date | null;
|
|
45
|
+
rangeAllDay: boolean;
|
|
46
|
+
rangeStartTime: string;
|
|
47
|
+
rangeEndTime: string;
|
|
48
|
+
ngOnInit(): void;
|
|
49
|
+
onTabChange(tab: 'single' | 'multiple' | 'range'): void;
|
|
50
|
+
onTimePickerOpened(pickerId: string): void;
|
|
51
|
+
onTimePickerClosed(pickerId: string): void;
|
|
52
|
+
shouldClosePicker(pickerId: string): number;
|
|
53
|
+
onSingleDateSelected(event: CalendarSelection): void;
|
|
54
|
+
onSingleAllDayChange(): void;
|
|
55
|
+
onSingleStartTimeChange(time: string): void;
|
|
56
|
+
onSingleEndTimeChange(time: string): void;
|
|
57
|
+
updateSingleDateTimes(): void;
|
|
58
|
+
onMultipleDatesSelected(event: CalendarSelection): void;
|
|
59
|
+
onMultipleDateAllDayChange(index: number): void;
|
|
60
|
+
onMultipleDateStartTimeChange(index: number, time: string): void;
|
|
61
|
+
onMultipleDateEndTimeChange(index: number, time: string): void;
|
|
62
|
+
onRangeSelected(event: CalendarSelection): void;
|
|
63
|
+
onRangeAllDayChange(): void;
|
|
64
|
+
onRangeStartTimeChange(time: string): void;
|
|
65
|
+
onRangeEndTimeChange(time: string): void;
|
|
66
|
+
updateRangeTimes(): void;
|
|
67
|
+
parseTimeString(timeStr: string): {
|
|
68
|
+
hours: number;
|
|
69
|
+
minutes: number;
|
|
70
|
+
};
|
|
71
|
+
getDateString(date: Date): string;
|
|
72
|
+
formatDate(date: Date): string;
|
|
73
|
+
emitScheduled(): void;
|
|
74
|
+
clear(): void;
|
|
75
|
+
apply(): void;
|
|
76
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ScheduledDatePickerComponent, never>;
|
|
77
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ScheduledDatePickerComponent, "app-scheduled-date-picker", never, { "timeFormat": { "alias": "timeFormat"; "required": false; }; "enableSeconds": { "alias": "enableSeconds"; "required": false; }; }, { "scheduled": "scheduled"; "cleared": "cleared"; }, never, never, true, never>;
|
|
78
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { EventEmitter, OnInit, OnChanges, AfterViewInit, QueryList, ElementRef, SimpleChanges } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export declare class TimePickerComponent implements OnInit, OnChanges, AfterViewInit {
|
|
4
|
+
value: string;
|
|
5
|
+
label: string;
|
|
6
|
+
placeholder: string;
|
|
7
|
+
position: 'left' | 'right';
|
|
8
|
+
pickerId: string;
|
|
9
|
+
closePicker: number;
|
|
10
|
+
timeFormat: 12 | 24;
|
|
11
|
+
showSeconds: boolean;
|
|
12
|
+
timeChange: EventEmitter<string>;
|
|
13
|
+
pickerOpened: EventEmitter<string>;
|
|
14
|
+
pickerClosed: EventEmitter<string>;
|
|
15
|
+
timeScrollElements: QueryList<ElementRef>;
|
|
16
|
+
showPicker: boolean;
|
|
17
|
+
currentHour: number;
|
|
18
|
+
currentMinute: number;
|
|
19
|
+
currentAMPM: string;
|
|
20
|
+
currentSecond: number;
|
|
21
|
+
ngOnInit(): void;
|
|
22
|
+
ngAfterViewInit(): void;
|
|
23
|
+
parseTimeValue(): void;
|
|
24
|
+
getHours(): number[];
|
|
25
|
+
getMinutes(): number[];
|
|
26
|
+
getSeconds(): number[];
|
|
27
|
+
getAMPMOptions(): string[];
|
|
28
|
+
parseTimeStringToComponents(timeStr: string): {
|
|
29
|
+
hour: number;
|
|
30
|
+
minute: number;
|
|
31
|
+
second: number;
|
|
32
|
+
ampm: string;
|
|
33
|
+
};
|
|
34
|
+
formatTimeFromComponents(hour: number, minute: number, second: number, ampm: string): string;
|
|
35
|
+
togglePicker(): void;
|
|
36
|
+
onHourChange(hour: number): void;
|
|
37
|
+
onMinuteChange(minute: number): void;
|
|
38
|
+
onSecondChange(second: number): void;
|
|
39
|
+
onAMPMChange(ampm: string): void;
|
|
40
|
+
updateTime(): void;
|
|
41
|
+
scrollToSelectedTimes(): void;
|
|
42
|
+
onDocumentClick(event: MouseEvent): void;
|
|
43
|
+
private previousCloseCounter;
|
|
44
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
45
|
+
onInputKeydown(event: KeyboardEvent): void;
|
|
46
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TimePickerComponent, never>;
|
|
47
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TimePickerComponent, "app-time-picker", never, { "value": { "alias": "value"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "position": { "alias": "position"; "required": false; }; "pickerId": { "alias": "pickerId"; "required": false; }; "closePicker": { "alias": "closePicker"; "required": false; }; "timeFormat": { "alias": "timeFormat"; "required": false; }; "showSeconds": { "alias": "showSeconds"; "required": false; }; }, { "timeChange": "timeChange"; "pickerOpened": "pickerOpened"; "pickerClosed": "pickerClosed"; }, never, never, true, never>;
|
|
48
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
export declare class CalendarManagerService {
|
|
3
|
+
private calendarInstances;
|
|
4
|
+
private closeAllSubject;
|
|
5
|
+
closeAll$: import("rxjs").Observable<void>;
|
|
6
|
+
/**
|
|
7
|
+
* Register a calendar instance with its close function
|
|
8
|
+
*/
|
|
9
|
+
register(closeFn: () => void): () => void;
|
|
10
|
+
/**
|
|
11
|
+
* Close all calendars except the one being opened
|
|
12
|
+
*/
|
|
13
|
+
closeAllExcept(exceptCloseFn: () => void): void;
|
|
14
|
+
/**
|
|
15
|
+
* Close all calendars
|
|
16
|
+
*/
|
|
17
|
+
closeAll(): void;
|
|
18
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<CalendarManagerService, never>;
|
|
19
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<CalendarManagerService>;
|
|
20
|
+
}
|