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