@triptease/tt-calendar 6.1.1 → 6.2.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 (24) hide show
  1. package/dist/cjs/src/DateSelectionContext.js +40 -0
  2. package/dist/cjs/src/DateSelectionContext.js.map +1 -0
  3. package/dist/cjs/src/Styles.js +267 -0
  4. package/dist/cjs/src/Styles.js.map +1 -0
  5. package/dist/cjs/src/TtCalendar.js +480 -0
  6. package/dist/cjs/src/TtCalendar.js.map +1 -0
  7. package/dist/cjs/src/helpers.js +9 -0
  8. package/dist/cjs/src/helpers.js.map +1 -0
  9. package/dist/cjs/src/index.js +6 -0
  10. package/dist/cjs/src/index.js.map +1 -0
  11. package/dist/cjs/src/tt-calendar.js +11 -0
  12. package/dist/cjs/src/tt-calendar.js.map +1 -0
  13. package/dist/esm/src/TtCalendar.d.ts +10 -1
  14. package/dist/esm/src/TtCalendar.js +114 -69
  15. package/dist/esm/src/TtCalendar.js.map +1 -1
  16. package/dist/esm/test/tt-calendar.test.js +62 -0
  17. package/dist/esm/test/tt-calendar.test.js.map +1 -1
  18. package/package.json +6 -2
  19. package/CHANGELOG.md +0 -117
  20. package/custom-elements.json +0 -668
  21. package/demo/index.html +0 -23
  22. package/test/tt-calendar.test.ts +0 -255
  23. package/tsconfig.cjs.json +0 -9
  24. package/tsconfig.json +0 -9
