@vonage/vivid 5.1.0 → 5.3.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/accordion-item/definition.cjs +2 -1
- package/accordion-item/definition.js +2 -1
- package/alert/index.cjs +1 -1
- package/alert/index.js +1 -1
- package/audio-player/definition.cjs +41 -6
- package/audio-player/definition.js +41 -6
- package/audio-player/index.cjs +27 -25
- package/audio-player/index.js +88 -62
- package/badge/index.cjs +2 -2
- package/badge/index.js +4 -4
- package/banner/index.cjs +3 -3
- package/banner/index.js +6 -6
- package/breadcrumb-item/index.cjs +1 -1
- package/breadcrumb-item/index.js +1 -1
- package/bundled/affix.cjs +7 -7
- package/bundled/affix.js +5 -5
- package/bundled/anchored.cjs +1 -1
- package/bundled/anchored.js +6 -6
- package/bundled/attribute-binding-behaviour.cjs +1 -1
- package/bundled/attribute-binding-behaviour.js +15 -13
- package/bundled/base-color-picker.cjs +13 -0
- package/bundled/base-color-picker.js +194 -0
- package/bundled/button.cjs +1 -1
- package/bundled/button.js +2 -2
- package/bundled/calendar-picker.template.cjs +1 -1
- package/bundled/calendar-picker.template.js +21 -21
- package/bundled/char-count.cjs +1 -1
- package/bundled/char-count.js +1 -1
- package/bundled/children.cjs +1 -1
- package/bundled/children.js +28 -20
- package/bundled/definition.cjs +3 -3
- package/bundled/definition.js +38 -38
- package/bundled/definition10.cjs +72 -18
- package/bundled/definition10.js +351 -65
- package/bundled/definition11.cjs +19 -10
- package/bundled/definition11.js +66 -37
- package/bundled/definition12.cjs +10 -1
- package/bundled/definition12.js +38 -14
- package/bundled/definition13.cjs +1 -73
- package/bundled/definition13.js +15 -354
- package/bundled/definition15.cjs +1 -1
- package/bundled/definition15.js +1 -1
- package/bundled/definition16.cjs +2 -2
- package/bundled/definition16.js +8 -8
- package/bundled/definition17.cjs +7 -7
- package/bundled/definition17.js +17 -17
- package/bundled/definition19.cjs +17 -14
- package/bundled/definition19.js +85 -77
- package/bundled/definition2.cjs +9 -5
- package/bundled/definition2.js +21 -17
- package/bundled/definition22.cjs +9 -9
- package/bundled/definition22.js +31 -31
- package/bundled/definition3.cjs +1 -1
- package/bundled/definition3.js +1 -1
- package/bundled/definition6.cjs +6 -6
- package/bundled/definition6.js +34 -31
- package/bundled/definition7.cjs +1 -1
- package/bundled/definition7.js +6 -6
- package/bundled/definition8.cjs +2 -2
- package/bundled/definition8.js +4 -4
- package/bundled/definition9.cjs +1 -1
- package/bundled/definition9.js +1 -1
- package/bundled/delegates-aria.cjs +1 -1
- package/bundled/delegates-aria.js +59 -46
- package/bundled/form-associated.cjs +1 -1
- package/bundled/form-associated.js +3 -3
- package/bundled/host-semantics.cjs +1 -1
- package/bundled/host-semantics.js +48 -34
- package/bundled/localized.cjs +1 -1
- package/bundled/localized.js +43 -31
- package/bundled/mixins.cjs +18 -18
- package/bundled/mixins.js +99 -93
- package/bundled/normalize.cjs +1 -0
- package/bundled/normalize.js +7 -0
- package/bundled/picker-field.template.cjs +18 -13
- package/bundled/picker-field.template.js +45 -37
- package/bundled/ref.cjs +1 -1
- package/bundled/ref.js +8 -25
- package/bundled/repeat.cjs +1 -1
- package/bundled/repeat.js +459 -233
- package/bundled/slider.template.cjs +1 -1
- package/bundled/slider.template.js +2 -2
- package/bundled/slotted.cjs +1 -1
- package/bundled/slotted.js +62 -45
- package/bundled/text-field.cjs +1 -1
- package/bundled/text-field.js +1 -1
- package/bundled/time-selection-picker.template.cjs +1 -1
- package/bundled/time-selection-picker.template.js +5 -5
- package/bundled/vivid-element.cjs +1 -1
- package/bundled/vivid-element.js +2126 -1172
- package/bundled/when.cjs +1 -1
- package/bundled/when.js +8 -7
- package/bundled/with-contextual-help.cjs +1 -1
- package/bundled/with-contextual-help.js +17 -7
- package/calendar/definition.cjs +1 -1
- package/calendar/definition.js +2 -2
- package/calendar/index.cjs +1 -1
- package/calendar/index.js +6 -6
- package/calendar-event/index.cjs +1 -1
- package/calendar-event/index.js +1 -1
- package/card/definition.cjs +10 -2
- package/card/definition.js +10 -2
- package/card/index.cjs +19 -11
- package/card/index.js +35 -27
- package/color-picker/definition.cjs +1079 -0
- package/color-picker/definition.js +1073 -0
- package/color-picker/index.cjs +127 -0
- package/color-picker/index.js +726 -0
- package/combobox/definition.cjs +13 -6
- package/combobox/definition.js +14 -7
- package/combobox/index.cjs +15 -11
- package/combobox/index.js +82 -75
- package/contextual-help/index.cjs +1 -1
- package/contextual-help/index.js +1 -1
- package/custom-elements.json +1621 -325
- package/data-grid/definition.cjs +862 -27
- package/data-grid/definition.js +863 -28
- package/data-grid/index.cjs +25 -25
- package/data-grid/index.js +175 -168
- package/date-picker/index.cjs +1 -1
- package/date-picker/index.js +2 -2
- package/date-range-picker/index.cjs +1 -1
- package/date-range-picker/index.js +2 -2
- package/date-time-picker/index.cjs +1 -1
- package/date-time-picker/index.js +2 -2
- package/dial-pad/definition.cjs +55 -1
- package/dial-pad/definition.js +56 -2
- package/dial-pad/index.cjs +21 -18
- package/dial-pad/index.js +138 -104
- package/dialog/definition.cjs +4 -1
- package/dialog/definition.js +4 -1
- package/dialog/index.cjs +21 -18
- package/dialog/index.js +43 -40
- package/empty-state/definition.cjs +7 -2
- package/empty-state/definition.js +7 -2
- package/empty-state/index.cjs +10 -5
- package/empty-state/index.js +18 -13
- package/fab/index.cjs +2 -2
- package/fab/index.js +4 -4
- package/file-picker/definition.cjs +16 -7
- package/file-picker/definition.js +17 -8
- package/file-picker/index.cjs +12 -9
- package/file-picker/index.js +103 -93
- package/icon/definition.cjs +10 -6
- package/icon/definition.js +10 -6
- package/index.cjs +4 -0
- package/index.js +1 -0
- package/lib/accordion-item/accordion-item.d.ts +2 -2
- package/lib/action-group/action-group.d.ts +2 -2
- package/lib/alert/alert.d.ts +4 -4
- package/lib/audio-player/audio-player.d.ts +6 -2
- package/lib/avatar/avatar.d.ts +2 -2
- package/lib/badge/badge.d.ts +2 -2
- package/lib/banner/banner.d.ts +6 -6
- package/lib/breadcrumb/breadcrumb.d.ts +2 -2
- package/lib/breadcrumb-item/breadcrumb-item.d.ts +2 -2
- package/lib/button/button.d.ts +6 -6
- package/lib/button/button.template.d.ts +2 -1
- package/lib/calendar/calendar.d.ts +1 -1
- package/lib/calendar-event/calendar-event.d.ts +2 -2
- package/lib/card/card.d.ts +2 -2
- package/lib/checkbox/checkbox.d.ts +12 -12
- package/lib/color-picker/color-picker.d.ts +2420 -0
- package/lib/color-picker/color-picker.template.d.ts +3 -0
- package/lib/color-picker/definition.d.ts +4 -0
- package/lib/color-picker/locale.d.ts +9 -0
- package/lib/combobox/combobox.d.ts +495 -78
- package/lib/components.d.ts +1 -0
- package/lib/data-grid/data-grid-cell.d.ts +4 -4
- package/lib/data-grid/data-grid-row.d.ts +3 -4
- package/lib/data-grid/data-grid.d.ts +1 -2
- package/lib/date-picker/date-picker.d.ts +906 -894
- package/lib/date-range-picker/date-range-picker.d.ts +596 -590
- package/lib/date-time-picker/date-time-picker.d.ts +907 -895
- package/lib/dial-pad/dial-pad.d.ts +3 -2
- package/lib/dial-pad/dial-pad.template.d.ts +1 -1
- package/lib/dial-pad/locale.d.ts +1 -0
- package/lib/dialog/dialog.d.ts +4 -4
- package/lib/divider/divider.d.ts +2 -2
- package/lib/fab/fab.d.ts +2 -2
- package/lib/file-picker/file-picker.d.ts +495 -78
- package/lib/header/header.d.ts +2 -2
- package/lib/menu/menu.d.ts +5 -4
- package/lib/menu-item/menu-item.d.ts +4 -4
- package/lib/nav/nav.d.ts +2 -2
- package/lib/nav-disclosure/nav-disclosure.d.ts +4 -4
- package/lib/nav-item/nav-item.d.ts +4 -4
- package/lib/note/note.d.ts +2 -2
- package/lib/number-field/number-field.d.ts +19 -18
- package/lib/option/option.d.ts +4 -4
- package/lib/pagination/pagination.d.ts +2 -2
- package/lib/progress/progress.d.ts +2 -2
- package/lib/progress-ring/progress-ring.d.ts +2 -2
- package/lib/radio/radio.d.ts +6 -6
- package/lib/radio-group/radio-group.d.ts +2 -2
- package/lib/range-slider/range-slider.d.ts +6 -6
- package/lib/rich-text-editor/menubar/menubar.d.ts +2 -2
- package/lib/rich-text-editor/rich-text-editor.d.ts +2 -2
- package/lib/searchable-select/option-tag.d.ts +2 -2
- package/lib/searchable-select/searchable-select.d.ts +521 -104
- package/lib/select/select.d.ts +484 -67
- package/lib/selectable-box/selectable-box.d.ts +2 -2
- package/lib/simple-color-picker/locale.d.ts +0 -1
- package/lib/simple-color-picker/simple-color-picker.d.ts +47 -821
- package/lib/slider/slider.d.ts +6 -6
- package/lib/split-button/split-button.d.ts +6 -6
- package/lib/switch/switch.d.ts +4 -4
- package/lib/tab/tab.d.ts +6 -6
- package/lib/tab-panel/tab-panel.d.ts +2 -2
- package/lib/tag/tag.d.ts +6 -6
- package/lib/tag-group/tag-group.d.ts +2 -2
- package/lib/tag-name-map.d.ts +2 -1
- package/lib/text-area/text-area.d.ts +17 -16
- package/lib/text-field/text-field.d.ts +19 -18
- package/lib/time-picker/time-picker.d.ts +579 -573
- package/lib/toggletip/toggletip.d.ts +4 -4
- package/lib/tooltip/tooltip.d.ts +2 -2
- package/lib/tree-item/tree-item.d.ts +4 -4
- package/lib/tree-view/tree-view.d.ts +2 -2
- package/lib/video-player/video-player.d.ts +2 -2
- package/locales/de-DE.cjs +15 -3
- package/locales/de-DE.js +15 -3
- package/locales/en-GB.cjs +15 -3
- package/locales/en-GB.js +15 -3
- package/locales/en-US.cjs +15 -3
- package/locales/en-US.js +15 -3
- package/locales/ja-JP.cjs +15 -3
- package/locales/ja-JP.js +15 -3
- package/locales/zh-CN.cjs +15 -3
- package/locales/zh-CN.js +15 -3
- package/menu/definition.cjs +8 -4
- package/menu/definition.js +9 -5
- package/note/index.cjs +2 -2
- package/note/index.js +4 -4
- package/number-field/definition.cjs +3 -3
- package/number-field/definition.js +4 -4
- package/number-field/index.cjs +8 -8
- package/number-field/index.js +41 -40
- package/option/index.cjs +1 -1
- package/option/index.js +1 -1
- package/package.json +5 -5
- package/pagination/definition.cjs +2 -1
- package/pagination/definition.js +2 -1
- package/pagination/index.cjs +12 -12
- package/pagination/index.js +59 -59
- package/progress/index.cjs +1 -1
- package/progress/index.js +1 -1
- package/radio/definition.cjs +9 -9
- package/radio/definition.js +10 -10
- package/radio-group/definition.cjs +2 -1
- package/radio-group/definition.js +2 -1
- package/radio-group/index.cjs +5 -5
- package/radio-group/index.js +80 -77
- package/range-slider/index.cjs +1 -1
- package/range-slider/index.js +1 -1
- package/rich-text-editor/definition.cjs +1 -1
- package/rich-text-editor/definition.js +2 -2
- package/rich-text-editor/index.cjs +2 -2
- package/rich-text-editor/index.js +3 -3
- package/searchable-select/definition.cjs +30 -21
- package/searchable-select/definition.js +31 -22
- package/searchable-select/index.cjs +28 -25
- package/searchable-select/index.js +149 -140
- package/select/definition.cjs +15 -7
- package/select/definition.js +16 -8
- package/selectable-box/definition.cjs +1 -1
- package/selectable-box/definition.js +1 -1
- package/selectable-box/index.cjs +3 -3
- package/selectable-box/index.js +20 -20
- package/shared/aria/aria-change-subscription.d.ts +0 -1
- package/shared/aria/aria-mixin.d.ts +2 -2
- package/shared/aria/delegate-aria-behavior.d.ts +5 -10
- package/shared/aria/delegates-aria.d.ts +3 -3
- package/shared/aria/host-semantics-behavior.d.ts +5 -8
- package/shared/aria/host-semantics.d.ts +3 -3
- package/shared/color-picker/base-color-picker.d.ts +436 -0
- package/shared/color-picker/index.d.ts +1 -0
- package/shared/color-picker/locale.d.ts +3 -0
- package/shared/color-picker/utils.d.ts +1 -0
- package/shared/deprecation/replaced-props.d.ts +317 -2
- package/shared/design-system/defineVividComponent.d.ts +2 -2
- package/shared/feedback/feedback-message.d.ts +2 -2
- package/shared/feedback/mixins.d.ts +4 -4
- package/shared/foundation/button/button.d.ts +4 -4
- package/shared/foundation/form-associated/form-associated.d.ts +4 -4
- package/shared/foundation/vivid-element/vivid-element.d.ts +335 -8
- package/shared/localization/Locale.d.ts +4 -0
- package/shared/patterns/affix.d.ts +4 -4
- package/shared/patterns/anchored.d.ts +4 -4
- package/shared/patterns/char-count/char-count.d.ts +2 -2
- package/shared/patterns/form-elements/form-element.d.ts +4 -4
- package/shared/patterns/form-elements/index.d.ts +1 -0
- package/shared/patterns/form-elements/with-contextual-help.d.ts +7 -6
- package/shared/patterns/form-elements/with-error-text.d.ts +6 -6
- package/shared/patterns/form-elements/with-success-text.d.ts +2 -2
- package/shared/patterns/linkable.d.ts +2 -2
- package/shared/patterns/localized.d.ts +2 -2
- package/shared/patterns/trapped-focus.d.ts +2 -2
- package/shared/picker-field/mixins/calendar-picker.d.ts +454 -451
- package/shared/picker-field/mixins/calendar-picker.template.d.ts +454 -451
- package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.d.ts +2 -2
- package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +600 -594
- package/shared/picker-field/mixins/single-date-picker.d.ts +746 -737
- package/shared/picker-field/mixins/single-value-picker.d.ts +451 -448
- package/shared/picker-field/mixins/time-selection-picker.d.ts +580 -574
- package/shared/picker-field/mixins/time-selection-picker.template.d.ts +579 -573
- package/shared/picker-field/picker-field.d.ts +495 -78
- package/shared/templating/attribute-binding-behaviour.d.ts +3 -4
- package/shared/templating/render-in-light-dom.d.ts +13 -12
- package/side-drawer/index.cjs +1 -1
- package/side-drawer/index.js +1 -1
- package/simple-color-picker/definition.cjs +28 -215
- package/simple-color-picker/definition.js +29 -216
- package/simple-color-picker/index.cjs +9 -21
- package/simple-color-picker/index.js +71 -185
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/styles/tokens/vivid-2-compat.css +1 -1
- package/switch/index.cjs +2 -2
- package/switch/index.js +4 -4
- package/tabs/definition.cjs +1 -1
- package/tabs/definition.js +2 -2
- package/tabs/index.cjs +2 -2
- package/tabs/index.js +16 -16
- package/tag/index.cjs +1 -1
- package/tag/index.js +1 -1
- package/text-area/definition.cjs +1 -1
- package/text-area/definition.js +1 -1
- package/text-area/index.cjs +3 -3
- package/text-area/index.js +9 -9
- package/text-field/definition.cjs +3 -3
- package/text-field/definition.js +4 -4
- package/text-field/index.cjs +1 -1
- package/text-field/index.js +1 -1
- package/time-picker/index.cjs +1 -1
- package/time-picker/index.js +2 -2
- package/toggletip/definition.cjs +1 -1
- package/toggletip/definition.js +2 -2
- package/tree-view/definition.cjs +1 -1
- package/tree-view/definition.js +2 -2
- package/tree-view/index.cjs +2 -2
- package/tree-view/index.js +6 -6
- package/unbundled/_commonjsHelpers.cjs +36 -0
- package/unbundled/_commonjsHelpers.js +32 -0
- package/unbundled/affix.cjs +1 -1
- package/unbundled/affix.js +1 -1
- package/unbundled/attribute-binding-behaviour.cjs +11 -10
- package/unbundled/attribute-binding-behaviour.js +11 -10
- package/unbundled/base-color-picker.cjs +278 -0
- package/unbundled/base-color-picker.js +275 -0
- package/unbundled/button.cjs +1 -1
- package/unbundled/button.js +2 -2
- package/unbundled/calendar-picker.template.cjs +3 -3
- package/unbundled/calendar-picker.template.js +4 -4
- package/unbundled/definition2.cjs +1 -1
- package/unbundled/definition2.js +2 -2
- package/unbundled/definition3.cjs +2 -1
- package/unbundled/definition3.js +2 -1
- package/unbundled/delegates-aria.cjs +67 -33
- package/unbundled/delegates-aria.js +69 -35
- package/unbundled/form-associated.cjs +2 -2
- package/unbundled/form-associated.js +3 -3
- package/unbundled/host-semantics.cjs +47 -22
- package/unbundled/host-semantics.js +48 -23
- package/unbundled/mixins.cjs +34 -27
- package/unbundled/mixins.js +35 -28
- package/unbundled/picker-field.template.cjs +13 -5
- package/unbundled/picker-field.template.js +14 -6
- package/unbundled/text-field.cjs +1 -1
- package/unbundled/text-field.js +1 -1
- package/unbundled/time-selection-picker.template.cjs +4 -4
- package/unbundled/time-selection-picker.template.js +5 -5
- package/unbundled/vivid-element.cjs +22 -15
- package/unbundled/vivid-element.js +23 -15
- package/unbundled/with-contextual-help.cjs +11 -0
- package/unbundled/with-contextual-help.js +11 -0
- package/video-player/definition.cjs +69007 -1
- package/video-player/definition.js +69007 -1
- package/video-player/index.cjs +35 -35
- package/video-player/index.js +1358 -1384
- package/visually-hidden/index.cjs +1 -1
- package/visually-hidden/index.js +1 -1
- package/vivid.api.json +347 -69
package/data-grid/index.cjs
CHANGED
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
"use strict";const
|
|
1
|
+
"use strict";const S=require("../bundled/definition2.cjs"),n=require("../bundled/vivid-element.cjs"),H=require("../bundled/definition13.cjs"),O=require("../bundled/repeat.cjs"),_=require("../bundled/normalize.cjs"),u=require("../bundled/key-codes.cjs"),T=require("../bundled/host-semantics.cjs"),z=require("../bundled/children.cjs"),x=require("../bundled/slotted.cjs"),q=require("../bundled/localized.cjs"),G=require("../bundled/class-names.cjs"),A=require("../bundled/when.cjs"),$="focus",F="focusin",C="focusout",w="keydown",P=":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:relative;overflow:auto;block-size:inherit;inline-size:100%;max-block-size:inherit}",L=".base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-row-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-data-grid-row-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-row-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-data-grid-row-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:grid;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host([row-type=sticky-header]) .base{position:sticky;z-index:9;top:0;background:var(--data-grid-row-background, var(--vvd-color-canvas))}:host([row-type=hidden-header]) .base{display:none}:host(:is([selected]):not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}",M=':host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){position:sticky;z-index:5;background:var(--data-grid-cell-background, var(--vvd-color-surface-2dp))}:host([data-fixed]):before{position:absolute;z-index:1;top:0;right:0;width:1px;block-size:100%;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d;content:"";pointer-events:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:13px 14px;padding-inline:12px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host(:is([selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}:host(:not([cell-type=columnheader][aria-sort])) slot{inline-size:100%}.header-icon{margin-inline-start:16px}',D={none:"none",ascending:"ascending",descending:"descending",other:"other"},g={none:"none",default:"default",sticky:"sticky"},v={default:"default",columnHeader:"columnheader",rowHeader:"rowheader"},p={default:"default",header:"header",stickyHeader:"sticky-header"},R={columnheader:"columnheader",rowheader:"rowheader",default:"gridcell"};var U=Object.defineProperty,b=(i,e,t,l)=>{for(var o=void 0,r=i.length-1,a;r>=0;r--)(a=i[r])&&(o=a(e,t,o)||o);return o&&U(e,t,o),o};const V=n.html`
|
|
2
2
|
<template>
|
|
3
3
|
${i=>i.rowData===null||i.columnDefinition===null||i.columnDefinition.columnDataKey===null?null:i.rowData[i.columnDefinition.columnDataKey]}
|
|
4
4
|
</template>
|
|
5
|
-
`,
|
|
5
|
+
`,K=n.html`
|
|
6
6
|
<template>
|
|
7
7
|
${i=>i.columnDefinition.title===void 0?i.columnDefinition.columnDataKey:i.columnDefinition.title}
|
|
8
8
|
</template>
|
|
9
|
-
`;class f extends G.Localized(D.HostSemantics(n.VividElement)){constructor(){super(...arguments),this.cellType=v.default,this.rowData=null,this.columnDefinition=null,this.isActiveCell=!1,this.customCellView=null,this.updateCellStyle=()=>{this.gridColumn&&!this.gridColumn.includes("undefined")?this.style.gridColumn=this.gridColumn:this.style.removeProperty("grid-column")},this._selectable=!1,this.selected=!1,this.ariaSelected=null,this.ariaSort=null}cellTypeChanged(){this.$fastController.isConnected&&this.updateCellView()}gridColumnChanged(){this.$fastController.isConnected&&this.updateCellStyle()}columnDefinitionChanged(e,t){this.$fastController.isConnected&&this.updateCellView()}updateFixedStyle(){this.fixedPosition!==void 0?(this.setAttribute("data-fixed",""),this.style.left=this.fixedPosition):(this.removeAttribute("data-fixed"),this.style.removeProperty("left"))}setFixedPosition(e){this.fixedPosition=e,this.updateFixedStyle()}connectedCallback(){super.connectedCallback(),this.addEventListener($,this.handleFocusin),this.addEventListener(C,this.handleFocusout),this.addEventListener(w,this.handleKeydown),this.style.gridColumn=`${this.columnDefinition?.gridColumn===void 0?0:this.columnDefinition.gridColumn}`,this.updateCellView(),this.updateCellStyle(),this.updateFixedStyle()}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener($,this.handleFocusin),this.removeEventListener(C,this.handleFocusout),this.removeEventListener(w,this.handleKeydown),this.disconnectCellView()}handleFocusin(e){if(this.shadowRoot.querySelector(".base").classList.add("active"),!this.isActiveCell){switch(this.isActiveCell=!0,this.cellType){case v.columnHeader:if(this.columnDefinition!==null&&this.columnDefinition.headerCellInternalFocusQueue!==!0&&typeof this.columnDefinition.headerCellFocusTargetCallback=="function"){const t=this.columnDefinition.headerCellFocusTargetCallback(this);t!==null&&t.focus()}break;default:if(this.columnDefinition!==null&&this.columnDefinition.cellInternalFocusQueue!==!0&&typeof this.columnDefinition.cellFocusTargetCallback=="function"){const t=this.columnDefinition.cellFocusTargetCallback(this);t!==null&&t.focus()}break}this.$emit("cell-focused",this)}}handleFocusout(e){this.shadowRoot.querySelector(".base").classList.remove("active"),this!==document.activeElement&&!this.contains(document.activeElement)&&(this.isActiveCell=!1)}handleKeydown(e){if(!(e.defaultPrevented||this.columnDefinition===null||this.cellType===v.default&&this.columnDefinition.cellInternalFocusQueue!==!0||this.cellType===v.columnHeader&&this.columnDefinition.headerCellInternalFocusQueue!==!0))switch(e.key){case u.keyEnter:case u.keyFunction2:if(this.contains(document.activeElement)&&document.activeElement!==this)return;switch(this.cellType){case v.columnHeader:if(this.columnDefinition.headerCellFocusTargetCallback!==void 0){const t=this.columnDefinition.headerCellFocusTargetCallback(this);t!==null&&t.focus(),e.preventDefault()}break;default:if(this.columnDefinition.cellFocusTargetCallback!==void 0){const t=this.columnDefinition.cellFocusTargetCallback(this);t!==null&&t.focus(),e.preventDefault()}break}break;case u.keyEscape:this.contains(document.activeElement)&&document.activeElement!==this&&(this.focus(),e.preventDefault());break}}updateCellView(){if(this.disconnectCellView(),this.columnDefinition!==null){switch(this.cellType){case v.columnHeader:this.columnDefinition.headerCellTemplate!==void 0?this.customCellView=this.columnDefinition.headerCellTemplate.render(this,this):this.customCellView=V.render(this,this);break;case v.rowHeader:case v.default:this.columnDefinition.cellTemplate!==void 0?this.customCellView=this.columnDefinition.cellTemplate.render(this,this):this.customCellView=U.render(this,this);break}this.columnDefinition?.sortable?this.columnDefinition.sortDirection?this.sortDirection=this.columnDefinition.sortDirection:this.sortDirection=x.none:this.sortDirection=void 0}}disconnectCellView(){this.customCellView!==null&&(this.customCellView.dispose(),this.customCellView=null)}ariaSelectedChanged(e,t){super.ariaSelectedChanged(e,t),this._selectable=t!==null,this.selected=t==="true"}ariaSortChanged(e,t){if(super.ariaSortChanged(e,t),t===null){this.sortDirection=void 0;return}this.sortDirection=t}#e(){return this.columnDefinition&&this.columnDefinition.columnDataKey?this.columnDefinition.columnDataKey:this.textContent.trim()}_handleInteraction(){const e=this.cellType==="columnheader";return e&&this.sortDirection!==void 0&&this.$emit("sort",{columnDataKey:this.#e(),sortDirection:this.sortDirection}),(e?this.columnDefinition?.headerCellInternalFocusQueue:this.columnDefinition?.cellInternalFocusQueue)||this.$emit("cell-click",{cell:this,row:this.parentElement,isHeaderCell:e,columnDataKey:this.#e()}),!0}}b([n.attr({attribute:"cell-type"})],f.prototype,"cellType");b([n.attr({attribute:"grid-column"})],f.prototype,"gridColumn");b([n.observable],f.prototype,"rowData");b([n.observable],f.prototype,"columnDefinition");b([n.observable],f.prototype,"_selectable");b([n.attr({mode:"boolean"})],f.prototype,"selected");b([n.attr({attribute:"sort-direction"})],f.prototype,"sortDirection");var K=Object.defineProperty,h=(i,e,t,l)=>{for(var o=void 0,a=i.length-1,r;a>=0;a--)(r=i[a])&&(o=r(e,t,o)||o);return o&&K(e,t,o),o};class c extends D.HostSemantics(n.VividElement){constructor(){super(...arguments),this.rowType=p.default,this.rowData=null,this.columnDefinitions=null,this.cellsRepeatBehavior=null,this.cellsPlaceholder=null,this.focusColumnIndex=0,this.updateRowStyle=()=>{this.style.gridTemplateColumns=this.gridTemplateColumns},this.ariaSelected=null,this._selectable=!1,this.selected=!1}gridTemplateColumnsChanged(){this.$fastController.isConnected&&this.updateRowStyle()}rowTypeChanged(){this.$fastController.isConnected&&this.updateItemTemplate()}cellItemTemplateChanged(){this.updateItemTemplate()}headerCellItemTemplateChanged(){this.updateItemTemplate()}connectedCallback(){super.connectedCallback(),this.cellsRepeatBehavior===null&&(this.cellsPlaceholder=document.createComment(""),this.appendChild(this.cellsPlaceholder),this.updateItemTemplate(),this.cellsRepeatBehavior=new H.RepeatDirective(e=>e.columnDefinitions,e=>e.activeCellItemTemplate,{positioning:!0}).createBehavior(this.cellsPlaceholder),this.$fastController.addBehaviors([this.cellsRepeatBehavior])),this.addEventListener("cell-focused",this.handleCellFocus),this.addEventListener(C,this.handleFocusout),this.addEventListener(w,this.handleKeydown),this.updateRowStyle()}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("cell-focused",this.handleCellFocus),this.removeEventListener(C,this.handleFocusout),this.removeEventListener(w,this.handleKeydown)}handleFocusout(e){this.contains(document.activeElement)||(this.focusColumnIndex=0)}handleCellFocus(e){this.focusColumnIndex=this.cellElements.indexOf(e.target),this.$emit("row-focused",this)}handleKeydown(e){if(e.defaultPrevented)return;let t=0;switch(e.key){case u.keyArrowLeft:t=Math.max(0,this.focusColumnIndex-1),this.cellElements[t].focus(),e.preventDefault();break;case u.keyArrowRight:t=Math.min(this.cellElements.length-1,this.focusColumnIndex+1),this.cellElements[t].focus(),e.preventDefault();break;case u.keyHome:e.ctrlKey||(this.cellElements[0].focus(),e.preventDefault());break;case u.keyEnd:e.ctrlKey||(this.cellElements[this.cellElements.length-1].focus(),e.preventDefault());break}}updateItemTemplate(){this.activeCellItemTemplate=this.rowType===p.default&&this.cellItemTemplate!==void 0?this.cellItemTemplate:this.rowType===p.default&&this.cellItemTemplate===void 0?this.defaultCellItemTemplate:this.headerCellItemTemplate!==void 0?this.headerCellItemTemplate:this.defaultHeaderCellItemTemplate}ariaSelectedChanged(e,t){super.ariaSelectedChanged(e,t),this._selectable=t!==null,this.selected=t==="true"}}h([n.attr({attribute:"grid-template-columns"})],c.prototype,"gridTemplateColumns");h([n.attr({attribute:"row-type"})],c.prototype,"rowType");h([n.observable],c.prototype,"rowData");h([n.observable],c.prototype,"columnDefinitions");h([n.observable],c.prototype,"cellItemTemplate");h([n.observable],c.prototype,"headerCellItemTemplate");h([n.observable],c.prototype,"rowIndex");h([n.observable],c.prototype,"activeCellItemTemplate");h([n.observable],c.prototype,"defaultCellItemTemplate");h([n.observable],c.prototype,"defaultHeaderCellItemTemplate");h([n.observable],c.prototype,"cellElements");h([n.observable],c.prototype,"_selectable");h([n.attr({mode:"boolean"})],c.prototype,"selected");var B=Object.defineProperty,d=(i,e,t,l)=>{for(var o=void 0,a=i.length-1,r;a>=0;a--)(r=i[a])&&(o=r(e,t,o)||o);return o&&B(e,t,o),o};const m={none:"none",singleRow:"single-row",multiRow:"multi-row",singleCell:"single-cell",multiCell:"multi-cell"},s=class T extends n.VividElement{constructor(){super(),this.noTabbing=!1,this.generateHeader=g.default,this.rowsData=[],this.columnDefinitions=null,this.focusRowIndex=0,this.focusColumnIndex=0,this.fixedColumnsPositions=[],this.rowsRepeatBehavior=null,this.rowsPlaceholder=null,this.generatedHeader=null,this.isUpdatingFocus=!1,this.pendingFocusUpdate=!1,this.rowindexUpdateQueued=!1,this.columnDefinitionsStale=!0,this.generatedGridTemplateColumns="",this.focusOnCell=(e,t,l)=>{if(this.rowElements.length===0){this.focusRowIndex=0,this.focusColumnIndex=0;return}const o=Math.max(0,Math.min(this.rowElements.length-1,e)),r=this.rowElements[o].querySelectorAll('[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [data-vvd-component="data-grid-cell"]'),y=Math.max(0,Math.min(r.length-1,t)),I=r[y];l&&this.scrollHeight!==this.clientHeight&&(o<this.focusRowIndex&&this.scrollTop>0||o>this.focusRowIndex&&this.scrollTop<this.scrollHeight-this.clientHeight)&&I.scrollIntoView({block:"center",inline:"center"}),I.focus()},this.onChildListChange=(e,t)=>{e&&e.length&&(e.forEach(l=>{l.addedNodes.forEach(o=>{o.nodeType===1&&(o.getAttribute("role")==="row"||o.getAttribute("row-type")==="default")&&(o.columnDefinitions=this.columnDefinitions)})}),this.queueRowIndexUpdate())},this.queueRowIndexUpdate=()=>{this.rowindexUpdateQueued||(this.rowindexUpdateQueued=!0,n.DOM.queueUpdate(this.updateRowIndexes))},this.updateRowIndexes=()=>{let e=this.gridTemplateColumns;if(e===void 0){if(this.generatedGridTemplateColumns===""&&this.rowElements.length>0){const t=this.rowElements[0];this.generatedGridTemplateColumns=new Array(t.cellElements.length).fill("1fr").join(" ")}e=this.generatedGridTemplateColumns}this.rowElements.forEach((t,l)=>{const o=t;o.rowIndex=l,o.gridTemplateColumns=e,this.columnDefinitionsStale&&(o.columnDefinitions=this.columnDefinitions)}),this.rowindexUpdateQueued=!1,this.columnDefinitionsStale=!1},this.#l=e=>{(e.key==="Enter"||e.key===" ")&&this.#t(e)},this.#t=({target:e,ctrlKey:t,shiftKey:l,metaKey:o})=>{if(!(e.getAttribute("role")!=="gridcell"||e.getAttribute("cell-type")!=="default")){if(this.selectionMode===m.singleCell||this.selectionMode===m.multiCell){this.#i({target:e,ctrlKey:t,shiftKey:l,metaKey:o});return}(this.selectionMode===m.singleRow||this.selectionMode===m.multiRow)&&this.#n({target:e,ctrlKey:t,shiftKey:l,metaKey:o})}},this.#i=({target:e,ctrlKey:t,shiftKey:l,metaKey:o})=>{const a=e;if(this.selectionMode===m.multiCell&&(t||l||o))a.selected=!this.#r.includes(a);else{const r=a.selected;this._resetSelection(!0),a.selected=!r}},this.#n=({target:e,ctrlKey:t,shiftKey:l,metaKey:o})=>{const a=e.parentNode;if(this.selectionMode===m.multiRow&&(t||l||o))a.selected=!this.#a.includes(a);else{const r=a.selected;this._resetSelection(!0),a.selected=!r}},this.#o={handleChange(e,t){t==="columnDefinitions"&&e.$fastController.isConnected&&e.toggleGeneratedHeader()}},this._resetSelection=(e=!1)=>{const t=Array.from(this.querySelectorAll('[role="gridcell"], [cell-type="default"]')),l=Array.from(this.querySelectorAll('[role="row"], [row-type="default"]'));if(this.selectionMode===m.singleCell||this.selectionMode===m.multiCell){for(const o of t)o._selectable=!0,o.selected=e?!1:o.selected||!1;for(const o of l)o._selectable=!1,o.selected=!1}if(this.selectionMode===m.none)for(const o of[...t,...l])o._selectable=!1,o.selected=!1;if(this.selectionMode===m.singleRow||this.selectionMode===m.multiRow){for(const o of t)o._selectable=!1,o.selected=!1;for(const o of l)o._selectable=!0,o.selected=e?!1:o.selected||!1}},this.addEventListener("click",this.#t),this.addEventListener("keydown",this.#l)}static generateTemplateColumns(e){let t="";return e.forEach(l=>{t=`${t}${t===""?"":" "}1fr`}),t}noTabbingChanged(){this.$fastController.isConnected&&this.#e()}#e(){this.setAttribute("tabIndex",this.noTabbing||this.contains(document.activeElement)?"-1":"0")}generateHeaderChanged(){this.$fastController.isConnected&&this.toggleGeneratedHeader()}gridTemplateColumnsChanged(){this.$fastController.isConnected&&(this.updateRowIndexes(),this.fixedColumns&&this.fixedColumns>0&&this.applyFixedColumns())}rowsDataChanged(){this.columnDefinitions===null&&this.rowsData.length>0&&(this.columnDefinitions=T.generateColumns(this.rowsData[0])),this.$fastController.isConnected&&this.toggleGeneratedHeader()}columnDefinitionsChanged(){if(this.columnDefinitions===null){this.generatedGridTemplateColumns="";return}this.generatedGridTemplateColumns=T.generateTemplateColumns(this.columnDefinitions),this.$fastController.isConnected&&(this.columnDefinitionsStale=!0,this.queueRowIndexUpdate())}headerCellItemTemplateChanged(){this.$fastController.isConnected&&this.generatedHeader!==null&&(this.generatedHeader.headerCellItemTemplate=this.headerCellItemTemplate)}focusRowIndexChanged(){this.$fastController.isConnected&&this.queueFocusUpdate()}focusColumnIndexChanged(){this.$fastController.isConnected&&this.queueFocusUpdate()}fixedColumnsChanged(){this.$fastController.isConnected&&(this.applyFixedColumns(),this.setupResizeObserver())}setupResizeObserver(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=void 0),typeof ResizeObserver<"u"&&this.fixedColumns&&this.fixedColumns>0&&(this.resizeObserver=new ResizeObserver(()=>{this.applyFixedColumns()}),this.resizeObserver.observe(this))}connectedCallback(){super.connectedCallback(),this.rowItemTemplate===void 0&&(this.rowItemTemplate=this.defaultRowItemTemplate),this.rowsPlaceholder=document.createComment(""),this.appendChild(this.rowsPlaceholder),this.toggleGeneratedHeader(),this.rowsRepeatBehavior=new H.RepeatDirective(e=>e.rowsData,e=>e.rowItemTemplate,{positioning:!0}).createBehavior(this.rowsPlaceholder),this.$fastController.addBehaviors([this.rowsRepeatBehavior]),this.addEventListener("row-focused",this.handleRowFocus),this.addEventListener(E,this.handleFocus),this.addEventListener(w,this.handleKeydown),this.addEventListener(C,this.handleFocusOut),this.observer=new MutationObserver(this.onChildListChange),this.observer.observe(this,{childList:!0}),this.setupResizeObserver(),n.DOM.queueUpdate(this.queueRowIndexUpdate),this.#e(),n.Observable.getNotifier(this).subscribe(this.#o,"columnDefinitions")}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("row-focused",this.handleRowFocus),this.removeEventListener(E,this.handleFocus),this.removeEventListener(w,this.handleKeydown),this.removeEventListener(C,this.handleFocusOut),this.observer.disconnect(),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=void 0),this.rowsPlaceholder=null,this.generatedHeader=null,n.Observable.getNotifier(this).unsubscribe(this.#o,"columnDefinitions")}handleRowFocus(e){this.isUpdatingFocus=!0;const t=e.target;this.focusRowIndex=this.rowElements.indexOf(t),this.focusColumnIndex=t.focusColumnIndex,this.setAttribute("tabIndex","-1"),this.isUpdatingFocus=!1}handleFocus(e){this.focusOnCell(this.focusRowIndex,this.focusColumnIndex,!0)}handleFocusOut(e){(e.relatedTarget===null||!this.contains(e.relatedTarget))&&this.setAttribute("tabIndex",this.noTabbing?"-1":"0")}handleKeydown(e){if(e.defaultPrevented)return;let t;const l=this.rowElements.length-1,o=this.offsetHeight+this.scrollTop,a=this.rowElements[l];switch(e.key){case u.keyArrowUp:e.preventDefault(),this.focusOnCell(this.focusRowIndex-1,this.focusColumnIndex,!0);break;case u.keyArrowDown:e.preventDefault(),this.focusOnCell(this.focusRowIndex+1,this.focusColumnIndex,!0);break;case u.keyPageUp:if(e.preventDefault(),this.rowElements.length===0){this.focusOnCell(0,0,!1);break}if(this.focusRowIndex===0){this.focusOnCell(0,this.focusColumnIndex,!1);return}for(t=this.focusRowIndex-1,t;t>=0;t--){const r=this.rowElements[t];if(r.offsetTop<this.scrollTop){this.scrollTop=r.offsetTop+r.clientHeight-this.clientHeight;break}}this.focusOnCell(t,this.focusColumnIndex,!1);break;case u.keyPageDown:if(e.preventDefault(),this.rowElements.length===0){this.focusOnCell(0,0,!1);break}if(this.focusRowIndex>=l||a.offsetTop+a.offsetHeight<=o){this.focusOnCell(l,this.focusColumnIndex,!1);return}for(t=this.focusRowIndex+1,t;t<=l;t++){const r=this.rowElements[t];if(r.offsetTop+r.offsetHeight>o){let y=0;this.generateHeader===g.sticky&&this.generatedHeader!==null&&(y=this.generatedHeader.clientHeight),this.scrollTop=r.offsetTop-y;break}}this.focusOnCell(t,this.focusColumnIndex,!1);break;case u.keyHome:e.ctrlKey&&(e.preventDefault(),this.focusOnCell(0,0,!0));break;case u.keyEnd:e.ctrlKey&&this.columnDefinitions!==null&&(e.preventDefault(),this.focusOnCell(this.rowElements.length-1,this.columnDefinitions.length-1,!0));break}}queueFocusUpdate(){this.isUpdatingFocus&&this.contains(document.activeElement)||this.pendingFocusUpdate===!1&&(this.pendingFocusUpdate=!0,n.DOM.queueUpdate(()=>this.updateFocus()))}updateFocus(){this.pendingFocusUpdate=!1,this.focusOnCell(this.focusRowIndex,this.focusColumnIndex,!0)}toggleGeneratedHeader(){if(this.generatedHeader!==null&&(this.removeChild(this.generatedHeader),this.generatedHeader=null),this.generateHeader!==g.none&&this.columnDefinitions!==null){const e=document.createElement(this.rowElementTag);this.generatedHeader=e,this.generatedHeader.columnDefinitions=this.columnDefinitions,this.generatedHeader.gridTemplateColumns=this.gridTemplateColumns,this.generatedHeader.rowType=this.generateHeader===g.sticky?p.stickyHeader:p.header,this.firstChild!==null&&this.insertBefore(e,this.firstChild);return}}slottedRowElementsChanged(e,t){this._resetSelection()}get#a(){return this.rowElements.filter(e=>e.selected)}get#r(){return this.rowElements.reduce((e,t)=>{const o=Array.from(t.children).filter(a=>a.selected);return e.concat(o)},[])}selectionModeChanged(e){if(e===void 0){n.DOM.queueUpdate(this._resetSelection);return}this._resetSelection(!0)}#l;#t;#i;#n;#o;static generateColumns(e){return Object.keys(e).map((t,l)=>({columnDataKey:t,gridColumn:`${l}`}))}applyFixedColumns(){if(!this.fixedColumns||this.fixedColumns<=0){this.clearFixedColumns();return}this.calculateFixedColumnPositions(),this.applyFixedColumnStyling()}applyFixedColumnStyling(){this.rowElements.forEach(e=>{const t=e.querySelectorAll('[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]');this.fixedColumnsPositions.forEach((l,o)=>{if(o<t.length){const a=t[o];typeof a.setFixedPosition=="function"&&a.setFixedPosition(`${l}px`)}})})}calculateFixedColumnPositions(){if(this.fixedColumnsPositions=[],this.rowElements.length===0)return;const e=this.rowElements[0].querySelectorAll('[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]');let t=0;for(let l=0;l<Math.min(this.fixedColumns,e.length);l++)this.fixedColumnsPositions.push(t),t+=e[l].offsetWidth}clearFixedColumns(){if(this.rowElements.length===0){this.fixedColumnsPositions=[];return}this.rowElements.forEach(e=>{const t=e.querySelectorAll('[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]');this.fixedColumnsPositions.forEach((l,o)=>{if(o<t.length){const a=t[o];typeof a.setFixedPosition=="function"&&a.setFixedPosition(void 0)}})}),this.fixedColumnsPositions=[]}};d([n.attr({attribute:"no-tabbing",mode:"boolean"})],s.prototype,"noTabbing");d([n.attr({attribute:"generate-header"})],s.prototype,"generateHeader");d([n.attr({attribute:"grid-template-columns"})],s.prototype,"gridTemplateColumns");d([n.observable],s.prototype,"rowsData");d([n.observable],s.prototype,"columnDefinitions");d([n.observable],s.prototype,"rowItemTemplate");d([n.observable],s.prototype,"cellItemTemplate");d([n.observable],s.prototype,"headerCellItemTemplate");d([n.observable],s.prototype,"focusRowIndex");d([n.observable],s.prototype,"focusColumnIndex");d([n.attr({attribute:"fixed-columns",converter:n.nullableNumberConverter})],s.prototype,"fixedColumns");d([n.observable],s.prototype,"defaultRowItemTemplate");d([n.observable],s.prototype,"rowElementTag");d([n.observable],s.prototype,"rowElements");d([n.observable],s.prototype,"slottedRowElements");d([n.attr({attribute:"selection-mode"})],s.prototype,"selectionMode");let Q=s;function N(i){const e=i.tagFor(c);return n.html`
|
|
9
|
+
`;class f extends q.Localized(T.HostSemantics(n.VividElement)){constructor(){super(...arguments),this.cellType=v.default,this.rowData=null,this.columnDefinition=null,this.isActiveCell=!1,this.customCellView=null,this.updateCellStyle=()=>{this.gridColumn&&!this.gridColumn.includes("undefined")?this.style.gridColumn=this.gridColumn:this.style.removeProperty("grid-column")},this._selectable=!1,this.selected=!1,this.ariaSelected=null,this.ariaSort=null}cellTypeChanged(){this.$fastController.isConnected&&this.updateCellView()}gridColumnChanged(){this.$fastController.isConnected&&this.updateCellStyle()}columnDefinitionChanged(e,t){this.$fastController.isConnected&&this.updateCellView()}updateFixedStyle(){this.fixedPosition!==void 0?(this.setAttribute("data-fixed",""),this.style.left=this.fixedPosition):(this.removeAttribute("data-fixed"),this.style.removeProperty("left"))}setFixedPosition(e){this.fixedPosition=e,this.updateFixedStyle()}connectedCallback(){super.connectedCallback(),this.addEventListener(F,this.handleFocusin),this.addEventListener(C,this.handleFocusout),this.addEventListener(w,this.handleKeydown),this.style.gridColumn=`${this.columnDefinition?.gridColumn===void 0?0:this.columnDefinition.gridColumn}`,this.updateCellView(),this.updateCellStyle(),this.updateFixedStyle()}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(F,this.handleFocusin),this.removeEventListener(C,this.handleFocusout),this.removeEventListener(w,this.handleKeydown),this.disconnectCellView()}handleFocusin(e){if(this.shadowRoot.querySelector(".base").classList.add("active"),!this.isActiveCell){switch(this.isActiveCell=!0,this.cellType){case v.columnHeader:if(this.columnDefinition!==null&&this.columnDefinition.headerCellInternalFocusQueue!==!0&&typeof this.columnDefinition.headerCellFocusTargetCallback=="function"){const t=this.columnDefinition.headerCellFocusTargetCallback(this);t!==null&&t.focus()}break;default:if(this.columnDefinition!==null&&this.columnDefinition.cellInternalFocusQueue!==!0&&typeof this.columnDefinition.cellFocusTargetCallback=="function"){const t=this.columnDefinition.cellFocusTargetCallback(this);t!==null&&t.focus()}break}this.$emit("cell-focused",this)}}handleFocusout(e){this.shadowRoot.querySelector(".base").classList.remove("active"),this!==document.activeElement&&!this.contains(document.activeElement)&&(this.isActiveCell=!1)}handleKeydown(e){if(!(e.defaultPrevented||this.columnDefinition===null||this.cellType===v.default&&this.columnDefinition.cellInternalFocusQueue!==!0||this.cellType===v.columnHeader&&this.columnDefinition.headerCellInternalFocusQueue!==!0))switch(e.key){case u.keyEnter:case u.keyFunction2:if(this.contains(document.activeElement)&&document.activeElement!==this)return;switch(this.cellType){case v.columnHeader:if(this.columnDefinition.headerCellFocusTargetCallback!==void 0){const t=this.columnDefinition.headerCellFocusTargetCallback(this);t!==null&&t.focus(),e.preventDefault()}break;default:if(this.columnDefinition.cellFocusTargetCallback!==void 0){const t=this.columnDefinition.cellFocusTargetCallback(this);t!==null&&t.focus(),e.preventDefault()}break}break;case u.keyEscape:this.contains(document.activeElement)&&document.activeElement!==this&&(this.focus(),e.preventDefault());break}}updateCellView(){if(this.disconnectCellView(),this.columnDefinition!==null){switch(this.cellType){case v.columnHeader:this.columnDefinition.headerCellTemplate!==void 0?this.customCellView=this.columnDefinition.headerCellTemplate.render(this,this):this.customCellView=K.render(this,this);break;case v.rowHeader:case v.default:this.columnDefinition.cellTemplate!==void 0?this.customCellView=this.columnDefinition.cellTemplate.render(this,this):this.customCellView=V.render(this,this);break}this.columnDefinition?.sortable?this.columnDefinition.sortDirection?this.sortDirection=this.columnDefinition.sortDirection:this.sortDirection=D.none:this.sortDirection=void 0}}disconnectCellView(){this.customCellView!==null&&(this.customCellView.dispose(),this.customCellView=null)}ariaSelectedChanged(e,t){super.ariaSelectedChanged(e,t),this._selectable=t!==null,this.selected=t==="true"}ariaSortChanged(e,t){if(super.ariaSortChanged(e,t),t===null){this.sortDirection=void 0;return}this.sortDirection=t}#e(){return this.columnDefinition&&this.columnDefinition.columnDataKey?this.columnDefinition.columnDataKey:this.textContent.trim()}_handleInteraction(){const e=this.cellType==="columnheader";return e&&this.sortDirection!==void 0&&this.$emit("sort",{columnDataKey:this.#e(),sortDirection:this.sortDirection}),(e?this.columnDefinition?.headerCellInternalFocusQueue:this.columnDefinition?.cellInternalFocusQueue)||this.$emit("cell-click",{cell:this,row:this.parentElement,isHeaderCell:e,columnDataKey:this.#e()}),!0}}b([n.attr({attribute:"cell-type"})],f.prototype,"cellType");b([n.attr({attribute:"grid-column"})],f.prototype,"gridColumn");b([n.observable],f.prototype,"rowData");b([n.observable],f.prototype,"columnDefinition");b([n.observable],f.prototype,"_selectable");b([n.attr({mode:"boolean"})],f.prototype,"selected");b([n.attr({attribute:"sort-direction"})],f.prototype,"sortDirection");var B=Object.defineProperty,h=(i,e,t,l)=>{for(var o=void 0,r=i.length-1,a;r>=0;r--)(a=i[r])&&(o=a(e,t,o)||o);return o&&B(e,t,o),o};class c extends T.HostSemantics(n.VividElement){constructor(){super(...arguments),this.rowType=p.default,this.rowData=null,this.columnDefinitions=null,this.behaviorOrchestrator=null,this.focusColumnIndex=0,this.updateRowStyle=()=>{this.style.gridTemplateColumns=this.gridTemplateColumns},this.ariaSelected=null,this._selectable=!1,this.selected=!1}gridTemplateColumnsChanged(){this.$fastController.isConnected&&this.updateRowStyle()}rowTypeChanged(){this.$fastController.isConnected&&this.updateItemTemplate()}cellItemTemplateChanged(){this.updateItemTemplate()}headerCellItemTemplateChanged(){this.updateItemTemplate()}connectedCallback(){super.connectedCallback(),this.behaviorOrchestrator===null&&(this.updateItemTemplate(),this.behaviorOrchestrator=n.ViewBehaviorOrchestrator.create(this),this.$fastController.addBehavior(this.behaviorOrchestrator),this.behaviorOrchestrator.addBehaviorFactory(new O.RepeatDirective(_.normalizeBinding(e=>e.columnDefinitions),_.normalizeBinding(e=>e.activeCellItemTemplate),{positioning:!0}),this.appendChild(document.createComment("")))),this.addEventListener("cell-focused",this.handleCellFocus),this.addEventListener(C,this.handleFocusout),this.addEventListener(w,this.handleKeydown),this.updateRowStyle()}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("cell-focused",this.handleCellFocus),this.removeEventListener(C,this.handleFocusout),this.removeEventListener(w,this.handleKeydown)}handleFocusout(e){this.contains(document.activeElement)||(this.focusColumnIndex=0)}handleCellFocus(e){this.focusColumnIndex=this.cellElements.indexOf(e.target),this.$emit("row-focused",this)}handleKeydown(e){if(e.defaultPrevented)return;let t=0;switch(e.key){case u.keyArrowLeft:t=Math.max(0,this.focusColumnIndex-1),this.cellElements[t].focus(),e.preventDefault();break;case u.keyArrowRight:t=Math.min(this.cellElements.length-1,this.focusColumnIndex+1),this.cellElements[t].focus(),e.preventDefault();break;case u.keyHome:e.ctrlKey||(this.cellElements[0].focus(),e.preventDefault());break;case u.keyEnd:e.ctrlKey||(this.cellElements[this.cellElements.length-1].focus(),e.preventDefault());break}}updateItemTemplate(){this.activeCellItemTemplate=this.rowType===p.default&&this.cellItemTemplate!==void 0?this.cellItemTemplate:this.rowType===p.default&&this.cellItemTemplate===void 0?this.defaultCellItemTemplate:this.headerCellItemTemplate!==void 0?this.headerCellItemTemplate:this.defaultHeaderCellItemTemplate}ariaSelectedChanged(e,t){super.ariaSelectedChanged(e,t),this._selectable=t!==null,this.selected=t==="true"}}h([n.attr({attribute:"grid-template-columns"})],c.prototype,"gridTemplateColumns");h([n.attr({attribute:"row-type"})],c.prototype,"rowType");h([n.observable],c.prototype,"rowData");h([n.observable],c.prototype,"columnDefinitions");h([n.observable],c.prototype,"cellItemTemplate");h([n.observable],c.prototype,"headerCellItemTemplate");h([n.observable],c.prototype,"rowIndex");h([n.observable],c.prototype,"activeCellItemTemplate");h([n.observable],c.prototype,"defaultCellItemTemplate");h([n.observable],c.prototype,"defaultHeaderCellItemTemplate");h([n.observable],c.prototype,"cellElements");h([n.observable],c.prototype,"_selectable");h([n.attr({mode:"boolean"})],c.prototype,"selected");var Q=Object.defineProperty,d=(i,e,t,l)=>{for(var o=void 0,r=i.length-1,a;r>=0;r--)(a=i[r])&&(o=a(e,t,o)||o);return o&&Q(e,t,o),o};const m={none:"none",singleRow:"single-row",multiRow:"multi-row",singleCell:"single-cell",multiCell:"multi-cell"},s=class k extends n.VividElement{constructor(){super(),this.noTabbing=!1,this.generateHeader=g.default,this.rowsData=[],this.columnDefinitions=null,this.focusRowIndex=0,this.focusColumnIndex=0,this.fixedColumnsPositions=[],this.behaviorOrchestrator=null,this.generatedHeader=null,this.isUpdatingFocus=!1,this.pendingFocusUpdate=!1,this.rowindexUpdateQueued=!1,this.columnDefinitionsStale=!0,this.generatedGridTemplateColumns="",this.focusOnCell=(e,t,l)=>{if(this.rowElements.length===0){this.focusRowIndex=0,this.focusColumnIndex=0;return}const o=Math.max(0,Math.min(this.rowElements.length-1,e)),a=this.rowElements[o].querySelectorAll('[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [data-vvd-component="data-grid-cell"]'),y=Math.max(0,Math.min(a.length-1,t)),E=a[y];l&&this.scrollHeight!==this.clientHeight&&(o<this.focusRowIndex&&this.scrollTop>0||o>this.focusRowIndex&&this.scrollTop<this.scrollHeight-this.clientHeight)&&E.scrollIntoView({block:"center",inline:"center"}),E.focus()},this.onChildListChange=(e,t)=>{e&&e.length&&(e.forEach(l=>{l.addedNodes.forEach(o=>{o.nodeType===1&&(o.getAttribute("role")==="row"||o.getAttribute("row-type")==="default")&&(o.columnDefinitions=this.columnDefinitions)})}),this.queueRowIndexUpdate())},this.queueRowIndexUpdate=()=>{this.rowindexUpdateQueued||(this.rowindexUpdateQueued=!0,n.Updates.enqueue(this.updateRowIndexes))},this.updateRowIndexes=()=>{let e=this.gridTemplateColumns;if(e===void 0){if(this.generatedGridTemplateColumns===""&&this.rowElements.length>0){const t=this.rowElements[0];this.generatedGridTemplateColumns=new Array(t.cellElements.length).fill("1fr").join(" ")}e=this.generatedGridTemplateColumns}this.rowElements.forEach((t,l)=>{const o=t;o.rowIndex=l,o.gridTemplateColumns=e,this.columnDefinitionsStale&&(o.columnDefinitions=this.columnDefinitions)}),this.rowindexUpdateQueued=!1,this.columnDefinitionsStale=!1},this.#l=e=>{(e.key==="Enter"||e.key===" ")&&this.#t(e)},this.#t=({target:e,ctrlKey:t,shiftKey:l,metaKey:o})=>{if(!(e.getAttribute("role")!=="gridcell"||e.getAttribute("cell-type")!=="default")){if(this.selectionMode===m.singleCell||this.selectionMode===m.multiCell){this.#i({target:e,ctrlKey:t,shiftKey:l,metaKey:o});return}(this.selectionMode===m.singleRow||this.selectionMode===m.multiRow)&&this.#n({target:e,ctrlKey:t,shiftKey:l,metaKey:o})}},this.#i=({target:e,ctrlKey:t,shiftKey:l,metaKey:o})=>{const r=e;if(this.selectionMode===m.multiCell&&(t||l||o))r.selected=!this.#a.includes(r);else{const a=r.selected;this._resetSelection(!0),r.selected=!a}},this.#n=({target:e,ctrlKey:t,shiftKey:l,metaKey:o})=>{const r=e.parentNode;if(this.selectionMode===m.multiRow&&(t||l||o))r.selected=!this.#r.includes(r);else{const a=r.selected;this._resetSelection(!0),r.selected=!a}},this.#o={handleChange(e,t){t==="columnDefinitions"&&e.$fastController.isConnected&&e.toggleGeneratedHeader()}},this._resetSelection=(e=!1)=>{const t=Array.from(this.querySelectorAll('[role="gridcell"], [cell-type="default"]')),l=Array.from(this.querySelectorAll('[role="row"], [row-type="default"]'));if(this.selectionMode===m.singleCell||this.selectionMode===m.multiCell){for(const o of t)o._selectable=!0,o.selected=e?!1:o.selected||!1;for(const o of l)o._selectable=!1,o.selected=!1}if(this.selectionMode===m.none)for(const o of[...t,...l])o._selectable=!1,o.selected=!1;if(this.selectionMode===m.singleRow||this.selectionMode===m.multiRow){for(const o of t)o._selectable=!1,o.selected=!1;for(const o of l)o._selectable=!0,o.selected=e?!1:o.selected||!1}},this.addEventListener("click",this.#t),this.addEventListener("keydown",this.#l)}static generateTemplateColumns(e){let t="";return e.forEach(l=>{t=`${t}${t===""?"":" "}1fr`}),t}noTabbingChanged(){this.$fastController.isConnected&&this.#e()}#e(){this.setAttribute("tabIndex",this.noTabbing||this.contains(document.activeElement)?"-1":"0")}generateHeaderChanged(){this.$fastController.isConnected&&this.toggleGeneratedHeader()}gridTemplateColumnsChanged(){this.$fastController.isConnected&&(this.updateRowIndexes(),this.fixedColumns&&this.fixedColumns>0&&this.applyFixedColumns())}rowsDataChanged(){this.columnDefinitions===null&&this.rowsData.length>0&&(this.columnDefinitions=k.generateColumns(this.rowsData[0])),this.$fastController.isConnected&&this.toggleGeneratedHeader()}columnDefinitionsChanged(){if(this.columnDefinitions===null){this.generatedGridTemplateColumns="";return}this.generatedGridTemplateColumns=k.generateTemplateColumns(this.columnDefinitions),this.$fastController.isConnected&&(this.columnDefinitionsStale=!0,this.queueRowIndexUpdate())}headerCellItemTemplateChanged(){this.$fastController.isConnected&&this.generatedHeader!==null&&(this.generatedHeader.headerCellItemTemplate=this.headerCellItemTemplate)}focusRowIndexChanged(){this.$fastController.isConnected&&this.queueFocusUpdate()}focusColumnIndexChanged(){this.$fastController.isConnected&&this.queueFocusUpdate()}fixedColumnsChanged(){this.$fastController.isConnected&&(this.applyFixedColumns(),this.setupResizeObserver())}setupResizeObserver(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=void 0),typeof ResizeObserver<"u"&&this.fixedColumns&&this.fixedColumns>0&&(this.resizeObserver=new ResizeObserver(()=>{this.applyFixedColumns()}),this.resizeObserver.observe(this))}connectedCallback(){super.connectedCallback(),this.rowItemTemplate===void 0&&(this.rowItemTemplate=this.defaultRowItemTemplate),this.behaviorOrchestrator===null&&(this.behaviorOrchestrator=n.ViewBehaviorOrchestrator.create(this),this.$fastController.addBehavior(this.behaviorOrchestrator),this.behaviorOrchestrator.addBehaviorFactory(new O.RepeatDirective(_.normalizeBinding(e=>e.rowsData),_.normalizeBinding(e=>e.rowItemTemplate),{positioning:!0}),this.appendChild(document.createComment("")))),this.toggleGeneratedHeader(),this.addEventListener("row-focused",this.handleRowFocus),this.addEventListener($,this.handleFocus),this.addEventListener(w,this.handleKeydown),this.addEventListener(C,this.handleFocusOut),this.observer=new MutationObserver(this.onChildListChange),this.observer.observe(this,{childList:!0}),this.setupResizeObserver(),n.Updates.enqueue(this.queueRowIndexUpdate),this.#e(),n.Observable.getNotifier(this).subscribe(this.#o,"columnDefinitions")}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("row-focused",this.handleRowFocus),this.removeEventListener($,this.handleFocus),this.removeEventListener(w,this.handleKeydown),this.removeEventListener(C,this.handleFocusOut),this.observer.disconnect(),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=void 0),this.generatedHeader=null,n.Observable.getNotifier(this).unsubscribe(this.#o,"columnDefinitions")}handleRowFocus(e){this.isUpdatingFocus=!0;const t=e.target;this.focusRowIndex=this.rowElements.indexOf(t),this.focusColumnIndex=t.focusColumnIndex,this.setAttribute("tabIndex","-1"),this.isUpdatingFocus=!1}handleFocus(e){this.focusOnCell(this.focusRowIndex,this.focusColumnIndex,!0)}handleFocusOut(e){(e.relatedTarget===null||!this.contains(e.relatedTarget))&&this.setAttribute("tabIndex",this.noTabbing?"-1":"0")}handleKeydown(e){if(e.defaultPrevented)return;let t;const l=this.rowElements.length-1,o=this.offsetHeight+this.scrollTop,r=this.rowElements[l];switch(e.key){case u.keyArrowUp:e.preventDefault(),this.focusOnCell(this.focusRowIndex-1,this.focusColumnIndex,!0);break;case u.keyArrowDown:e.preventDefault(),this.focusOnCell(this.focusRowIndex+1,this.focusColumnIndex,!0);break;case u.keyPageUp:if(e.preventDefault(),this.rowElements.length===0){this.focusOnCell(0,0,!1);break}if(this.focusRowIndex===0){this.focusOnCell(0,this.focusColumnIndex,!1);return}for(t=this.focusRowIndex-1,t;t>=0;t--){const a=this.rowElements[t];if(a.offsetTop<this.scrollTop){this.scrollTop=a.offsetTop+a.clientHeight-this.clientHeight;break}}this.focusOnCell(t,this.focusColumnIndex,!1);break;case u.keyPageDown:if(e.preventDefault(),this.rowElements.length===0){this.focusOnCell(0,0,!1);break}if(this.focusRowIndex>=l||r.offsetTop+r.offsetHeight<=o){this.focusOnCell(l,this.focusColumnIndex,!1);return}for(t=this.focusRowIndex+1,t;t<=l;t++){const a=this.rowElements[t];if(a.offsetTop+a.offsetHeight>o){let y=0;this.generateHeader===g.sticky&&this.generatedHeader!==null&&(y=this.generatedHeader.clientHeight),this.scrollTop=a.offsetTop-y;break}}this.focusOnCell(t,this.focusColumnIndex,!1);break;case u.keyHome:e.ctrlKey&&(e.preventDefault(),this.focusOnCell(0,0,!0));break;case u.keyEnd:e.ctrlKey&&this.columnDefinitions!==null&&(e.preventDefault(),this.focusOnCell(this.rowElements.length-1,this.columnDefinitions.length-1,!0));break}}queueFocusUpdate(){this.isUpdatingFocus&&this.contains(document.activeElement)||this.pendingFocusUpdate===!1&&(this.pendingFocusUpdate=!0,n.Updates.enqueue(()=>this.updateFocus()))}updateFocus(){this.pendingFocusUpdate=!1,this.focusOnCell(this.focusRowIndex,this.focusColumnIndex,!0)}toggleGeneratedHeader(){if(this.generatedHeader!==null&&(this.removeChild(this.generatedHeader),this.generatedHeader=null),this.generateHeader!==g.none&&this.columnDefinitions!==null){const e=document.createElement(this.rowElementTag);this.generatedHeader=e,this.generatedHeader.columnDefinitions=this.columnDefinitions,this.generatedHeader.gridTemplateColumns=this.gridTemplateColumns,this.generatedHeader.rowType=this.generateHeader===g.sticky?p.stickyHeader:p.header,this.firstChild!==null&&this.insertBefore(e,this.firstChild);return}}slottedRowElementsChanged(e,t){this._resetSelection()}get#r(){return this.rowElements.filter(e=>e.selected)}get#a(){return this.rowElements.reduce((e,t)=>{const o=Array.from(t.children).filter(r=>r.selected);return e.concat(o)},[])}selectionModeChanged(e){if(e===void 0){n.Updates.enqueue(this._resetSelection);return}this._resetSelection(!0)}#l;#t;#i;#n;#o;static generateColumns(e){return Object.keys(e).map((t,l)=>({columnDataKey:t,gridColumn:`${l}`}))}applyFixedColumns(){if(!this.fixedColumns||this.fixedColumns<=0){this.clearFixedColumns();return}this.calculateFixedColumnPositions(),this.applyFixedColumnStyling()}applyFixedColumnStyling(){this.rowElements.forEach(e=>{const t=e.querySelectorAll('[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]');this.fixedColumnsPositions.forEach((l,o)=>{if(o<t.length){const r=t[o];typeof r.setFixedPosition=="function"&&r.setFixedPosition(`${l}px`)}})})}calculateFixedColumnPositions(){if(this.fixedColumnsPositions=[],this.rowElements.length===0)return;const e=this.rowElements[0].querySelectorAll('[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]');let t=0;for(let l=0;l<Math.min(this.fixedColumns,e.length);l++)this.fixedColumnsPositions.push(t),t+=e[l].offsetWidth}clearFixedColumns(){if(this.rowElements.length===0){this.fixedColumnsPositions=[];return}this.rowElements.forEach(e=>{const t=e.querySelectorAll('[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]');this.fixedColumnsPositions.forEach((l,o)=>{if(o<t.length){const r=t[o];typeof r.setFixedPosition=="function"&&r.setFixedPosition(void 0)}})}),this.fixedColumnsPositions=[]}};d([n.attr({attribute:"no-tabbing",mode:"boolean"})],s.prototype,"noTabbing");d([n.attr({attribute:"generate-header"})],s.prototype,"generateHeader");d([n.attr({attribute:"grid-template-columns"})],s.prototype,"gridTemplateColumns");d([n.observable],s.prototype,"rowsData");d([n.observable],s.prototype,"columnDefinitions");d([n.observable],s.prototype,"rowItemTemplate");d([n.observable],s.prototype,"cellItemTemplate");d([n.observable],s.prototype,"headerCellItemTemplate");d([n.observable],s.prototype,"focusRowIndex");d([n.observable],s.prototype,"focusColumnIndex");d([n.attr({attribute:"fixed-columns",converter:n.nullableNumberConverter})],s.prototype,"fixedColumns");d([n.observable],s.prototype,"defaultRowItemTemplate");d([n.observable],s.prototype,"rowElementTag");d([n.observable],s.prototype,"rowElements");d([n.observable],s.prototype,"slottedRowElements");d([n.attr({attribute:"selection-mode"})],s.prototype,"selectionMode");let N=s;function j(i){const e=i.tagFor(c);return n.html`
|
|
10
10
|
<${e}
|
|
11
11
|
:rowData="${t=>t}"
|
|
12
12
|
:cellItemTemplate="${(t,l)=>l.parent.cellItemTemplate}"
|
|
13
13
|
:headerCellItemTemplate="${(t,l)=>l.parent.headerCellItemTemplate}"
|
|
14
14
|
></${e}>
|
|
15
|
-
`}function
|
|
15
|
+
`}function W(i){return i.selectionMode===void 0||i.selectionMode===m.none?null:i.selectionMode.includes("multi")?"true":"false"}function J(i){if(i.columnDefinitions===null){const e=i.querySelector('[cell-type="columnheader"]')?.parentElement;if(i.generateHeader===g.default&&(e?.getAttribute("row-type")===p.header||e?.getAttribute("row-type")===p.stickyHeader))return;if(e){const t=i.generateHeader===g.sticky?p.stickyHeader:p.header;e.setAttribute("row-type",t)}}}function X(i,{event:e}){e.stopPropagation()}const Y=i=>{const e=j(i),t=i.tagFor(c,!0);return n.html`
|
|
16
16
|
<template
|
|
17
|
-
aria-multiselectable="${
|
|
17
|
+
aria-multiselectable="${W}"
|
|
18
18
|
role="grid"
|
|
19
19
|
tabindex="0"
|
|
20
|
-
@sort="${
|
|
20
|
+
@sort="${X}"
|
|
21
21
|
:rowElementTag="${()=>t}"
|
|
22
22
|
:defaultRowItemTemplate="${e}"
|
|
23
|
-
${
|
|
23
|
+
${z.children({property:"rowElements",filter:x.elements("[role=row],[data-vvd-component=data-grid-row]")})}
|
|
24
24
|
>
|
|
25
25
|
<div class="base">
|
|
26
|
-
${
|
|
27
|
-
<slot ${
|
|
26
|
+
${J}
|
|
27
|
+
<slot ${x.slotted("slottedRowElements")}></slot>
|
|
28
28
|
</div>
|
|
29
29
|
</template>
|
|
30
|
-
`};function
|
|
30
|
+
`};function Z(i){return i._selectable&&i.selected?"true":i._selectable&&!i.selected?"false":null}function ee(i){const e=i.tagFor(f);return n.html`
|
|
31
31
|
<${e}
|
|
32
32
|
cell-type="${t=>t.isRowHeader?"rowheader":void 0}"
|
|
33
33
|
grid-column="${(t,l)=>l.index+1}"
|
|
@@ -35,47 +35,47 @@
|
|
|
35
35
|
:columnDefinition="${t=>t}"
|
|
36
36
|
selected="${(t,l)=>l.parent.ariaSelected==="true"?!0:null}"
|
|
37
37
|
></${e}>
|
|
38
|
-
`}function
|
|
38
|
+
`}function te(i){const e=i.tagFor(f);return n.html`
|
|
39
39
|
<${e}
|
|
40
40
|
cell-type="columnheader"
|
|
41
41
|
grid-column="${(t,l)=>l.index+1}"
|
|
42
42
|
:columnDefinition="${t=>t}"
|
|
43
43
|
></${e}>
|
|
44
|
-
`}const
|
|
44
|
+
`}const oe=i=>{const e=ee(i),t=te(i),l=o=>G.classNames("base",["selected",!!o.selected]);return n.html`
|
|
45
45
|
<template
|
|
46
|
-
${
|
|
46
|
+
${T.applyHostSemantics({role:"row",ariaSelected:Z})}
|
|
47
47
|
class="${o=>o.rowType!=="default"?o.rowType:""}"
|
|
48
48
|
:defaultCellItemTemplate="${e}"
|
|
49
49
|
:defaultHeaderCellItemTemplate="${t}"
|
|
50
|
-
${
|
|
50
|
+
${z.children({property:"cellElements",filter:x.elements('[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],[data-vvd-component="data-grid-cell"]')})}
|
|
51
51
|
>
|
|
52
52
|
<div
|
|
53
53
|
class="${l}"
|
|
54
54
|
style="grid-template-columns: ${o=>o.gridTemplateColumns};"
|
|
55
55
|
>
|
|
56
|
-
<slot ${
|
|
56
|
+
<slot ${x.slotted("slottedCellElements")}></slot>
|
|
57
57
|
</div>
|
|
58
58
|
</template>
|
|
59
|
-
`};function
|
|
60
|
-
${
|
|
61
|
-
<${e} class="header-icon" name="${
|
|
59
|
+
`};function I(i){return i.cellType==="columnheader"&&i.sortDirection!==void 0&&i.sortDirection!==D.other}function le(i){return i.sortDirection===D.ascending?"sort-asc-solid":i.sortDirection===D.descending?"sort-desc-solid":"sort-solid"}function ie(i){return i._selectable&&i.selected?"true":i._selectable&&!i.selected?"false":null}function ne(i){const e=i.tagFor(S.Icon);return n.html`
|
|
60
|
+
${A.when(I,n.html`
|
|
61
|
+
<${e} class="header-icon" name="${le}"></${e}>
|
|
62
62
|
`)}
|
|
63
|
-
`}function
|
|
63
|
+
`}function re(i,e){return(e.key===u.keyEnter||e.key===u.keySpace)&&i._handleInteraction(),!0}const ae=i=>{const e=i.tagFor(H.VisuallyHidden),t=l=>G.classNames("base",["selected",!!l.selected]);return n.html`
|
|
64
64
|
<template
|
|
65
65
|
tabindex="-1"
|
|
66
|
-
${
|
|
66
|
+
${T.applyHostSemantics({role:l=>R[l.cellType]??R.default,ariaSelected:ie,ariaSort:l=>l.sortDirection??null})}
|
|
67
67
|
@click="${l=>l._handleInteraction()}"
|
|
68
|
-
@keydown="${(l,o)=>
|
|
68
|
+
@keydown="${(l,o)=>re(l,o.event)}"
|
|
69
69
|
>
|
|
70
70
|
<div
|
|
71
71
|
class="${t}"
|
|
72
|
-
role="${l=>
|
|
72
|
+
role="${l=>I(l)?"button":void 0}"
|
|
73
73
|
>
|
|
74
74
|
${l=>l.selected?n.html`<${e}>${o=>o.locale.dataGrid.cell.selected}</${e}>`:null}
|
|
75
75
|
<slot></slot>
|
|
76
|
-
${
|
|
76
|
+
${A.when(I,n.html`<${e}>${l=>l.locale.dataGrid.cell.button}</${e}>
|
|
77
77
|
`)}
|
|
78
|
-
${l=>
|
|
78
|
+
${l=>ne(i)}
|
|
79
79
|
</div>
|
|
80
80
|
</template>
|
|
81
|
-
`},
|
|
81
|
+
`},se=n.defineVividComponent("data-grid-cell",f,ae,[S.iconDefinition,H.visuallyHiddenDefinition],{styles:M}),ce=n.defineVividComponent("data-grid-row",c,oe,[se],{styles:L}),de=n.defineVividComponent("data-grid",N,Y,[ce],{styles:P}),ue=n.createRegisterFunction(de);ue();
|