@vonage/vivid 3.5.0 → 3.6.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 (92) hide show
  1. package/README.md +22 -9
  2. package/banner/index.js +2 -0
  3. package/breadcrumb/index.js +1 -1
  4. package/breadcrumb-item/index.js +1 -1
  5. package/button/index.js +2 -0
  6. package/calendar/index.js +1 -1
  7. package/calendar-event/index.js +1 -1
  8. package/card/index.js +2 -2
  9. package/checkbox/index.js +1 -1
  10. package/combobox/index.js +6 -4
  11. package/custom-elements.json +49 -0
  12. package/data-grid/index.js +1 -1
  13. package/dialog/index.js +4 -2
  14. package/divider/index.js +1 -1
  15. package/elevation/index.js +1 -1
  16. package/fab/index.js +1 -1
  17. package/header/index.js +2 -2
  18. package/index.js +26 -26
  19. package/layout/index.js +1 -1
  20. package/lib/action-group/action-group.d.ts +2 -0
  21. package/lib/button/button.d.ts +1 -0
  22. package/lib/button/button.template.d.ts +1 -1
  23. package/lib/select/select.d.ts +2 -3
  24. package/listbox/index.js +2 -2
  25. package/menu/index.js +6 -4
  26. package/menu-item/index.js +1 -1
  27. package/nav/index.js +1 -1
  28. package/nav-disclosure/index.js +1 -1
  29. package/nav-item/index.js +1 -1
  30. package/note/index.js +1 -1
  31. package/number-field/index.js +4 -2
  32. package/option/index.js +1 -1
  33. package/package.json +1 -1
  34. package/popup/index.js +4 -2
  35. package/progress/index.js +1 -1
  36. package/progress-ring/index.js +1 -1
  37. package/select/index.js +5 -3
  38. package/shared/definition.js +1 -1
  39. package/shared/definition10.js +69 -91
  40. package/shared/definition11.js +91 -40
  41. package/shared/definition12.js +31 -755
  42. package/shared/definition13.js +754 -93
  43. package/shared/definition14.js +100 -103
  44. package/shared/definition15.js +106 -24
  45. package/shared/definition16.js +24 -164
  46. package/shared/definition17.js +108 -663
  47. package/shared/definition18.js +667 -1533
  48. package/shared/definition19.js +1545 -223
  49. package/shared/definition2.js +1 -1
  50. package/shared/definition20.js +183 -964
  51. package/shared/definition21.js +1037 -222
  52. package/shared/definition22.js +226 -67
  53. package/shared/definition23.js +68 -77
  54. package/shared/definition24.js +76 -47
  55. package/shared/definition25.js +46 -32
  56. package/shared/definition26.js +35 -49
  57. package/shared/definition27.js +48 -344
  58. package/shared/definition28.js +273 -282
  59. package/shared/definition29.js +356 -14
  60. package/shared/definition30.js +13 -67
  61. package/shared/definition31.js +65 -21
  62. package/shared/definition32.js +21 -39
  63. package/shared/definition33.js +31 -432
  64. package/shared/definition34.js +432 -76
  65. package/shared/definition35.js +76 -59
  66. package/shared/definition36.js +1 -1
  67. package/shared/definition37.js +1 -1
  68. package/shared/definition38.js +7 -6
  69. package/shared/definition39.js +1 -1
  70. package/shared/definition4.js +1 -1
  71. package/shared/definition41.js +1 -1
  72. package/shared/definition42.js +1 -1
  73. package/shared/definition44.js +1 -1
  74. package/shared/definition45.js +1 -1
  75. package/shared/definition47.js +2 -2
  76. package/shared/definition48.js +1 -1
  77. package/shared/definition5.js +10 -3
  78. package/shared/definition6.js +1 -1
  79. package/shared/definition7.js +1 -1
  80. package/shared/definition8.js +1 -1
  81. package/shared/definition9.js +14 -4
  82. package/shared/form-elements.js +1 -1
  83. package/shared/icon.js +1 -1
  84. package/shared/listbox.js +1 -1
  85. package/shared/patterns/form-elements/form-elements.d.ts +2 -2
  86. package/shared/text-field.js +1 -1
  87. package/styles/core/all.css +1 -1
  88. package/styles/core/theme.css +1 -1
  89. package/styles/core/typography.css +1 -1
  90. package/styles/tokens/theme-dark.css +4 -4
  91. package/styles/tokens/theme-light.css +4 -4
  92. package/tooltip/index.js +4 -2
