@vonage/vivid 3.51.0 → 3.53.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.
- package/README.md +1 -1
- package/accordion/index.cjs +1 -1
- package/accordion/index.js +1 -1
- package/accordion-item/index.cjs +1 -1
- package/accordion-item/index.js +1 -1
- package/alert/index.cjs +3 -3
- package/alert/index.js +3 -3
- package/appearance-ui/index.cjs +19 -11
- package/appearance-ui/index.js +19 -11
- package/audio-player/index.cjs +4 -3
- package/audio-player/index.js +4 -3
- package/avatar/index.cjs +1 -1
- package/avatar/index.js +1 -1
- package/badge/index.cjs +1 -1
- package/badge/index.js +1 -1
- package/banner/index.cjs +2 -2
- package/banner/index.js +2 -2
- package/breadcrumb-item/index.cjs +1 -1
- package/breadcrumb-item/index.js +1 -1
- package/button/index.cjs +2 -2
- package/button/index.js +2 -2
- package/card/index.cjs +2 -2
- package/card/index.js +2 -2
- package/checkbox/index.cjs +3 -2
- package/checkbox/index.js +3 -2
- package/combobox/index.cjs +5 -8
- package/combobox/index.js +5 -8
- package/custom-elements.json +2310 -769
- package/data-grid/index.cjs +1 -1
- package/data-grid/index.js +1 -1
- package/date-picker/index.cjs +7 -9
- package/date-picker/index.js +7 -9
- package/date-range-picker/index.cjs +7 -9
- package/date-range-picker/index.js +7 -9
- package/dial-pad/index.cjs +33 -0
- package/dial-pad/index.js +31 -0
- package/dialog/index.cjs +4 -4
- package/dialog/index.js +4 -4
- package/divider/index.cjs +1 -1
- package/divider/index.js +1 -1
- package/elevation/index.cjs +1 -1
- package/elevation/index.js +1 -1
- package/empty-state/index.cjs +2 -2
- package/empty-state/index.js +2 -2
- package/fab/index.cjs +2 -2
- package/fab/index.js +2 -2
- package/file-picker/index.cjs +4 -5
- package/file-picker/index.js +4 -5
- package/header/index.cjs +2 -2
- package/header/index.js +2 -2
- package/icon/index.cjs +1 -1
- package/icon/index.js +1 -1
- package/index.cjs +135 -123
- package/index.js +48 -46
- package/layout/index.cjs +1 -1
- package/layout/index.js +1 -1
- package/lib/avatar/definition.d.ts +1 -1
- package/lib/button/button.d.ts +1 -0
- package/lib/button/definition.d.ts +1 -1
- package/lib/calendar-event/definition.d.ts +1 -1
- package/lib/components.d.ts +3 -0
- package/lib/dial-pad/definition.d.ts +3 -0
- package/lib/dial-pad/dial-pad.d.ts +14 -0
- package/lib/dial-pad/dial-pad.template.d.ts +4 -0
- package/lib/dial-pad/locale.d.ts +18 -0
- package/lib/enums.d.ts +6 -0
- package/lib/layout/definition.d.ts +1 -1
- package/lib/menu-item/menu-item.d.ts +3 -0
- package/lib/range-slider/definition.d.ts +3 -0
- package/lib/range-slider/locale.d.ts +4 -0
- package/lib/range-slider/range-slider.d.ts +32 -0
- package/lib/range-slider/range-slider.form-associated.d.ts +10 -0
- package/lib/range-slider/range-slider.template.d.ts +4 -0
- package/lib/range-slider/utils/lerp.d.ts +2 -0
- package/lib/range-slider/utils/roundToStepValue.d.ts +1 -0
- package/lib/slider/slider.template.d.ts +1 -0
- package/lib/split-button/definition.d.ts +1 -1
- package/lib/text-anchor/definition.d.ts +1 -0
- package/lib/text-anchor/text-anchor.d.ts +5 -0
- package/lib/video-player/definition.d.ts +3 -0
- package/lib/video-player/locale.d.ts +1 -0
- package/lib/video-player/video-player.d.ts +17 -0
- package/lib/video-player/video-player.template.d.ts +4 -0
- package/listbox/index.cjs +25 -24
- package/listbox/index.js +25 -24
- package/locales/en-GB.cjs +34 -0
- package/locales/en-GB.js +34 -0
- package/locales/en-US.cjs +202 -0
- package/locales/en-US.js +202 -0
- package/locales/ja-JP.cjs +202 -1
- package/locales/ja-JP.js +202 -1
- package/locales/zh-CN.cjs +203 -0
- package/locales/zh-CN.js +203 -0
- package/menu/index.cjs +7 -7
- package/menu/index.js +7 -7
- package/menu-item/index.cjs +4 -4
- package/menu-item/index.js +4 -4
- package/nav/index.cjs +1 -1
- package/nav/index.js +1 -1
- package/nav-disclosure/index.cjs +2 -2
- package/nav-disclosure/index.js +2 -2
- package/nav-item/index.cjs +2 -2
- package/nav-item/index.js +2 -2
- package/note/index.cjs +2 -2
- package/note/index.js +2 -2
- package/number-field/index.cjs +5 -6
- package/number-field/index.js +5 -6
- package/option/index.cjs +2 -2
- package/option/index.js +2 -2
- package/package.json +34 -34
- package/pagination/index.cjs +3 -3
- package/pagination/index.js +3 -3
- package/popup/index.cjs +4 -4
- package/popup/index.js +4 -4
- package/progress/index.cjs +1 -1
- package/progress/index.js +1 -1
- package/progress-ring/index.cjs +1 -1
- package/progress-ring/index.js +1 -1
- package/radio/index.cjs +1 -1
- package/radio/index.js +1 -1
- package/radio-group/index.cjs +1 -1
- package/radio-group/index.js +1 -1
- package/range-slider/index.cjs +22 -0
- package/range-slider/index.js +20 -0
- package/select/index.cjs +7 -6
- package/select/index.js +7 -6
- package/selectable-box/index.cjs +5 -4
- package/selectable-box/index.js +5 -4
- package/shared/Reflector.cjs +5 -1
- package/shared/Reflector.js +5 -1
- package/shared/affix.cjs +11 -4
- package/shared/affix.js +12 -4
- package/shared/anchored.cjs +8 -2
- package/shared/anchored.js +8 -2
- package/shared/applyMixinsWithObservables.cjs +15 -0
- package/shared/applyMixinsWithObservables.js +13 -0
- package/shared/definition.cjs +9 -4
- package/shared/definition.js +9 -4
- package/shared/definition10.cjs +5 -5
- package/shared/definition10.js +5 -5
- package/shared/definition11.cjs +77 -49
- package/shared/definition11.js +78 -50
- package/shared/definition12.cjs +12 -14
- package/shared/definition12.js +12 -14
- package/shared/definition13.cjs +118 -75
- package/shared/definition13.js +118 -75
- package/shared/definition14.cjs +34 -33
- package/shared/definition14.js +34 -33
- package/shared/definition15.cjs +24 -12
- package/shared/definition15.js +24 -12
- package/shared/definition16.cjs +38 -43
- package/shared/definition16.js +38 -43
- package/shared/definition17.cjs +126 -66
- package/shared/definition17.js +127 -67
- package/shared/definition18.cjs +31 -15
- package/shared/definition18.js +31 -15
- package/shared/definition19.cjs +117 -81
- package/shared/definition19.js +117 -81
- package/shared/definition2.cjs +10 -5
- package/shared/definition2.js +10 -5
- package/shared/definition20.cjs +187 -227
- package/shared/definition20.js +183 -223
- package/shared/definition21.cjs +262 -69
- package/shared/definition21.js +261 -67
- package/shared/definition22.cjs +66 -61
- package/shared/definition22.js +64 -60
- package/shared/definition23.cjs +42 -77
- package/shared/definition23.js +41 -76
- package/shared/definition24.cjs +65 -2350
- package/shared/definition24.js +64 -2349
- package/shared/definition25.cjs +2402 -48
- package/shared/definition25.js +2401 -47
- package/shared/definition26.cjs +62 -28
- package/shared/definition26.js +61 -27
- package/shared/definition27.cjs +28 -54
- package/shared/definition27.js +27 -53
- package/shared/definition28.cjs +39 -819
- package/shared/definition28.js +38 -817
- package/shared/definition29.cjs +893 -54
- package/shared/definition29.js +893 -55
- package/shared/definition3.cjs +7 -10
- package/shared/definition3.js +7 -10
- package/shared/definition30.cjs +69 -85
- package/shared/definition30.js +68 -84
- package/shared/definition31.cjs +86 -23
- package/shared/definition31.js +86 -23
- package/shared/definition32.cjs +24 -14
- package/shared/definition32.js +23 -13
- package/shared/definition33.cjs +11 -53
- package/shared/definition33.js +10 -52
- package/shared/definition34.cjs +28 -500
- package/shared/definition34.js +28 -500
- package/shared/definition35.cjs +447 -194
- package/shared/definition35.js +447 -192
- package/shared/definition36.cjs +258 -188
- package/shared/definition36.js +255 -187
- package/shared/definition37.cjs +204 -78
- package/shared/definition37.js +203 -76
- package/shared/definition38.cjs +55 -51
- package/shared/definition38.js +52 -49
- package/shared/definition39.cjs +65 -423
- package/shared/definition39.js +64 -422
- package/shared/definition4.cjs +24 -12
- package/shared/definition4.js +24 -12
- package/shared/definition40.cjs +447 -35
- package/shared/definition40.js +444 -32
- package/shared/definition41.cjs +35 -678
- package/shared/definition41.js +34 -677
- package/shared/definition42.cjs +544 -99
- package/shared/definition42.js +543 -98
- package/shared/definition43.cjs +696 -77
- package/shared/definition43.js +695 -76
- package/shared/definition44.cjs +113 -563
- package/shared/definition44.js +112 -561
- package/shared/definition45.cjs +77 -117
- package/shared/definition45.js +75 -115
- package/shared/definition46.cjs +474 -86
- package/shared/definition46.js +474 -87
- package/shared/definition47.cjs +140 -23
- package/shared/definition47.js +139 -22
- package/shared/definition48.cjs +132 -57
- package/shared/definition48.js +131 -56
- package/shared/definition49.cjs +18 -524
- package/shared/definition49.js +17 -523
- package/shared/definition5.cjs +20 -17
- package/shared/definition5.js +20 -17
- package/shared/definition50.cjs +73 -25
- package/shared/definition50.js +72 -24
- package/shared/definition51.cjs +506 -99
- package/shared/definition51.js +505 -99
- package/shared/definition52.cjs +29 -277
- package/shared/definition52.js +28 -276
- package/shared/definition53.cjs +97 -256
- package/shared/definition53.js +97 -255
- package/shared/definition54.cjs +287 -769
- package/shared/definition54.js +287 -769
- package/shared/definition55.cjs +305 -105
- package/shared/definition55.js +304 -104
- package/shared/definition56.cjs +841 -81
- package/shared/definition56.js +840 -80
- package/shared/definition57.cjs +153 -69
- package/shared/definition57.js +152 -68
- package/shared/definition58.cjs +138 -299
- package/shared/definition58.js +137 -298
- package/shared/definition59.cjs +72 -27
- package/shared/definition59.js +71 -26
- package/shared/definition6.cjs +4 -5
- package/shared/definition6.js +4 -5
- package/shared/definition60.cjs +279 -1780
- package/shared/definition60.js +278 -1779
- package/shared/definition61.cjs +65870 -11
- package/shared/definition61.js +65869 -11
- package/shared/definition62.cjs +50 -0
- package/shared/definition62.js +46 -0
- package/shared/definition63.cjs +1828 -0
- package/shared/definition63.js +1824 -0
- package/shared/definition7.cjs +8 -6
- package/shared/definition7.js +8 -6
- package/shared/definition8.cjs +27 -20
- package/shared/definition8.js +27 -20
- package/shared/definition9.cjs +7 -10
- package/shared/definition9.js +7 -10
- package/shared/enums.cjs +8 -0
- package/shared/enums.js +8 -1
- package/shared/icon.cjs +7 -2
- package/shared/icon.js +7 -2
- package/shared/index2.cjs +67 -38
- package/shared/index2.js +67 -38
- package/shared/key-codes2.cjs +8 -0
- package/shared/key-codes2.js +5 -1
- package/shared/listbox.cjs +1 -1
- package/shared/listbox.js +1 -1
- package/shared/localization/Locale.d.ts +6 -0
- package/shared/patterns/form-elements/form-elements.d.ts +2 -3
- package/shared/patterns/index.d.ts +0 -1
- package/shared/presentationDate.cjs +140 -81
- package/shared/presentationDate.js +140 -81
- package/shared/slider.template.cjs +71 -0
- package/shared/slider.template.js +67 -0
- package/shared/text-anchor.cjs +6 -0
- package/shared/text-anchor.js +6 -0
- package/shared/text-anchor.template.cjs +33 -33
- package/shared/text-anchor.template.js +33 -33
- package/shared/text-field.cjs +1 -1
- package/shared/text-field.js +1 -1
- package/shared/utils/applyMixinsWithObservables.d.ts +1 -0
- package/side-drawer/index.cjs +1 -1
- package/side-drawer/index.js +1 -1
- package/slider/index.cjs +2 -1
- package/slider/index.js +2 -1
- package/split-button/index.cjs +2 -2
- package/split-button/index.js +2 -2
- package/style.css +1 -0
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/fonts/spezia-variable.css +39 -13
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/styles/tokens/vivid-2-compat.css +4 -2
- package/switch/index.cjs +2 -2
- package/switch/index.js +2 -2
- package/tab/index.cjs +2 -2
- package/tab/index.js +2 -2
- package/tab-panel/index.cjs +1 -1
- package/tab-panel/index.js +1 -1
- package/tabs/index.cjs +4 -4
- package/tabs/index.js +4 -4
- package/tag/index.cjs +2 -2
- package/tag/index.js +2 -2
- package/tag-group/index.cjs +1 -1
- package/tag-group/index.js +1 -1
- package/text-area/index.cjs +4 -3
- package/text-area/index.js +4 -3
- package/text-field/index.cjs +4 -6
- package/text-field/index.js +4 -6
- package/time-picker/index.cjs +8 -10
- package/time-picker/index.js +8 -10
- package/toggletip/index.cjs +5 -5
- package/toggletip/index.js +5 -5
- package/tooltip/index.cjs +5 -5
- package/tooltip/index.js +5 -5
- package/tree-item/index.cjs +2 -2
- package/tree-item/index.js +2 -2
- package/tree-view/index.cjs +1 -1
- package/tree-view/index.js +1 -1
- package/video-player/index.cjs +17 -0
- package/video-player/index.js +15 -0
- package/vivid.api.json +428 -1
- package/focus/index.cjs +0 -7
- package/focus/index.js +0 -5
- package/lib/focus/definition.d.ts +0 -3
- package/lib/focus/focus.d.ts +0 -3
- package/lib/focus/focus.template.d.ts +0 -4
- package/lib/popup/popup.d.ts +0 -21
- package/shared/focus.cjs +0 -8
- package/shared/focus.js +0 -6
- package/shared/focus2.cjs +0 -11
- package/shared/focus2.js +0 -9
- package/shared/patterns/focus.d.ts +0 -3
package/shared/definition12.cjs
CHANGED
|
@@ -5,33 +5,31 @@ const calendarEvent = require('./calendar-event.cjs');
|
|
|
5
5
|
const when = require('./when.cjs');
|
|
6
6
|
const classNames = require('./class-names.cjs');
|
|
7
7
|
|
|
8
|
-
const styles = ":host{display:contents}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);
|
|
8
|
+
const styles = ":host{display:contents}.base{--vvd-calendar-event--indent: calc( 0px + var(--vvd-calendar-event--overlap-count, 0) * 8px );position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{z-index:2000;filter:var(--vvd-shadow-surface-8dp);outline:none}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}\n";
|
|
9
9
|
|
|
10
|
-
const getClasses = ({
|
|
11
|
-
connotation,
|
|
12
|
-
appearance
|
|
13
|
-
}) => classNames.classNames(
|
|
10
|
+
const getClasses = ({ connotation, appearance }) => classNames.classNames(
|
|
14
11
|
"base",
|
|
15
12
|
[`connotation-${connotation}`, Boolean(connotation)],
|
|
16
13
|
[`appearance-${appearance}`, Boolean(appearance)]
|
|
17
14
|
);
|
|
18
15
|
const getStyles = ({ start, duration, overlapCount }) => {
|
|
19
16
|
const stylesObj = {
|
|
20
|
-
...overlapCount && {
|
|
17
|
+
...overlapCount && {
|
|
18
|
+
"--vvd-calendar-event--overlap-count": overlapCount
|
|
19
|
+
},
|
|
21
20
|
...start && { "--vvd-calendar-event--start": start },
|
|
22
21
|
...duration && { "--vvd-calendar-event--duration": duration }
|
|
23
22
|
};
|
|
24
23
|
return Object.entries(stylesObj).map((entry) => entry.join(":")).join(";");
|
|
25
24
|
};
|
|
26
|
-
const CalendarEventTemplate = () => index.html`
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
tabindex="0"
|
|
25
|
+
const CalendarEventTemplate = () => index.html` <div
|
|
26
|
+
style="${getStyles}"
|
|
27
|
+
class="${getClasses}"
|
|
28
|
+
role="button"
|
|
29
|
+
tabindex="0"
|
|
32
30
|
>
|
|
33
|
-
|
|
34
|
-
|
|
31
|
+
${when.when((x) => x.heading, index.html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
|
|
32
|
+
${when.when((x) => x.description, index.html`<p>${(x) => x.description}</p>`)}
|
|
35
33
|
</div>`;
|
|
36
34
|
|
|
37
35
|
const calendarEventDefinition = calendarEvent.CalendarEvent.compose({
|
package/shared/definition12.js
CHANGED
|
@@ -3,33 +3,31 @@ import { C as CalendarEvent } from './calendar-event.js';
|
|
|
3
3
|
import { w as when } from './when.js';
|
|
4
4
|
import { c as classNames } from './class-names.js';
|
|
5
5
|
|
|
6
|
-
const styles = ":host{display:contents}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);
|
|
6
|
+
const styles = ":host{display:contents}.base{--vvd-calendar-event--indent: calc( 0px + var(--vvd-calendar-event--overlap-count, 0) * 8px );position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{z-index:2000;filter:var(--vvd-shadow-surface-8dp);outline:none}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}\n";
|
|
7
7
|
|
|
8
|
-
const getClasses = ({
|
|
9
|
-
connotation,
|
|
10
|
-
appearance
|
|
11
|
-
}) => classNames(
|
|
8
|
+
const getClasses = ({ connotation, appearance }) => classNames(
|
|
12
9
|
"base",
|
|
13
10
|
[`connotation-${connotation}`, Boolean(connotation)],
|
|
14
11
|
[`appearance-${appearance}`, Boolean(appearance)]
|
|
15
12
|
);
|
|
16
13
|
const getStyles = ({ start, duration, overlapCount }) => {
|
|
17
14
|
const stylesObj = {
|
|
18
|
-
...overlapCount && {
|
|
15
|
+
...overlapCount && {
|
|
16
|
+
"--vvd-calendar-event--overlap-count": overlapCount
|
|
17
|
+
},
|
|
19
18
|
...start && { "--vvd-calendar-event--start": start },
|
|
20
19
|
...duration && { "--vvd-calendar-event--duration": duration }
|
|
21
20
|
};
|
|
22
21
|
return Object.entries(stylesObj).map((entry) => entry.join(":")).join(";");
|
|
23
22
|
};
|
|
24
|
-
const CalendarEventTemplate = () => html`
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
tabindex="0"
|
|
23
|
+
const CalendarEventTemplate = () => html` <div
|
|
24
|
+
style="${getStyles}"
|
|
25
|
+
class="${getClasses}"
|
|
26
|
+
role="button"
|
|
27
|
+
tabindex="0"
|
|
30
28
|
>
|
|
31
|
-
|
|
32
|
-
|
|
29
|
+
${when((x) => x.heading, html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
|
|
30
|
+
${when((x) => x.description, html`<p>${(x) => x.description}</p>`)}
|
|
33
31
|
</div>`;
|
|
34
32
|
|
|
35
33
|
const calendarEventDefinition = CalendarEvent.compose({
|
package/shared/definition13.cjs
CHANGED
|
@@ -507,7 +507,7 @@ _has._curry1(function isEmpty(x) {
|
|
|
507
507
|
|
|
508
508
|
const isEmpty$1 = isEmpty;
|
|
509
509
|
|
|
510
|
-
const styles = "ol{padding:0;margin:0;list-style:none}[role=grid i]{position:relative;z-index:0;display:grid;margin:auto;grid-template-areas:\". column-headers\" \"row-headers calendar\";grid-template-columns:min-content auto;inline-size:max(100%,500px);min-inline-size:880px}.row-headers{display:grid;grid-area:row-headers;grid-template-rows:repeat(24,1fr);margin-inline-end:2px}.row-headers>[role=rowheader i]{display:flex;align-items:flex-end;justify-content:flex-end}.row-headers>[role=rowheader i]>time{font:var(--vvd-typography-base-condensed);font-size:small;line-height:1;text-transform:uppercase;white-space:nowrap}.calendar-row{display:contents}.calendar-grid-presentation{display:grid;overflow:hidden;background:var(--vvd-color-surface-2dp);
|
|
510
|
+
const styles = "ol{padding:0;margin:0;list-style:none}[role=grid i]{position:relative;z-index:0;display:grid;margin:auto;grid-template-areas:\". column-headers\" \"row-headers calendar\";grid-template-columns:min-content auto;inline-size:max(100%,500px);min-inline-size:880px}.row-headers{display:grid;grid-area:row-headers;grid-template-rows:repeat(24,1fr);margin-inline-end:2px}.row-headers>[role=rowheader i]{display:flex;align-items:flex-end;justify-content:flex-end}.row-headers>[role=rowheader i]>time{font:var(--vvd-typography-base-condensed);font-size:small;line-height:1;text-transform:uppercase;white-space:nowrap}.calendar-row{display:contents}.calendar-grid-presentation{display:grid;overflow:hidden;border-radius:8px;background:var(--vvd-color-surface-2dp);counter-reset:listing;filter:var(--vvd-shadow-surface-2dp);gap:1px;grid-area:calendar;grid-auto-flow:column;grid-template:repeat(24,1fr)/repeat(7,1fr)}.hours{display:contents}.hours>[role=listitem i]{position:relative;grid-column:1/8;grid-row:var(--row);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));pointer-events:none}.hours>[role=listitem i]:not(:first-child):after{position:absolute;border-block-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";inline-size:100%;margin-block-start:-1px}.hours>[role=listitem i]:nth-child(24n+1){--row: 1}.hours>[role=listitem i]:nth-child(24n+2){--row: 2}.hours>[role=listitem i]:nth-child(24n+3){--row: 3}.hours>[role=listitem i]:nth-child(24n+4){--row: 4}.hours>[role=listitem i]:nth-child(24n+5){--row: 5}.hours>[role=listitem i]:nth-child(24n+6){--row: 6}.hours>[role=listitem i]:nth-child(24n+7){--row: 7}.hours>[role=listitem i]:nth-child(24n+8){--row: 8}.hours>[role=listitem i]:nth-child(24n+9){--row: 9}.hours>[role=listitem i]:nth-child(24n+10){--row: 10}.hours>[role=listitem i]:nth-child(24n+11){--row: 11}.hours>[role=listitem i]:nth-child(24n+12){--row: 12}.hours>[role=listitem i]:nth-child(24n+13){--row: 13}.hours>[role=listitem i]:nth-child(24n+14){--row: 14}.hours>[role=listitem i]:nth-child(24n+15){--row: 15}.hours>[role=listitem i]:nth-child(24n+16){--row: 16}.hours>[role=listitem i]:nth-child(24n+17){--row: 17}.hours>[role=listitem i]:nth-child(24n+18){--row: 18}.hours>[role=listitem i]:nth-child(24n+19){--row: 19}.hours>[role=listitem i]:nth-child(24n+20){--row: 20}.hours>[role=listitem i]:nth-child(24n+21){--row: 21}.hours>[role=listitem i]:nth-child(24n+22){--row: 22}.hours>[role=listitem i]:nth-child(24n+23){--row: 23}.hours>[role=listitem i]:nth-child(24n+24){--row: 24}[role=gridcell i]{display:grid;gap:1px;grid-auto-flow:column}[role=gridcell i],[role=columnheader i],[role=columnheader i] [role=button i]{position:relative}[role=gridcell i]:before,[role=columnheader i]:before,[role=columnheader i] [role=button i]:before{position:absolute;z-index:-1;background-color:var(--vvd-color-information-400);content:\"\";inset:0}[role=gridcell i]:focus,[role=columnheader i]:focus,[role=columnheader i] [role=button i]:focus{outline:none}[role=gridcell i]:not(:focus-visible):before,[role=columnheader i]:not(:focus-visible):before,[role=columnheader i] [role=button i]:not(:focus-visible):before{display:none}.columns{display:contents}.columns>[role=gridcell i]{position:relative;grid-column:var(--column);grid-row:1/25}.columns>[role=gridcell i]:nth-child(1){--column: 1}.columns>[role=gridcell i]:nth-child(2){--column: 2}.columns>[role=gridcell i]:nth-child(3){--column: 3}.columns>[role=gridcell i]:nth-child(4){--column: 4}.columns>[role=gridcell i]:nth-child(5){--column: 5}.columns>[role=gridcell i]:nth-child(6){--column: 6}.columns>[role=gridcell i]:nth-child(7){--column: 7}.columns>[role=gridcell i]:not(:first-child):after{position:absolute;block-size:100%;border-inline-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";margin-inline-start:-1px}.column-headers{display:grid;grid-area:column-headers;grid-template-columns:repeat(7,1fr)}.column-headers [role=columnheader i] h2{display:grid;align-items:baseline;margin:0;font:var(--vvd-typography-heading-4);grid-template-columns:1fr auto 1fr}.column-headers [role=columnheader i] h2>em{font:inherit;inline-size:min-content;inset-inline-start:0}.column-headers [role=columnheader i] h2>small{font:var(--vvd-typography-base-condensed);text-transform:uppercase}\n";
|
|
511
511
|
|
|
512
512
|
const ARROW_UP = "ArrowUp";
|
|
513
513
|
const ARROW_RIGHT = "ArrowRight";
|
|
@@ -540,9 +540,13 @@ function getHeaderDescendantGridCell(key, activeElement) {
|
|
|
540
540
|
return;
|
|
541
541
|
}
|
|
542
542
|
const header = activeElement.closest('[role="columnheader"i]');
|
|
543
|
-
const columnHeaders = this.shadowRoot.querySelectorAll(
|
|
543
|
+
const columnHeaders = this.shadowRoot.querySelectorAll(
|
|
544
|
+
'[role="columnheader"i]'
|
|
545
|
+
);
|
|
544
546
|
const i = Array.from(columnHeaders).indexOf(header);
|
|
545
|
-
return this.shadowRoot.querySelector(
|
|
547
|
+
return this.shadowRoot.querySelector(
|
|
548
|
+
`[role="gridcell"i]:nth-child(${i + 1})`
|
|
549
|
+
);
|
|
546
550
|
}
|
|
547
551
|
|
|
548
552
|
function getDay(el) {
|
|
@@ -555,7 +559,9 @@ function getDay(el) {
|
|
|
555
559
|
}
|
|
556
560
|
}
|
|
557
561
|
function getHour(e, el, hours) {
|
|
558
|
-
const rowHeaderOrCell = el.closest(
|
|
562
|
+
const rowHeaderOrCell = el.closest(
|
|
563
|
+
'[role="rowheader"], [role="gridcell"i]'
|
|
564
|
+
);
|
|
559
565
|
if (rowHeaderOrCell) {
|
|
560
566
|
const DOMRect = rowHeaderOrCell.getBoundingClientRect();
|
|
561
567
|
const offsetY = e.clientY - DOMRect.y;
|
|
@@ -566,11 +572,15 @@ function getHour(e, el, hours) {
|
|
|
566
572
|
}
|
|
567
573
|
const getEventContext = function(e) {
|
|
568
574
|
if (!(e instanceof KeyboardEvent || e instanceof MouseEvent)) {
|
|
569
|
-
throw new Error(
|
|
575
|
+
throw new Error(
|
|
576
|
+
"Invalid event. Event must be instance of KeyboardEvent or MouseEvent"
|
|
577
|
+
);
|
|
570
578
|
}
|
|
571
579
|
const [el] = e.composedPath();
|
|
572
580
|
if (!(el && el instanceof HTMLElement && this.shadowRoot.contains(el))) {
|
|
573
|
-
throw new Error(
|
|
581
|
+
throw new Error(
|
|
582
|
+
"Invalid event. Event must contain a target object which is a direct descendant of calendar"
|
|
583
|
+
);
|
|
574
584
|
}
|
|
575
585
|
const day = getDay(el);
|
|
576
586
|
let hour;
|
|
@@ -638,7 +648,9 @@ class Calendar extends index.FoundationElement {
|
|
|
638
648
|
}
|
|
639
649
|
getCalendarEventContainingCell(calendarEvent) {
|
|
640
650
|
const slotName = calendarEvent.getAttribute("slot");
|
|
641
|
-
const gridCell = this.shadowRoot.querySelector(
|
|
651
|
+
const gridCell = this.shadowRoot.querySelector(
|
|
652
|
+
`slot[name="${slotName}"i]`
|
|
653
|
+
);
|
|
642
654
|
return gridCell.parentElement;
|
|
643
655
|
}
|
|
644
656
|
arrowKeysInteractions(key) {
|
|
@@ -647,11 +659,19 @@ class Calendar extends index.FoundationElement {
|
|
|
647
659
|
if (isCellOrHeader(activeElement)) {
|
|
648
660
|
focusNext = getNextFocusableGridElement.call(this, key, activeElement);
|
|
649
661
|
} else if (this.#activeCalendarEvent) {
|
|
650
|
-
focusNext = this.getCalendarEventContainingCell(
|
|
662
|
+
focusNext = this.getCalendarEventContainingCell(
|
|
663
|
+
this.#activeCalendarEvent
|
|
664
|
+
);
|
|
651
665
|
} else if (activeElement?.matches('em[role="button"i]')) {
|
|
652
|
-
focusNext = getHeaderDescendantGridCell.call(
|
|
666
|
+
focusNext = getHeaderDescendantGridCell.call(
|
|
667
|
+
this,
|
|
668
|
+
key,
|
|
669
|
+
activeElement
|
|
670
|
+
);
|
|
653
671
|
} else {
|
|
654
|
-
focusNext = this.shadowRoot.querySelector(
|
|
672
|
+
focusNext = this.shadowRoot.querySelector(
|
|
673
|
+
'[role="columnheader"i]'
|
|
674
|
+
);
|
|
655
675
|
}
|
|
656
676
|
this.activateElement(focusNext);
|
|
657
677
|
}
|
|
@@ -662,7 +682,9 @@ class Calendar extends index.FoundationElement {
|
|
|
662
682
|
el?.focus();
|
|
663
683
|
}
|
|
664
684
|
onKeydown({ key }) {
|
|
665
|
-
const isArrow = [ARROW_UP, ARROW_RIGHT, ARROW_DOWN, ARROW_LEFT].some(
|
|
685
|
+
const isArrow = [ARROW_UP, ARROW_RIGHT, ARROW_DOWN, ARROW_LEFT].some(
|
|
686
|
+
(predefinedKey) => predefinedKey == key
|
|
687
|
+
);
|
|
666
688
|
if (isArrow) {
|
|
667
689
|
this.arrowKeysInteractions(key);
|
|
668
690
|
}
|
|
@@ -684,7 +706,9 @@ __decorateClass([
|
|
|
684
706
|
|
|
685
707
|
function getValidDateString(date) {
|
|
686
708
|
const twoDigit = (num) => `0${num}`.slice(-2);
|
|
687
|
-
return `${date.getFullYear()}-${twoDigit(date.getMonth() + 1)}-${twoDigit(
|
|
709
|
+
return `${date.getFullYear()}-${twoDigit(date.getMonth() + 1)}-${twoDigit(
|
|
710
|
+
date.getDate()
|
|
711
|
+
)}`;
|
|
688
712
|
}
|
|
689
713
|
const weekdaysMap = /* @__PURE__ */ new Map([
|
|
690
714
|
["sunday", 0],
|
|
@@ -699,78 +723,97 @@ function getFirstDateOfTheWeek(date = /* @__PURE__ */ new Date(), startDay) {
|
|
|
699
723
|
}
|
|
700
724
|
|
|
701
725
|
const HoursTemplate = () => {
|
|
702
|
-
return index.html`
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
726
|
+
return index.html` <div class="row-headers" role="row">
|
|
727
|
+
${repeat.repeat(
|
|
728
|
+
(x) => x.hoursAsDatetime,
|
|
729
|
+
index.html`<span role="rowheader">
|
|
730
|
+
<time
|
|
731
|
+
datetime="${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
|
|
732
|
+
hour: "numeric",
|
|
733
|
+
minute: "numeric",
|
|
734
|
+
hour12: false
|
|
735
|
+
}).format(x)}"
|
|
736
|
+
>
|
|
737
|
+
${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
|
|
738
|
+
hour: "numeric",
|
|
739
|
+
hour12: c.parent.hour12
|
|
740
|
+
}).format(x)}
|
|
741
|
+
</time>
|
|
742
|
+
</span>`
|
|
743
|
+
)}
|
|
744
|
+
</div>`;
|
|
717
745
|
};
|
|
718
746
|
const DaysTemplate = () => {
|
|
719
|
-
return index.html`
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
747
|
+
return index.html` <div class="column-headers" role="row">
|
|
748
|
+
${repeat.repeat(
|
|
749
|
+
(x) => x._generateDaysArr([getFirstDateOfTheWeek(x.datetime, x.startDay)]),
|
|
750
|
+
index.html` <div role="columnheader" tabindex="-1">
|
|
751
|
+
<time datetime=${(x) => getValidDateString(x)}>
|
|
752
|
+
<h2>
|
|
753
|
+
<!-- TODO add to column aria-labelledby or describedby to count
|
|
726
754
|
events and related day e.g. "3 events, Sunday, March 8" -->
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
</
|
|
740
|
-
|
|
755
|
+
<em
|
|
756
|
+
tabindex="0"
|
|
757
|
+
role="button"
|
|
758
|
+
aria-label=${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
|
|
759
|
+
weekday: "long",
|
|
760
|
+
month: "long",
|
|
761
|
+
day: "2-digit"
|
|
762
|
+
}).format(x)}
|
|
763
|
+
>
|
|
764
|
+
${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
|
|
765
|
+
day: "2-digit"
|
|
766
|
+
}).format(x)}
|
|
767
|
+
</em>
|
|
768
|
+
<small aria-hidden="true">
|
|
769
|
+
${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
|
|
770
|
+
weekday: "short"
|
|
771
|
+
}).format(x)}
|
|
772
|
+
</small>
|
|
773
|
+
</h2>
|
|
774
|
+
</time>
|
|
775
|
+
</div>`
|
|
776
|
+
)}
|
|
777
|
+
</div>`;
|
|
741
778
|
};
|
|
742
779
|
const ColumnTemplate = index.html`
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
780
|
+
<div role="gridcell" tabindex="-1">
|
|
781
|
+
<slot name="day-${(_, c) => c.index}"></slot>
|
|
782
|
+
</div>
|
|
783
|
+
`;
|
|
747
784
|
const CalendarTemplate = () => index.html`
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
785
|
+
<div role="grid" @keydown=${(x, c) => x.onKeydown(c.event)}>
|
|
786
|
+
${DaysTemplate}
|
|
787
|
+
<div class="calendar-row" role="rowgroup">
|
|
788
|
+
${HoursTemplate}
|
|
789
|
+
<div class="calendar-grid-presentation" role="presentation">
|
|
790
|
+
<div class="hours" role="list">
|
|
791
|
+
${repeat.repeat(
|
|
792
|
+
(x) => Array.from({ length: x.hoursAsDatetime.length + 1 }),
|
|
793
|
+
index.html` <div role="listitem"></div>`
|
|
794
|
+
)}
|
|
795
|
+
</div>
|
|
796
|
+
<div class="columns" role="row">
|
|
797
|
+
${repeat.repeat((x) => Array.from(Array(x._days)), ColumnTemplate, {
|
|
798
|
+
positioning: true
|
|
799
|
+
})}
|
|
800
|
+
</div>
|
|
801
|
+
<slot></slot>
|
|
802
|
+
</div>
|
|
803
|
+
</div>
|
|
804
|
+
</div>
|
|
764
805
|
`;
|
|
765
806
|
|
|
766
|
-
const calendarDefinition = Calendar.compose(
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
807
|
+
const calendarDefinition = Calendar.compose(
|
|
808
|
+
{
|
|
809
|
+
baseName: "calendar",
|
|
810
|
+
template: CalendarTemplate,
|
|
811
|
+
styles,
|
|
812
|
+
shadowOptions: {
|
|
813
|
+
delegatesFocus: true
|
|
814
|
+
}
|
|
772
815
|
}
|
|
773
|
-
|
|
816
|
+
);
|
|
774
817
|
const calendarRegistries = [calendarDefinition()];
|
|
775
818
|
const registerCalendar = index.registerFactory(calendarRegistries);
|
|
776
819
|
|