@vonage/vivid 5.12.0 → 5.14.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/bundled/definition19.cjs +63 -44
- package/bundled/definition19.js +322 -246
- package/bundled/definition2.cjs +1 -1
- package/bundled/definition2.js +1 -1
- package/bundled/localized.cjs +1 -1
- package/bundled/localized.js +16 -13
- package/bundled/slottable-request.cjs +4 -4
- package/bundled/slottable-request.js +70 -70
- package/bundled/vivid-element.cjs +1 -1
- package/bundled/vivid-element.js +1 -1
- package/custom-elements.json +2640 -2580
- package/data-grid/definition.cjs +37 -13
- package/data-grid/definition.js +37 -13
- package/data-grid/index.cjs +38 -32
- package/data-grid/index.js +201 -178
- package/icon/definition.cjs +1 -1
- package/icon/definition.js +1 -1
- package/lib/accordion/accordion.template.d.ts +2 -2
- package/lib/accordion/index.d.ts +1 -0
- package/lib/accordion-item/accordion-item.d.ts +98 -67
- package/lib/accordion-item/accordion-item.template.d.ts +3 -3
- package/lib/accordion-item/index.d.ts +1 -0
- package/lib/action-group/action-group.d.ts +95 -64
- package/lib/action-group/action-group.template.d.ts +2 -2
- package/lib/action-group/index.d.ts +1 -0
- package/lib/alert/alert.d.ts +192 -130
- package/lib/alert/alert.template.d.ts +3 -3
- package/lib/alert/index.d.ts +1 -0
- package/lib/audio-player/audio-player.d.ts +97 -67
- package/lib/audio-player/audio-player.template.d.ts +2 -2
- package/lib/audio-player/index.d.ts +1 -0
- package/lib/avatar/avatar.d.ts +105 -117
- package/lib/avatar/avatar.template.d.ts +1 -1
- package/lib/avatar/index.d.ts +1 -0
- package/lib/badge/badge.d.ts +98 -67
- package/lib/badge/badge.template.d.ts +3 -3
- package/lib/badge/index.d.ts +1 -0
- package/lib/banner/banner.d.ts +286 -193
- package/lib/banner/banner.template.d.ts +3 -3
- package/lib/banner/index.d.ts +1 -0
- package/lib/breadcrumb/breadcrumb.d.ts +93 -62
- package/lib/breadcrumb/breadcrumb.template.d.ts +2 -2
- package/lib/breadcrumb/index.d.ts +1 -0
- package/lib/breadcrumb-item/breadcrumb-item.d.ts +103 -115
- package/lib/breadcrumb-item/breadcrumb-item.template.d.ts +3 -3
- package/lib/breadcrumb-item/index.d.ts +1 -0
- package/lib/button/button.d.ts +297 -247
- package/lib/button/button.template.d.ts +3 -3
- package/lib/button/index.d.ts +1 -0
- package/lib/calendar/calendar.d.ts +2 -2
- package/lib/calendar/calendar.template.d.ts +2 -2
- package/lib/calendar/helpers/calendar.event-context.d.ts +1 -1
- package/lib/calendar/helpers/calendar.keyboard-interactions.d.ts +1 -1
- package/lib/calendar/index.d.ts +1 -0
- package/lib/calendar-event/calendar-event.d.ts +95 -64
- package/lib/calendar-event/calendar-event.template.d.ts +2 -2
- package/lib/calendar-event/index.d.ts +1 -0
- package/lib/card/card.d.ts +105 -117
- package/lib/card/card.template.d.ts +2 -2
- package/lib/card/index.d.ts +1 -0
- package/lib/checkbox/checkbox.d.ts +628 -437
- package/lib/checkbox/checkbox.template.d.ts +3 -3
- package/lib/checkbox/index.d.ts +1 -0
- package/lib/color-picker/color-picker.d.ts +726 -506
- package/lib/color-picker/color-picker.template.d.ts +2 -2
- package/lib/color-picker/definition.d.ts +1 -1
- package/lib/color-picker/index.d.ts +1 -0
- package/lib/combobox/combobox.d.ts +741 -520
- package/lib/combobox/combobox.template.d.ts +3 -3
- package/lib/combobox/index.d.ts +1 -0
- package/lib/contextual-help/contextual-help.d.ts +1 -1
- package/lib/contextual-help/contextual-help.template.d.ts +3 -3
- package/lib/contextual-help/index.d.ts +1 -0
- package/lib/country/country-code-to-flag-icon.d.ts +1 -1
- package/lib/country/country.template.d.ts +3 -3
- package/lib/country/index.d.ts +1 -0
- package/lib/data-grid/data-grid-cell.d.ts +190 -128
- package/lib/data-grid/data-grid-cell.template.d.ts +3 -3
- package/lib/data-grid/data-grid-row.d.ts +95 -64
- package/lib/data-grid/data-grid-row.template.d.ts +3 -3
- package/lib/data-grid/data-grid.d.ts +1 -1
- package/lib/data-grid/data-grid.template.d.ts +3 -3
- package/lib/data-grid/index.d.ts +1 -0
- package/lib/data-grid/locale.d.ts +1 -1
- package/lib/date-picker/date-picker.d.ts +1045 -792
- package/lib/date-picker/date-picker.template.d.ts +2 -2
- package/lib/date-picker/index.d.ts +1 -0
- package/lib/date-range-picker/date-range-picker.d.ts +538 -411
- package/lib/date-range-picker/date-range-picker.template.d.ts +2 -2
- package/lib/date-range-picker/index.d.ts +1 -0
- package/lib/date-time-picker/date-time-picker.d.ts +1026 -772
- package/lib/date-time-picker/date-time-picker.template.d.ts +2 -2
- package/lib/date-time-picker/index.d.ts +1 -0
- package/lib/dial-pad/dial-pad.d.ts +95 -64
- package/lib/dial-pad/dial-pad.template.d.ts +2 -2
- package/lib/dial-pad/index.d.ts +1 -0
- package/lib/dialog/dialog.d.ts +189 -127
- package/lib/dialog/dialog.template.d.ts +3 -3
- package/lib/dialog/index.d.ts +1 -0
- package/lib/divider/divider.d.ts +94 -63
- package/lib/divider/divider.template.d.ts +2 -2
- package/lib/divider/index.d.ts +1 -0
- package/lib/elevation/elevation.template.d.ts +2 -2
- package/lib/elevation/index.d.ts +1 -0
- package/lib/empty-state/empty-state.d.ts +2 -2
- package/lib/empty-state/empty-state.template.d.ts +3 -3
- package/lib/empty-state/index.d.ts +1 -0
- package/lib/fab/fab.d.ts +98 -67
- package/lib/fab/fab.template.d.ts +3 -3
- package/lib/fab/index.d.ts +1 -0
- package/lib/file-picker/__mocks__/data-transfer.d.ts +21 -0
- package/lib/file-picker/file-picker.d.ts +736 -515
- package/lib/file-picker/file-picker.template.d.ts +3 -3
- package/lib/file-picker/index.d.ts +1 -0
- package/lib/header/header.d.ts +93 -62
- package/lib/header/header.template.d.ts +3 -3
- package/lib/header/index.d.ts +1 -0
- package/lib/icon/icon.d.ts +2 -2
- package/lib/icon/icon.template.d.ts +3 -3
- package/lib/icon/index.d.ts +1 -0
- package/lib/layout/index.d.ts +1 -0
- package/lib/layout/layout.d.ts +2 -2
- package/lib/layout/layout.template.d.ts +2 -2
- package/lib/menu/index.d.ts +1 -0
- package/lib/menu/menu.d.ts +195 -133
- package/lib/menu/menu.template.d.ts +3 -3
- package/lib/menu-item/index.d.ts +1 -0
- package/lib/menu-item/menu-item.d.ts +191 -129
- package/lib/menu-item/menu-item.template.d.ts +2 -2
- package/lib/nav/index.d.ts +1 -0
- package/lib/nav/nav.d.ts +93 -62
- package/lib/nav/nav.template.d.ts +2 -2
- package/lib/nav-disclosure/index.d.ts +1 -0
- package/lib/nav-disclosure/nav-disclosure.d.ts +191 -129
- package/lib/nav-disclosure/nav-disclosure.template.d.ts +3 -3
- package/lib/nav-item/index.d.ts +1 -0
- package/lib/nav-item/nav-item.d.ts +200 -181
- package/lib/nav-item/nav-item.template.d.ts +3 -3
- package/lib/note/index.d.ts +1 -0
- package/lib/note/note.d.ts +97 -66
- package/lib/note/note.template.d.ts +3 -3
- package/lib/number-field/index.d.ts +1 -0
- package/lib/number-field/number-field.d.ts +929 -646
- package/lib/number-field/number-field.template.d.ts +3 -3
- package/lib/option/index.d.ts +1 -0
- package/lib/option/option.d.ts +191 -129
- package/lib/option/option.template.d.ts +3 -3
- package/lib/pagination/index.d.ts +1 -0
- package/lib/pagination/pagination.d.ts +98 -67
- package/lib/pagination/pagination.template.d.ts +3 -3
- package/lib/popover/definition.d.ts +1 -1
- package/lib/popover/index.d.ts +1 -0
- package/lib/popover/popover.d.ts +190 -128
- package/lib/popover/popover.template.d.ts +2 -2
- package/lib/popup/index.d.ts +1 -0
- package/lib/popup/popup.d.ts +1 -1
- package/lib/popup/popup.template.d.ts +3 -3
- package/lib/progress/index.d.ts +1 -0
- package/lib/progress/progress.d.ts +94 -63
- package/lib/progress/progress.template.d.ts +2 -2
- package/lib/progress-ring/index.d.ts +1 -0
- package/lib/progress-ring/progress-ring.d.ts +94 -63
- package/lib/progress-ring/progress-ring.template.d.ts +2 -2
- package/lib/radio/index.d.ts +1 -0
- package/lib/radio/radio.d.ts +340 -242
- package/lib/radio/radio.template.d.ts +2 -2
- package/lib/radio-group/index.d.ts +1 -0
- package/lib/radio-group/radio-group.d.ts +99 -68
- package/lib/radio-group/radio-group.template.d.ts +3 -3
- package/lib/range-slider/index.d.ts +1 -0
- package/lib/range-slider/range-slider.d.ts +313 -218
- package/lib/range-slider/range-slider.template.d.ts +3 -3
- package/lib/rich-text-editor/definition.d.ts +1 -1
- package/lib/rich-text-editor/index.d.ts +1 -0
- package/lib/rich-text-editor/popover.d.ts +1 -1
- package/lib/rich-text-editor/rich-text-editor.d.ts +99 -68
- package/lib/rich-text-editor/rich-text-editor.template.d.ts +2 -2
- package/lib/rich-text-editor/rte/__tests__/async-generator.d.ts +5 -0
- package/lib/rich-text-editor/rte/__tests__/doc-factories.d.ts +106 -0
- package/lib/rich-text-editor/rte/__tests__/font-sizes.d.ts +2 -0
- package/lib/rich-text-editor/rte/__tests__/promise.d.ts +5 -0
- package/lib/rich-text-editor/rte/__tests__/test-utils.d.ts +68 -0
- package/lib/rich-text-editor/rte/config.d.ts +4 -4
- package/lib/rich-text-editor/rte/feature.d.ts +10 -12
- package/lib/rich-text-editor/rte/features/alignment.d.ts +19 -0
- package/lib/rich-text-editor/rte/features/atom.d.ts +9 -0
- package/lib/rich-text-editor/rte/features/base.d.ts +33 -0
- package/lib/rich-text-editor/rte/features/bold.d.ts +17 -0
- package/lib/rich-text-editor/rte/features/drop-handler.d.ts +21 -0
- package/lib/rich-text-editor/rte/features/file-handler.d.ts +25 -0
- package/lib/rich-text-editor/rte/features/font-size-picker.d.ts +46 -0
- package/lib/rich-text-editor/rte/features/hard-break.d.ts +10 -0
- package/lib/rich-text-editor/rte/features/inline-image.d.ts +43 -0
- package/lib/rich-text-editor/rte/features/input-rule.d.ts +10 -0
- package/lib/rich-text-editor/rte/features/internal/basic-text-blocks.d.ts +6 -6
- package/lib/rich-text-editor/rte/features/internal/core.d.ts +37 -0
- package/lib/rich-text-editor/rte/features/internal/cursor-fix.d.ts +16 -0
- package/lib/rich-text-editor/rte/features/internal/foreign-html.d.ts +1 -1
- package/lib/rich-text-editor/rte/features/internal/history.d.ts +2 -2
- package/lib/rich-text-editor/rte/features/internal/input-rules.d.ts +4 -4
- package/lib/rich-text-editor/rte/features/italic.d.ts +17 -0
- package/lib/rich-text-editor/rte/features/link.d.ts +33 -0
- package/lib/rich-text-editor/rte/features/list.d.ts +24 -0
- package/lib/rich-text-editor/rte/features/monospace.d.ts +22 -0
- package/lib/rich-text-editor/rte/features/placeholder.d.ts +23 -0
- package/lib/rich-text-editor/rte/features/strikethrough.d.ts +17 -0
- package/lib/rich-text-editor/rte/features/suggest.d.ts +14 -0
- package/lib/rich-text-editor/rte/features/text-block-picker.d.ts +18 -0
- package/lib/rich-text-editor/rte/features/text-color-picker.d.ts +31 -0
- package/lib/rich-text-editor/rte/features/toolbar-button.d.ts +13 -0
- package/lib/rich-text-editor/rte/features/toolbar.d.ts +37 -0
- package/lib/rich-text-editor/rte/features/underline.d.ts +17 -0
- package/lib/rich-text-editor/rte/html-parser.d.ts +3 -3
- package/lib/rich-text-editor/rte/html-serializer.d.ts +3 -3
- package/lib/rich-text-editor/rte/instance.d.ts +8 -7
- package/lib/rich-text-editor/rte/public-interface.d.ts +13 -0
- package/lib/rich-text-editor/rte/utils/default-textblock.d.ts +2 -2
- package/lib/rich-text-editor/rte/utils/feature-state.d.ts +1 -1
- package/lib/rich-text-editor/rte/utils/text-before-cursor.d.ts +1 -1
- package/lib/rich-text-editor/rte/utils/ui.d.ts +8 -8
- package/lib/rich-text-editor/rte/view.d.ts +3 -6
- package/lib/rich-text-view/definition.d.ts +1 -1
- package/lib/rich-text-view/index.d.ts +2 -0
- package/lib/rich-text-view/rich-text-view.d.ts +1 -1
- package/lib/rich-text-view/rich-text-view.template.d.ts +2 -2
- package/lib/searchable-select/index.d.ts +1 -0
- package/lib/searchable-select/option-tag.d.ts +96 -65
- package/lib/searchable-select/option-tag.template.d.ts +3 -3
- package/lib/searchable-select/searchable-select.d.ts +929 -646
- package/lib/searchable-select/searchable-select.template.d.ts +3 -3
- package/lib/select/index.d.ts +1 -0
- package/lib/select/locale.d.ts +3 -0
- package/lib/select/select.d.ts +1240 -579
- package/lib/select/select.template.d.ts +3 -3
- package/lib/selectable-box/index.d.ts +1 -0
- package/lib/selectable-box/selectable-box.d.ts +94 -63
- package/lib/selectable-box/selectable-box.template.d.ts +2 -2
- package/lib/side-drawer/index.d.ts +1 -0
- package/lib/side-drawer/side-drawer.template.d.ts +2 -2
- package/lib/simple-color-picker/definition.d.ts +1 -1
- package/lib/simple-color-picker/index.d.ts +1 -0
- package/lib/simple-color-picker/simple-color-picker.d.ts +216 -153
- package/lib/simple-color-picker/simple-color-picker.template.d.ts +2 -2
- package/lib/slider/index.d.ts +1 -0
- package/lib/slider/slider.d.ts +299 -205
- package/lib/slider/slider.template.d.ts +4 -4
- package/lib/split-button/index.d.ts +1 -0
- package/lib/split-button/split-button.d.ts +288 -195
- package/lib/split-button/split-button.template.d.ts +3 -3
- package/lib/status/index.d.ts +1 -0
- package/lib/status/status.d.ts +98 -67
- package/lib/status/status.template.d.ts +3 -3
- package/lib/switch/index.d.ts +1 -0
- package/lib/switch/switch.d.ts +207 -142
- package/lib/switch/switch.template.d.ts +2 -2
- package/lib/tab/index.d.ts +1 -0
- package/lib/tab/tab.d.ts +288 -195
- package/lib/tab/tab.template.d.ts +3 -3
- package/lib/tab-panel/index.d.ts +1 -0
- package/lib/tab-panel/tab-panel.d.ts +93 -62
- package/lib/tab-panel/tab-panel.template.d.ts +2 -2
- package/lib/table/index.d.ts +1 -0
- package/lib/table/table-body.template.d.ts +3 -3
- package/lib/table/table-cell.d.ts +93 -62
- package/lib/table/table-cell.template.d.ts +3 -3
- package/lib/table/table-head.template.d.ts +3 -3
- package/lib/table/table-header-cell.d.ts +93 -62
- package/lib/table/table-header-cell.template.d.ts +3 -3
- package/lib/table/table-row.d.ts +93 -62
- package/lib/table/table-row.template.d.ts +3 -3
- package/lib/table/table.template.d.ts +3 -3
- package/lib/tabs/index.d.ts +1 -0
- package/lib/tabs/tabs.d.ts +2 -2
- package/lib/tabs/tabs.template.d.ts +2 -2
- package/lib/tag/index.d.ts +1 -0
- package/lib/tag/tag.d.ts +288 -195
- package/lib/tag/tag.template.d.ts +3 -3
- package/lib/tag-group/index.d.ts +1 -0
- package/lib/tag-group/tag-group.d.ts +93 -62
- package/lib/tag-group/tag-group.template.d.ts +2 -2
- package/lib/tag-name-map.d.ts +1 -1
- package/lib/text-area/index.d.ts +1 -0
- package/lib/text-area/text-area.d.ts +832 -581
- package/lib/text-area/text-area.template.d.ts +3 -3
- package/lib/text-field/index.d.ts +1 -0
- package/lib/text-field/text-field.d.ts +931 -649
- package/lib/text-field/text-field.template.d.ts +3 -3
- package/lib/time-picker/index.d.ts +1 -0
- package/lib/time-picker/time-picker.d.ts +486 -359
- package/lib/time-picker/time-picker.template.d.ts +3 -3
- package/lib/toggletip/index.d.ts +1 -0
- package/lib/toggletip/toggletip.d.ts +197 -135
- package/lib/toggletip/toggletip.template.d.ts +3 -3
- package/lib/tooltip/index.d.ts +1 -0
- package/lib/tooltip/tooltip.d.ts +101 -70
- package/lib/tooltip/tooltip.template.d.ts +3 -3
- package/lib/tree-item/index.d.ts +1 -0
- package/lib/tree-item/tree-item.d.ts +190 -128
- package/lib/tree-item/tree-item.template.d.ts +3 -3
- package/lib/tree-view/index.d.ts +1 -0
- package/lib/tree-view/tree-view.d.ts +93 -62
- package/lib/tree-view/tree-view.template.d.ts +2 -2
- package/lib/video-player/index.d.ts +1 -0
- package/lib/video-player/video-player.d.ts +96 -65
- package/lib/video-player/video-player.template.d.ts +1 -1
- package/lib/video-player/vivid-video-svg.d.ts +1 -1
- package/lib/visually-hidden/definition.d.ts +1 -1
- package/lib/visually-hidden/index.d.ts +1 -0
- package/lib/visually-hidden/visually-hidden.template.d.ts +1 -1
- package/locales/de-DE.cjs +3 -0
- package/locales/de-DE.d.ts +1 -1
- package/locales/de-DE.js +3 -0
- package/locales/en-GB.cjs +3 -0
- package/locales/en-GB.d.ts +1 -1
- package/locales/en-GB.js +3 -0
- package/locales/en-US.cjs +3 -0
- package/locales/en-US.d.ts +1 -1
- package/locales/en-US.js +3 -0
- package/locales/ja-JP.cjs +3 -0
- package/locales/ja-JP.d.ts +1 -1
- package/locales/ja-JP.js +3 -0
- package/locales/zh-CN.cjs +3 -0
- package/locales/zh-CN.d.ts +1 -1
- package/locales/zh-CN.js +3 -0
- package/package.json +6 -6
- package/rich-text-editor/definition.cjs +2 -4
- package/rich-text-editor/definition.js +3 -5
- package/rich-text-editor/index.cjs +7 -7
- package/rich-text-editor/index.js +975 -977
- package/rich-text-view/index.js +1 -1
- package/select/definition.cjs +104 -5
- package/select/definition.js +104 -5
- package/shared/aria/aria-change-subscription.d.ts +1 -1
- package/shared/aria/aria-mixin.d.ts +94 -63
- package/shared/aria/attribute-removal.d.ts +1 -1
- package/shared/aria/delegate-aria-behavior.d.ts +2 -2
- package/shared/aria/delegates-aria.d.ts +96 -65
- package/shared/aria/host-semantics-behavior.d.ts +2 -2
- package/shared/aria/host-semantics.d.ts +97 -66
- package/shared/color-picker/base-color-picker.d.ts +114 -82
- package/shared/datetime/dateRange.d.ts +1 -1
- package/shared/datetime/dateTimeStr.d.ts +4 -4
- package/shared/datetime/month.d.ts +1 -1
- package/shared/datetime/presentationDate.d.ts +2 -2
- package/shared/datetime/presentationDateRange.d.ts +2 -2
- package/shared/datetime/presentationDateTime.d.ts +2 -2
- package/shared/datetime/presentationTime.d.ts +1 -1
- package/shared/datetime/year.d.ts +1 -1
- package/shared/deprecation/replaced-props.d.ts +95 -60
- package/shared/design-system/createRegisterFunction.d.ts +1 -1
- package/shared/design-system/defineVividComponent.d.ts +1 -1
- package/shared/feedback/feedback-message.d.ts +96 -65
- package/shared/feedback/mixins.d.ts +200 -138
- package/shared/foundation/button/button.d.ts +202 -139
- package/shared/foundation/button/button.template.d.ts +2 -2
- package/shared/foundation/form-associated/form-associated.d.ts +213 -147
- package/shared/foundation/listbox/listbox.d.ts +1 -1
- package/shared/foundation/test-utilities/fixture.d.ts +18 -0
- package/shared/foundation/vivid-element/vivid-element.d.ts +194 -131
- package/shared/localization/Locale.d.ts +31 -29
- package/shared/localization/index.d.ts +1 -1
- package/shared/patterns/affix.d.ts +195 -133
- package/shared/patterns/anchored.d.ts +202 -140
- package/shared/patterns/char-count/char-count.d.ts +99 -68
- package/shared/patterns/chevron.d.ts +2 -2
- package/shared/patterns/form-elements/form-element.d.ts +114 -488
- package/shared/patterns/form-elements/with-contextual-help.d.ts +117 -903
- package/shared/patterns/form-elements/with-error-text.d.ts +120 -906
- package/shared/patterns/form-elements/with-success-text.d.ts +97 -66
- package/shared/patterns/linkable.d.ts +106 -117
- package/shared/patterns/localized.d.ts +197 -135
- package/shared/patterns/trapped-focus.d.ts +95 -64
- package/shared/picker-field/mixins/calendar-picker.d.ts +251 -188
- package/shared/picker-field/mixins/calendar-picker.template.d.ts +271 -208
- package/shared/picker-field/mixins/calendar-segments/calendarGrid.d.ts +3 -3
- package/shared/picker-field/mixins/calendar-segments/monthPickerGrid.d.ts +2 -2
- package/shared/picker-field/mixins/calendar-segments/segment.d.ts +2 -2
- package/shared/picker-field/mixins/inline-time-picker/columns.d.ts +2 -2
- package/shared/picker-field/mixins/inline-time-picker/index.d.ts +1 -0
- package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.d.ts +95 -64
- package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.template.d.ts +3 -3
- package/shared/picker-field/mixins/inline-time-picker/picker-option.d.ts +1 -1
- package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +277 -1102
- package/shared/picker-field/mixins/single-date-picker.d.ts +274 -1953
- package/shared/picker-field/mixins/single-value-picker.d.ts +236 -173
- package/shared/picker-field/mixins/time-selection-picker.d.ts +257 -1046
- package/shared/picker-field/mixins/time-selection-picker.template.d.ts +486 -360
- package/shared/picker-field/picker-field.d.ts +735 -514
- package/shared/picker-field/picker-field.template.d.ts +2 -2
- package/shared/templating/attribute-binding-behaviour.d.ts +1 -1
- package/shared/templating/render-in-light-dom.d.ts +2 -2
- package/shared/utils/closest-of-type.d.ts +2 -0
- package/shared/utils/direct-children-of-type.d.ts +2 -0
- package/shared/utils/dom-traversal-types.d.ts +3 -0
- package/shared/utils/first-of-type.d.ts +2 -0
- package/shared/utils/last-of-type.d.ts +2 -0
- package/shared/utils/nested-children-of-type.d.ts +2 -0
- package/shared/utils/next-of-type.d.ts +2 -0
- package/shared/utils/numberConverter.d.ts +1 -1
- package/shared/utils/prev-of-type.d.ts +2 -0
- package/shared/utils/promise.d.ts +2 -2
- package/shared/utils/siblings-of-type.d.ts +2 -0
- package/styles/core/all.css +2 -2
- package/styles/core/theme.css +2 -2
- 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/unbundled/slottable-request.cjs +7 -5
- package/unbundled/slottable-request.js +7 -6
- package/unbundled/vivid-element.cjs +1 -1
- package/unbundled/vivid-element.js +1 -1
- package/vivid.api.json +727 -38
package/data-grid/definition.cjs
CHANGED
|
@@ -17,7 +17,7 @@ const dataGridStyles = ":host{display:block}:host([generate-header=sticky]){max-
|
|
|
17
17
|
|
|
18
18
|
const dataGridRowStyles = ".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)}";
|
|
19
19
|
|
|
20
|
-
const dataGridCellStyles = ":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(--focus-stroke-color, 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}";
|
|
20
|
+
const dataGridCellStyles = ":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(--focus-stroke-color, 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)}.content{display:flex;overflow:hidden;align-items:center}.content[role=button]{cursor:pointer}slot:not([name]){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:not([name]){inline-size:100%}.header-icon{flex-shrink:0;margin-inline-start:16px}slot[name=action-items]{display:flex;flex-shrink:0;align-items:center}.base.has-action-items slot[name=action-items]{margin-inline-start:16px}";
|
|
21
21
|
|
|
22
22
|
let kernelMode;
|
|
23
23
|
const kernelAttr = "fast-kernel";
|
|
@@ -1200,6 +1200,9 @@ __decorateClass$2([
|
|
|
1200
1200
|
__decorateClass$2([
|
|
1201
1201
|
fastElement.attr({ attribute: "sort-direction" })
|
|
1202
1202
|
], DataGridCell.prototype, "sortDirection");
|
|
1203
|
+
__decorateClass$2([
|
|
1204
|
+
fastElement.observable
|
|
1205
|
+
], DataGridCell.prototype, "_actionItemsSlottedContent");
|
|
1203
1206
|
|
|
1204
1207
|
var __defProp$1 = Object.defineProperty;
|
|
1205
1208
|
var __decorateClass$1 = (decorators, target, key, kind) => {
|
|
@@ -2249,13 +2252,28 @@ function getSortAnnouncement(x) {
|
|
|
2249
2252
|
}
|
|
2250
2253
|
function handleKeyDown(x, e) {
|
|
2251
2254
|
if (e.key === fastWebUtilities.keyEnter || e.key === fastWebUtilities.keySpace) {
|
|
2255
|
+
const target = e.target;
|
|
2256
|
+
if (target.closest('[slot="action-items"]')) return true;
|
|
2252
2257
|
x._handleInteraction();
|
|
2253
2258
|
}
|
|
2254
2259
|
return true;
|
|
2255
2260
|
}
|
|
2261
|
+
function handleClick(x, e) {
|
|
2262
|
+
const target = e.target;
|
|
2263
|
+
if (target.closest('[slot="action-items"]')) return true;
|
|
2264
|
+
x._handleInteraction();
|
|
2265
|
+
return true;
|
|
2266
|
+
}
|
|
2256
2267
|
const DataGridCellTemplate = (context) => {
|
|
2257
2268
|
const visuallyHiddenTagName = context.tagFor(visuallyHidden_definition.VwcVisuallyHiddenElement);
|
|
2258
|
-
const getBaseClasses = (
|
|
2269
|
+
const getBaseClasses = ({
|
|
2270
|
+
selected,
|
|
2271
|
+
_actionItemsSlottedContent
|
|
2272
|
+
}) => fastWebUtilities.classNames(
|
|
2273
|
+
"base",
|
|
2274
|
+
["selected", !!selected],
|
|
2275
|
+
["has-action-items", Boolean(_actionItemsSlottedContent?.length)]
|
|
2276
|
+
);
|
|
2259
2277
|
return fastElement.html`
|
|
2260
2278
|
<template
|
|
2261
2279
|
tabindex="-1"
|
|
@@ -2264,29 +2282,30 @@ const DataGridCellTemplate = (context) => {
|
|
|
2264
2282
|
ariaSelected: calculateAriaSelectedValue,
|
|
2265
2283
|
ariaSort: (x) => x.sortDirection ?? null
|
|
2266
2284
|
})}
|
|
2267
|
-
@click="${(x) => x.
|
|
2285
|
+
@click="${(x, c) => handleClick(x, c.event)}"
|
|
2268
2286
|
@keydown="${(x, c) => handleKeyDown(x, c.event)}"
|
|
2269
2287
|
>
|
|
2270
|
-
<div
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
|
|
2274
|
-
|
|
2288
|
+
<div class="${getBaseClasses}">
|
|
2289
|
+
<div
|
|
2290
|
+
class="content"
|
|
2291
|
+
role="${(x) => shouldShowSortIcons(x) ? "button" : void 0}"
|
|
2292
|
+
>
|
|
2293
|
+
${(x) => x.selected ? fastElement.html`<${visuallyHiddenTagName}
|
|
2275
2294
|
data-announcement="selection"
|
|
2276
2295
|
>
|
|
2277
2296
|
${(x2) => x2.locale.dataGrid.cell.selected}
|
|
2278
2297
|
</${visuallyHiddenTagName}>` : null}
|
|
2279
|
-
|
|
2280
|
-
|
|
2298
|
+
<slot></slot>
|
|
2299
|
+
${fastElement.when(
|
|
2281
2300
|
shouldShowSortIcons,
|
|
2282
2301
|
fastElement.html`<${visuallyHiddenTagName}
|
|
2283
2302
|
data-announcement="button-role"
|
|
2284
2303
|
>
|
|
2285
2304
|
${(x) => x.locale.dataGrid.cell.button}
|
|
2286
2305
|
</${visuallyHiddenTagName}>
|
|
2287
|
-
|
|
2306
|
+
`
|
|
2288
2307
|
)}
|
|
2289
|
-
|
|
2308
|
+
${fastElement.when(
|
|
2290
2309
|
shouldAnnounceSortState,
|
|
2291
2310
|
fastElement.html`<${visuallyHiddenTagName}
|
|
2292
2311
|
aria-live="polite"
|
|
@@ -2295,7 +2314,12 @@ const DataGridCellTemplate = (context) => {
|
|
|
2295
2314
|
${getSortAnnouncement}
|
|
2296
2315
|
</${visuallyHiddenTagName}>`
|
|
2297
2316
|
)}
|
|
2298
|
-
|
|
2317
|
+
${(_) => renderSortIcons(context)}
|
|
2318
|
+
</div>
|
|
2319
|
+
<slot
|
|
2320
|
+
name="action-items"
|
|
2321
|
+
${fastElement.slotted("_actionItemsSlottedContent")}
|
|
2322
|
+
></slot>
|
|
2299
2323
|
</div>
|
|
2300
2324
|
</template>
|
|
2301
2325
|
`;
|
package/data-grid/definition.js
CHANGED
|
@@ -13,7 +13,7 @@ const dataGridStyles = ":host{display:block}:host([generate-header=sticky]){max-
|
|
|
13
13
|
|
|
14
14
|
const dataGridRowStyles = ".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)}";
|
|
15
15
|
|
|
16
|
-
const dataGridCellStyles = ":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(--focus-stroke-color, 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}";
|
|
16
|
+
const dataGridCellStyles = ":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(--focus-stroke-color, 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)}.content{display:flex;overflow:hidden;align-items:center}.content[role=button]{cursor:pointer}slot:not([name]){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:not([name]){inline-size:100%}.header-icon{flex-shrink:0;margin-inline-start:16px}slot[name=action-items]{display:flex;flex-shrink:0;align-items:center}.base.has-action-items slot[name=action-items]{margin-inline-start:16px}";
|
|
17
17
|
|
|
18
18
|
let kernelMode;
|
|
19
19
|
const kernelAttr = "fast-kernel";
|
|
@@ -1196,6 +1196,9 @@ __decorateClass$2([
|
|
|
1196
1196
|
__decorateClass$2([
|
|
1197
1197
|
attr({ attribute: "sort-direction" })
|
|
1198
1198
|
], DataGridCell.prototype, "sortDirection");
|
|
1199
|
+
__decorateClass$2([
|
|
1200
|
+
observable
|
|
1201
|
+
], DataGridCell.prototype, "_actionItemsSlottedContent");
|
|
1199
1202
|
|
|
1200
1203
|
var __defProp$1 = Object.defineProperty;
|
|
1201
1204
|
var __decorateClass$1 = (decorators, target, key, kind) => {
|
|
@@ -2245,13 +2248,28 @@ function getSortAnnouncement(x) {
|
|
|
2245
2248
|
}
|
|
2246
2249
|
function handleKeyDown(x, e) {
|
|
2247
2250
|
if (e.key === keyEnter || e.key === keySpace) {
|
|
2251
|
+
const target = e.target;
|
|
2252
|
+
if (target.closest('[slot="action-items"]')) return true;
|
|
2248
2253
|
x._handleInteraction();
|
|
2249
2254
|
}
|
|
2250
2255
|
return true;
|
|
2251
2256
|
}
|
|
2257
|
+
function handleClick(x, e) {
|
|
2258
|
+
const target = e.target;
|
|
2259
|
+
if (target.closest('[slot="action-items"]')) return true;
|
|
2260
|
+
x._handleInteraction();
|
|
2261
|
+
return true;
|
|
2262
|
+
}
|
|
2252
2263
|
const DataGridCellTemplate = (context) => {
|
|
2253
2264
|
const visuallyHiddenTagName = context.tagFor(VisuallyHidden);
|
|
2254
|
-
const getBaseClasses = (
|
|
2265
|
+
const getBaseClasses = ({
|
|
2266
|
+
selected,
|
|
2267
|
+
_actionItemsSlottedContent
|
|
2268
|
+
}) => classNames(
|
|
2269
|
+
"base",
|
|
2270
|
+
["selected", !!selected],
|
|
2271
|
+
["has-action-items", Boolean(_actionItemsSlottedContent?.length)]
|
|
2272
|
+
);
|
|
2255
2273
|
return html`
|
|
2256
2274
|
<template
|
|
2257
2275
|
tabindex="-1"
|
|
@@ -2260,29 +2278,30 @@ const DataGridCellTemplate = (context) => {
|
|
|
2260
2278
|
ariaSelected: calculateAriaSelectedValue,
|
|
2261
2279
|
ariaSort: (x) => x.sortDirection ?? null
|
|
2262
2280
|
})}
|
|
2263
|
-
@click="${(x) => x.
|
|
2281
|
+
@click="${(x, c) => handleClick(x, c.event)}"
|
|
2264
2282
|
@keydown="${(x, c) => handleKeyDown(x, c.event)}"
|
|
2265
2283
|
>
|
|
2266
|
-
<div
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2284
|
+
<div class="${getBaseClasses}">
|
|
2285
|
+
<div
|
|
2286
|
+
class="content"
|
|
2287
|
+
role="${(x) => shouldShowSortIcons(x) ? "button" : void 0}"
|
|
2288
|
+
>
|
|
2289
|
+
${(x) => x.selected ? html`<${visuallyHiddenTagName}
|
|
2271
2290
|
data-announcement="selection"
|
|
2272
2291
|
>
|
|
2273
2292
|
${(x2) => x2.locale.dataGrid.cell.selected}
|
|
2274
2293
|
</${visuallyHiddenTagName}>` : null}
|
|
2275
|
-
|
|
2276
|
-
|
|
2294
|
+
<slot></slot>
|
|
2295
|
+
${when(
|
|
2277
2296
|
shouldShowSortIcons,
|
|
2278
2297
|
html`<${visuallyHiddenTagName}
|
|
2279
2298
|
data-announcement="button-role"
|
|
2280
2299
|
>
|
|
2281
2300
|
${(x) => x.locale.dataGrid.cell.button}
|
|
2282
2301
|
</${visuallyHiddenTagName}>
|
|
2283
|
-
|
|
2302
|
+
`
|
|
2284
2303
|
)}
|
|
2285
|
-
|
|
2304
|
+
${when(
|
|
2286
2305
|
shouldAnnounceSortState,
|
|
2287
2306
|
html`<${visuallyHiddenTagName}
|
|
2288
2307
|
aria-live="polite"
|
|
@@ -2291,7 +2310,12 @@ const DataGridCellTemplate = (context) => {
|
|
|
2291
2310
|
${getSortAnnouncement}
|
|
2292
2311
|
</${visuallyHiddenTagName}>`
|
|
2293
2312
|
)}
|
|
2294
|
-
|
|
2313
|
+
${(_) => renderSortIcons(context)}
|
|
2314
|
+
</div>
|
|
2315
|
+
<slot
|
|
2316
|
+
name="action-items"
|
|
2317
|
+
${slotted("_actionItemsSlottedContent")}
|
|
2318
|
+
></slot>
|
|
2295
2319
|
</div>
|
|
2296
2320
|
</template>
|
|
2297
2321
|
`;
|
package/data-grid/index.cjs
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
"use strict";const S=require("../bundled/definition2.cjs"),n=require("../bundled/vivid-element.cjs"),$=require("../bundled/definition14.cjs"),
|
|
1
|
+
"use strict";const S=require("../bundled/definition2.cjs"),n=require("../bundled/vivid-element.cjs"),$=require("../bundled/definition14.cjs"),r=require("../bundled/data-grid.options.cjs"),F=require("../bundled/repeat.cjs"),w=require("../bundled/normalize.cjs"),h=require("../bundled/key-codes.cjs"),D=require("../bundled/host-semantics.cjs"),R=require("../bundled/children.cjs"),C=require("../bundled/slotted.cjs"),O=require("../bundled/localized.cjs"),H=require("../bundled/class-names.cjs"),T=require("../bundled/when.cjs"),I="focus",E="focusin",b="focusout",g="keydown",z=":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}",A=".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)}",q=':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(--focus-stroke-color, 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)}.content{display:flex;overflow:hidden;align-items:center}.content[role=button]{cursor:pointer}slot:not([name]){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:not([name]){inline-size:100%}.header-icon{flex-shrink:0;margin-inline-start:16px}slot[name=action-items]{display:flex;flex-shrink:0;align-items:center}.base.has-action-items slot[name=action-items]{margin-inline-start:16px}';var L=Object.defineProperty,v=(l,e,t,i)=>{for(var o=void 0,a=l.length-1,s;a>=0;a--)(s=l[a])&&(o=s(e,t,o)||o);return o&&L(e,t,o),o};const P=n.html`
|
|
2
2
|
<template>
|
|
3
|
-
${
|
|
3
|
+
${l=>l.rowData===null||l.columnDefinition===null||l.columnDefinition.columnDataKey===null?null:l.rowData[l.columnDefinition.columnDataKey]}
|
|
4
4
|
</template>
|
|
5
5
|
`,M=n.html`
|
|
6
6
|
<template>
|
|
7
|
-
${
|
|
7
|
+
${l=>l.columnDefinition.title===void 0?l.columnDefinition.columnDataKey:l.columnDefinition.title}
|
|
8
8
|
</template>
|
|
9
|
-
`;class f extends O.Localized(D.HostSemantics(n.VividElement)){constructor(){super(...arguments),this.cellType=a.DataGridCellTypes.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(E,this.handleFocusin),this.addEventListener(b,this.handleFocusout),this.addEventListener(g,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(E,this.handleFocusin),this.removeEventListener(b,this.handleFocusout),this.removeEventListener(g,this.handleKeydown),this.disconnectCellView()}handleFocusin(e){if(this.shadowRoot.querySelector(".base").classList.add("active"),!this.isActiveCell){switch(this.isActiveCell=!0,this.cellType){case a.DataGridCellTypes.columnHeader:if(this.columnDefinition!==null&&this.columnDefinition.headerCellInternalFocusQueue!==!0&&typeof this.columnDefinition.headerCellFocusTargetCallback=="function"){const t=this.columnDefinition.headerCellFocusTargetCallback(this);/* v8 ignore else -- @preserve */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);/* v8 ignore else -- @preserve */t!==null&&t.focus()}break}this.$emit("cell-focused",this)}}handleFocusout(e){this.shadowRoot.querySelector(".base").classList.remove("active");/* v8 ignore else -- @preserve */this!==document.activeElement&&!this.contains(document.activeElement)&&(this.isActiveCell=!1)}handleKeydown(e){if(!(e.defaultPrevented||this.columnDefinition===null||this.cellType===a.DataGridCellTypes.default&&this.columnDefinition.cellInternalFocusQueue!==!0||this.cellType===a.DataGridCellTypes.columnHeader&&this.columnDefinition.headerCellInternalFocusQueue!==!0))switch(e.key){case h.keyEnter:case h.keyFunction2:if(this.contains(document.activeElement)&&document.activeElement!==this)return;switch(this.cellType){case a.DataGridCellTypes.columnHeader:{if(this.columnDefinition.headerCellFocusTargetCallback!==void 0){const t=this.columnDefinition.headerCellFocusTargetCallback(this);/* v8 ignore else -- @preserve */t!==null&&t.focus(),e.preventDefault()}break}default:{if(this.columnDefinition.cellFocusTargetCallback!==void 0){const t=this.columnDefinition.cellFocusTargetCallback(this);/* v8 ignore else -- @preserve */t!==null&&t.focus(),e.preventDefault()}break}}break;case h.keyEscape:{/* v8 ignore else -- @preserve */this.contains(document.activeElement)&&document.activeElement!==this&&(this.focus(),e.preventDefault());break}}}updateCellView(){if(this.disconnectCellView(),this.columnDefinition!==null){switch(this.cellType){case a.DataGridCellTypes.columnHeader:this.columnDefinition.headerCellTemplate!==void 0?this.customCellView=this.columnDefinition.headerCellTemplate.render(this,this):this.customCellView=M.render(this,this);break;case a.DataGridCellTypes.rowHeader:case a.DataGridCellTypes.default:this.columnDefinition.cellTemplate!==void 0?this.customCellView=this.columnDefinition.cellTemplate.render(this,this):this.customCellView=P.render(this,this);break}this.columnDefinition?.sortable?this.columnDefinition.sortDirection?this.sortDirection=this.columnDefinition.sortDirection:this.sortDirection=a.DataGridCellSortStates.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}}v([n.attr({attribute:"cell-type"})],f.prototype,"cellType");v([n.attr({attribute:"grid-column"})],f.prototype,"gridColumn");v([n.observable],f.prototype,"rowData");v([n.observable],f.prototype,"columnDefinition");v([n.observable],f.prototype,"_selectable");v([n.attr({mode:"boolean"})],f.prototype,"selected");v([n.attr({attribute:"sort-direction"})],f.prototype,"sortDirection");var U=Object.defineProperty,m=(o,e,t,i)=>{for(var l=void 0,r=o.length-1,s;r>=0;r--)(s=o[r])&&(l=s(e,t,l)||l);return l&&U(e,t,l),l};class d extends D.HostSemantics(n.VividElement){constructor(){super(...arguments),this.rowType=a.DataGridRowTypes.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();/* v8 ignore else -- @preserve */this.behaviorOrchestrator===null&&(this.updateItemTemplate(),this.behaviorOrchestrator=n.ViewBehaviorOrchestrator.create(this),this.$fastController.addBehavior(this.behaviorOrchestrator),this.behaviorOrchestrator.addBehaviorFactory(new F.RepeatDirective(y.normalizeBinding(e=>e.columnDefinitions),y.normalizeBinding(e=>e.activeCellItemTemplate),{positioning:!0}),this.appendChild(document.createComment("")))),this.addEventListener("cell-focused",this.handleCellFocus),this.addEventListener(b,this.handleFocusout),this.addEventListener(g,this.handleKeydown),this.updateRowStyle()}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("cell-focused",this.handleCellFocus),this.removeEventListener(b,this.handleFocusout),this.removeEventListener(g,this.handleKeydown)}handleFocusout(e){/* v8 ignore else -- @preserve */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 h.keyArrowLeft:t=Math.max(0,this.focusColumnIndex-1),this.cellElements[t].focus(),e.preventDefault();break;case h.keyArrowRight:t=Math.min(this.cellElements.length-1,this.focusColumnIndex+1),this.cellElements[t].focus(),e.preventDefault();break;case h.keyHome:e.ctrlKey||(this.cellElements[0].focus(),e.preventDefault());break;case h.keyEnd:e.ctrlKey||(this.cellElements[this.cellElements.length-1].focus(),e.preventDefault());break}}updateItemTemplate(){this.activeCellItemTemplate=this.rowType===a.DataGridRowTypes.default&&this.cellItemTemplate!==void 0?this.cellItemTemplate:this.rowType===a.DataGridRowTypes.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"}}m([n.attr({attribute:"grid-template-columns"})],d.prototype,"gridTemplateColumns");m([n.attr({attribute:"row-type"})],d.prototype,"rowType");m([n.observable],d.prototype,"rowData");m([n.observable],d.prototype,"columnDefinitions");m([n.observable],d.prototype,"cellItemTemplate");m([n.observable],d.prototype,"headerCellItemTemplate");m([n.observable],d.prototype,"rowIndex");m([n.observable],d.prototype,"activeCellItemTemplate");m([n.observable],d.prototype,"defaultCellItemTemplate");m([n.observable],d.prototype,"defaultHeaderCellItemTemplate");m([n.observable],d.prototype,"cellElements");m([n.observable],d.prototype,"_selectable");m([n.attr({mode:"boolean"})],d.prototype,"selected");var V=Object.defineProperty,u=(o,e,t,i)=>{for(var l=void 0,r=o.length-1,s;r>=0;r--)(s=o[r])&&(l=s(e,t,l)||l);return l&&V(e,t,l),l};const p={none:"none",singleRow:"single-row",multiRow:"multi-row",singleCell:"single-cell",multiCell:"multi-cell"},c=class _ extends n.VividElement{constructor(){super(),this.noTabbing=!1,this.generateHeader=a.GenerateHeaderOptions.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,i)=>{if(this.rowElements.length===0){this.focusRowIndex=0,this.focusColumnIndex=0;return}const l=Math.max(0,Math.min(this.rowElements.length-1,e)),s=this.rowElements[l].querySelectorAll('[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [data-vvd-component="data-grid-cell"]'),C=Math.max(0,Math.min(s.length-1,t)),k=s[C];i&&this.scrollHeight!==this.clientHeight&&(l<this.focusRowIndex&&this.scrollTop>0||l>this.focusRowIndex&&this.scrollTop<this.scrollHeight-this.clientHeight)&&k.scrollIntoView({block:"center",inline:"center"}),k.focus()},this.onChildListChange=(e,t)=>{/* v8 ignore else -- @preserve */e&&e.length&&(e.forEach(i=>{i.addedNodes.forEach(l=>{l.nodeType===1&&(l.getAttribute("role")==="row"||l.getAttribute("row-type")==="default")&&(l.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,i)=>{const l=t;l.rowIndex=i,l.gridTemplateColumns=e,this.columnDefinitionsStale&&(l.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:i,metaKey:l})=>{if(!(e.getAttribute("role")!=="gridcell"||e.getAttribute("cell-type")!=="default")){if(this.selectionMode===p.singleCell||this.selectionMode===p.multiCell){this.#i({target:e,ctrlKey:t,shiftKey:i,metaKey:l});return}(this.selectionMode===p.singleRow||this.selectionMode===p.multiRow)&&this.#n({target:e,ctrlKey:t,shiftKey:i,metaKey:l})}},this.#i=({target:e,ctrlKey:t,shiftKey:i,metaKey:l})=>{const r=e;if(this.selectionMode===p.multiCell&&(t||i||l))r.selected=!this.#a.includes(r);else{const s=r.selected;this._resetSelection(!0),r.selected=!s}},this.#n=({target:e,ctrlKey:t,shiftKey:i,metaKey:l})=>{const r=e.parentNode;if(this.selectionMode===p.multiRow&&(t||i||l))r.selected=!this.#r.includes(r);else{const s=r.selected;this._resetSelection(!0),r.selected=!s}},this.#o={handleChange(e,t){/* v8 ignore else -- @preserve */if(t==="columnDefinitions"){/* v8 ignore else -- @preserve */e.$fastController.isConnected&&e.toggleGeneratedHeader()}}},this._resetSelection=(e=!1)=>{const t=Array.from(this.querySelectorAll('[role="gridcell"], [cell-type="default"]')),i=Array.from(this.querySelectorAll('[role="row"], [row-type="default"]'));if(this.selectionMode===p.singleCell||this.selectionMode===p.multiCell){for(const l of t)l._selectable=!0,l.selected=e?!1:l.selected||!1;for(const l of i)l._selectable=!1,l.selected=!1}if(this.selectionMode===p.none)for(const l of[...t,...i])l._selectable=!1,l.selected=!1;if(this.selectionMode===p.singleRow||this.selectionMode===p.multiRow){for(const l of t)l._selectable=!1,l.selected=!1;for(const l of i)l._selectable=!0,l.selected=e?!1:l.selected||!1}},this.addEventListener("click",this.#t),this.addEventListener("keydown",this.#l)}static generateTemplateColumns(e){let t="";return e.forEach(i=>{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(){/* v8 ignore if -- @preserve */this.$fastController.isConnected&&(this.updateRowIndexes(),this.fixedColumns&&this.fixedColumns>0&&this.applyFixedColumns())}rowsDataChanged(){this.columnDefinitions===null&&this.rowsData.length>0&&(this.columnDefinitions=_.generateColumns(this.rowsData[0])),this.$fastController.isConnected&&this.toggleGeneratedHeader()}columnDefinitionsChanged(){if(this.columnDefinitions===null){this.generatedGridTemplateColumns="";return}this.generatedGridTemplateColumns=_.generateTemplateColumns(this.columnDefinitions);/* v8 ignore if -- @preserve */this.$fastController.isConnected&&(this.columnDefinitionsStale=!0,this.queueRowIndexUpdate())}headerCellItemTemplateChanged(){/* v8 ignore if -- @preserve */this.$fastController.isConnected&&this.generatedHeader!==null&&(this.generatedHeader.headerCellItemTemplate=this.headerCellItemTemplate)}focusRowIndexChanged(){this.$fastController.isConnected&&this.queueFocusUpdate()}focusColumnIndexChanged(){this.$fastController.isConnected&&this.queueFocusUpdate()}fixedColumnsChanged(){/* v8 ignore if -- @preserve */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();/* v8 ignore else -- @preserve */this.rowItemTemplate===void 0&&(this.rowItemTemplate=this.defaultRowItemTemplate);/* v8 ignore else -- @preserve */this.behaviorOrchestrator===null&&(this.behaviorOrchestrator=n.ViewBehaviorOrchestrator.create(this),this.$fastController.addBehavior(this.behaviorOrchestrator),this.behaviorOrchestrator.addBehaviorFactory(new F.RepeatDirective(y.normalizeBinding(e=>e.rowsData),y.normalizeBinding(e=>e.rowItemTemplate),{positioning:!0}),this.appendChild(document.createComment("")))),this.toggleGeneratedHeader(),this.addEventListener("row-focused",this.handleRowFocus),this.addEventListener(I,this.handleFocus),this.addEventListener(g,this.handleKeydown),this.addEventListener(b,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(I,this.handleFocus),this.removeEventListener(g,this.handleKeydown),this.removeEventListener(b,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 i=this.rowElements.length-1,l=this.offsetHeight+this.scrollTop,r=this.rowElements[i];switch(e.key){case h.keyArrowUp:e.preventDefault(),this.focusOnCell(this.focusRowIndex-1,this.focusColumnIndex,!0);break;case h.keyArrowDown:e.preventDefault(),this.focusOnCell(this.focusRowIndex+1,this.focusColumnIndex,!0);break;case h.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 s=this.rowElements[t];if(s.offsetTop<this.scrollTop){this.scrollTop=s.offsetTop+s.clientHeight-this.clientHeight;break}}this.focusOnCell(t,this.focusColumnIndex,!1);break;case h.keyPageDown:if(e.preventDefault(),this.rowElements.length===0){this.focusOnCell(0,0,!1);break}if(this.focusRowIndex>=i||r.offsetTop+r.offsetHeight<=l){this.focusOnCell(i,this.focusColumnIndex,!1);return}for(t=this.focusRowIndex+1,t;t<=i;t++){const s=this.rowElements[t];if(s.offsetTop+s.offsetHeight>l){let C=0;this.generateHeader===a.GenerateHeaderOptions.sticky&&this.generatedHeader!==null&&(C=this.generatedHeader.clientHeight),this.scrollTop=s.offsetTop-C;break}}this.focusOnCell(t,this.focusColumnIndex,!1);break;case h.keyHome:{/* v8 ignore else -- @preserve */e.ctrlKey&&(e.preventDefault(),this.focusOnCell(0,0,!0));break}case h.keyEnd:{/* v8 ignore else -- @preserve */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!==a.GenerateHeaderOptions.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===a.GenerateHeaderOptions.sticky?a.DataGridRowTypes.stickyHeader:a.DataGridRowTypes.header;/* v8 ignore else -- @preserve */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 l=Array.from(t.children).filter(r=>r.selected);return e.concat(l)},[])}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,i)=>({columnDataKey:t,gridColumn:`${i}`}))}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((i,l)=>{/* v8 ignore else -- @preserve */if(l<t.length){const r=t[l];/* v8 ignore else -- @preserve */typeof r.setFixedPosition=="function"&&r.setFixedPosition(`${i}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 i=0;i<Math.min(this.fixedColumns,e.length);i++)this.fixedColumnsPositions.push(t),t+=e[i].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((i,l)=>{/* v8 ignore else -- @preserve */if(l<t.length){const r=t[l];/* v8 ignore else -- @preserve */typeof r.setFixedPosition=="function"&&r.setFixedPosition(void 0)}})}),this.fixedColumnsPositions=[]}};u([n.attr({attribute:"no-tabbing",mode:"boolean"})],c.prototype,"noTabbing");u([n.attr({attribute:"generate-header"})],c.prototype,"generateHeader");u([n.attr({attribute:"grid-template-columns"})],c.prototype,"gridTemplateColumns");u([n.observable],c.prototype,"rowsData");u([n.observable],c.prototype,"columnDefinitions");u([n.observable],c.prototype,"rowItemTemplate");u([n.observable],c.prototype,"cellItemTemplate");u([n.observable],c.prototype,"headerCellItemTemplate");u([n.observable],c.prototype,"focusRowIndex");u([n.observable],c.prototype,"focusColumnIndex");u([n.attr({attribute:"fixed-columns",converter:n.nullableNumberConverter})],c.prototype,"fixedColumns");u([n.observable],c.prototype,"defaultRowItemTemplate");u([n.observable],c.prototype,"rowElementTag");u([n.observable],c.prototype,"rowElements");u([n.observable],c.prototype,"slottedRowElements");u([n.attr({attribute:"selection-mode"})],c.prototype,"selectionMode");let K=c;function B(o){const e=o.tagFor(d);return n.html`
|
|
9
|
+
`;class f extends O.Localized(D.HostSemantics(n.VividElement)){constructor(){super(...arguments),this.cellType=r.DataGridCellTypes.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(E,this.handleFocusin),this.addEventListener(b,this.handleFocusout),this.addEventListener(g,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(E,this.handleFocusin),this.removeEventListener(b,this.handleFocusout),this.removeEventListener(g,this.handleKeydown),this.disconnectCellView()}handleFocusin(e){if(this.shadowRoot.querySelector(".base").classList.add("active"),!this.isActiveCell){switch(this.isActiveCell=!0,this.cellType){case r.DataGridCellTypes.columnHeader:if(this.columnDefinition!==null&&this.columnDefinition.headerCellInternalFocusQueue!==!0&&typeof this.columnDefinition.headerCellFocusTargetCallback=="function"){const t=this.columnDefinition.headerCellFocusTargetCallback(this);/* v8 ignore else -- @preserve */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);/* v8 ignore else -- @preserve */t!==null&&t.focus()}break}this.$emit("cell-focused",this)}}handleFocusout(e){this.shadowRoot.querySelector(".base").classList.remove("active");/* v8 ignore else -- @preserve */this!==document.activeElement&&!this.contains(document.activeElement)&&(this.isActiveCell=!1)}handleKeydown(e){if(!(e.defaultPrevented||this.columnDefinition===null||this.cellType===r.DataGridCellTypes.default&&this.columnDefinition.cellInternalFocusQueue!==!0||this.cellType===r.DataGridCellTypes.columnHeader&&this.columnDefinition.headerCellInternalFocusQueue!==!0))switch(e.key){case h.keyEnter:case h.keyFunction2:if(this.contains(document.activeElement)&&document.activeElement!==this)return;switch(this.cellType){case r.DataGridCellTypes.columnHeader:{if(this.columnDefinition.headerCellFocusTargetCallback!==void 0){const t=this.columnDefinition.headerCellFocusTargetCallback(this);/* v8 ignore else -- @preserve */t!==null&&t.focus(),e.preventDefault()}break}default:{if(this.columnDefinition.cellFocusTargetCallback!==void 0){const t=this.columnDefinition.cellFocusTargetCallback(this);/* v8 ignore else -- @preserve */t!==null&&t.focus(),e.preventDefault()}break}}break;case h.keyEscape:{/* v8 ignore else -- @preserve */this.contains(document.activeElement)&&document.activeElement!==this&&(this.focus(),e.preventDefault());break}}}updateCellView(){if(this.disconnectCellView(),this.columnDefinition!==null){switch(this.cellType){case r.DataGridCellTypes.columnHeader:this.columnDefinition.headerCellTemplate!==void 0?this.customCellView=this.columnDefinition.headerCellTemplate.render(this,this):this.customCellView=M.render(this,this);break;case r.DataGridCellTypes.rowHeader:case r.DataGridCellTypes.default:this.columnDefinition.cellTemplate!==void 0?this.customCellView=this.columnDefinition.cellTemplate.render(this,this):this.customCellView=P.render(this,this);break}this.columnDefinition?.sortable?this.columnDefinition.sortDirection?this.sortDirection=this.columnDefinition.sortDirection:this.sortDirection=r.DataGridCellSortStates.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}}v([n.attr({attribute:"cell-type"})],f.prototype,"cellType");v([n.attr({attribute:"grid-column"})],f.prototype,"gridColumn");v([n.observable],f.prototype,"rowData");v([n.observable],f.prototype,"columnDefinition");v([n.observable],f.prototype,"_selectable");v([n.attr({mode:"boolean"})],f.prototype,"selected");v([n.attr({attribute:"sort-direction"})],f.prototype,"sortDirection");v([n.observable],f.prototype,"_actionItemsSlottedContent");var U=Object.defineProperty,m=(l,e,t,i)=>{for(var o=void 0,a=l.length-1,s;a>=0;a--)(s=l[a])&&(o=s(e,t,o)||o);return o&&U(e,t,o),o};class d extends D.HostSemantics(n.VividElement){constructor(){super(...arguments),this.rowType=r.DataGridRowTypes.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();/* v8 ignore else -- @preserve */this.behaviorOrchestrator===null&&(this.updateItemTemplate(),this.behaviorOrchestrator=n.ViewBehaviorOrchestrator.create(this),this.$fastController.addBehavior(this.behaviorOrchestrator),this.behaviorOrchestrator.addBehaviorFactory(new F.RepeatDirective(w.normalizeBinding(e=>e.columnDefinitions),w.normalizeBinding(e=>e.activeCellItemTemplate),{positioning:!0}),this.appendChild(document.createComment("")))),this.addEventListener("cell-focused",this.handleCellFocus),this.addEventListener(b,this.handleFocusout),this.addEventListener(g,this.handleKeydown),this.updateRowStyle()}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("cell-focused",this.handleCellFocus),this.removeEventListener(b,this.handleFocusout),this.removeEventListener(g,this.handleKeydown)}handleFocusout(e){/* v8 ignore else -- @preserve */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 h.keyArrowLeft:t=Math.max(0,this.focusColumnIndex-1),this.cellElements[t].focus(),e.preventDefault();break;case h.keyArrowRight:t=Math.min(this.cellElements.length-1,this.focusColumnIndex+1),this.cellElements[t].focus(),e.preventDefault();break;case h.keyHome:e.ctrlKey||(this.cellElements[0].focus(),e.preventDefault());break;case h.keyEnd:e.ctrlKey||(this.cellElements[this.cellElements.length-1].focus(),e.preventDefault());break}}updateItemTemplate(){this.activeCellItemTemplate=this.rowType===r.DataGridRowTypes.default&&this.cellItemTemplate!==void 0?this.cellItemTemplate:this.rowType===r.DataGridRowTypes.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"}}m([n.attr({attribute:"grid-template-columns"})],d.prototype,"gridTemplateColumns");m([n.attr({attribute:"row-type"})],d.prototype,"rowType");m([n.observable],d.prototype,"rowData");m([n.observable],d.prototype,"columnDefinitions");m([n.observable],d.prototype,"cellItemTemplate");m([n.observable],d.prototype,"headerCellItemTemplate");m([n.observable],d.prototype,"rowIndex");m([n.observable],d.prototype,"activeCellItemTemplate");m([n.observable],d.prototype,"defaultCellItemTemplate");m([n.observable],d.prototype,"defaultHeaderCellItemTemplate");m([n.observable],d.prototype,"cellElements");m([n.observable],d.prototype,"_selectable");m([n.attr({mode:"boolean"})],d.prototype,"selected");var V=Object.defineProperty,u=(l,e,t,i)=>{for(var o=void 0,a=l.length-1,s;a>=0;a--)(s=l[a])&&(o=s(e,t,o)||o);return o&&V(e,t,o),o};const p={none:"none",singleRow:"single-row",multiRow:"multi-row",singleCell:"single-cell",multiCell:"multi-cell"},c=class _ extends n.VividElement{constructor(){super(),this.noTabbing=!1,this.generateHeader=r.GenerateHeaderOptions.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,i)=>{if(this.rowElements.length===0){this.focusRowIndex=0,this.focusColumnIndex=0;return}const o=Math.max(0,Math.min(this.rowElements.length-1,e)),s=this.rowElements[o].querySelectorAll('[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [data-vvd-component="data-grid-cell"]'),y=Math.max(0,Math.min(s.length-1,t)),k=s[y];i&&this.scrollHeight!==this.clientHeight&&(o<this.focusRowIndex&&this.scrollTop>0||o>this.focusRowIndex&&this.scrollTop<this.scrollHeight-this.clientHeight)&&k.scrollIntoView({block:"center",inline:"center"}),k.focus()},this.onChildListChange=(e,t)=>{/* v8 ignore else -- @preserve */e&&e.length&&(e.forEach(i=>{i.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,i)=>{const o=t;o.rowIndex=i,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:i,metaKey:o})=>{if(!(e.getAttribute("role")!=="gridcell"||e.getAttribute("cell-type")!=="default")){if(this.selectionMode===p.singleCell||this.selectionMode===p.multiCell){this.#i({target:e,ctrlKey:t,shiftKey:i,metaKey:o});return}(this.selectionMode===p.singleRow||this.selectionMode===p.multiRow)&&this.#n({target:e,ctrlKey:t,shiftKey:i,metaKey:o})}},this.#i=({target:e,ctrlKey:t,shiftKey:i,metaKey:o})=>{const a=e;if(this.selectionMode===p.multiCell&&(t||i||o))a.selected=!this.#r.includes(a);else{const s=a.selected;this._resetSelection(!0),a.selected=!s}},this.#n=({target:e,ctrlKey:t,shiftKey:i,metaKey:o})=>{const a=e.parentNode;if(this.selectionMode===p.multiRow&&(t||i||o))a.selected=!this.#a.includes(a);else{const s=a.selected;this._resetSelection(!0),a.selected=!s}},this.#o={handleChange(e,t){/* v8 ignore else -- @preserve */if(t==="columnDefinitions"){/* v8 ignore else -- @preserve */e.$fastController.isConnected&&e.toggleGeneratedHeader()}}},this._resetSelection=(e=!1)=>{const t=Array.from(this.querySelectorAll('[role="gridcell"], [cell-type="default"]')),i=Array.from(this.querySelectorAll('[role="row"], [row-type="default"]'));if(this.selectionMode===p.singleCell||this.selectionMode===p.multiCell){for(const o of t)o._selectable=!0,o.selected=e?!1:o.selected||!1;for(const o of i)o._selectable=!1,o.selected=!1}if(this.selectionMode===p.none)for(const o of[...t,...i])o._selectable=!1,o.selected=!1;if(this.selectionMode===p.singleRow||this.selectionMode===p.multiRow){for(const o of t)o._selectable=!1,o.selected=!1;for(const o of i)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(i=>{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(){/* v8 ignore if -- @preserve */this.$fastController.isConnected&&(this.updateRowIndexes(),this.fixedColumns&&this.fixedColumns>0&&this.applyFixedColumns())}rowsDataChanged(){this.columnDefinitions===null&&this.rowsData.length>0&&(this.columnDefinitions=_.generateColumns(this.rowsData[0])),this.$fastController.isConnected&&this.toggleGeneratedHeader()}columnDefinitionsChanged(){if(this.columnDefinitions===null){this.generatedGridTemplateColumns="";return}this.generatedGridTemplateColumns=_.generateTemplateColumns(this.columnDefinitions);/* v8 ignore if -- @preserve */this.$fastController.isConnected&&(this.columnDefinitionsStale=!0,this.queueRowIndexUpdate())}headerCellItemTemplateChanged(){/* v8 ignore if -- @preserve */this.$fastController.isConnected&&this.generatedHeader!==null&&(this.generatedHeader.headerCellItemTemplate=this.headerCellItemTemplate)}focusRowIndexChanged(){this.$fastController.isConnected&&this.queueFocusUpdate()}focusColumnIndexChanged(){this.$fastController.isConnected&&this.queueFocusUpdate()}fixedColumnsChanged(){/* v8 ignore if -- @preserve */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();/* v8 ignore else -- @preserve */this.rowItemTemplate===void 0&&(this.rowItemTemplate=this.defaultRowItemTemplate);/* v8 ignore else -- @preserve */this.behaviorOrchestrator===null&&(this.behaviorOrchestrator=n.ViewBehaviorOrchestrator.create(this),this.$fastController.addBehavior(this.behaviorOrchestrator),this.behaviorOrchestrator.addBehaviorFactory(new F.RepeatDirective(w.normalizeBinding(e=>e.rowsData),w.normalizeBinding(e=>e.rowItemTemplate),{positioning:!0}),this.appendChild(document.createComment("")))),this.toggleGeneratedHeader(),this.addEventListener("row-focused",this.handleRowFocus),this.addEventListener(I,this.handleFocus),this.addEventListener(g,this.handleKeydown),this.addEventListener(b,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(I,this.handleFocus),this.removeEventListener(g,this.handleKeydown),this.removeEventListener(b,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 i=this.rowElements.length-1,o=this.offsetHeight+this.scrollTop,a=this.rowElements[i];switch(e.key){case h.keyArrowUp:e.preventDefault(),this.focusOnCell(this.focusRowIndex-1,this.focusColumnIndex,!0);break;case h.keyArrowDown:e.preventDefault(),this.focusOnCell(this.focusRowIndex+1,this.focusColumnIndex,!0);break;case h.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 s=this.rowElements[t];if(s.offsetTop<this.scrollTop){this.scrollTop=s.offsetTop+s.clientHeight-this.clientHeight;break}}this.focusOnCell(t,this.focusColumnIndex,!1);break;case h.keyPageDown:if(e.preventDefault(),this.rowElements.length===0){this.focusOnCell(0,0,!1);break}if(this.focusRowIndex>=i||a.offsetTop+a.offsetHeight<=o){this.focusOnCell(i,this.focusColumnIndex,!1);return}for(t=this.focusRowIndex+1,t;t<=i;t++){const s=this.rowElements[t];if(s.offsetTop+s.offsetHeight>o){let y=0;this.generateHeader===r.GenerateHeaderOptions.sticky&&this.generatedHeader!==null&&(y=this.generatedHeader.clientHeight),this.scrollTop=s.offsetTop-y;break}}this.focusOnCell(t,this.focusColumnIndex,!1);break;case h.keyHome:{/* v8 ignore else -- @preserve */e.ctrlKey&&(e.preventDefault(),this.focusOnCell(0,0,!0));break}case h.keyEnd:{/* v8 ignore else -- @preserve */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!==r.GenerateHeaderOptions.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===r.GenerateHeaderOptions.sticky?r.DataGridRowTypes.stickyHeader:r.DataGridRowTypes.header;/* v8 ignore else -- @preserve */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.Updates.enqueue(this._resetSelection);return}this._resetSelection(!0)}#l;#t;#i;#n;#o;static generateColumns(e){return Object.keys(e).map((t,i)=>({columnDataKey:t,gridColumn:`${i}`}))}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((i,o)=>{/* v8 ignore else -- @preserve */if(o<t.length){const a=t[o];/* v8 ignore else -- @preserve */typeof a.setFixedPosition=="function"&&a.setFixedPosition(`${i}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 i=0;i<Math.min(this.fixedColumns,e.length);i++)this.fixedColumnsPositions.push(t),t+=e[i].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((i,o)=>{/* v8 ignore else -- @preserve */if(o<t.length){const a=t[o];/* v8 ignore else -- @preserve */typeof a.setFixedPosition=="function"&&a.setFixedPosition(void 0)}})}),this.fixedColumnsPositions=[]}};u([n.attr({attribute:"no-tabbing",mode:"boolean"})],c.prototype,"noTabbing");u([n.attr({attribute:"generate-header"})],c.prototype,"generateHeader");u([n.attr({attribute:"grid-template-columns"})],c.prototype,"gridTemplateColumns");u([n.observable],c.prototype,"rowsData");u([n.observable],c.prototype,"columnDefinitions");u([n.observable],c.prototype,"rowItemTemplate");u([n.observable],c.prototype,"cellItemTemplate");u([n.observable],c.prototype,"headerCellItemTemplate");u([n.observable],c.prototype,"focusRowIndex");u([n.observable],c.prototype,"focusColumnIndex");u([n.attr({attribute:"fixed-columns",converter:n.nullableNumberConverter})],c.prototype,"fixedColumns");u([n.observable],c.prototype,"defaultRowItemTemplate");u([n.observable],c.prototype,"rowElementTag");u([n.observable],c.prototype,"rowElements");u([n.observable],c.prototype,"slottedRowElements");u([n.attr({attribute:"selection-mode"})],c.prototype,"selectionMode");let K=c;function B(l){const e=l.tagFor(d);return n.html`
|
|
10
10
|
<${e}
|
|
11
11
|
:rowData="${t=>t}"
|
|
12
12
|
:cellItemTemplate="${(t,i)=>i.parent.cellItemTemplate}"
|
|
13
13
|
:headerCellItemTemplate="${(t,i)=>i.parent.headerCellItemTemplate}"
|
|
14
14
|
></${e}>
|
|
15
|
-
`}function Q(
|
|
15
|
+
`}function Q(l){return l.selectionMode===void 0||l.selectionMode===p.none?null:l.selectionMode.includes("multi")?"true":"false"}function j(l){if(l.columnDefinitions===null){const e=l.querySelector('[cell-type="columnheader"]')?.parentElement;if(l.generateHeader===r.GenerateHeaderOptions.default&&(e?.getAttribute("row-type")===r.DataGridRowTypes.header||e?.getAttribute("row-type")===r.DataGridRowTypes.stickyHeader))return;if(e){const t=l.generateHeader===r.GenerateHeaderOptions.sticky?r.DataGridRowTypes.stickyHeader:r.DataGridRowTypes.header;e.setAttribute("row-type",t)}}}function N(l,{event:e}){e.stopPropagation()}const W=l=>{const e=B(l),t=l.tagFor(d,!0);return n.html`
|
|
16
16
|
<template
|
|
17
17
|
aria-multiselectable="${Q}"
|
|
18
18
|
role="grid"
|
|
@@ -20,14 +20,14 @@
|
|
|
20
20
|
@sort="${N}"
|
|
21
21
|
:rowElementTag="${()=>t}"
|
|
22
22
|
:defaultRowItemTemplate="${e}"
|
|
23
|
-
${R.children({property:"rowElements",filter:
|
|
23
|
+
${R.children({property:"rowElements",filter:C.elements("[role=row],[data-vvd-component=data-grid-row]")})}
|
|
24
24
|
>
|
|
25
25
|
<div class="base">
|
|
26
26
|
${j}
|
|
27
|
-
<slot ${
|
|
27
|
+
<slot ${C.slotted("slottedRowElements")}></slot>
|
|
28
28
|
</div>
|
|
29
29
|
</template>
|
|
30
|
-
`};function J(
|
|
30
|
+
`};function J(l){return l._selectable&&l.selected?"true":l._selectable&&!l.selected?"false":null}function X(l){const e=l.tagFor(f);return n.html`
|
|
31
31
|
<${e}
|
|
32
32
|
cell-type="${t=>t.isRowHeader?"rowheader":void 0}"
|
|
33
33
|
grid-column="${(t,i)=>i.index+1}"
|
|
@@ -35,61 +35,67 @@
|
|
|
35
35
|
:columnDefinition="${t=>t}"
|
|
36
36
|
selected="${(t,i)=>i.parent.ariaSelected==="true"?!0:null}"
|
|
37
37
|
></${e}>
|
|
38
|
-
`}function Y(
|
|
38
|
+
`}function Y(l){const e=l.tagFor(f);return n.html`
|
|
39
39
|
<${e}
|
|
40
40
|
cell-type="columnheader"
|
|
41
41
|
grid-column="${(t,i)=>i.index+1}"
|
|
42
42
|
:columnDefinition="${t=>t}"
|
|
43
43
|
></${e}>
|
|
44
|
-
`}const Z=
|
|
44
|
+
`}const Z=l=>{const e=X(l),t=Y(l),i=o=>H.classNames("base",["selected",!!o.selected]);return n.html`
|
|
45
45
|
<template
|
|
46
46
|
${D.applyHostSemantics({role:"row",ariaSelected:J})}
|
|
47
|
-
class="${
|
|
47
|
+
class="${o=>o.rowType!=="default"?o.rowType:""}"
|
|
48
48
|
:defaultCellItemTemplate="${e}"
|
|
49
49
|
:defaultHeaderCellItemTemplate="${t}"
|
|
50
|
-
${R.children({property:"cellElements",filter:
|
|
50
|
+
${R.children({property:"cellElements",filter:C.elements('[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],[data-vvd-component="data-grid-cell"]')})}
|
|
51
51
|
>
|
|
52
52
|
<div
|
|
53
53
|
class="${i}"
|
|
54
|
-
style="grid-template-columns: ${
|
|
54
|
+
style="grid-template-columns: ${o=>o.gridTemplateColumns};"
|
|
55
55
|
>
|
|
56
|
-
<slot ${
|
|
56
|
+
<slot ${C.slotted("slottedCellElements")}></slot>
|
|
57
57
|
</div>
|
|
58
58
|
</template>
|
|
59
|
-
`};function x(
|
|
59
|
+
`};function x(l){return l.cellType==="columnheader"&&l.sortDirection!==void 0&&l.sortDirection!==r.DataGridCellSortStates.other}function ee(l){return l.sortDirection===r.DataGridCellSortStates.ascending?"sort-asc-solid":l.sortDirection===r.DataGridCellSortStates.descending?"sort-desc-solid":"sort-solid"}function te(l){return l._selectable&&l.selected?"true":l._selectable&&!l.selected?"false":null}function oe(l){const e=l.tagFor(S.Icon);return n.html`
|
|
60
60
|
${T.when(x,n.html`
|
|
61
61
|
<${e} class="header-icon" name="${ee}"></${e}>
|
|
62
62
|
`)}
|
|
63
|
-
`}function le(
|
|
63
|
+
`}function le(l){return l.cellType===r.DataGridCellTypes.columnHeader&&l.sortDirection!==void 0}function G(l){return l.sortDirection??r.DataGridCellSortStates.none}function ie(l){const e=G(l);return l.locale.dataGrid.cell.sortStatus?.[e]}function ne(l){const e=G(l);return l.locale.dataGrid.cell.sortInstruction?.[e]}function ae(l){return[ie(l),ne(l)].filter(e=>!!e).join(" ").trim()}function re(l,e){if(e.key===h.keyEnter||e.key===h.keySpace){if(e.target.closest('[slot="action-items"]'))return!0;l._handleInteraction()}return!0}function se(l,e){return e.target.closest('[slot="action-items"]')||l._handleInteraction(),!0}const ce=l=>{const e=l.tagFor($.VisuallyHidden),t=({selected:i,_actionItemsSlottedContent:o})=>H.classNames("base",["selected",!!i],["has-action-items",!!o?.length]);return n.html`
|
|
64
64
|
<template
|
|
65
65
|
tabindex="-1"
|
|
66
|
-
${D.applyHostSemantics({role:i=>
|
|
67
|
-
@click="${i=>i.
|
|
68
|
-
@keydown="${(i,
|
|
66
|
+
${D.applyHostSemantics({role:i=>r.DataGridCellRole[i.cellType]??r.DataGridCellRole.default,ariaSelected:te,ariaSort:i=>i.sortDirection??null})}
|
|
67
|
+
@click="${(i,o)=>se(i,o.event)}"
|
|
68
|
+
@keydown="${(i,o)=>re(i,o.event)}"
|
|
69
69
|
>
|
|
70
|
-
<div
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
70
|
+
<div class="${t}">
|
|
71
|
+
<div
|
|
72
|
+
class="content"
|
|
73
|
+
role="${i=>x(i)?"button":void 0}"
|
|
74
|
+
>
|
|
75
|
+
${i=>i.selected?n.html`<${e}
|
|
75
76
|
data-announcement="selection"
|
|
76
77
|
>
|
|
77
|
-
${
|
|
78
|
+
${o=>o.locale.dataGrid.cell.selected}
|
|
78
79
|
</${e}>`:null}
|
|
79
|
-
|
|
80
|
-
|
|
80
|
+
<slot></slot>
|
|
81
|
+
${T.when(x,n.html`<${e}
|
|
81
82
|
data-announcement="button-role"
|
|
82
83
|
>
|
|
83
84
|
${i=>i.locale.dataGrid.cell.button}
|
|
84
85
|
</${e}>
|
|
85
|
-
|
|
86
|
-
|
|
86
|
+
`)}
|
|
87
|
+
${T.when(le,n.html`<${e}
|
|
87
88
|
aria-live="polite"
|
|
88
89
|
data-announcement="sort-state"
|
|
89
90
|
>
|
|
90
|
-
${
|
|
91
|
+
${ae}
|
|
91
92
|
</${e}>`)}
|
|
92
|
-
|
|
93
|
+
${i=>oe(l)}
|
|
94
|
+
</div>
|
|
95
|
+
<slot
|
|
96
|
+
name="action-items"
|
|
97
|
+
${C.slotted("_actionItemsSlottedContent")}
|
|
98
|
+
></slot>
|
|
93
99
|
</div>
|
|
94
100
|
</template>
|
|
95
|
-
`},
|
|
101
|
+
`},de=n.defineVividComponent("data-grid-cell",f,ce,[S.iconDefinition,$.visuallyHiddenDefinition],{styles:q}),ue=n.defineVividComponent("data-grid-row",d,Z,[de],{styles:A}),he=n.defineVividComponent("data-grid",K,W,[ue],{styles:z}),me=n.createRegisterFunction(he);me();
|