package/custom-elements.json DELETED
@@ -1,668 +0,0 @@
1
- {
2
- "schemaVersion": "1.0.0",
3
- "readme": "",
4
- "modules": [
5
- {
6
- "kind": "javascript-module",
7
- "path": "src/DateSelectionContext.ts",
8
- "declarations": [
9
- {
10
- "kind": "class",
11
- "description": "",
12
- "name": "DateSelectionEvent",
13
- "members": [
14
- {
15
- "kind": "method",
16
- "name": "is",
17
- "privacy": "public",
18
- "static": true,
19
- "return": {
20
- "type": {
21
- "text": "event is DateSelectionEvent"
22
- }
23
- },
24
- "parameters": [
25
- {
26
- "name": "event",
27
- "type": {
28
- "text": "Event"
29
- }
30
- }
31
- ]
32
- }
33
- ],
34
- "superclass": {
35
- "name": "CustomEvent",
36
- "module": "src/DateSelectionContext.ts"
37
- }
38
- },
39
- {
40
- "kind": "class",
41
- "description": "",
42
- "name": "DateRangeSelectionEvent",
43
- "members": [
44
- {
45
- "kind": "method",
46
- "name": "is",
47
- "privacy": "public",
48
- "static": true,
49
- "return": {
50
- "type": {
51
- "text": "event is DateRangeSelectionEvent"
52
- }
53
- },
54
- "parameters": [
55
- {
56
- "name": "event",
57
- "type": {
58
- "text": "Event"
59
- }
60
- }
61
- ]
62
- }
63
- ],
64
- "superclass": {
65
- "name": "CustomEvent",
66
- "module": "src/DateSelectionContext.ts"
67
- }
68
- },
69
- {
70
- "kind": "variable",
71
- "name": "DateSelectionContext"
72
- },
73
- {
74
- "kind": "function",
75
- "name": "isSingleDateSelection",
76
- "return": {
77
- "type": {
78
- "text": "selection is SingleDateSelection"
79
- }
80
- },
81
- "parameters": [
82
- {
83
- "name": "selection",
84
- "type": {
85
- "text": "DateSelection"
86
- }
87
- }
88
- ]
89
- },
90
- {
91
- "kind": "function",
92
- "name": "isDateRangeSelection",
93
- "return": {
94
- "type": {
95
- "text": "selection is DateRangeSelection"
96
- }
97
- },
98
- "parameters": [
99
- {
100
- "name": "selection",
101
- "type": {
102
- "text": "DateSelection"
103
- }
104
- }
105
- ]
106
- }
107
- ],
108
- "exports": [
109
- {
110
- "kind": "js",
111
- "name": "DateSelectionEvent",
112
- "declaration": {
113
- "name": "DateSelectionEvent",
114
- "module": "src/DateSelectionContext.ts"
115
- }
116
- },
117
- {
118
- "kind": "js",
119
- "name": "DateRangeSelectionEvent",
120
- "declaration": {
121
- "name": "DateRangeSelectionEvent",
122
- "module": "src/DateSelectionContext.ts"
123
- }
124
- },
125
- {
126
- "kind": "js",
127
- "name": "DateSelectionContext",
128
- "declaration": {
129
- "name": "DateSelectionContext",
130
- "module": "src/DateSelectionContext.ts"
131
- }
132
- },
133
- {
134
- "kind": "js",
135
- "name": "isSingleDateSelection",
136
- "declaration": {
137
- "name": "isSingleDateSelection",
138
- "module": "src/DateSelectionContext.ts"
139
- }
140
- },
141
- {
142
- "kind": "js",
143
- "name": "isDateRangeSelection",
144
- "declaration": {
145
- "name": "isDateRangeSelection",
146
- "module": "src/DateSelectionContext.ts"
147
- }
148
- }
149
- ]
150
- },
151
- {
152
- "kind": "javascript-module",
153
- "path": "src/Styles.ts",
154
- "declarations": [
155
- {
156
- "kind": "variable",
157
- "name": "styles",
158
- "default": "css` :host { display: block; } button { appearance: none; padding: 0; border-width: 0; background-color: transparent; border-radius: var(--space-scale-1); padding-block: var(--space-scale-1); padding-inline: var(--space-scale-2); &.compact { padding-block: 0; padding-inline: 0; } &:hover { cursor: pointer; box-shadow: 0px 2px 5px 0px rgba(60, 66, 87, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); } &:focus { outline: 1px solid var(--color-primary-400); } svg { display: block; } &.right svg { transform: rotate(180deg); } } h2 { font-weight: var(--font-weight-semibold); color: var(--color-text-500); font-size: var(--font-size-400); display: contents; } .calendar-header { display: flex; justify-content: space-between; align-items: center; padding: 24px 24px 16px 24px; } .calendar-grid { text-align: center; border-top: var(--color-border-200) 1px solid; padding: 0 24px; table { width: 100%; border-collapse: collapse; } tbody { display: grid; row-gap: 4px; } tr { display: grid; grid-template-columns: repeat(7, 48px); } th { color: var(--color-text-400); font-size: var(--font-size-100); font-weight: var(--font-weight-normal); line-height: 20px; padding: 16px 0; } td { font-size: var(--font-size-100); font-weight: var(--font-weight-normal); } } .calendar-footer { display: flex; flex-direction: column; //gap: var(--space-scale-2); svg { vertical-align: middle; } .actions { display: flex; flex: 1 0 auto; padding: var(--space-scale-2) var(--space-scale-3) var(--space-scale-3); button { background-color: var(--color-surface-200); border-color: var(--color-primary-400); border-width: 1px; border-style: solid; color: var(--color-primary-400); font-weight: var(--font-weight-semibold); width: 100%; height: 40px; } } } .day { aspect-ratio: 1; cursor: pointer; position: relative; // For focus outline box-sizing: border-box; height: auto; display: flex; align-items: center; justify-content: center; } .day.in-range { background: var(--color-primary-300); &:first-child { border-top-left-radius: var(--space-scale-1); border-bottom-left-radius: var(--space-scale-1); } &:last-child { border-top-right-radius: var(--space-scale-1); border-bottom-right-radius: var(--space-scale-1); } } .day[aria-disabled='true'] { opacity: 0.7; background-color: var(--color-surface-300); cursor: not-allowed; pointer-events: none; } .day.start-date:has(+ .in-range):after { content: ' '; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-primary-300); z-index: -1; border-radius: var(--space-scale-1); border-bottom-right-radius: 0; border-top-right-radius: 0; } .day.in-range + :is(.day:hover, .day:not(.in-range)):before { content: ' '; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-primary-300); z-index: -1; border-radius: var(--space-scale-1); border-bottom-left-radius: 0; border-top-left-radius: 0; } .day[aria-selected='true']:not(.in-range), .day:hover { background: var(--color-primary-400); color: var(--color-text-100); border-radius: var(--space-scale-1); font-weight: var(--font-weight-semibold); &.in-range { &:before { content: ' '; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-primary-300); z-index: -1; border-radius: var(--bg-border-radius, 0); } &:first-child { --bg-border-radius: var(--space-scale-1) 0 0 var(--space-scale-1); } &:last-child { --bg-border-radius: 0 var(--space-scale-1) var(--space-scale-1) 0; } } } .side-panel-wrapper { border-right: 1px solid var(--color-border-200, var(--color-surface-300)); display: flex; align-items: start; } .side-panel { padding: var(--space-scale-3); grid-template-columns: 1fr; display: grid; gap: var(--space-scale-3); button { font-size: var(--font-size-200); text-wrap: nowrap; line-height: var(--space-scale-3); padding-block: 0; padding-inline: 0; &:hover { color: var(--color-primary-400); box-shadow: none; } &[aria-selected='true'] { color: var(--color-primary-400); } } } details { border-top: 1px solid var(--color-border-200); font-size: var(--font-size-100); font-weight: var(--font-weight-normal); padding: var(--space-scale-2) var(--space-scale-3) var(--space-scale-3); summary { font-weight: var(--font-weight-semibold); position: relative; display: flex; align-items: center; gap: var(--space-scale-1); &::marker { content: ''; } svg.chevron-down { margin-left: var(--space-scale-1); transform: rotate(-90deg); } } &[open] svg.chevron-down { transform: rotate(0deg); } } `"
159
- }
160
- ],
161
- "exports": [
162
- {
163
- "kind": "js",
164
- "name": "styles",
165
- "declaration": {
166
- "name": "styles",
167
- "module": "src/Styles.ts"
168
- }
169
- }
170
- ]
171
- },
172
- {
173
- "kind": "javascript-module",
174
- "path": "src/TtCalendar.ts",
175
- "declarations": [
176
- {
177
- "kind": "class",
178
- "description": "",
179
- "name": "Calendar",
180
- "members": [
181
- {
182
- "kind": "field",
183
- "name": "shadowRootOptions",
184
- "type": {
185
- "text": "object"
186
- },
187
- "static": true,
188
- "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
189
- },
190
- {
191
- "kind": "field",
192
- "name": "value",
193
- "type": {
194
- "text": "string | DateRange | undefined"
195
- },
196
- "privacy": "public",
197
- "attribute": "value"
198
- },
199
- {
200
- "kind": "field",
201
- "name": "range",
202
- "type": {
203
- "text": "boolean"
204
- },
205
- "privacy": "public",
206
- "default": "false",
207
- "attribute": "range"
208
- },
209
- {
210
- "kind": "field",
211
- "name": "maxDate",
212
- "type": {
213
- "text": "DateTime | undefined"
214
- },
215
- "privacy": "public",
216
- "attribute": "max-date"
217
- },
218
- {
219
- "kind": "field",
220
- "name": "maxDays",
221
- "type": {
222
- "text": "number | undefined"
223
- },
224
- "privacy": "public",
225
- "attribute": "max-days"
226
- },
227
- {
228
- "kind": "field",
229
- "name": "minDate",
230
- "type": {
231
- "text": "DateTime | undefined"
232
- },
233
- "privacy": "public",
234
- "attribute": "min-date"
235
- },
236
- {
237
- "kind": "field",
238
- "name": "minDays",
239
- "type": {
240
- "text": "number | undefined"
241
- },
242
- "privacy": "public",
243
- "attribute": "min-days"
244
- },
245
- {
246
- "kind": "field",
247
- "name": "internalRangeValue",
248
- "type": {
249
- "text": "InternalDateRange"
250
- },
251
- "readonly": true
252
- },
253
- {
254
- "kind": "method",
255
- "name": "getRange",
256
- "return": {
257
- "type": {
258
- "text": "Interval"
259
- }
260
- }
261
- },
262
- {
263
- "kind": "method",
264
- "name": "toggleVisibility",
265
- "privacy": "public"
266
- },
267
- {
268
- "kind": "field",
269
- "name": "calendarDiv",
270
- "type": {
271
- "text": "HTMLElement"
272
- },
273
- "privacy": "private"
274
- },
275
- {
276
- "kind": "field",
277
- "name": "focusedDate",
278
- "type": {
279
- "text": "DateTime"
280
- },
281
- "privacy": "private"
282
- },
283
- {
284
- "kind": "field",
285
- "name": "visible",
286
- "type": {
287
- "text": "boolean"
288
- },
289
- "privacy": "private",
290
- "default": "false"
291
- },
292
- {
293
- "kind": "method",
294
- "name": "handleKeyDown",
295
- "privacy": "private",
296
- "parameters": [
297
- {
298
- "name": "event",
299
- "type": {
300
- "text": "KeyboardEvent"
301
- }
302
- }
303
- ]
304
- },
305
- {
306
- "kind": "method",
307
- "name": "focusDay",
308
- "privacy": "private",
309
- "parameters": [
310
- {
311
- "name": "date",
312
- "type": {
313
- "text": "DateTime"
314
- }
315
- }
316
- ]
317
- },
318
- {
319
- "kind": "field",
320
- "name": "newWeek",
321
- "privacy": "private"
322
- },
323
- {
324
- "kind": "method",
325
- "name": "getDaysInMonth",
326
- "privacy": "private",
327
- "return": {
328
- "type": {
329
- "text": "WeekdayList[]"
330
- }
331
- },
332
- "parameters": [
333
- {
334
- "name": "date",
335
- "type": {
336
- "text": "DateTime"
337
- }
338
- }
339
- ]
340
- },
341
- {
342
- "kind": "method",
343
- "name": "previousYear",
344
- "privacy": "private"
345
- },
346
- {
347
- "kind": "method",
348
- "name": "previousMonth",
349
- "privacy": "private"
350
- },
351
- {
352
- "kind": "method",
353
- "name": "nextMonth",
354
- "privacy": "private"
355
- },
356
- {
357
- "kind": "method",
358
- "name": "nextYear",
359
- "privacy": "private"
360
- },
361
- {
362
- "kind": "field",
363
- "name": "today",
364
- "type": {
365
- "text": "DateTime"
366
- },
367
- "privacy": "private",
368
- "readonly": true
369
- },
370
- {
371
- "kind": "method",
372
- "name": "handleDayClick",
373
- "privacy": "private",
374
- "parameters": [
375
- {
376
- "name": "day",
377
- "type": {
378
- "text": "DateTime"
379
- }
380
- }
381
- ]
382
- },
383
- {
384
- "kind": "field",
385
- "name": "handleButtonKeyDown",
386
- "privacy": "private"
387
- },
388
- {
389
- "kind": "method",
390
- "name": "getWeekdayLabels",
391
- "privacy": "private",
392
- "return": {
393
- "type": {
394
- "text": "string[]"
395
- }
396
- }
397
- },
398
- {
399
- "kind": "method",
400
- "name": "isSelected",
401
- "privacy": "private",
402
- "return": {
403
- "type": {
404
- "text": "boolean"
405
- }
406
- },
407
- "parameters": [
408
- {
409
- "name": "date",
410
- "type": {
411
- "text": "DateTime"
412
- }
413
- }
414
- ]
415
- },
416
- {
417
- "kind": "method",
418
- "name": "isInRange",
419
- "privacy": "private",
420
- "return": {
421
- "type": {
422
- "text": "boolean"
423
- }
424
- },
425
- "parameters": [
426
- {
427
- "name": "date",
428
- "type": {
429
- "text": "DateTime"
430
- }
431
- }
432
- ]
433
- },
434
- {
435
- "kind": "method",
436
- "name": "isRange",
437
- "privacy": "private",
438
- "return": {
439
- "type": {
440
- "text": "this is CalendarWithRange"
441
- }
442
- }
443
- },
444
- {
445
- "kind": "field",
446
- "name": "isSelectingRange",
447
- "type": {
448
- "text": "boolean"
449
- },
450
- "privacy": "private",
451
- "readonly": true
452
- },
453
- {
454
- "kind": "field",
455
- "name": "onDayHover",
456
- "privacy": "private"
457
- },
458
- {
459
- "kind": "field",
460
- "name": "isStartDate",
461
- "privacy": "private"
462
- },
463
- {
464
- "kind": "field",
465
- "name": "isEndDate",
466
- "privacy": "private"
467
- },
468
- {
469
- "kind": "field",
470
- "name": "handleClearSelection",
471
- "privacy": "private"
472
- },
473
- {
474
- "kind": "method",
475
- "name": "handleToggle",
476
- "privacy": "private",
477
- "parameters": [
478
- {
479
- "name": "e",
480
- "type": {
481
- "text": "Event"
482
- }
483
- }
484
- ]
485
- },
486
- {
487
- "kind": "method",
488
- "name": "dayIsDisabled",
489
- "privacy": "private",
490
- "parameters": [
491
- {
492
- "name": "day",
493
- "type": {
494
- "text": "DateTime"
495
- }
496
- }
497
- ]
498
- }
499
- ],
500
- "events": [
501
- {
502
- "type": {
503
- "text": "DateRangeSelectionEvent"
504
- }
505
- }
506
- ],
507
- "attributes": [
508
- {
509
- "name": "value",
510
- "type": {
511
- "text": "string | DateRange | undefined"
512
- },
513
- "fieldName": "value"
514
- },
515
- {
516
- "name": "range",
517
- "type": {
518
- "text": "boolean"
519
- },
520
- "default": "false",
521
- "fieldName": "range"
522
- },
523
- {
524
- "name": "max-date",
525
- "type": {
526
- "text": "DateTime | undefined"
527
- },
528
- "fieldName": "maxDate"
529
- },
530
- {
531
- "name": "max-days",
532
- "type": {
533
- "text": "number | undefined"
534
- },
535
- "fieldName": "maxDays"
536
- },
537
- {
538
- "name": "min-date",
539
- "type": {
540
- "text": "DateTime | undefined"
541
- },
542
- "fieldName": "minDate"
543
- },
544
- {
545
- "name": "min-days",
546
- "type": {
547
- "text": "number | undefined"
548
- },
549
- "fieldName": "minDays"
550
- }
551
- ],
552
- "superclass": {
553
- "name": "LitElement",
554
- "package": "lit"
555
- },
556
- "tagName": "tt-calendar",
557
- "customElement": true
558
- }
559
- ],
560
- "exports": [
561
- {
562
- "kind": "js",
563
- "name": "Calendar",
564
- "declaration": {
565
- "name": "Calendar",
566
- "module": "src/TtCalendar.ts"
567
- }
568
- }
569
- ]
570
- },
571
- {
572
- "kind": "javascript-module",
573
- "path": "src/helpers.ts",
574
- "declarations": [
575
- {
576
- "kind": "function",
577
- "name": "dateConverter",
578
- "return": {
579
- "type": {
580
- "text": "Date | undefined"
581
- }
582
- },
583
- "parameters": [
584
- {
585
- "name": "value",
586
- "type": {
587
- "text": "string | null"
588
- }
589
- }
590
- ]
591
- },
592
- {
593
- "kind": "function",
594
- "name": "dateTimeConverter",
595
- "return": {
596
- "type": {
597
- "text": "DateTime | undefined"
598
- }
599
- },
600
- "parameters": [
601
- {
602
- "name": "value",
603
- "type": {
604
- "text": "string | null"
605
- }
606
- }
607
- ]
608
- }
609
- ],
610
- "exports": [
611
- {
612
- "kind": "js",
613
- "name": "dateConverter",
614
- "declaration": {
615
- "name": "dateConverter",
616
- "module": "src/helpers.ts"
617
- }
618
- },
619
- {
620
- "kind": "js",
621
- "name": "dateTimeConverter",
622
- "declaration": {
623
- "name": "dateTimeConverter",
624
- "module": "src/helpers.ts"
625
- }
626
- }
627
- ]
628
- },
629
- {
630
- "kind": "javascript-module",
631
- "path": "src/index.ts",
632
- "declarations": [],
633
- "exports": [
634
- {
635
- "kind": "js",
636
- "name": "Calendar",
637
- "declaration": {
638
- "name": "Calendar",
639
- "module": "./tt-calendar.js"
640
- }
641
- }
642
- ]
643
- },
644
- {
645
- "kind": "javascript-module",
646
- "path": "src/tt-calendar.ts",
647
- "declarations": [],
648
- "exports": [
649
- {
650
- "kind": "custom-element-definition",
651
- "name": "tt-calendar",
652
- "declaration": {
653
- "name": "Calendar",
654
- "module": "/src/TtCalendar.js"
655
- }
656
- },
657
- {
658
- "kind": "js",
659
- "name": "Calendar",
660
- "declaration": {
661
- "name": "Calendar",
662
- "module": "src/tt-calendar.ts"
663
- }
664
- }
665
- ]
666
- }
667
- ]
668
- }
package/demo/index.html DELETED
@@ -1,23 +0,0 @@
1
- <!doctype html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
6
- <style>
7
- body {
8
- background: #fafafa;
9
- }
10
- </style>
11
- </head>
12
- <body>
13
- <div id="demo"></div>
14
-
15
- <script type="module">
16
- import { html, render } from 'lit';
17
- import '../dist/src/tt-calendar.js';
18
-
19
- const header = 'Hello owc World!';
20
- render(html` <tt-calendar .header=${header}> some light-dom </tt-calendar> `, document.querySelector('#demo'));
21
- </script>
22
- </body>
23
- </html>