@@ -1,772 +1,48 @@
1
- import { F as FoundationElement, U as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
2
- import { C as CalendarEvent } from './calendar-event.js';
3
- import './es.object.assign.js';
4
- import { b as _has, _ as _curry1, a as _curry2 } from './_has.js';
5
- import { r as repeat } from './repeat.js';
6
-
7
- /**
8
- * Tests whether or not an object is an array.
9
- *
10
- * @private
11
- * @param {*} val The object to test.
12
- * @return {Boolean} `true` if `val` is an array, `false` otherwise.
13
- * @example
14
- *
15
- * _isArray([]); //=> true
16
- * _isArray(null); //=> false
17
- * _isArray({}); //=> false
18
- */
19
- var _isArray = Array.isArray || function _isArray(val) {
20
- return val != null && val.length >= 0 && Object.prototype.toString.call(val) === '[object Array]';
21
- };
22
-
23
- function _isString(x) {
24
- return Object.prototype.toString.call(x) === '[object String]';
25
- }
26
-
27
- var toString = Object.prototype.toString;
28
-
29
- var _isArguments =
30
- /*#__PURE__*/
31
- function () {
32
- return toString.call(arguments) === '[object Arguments]' ? function _isArguments(x) {
33
- return toString.call(x) === '[object Arguments]';
34
- } : function _isArguments(x) {
35
- return _has('callee', x);
36
- };
37
- }();
38
-
39
- var hasEnumBug = !
40
- /*#__PURE__*/
41
- {
42
- toString: null
43
- }.propertyIsEnumerable('toString');
44
- var nonEnumerableProps = ['constructor', 'valueOf', 'isPrototypeOf', 'toString', 'propertyIsEnumerable', 'hasOwnProperty', 'toLocaleString']; // Safari bug
45
-
46
- var hasArgsEnumBug =
47
- /*#__PURE__*/
48
- function () {
49
-
50
- return arguments.propertyIsEnumerable('length');
51
- }();
52
-
53
- var contains = function contains(list, item) {
54
- var idx = 0;
55
-
56
- while (idx < list.length) {
57
- if (list[idx] === item) {
58
- return true;
59
- }
60
-
61
- idx += 1;
62
- }
63
-
64
- return false;
65
- };
66
- /**
67
- * Returns a list containing the names of all the enumerable own properties of
68
- * the supplied object.
69
- * Note that the order of the output array is not guaranteed to be consistent
70
- * across different JS platforms.
71
- *
72
- * @func
73
- * @memberOf R
74
- * @since v0.1.0
75
- * @category Object
76
- * @sig {k: v} -> [k]
77
- * @param {Object} obj The object to extract properties from
78
- * @return {Array} An array of the object's own properties.
79
- * @see R.keysIn, R.values, R.toPairs
80
- * @example
81
- *
82
- * R.keys({a: 1, b: 2, c: 3}); //=> ['a', 'b', 'c']
83
- */
84
-
85
-
86
- var keys = typeof Object.keys === 'function' && !hasArgsEnumBug ?
87
- /*#__PURE__*/
88
- _curry1(function keys(obj) {
89
- return Object(obj) !== obj ? [] : Object.keys(obj);
90
- }) :
91
- /*#__PURE__*/
92
- _curry1(function keys(obj) {
93
- if (Object(obj) !== obj) {
94
- return [];
95
- }
96
-
97
- var prop, nIdx;
98
- var ks = [];
99
-
100
- var checkArgsLength = hasArgsEnumBug && _isArguments(obj);
101
-
102
- for (prop in obj) {
103
- if (_has(prop, obj) && (!checkArgsLength || prop !== 'length')) {
104
- ks[ks.length] = prop;
105
- }
106
- }
107
-
108
- if (hasEnumBug) {
109
- nIdx = nonEnumerableProps.length - 1;
110
-
111
- while (nIdx >= 0) {
112
- prop = nonEnumerableProps[nIdx];
113
-
114
- if (_has(prop, obj) && !contains(ks, prop)) {
115
- ks[ks.length] = prop;
116
- }
117
-
118
- nIdx -= 1;
119
- }
120
- }
121
-
122
- return ks;
123
- });
124
-
125
- /**
126
- * Gives a single-word string description of the (native) type of a value,
127
- * returning such answers as 'Object', 'Number', 'Array', or 'Null'. Does not
128
- * attempt to distinguish user Object types any further, reporting them all as
129
- * 'Object'.
130
- *
131
- * @func
132
- * @memberOf R
133
- * @since v0.8.0
134
- * @category Type
135
- * @sig (* -> {*}) -> String
136
- * @param {*} val The value to test
137
- * @return {String}
138
- * @example
139
- *
140
- * R.type({}); //=> "Object"
141
- * R.type(1); //=> "Number"
142
- * R.type(false); //=> "Boolean"
143
- * R.type('s'); //=> "String"
144
- * R.type(null); //=> "Null"
145
- * R.type([]); //=> "Array"
146
- * R.type(/[A-z]/); //=> "RegExp"
147
- * R.type(() => {}); //=> "Function"
148
- * R.type(undefined); //=> "Undefined"
149
- */
150
-
151
- var type =
152
- /*#__PURE__*/
153
- _curry1(function type(val) {
154
- return val === null ? 'Null' : val === undefined ? 'Undefined' : Object.prototype.toString.call(val).slice(8, -1);
155
- });
156
-
157
- /**
158
- * A function that returns the `!` of its argument. It will return `true` when
159
- * passed false-y value, and `false` when passed a truth-y one.
160
- *
161
- * @func
162
- * @memberOf R
163
- * @since v0.1.0
164
- * @category Logic
165
- * @sig * -> Boolean
166
- * @param {*} a any value
167
- * @return {Boolean} the logical inverse of passed argument.
168
- * @see R.complement
169
- * @example
170
- *
171
- * R.not(true); //=> false
172
- * R.not(false); //=> true
173
- * R.not(0); //=> true
174
- * R.not(1); //=> false
175
- */
176
-
177
- var not =
178
- /*#__PURE__*/
179
- _curry1(function not(a) {
180
- return !a;
181
- });
182
-
183
- var not$1 = not;
184
-
185
- function _arrayFromIterator(iter) {
186
- var list = [];
187
- var next;
188
-
189
- while (!(next = iter.next()).done) {
190
- list.push(next.value);
191
- }
192
-
193
- return list;
194
- }
195
-
196
- function _includesWith(pred, x, list) {
197
- var idx = 0;
198
- var len = list.length;
199
-
200
- while (idx < len) {
201
- if (pred(x, list[idx])) {
202
- return true;
203
- }
204
-
205
- idx += 1;
206
- }
207
-
208
- return false;
209
- }
210
-
211
- function _functionName(f) {
212
- // String(x => x) evaluates to "x => x", so the pattern may not match.
213
- var match = String(f).match(/^function (\w*)/);
214
- return match == null ? '' : match[1];
215
- }
216
-
217
- // Based on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
218
- function _objectIs(a, b) {
219
- // SameValue algorithm
220
- if (a === b) {
221
- // Steps 1-5, 7-10
222
- // Steps 6.b-6.e: +0 != -0
223
- return a !== 0 || 1 / a === 1 / b;
224
- } else {
225
- // Step 6.a: NaN == NaN
226
- return a !== a && b !== b;
227
- }
228
- }
229
-
230
- var _objectIs$1 = typeof Object.is === 'function' ? Object.is : _objectIs;
231
-
232
- /**
233
- * private _uniqContentEquals function.
234
- * That function is checking equality of 2 iterator contents with 2 assumptions
235
- * - iterators lengths are the same
236
- * - iterators values are unique
237
- *
238
- * false-positive result will be returned for comparison of, e.g.
239
- * - [1,2,3] and [1,2,3,4]
240
- * - [1,1,1] and [1,2,3]
241
- * */
242
-
243
- function _uniqContentEquals(aIterator, bIterator, stackA, stackB) {
244
- var a = _arrayFromIterator(aIterator);
245
-
246
- var b = _arrayFromIterator(bIterator);
247
-
248
- function eq(_a, _b) {
249
- return _equals(_a, _b, stackA.slice(), stackB.slice());
250
- } // if *a* array contains any element that is not included in *b*
251
-
252
-
253
- return !_includesWith(function (b, aItem) {
254
- return !_includesWith(eq, aItem, b);
255
- }, b, a);
256
- }
257
-
258
- function _equals(a, b, stackA, stackB) {
259
- if (_objectIs$1(a, b)) {
260
- return true;
261
- }
262
-
263
- var typeA = type(a);
264
-
265
- if (typeA !== type(b)) {
266
- return false;
267
- }
268
-
269
- if (typeof a['fantasy-land/equals'] === 'function' || typeof b['fantasy-land/equals'] === 'function') {
270
- return typeof a['fantasy-land/equals'] === 'function' && a['fantasy-land/equals'](b) && typeof b['fantasy-land/equals'] === 'function' && b['fantasy-land/equals'](a);
271
- }
272
-
273
- if (typeof a.equals === 'function' || typeof b.equals === 'function') {
274
- return typeof a.equals === 'function' && a.equals(b) && typeof b.equals === 'function' && b.equals(a);
275
- }
276
-
277
- switch (typeA) {
278
- case 'Arguments':
279
- case 'Array':
280
- case 'Object':
281
- if (typeof a.constructor === 'function' && _functionName(a.constructor) === 'Promise') {
282
- return a === b;
283
- }
284
-
285
- break;
286
-
287
- case 'Boolean':
288
- case 'Number':
289
- case 'String':
290
- if (!(typeof a === typeof b && _objectIs$1(a.valueOf(), b.valueOf()))) {
291
- return false;
292
- }
293
-
294
- break;
295
-
296
- case 'Date':
297
- if (!_objectIs$1(a.valueOf(), b.valueOf())) {
298
- return false;
299
- }
300
-
301
- break;
302
-
303
- case 'Error':
304
- return a.name === b.name && a.message === b.message;
305
-
306
- case 'RegExp':
307
- if (!(a.source === b.source && a.global === b.global && a.ignoreCase === b.ignoreCase && a.multiline === b.multiline && a.sticky === b.sticky && a.unicode === b.unicode)) {
308
- return false;
309
- }
310
-
311
- break;
312
- }
313
-
314
- var idx = stackA.length - 1;
315
-
316
- while (idx >= 0) {
317
- if (stackA[idx] === a) {
318
- return stackB[idx] === b;
319
- }
320
-
321
- idx -= 1;
322
- }
323
-
324
- switch (typeA) {
325
- case 'Map':
326
- if (a.size !== b.size) {
327
- return false;
328
- }
329
-
330
- return _uniqContentEquals(a.entries(), b.entries(), stackA.concat([a]), stackB.concat([b]));
331
-
332
- case 'Set':
333
- if (a.size !== b.size) {
334
- return false;
335
- }
336
-
337
- return _uniqContentEquals(a.values(), b.values(), stackA.concat([a]), stackB.concat([b]));
338
-
339
- case 'Arguments':
340
- case 'Array':
341
- case 'Object':
342
- case 'Boolean':
343
- case 'Number':
344
- case 'String':
345
- case 'Date':
346
- case 'Error':
347
- case 'RegExp':
348
- case 'Int8Array':
349
- case 'Uint8Array':
350
- case 'Uint8ClampedArray':
351
- case 'Int16Array':
352
- case 'Uint16Array':
353
- case 'Int32Array':
354
- case 'Uint32Array':
355
- case 'Float32Array':
356
- case 'Float64Array':
357
- case 'ArrayBuffer':
358
- break;
359
-
360
- default:
361
- // Values of other types are only equal if identical.
362
- return false;
363
- }
364
-
365
- var keysA = keys(a);
366
-
367
- if (keysA.length !== keys(b).length) {
368
- return false;
369
- }
370
-
371
- var extendedStackA = stackA.concat([a]);
372
- var extendedStackB = stackB.concat([b]);
373
- idx = keysA.length - 1;
374
-
375
- while (idx >= 0) {
376
- var key = keysA[idx];
377
-
378
- if (!(_has(key, b) && _equals(b[key], a[key], extendedStackA, extendedStackB))) {
379
- return false;
380
- }
381
-
382
- idx -= 1;
383
- }
384
-
385
- return true;
386
- }
387
-
388
- /**
389
- * Returns `true` if its arguments are equivalent, `false` otherwise. Handles
390
- * cyclical data structures.
391
- *
392
- * Dispatches symmetrically to the `equals` methods of both arguments, if
393
- * present.
394
- *
395
- * @func
396
- * @memberOf R
397
- * @since v0.15.0
398
- * @category Relation
399
- * @sig a -> b -> Boolean
400
- * @param {*} a
401
- * @param {*} b
402
- * @return {Boolean}
403
- * @example
404
- *
405
- * R.equals(1, 1); //=> true
406
- * R.equals(1, '1'); //=> false
407
- * R.equals([1, 2, 3], [1, 2, 3]); //=> true
408
- *
409
- * const a = {}; a.v = a;
410
- * const b = {}; b.v = b;
411
- * R.equals(a, b); //=> true
412
- */
413
-
414
- var equals =
415
- /*#__PURE__*/
416
- _curry2(function equals(a, b) {
417
- return _equals(a, b, [], []);
418
- });
419
-
420
- function _isObject(x) {
421
- return Object.prototype.toString.call(x) === '[object Object]';
422
- }
423
-
424
- /**
425
- * Tests whether or not an object is a typed array.
426
- *
427
- * @private
428
- * @param {*} val The object to test.
429
- * @return {Boolean} `true` if `val` is a typed array, `false` otherwise.
430
- * @example
431
- *
432
- * _isTypedArray(new Uint8Array([])); //=> true
433
- * _isTypedArray(new Float32Array([])); //=> true
434
- * _isTypedArray([]); //=> false
435
- * _isTypedArray(null); //=> false
436
- * _isTypedArray({}); //=> false
437
- */
438
- function _isTypedArray(val) {
439
- var type = Object.prototype.toString.call(val);
440
- return type === '[object Uint8ClampedArray]' || type === '[object Int8Array]' || type === '[object Uint8Array]' || type === '[object Int16Array]' || type === '[object Uint16Array]' || type === '[object Int32Array]' || type === '[object Uint32Array]' || type === '[object Float32Array]' || type === '[object Float64Array]' || type === '[object BigInt64Array]' || type === '[object BigUint64Array]';
441
- }
442
-
443
- /**
444
- * Returns the empty value of its argument's type. Ramda defines the empty
445
- * value of Array (`[]`), Object (`{}`), String (`''`),
446
- * TypedArray (`Uint8Array []`, `Float32Array []`, etc), and Arguments. Other
447
- * types are supported if they define `<Type>.empty`,
448
- * `<Type>.prototype.empty` or implement the
449
- * [FantasyLand Monoid spec](https://github.com/fantasyland/fantasy-land#monoid).
450
- *
451
- * Dispatches to the `empty` method of the first argument, if present.
452
- *
453
- * @func
454
- * @memberOf R
455
- * @since v0.3.0
456
- * @category Function
457
- * @sig a -> a
458
- * @param {*} x
459
- * @return {*}
460
- * @example
461
- *
462
- * R.empty(Just(42)); //=> Nothing()
463
- * R.empty([1, 2, 3]); //=> []
464
- * R.empty('unicorns'); //=> ''
465
- * R.empty({x: 1, y: 2}); //=> {}
466
- * R.empty(Uint8Array.from('123')); //=> Uint8Array []
467
- */
468
-
469
- var empty =
470
- /*#__PURE__*/
471
- _curry1(function empty(x) {
472
- return x != null && typeof x['fantasy-land/empty'] === 'function' ? x['fantasy-land/empty']() : x != null && x.constructor != null && typeof x.constructor['fantasy-land/empty'] === 'function' ? x.constructor['fantasy-land/empty']() : x != null && typeof x.empty === 'function' ? x.empty() : x != null && x.constructor != null && typeof x.constructor.empty === 'function' ? x.constructor.empty() : _isArray(x) ? [] : _isString(x) ? '' : _isObject(x) ? {} : _isArguments(x) ? function () {
473
- return arguments;
474
- }() : _isTypedArray(x) ? x.constructor.from('') : void 0 // else
475
- ;
476
- });
477
-
478
- /**
479
- * Returns `true` if the given value is its type's empty value; `false`
480
- * otherwise.
481
- *
482
- * @func
483
- * @memberOf R
484
- * @since v0.1.0
485
- * @category Logic
486
- * @sig a -> Boolean
487
- * @param {*} x
488
- * @return {Boolean}
489
- * @see R.empty
490
- * @example
491
- *
492
- * R.isEmpty([1, 2, 3]); //=> false
493
- * R.isEmpty([]); //=> true
494
- * R.isEmpty(''); //=> true
495
- * R.isEmpty(null); //=> false
496
- * R.isEmpty({}); //=> true
497
- * R.isEmpty({length: 0}); //=> false
498
- * R.isEmpty(Uint8Array.from('')); //=> true
499
- */
500
-
501
- var isEmpty =
502
- /*#__PURE__*/
503
- _curry1(function isEmpty(x) {
504
- return x != null && equals(x, empty(x));
505
- });
506
-
507
- var isEmpty$1 = isEmpty;
508
-
509
- var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 27 Mar 2023 07:48:02 GMT\n */\nol {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n\n[role=grid i] {\n position: relative;\n z-index: 0;\n display: grid;\n margin: auto;\n grid-template-areas: \". column-headers\" \"row-headers calendar\";\n grid-template-columns: min-content auto;\n inline-size: max(100%, 500px);\n min-inline-size: 880px;\n}\n\n.row-headers {\n display: grid;\n grid-area: row-headers;\n grid-template-rows: repeat(24, 1fr);\n margin-inline-end: 2px;\n}\n.row-headers > [role=rowheader i] {\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n}\n.row-headers > [role=rowheader i] > time {\n font: var(--vvd-typography-base-condensed);\n font-size: small;\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.calendar-row {\n display: contents;\n}\n\n.calendar-grid-presentation {\n display: grid;\n overflow: hidden;\n background: var(--vvd-color-surface-2dp);\n border-radius: 6px;\n counter-reset: listing;\n filter: var(--vvd-shadow-surface-2dp);\n gap: 1px;\n grid-area: calendar;\n grid-auto-flow: column;\n grid-template: repeat(24, 1fr)/repeat(7, 1fr);\n}\n\n.hours {\n display: contents;\n}\n.hours > [role=listitem i] {\n position: relative;\n grid-column: 1/8;\n grid-row: var(--row);\n min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n pointer-events: none;\n}\n.hours > [role=listitem i]:not(:first-child)::after {\n position: absolute;\n border-block-end: var(--vvd-color-neutral-100) 1px solid;\n content: \"\";\n inline-size: 100%;\n margin-block-start: -1px;\n}\n.hours > [role=listitem i]:nth-child(24n+1) {\n --row: 1;\n}\n.hours > [role=listitem i]:nth-child(24n+2) {\n --row: 2;\n}\n.hours > [role=listitem i]:nth-child(24n+3) {\n --row: 3;\n}\n.hours > [role=listitem i]:nth-child(24n+4) {\n --row: 4;\n}\n.hours > [role=listitem i]:nth-child(24n+5) {\n --row: 5;\n}\n.hours > [role=listitem i]:nth-child(24n+6) {\n --row: 6;\n}\n.hours > [role=listitem i]:nth-child(24n+7) {\n --row: 7;\n}\n.hours > [role=listitem i]:nth-child(24n+8) {\n --row: 8;\n}\n.hours > [role=listitem i]:nth-child(24n+9) {\n --row: 9;\n}\n.hours > [role=listitem i]:nth-child(24n+10) {\n --row: 10;\n}\n.hours > [role=listitem i]:nth-child(24n+11) {\n --row: 11;\n}\n.hours > [role=listitem i]:nth-child(24n+12) {\n --row: 12;\n}\n.hours > [role=listitem i]:nth-child(24n+13) {\n --row: 13;\n}\n.hours > [role=listitem i]:nth-child(24n+14) {\n --row: 14;\n}\n.hours > [role=listitem i]:nth-child(24n+15) {\n --row: 15;\n}\n.hours > [role=listitem i]:nth-child(24n+16) {\n --row: 16;\n}\n.hours > [role=listitem i]:nth-child(24n+17) {\n --row: 17;\n}\n.hours > [role=listitem i]:nth-child(24n+18) {\n --row: 18;\n}\n.hours > [role=listitem i]:nth-child(24n+19) {\n --row: 19;\n}\n.hours > [role=listitem i]:nth-child(24n+20) {\n --row: 20;\n}\n.hours > [role=listitem i]:nth-child(24n+21) {\n --row: 21;\n}\n.hours > [role=listitem i]:nth-child(24n+22) {\n --row: 22;\n}\n.hours > [role=listitem i]:nth-child(24n+23) {\n --row: 23;\n}\n.hours > [role=listitem i]:nth-child(24n+24) {\n --row: 24;\n}\n\n[role=gridcell i] {\n display: grid;\n gap: 1px;\n grid-auto-flow: column;\n}\n\n[role=gridcell i],\n[role=columnheader i],\n[role=columnheader i] [role=button i] {\n position: relative;\n}\n[role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n position: absolute;\n z-index: -1;\n background-color: var(--vvd-color-information-400);\n content: \"\";\n}\n@supports (inset: 0) {\n [role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n inset: 0;\n }\n}\n@supports not (inset: 0) {\n [role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n}\n[role=gridcell i]:focus,\n[role=columnheader i]:focus,\n[role=columnheader i] [role=button i]:focus {\n outline: none;\n}\n[role=gridcell i]:not(:focus-visible)::before,\n[role=columnheader i]:not(:focus-visible)::before,\n[role=columnheader i] [role=button i]:not(:focus-visible)::before {\n display: none;\n}\n\n.columns {\n display: contents;\n}\n.columns > [role=gridcell i] {\n position: relative;\n grid-column: var(--column);\n grid-row: 1/25;\n}\n.columns > [role=gridcell i]:nth-child(1) {\n --column: 1;\n}\n.columns > [role=gridcell i]:nth-child(2) {\n --column: 2;\n}\n.columns > [role=gridcell i]:nth-child(3) {\n --column: 3;\n}\n.columns > [role=gridcell i]:nth-child(4) {\n --column: 4;\n}\n.columns > [role=gridcell i]:nth-child(5) {\n --column: 5;\n}\n.columns > [role=gridcell i]:nth-child(6) {\n --column: 6;\n}\n.columns > [role=gridcell i]:nth-child(7) {\n --column: 7;\n}\n.columns > [role=gridcell i]:not(:first-child)::after {\n position: absolute;\n block-size: 100%;\n border-inline-end: var(--vvd-color-neutral-100) 1px solid;\n content: \"\";\n margin-inline-start: -1px;\n}\n\n.column-headers {\n display: grid;\n grid-area: column-headers;\n grid-template-columns: repeat(7, 1fr);\n}\n.column-headers [role=columnheader i] h2 {\n display: grid;\n align-items: baseline;\n margin: 0;\n font: var(--vvd-typography-heading-4);\n grid-template-columns: 1fr auto 1fr;\n}\n.column-headers [role=columnheader i] h2 > em {\n font: inherit;\n inline-size: min-content;\n}\n@supports (inset: 0) {\n .column-headers [role=columnheader i] h2 > em {\n inset-inline-start: 0;\n }\n}\n@supports not (inset: 0) {\n .column-headers [role=columnheader i] h2 > em {\n left: 0;\n }\n}\n.column-headers [role=columnheader i] h2 > small {\n font: var(--vvd-typography-base-condensed);\n text-transform: uppercase;\n}";
510
-
511
- const ARROW_UP = 'ArrowUp';
512
- const ARROW_RIGHT = 'ArrowRight';
513
- const ARROW_DOWN = 'ArrowDown';
514
- const ARROW_LEFT = 'ArrowLeft';
515
- function isCellOrHeader(el) {
516
- return el instanceof HTMLElement && (el.matches('[role="gridcell"i]') || el.matches('[role="columnheader"i]'));
517
- }
518
- const getCellOrHeader = f => f.matches('[role="columnheader"i]') ? '[role="gridcell"i]' : '[role="columnheader"i]';
519
- function getNextFocusableGridElement(key, activeElement) {
520
- if (activeElement.parentNode instanceof HTMLElement) {
521
- switch (key) {
522
- case ARROW_RIGHT:
523
- return activeElement.nextElementSibling || activeElement.parentNode.firstElementChild;
524
- case ARROW_LEFT:
525
- return activeElement.previousElementSibling || activeElement.parentNode.lastElementChild;
526
- case ARROW_UP:
527
- case ARROW_DOWN:
528
- {
529
- const {
530
- children
531
- } = activeElement.parentNode;
532
- const i = Array.from(children).indexOf(activeElement);
533
- return this.shadowRoot.querySelector(`${getCellOrHeader(activeElement)}:nth-child(${i + 1})`);
534
- }
535
- }
536
- }
537
- }
538
- function getHeaderDescendantGridCell(key, activeElement) {
539
- if (key !== ARROW_DOWN) {
540
- return;
541
- }
542
- const header = activeElement.closest('[role="columnheader"i]');
543
- const columnHeaders = this.shadowRoot.querySelectorAll('[role="columnheader"i]');
544
- const i = Array.from(columnHeaders).indexOf(header);
545
- return this.shadowRoot.querySelector(`[role="gridcell"i]:nth-child(${i + 1})`);
546
- }
547
-
548
- function getDay(el) {
549
- const cellOrHeader = el.closest('[role="gridcell"i], [role="columnheader"i]');
550
- if (cellOrHeader) {
551
- const {
552
- parentElement
553
- } = cellOrHeader;
554
- if (parentElement) {
555
- return parentElement.children && Array.from(parentElement.children).indexOf(cellOrHeader);
556
- }
557
- }
558
- }
559
- function getHour(e, el, hours) {
560
- const rowHeaderOrCell = el.closest('[role="rowheader"], [role="gridcell"i]');
561
- if (rowHeaderOrCell) {
562
- const DOMRect = rowHeaderOrCell.getBoundingClientRect();
563
- const offsetY = e.clientY - DOMRect.y;
564
- const hourHeight = DOMRect.height / hours;
565
- const hour = offsetY / hourHeight;
566
- return Math.round((hour + Number.EPSILON) * 100) / 100;
567
- }
568
- }
569
- const getEventContext = function getEventContext(e) {
570
- if (!(e instanceof KeyboardEvent || e instanceof MouseEvent)) {
571
- throw new Error('Invalid event. Event must be instance of KeyboardEvent or MouseEvent');
572
- }
573
- const [el] = e.composedPath();
574
- if (!(el && el instanceof HTMLElement && this.shadowRoot.contains(el))) {
575
- throw new Error('Invalid event. Event must contain a target object which is a direct descendant of calendar');
576
- }
577
- const day = getDay(el);
578
- let hour;
579
- if (e instanceof MouseEvent) {
580
- hour = getHour(e, el, this._hours);
581
- }
582
- const context = Object.assign(Object.assign({}, day != undefined && {
583
- day
584
- }), hour != undefined && {
585
- hour
586
- });
587
- return not$1(isEmpty$1(context)) ? context : null;
588
- };
589
-
590
- var _Calendar_instances, _Calendar_activeCalendarEvent_get;
591
- class Calendar extends FoundationElement {
1
+ import { _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
2
+ import { i as iconRegistries } from './definition3.js';
3
+ import { f as focusRegistries } from './definition4.js';
4
+ import { B as BreadcrumbItem$1 } from './breadcrumb-item.js';
5
+ import { t as textAnchorTemplate } from './text-anchor.template.js';
6
+ import { I as Icon } from './icon.js';
7
+ import { w as when } from './when.js';
8
+ import { c as classNames } from './class-names.js';
9
+
10
+ var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 30 Mar 2023 16:21:30 GMT\n */\n.base {\n display: flex;\n align-items: center;\n color: var(--vvd-color-canvas-text);\n font: var(--vvd-typography-base);\n}\n.base .separator {\n margin: 0 16px;\n color: var(--vvd-color-neutral-600);\n font-size: 12px;\n}\n\n.control {\n position: relative;\n font: inherit;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n.control:any-link {\n color: var(--vvd-color-cta-600);\n text-decoration: none;\n}\n.control:any-link:hover {\n text-decoration: underline;\n}\n\n.focus-indicator {\n --focus-inset: -4px -8px;\n --focus-stroke-gap-color: transparent;\n border-radius: 6px;\n}\n.control:not(:focus-visible) > .focus-indicator {\n display: none;\n}";
11
+
12
+ class BreadcrumbItem extends BreadcrumbItem$1 {
592
13
  constructor() {
593
- super(...arguments);
594
- _Calendar_instances.add(this);
595
- this.hour12 = false;
596
- this._hours = 24;
597
- this._days = 7;
598
- this.hoursAsDatetime = Array.from({
599
- length: this._hours - 1
600
- }).fill(new Date(new Date().setHours(0, 0, 0))).map((d, i) => new Date(d.setHours(++i)));
601
- this._generateDaysArr = dateArr => {
602
- if (dateArr.length == this._days) {
603
- return dateArr;
604
- }
605
- const lastDate = new Date(dateArr[dateArr.length - 1]);
606
- lastDate.setDate(lastDate.getDate() + 1);
607
- return this._generateDaysArr([...dateArr, lastDate]);
608
- };
609
- this.getEventContext = getEventContext;
610
- }
611
- getCalendarEventContainingCell(calendarEvent) {
612
- const slotName = calendarEvent.getAttribute('slot');
613
- const gridCell = this.shadowRoot.querySelector(`slot[name="${slotName}"i]`);
614
- return gridCell.parentElement;
615
- }
616
- arrowKeysInteractions(key) {
617
- const {
618
- activeElement
619
- } = this.shadowRoot;
620
- let focusNext;
621
- if (isCellOrHeader(activeElement)) {
622
- focusNext = getNextFocusableGridElement.call(this, key, activeElement);
623
- } else if (__classPrivateFieldGet(this, _Calendar_instances, "a", _Calendar_activeCalendarEvent_get)) {
624
- focusNext = this.getCalendarEventContainingCell(__classPrivateFieldGet(this, _Calendar_instances, "a", _Calendar_activeCalendarEvent_get));
625
- } else if (activeElement === null || activeElement === void 0 ? void 0 : activeElement.matches('em[role="button"i]')) {
626
- focusNext = getHeaderDescendantGridCell.call(this, key, activeElement);
627
- } else {
628
- focusNext = this.shadowRoot.querySelector('[role="columnheader"i]');
629
- }
630
- this.activateElement(focusNext);
631
- }
632
- activateElement(el) {
633
- const onBlur = ({
634
- target
635
- }) => target.setAttribute('tabindex', '-1');
636
- el === null || el === void 0 ? void 0 : el.addEventListener('blur', onBlur, {
637
- once: true
638
- });
639
- el === null || el === void 0 ? void 0 : el.setAttribute('tabindex', '0');
640
- el === null || el === void 0 ? void 0 : el.focus();
14
+ super();
641
15
  }
642
- onKeydown({
643
- key
644
- }) {
645
- const isArrow = [ARROW_UP, ARROW_RIGHT, ARROW_DOWN, ARROW_LEFT].some(predefinedKey => predefinedKey == key);
646
- if (isArrow) {
647
- this.arrowKeysInteractions(key);
648
- }
649
- return !isArrow;
650
- }
651
- }
652
- _Calendar_instances = new WeakSet(), _Calendar_activeCalendarEvent_get = function _Calendar_activeCalendarEvent_get() {
653
- const {
654
- activeElement
655
- } = document;
656
- return activeElement instanceof CalendarEvent ? activeElement : null;
657
- };
658
- __decorate([attr, __metadata("design:type", Object)], Calendar.prototype, "datetime", void 0);
659
- __decorate([attr({
660
- attribute: 'start-day'
661
- }), __metadata("design:type", String)], Calendar.prototype, "startDay", void 0);
662
- __decorate([attr, __metadata("design:type", Object)], Calendar.prototype, "locales", void 0);
663
- __decorate([attr({
664
- mode: 'boolean'
665
- }), __metadata("design:type", Object)], Calendar.prototype, "hour12", void 0);
666
-
667
- function getValidDateString(date) {
668
- const twoDigit = num => `0${num}`.slice(-2);
669
- return `${date.getFullYear()}-${twoDigit(date.getMonth() + 1)}-${twoDigit(date.getDate())}`;
670
- }
671
- const weekdaysMap = new Map([['sunday', 0], ['monday', 1]]);
672
- function getFirstDateOfTheWeek(date = new Date(), startDay) {
673
- date = new Date(date);
674
- let num = weekdaysMap.get(startDay);
675
- num !== null && num !== void 0 ? num : num = 1;
676
- const day = date.getDate() - (date.getDay() + 7 - num) % 7;
677
- return new Date(date.setDate(day));
678
16
  }
17
+ __decorate([attr, __metadata("design:type", String)], BreadcrumbItem.prototype, "text", void 0);
679
18
 
680
19
  let _2 = t => t,
681
20
  _t,
682
21
  _t2,
683
22
  _t3,
684
- _t4,
685
- _t5,
686
- _t6,
687
- _t7;
688
- const HoursTemplate = () => {
23
+ _t4;
24
+ const getClasses = _ => classNames('base');
25
+ const BreadcrumbItemTemplate = (context, definition) => {
26
+ const iconTag = context.tagFor(Icon);
689
27
  return html(_t || (_t = _2`
690
- <div class="row-headers" role="presentation">
691
- ${0}
692
- </div>`), repeat(x => x.hoursAsDatetime, html(_t2 || (_t2 = _2`<span role="rowheader">
693
- <time datetime="${0}">
694
- ${0}
695
- </time>
696
- </span>`), (x, c) => new Intl.DateTimeFormat(c.parent.locales, {
697
- hour: 'numeric',
698
- minute: 'numeric',
699
- hour12: false
700
- }).format(x), (x, c) => new Intl.DateTimeFormat(c.parent.locales, {
701
- hour: 'numeric',
702
- hour12: c.parent.hour12
703
- }).format(x))));
704
- };
705
- const DaysTemplate = () => {
706
- return html(_t3 || (_t3 = _2`
707
- <div class="column-headers" role="row">
708
- ${0}
709
- </div>`), repeat(x => x._generateDaysArr([getFirstDateOfTheWeek(x.datetime, x.startDay)]), html(_t4 || (_t4 = _2`
710
- <div role="columnheader" tabindex="-1">
711
- <time datetime=${0}>
712
- <h2>
713
- <!-- TODO add to column aria-labelledby or describedby to count
714
- events and related day e.g. "3 events, Sunday, March 8" -->
715
- <em tabindex="0" role="button" aria-label=${0}>
716
- ${0}
717
- </em>
718
- <small aria-hidden="true">
719
- ${0}
720
- </small>
721
- </h2>
722
- </time>
723
- </div>`), x => getValidDateString(x), (x, c) => new Intl.DateTimeFormat(c.parent.locales, {
724
- weekday: 'long',
725
- month: 'long',
726
- day: 'numeric'
727
- }).format(x), (x, c) => new Intl.DateTimeFormat(c.parent.locales, {
728
- day: '2-digit'
729
- }).format(x), (x, c) => new Intl.DateTimeFormat(c.parent.locales, {
730
- weekday: 'short'
731
- }).format(x))));
28
+ <div role="listitem" class="${0}">
29
+ ${0}
30
+
31
+ ${0}
32
+
33
+ ${0}
34
+ </div>`), getClasses, when(x => x.text && !x.href, html(_t2 || (_t2 = _2`${0}`), x => x.text)), when(x => x.text && x.href && x.href.length > 0, html(_t3 || (_t3 = _2`${0}`), textAnchorTemplate(context))), when(x => x.separator, html(_t4 || (_t4 = _2`<${0} class="separator" name="chevron-right-solid"></${0}>`), iconTag, iconTag)));
732
35
  };
733
- const ColumnTemplate = html(_t5 || (_t5 = _2`
734
- <div role="gridcell" tabindex="-1">
735
- <slot name="day-${0}"></slot>
736
- </div>
737
- `), (_, c) => c.index);
738
- const CalendarTemplate = () => html(_t6 || (_t6 = _2`
739
- <div role="grid" @keydown=${0}>
740
- ${0}
741
- <div role="row" class="calendar-row">
742
- ${0}
743
- <div class="calendar-grid-presentation" role="presentation">
744
- <div class="hours" role="list">
745
- ${0}
746
- </div>
747
- <div class="columns" role="presentation">
748
- ${0}
749
- </div>
750
- <slot></slot>
751
- </div>
752
- </div>
753
- </div>
754
- `), (x, c) => x.onKeydown(c.event), DaysTemplate, HoursTemplate, repeat(x => Array.from({
755
- length: x.hoursAsDatetime.length + 1
756
- }), html(_t7 || (_t7 = _2`
757
- <div role="listitem"></div>`))), repeat(x => Array.from(Array(x._days)), ColumnTemplate, {
758
- positioning: true
759
- }));
760
36
 
761
- const calendarDefinition = Calendar.compose({
762
- baseName: 'calendar',
763
- template: CalendarTemplate,
37
+ const breadcrumbItemDefinition = BreadcrumbItem.compose({
38
+ baseName: 'breadcrumb-item',
39
+ template: BreadcrumbItemTemplate,
764
40
  styles: css_248z,
765
41
  shadowOptions: {
766
42
  delegatesFocus: true
767
43
  }
768
44
  });
769
- const calendarRegistries = [calendarDefinition()];
770
- const registerCalendar = registerFactory(calendarRegistries);
45
+ const breadcrumbItemRegistries = [breadcrumbItemDefinition(), ...iconRegistries, ...focusRegistries];
46
+ const registerBreadcrumbItem = registerFactory(breadcrumbItemRegistries);
771
47
 
772
- export { calendarRegistries as a, calendarDefinition as c, registerCalendar as r };
48
+ export { breadcrumbItemRegistries as a, breadcrumbItemDefinition as b, registerBreadcrumbItem as r };