kalendly 0.2.2 → 0.3.0

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.
Files changed (17) hide show
  1. package/README.md +202 -29
  2. package/dist/core/index.d.mts +48 -10
  3. package/dist/core/index.d.ts +48 -10
  4. package/dist/core/index.js +60 -26
  5. package/dist/core/index.js.map +1 -1
  6. package/dist/core/index.mjs +56 -25
  7. package/dist/core/index.mjs.map +1 -1
  8. package/dist/index.d.mts +74 -10
  9. package/dist/index.d.ts +74 -10
  10. package/dist/index.js +373 -162
  11. package/dist/index.js.map +1 -1
  12. package/dist/index.mjs +369 -161
  13. package/dist/index.mjs.map +1 -1
  14. package/dist/index.umd.js +363 -158
  15. package/dist/index.umd.js.map +1 -1
  16. package/dist/styles/calendar.css +445 -395
  17. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -1,3 +1,4 @@
1
+ type Open<T extends string> = T | (string & {});
1
2
  interface CalendarEvent {
2
3
  id: string | number;
3
4
  name: string;
@@ -7,11 +8,12 @@ interface CalendarEvent {
7
8
  allDay?: boolean;
8
9
  description?: string;
9
10
  color?: string;
10
- category?: 'work' | 'personal' | 'meeting' | 'deadline' | 'appointment' | 'other';
11
+ category?: Open<'work' | 'personal' | 'meeting' | 'deadline' | 'appointment' | 'other'>;
11
12
  location?: string;
12
13
  url?: string;
13
- status?: 'scheduled' | 'completed' | 'cancelled' | 'tentative';
14
- priority?: 'low' | 'medium' | 'high';
14
+ status?: Open<'scheduled' | 'completed' | 'cancelled' | 'tentative'>;
15
+ priority?: Open<'low' | 'medium' | 'high'>;
16
+ availabilityStatus?: Open<'open' | 'conditional' | 'blocked'>;
15
17
  attendees?: string[];
16
18
  organizer?: string;
17
19
  reminders?: number[];
@@ -52,6 +54,13 @@ interface CalendarConfig {
52
54
  maxYear?: number;
53
55
  weekStartsOn?: 0 | 1;
54
56
  categoryColors?: CategoryColorMap;
57
+ monthCount?: number;
58
+ }
59
+ interface CalendarPane {
60
+ year: number;
61
+ month: number;
62
+ monthAndYearText: string;
63
+ calendarDates: CalendarDate[][];
55
64
  }
56
65
  interface CalendarActions {
57
66
  next: () => void;
@@ -62,18 +71,14 @@ interface CalendarActions {
62
71
  selectDate: (date: Date) => void;
63
72
  updateTasks: () => void;
64
73
  }
65
- interface PopupPosition {
66
- class: 'popup-left' | 'popup-right' | 'popup-center-top' | 'popup-center-bottom';
67
- style?: Record<string, string | number>;
68
- }
69
74
  interface CalendarViewModel extends CalendarState {
70
75
  months: string[];
71
76
  days: string[];
72
77
  years: number[];
73
78
  monthAndYearText: string;
74
79
  scheduleDay: string;
80
+ panes: CalendarPane[];
75
81
  calendarDates: CalendarDate[][];
76
- popupPositionClass: string;
77
82
  }
78
83
  type CalendarEventHandler = (event: CalendarEvent) => void;
79
84
  interface CalendarProps {
@@ -100,7 +105,37 @@ interface CalendarTheme {
100
105
  selectedBg?: string;
101
106
  headerBg?: string;
102
107
  popupBg?: string;
108
+ pickerBg?: string;
109
+ pickerShadow?: string;
103
110
  eventIndicator?: string;
111
+ onAccent?: string;
112
+ link?: string;
113
+ openBg?: string;
114
+ openFg?: string;
115
+ conditionalBg?: string;
116
+ conditionalFg?: string;
117
+ blockedBg?: string;
118
+ blockedFg?: string;
119
+ rangeBg?: string;
120
+ rangeOutline?: string;
121
+ inRangeBg?: string;
122
+ inRangeOutline?: string;
123
+ badgeBg?: string;
124
+ badgeText?: string;
125
+ badgeSuccessBg?: string;
126
+ badgeSuccessText?: string;
127
+ badgeInfoBg?: string;
128
+ badgeInfoText?: string;
129
+ badgeWarningBg?: string;
130
+ badgeWarningText?: string;
131
+ badgeDangerBg?: string;
132
+ badgeDangerText?: string;
133
+ badgeNeutralBg?: string;
134
+ badgeNeutralText?: string;
135
+ badgePositiveBg?: string;
136
+ badgePositiveText?: string;
137
+ badgeTentativeBg?: string;
138
+ badgeTentativeText?: string;
104
139
  }
105
140
 
106
141
  declare const MONTHS: string[];
@@ -113,7 +148,6 @@ declare function generateYears(minYear?: number, maxYear?: number): number[];
113
148
  declare function getEventsForDate(events: CalendarEvent[], date: Date): CalendarEvent[];
114
149
  declare function hasEvents(events: CalendarEvent[], date: Date): boolean;
115
150
  declare function generateCalendarDates(year: number, month: number, events?: CalendarEvent[], weekStartsOn?: 0 | 1): CalendarDate[][];
116
- declare function getPopupPositionClass(selectedDayIndex: number | null): string;
117
151
  declare function getCellClasses(calendarDate: CalendarDate): string[];
118
152
  declare function formatDateForDisplay(date: Date): string;
119
153
  declare function getMonthYearText(year: number, month: number): string;
@@ -125,6 +159,10 @@ declare function getDefaultEventColor(category?: string, customColors?: Category
125
159
  declare function mergeCategoryColors(customColors?: CategoryColorMap): CategoryColorMap;
126
160
  declare function isValidHexColor(color: string): boolean;
127
161
  declare function getCategoryColor(category: string, customColors?: CategoryColorMap): string;
162
+ declare function escapeHtml(value: unknown): string;
163
+ declare function slugifyToken(value: string): string;
164
+ declare function safeUrl(value: string): string;
165
+ declare function safeColor(value: string): string;
128
166
 
129
167
  declare class CalendarEngine {
130
168
  private state;
@@ -224,6 +262,7 @@ declare class CalendarEngine {
224
262
 
225
263
  declare class CalendarElement extends HTMLElement {
226
264
  static observedAttributes: string[];
265
+ private static readonly themeMap;
227
266
  private engine;
228
267
  private unsubscribe;
229
268
  private actions;
@@ -241,6 +280,10 @@ declare class CalendarElement extends HTMLElement {
241
280
  private _categoryColors;
242
281
  private _renderEvent;
243
282
  private _renderNoEvents;
283
+ private _availabilityColors;
284
+ private _selectableStatuses;
285
+ private _initError;
286
+ private pendingUpdate;
244
287
  private _rangeStart;
245
288
  private _rangeEnd;
246
289
  private _timeRangeDate;
@@ -251,19 +294,36 @@ declare class CalendarElement extends HTMLElement {
251
294
  set events(val: CalendarEvent[]);
252
295
  set theme(val: CalendarTheme);
253
296
  set categoryColors(val: CategoryColorMap);
297
+ get availabilityColors(): Record<string, string>;
298
+ set availabilityColors(val: Record<string, string>);
299
+ get selectableStatuses(): string[];
300
+ set selectableStatuses(val: string[]);
254
301
  set renderEvent(val: (e: CalendarEvent) => string);
255
302
  set renderNoEvents(val: () => string);
256
303
  get loading(): boolean;
257
304
  set loading(val: boolean);
305
+ private reaction;
258
306
  connectedCallback(): void;
259
307
  disconnectedCallback(): void;
260
308
  attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
309
+ private get headingText();
310
+ private get monthCount();
261
311
  private get minYear();
262
312
  private get maxYear();
263
313
  private initEngine;
264
314
  private reinit;
265
315
  private cleanup;
266
316
  private applyTheme;
317
+ private static readonly BUILT_IN_BUCKETS;
318
+ private static titleDeprecationWarned;
319
+ private get knownBuckets();
320
+ get updateComplete(): Promise<void>;
321
+ private scheduleRender;
322
+ private rethrowInitError;
323
+ private assertStatusesDeclared;
324
+ private assertStatusesKnown;
325
+ private resolveBucket;
326
+ private isDateSelectable;
267
327
  private render;
268
328
  private attachEventListeners;
269
329
  private updatePickerYear;
@@ -293,11 +353,15 @@ interface CalendarElementProps {
293
353
  categoryColors?: CategoryColorMap;
294
354
  renderEvent?: (event: CalendarEvent) => string;
295
355
  renderNoEvents?: () => string;
356
+ availabilityColors?: Record<string, string>;
357
+ selectableStatuses?: string[];
296
358
  }
297
359
  interface CalendarElementInstance {
298
360
  events: CalendarEvent[];
299
361
  theme: CalendarTheme;
300
362
  categoryColors: CategoryColorMap;
363
+ availabilityColors: Record<string, string>;
364
+ selectableStatuses: string[];
301
365
  renderEvent: (event: CalendarEvent) => string;
302
366
  renderNoEvents: () => string;
303
367
  updateEvents: (events: CalendarEvent[]) => void;
@@ -307,4 +371,4 @@ interface CalendarElementInstance {
307
371
  getEngine: () => CalendarEngine;
308
372
  }
309
373
 
310
- export { type CalendarActions, type CalendarConfig, type CalendarDate, CalendarElement, type CalendarElementInstance, type CalendarElementProps, CalendarEngine, type CalendarEvent, type CalendarEventHandler, type CalendarProps, type CalendarState, type CalendarTheme, type CalendarViewModel, type CategoryColorMap, DAYS, DEFAULT_CATEGORY_COLORS, MONTHS, MONTHS_FULL, type PopupPosition, defineCalendarElement, formatAttendees, formatDateForDisplay, formatTimeRange, generateCalendarDates, generateYears, getCategoryColor, getCellClasses, getDefaultEventColor, getEventsForDate, getMonthYearText, getPopupPositionClass, hasEvents, isSameDay, isToday, isValidHexColor, mergeCategoryColors, normalizeDate, sortEventsByTime };
374
+ export { type CalendarActions, type CalendarConfig, type CalendarDate, CalendarElement, type CalendarElementInstance, type CalendarElementProps, CalendarEngine, type CalendarEvent, type CalendarEventHandler, type CalendarPane, type CalendarProps, type CalendarState, type CalendarTheme, type CalendarViewModel, type CategoryColorMap, DAYS, DEFAULT_CATEGORY_COLORS, MONTHS, MONTHS_FULL, defineCalendarElement, escapeHtml, formatAttendees, formatDateForDisplay, formatTimeRange, generateCalendarDates, generateYears, getCategoryColor, getCellClasses, getDefaultEventColor, getEventsForDate, getMonthYearText, hasEvents, isSameDay, isToday, isValidHexColor, mergeCategoryColors, normalizeDate, safeColor, safeUrl, slugifyToken, sortEventsByTime };
package/dist/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ type Open<T extends string> = T | (string & {});
1
2
  interface CalendarEvent {
2
3
  id: string | number;
3
4
  name: string;
@@ -7,11 +8,12 @@ interface CalendarEvent {
7
8
  allDay?: boolean;
8
9
  description?: string;
9
10
  color?: string;
10
- category?: 'work' | 'personal' | 'meeting' | 'deadline' | 'appointment' | 'other';
11
+ category?: Open<'work' | 'personal' | 'meeting' | 'deadline' | 'appointment' | 'other'>;
11
12
  location?: string;
12
13
  url?: string;
13
- status?: 'scheduled' | 'completed' | 'cancelled' | 'tentative';
14
- priority?: 'low' | 'medium' | 'high';
14
+ status?: Open<'scheduled' | 'completed' | 'cancelled' | 'tentative'>;
15
+ priority?: Open<'low' | 'medium' | 'high'>;
16
+ availabilityStatus?: Open<'open' | 'conditional' | 'blocked'>;
15
17
  attendees?: string[];
16
18
  organizer?: string;
17
19
  reminders?: number[];
@@ -52,6 +54,13 @@ interface CalendarConfig {
52
54
  maxYear?: number;
53
55
  weekStartsOn?: 0 | 1;
54
56
  categoryColors?: CategoryColorMap;
57
+ monthCount?: number;
58
+ }
59
+ interface CalendarPane {
60
+ year: number;
61
+ month: number;
62
+ monthAndYearText: string;
63
+ calendarDates: CalendarDate[][];
55
64
  }
56
65
  interface CalendarActions {
57
66
  next: () => void;
@@ -62,18 +71,14 @@ interface CalendarActions {
62
71
  selectDate: (date: Date) => void;
63
72
  updateTasks: () => void;
64
73
  }
65
- interface PopupPosition {
66
- class: 'popup-left' | 'popup-right' | 'popup-center-top' | 'popup-center-bottom';
67
- style?: Record<string, string | number>;
68
- }
69
74
  interface CalendarViewModel extends CalendarState {
70
75
  months: string[];
71
76
  days: string[];
72
77
  years: number[];
73
78
  monthAndYearText: string;
74
79
  scheduleDay: string;
80
+ panes: CalendarPane[];
75
81
  calendarDates: CalendarDate[][];
76
- popupPositionClass: string;
77
82
  }
78
83
  type CalendarEventHandler = (event: CalendarEvent) => void;
79
84
  interface CalendarProps {
@@ -100,7 +105,37 @@ interface CalendarTheme {
100
105
  selectedBg?: string;
101
106
  headerBg?: string;
102
107
  popupBg?: string;
108
+ pickerBg?: string;
109
+ pickerShadow?: string;
103
110
  eventIndicator?: string;
111
+ onAccent?: string;
112
+ link?: string;
113
+ openBg?: string;
114
+ openFg?: string;
115
+ conditionalBg?: string;
116
+ conditionalFg?: string;
117
+ blockedBg?: string;
118
+ blockedFg?: string;
119
+ rangeBg?: string;
120
+ rangeOutline?: string;
121
+ inRangeBg?: string;
122
+ inRangeOutline?: string;
123
+ badgeBg?: string;
124
+ badgeText?: string;
125
+ badgeSuccessBg?: string;
126
+ badgeSuccessText?: string;
127
+ badgeInfoBg?: string;
128
+ badgeInfoText?: string;
129
+ badgeWarningBg?: string;
130
+ badgeWarningText?: string;
131
+ badgeDangerBg?: string;
132
+ badgeDangerText?: string;
133
+ badgeNeutralBg?: string;
134
+ badgeNeutralText?: string;
135
+ badgePositiveBg?: string;
136
+ badgePositiveText?: string;
137
+ badgeTentativeBg?: string;
138
+ badgeTentativeText?: string;
104
139
  }
105
140
 
106
141
  declare const MONTHS: string[];
@@ -113,7 +148,6 @@ declare function generateYears(minYear?: number, maxYear?: number): number[];
113
148
  declare function getEventsForDate(events: CalendarEvent[], date: Date): CalendarEvent[];
114
149
  declare function hasEvents(events: CalendarEvent[], date: Date): boolean;
115
150
  declare function generateCalendarDates(year: number, month: number, events?: CalendarEvent[], weekStartsOn?: 0 | 1): CalendarDate[][];
116
- declare function getPopupPositionClass(selectedDayIndex: number | null): string;
117
151
  declare function getCellClasses(calendarDate: CalendarDate): string[];
118
152
  declare function formatDateForDisplay(date: Date): string;
119
153
  declare function getMonthYearText(year: number, month: number): string;
@@ -125,6 +159,10 @@ declare function getDefaultEventColor(category?: string, customColors?: Category
125
159
  declare function mergeCategoryColors(customColors?: CategoryColorMap): CategoryColorMap;
126
160
  declare function isValidHexColor(color: string): boolean;
127
161
  declare function getCategoryColor(category: string, customColors?: CategoryColorMap): string;
162
+ declare function escapeHtml(value: unknown): string;
163
+ declare function slugifyToken(value: string): string;
164
+ declare function safeUrl(value: string): string;
165
+ declare function safeColor(value: string): string;
128
166
 
129
167
  declare class CalendarEngine {
130
168
  private state;
@@ -224,6 +262,7 @@ declare class CalendarEngine {
224
262
 
225
263
  declare class CalendarElement extends HTMLElement {
226
264
  static observedAttributes: string[];
265
+ private static readonly themeMap;
227
266
  private engine;
228
267
  private unsubscribe;
229
268
  private actions;
@@ -241,6 +280,10 @@ declare class CalendarElement extends HTMLElement {
241
280
  private _categoryColors;
242
281
  private _renderEvent;
243
282
  private _renderNoEvents;
283
+ private _availabilityColors;
284
+ private _selectableStatuses;
285
+ private _initError;
286
+ private pendingUpdate;
244
287
  private _rangeStart;
245
288
  private _rangeEnd;
246
289
  private _timeRangeDate;
@@ -251,19 +294,36 @@ declare class CalendarElement extends HTMLElement {
251
294
  set events(val: CalendarEvent[]);
252
295
  set theme(val: CalendarTheme);
253
296
  set categoryColors(val: CategoryColorMap);
297
+ get availabilityColors(): Record<string, string>;
298
+ set availabilityColors(val: Record<string, string>);
299
+ get selectableStatuses(): string[];
300
+ set selectableStatuses(val: string[]);
254
301
  set renderEvent(val: (e: CalendarEvent) => string);
255
302
  set renderNoEvents(val: () => string);
256
303
  get loading(): boolean;
257
304
  set loading(val: boolean);
305
+ private reaction;
258
306
  connectedCallback(): void;
259
307
  disconnectedCallback(): void;
260
308
  attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
309
+ private get headingText();
310
+ private get monthCount();
261
311
  private get minYear();
262
312
  private get maxYear();
263
313
  private initEngine;
264
314
  private reinit;
265
315
  private cleanup;
266
316
  private applyTheme;
317
+ private static readonly BUILT_IN_BUCKETS;
318
+ private static titleDeprecationWarned;
319
+ private get knownBuckets();
320
+ get updateComplete(): Promise<void>;
321
+ private scheduleRender;
322
+ private rethrowInitError;
323
+ private assertStatusesDeclared;
324
+ private assertStatusesKnown;
325
+ private resolveBucket;
326
+ private isDateSelectable;
267
327
  private render;
268
328
  private attachEventListeners;
269
329
  private updatePickerYear;
@@ -293,11 +353,15 @@ interface CalendarElementProps {
293
353
  categoryColors?: CategoryColorMap;
294
354
  renderEvent?: (event: CalendarEvent) => string;
295
355
  renderNoEvents?: () => string;
356
+ availabilityColors?: Record<string, string>;
357
+ selectableStatuses?: string[];
296
358
  }
297
359
  interface CalendarElementInstance {
298
360
  events: CalendarEvent[];
299
361
  theme: CalendarTheme;
300
362
  categoryColors: CategoryColorMap;
363
+ availabilityColors: Record<string, string>;
364
+ selectableStatuses: string[];
301
365
  renderEvent: (event: CalendarEvent) => string;
302
366
  renderNoEvents: () => string;
303
367
  updateEvents: (events: CalendarEvent[]) => void;
@@ -307,4 +371,4 @@ interface CalendarElementInstance {
307
371
  getEngine: () => CalendarEngine;
308
372
  }
309
373
 
310
- export { type CalendarActions, type CalendarConfig, type CalendarDate, CalendarElement, type CalendarElementInstance, type CalendarElementProps, CalendarEngine, type CalendarEvent, type CalendarEventHandler, type CalendarProps, type CalendarState, type CalendarTheme, type CalendarViewModel, type CategoryColorMap, DAYS, DEFAULT_CATEGORY_COLORS, MONTHS, MONTHS_FULL, type PopupPosition, defineCalendarElement, formatAttendees, formatDateForDisplay, formatTimeRange, generateCalendarDates, generateYears, getCategoryColor, getCellClasses, getDefaultEventColor, getEventsForDate, getMonthYearText, getPopupPositionClass, hasEvents, isSameDay, isToday, isValidHexColor, mergeCategoryColors, normalizeDate, sortEventsByTime };
374
+ export { type CalendarActions, type CalendarConfig, type CalendarDate, CalendarElement, type CalendarElementInstance, type CalendarElementProps, CalendarEngine, type CalendarEvent, type CalendarEventHandler, type CalendarPane, type CalendarProps, type CalendarState, type CalendarTheme, type CalendarViewModel, type CategoryColorMap, DAYS, DEFAULT_CATEGORY_COLORS, MONTHS, MONTHS_FULL, defineCalendarElement, escapeHtml, formatAttendees, formatDateForDisplay, formatTimeRange, generateCalendarDates, generateYears, getCategoryColor, getCellClasses, getDefaultEventColor, getEventsForDate, getMonthYearText, hasEvents, isSameDay, isToday, isValidHexColor, mergeCategoryColors, normalizeDate, safeColor, safeUrl, slugifyToken, sortEventsByTime };