@forgebuild/hotal-ui 0.23.15 → 0.23.19
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.
- package/README.md +660 -659
- package/dist/hotal-ui.js +6444 -5727
- package/dist/index.d.ts +1191 -1099
- package/package.json +45 -45
package/README.md
CHANGED
|
@@ -1,659 +1,660 @@
|
|
|
1
|
-
# @forgebuild/hotal-ui
|
|
2
|
-
|
|
3
|
-
Reusable Web Components for booking and reservation experiences.
|
|
4
|
-
|
|
5
|
-
## Install
|
|
6
|
-
|
|
7
|
-
```
|
|
8
|
-
npm install @forgebuild/hotal-ui
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
No peer dependencies — the Svelte runtime is bundled in. Works via a plain `<script type="module">` tag too:
|
|
12
|
-
|
|
13
|
-
```html
|
|
14
|
-
<script type="module" src="https://esm.sh/@forgebuild/hotal-ui"></script>
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
## Components
|
|
18
|
-
|
|
19
|
-
### `<reservation-bar>`
|
|
20
|
-
|
|
21
|
-
A date / guests / time picker bar with a Reserve link, popovers positioned via Floating UI, and calendar/list panels rendered with the native Popover API inside an open shadow root.
|
|
22
|
-
|
|
23
|
-
```html
|
|
24
|
-
<script type="module">
|
|
25
|
-
import '@forgebuild/hotal-ui';
|
|
26
|
-
|
|
27
|
-
const bar = document.querySelector('reservation-bar');
|
|
28
|
-
|
|
29
|
-
// Function-valued and explicitly-false-when-default-is-true props must be
|
|
30
|
-
// set as JS properties, not HTML attributes (attributes are strings only,
|
|
31
|
-
// and HTML boolean-attribute semantics can't express "false" when the
|
|
32
|
-
// prop's own default is true).
|
|
33
|
-
bar.showReserveButton = false;
|
|
34
|
-
bar.fetchAvailableDates = async (partySize) => {
|
|
35
|
-
const res = await fetch(`/api/available-dates?party_size=${partySize}`);
|
|
36
|
-
const { dates } = await res.json();
|
|
37
|
-
return dates;
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
bar.addEventListener('reservationchange', (e) => console.log(e.detail));
|
|
41
|
-
</script>
|
|
42
|
-
|
|
43
|
-
<reservation-bar reserve-href="/reservations" sync-with-url closed-weekdays="[0]"></reservation-bar>
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
#### Attributes / properties
|
|
47
|
-
|
|
48
|
-
| Name | Attribute | Type | Default | Description |
|
|
49
|
-
| --- | --- | --- | --- | --- |
|
|
50
|
-
| `minGuests` | `min-guests` | `number` | `1` | Minimum selectable party size |
|
|
51
|
-
| `maxGuests` | `max-guests` | `number` | `20` | Maximum selectable party size |
|
|
52
|
-
| `defaultGuests` | `default-guests` | `number` | `2` | Initial party size |
|
|
53
|
-
| `timeSlots` | `time-slots` (JSON array) | `string[]` | `'7:00 PM'`–`'11:00 PM'` in 30-min steps | Selectable time options |
|
|
54
|
-
| `defaultTime` | `default-time` | `string` | `'7:00 PM'` | Initial time |
|
|
55
|
-
| `showReserveButton` | `show-reserve-button` | `boolean` | `true` |
|
|
56
|
-
| `reserveHref` | `reserve-href` | `string` | `'/reservations'` | Base URL the built query string is appended to |
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
--rb-bar-
|
|
71
|
-
--rb-
|
|
72
|
-
--rb-
|
|
73
|
-
--rb-accent-
|
|
74
|
-
--rb-
|
|
75
|
-
--rb-
|
|
76
|
-
--rb-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
flow.
|
|
92
|
-
|
|
93
|
-
const
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
const
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
flow.
|
|
103
|
-
flow.
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
flow.
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
|
133
|
-
|
|
|
134
|
-
| `
|
|
135
|
-
| `
|
|
136
|
-
| `
|
|
137
|
-
| `
|
|
138
|
-
| `
|
|
139
|
-
| `
|
|
140
|
-
| `
|
|
141
|
-
| `
|
|
142
|
-
| `
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
interface
|
|
149
|
-
interface
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
--bf-
|
|
167
|
-
--bf-
|
|
168
|
-
--bf-
|
|
169
|
-
--bf-accent-
|
|
170
|
-
--bf-
|
|
171
|
-
--bf-spinner-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
|
195
|
-
|
|
|
196
|
-
| `
|
|
197
|
-
| `
|
|
198
|
-
| `
|
|
199
|
-
| `
|
|
200
|
-
| `
|
|
201
|
-
| `
|
|
202
|
-
| `
|
|
203
|
-
| `
|
|
204
|
-
| `
|
|
205
|
-
| `
|
|
206
|
-
| `
|
|
207
|
-
| `
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
grid.
|
|
223
|
-
//
|
|
224
|
-
|
|
225
|
-
grid.addEventListener('room-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
|
239
|
-
|
|
|
240
|
-
| `
|
|
241
|
-
| `
|
|
242
|
-
| `
|
|
243
|
-
| `
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
- `
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
|
273
|
-
|
|
|
274
|
-
| `
|
|
275
|
-
| `
|
|
276
|
-
| `
|
|
277
|
-
| `
|
|
278
|
-
| `
|
|
279
|
-
| `
|
|
280
|
-
| `
|
|
281
|
-
| `
|
|
282
|
-
| `
|
|
283
|
-
| `
|
|
284
|
-
| `
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
fp.addEventListener('zone-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
|
319
|
-
|
|
|
320
|
-
| `
|
|
321
|
-
| `
|
|
322
|
-
| `
|
|
323
|
-
| `
|
|
324
|
-
| `
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
`
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
search
|
|
341
|
-
search.
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
|
359
|
-
|
|
|
360
|
-
| `
|
|
361
|
-
| `
|
|
362
|
-
| `
|
|
363
|
-
| `
|
|
364
|
-
| `
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
`
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
cal
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
|
394
|
-
|
|
|
395
|
-
| `
|
|
396
|
-
| `
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
card
|
|
410
|
-
card.
|
|
411
|
-
card.addEventListener('
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
|
422
|
-
|
|
|
423
|
-
| `
|
|
424
|
-
| `
|
|
425
|
-
| `
|
|
426
|
-
| `
|
|
427
|
-
| `
|
|
428
|
-
| `
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
teaser.
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
heading
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
cta-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
|
465
|
-
|
|
|
466
|
-
| `
|
|
467
|
-
| `
|
|
468
|
-
| `
|
|
469
|
-
| `
|
|
470
|
-
| `
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
--dt-
|
|
482
|
-
--dt-
|
|
483
|
-
--dt-
|
|
484
|
-
--dt-
|
|
485
|
-
--dt-venue-bg
|
|
486
|
-
--dt-venue-
|
|
487
|
-
--dt-venue-border
|
|
488
|
-
--dt-venue-
|
|
489
|
-
--dt-venue-
|
|
490
|
-
--dt-
|
|
491
|
-
--dt-dot-
|
|
492
|
-
--dt-
|
|
493
|
-
--dt-cta-
|
|
494
|
-
--dt-cta-
|
|
495
|
-
--dt-cta-hover-
|
|
496
|
-
--dt-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
checkout
|
|
512
|
-
|
|
513
|
-
const
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
|
548
|
-
|
|
|
549
|
-
| `
|
|
550
|
-
| `
|
|
551
|
-
| `
|
|
552
|
-
| `
|
|
553
|
-
| `
|
|
554
|
-
| `
|
|
555
|
-
| `
|
|
556
|
-
| `
|
|
557
|
-
| `
|
|
558
|
-
| `
|
|
559
|
-
| `
|
|
560
|
-
| `
|
|
561
|
-
| `
|
|
562
|
-
| `
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
--bc-
|
|
576
|
-
--bc-muted-text
|
|
577
|
-
--bc-
|
|
578
|
-
--bc-
|
|
579
|
-
--bc-input-
|
|
580
|
-
--bc-input-border
|
|
581
|
-
--bc-
|
|
582
|
-
--bc-accent-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
primary-
|
|
602
|
-
|
|
603
|
-
secondary-
|
|
604
|
-
|
|
605
|
-
note-
|
|
606
|
-
note-link-
|
|
607
|
-
note-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
|
615
|
-
|
|
|
616
|
-
| `
|
|
617
|
-
| `
|
|
618
|
-
| `
|
|
619
|
-
| `
|
|
620
|
-
| `
|
|
621
|
-
| `
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
--cc-
|
|
629
|
-
--cc-
|
|
630
|
-
--cc-
|
|
631
|
-
--cc-
|
|
632
|
-
--cc-muted-text
|
|
633
|
-
--cc-
|
|
634
|
-
--cc-
|
|
635
|
-
--cc-accent-
|
|
636
|
-
--cc-
|
|
637
|
-
--cc-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
npm
|
|
648
|
-
npm run
|
|
649
|
-
npm run
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
npm
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
1
|
+
# @forgebuild/hotal-ui
|
|
2
|
+
|
|
3
|
+
Reusable Web Components for booking and reservation experiences.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
npm install @forgebuild/hotal-ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
No peer dependencies — the Svelte runtime is bundled in. Works via a plain `<script type="module">` tag too:
|
|
12
|
+
|
|
13
|
+
```html
|
|
14
|
+
<script type="module" src="https://esm.sh/@forgebuild/hotal-ui"></script>
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Components
|
|
18
|
+
|
|
19
|
+
### `<reservation-bar>`
|
|
20
|
+
|
|
21
|
+
A date / guests / time picker bar with a Reserve link, popovers positioned via Floating UI, and calendar/list panels rendered with the native Popover API inside an open shadow root.
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<script type="module">
|
|
25
|
+
import '@forgebuild/hotal-ui';
|
|
26
|
+
|
|
27
|
+
const bar = document.querySelector('reservation-bar');
|
|
28
|
+
|
|
29
|
+
// Function-valued and explicitly-false-when-default-is-true props must be
|
|
30
|
+
// set as JS properties, not HTML attributes (attributes are strings only,
|
|
31
|
+
// and HTML boolean-attribute semantics can't express "false" when the
|
|
32
|
+
// prop's own default is true).
|
|
33
|
+
bar.showReserveButton = false;
|
|
34
|
+
bar.fetchAvailableDates = async (partySize) => {
|
|
35
|
+
const res = await fetch(`/api/available-dates?party_size=${partySize}`);
|
|
36
|
+
const { dates } = await res.json();
|
|
37
|
+
return dates;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
bar.addEventListener('reservationchange', (e) => console.log(e.detail));
|
|
41
|
+
</script>
|
|
42
|
+
|
|
43
|
+
<reservation-bar reserve-href="/reservations" sync-with-url closed-weekdays="[0]"></reservation-bar>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
#### Attributes / properties
|
|
47
|
+
|
|
48
|
+
| Name | Attribute | Type | Default | Description |
|
|
49
|
+
| --- | --- | --- | --- | --- |
|
|
50
|
+
| `minGuests` | `min-guests` | `number` | `1` | Minimum selectable party size |
|
|
51
|
+
| `maxGuests` | `max-guests` | `number` | `20` | Maximum selectable party size |
|
|
52
|
+
| `defaultGuests` | `default-guests` | `number` | `2` | Initial party size |
|
|
53
|
+
| `timeSlots` | `time-slots` (JSON array) | `string[]` | `'7:00 PM'`–`'11:00 PM'` in 30-min steps | Selectable time options |
|
|
54
|
+
| `defaultTime` | `default-time` | `string` | `'7:00 PM'` | Initial time |
|
|
55
|
+
| `showReserveButton` | `show-reserve-button` | `boolean` | `true` | Whether the Reserve link is rendered. **Set as a JS property to get `false`** — see note above. |
|
|
56
|
+
| `reserveHref` | `reserve-href` | `string` | `'/reservations'` | Base URL the built query string is appended to |
|
|
57
|
+
| `applyOnSelect` | `apply-on-select` | `boolean` | `!showReserveButton` | Whether selecting a date/guests/time navigates to `reserveHref` immediately. Defaults to the inverse of `showReserveButton` (hiding the button makes the bar auto-navigate, its historical behavior); set explicitly to decouple the two — e.g. hide the button but keep `applyOnSelect={false}` when a host page syncs an inline booking flow itself off `reservationchange` and no navigation should happen. **Set as a JS property to get `false`.** |
|
|
58
|
+
| `syncWithUrl` | `sync-with-url` | `boolean` | `false` | Read initial date/guests/time from `location.search` on mount |
|
|
59
|
+
| `closedWeekdays` | `closed-weekdays` (JSON array) | `number[]` | `[]` | Weekdays (`0`=Sun–`6`=Sat) to disable in the calendar |
|
|
60
|
+
| `fetchAvailableDates` | — (property only) | `(partySize: number) => Promise<string[]>` | `undefined` | Drives which calendar dates are selectable |
|
|
61
|
+
|
|
62
|
+
#### Events
|
|
63
|
+
|
|
64
|
+
`reservationchange` — `CustomEvent<{ date: string; guests: number; time: string }>`, fires whenever the selection changes.
|
|
65
|
+
|
|
66
|
+
#### Theming
|
|
67
|
+
|
|
68
|
+
```css
|
|
69
|
+
reservation-bar {
|
|
70
|
+
--rb-bar-bg: rgba(14, 58, 62, 0.9);
|
|
71
|
+
--rb-bar-border: rgba(212, 154, 60, 0.4);
|
|
72
|
+
--rb-text-color: #fff;
|
|
73
|
+
--rb-accent-bg: #d49a3c;
|
|
74
|
+
--rb-accent-hover-bg: #e0ac57;
|
|
75
|
+
--rb-trigger-hover-bg: rgba(212, 154, 60, 0.15);
|
|
76
|
+
--rb-panel-bg: rgba(10, 10, 12, 0.92);
|
|
77
|
+
--rb-radius: 2px;
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### `<booking-flow>`
|
|
82
|
+
|
|
83
|
+
Search results, a Stripe payment form, booking submission, and confirmation — plus an empty-state calendar when a date has no availability. Decoupled from `<reservation-bar>`: the page mirrors `date`/`guests`/`time` into `<booking-flow>` itself, typically from a `reservation-bar`'s `reservationchange` event or from the page's own URL.
|
|
84
|
+
|
|
85
|
+
```html
|
|
86
|
+
<script type="module">
|
|
87
|
+
import '@forgebuild/hotal-ui';
|
|
88
|
+
|
|
89
|
+
const flow = document.querySelector('booking-flow');
|
|
90
|
+
|
|
91
|
+
flow.closedWeekdays = [0];
|
|
92
|
+
flow.fetchAvailableDates = async (partySize) => {
|
|
93
|
+
const res = await fetch(`/api/available-dates?party_size=${partySize}`);
|
|
94
|
+
const { dates } = await res.json();
|
|
95
|
+
return dates;
|
|
96
|
+
};
|
|
97
|
+
flow.searchSlots = async (date, guests) => {
|
|
98
|
+
const res = await fetch(`/api/search?date=${date}&party_size=${guests}`);
|
|
99
|
+
const { slots } = await res.json();
|
|
100
|
+
return slots;
|
|
101
|
+
};
|
|
102
|
+
flow.stripePublishableKey = 'pk_test_...';
|
|
103
|
+
flow.stripeAppearance = { theme: 'stripe' };
|
|
104
|
+
flow.createPaymentIntent = async (date, guests) => {
|
|
105
|
+
const res = await fetch('/api/create-payment-intent', {
|
|
106
|
+
method: 'POST',
|
|
107
|
+
headers: { 'Content-Type': 'application/json' },
|
|
108
|
+
body: JSON.stringify({ date, party_size: guests }),
|
|
109
|
+
});
|
|
110
|
+
return res.json();
|
|
111
|
+
};
|
|
112
|
+
flow.book = async (details) => {
|
|
113
|
+
const res = await fetch('/api/book', {
|
|
114
|
+
method: 'POST',
|
|
115
|
+
headers: { 'Content-Type': 'application/json' },
|
|
116
|
+
body: JSON.stringify(details),
|
|
117
|
+
});
|
|
118
|
+
return res.status === 201 ? { ok: true } : { ok: false, status: res.status, message: 'Something went wrong.' };
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
flow.date = '2026-08-20';
|
|
122
|
+
flow.guests = 2;
|
|
123
|
+
|
|
124
|
+
flow.addEventListener('booking-confirmed', (e) => console.log(e.detail));
|
|
125
|
+
</script>
|
|
126
|
+
|
|
127
|
+
<booking-flow></booking-flow>
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
#### Properties (all JS-only — no HTML attributes, since every property here is either dynamic state or a callback)
|
|
131
|
+
|
|
132
|
+
| Name | Type | Description |
|
|
133
|
+
| --- | --- | --- |
|
|
134
|
+
| `date` | `string` | Current search date (ISO) |
|
|
135
|
+
| `guests` | `number` | Current party size |
|
|
136
|
+
| `preferredTime` | `string` | Used to pre-select the closest available slot |
|
|
137
|
+
| `closedWeekdays` | `number[]` | Same convention as `reservation-bar`: `0`=Sun–`6`=Sat, for the empty-state calendar |
|
|
138
|
+
| `fetchAvailableDates` | `(partySize: number) => Promise<string[]>` | Drives the empty-state calendar's selectable dates |
|
|
139
|
+
| `searchSlots` | `(date: string, guests: number) => Promise<BookingSlot[]>` | Returns available time slots |
|
|
140
|
+
| `stripePublishableKey` | `string` | Stripe publishable key |
|
|
141
|
+
| `stripeAppearance` | `object` | Passed straight through to Stripe's `elements({ appearance })` |
|
|
142
|
+
| `createPaymentIntent` | `(date: string, guests: number) => Promise<PaymentIntentResult>` | Creates the Stripe PaymentIntent to hold |
|
|
143
|
+
| `book` | `(details: BookingDetails) => Promise<BookResult>` | Submits the reservation |
|
|
144
|
+
|
|
145
|
+
When `stripePublishableKey` / `createPaymentIntent` are not set, the payment section is not rendered, no card hold is taken, and `stripePaymentIntentId` is omitted from `BookingDetails`.
|
|
146
|
+
|
|
147
|
+
```ts
|
|
148
|
+
interface BookingSlot { time: string; availableTables: number; }
|
|
149
|
+
interface PaymentIntentResult { clientSecret: string; paymentIntentId: string; amountCents: number; }
|
|
150
|
+
interface BookingDetails {
|
|
151
|
+
date: string; startTime: string; timeDisplay: string; partySize: number;
|
|
152
|
+
contactName: string; contactEmail?: string; contactPhone?: string; notes?: string;
|
|
153
|
+
stripePaymentIntentId: string; clerkUserId?: string;
|
|
154
|
+
}
|
|
155
|
+
type BookResult = { ok: true } | { ok: false; status: number; message: string };
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
#### Events
|
|
159
|
+
|
|
160
|
+
`booking-confirmed` — `CustomEvent<{ date: string; time: string; guests: number }>`, fires once a booking succeeds.
|
|
161
|
+
|
|
162
|
+
#### Theming
|
|
163
|
+
|
|
164
|
+
```css
|
|
165
|
+
booking-flow {
|
|
166
|
+
--bf-text-color: #1a1a1a;
|
|
167
|
+
--bf-muted-text: rgba(0, 0, 0, 0.6);
|
|
168
|
+
--bf-border-color: rgba(0, 0, 0, 0.15);
|
|
169
|
+
--bf-accent-bg: #1a1a1a;
|
|
170
|
+
--bf-accent-text: #fff;
|
|
171
|
+
--bf-spinner-track: rgba(0, 0, 0, 0.15);
|
|
172
|
+
--bf-spinner-active: #1a1a1a;
|
|
173
|
+
}
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
### `<menu-section>`
|
|
177
|
+
|
|
178
|
+
A restaurant menu with category tabs (animated sliding indicator), an info grid, per-item allergen icons with tooltips, and an optional PDF-menu dialog. Two visual variants: the classic centered design, and `variant="panel"` — an eyebrow-above-heading header row with tabs on the right, a full-width boxed info grid, and a bordered item-card grid, rendered statically with instant category switching.
|
|
179
|
+
|
|
180
|
+
```html
|
|
181
|
+
<script type="module">import '@forgebuild/hotal-ui';</script>
|
|
182
|
+
|
|
183
|
+
<menu-section
|
|
184
|
+
variant="panel"
|
|
185
|
+
title="On the menu"
|
|
186
|
+
eyebrow="ZUMA"
|
|
187
|
+
categories='[{"label":"Bites","items":[{"name":"BBQ Chicken Sliders","description":"Jerk-glazed, brioche bun","price":"$17"}]}]'
|
|
188
|
+
info='[{"label":"Hours","value":"12:00 pm – late"}]'
|
|
189
|
+
></menu-section>
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
#### Attributes / properties
|
|
193
|
+
|
|
194
|
+
| Name | Attribute | Type | Default | Description |
|
|
195
|
+
| --- | --- | --- | --- | --- |
|
|
196
|
+
| `title` | `title` | `string` | `'MENU'` | Main heading |
|
|
197
|
+
| `eyebrow` | `eyebrow` | `string` | `''` | Secondary line (above the heading in `panel`, below it otherwise) |
|
|
198
|
+
| `categories` | `categories` (JSON) | `MenuCategory[]` | `[]` | `{ label, items: [{ name, description?, price?, tagline?, group?, country?, allergens? }] }` |
|
|
199
|
+
| `info` | `info` (JSON) | `{label, value}[]` | `[]` | Info rows (hours, dress code, …) |
|
|
200
|
+
| `allergens` | `allergens` (JSON) | `{id, label, icon}[]` | `[]` | Legend resolving item `allergens` ids to icons |
|
|
201
|
+
| `pdfUrl` / `pdfLabel` | `pdf-url` / `pdf-label` | `string` | — | Optional PDF menu opened in a dialog |
|
|
202
|
+
| `headingAlign` | `heading-align` | `'center' \| 'left'` | `'center'` | Classic variant only |
|
|
203
|
+
| `layout` | `layout` | `'stacked' \| 'split'` | `'stacked'` | Classic variant only |
|
|
204
|
+
| `variant` | `variant` | `'default' \| 'panel'` | `'default'` | Visual variant |
|
|
205
|
+
| `theme` | `theme` (JSON) | `object` | `{}` | Color overrides, applied as CSS custom properties |
|
|
206
|
+
| `groupFilter` | `group-filter` | `boolean` | `false` | Pill row filtering the active category by item `group` (e.g. country on a wine list) |
|
|
207
|
+
| `countryFilter` | `country-filter` | `boolean` | `false` | Pill row filtering by item `country` (e.g. region), narrowed to the active group |
|
|
208
|
+
| `groupFilterAllLabel` / `countryFilterAllLabel` | `group-filter-all-label` / `country-filter-all-label` | `string` | `'All'` | Label of the "show everything" pill |
|
|
209
|
+
|
|
210
|
+
The `panel` variant expects the host page to load the Syne and Inter fonts.
|
|
211
|
+
|
|
212
|
+
### `<room-grid>`
|
|
213
|
+
|
|
214
|
+
A room-type listing: filter tabs, a check-in/check-out range-calendar picker, and room cards (image, name, description, from-price, CTA) with a pile-and-spread entrance animation. Backend-agnostic — the host resolves image URLs and prices and passes plain data.
|
|
215
|
+
|
|
216
|
+
```html
|
|
217
|
+
<script type="module">
|
|
218
|
+
import '@forgebuild/hotal-ui';
|
|
219
|
+
|
|
220
|
+
const grid = document.querySelector('room-grid');
|
|
221
|
+
// Sync dates with storage / other pages
|
|
222
|
+
grid.checkIn = localStorage.getItem('checkin') ?? '';
|
|
223
|
+
grid.addEventListener('dates-change', (e) => console.log(e.detail)); // { checkIn, checkOut }
|
|
224
|
+
// Pair with <island-map>
|
|
225
|
+
grid.addEventListener('room-hover', (e) => map.highlightPin(e.detail.slug));
|
|
226
|
+
grid.addEventListener('room-leave', (e) => map.unhighlightPin(e.detail.slug));
|
|
227
|
+
</script>
|
|
228
|
+
|
|
229
|
+
<room-grid
|
|
230
|
+
rooms='[{"slug":"beachfront","name":"Beach Front Room","description":"Steps from the shore.","price":1200,"image":"/img/beachfront.jpg","tag":"Beach Front","href":"/accommodations/beachfront"}]'
|
|
231
|
+
filter-tabs='[{"label":"Beach Front","slug":"beachfront"}]'
|
|
232
|
+
currency="USD"
|
|
233
|
+
></room-grid>
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
#### Attributes / properties
|
|
237
|
+
|
|
238
|
+
| Name | Attribute | Type | Default | Description |
|
|
239
|
+
| --- | --- | --- | --- | --- |
|
|
240
|
+
| `rooms` | `rooms` (JSON) | `RoomGridRoom[]` | `[]` | `{ slug, name, description?, price?, image?, tag?, href? }` |
|
|
241
|
+
| `filterTabs` | `filter-tabs` (JSON) | `{label, slug}[]` | derived from `tag`s | Explicit tab labels, each matched to one room by slug |
|
|
242
|
+
| `checkIn` / `checkOut` | `check-in` / `check-out` | `string` (ISO) | `''` | Selected dates; settable as JS properties |
|
|
243
|
+
| `currency` | `currency` | `string` | `'USD'` | Suffix on the from-price |
|
|
244
|
+
| `allLabel` | `all-label` | `string` | `'All'` | First tab's label |
|
|
245
|
+
|
|
246
|
+
#### Events
|
|
247
|
+
|
|
248
|
+
- `dates-change` — `CustomEvent<{ checkIn: string; checkOut: string }>` on every calendar pick
|
|
249
|
+
- `room-hover` / `room-leave` — `CustomEvent<{ slug: string }>` on card pointer enter/leave
|
|
250
|
+
|
|
251
|
+
Expects the host page to load the Syne and Inter fonts.
|
|
252
|
+
|
|
253
|
+
### `<island-map>`
|
|
254
|
+
|
|
255
|
+
A Google Map with branded pop-up pin cards. Self-bootstrapping: reuses whatever Google Maps loader the page already has (`gmpx-api-loader`, `@googlemaps/js-api-loader`, another `island-map`), and injects the official bootstrap itself with `api-key` otherwise. Pins are hidden until highlighted (elastic pop) — pair with `<room-grid>`'s hover events — or shown permanently with `pins-visible`.
|
|
256
|
+
|
|
257
|
+
```html
|
|
258
|
+
<script type="module">import '@forgebuild/hotal-ui';</script>
|
|
259
|
+
|
|
260
|
+
<island-map
|
|
261
|
+
class="h-[480px] w-full"
|
|
262
|
+
pins='[{"label":"Beach Front Room","sub":"From USD 1,200","lat":18.3465,"lng":-64.5905,"slug":"beachfront"}]'
|
|
263
|
+
center="18.352,-64.591"
|
|
264
|
+
zoom="14"
|
|
265
|
+
map-id="YOUR_CLOUD_MAP_ID"
|
|
266
|
+
api-key="YOUR_MAPS_KEY"
|
|
267
|
+
></island-map>
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
#### Attributes / properties
|
|
271
|
+
|
|
272
|
+
| Name | Attribute | Type | Default | Description |
|
|
273
|
+
| --- | --- | --- | --- | --- |
|
|
274
|
+
| `pins` | `pins` (JSON) | `IslandMapPin[]` | `[]` | `{ label, sub?, lat, lng, slug? }` |
|
|
275
|
+
| `center` | `center` | `string` | `'0,0'` | `"lat,lng"` |
|
|
276
|
+
| `zoom` | `zoom` | `number` | `14` | Initial zoom |
|
|
277
|
+
| `mapId` | `map-id` | `string` | `''` | Google Cloud map id (styling) |
|
|
278
|
+
| `apiKey` | `api-key` | `string` | `''` | Used only when no Maps loader is already on the page |
|
|
279
|
+
| `colorScheme` | `color-scheme` | `'' \| 'DARK' \| 'LIGHT' \| 'FOLLOW_SYSTEM'` | `''` | Leave unset with a styled `map-id` — setting it overrides the cloud style with Google's base theme |
|
|
280
|
+
| `fitPins` | `fit-pins` | `boolean` | `true` | Fit the viewport to the pins on load |
|
|
281
|
+
| `fitPadding` / `panY` | `fit-padding` / `pan-y` | `number` | `-50` / `-100` | Fit-bounds padding and post-fit vertical pan |
|
|
282
|
+
| `interactionLock` | `interaction-lock` | `boolean` | `true` | Swallow map gestures until the visitor clicks once |
|
|
283
|
+
| `pinsVisible` | `pins-visible` | `boolean` | `false` | Show all pin cards permanently |
|
|
284
|
+
| `lazy` | `lazy` | `boolean` | `false` | Defer map creation until the element nears the viewport |
|
|
285
|
+
| `zoomControl` | `zoom-control` | `boolean` | `false` | Show the +/− zoom buttons |
|
|
286
|
+
|
|
287
|
+
#### Methods
|
|
288
|
+
|
|
289
|
+
`highlightPin(slug)` / `unhighlightPin(slug)` — pop or hide the pin cards registered under that slug.
|
|
290
|
+
|
|
291
|
+
Default height is `480px` via `:host`; override with a class or inline style on the element.
|
|
292
|
+
|
|
293
|
+
### `<floor-plan-hero>`
|
|
294
|
+
|
|
295
|
+
Renders a PMS floor plan (`room_type.floor_plan`: `{ rooms, items, w, h }`) as an SVG — zone rectangles with labels/m², furniture assets, optional architectural background. Default form is a hero overlay panel (header row, close button, slide-up transition, starts hidden — position it with host classes and open it from your own trigger); `bare` renders just the plan for embedding in a host-styled container. Zone hover emits events the host can use to swap a hero image.
|
|
296
|
+
|
|
297
|
+
```html
|
|
298
|
+
<script type="module">
|
|
299
|
+
import '@forgebuild/hotal-ui';
|
|
300
|
+
|
|
301
|
+
const fp = document.querySelector('floor-plan-hero');
|
|
302
|
+
layoutButton.addEventListener('click', () => fp.toggle());
|
|
303
|
+
fp.addEventListener('zone-hover', (e) => { if (e.detail.img) heroImg.src = e.detail.img; });
|
|
304
|
+
fp.addEventListener('zone-leave', () => (heroImg.src = defaultSrc));
|
|
305
|
+
</script>
|
|
306
|
+
|
|
307
|
+
<floor-plan-hero
|
|
308
|
+
class="absolute right-[120px] bottom-[200px] w-[520px]"
|
|
309
|
+
plan='{"w":760,"h":480,"rooms":[{"id":"r1","type":"bedroom","label":"Bedroom","x":60,"y":60,"w":180,"h":140}],"items":[{"id":"i1","asset":"asset4","x":0,"y":0,"w":71,"h":80}]}'
|
|
310
|
+
></floor-plan-hero>
|
|
311
|
+
|
|
312
|
+
<!-- Chromeless, on a light surface -->
|
|
313
|
+
<floor-plan-hero theme="light" bare plan="..."></floor-plan-hero>
|
|
314
|
+
```
|
|
315
|
+
|
|
316
|
+
#### Attributes / properties
|
|
317
|
+
|
|
318
|
+
| Name | Attribute | Type | Default | Description |
|
|
319
|
+
| --- | --- | --- | --- | --- |
|
|
320
|
+
| `plan` | `plan` (JSON) | `FloorPlan` | `{}` | `{ rooms: [{id, type?, label?, x, y, w, h, sqm?, imgUrl?}], items: [{id, asset, x, y, w, h}], w?, h? }` |
|
|
321
|
+
| `bgUrl` | `bg-url` | `string` | — | Architectural background image, rendered at 30% opacity |
|
|
322
|
+
| `assetBase` | `asset-base` | `string` | `'/SVG/'` | Item assets resolve to `${assetBase}Asset {n}.svg` (asset key `"asset4"` → `Asset 4.svg`) |
|
|
323
|
+
| `label` / `closeLabel` | `label` / `close-label` | `string` | `'Floor plan'` / `'Close ×'` | Panel header copy |
|
|
324
|
+
| `theme` | `theme` | `'dark' \| 'light'` | `'dark'` | Zone/label palette |
|
|
325
|
+
| `bare` | `bare` | `boolean` | `false` | Plan SVG only — no header, chrome, or open/close state |
|
|
326
|
+
|
|
327
|
+
#### Methods & events
|
|
328
|
+
|
|
329
|
+
`open()` / `close()` / `toggle()` — panel visibility (no-ops in `bare` mode, which is always visible).
|
|
330
|
+
`zone-hover` / `zone-leave` — `CustomEvent<{ img?: string; label?: string; type?: string }>` on zone pointer enter/leave. `panel-close` fires when the internal close button is used.
|
|
331
|
+
|
|
332
|
+
### `<stay-search>`
|
|
333
|
+
|
|
334
|
+
A hero availability search: a glass check-in/check-out bar, a two-month range calendar, a search status spinner/tick, and a results dropdown of room cards (image, name, description, total for the stay). Results are **joined against the `rooms` prop by PMS room-type id** — anything the search returns that isn't a listed room is dropped, so PMS-side test data never reaches guests. Card imagery and copy come from the host (CMS), rates from the search.
|
|
335
|
+
|
|
336
|
+
```html
|
|
337
|
+
<script type="module">
|
|
338
|
+
import '@forgebuild/hotal-ui';
|
|
339
|
+
|
|
340
|
+
const search = document.querySelector('stay-search');
|
|
341
|
+
search.checkIn = localStorage.getItem('checkin') ?? '';
|
|
342
|
+
search.searchStays = async (checkIn, checkOut, guests) => {
|
|
343
|
+
const res = await fetch(`/api/ota/availability/search?check_in=${checkIn}&check_out=${checkOut}&guests=${guests}`);
|
|
344
|
+
return res.json(); // [{ room_type_id, from_rate, ... }]
|
|
345
|
+
};
|
|
346
|
+
search.addEventListener('dates-change', (e) => console.log(e.detail));
|
|
347
|
+
</script>
|
|
348
|
+
|
|
349
|
+
<stay-search
|
|
350
|
+
class="block w-full max-w-[680px]"
|
|
351
|
+
rooms='[{"roomTypeId":"92fc4ca8-…","name":"Beach Front Room","description":"Steps from the shore.","image":"/img/beachfront.jpg","href":"/accommodations/beachfront"}]'
|
|
352
|
+
currency="USD"
|
|
353
|
+
></stay-search>
|
|
354
|
+
```
|
|
355
|
+
|
|
356
|
+
#### Attributes / properties
|
|
357
|
+
|
|
358
|
+
| Name | Attribute | Type | Default | Description |
|
|
359
|
+
| --- | --- | --- | --- | --- |
|
|
360
|
+
| `rooms` | `rooms` (JSON) | `StaySearchRoom[]` | `[]` | `{ roomTypeId, name, description?, image?, href? }` — the join filter for results |
|
|
361
|
+
| `checkIn` / `checkOut` | `check-in` / `check-out` | `string` (ISO) | `''` | Selected dates; settable as JS properties |
|
|
362
|
+
| `guests` | `guests` | `number` | `2` | Passed to `searchStays` |
|
|
363
|
+
| `currency` | `currency` | `string` | `'USD'` | Shown in the card rate subline |
|
|
364
|
+
| `appendDatesToHref` | `append-dates-to-href` | `boolean` | `true` | Append `?check_in=…&check_out=…` to card hrefs |
|
|
365
|
+
| `searchStays` | — (property only) | `(checkIn, checkOut, guests) => Promise<StaySearchResult[]>` | — | Runs when a complete range is picked; results need `room_type_id` and `from_rate` |
|
|
366
|
+
|
|
367
|
+
#### Events
|
|
368
|
+
|
|
369
|
+
`dates-change` — `CustomEvent<{ checkIn: string; checkOut: string }>` on every pick.
|
|
370
|
+
`search-results` — `CustomEvent<{ checkIn, checkOut, guests, count }>` after each search renders.
|
|
371
|
+
|
|
372
|
+
Expects the host page to load the Syne and Inter fonts.
|
|
373
|
+
|
|
374
|
+
### `<availability-calendar>`
|
|
375
|
+
|
|
376
|
+
An inline range calendar for a stay: per-day nightly rates under each date (PMS `min_rate`), dates with no availability disabled, teal-gradient range selection. Two months side by side on desktop, one on mobile.
|
|
377
|
+
|
|
378
|
+
```html
|
|
379
|
+
<script type="module">
|
|
380
|
+
import '@forgebuild/hotal-ui';
|
|
381
|
+
|
|
382
|
+
const cal = document.querySelector('availability-calendar');
|
|
383
|
+
cal.fetchAvailability = async (from, to) => {
|
|
384
|
+
const res = await fetch(`/api/availability?room_type_id=…&from=${from}&to=${to}`);
|
|
385
|
+
return res.json(); // [{ date, available_rooms, min_rate }]
|
|
386
|
+
};
|
|
387
|
+
cal.addEventListener('dates-change', (e) => console.log(e.detail)); // { checkIn, checkOut }
|
|
388
|
+
</script>
|
|
389
|
+
|
|
390
|
+
<availability-calendar></availability-calendar>
|
|
391
|
+
```
|
|
392
|
+
|
|
393
|
+
| Name | Attribute | Type | Default | Description |
|
|
394
|
+
| --- | --- | --- | --- | --- |
|
|
395
|
+
| `checkIn` / `checkOut` | `check-in` / `check-out` | `string` (ISO) | `''` | Selected range; settable as JS properties |
|
|
396
|
+
| `horizonMonths` | `horizon-months` | `number` | `12` | Availability window requested from the loader |
|
|
397
|
+
| `fetchAvailability` | — (property only) | `(fromISO, toISO) => Promise<AvailabilityDay[]>` | — | Dates absent from the result render as unavailable |
|
|
398
|
+
|
|
399
|
+
Emits `dates-change` on every pick.
|
|
400
|
+
|
|
401
|
+
### `<booking-card>`
|
|
402
|
+
|
|
403
|
+
The reserve card for a room-type page: from-price header, check-in/check-out fields with a white/teal popup calendar (availability-aware via the same loader contract as `<availability-calendar>`), guest stepper, live price breakdown (subtotal, resort fee, total), Reserve CTA with the green wipe hover, fine print, and a concierge footer.
|
|
404
|
+
|
|
405
|
+
```html
|
|
406
|
+
<script type="module">
|
|
407
|
+
import '@forgebuild/hotal-ui';
|
|
408
|
+
|
|
409
|
+
const card = document.querySelector('booking-card');
|
|
410
|
+
card.fetchAvailability = async (from, to) => (await fetch(`/api/availability?…`)).json();
|
|
411
|
+
card.addEventListener('dates-change', (e) => console.log(e.detail));
|
|
412
|
+
card.addEventListener('reserve', (e) => {
|
|
413
|
+
const { checkIn, checkOut, guests } = e.detail;
|
|
414
|
+
location.href = `/book?checkin=${checkIn}&checkout=${checkOut}&guests=${guests}`;
|
|
415
|
+
});
|
|
416
|
+
</script>
|
|
417
|
+
|
|
418
|
+
<booking-card class="sticky top-[100px] block" price="3800" max-guests="4" currency="USD"></booking-card>
|
|
419
|
+
```
|
|
420
|
+
|
|
421
|
+
| Name | Attribute | Type | Default | Description |
|
|
422
|
+
| --- | --- | --- | --- | --- |
|
|
423
|
+
| `price` | `price` | `number` | `0` | Nightly from-rate; the breakdown prices every night at this rate |
|
|
424
|
+
| `maxGuests` | `max-guests` | `number` | `4` | Guest stepper ceiling |
|
|
425
|
+
| `resortFeeRate` | `resort-fee-rate` | `number` | `0.03` | Fee as a fraction of the subtotal |
|
|
426
|
+
| `ratingText` / `finePrint` | `rating-text` / `fine-print` | `string` | — | Header and footer copy |
|
|
427
|
+
| `conciergeTitle` / `conciergeSub` / `conciergeCtaLabel` / `conciergeCtaHref` | kebab-case | `string` | Island Concierge defaults | Footer block |
|
|
428
|
+
| `checkIn` / `checkOut` / `guests` | `check-in` / `check-out` / `guests` | ISO / number | `''` / `2` | Current stay; settable as JS properties |
|
|
429
|
+
| `fetchAvailability` | — (property only) | as above | — | Disables unavailable dates in the popup |
|
|
430
|
+
|
|
431
|
+
Emits `dates-change`, `guests-change`, and `reserve` (`{ checkIn, checkOut, guests }` — navigation is the host's job).
|
|
432
|
+
|
|
433
|
+
### `room-grid` rows & feature variants
|
|
434
|
+
|
|
435
|
+
`<room-grid variant="rows" rooms='…' currency="USD">` renders the same room data as compact horizontal cards (image left, tag/name/description, price per night right) on a light surface — two columns on desktop, no filter bar, dates, or entrance motion. For "more accommodations" style listings.
|
|
436
|
+
|
|
437
|
+
`<room-grid variant="feature" rooms='…' currency="USD">` renders homepage feature cards: tag badge over the image, whole-card links, a scroll-snap carousel on mobile that becomes a 3-column grid on desktop, and a scroll-triggered fade-up entrance. Emits the same `room-hover`/`room-leave` events — pair with `<island-map>`.
|
|
438
|
+
|
|
439
|
+
### `<dining-teaser>`
|
|
440
|
+
|
|
441
|
+
A two-column homepage teaser: heading + body copy, a hoverable/focusable list of venues with a colour-coded status dot, and a CTA — beside a cross-fading photo that tracks whichever venue is active. Scroll-triggered fade/slide entrance, skipped under `prefers-reduced-motion`.
|
|
442
|
+
|
|
443
|
+
```html
|
|
444
|
+
<script type="module">
|
|
445
|
+
import '@forgebuild/hotal-ui';
|
|
446
|
+
|
|
447
|
+
const teaser = document.querySelector('dining-teaser');
|
|
448
|
+
teaser.addEventListener('venue-change', (e) => console.log(e.detail)); // { index, key }
|
|
449
|
+
</script>
|
|
450
|
+
|
|
451
|
+
<dining-teaser
|
|
452
|
+
class="mx-auto max-w-[1530px]"
|
|
453
|
+
heading="Restaurants."
|
|
454
|
+
heading-accent="No compromise."
|
|
455
|
+
body="From open-fire dry-aged steaks to fresh catch and rum cocktails — dining here is never an afterthought."
|
|
456
|
+
cta-label="Explore dining"
|
|
457
|
+
cta-href="/dining"
|
|
458
|
+
venues='[{"key":"beefbar","name":"beefbar","tag":"Dinner · Fine Dining","image":"/img/beefbar.jpg"}]'
|
|
459
|
+
></dining-teaser>
|
|
460
|
+
```
|
|
461
|
+
|
|
462
|
+
#### Attributes / properties
|
|
463
|
+
|
|
464
|
+
| Name | Attribute | Type | Default | Description |
|
|
465
|
+
| --- | --- | --- | --- | --- |
|
|
466
|
+
| `venues` | `venues` (JSON) | `{key, name, tag?, image}[]` | `[]` | Rendered in order; hovering, focusing, or clicking a row makes it active |
|
|
467
|
+
| `heading` / `headingAccent` | `heading` / `heading-accent` | `string` | `'Restaurants.'` / `'No compromise.'` | Two-line heading, second line in the accent colour |
|
|
468
|
+
| `body` | `body` | `string` | — | Paragraph under the heading |
|
|
469
|
+
| `ctaLabel` / `ctaHref` | `cta-label` / `cta-href` | `string` | `'Explore dining'` / `'/dining'` | The outlined link below the venue list |
|
|
470
|
+
| `imageLabel` | `image-label` | `string` | — | Fixed photo caption. Omit to have it track the active venue's `name` instead |
|
|
471
|
+
| `activeIndex` | `active-index` | `number` | `0` | Active venue index; settable as a JS property, kept in sync as the visitor interacts |
|
|
472
|
+
|
|
473
|
+
#### Events
|
|
474
|
+
|
|
475
|
+
`venue-change` — `CustomEvent<{ index: number; key: string }>`, fires once on mount and again whenever the active venue changes.
|
|
476
|
+
|
|
477
|
+
#### Theming
|
|
478
|
+
|
|
479
|
+
```css
|
|
480
|
+
dining-teaser {
|
|
481
|
+
--dt-bg: #f5f2ec;
|
|
482
|
+
--dt-heading-color: #0a0814;
|
|
483
|
+
--dt-accent-color: rgb(180, 20, 80);
|
|
484
|
+
--dt-body-color: rgba(10, 8, 20, 0.65);
|
|
485
|
+
--dt-venue-bg: rgba(10, 8, 20, 0.04);
|
|
486
|
+
--dt-venue-bg-hover: rgba(10, 8, 20, 0.07);
|
|
487
|
+
--dt-venue-border: rgba(10, 8, 20, 0.08);
|
|
488
|
+
--dt-venue-border-hover: rgba(10, 8, 20, 0.14);
|
|
489
|
+
--dt-venue-name-color: #0a0814;
|
|
490
|
+
--dt-venue-type-color: rgba(10, 8, 20, 0.35);
|
|
491
|
+
--dt-dot-color: rgb(155, 93, 229);
|
|
492
|
+
--dt-dot-active-color: rgb(247, 37, 133);
|
|
493
|
+
--dt-cta-border: rgba(10, 8, 20, 0.15);
|
|
494
|
+
--dt-cta-text: #0a0814;
|
|
495
|
+
--dt-cta-hover-bg: #1a1a18;
|
|
496
|
+
--dt-cta-hover-text: #f0eeff;
|
|
497
|
+
--dt-image-height: 480px;
|
|
498
|
+
}
|
|
499
|
+
```
|
|
500
|
+
|
|
501
|
+
Expects the host page to load the Syne, Inter, and Cormorant Garamond fonts.
|
|
502
|
+
|
|
503
|
+
### `<booking-checkout>`
|
|
504
|
+
|
|
505
|
+
A checkout form: "booking for myself / someone else" toggle (with a booker sub-form), primary guest details, a country + phone-code pair (built on `<searchable-select>`, cross-synced both ways, plus phone-typed country inference), a Stripe Payment Element, the submit button, and an optional cancellation-policy block. Backend-agnostic — the host creates the PaymentIntent and does the actual booking POST; this component only calls `stripe.confirmPayment` and hands the result to `submitBooking`.
|
|
506
|
+
|
|
507
|
+
```html
|
|
508
|
+
<script type="module">
|
|
509
|
+
import '@forgebuild/hotal-ui';
|
|
510
|
+
|
|
511
|
+
const checkout = document.querySelector('booking-checkout');
|
|
512
|
+
checkout.resolveInitialLocation = async () => {
|
|
513
|
+
const res = await fetch('https://api.geoapify.com/v1/ipinfo?apiKey=...');
|
|
514
|
+
const data = await res.json();
|
|
515
|
+
return data?.country?.name ? { countryName: data.country.name, iso2: data.country.iso_code } : null;
|
|
516
|
+
};
|
|
517
|
+
checkout.beforeSubmit = async () => {
|
|
518
|
+
// e.g. re-price the PaymentIntent for extras added after it was created
|
|
519
|
+
};
|
|
520
|
+
checkout.submitBooking = async (payload) => {
|
|
521
|
+
const res = await fetch('/api/book', {
|
|
522
|
+
method: 'POST',
|
|
523
|
+
headers: { 'Content-Type': 'application/json' },
|
|
524
|
+
body: JSON.stringify(payload),
|
|
525
|
+
});
|
|
526
|
+
const data = await res.json();
|
|
527
|
+
return data.success ? { ok: true, ref: data.ref } : { ok: false, message: data.error ?? 'Something went wrong.' };
|
|
528
|
+
};
|
|
529
|
+
checkout.addEventListener('checkout-confirmed', (e) => {
|
|
530
|
+
window.location.href = `/book/confirm?ref=${e.detail.ref}`;
|
|
531
|
+
});
|
|
532
|
+
</script>
|
|
533
|
+
|
|
534
|
+
<booking-checkout
|
|
535
|
+
total="3800"
|
|
536
|
+
currency="USD"
|
|
537
|
+
client-secret="pi_..._secret_..."
|
|
538
|
+
stripe-publishable-key="pk_test_..."
|
|
539
|
+
cancellation-policy="Full refund up to 14 days before check-in."
|
|
540
|
+
locations='[{"iso2":"GB","countryName":"United Kingdom","dialCode":"+44"}]'
|
|
541
|
+
default-phone-code="+44"
|
|
542
|
+
></booking-checkout>
|
|
543
|
+
```
|
|
544
|
+
|
|
545
|
+
#### Attributes / properties
|
|
546
|
+
|
|
547
|
+
| Name | Attribute | Type | Default | Description |
|
|
548
|
+
| --- | --- | --- | --- | --- |
|
|
549
|
+
| `total` | `total` | `number` | `0` | Drives the submit button's amount label; settable as a JS property, so the host can update it after extras change |
|
|
550
|
+
| `currency` | `currency` | `string` | `'USD'` | Used for the amount label |
|
|
551
|
+
| `clientSecret` | `client-secret` | `string` | — | Stripe PaymentIntent client secret, created server-side by the host |
|
|
552
|
+
| `stripePublishableKey` | `stripe-publishable-key` | `string` | — | Stripe publishable key |
|
|
553
|
+
| `stripeAppearance` | `stripe-appearance` (JSON) | `object` | `{}` | Passed to `stripe.elements({ appearance })` |
|
|
554
|
+
| `cancellationPolicy` | `cancellation-policy` | `string` | — | Shown in a dedicated section when present; omit to hide it entirely |
|
|
555
|
+
| `locations` | `locations` (JSON) | `{iso2, countryName, dialCode}[]` | `[]` | Source for both selects — country options keep every entry, phone-code options are deduplicated by `dialCode` |
|
|
556
|
+
| `defaultPhoneCode` | `default-phone-code` | `string` | `'+1'` | Initial value for both phone-code selects |
|
|
557
|
+
| `allowBookingForOther` | `allow-booking-for-other` | `boolean` | `true` | Hides the toggle and booker sub-form when `false` |
|
|
558
|
+
| `termsHref` | `terms-href` | `string` | `'/terms'` | Terms link and "full policy details" link target |
|
|
559
|
+
| `prefill` | — (property only) | `{firstName?, lastName?, email?}` | — | Settable post-mount (e.g. once an async auth check resolves); only fills fields still empty |
|
|
560
|
+
| `resolveInitialLocation` | — (property only) | `() => Promise<{countryName, iso2?, dialCode?} \| null>` | — | Called once on mount to seed the country/phone-code selects |
|
|
561
|
+
| `beforeSubmit` | — (property only) | `() => Promise<void>` | — | Awaited right before the card is charged |
|
|
562
|
+
| `submitBooking` | — (property only) | `(payload) => Promise<{ok:true,ref?} \| {ok:false,message}>` | — | Called after a successful charge; the component never talks to the booking API itself |
|
|
563
|
+
| `strings` | `strings` (JSON) | `object` | — | Label overrides — see the component source for the full key list |
|
|
564
|
+
|
|
565
|
+
#### Events
|
|
566
|
+
|
|
567
|
+
`checkout-confirmed` — `CustomEvent<{ ref?: string }>`, fires once `submitBooking` resolves `{ ok: true }`. Navigation is the host's job.
|
|
568
|
+
|
|
569
|
+
`ready` — fires once after the initial mount attempt (Stripe configured or not, succeeded or failed) — a hook for dismissing a page-level loading state without racing the Payment Element's own mount.
|
|
570
|
+
|
|
571
|
+
#### Theming
|
|
572
|
+
|
|
573
|
+
```css
|
|
574
|
+
booking-checkout {
|
|
575
|
+
--bc-text-color: #05040f;
|
|
576
|
+
--bc-muted-text: rgba(5, 4, 15, 0.4);
|
|
577
|
+
--bc-muted-text-strong: rgba(5, 4, 15, 0.55);
|
|
578
|
+
--bc-border-color: rgba(5, 4, 15, 0.15);
|
|
579
|
+
--bc-input-bg: #f5f2ec;
|
|
580
|
+
--bc-input-border: rgba(5, 4, 15, 0.12);
|
|
581
|
+
--bc-input-border-focus: rgba(5, 4, 15, 0.4);
|
|
582
|
+
--bc-accent-bg: #05040f;
|
|
583
|
+
--bc-accent-text: #f5f2ec;
|
|
584
|
+
}
|
|
585
|
+
```
|
|
586
|
+
|
|
587
|
+
Expects the host page to load the Inter font, and needs `<searchable-select>` registered (it is, automatically, by importing this package).
|
|
588
|
+
|
|
589
|
+
### `<confirmation-card>`
|
|
590
|
+
|
|
591
|
+
A centered confirmation card: gradient check icon, eyebrow, heading, body copy, an optional booking-reference box, up to two action links, and an optional footer note built around one embedded link. Static — no props are callbacks, no events are emitted. The host owns full-page centering (`display: flex; align-items: center; justify-content: center`) around it.
|
|
592
|
+
|
|
593
|
+
```html
|
|
594
|
+
<script type="module">import '@forgebuild/hotal-ui';</script>
|
|
595
|
+
|
|
596
|
+
<confirmation-card
|
|
597
|
+
eyebrow="Booking Confirmed"
|
|
598
|
+
heading="You're all set."
|
|
599
|
+
body="Your reservation at HOTAL has been confirmed. A confirmation email is on its way to you."
|
|
600
|
+
reference="d82cdc93-54fe-4f6a-ae77-8fb2dc7ad1a8"
|
|
601
|
+
primary-label="View My Bookings"
|
|
602
|
+
primary-href="/account"
|
|
603
|
+
secondary-label="Back to Home"
|
|
604
|
+
secondary-href="/"
|
|
605
|
+
note-prefix="Questions about your stay?"
|
|
606
|
+
note-link-label="Contact our concierge team"
|
|
607
|
+
note-link-href="/contact"
|
|
608
|
+
note-suffix="— we're here to help with anything you need before you arrive."
|
|
609
|
+
></confirmation-card>
|
|
610
|
+
```
|
|
611
|
+
|
|
612
|
+
#### Attributes / properties
|
|
613
|
+
|
|
614
|
+
| Name | Attribute | Type | Default | Description |
|
|
615
|
+
| --- | --- | --- | --- | --- |
|
|
616
|
+
| `eyebrow` | `eyebrow` | `string` | `'Booking Confirmed'` | Line above the heading; omit to hide |
|
|
617
|
+
| `heading` | `heading` | `string` | `"You're all set."` | |
|
|
618
|
+
| `body` | `body` | `string` | — | |
|
|
619
|
+
| `reference` / `referenceLabel` | `reference` / `reference-label` | `string` | `''` / `'Booking Reference'` | The boxed reference number; the box is omitted entirely when `reference` is empty |
|
|
620
|
+
| `primaryLabel` / `primaryHref` | `primary-label` / `primary-href` | `string` | — | Filled button; omitted when `primaryLabel` is empty |
|
|
621
|
+
| `secondaryLabel` / `secondaryHref` | `secondary-label` / `secondary-href` | `string` | — | Outlined button; both must be set to render |
|
|
622
|
+
| `notePrefix` / `noteLinkLabel` / `noteLinkHref` / `noteSuffix` | kebab-case | `string` | — | Footer note text split around one embedded link; omitted entirely when both `notePrefix` and the link are empty |
|
|
623
|
+
|
|
624
|
+
#### Theming
|
|
625
|
+
|
|
626
|
+
```css
|
|
627
|
+
confirmation-card {
|
|
628
|
+
--cc-card-bg: #fff;
|
|
629
|
+
--cc-border-color: rgba(5, 4, 15, 0.08);
|
|
630
|
+
--cc-icon-bg: linear-gradient(135deg, rgb(0, 245, 212) 0%, rgb(79, 142, 247) 100%);
|
|
631
|
+
--cc-text-color: #05040f;
|
|
632
|
+
--cc-muted-text: rgba(5, 4, 15, 0.4);
|
|
633
|
+
--cc-muted-text-strong: rgba(5, 4, 15, 0.55);
|
|
634
|
+
--cc-ref-bg: rgba(5, 4, 15, 0.03);
|
|
635
|
+
--cc-accent-bg: #05040f;
|
|
636
|
+
--cc-accent-text: #fff;
|
|
637
|
+
--cc-note-border: rgba(5, 4, 15, 0.06);
|
|
638
|
+
--cc-max-width: 560px;
|
|
639
|
+
}
|
|
640
|
+
```
|
|
641
|
+
|
|
642
|
+
Expects the host page to load the Syne and Inter fonts. Not to be confused with `<booking-confirmed>` above — that one is a compact inline step meant for a checkout *modal* (icon + heading + a "Done" button that emits an event back to the host); this one is a standalone full-page card with no host callback, built for a dedicated `/confirm`-style route.
|
|
643
|
+
|
|
644
|
+
## Development
|
|
645
|
+
|
|
646
|
+
```
|
|
647
|
+
npm install
|
|
648
|
+
npm run dev # serves demo/
|
|
649
|
+
npm run check # type-check
|
|
650
|
+
npm run build # library build → dist/
|
|
651
|
+
```
|
|
652
|
+
|
|
653
|
+
## Publishing
|
|
654
|
+
|
|
655
|
+
```
|
|
656
|
+
npm run build
|
|
657
|
+
npm publish
|
|
658
|
+
```
|
|
659
|
+
|
|
660
|
+
Requires being logged in to npm (`npm whoami`) as an account with publish rights to the `@forgebuild` scope.
|