@vonage/vivid 5.19.0 → 5.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/accordion/definition.cjs +1 -1
- package/accordion/definition.js +1 -1
- package/accordion/index.cjs +2 -2
- package/accordion/index.js +2 -2
- package/accordion-item/definition.cjs +1 -1
- package/accordion-item/definition.js +1 -1
- package/action-group/definition.cjs +1 -1
- package/action-group/definition.js +1 -1
- package/action-group/index.cjs +2 -2
- package/action-group/index.js +2 -2
- package/alert/index.cjs +5 -5
- package/alert/index.js +8 -8
- package/audio-player/index.cjs +10 -10
- package/audio-player/index.js +28 -28
- package/avatar/index.cjs +7 -7
- package/avatar/index.js +14 -14
- package/banner/index.cjs +5 -5
- package/banner/index.js +9 -9
- package/breadcrumb/index.cjs +2 -2
- package/breadcrumb/index.js +3 -3
- package/breadcrumb-item/index.cjs +5 -5
- package/breadcrumb-item/index.js +1 -1
- package/bundled/affix.cjs +2 -2
- package/bundled/affix.js +11 -11
- package/bundled/anchored.cjs +1 -1
- package/bundled/anchored.js +6 -6
- package/bundled/aria-binding-directive.cjs +1 -1
- package/bundled/aria-binding-directive.js +88 -16
- package/bundled/base-color-picker.cjs +3 -3
- package/bundled/base-color-picker.js +5 -5
- package/bundled/base-progress.cjs +1 -1
- package/bundled/base-progress.js +3 -3
- package/bundled/breadcrumb-item.cjs +1 -1
- package/bundled/breadcrumb-item.js +3 -3
- package/bundled/button.cjs +1 -1
- package/bundled/button.js +3 -3
- package/bundled/calendar-event.cjs +1 -1
- package/bundled/calendar-event.js +4 -4
- package/bundled/calendar-picker.template.cjs +23 -24
- package/bundled/calendar-picker.template.js +35 -36
- package/bundled/char-count.cjs +2 -2
- package/bundled/char-count.js +8 -8
- package/bundled/children.cjs +1 -1
- package/bundled/children.js +11 -13
- package/bundled/definition.cjs +1 -1
- package/bundled/definition.js +2 -2
- package/bundled/definition10.cjs +3 -3
- package/bundled/definition10.js +5 -5
- package/bundled/definition11.cjs +2 -2
- package/bundled/definition11.js +7 -7
- package/bundled/definition12.cjs +15 -16
- package/bundled/definition12.js +22 -22
- package/bundled/definition13.cjs +3 -3
- package/bundled/definition13.js +5 -5
- package/bundled/definition14.cjs +2 -2
- package/bundled/definition14.js +2 -2
- package/bundled/definition15.cjs +7 -8
- package/bundled/definition15.js +14 -14
- package/bundled/definition16.cjs +3 -3
- package/bundled/definition16.js +8 -8
- package/bundled/definition17.cjs +7 -7
- package/bundled/definition17.js +13 -13
- package/bundled/definition18.cjs +18 -18
- package/bundled/definition18.js +36 -36
- package/bundled/definition19.cjs +2 -2
- package/bundled/definition19.js +1 -1
- package/bundled/definition2.cjs +10 -9
- package/bundled/definition2.js +24 -24
- package/bundled/definition20.cjs +19 -14
- package/bundled/definition20.js +51 -39
- package/bundled/definition21.cjs +6 -6
- package/bundled/definition21.js +18 -18
- package/bundled/definition22.cjs +3 -3
- package/bundled/definition22.js +7 -7
- package/bundled/definition23.cjs +4 -4
- package/bundled/definition23.js +8 -8
- package/bundled/definition24.cjs +8 -8
- package/bundled/definition24.js +17 -17
- package/bundled/definition3.cjs +1 -1
- package/bundled/definition3.js +5 -5
- package/bundled/definition4.cjs +9 -9
- package/bundled/definition4.js +16 -16
- package/bundled/definition5.cjs +4 -4
- package/bundled/definition5.js +5 -5
- package/bundled/definition6.cjs +6 -6
- package/bundled/definition6.js +21 -21
- package/bundled/definition7.cjs +2 -2
- package/bundled/definition7.js +4 -4
- package/bundled/definition8.cjs +4 -4
- package/bundled/definition8.js +7 -7
- package/bundled/definition9.cjs +10 -6
- package/bundled/definition9.js +48 -34
- package/bundled/delegates-aria.cjs +1 -1
- package/bundled/delegates-aria.js +20 -9
- package/bundled/divider.cjs +1 -1
- package/bundled/divider.js +3 -3
- package/bundled/form-associated.cjs +1 -1
- package/bundled/form-associated.js +6 -6
- package/bundled/form-element.cjs +1 -1
- package/bundled/form-element.js +1 -1
- package/bundled/host-semantics.cjs +1 -1
- package/bundled/host-semantics.js +2 -1
- package/bundled/kbd-shortcut.cjs +1 -0
- package/bundled/kbd-shortcut.js +14 -0
- package/bundled/linkable.cjs +2 -2
- package/bundled/linkable.js +5 -5
- package/bundled/listbox.cjs +1 -1
- package/bundled/listbox.js +4 -4
- package/bundled/localized.cjs +1 -1
- package/bundled/localized.js +3 -2
- package/bundled/mixins.cjs +16 -16
- package/bundled/mixins.js +39 -105
- package/bundled/picker-field.template.cjs +6 -6
- package/bundled/picker-field.template.js +15 -15
- package/bundled/platform.cjs +1 -0
- package/bundled/platform.js +9 -0
- package/bundled/ref.cjs +1 -1
- package/bundled/ref.js +2 -2
- package/bundled/render-in-light-dom.cjs +1 -0
- package/bundled/render-in-light-dom.js +57 -0
- package/bundled/repeat.cjs +1 -1
- package/bundled/repeat.js +117 -107
- package/bundled/slider.template.cjs +3 -3
- package/bundled/slider.template.js +1 -1
- package/bundled/slotted.cjs +1 -1
- package/bundled/slotted.js +2 -2
- package/bundled/time-selection-picker.template.cjs +4 -4
- package/bundled/time-selection-picker.template.js +18 -18
- package/bundled/vivid-element.cjs +3 -3
- package/bundled/vivid-element.js +626 -550
- package/bundled/when.cjs +1 -1
- package/bundled/when.js +2 -2
- package/bundled/with-contextual-help.cjs +1 -1
- package/bundled/with-contextual-help.js +1 -1
- package/bundled/with-error-text.cjs +1 -1
- package/bundled/with-error-text.js +1 -1
- package/bundled/with-success-text.cjs +1 -1
- package/bundled/with-success-text.js +1 -1
- package/calendar/index.cjs +8 -8
- package/calendar/index.js +9 -9
- package/calendar-event/index.cjs +4 -4
- package/calendar-event/index.js +1 -1
- package/card/index.cjs +24 -25
- package/card/index.js +29 -30
- package/color-picker/index.cjs +26 -26
- package/color-picker/index.js +90 -90
- package/combobox/index.cjs +13 -13
- package/combobox/index.js +22 -22
- package/country-group/index.cjs +4 -4
- package/country-group/index.js +3 -3
- package/custom-elements.json +940 -112
- package/data-grid/index.cjs +34 -34
- package/data-grid/index.js +37 -38
- package/date-picker/definition.cjs +1 -1
- package/date-picker/definition.js +1 -1
- package/date-picker/index.cjs +1 -1
- package/date-picker/index.js +2 -2
- package/date-range-picker/definition.cjs +1 -1
- package/date-range-picker/definition.js +1 -1
- package/date-range-picker/index.cjs +1 -1
- package/date-range-picker/index.js +4 -4
- package/date-time-picker/definition.cjs +1 -1
- package/date-time-picker/definition.js +1 -1
- package/date-time-picker/index.cjs +2 -2
- package/date-time-picker/index.js +6 -6
- package/dial-pad/definition.cjs +1 -1
- package/dial-pad/definition.js +1 -1
- package/dial-pad/index.cjs +8 -8
- package/dial-pad/index.js +15 -15
- package/dialog/definition.cjs +1 -1
- package/dialog/definition.js +1 -1
- package/dialog/index.cjs +16 -17
- package/dialog/index.js +29 -27
- package/divider/definition.cjs +1 -1
- package/divider/definition.js +1 -1
- package/empty-state/definition.cjs +1 -1
- package/empty-state/definition.js +1 -1
- package/empty-state/index.cjs +5 -5
- package/empty-state/index.js +9 -9
- package/fab/definition.cjs +1 -1
- package/fab/definition.js +1 -1
- package/fab/index.cjs +2 -2
- package/fab/index.js +6 -6
- package/file-picker/definition.cjs +1 -1
- package/file-picker/definition.js +1 -1
- package/file-picker/index.cjs +9 -10
- package/file-picker/index.js +21 -22
- package/flag/index.cjs +3 -3
- package/flag/index.js +7 -7
- package/header/definition.cjs +1 -1
- package/header/definition.js +1 -1
- package/header/index.cjs +2 -2
- package/header/index.js +8 -8
- package/icon/definition.cjs +1 -1
- package/icon/definition.js +1 -1
- package/index.cjs +184 -172
- package/index.js +52 -49
- package/kbd-key/definition.cjs +5 -0
- package/kbd-key/definition.js +2 -0
- package/kbd-key/index.cjs +5 -0
- package/kbd-key/index.js +65 -0
- package/kbd-shortcut/definition.cjs +5 -0
- package/kbd-shortcut/definition.js +2 -0
- package/kbd-shortcut/index.cjs +3 -0
- package/kbd-shortcut/index.js +27 -0
- package/layout/definition.cjs +1 -1
- package/layout/definition.js +1 -1
- package/layout/index.cjs +2 -2
- package/layout/index.js +2 -2
- package/lib/accordion-item/accordion-item.d.ts +18 -1
- package/lib/action-group/action-group.d.ts +18 -1
- package/lib/alert/alert.d.ts +36 -2
- package/lib/audio-player/audio-player.d.ts +18 -1
- package/lib/avatar/avatar.d.ts +18 -1
- package/lib/badge/badge.d.ts +18 -1
- package/lib/banner/banner.d.ts +54 -3
- package/lib/breadcrumb/breadcrumb.d.ts +18 -1
- package/lib/breadcrumb-item/breadcrumb-item.d.ts +18 -1
- package/lib/button/button.d.ts +54 -3
- package/lib/calendar-event/calendar-event.d.ts +18 -1
- package/lib/card/card.d.ts +18 -1
- package/lib/checkbox/checkbox.d.ts +107 -5
- package/lib/color-picker/color-picker.d.ts +126 -7
- package/lib/combobox/combobox.d.ts +124 -5
- package/lib/components.d.ts +4 -1
- package/lib/country-group/country-group.d.ts +36 -2
- package/lib/data-grid/data-grid-cell.d.ts +36 -2
- package/lib/data-grid/data-grid-row.d.ts +18 -1
- package/lib/date-picker/date-picker.d.ts +140 -4
- package/lib/date-range-picker/date-range-picker.d.ts +70 -2
- package/lib/date-time-picker/date-time-picker.d.ts +140 -4
- package/lib/dial-pad/dial-pad.d.ts +18 -1
- package/lib/dialog/dialog.d.ts +36 -2
- package/lib/divider/divider.d.ts +18 -1
- package/lib/fab/fab.d.ts +18 -1
- package/lib/file-picker/file-picker.d.ts +124 -5
- package/lib/header/header.d.ts +18 -1
- package/lib/icon/icon.template.d.ts +1 -2
- package/lib/kbd-key/definition.d.ts +4 -0
- package/lib/kbd-key/index.d.ts +1 -0
- package/lib/kbd-key/kbd-key.d.ts +18 -0
- package/lib/kbd-key/kbd-key.template.d.ts +4 -0
- package/lib/kbd-shortcut/definition.d.ts +3 -0
- package/lib/kbd-shortcut/index.d.ts +1 -0
- package/lib/kbd-shortcut/kbd-shortcut.d.ts +4 -0
- package/lib/kbd-shortcut/kbd-shortcut.template.d.ts +4 -0
- package/lib/menu/menu.d.ts +35 -1
- package/lib/menu-item/menu-item.d.ts +463 -2
- package/lib/nav/nav.d.ts +18 -1
- package/lib/nav-disclosure/nav-disclosure.d.ts +36 -2
- package/lib/nav-item/nav-item.d.ts +36 -2
- package/lib/note/note.d.ts +18 -1
- package/lib/number-field/number-field.d.ts +160 -7
- package/lib/option/option.d.ts +36 -2
- package/lib/pagination/pagination.d.ts +18 -1
- package/lib/platform-switch/definition.d.ts +3 -0
- package/lib/platform-switch/index.d.ts +1 -0
- package/lib/platform-switch/platform-switch.d.ts +4 -0
- package/lib/platform-switch/platform-switch.template.d.ts +4 -0
- package/lib/popover/popover.d.ts +36 -2
- package/lib/progress/progress.d.ts +18 -1
- package/lib/progress-ring/progress-ring.d.ts +18 -1
- package/lib/radio/radio.d.ts +53 -2
- package/lib/radio-group/radio-group.d.ts +18 -1
- package/lib/range-slider/range-slider.d.ts +52 -1
- package/lib/rich-text-editor/locale.d.ts +1 -0
- package/lib/rich-text-editor/popover.d.ts +1 -0
- package/lib/rich-text-editor/rich-text-editor.d.ts +17 -0
- package/lib/rich-text-editor/rte/utils/ui.d.ts +1 -0
- package/lib/searchable-select/option-tag.d.ts +18 -1
- package/lib/searchable-select/searchable-select.d.ts +160 -7
- package/lib/select/select.d.ts +160 -7
- package/lib/selectable-box/selectable-box.d.ts +18 -1
- package/lib/simple-color-picker/simple-color-picker.d.ts +35 -1
- package/lib/slider/slider.d.ts +53 -2
- package/lib/split-button/split-button.d.ts +54 -3
- package/lib/status/status.d.ts +18 -1
- package/lib/switch/switch.d.ts +36 -2
- package/lib/tab/tab.d.ts +54 -3
- package/lib/tab-panel/tab-panel.d.ts +18 -1
- package/lib/table/table-cell.d.ts +18 -1
- package/lib/table/table-header-cell.d.ts +18 -1
- package/lib/table/table-row.d.ts +18 -1
- package/lib/table/table-sorting-button.d.ts +18 -1
- package/lib/tag/tag.d.ts +54 -3
- package/lib/tag-group/tag-group.d.ts +18 -1
- package/lib/tag-name-map.d.ts +4 -1
- package/lib/text-area/text-area.d.ts +142 -6
- package/lib/text-field/text-field.d.ts +160 -7
- package/lib/time-picker/time-picker.d.ts +70 -2
- package/lib/toggletip/toggletip.d.ts +35 -1
- package/lib/tooltip/tooltip.d.ts +444 -0
- package/lib/tree-item/tree-item.d.ts +36 -2
- package/lib/tree-view/tree-view.d.ts +18 -1
- package/lib/video-player/video-player.d.ts +18 -1
- package/locales/de-DE.cjs +1 -0
- package/locales/de-DE.js +1 -0
- package/locales/en-GB.cjs +1 -0
- package/locales/en-GB.js +1 -0
- package/locales/en-US.cjs +1 -0
- package/locales/en-US.js +1 -0
- package/locales/ja-JP.cjs +1 -0
- package/locales/ja-JP.js +1 -0
- package/locales/zh-CN.cjs +1 -0
- package/locales/zh-CN.js +1 -0
- package/nav/definition.cjs +1 -1
- package/nav/definition.js +1 -1
- package/nav/index.cjs +2 -2
- package/nav/index.js +2 -2
- package/nav-disclosure/definition.cjs +1 -1
- package/nav-disclosure/definition.js +1 -1
- package/nav-disclosure/index.cjs +3 -4
- package/nav-disclosure/index.js +11 -11
- package/nav-item/definition.cjs +1 -1
- package/nav-item/definition.js +1 -1
- package/nav-item/index.cjs +2 -2
- package/nav-item/index.js +6 -6
- package/note/definition.cjs +1 -1
- package/note/definition.js +1 -1
- package/note/index.cjs +2 -2
- package/note/index.js +7 -7
- package/number-field/definition.cjs +1 -1
- package/number-field/definition.js +1 -1
- package/number-field/index.cjs +8 -9
- package/number-field/index.js +16 -17
- package/package.json +8 -8
- package/pagination/definition.cjs +1 -1
- package/pagination/definition.js +1 -1
- package/pagination/index.cjs +9 -9
- package/pagination/index.js +16 -16
- package/platform-switch/definition.cjs +5 -0
- package/platform-switch/definition.js +2 -0
- package/platform-switch/index.cjs +1 -0
- package/platform-switch/index.js +28 -0
- package/popover/definition.cjs +1 -1
- package/popover/definition.js +1 -1
- package/popover/index.cjs +6 -6
- package/popover/index.js +12 -12
- package/progress/definition.cjs +1 -1
- package/progress/definition.js +1 -1
- package/progress/index.cjs +4 -4
- package/progress/index.js +5 -5
- package/progress-ring/definition.cjs +1 -1
- package/progress-ring/definition.js +1 -1
- package/radio/definition.cjs +1 -1
- package/radio/definition.js +1 -1
- package/radio-group/definition.cjs +1 -1
- package/radio-group/definition.js +1 -1
- package/radio-group/index.cjs +5 -8
- package/radio-group/index.js +16 -16
- package/range-slider/definition.cjs +1 -1
- package/range-slider/definition.js +1 -1
- package/range-slider/index.cjs +5 -5
- package/range-slider/index.js +9 -9
- package/rich-text-editor/definition.cjs +1 -1
- package/rich-text-editor/definition.js +1 -1
- package/rich-text-editor/index.cjs +8 -6
- package/rich-text-editor/index.js +101 -78
- package/rich-text-view/definition.cjs +1 -1
- package/rich-text-view/definition.js +1 -1
- package/rich-text-view/index.cjs +1 -1
- package/rich-text-view/index.js +3 -3
- package/searchable-select/definition.cjs +1 -1
- package/searchable-select/definition.js +1 -1
- package/searchable-select/index.cjs +38 -40
- package/searchable-select/index.js +64 -64
- package/select/definition.cjs +1 -1
- package/select/definition.js +1 -1
- package/selectable-box/definition.cjs +1 -1
- package/selectable-box/definition.js +1 -1
- package/selectable-box/index.cjs +4 -4
- package/selectable-box/index.js +13 -13
- package/shared/aria/aria-binding-directive.d.ts +4 -4
- package/shared/aria/aria-mixin.d.ts +21 -3
- package/shared/aria/delegates-aria.d.ts +18 -1
- package/shared/aria/host-semantics.d.ts +18 -1
- package/shared/aria/idrefs-controller.d.ts +17 -0
- package/shared/color-picker/base-color-picker.d.ts +18 -1
- package/shared/feedback/feedback-message.d.ts +18 -1
- package/shared/feedback/mixins.d.ts +36 -2
- package/shared/foundation/button/button.d.ts +35 -1
- package/shared/foundation/form-associated/form-associated.d.ts +35 -1
- package/shared/foundation/vivid-element/vivid-element.d.ts +375 -0
- package/shared/framework/reactive-controller.d.ts +373 -0
- package/shared/patterns/affix.d.ts +36 -2
- package/shared/patterns/anchored.d.ts +34 -0
- package/shared/patterns/char-count/char-count.d.ts +18 -1
- package/shared/patterns/form-elements/form-element.d.ts +17 -0
- package/shared/patterns/form-elements/with-contextual-help.d.ts +18 -1
- package/shared/patterns/form-elements/with-error-text.d.ts +18 -1
- package/shared/patterns/form-elements/with-success-text.d.ts +18 -1
- package/shared/patterns/index.d.ts +1 -0
- package/shared/patterns/kbd-shortcut.d.ts +431 -0
- package/shared/patterns/linkable.d.ts +18 -1
- package/shared/patterns/localized.d.ts +35 -1
- package/shared/patterns/trapped-focus.d.ts +18 -1
- package/shared/picker-field/mixins/calendar-picker.d.ts +35 -1
- package/shared/picker-field/mixins/calendar-picker.template.d.ts +35 -1
- package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.d.ts +18 -1
- package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +35 -1
- package/shared/picker-field/mixins/single-date-picker.d.ts +35 -1
- package/shared/picker-field/mixins/single-value-picker.d.ts +35 -1
- package/shared/picker-field/mixins/time-selection-picker.d.ts +35 -1
- package/shared/picker-field/mixins/time-selection-picker.template.d.ts +70 -2
- package/shared/picker-field/picker-field.d.ts +124 -5
- package/shared/templating/render-in-light-dom.d.ts +7 -20
- package/shared/utils/platform.d.ts +1 -0
- package/side-drawer/definition.cjs +1 -1
- package/side-drawer/definition.js +1 -1
- package/side-drawer/index.cjs +3 -3
- package/side-drawer/index.js +3 -3
- package/simple-color-picker/definition.cjs +1 -1
- package/simple-color-picker/definition.js +1 -1
- package/simple-color-picker/index.cjs +2 -2
- package/simple-color-picker/index.js +6 -6
- package/split-button/definition.cjs +1 -1
- package/split-button/definition.js +1 -1
- package/split-button/index.cjs +5 -6
- package/split-button/index.js +8 -8
- package/status/definition.cjs +1 -1
- package/status/definition.js +1 -1
- package/status/index.cjs +4 -4
- package/status/index.js +9 -9
- package/styles/core/all.css +24 -2
- package/styles/core/typography.css +24 -2
- package/styles/fonts/spezia-variable.css +6 -0
- package/styles/tokens/theme-dark.css +2 -0
- package/styles/tokens/theme-light.css +2 -0
- package/switch/definition.cjs +1 -1
- package/switch/definition.js +1 -1
- package/switch/index.cjs +3 -3
- package/switch/index.js +4 -4
- package/tab/definition.cjs +1 -1
- package/tab/definition.js +1 -1
- package/tab-panel/definition.cjs +1 -1
- package/tab-panel/definition.js +1 -1
- package/table/definition.cjs +1 -1
- package/table/definition.js +1 -1
- package/table/index.cjs +9 -9
- package/table/index.js +19 -19
- package/tabs/definition.cjs +1 -1
- package/tabs/definition.js +1 -1
- package/tabs/index.cjs +8 -8
- package/tabs/index.js +14 -14
- package/tag/definition.cjs +1 -1
- package/tag/definition.js +1 -1
- package/tag/index.cjs +8 -8
- package/tag/index.js +11 -11
- package/tag-group/definition.cjs +1 -1
- package/tag-group/definition.js +1 -1
- package/tag-group/index.cjs +2 -2
- package/tag-group/index.js +2 -2
- package/text-area/definition.cjs +1 -1
- package/text-area/definition.js +1 -1
- package/text-area/index.cjs +8 -9
- package/text-area/index.js +25 -26
- package/time-picker/definition.cjs +1 -1
- package/time-picker/definition.js +1 -1
- package/time-picker/index.cjs +1 -1
- package/time-picker/index.js +1 -1
- package/tree-item/definition.cjs +1 -1
- package/tree-item/definition.js +1 -1
- package/tree-view/definition.cjs +1 -1
- package/tree-view/definition.js +1 -1
- package/tree-view/index.cjs +4 -4
- package/tree-view/index.js +7 -7
- package/unbundled/affix.cjs +1 -1
- package/unbundled/affix.js +1 -1
- package/unbundled/aria-binding-directive.cjs +112 -2
- package/unbundled/aria-binding-directive.js +108 -4
- package/unbundled/calendar-picker.template.cjs +8 -10
- package/unbundled/calendar-picker.template.js +8 -10
- package/unbundled/char-count.cjs +1 -1
- package/unbundled/char-count.js +1 -1
- package/unbundled/definition.cjs +91 -17
- package/unbundled/definition.js +88 -14
- package/unbundled/definition10.js +1 -1
- package/unbundled/definition11.js +1 -1
- package/unbundled/definition12.cjs +15 -2
- package/unbundled/definition12.js +17 -4
- package/unbundled/definition13.js +1 -1
- package/unbundled/definition14.js +1 -1
- package/unbundled/definition15.cjs +1 -1
- package/unbundled/definition15.js +2 -2
- package/unbundled/definition16.cjs +1 -1
- package/unbundled/definition16.js +2 -2
- package/unbundled/definition17.cjs +1 -1
- package/unbundled/definition17.js +2 -2
- package/unbundled/definition18.cjs +1 -1
- package/unbundled/definition18.js +2 -2
- package/unbundled/definition19.js +1 -1
- package/unbundled/definition2.cjs +96 -77
- package/unbundled/definition2.js +94 -75
- package/unbundled/definition20.js +1 -1
- package/unbundled/definition21.js +1 -1
- package/unbundled/definition22.cjs +2 -3
- package/unbundled/definition22.js +3 -4
- package/unbundled/definition23.cjs +3 -3
- package/unbundled/definition23.js +5 -5
- package/unbundled/definition24.js +1 -1
- package/unbundled/definition25.cjs +1 -1
- package/unbundled/definition25.js +2 -2
- package/unbundled/definition26.cjs +8 -8
- package/unbundled/definition26.js +6 -6
- package/unbundled/definition27.cjs +26 -12
- package/unbundled/definition27.js +28 -14
- package/unbundled/definition28.cjs +1 -1
- package/unbundled/definition28.js +3 -3
- package/unbundled/definition29.cjs +1 -1
- package/unbundled/definition29.js +2 -2
- package/unbundled/definition3.cjs +154 -95
- package/unbundled/definition3.js +146 -93
- package/unbundled/definition30.cjs +1 -1
- package/unbundled/definition30.js +3 -3
- package/unbundled/definition31.cjs +1 -1
- package/unbundled/definition31.js +2 -2
- package/unbundled/definition32.js +1 -1
- package/unbundled/definition33.cjs +1 -1
- package/unbundled/definition33.js +2 -2
- package/unbundled/definition34.cjs +103 -65
- package/unbundled/definition34.js +102 -64
- package/unbundled/definition35.cjs +26 -326
- package/unbundled/definition35.js +24 -247
- package/unbundled/definition36.cjs +131 -25
- package/unbundled/definition36.js +124 -23
- package/unbundled/definition37.cjs +326 -51
- package/unbundled/definition37.js +324 -49
- package/unbundled/definition38.cjs +137 -317
- package/unbundled/definition38.js +135 -315
- package/unbundled/definition39.cjs +337 -173
- package/unbundled/definition39.js +334 -170
- package/unbundled/definition4.cjs +34 -159
- package/unbundled/definition4.js +25 -151
- package/unbundled/definition40.cjs +234 -339
- package/unbundled/definition40.js +230 -335
- package/unbundled/definition41.cjs +48 -271
- package/unbundled/definition41.js +44 -267
- package/unbundled/definition42.cjs +68 -49
- package/unbundled/definition42.js +65 -46
- package/unbundled/definition43.cjs +424 -56
- package/unbundled/definition43.js +422 -54
- package/unbundled/definition44.cjs +45 -428
- package/unbundled/definition44.js +42 -425
- package/unbundled/definition45.cjs +45 -54
- package/unbundled/definition45.js +42 -51
- package/unbundled/definition46.cjs +178 -30
- package/unbundled/definition46.js +175 -26
- package/unbundled/definition47.cjs +29 -94
- package/unbundled/definition47.js +25 -91
- package/unbundled/definition48.cjs +76 -36
- package/unbundled/definition48.js +73 -33
- package/unbundled/definition49.cjs +56 -23
- package/unbundled/definition49.js +54 -18
- package/unbundled/definition5.cjs +56 -38
- package/unbundled/definition5.js +52 -28
- package/unbundled/definition50.cjs +23 -40
- package/unbundled/definition50.js +18 -38
- package/unbundled/definition51.cjs +30 -338
- package/unbundled/definition51.js +30 -338
- package/unbundled/definition52.cjs +317 -187
- package/unbundled/definition52.js +314 -184
- package/unbundled/definition53.cjs +194 -289
- package/unbundled/definition53.js +189 -284
- package/unbundled/definition54.cjs +47 -54
- package/unbundled/definition54.js +44 -50
- package/unbundled/definition55.cjs +279 -133
- package/unbundled/definition55.js +277 -130
- package/unbundled/definition56.cjs +50 -262
- package/unbundled/definition56.js +48 -261
- package/unbundled/definition57.cjs +128 -460
- package/unbundled/definition57.js +126 -459
- package/unbundled/definition58.cjs +235 -3604
- package/unbundled/definition58.js +231 -3437
- package/unbundled/definition59.cjs +419 -729
- package/unbundled/definition59.js +417 -727
- package/unbundled/definition6.cjs +18 -64
- package/unbundled/definition6.js +15 -60
- package/unbundled/definition60.cjs +3666 -106
- package/unbundled/definition60.js +3498 -101
- package/unbundled/definition61.cjs +625 -878
- package/unbundled/definition61.js +619 -872
- package/unbundled/definition62.cjs +106 -108
- package/unbundled/definition62.js +103 -105
- package/unbundled/definition63.cjs +1045 -71
- package/unbundled/definition63.js +1041 -66
- package/unbundled/definition64.cjs +105 -173
- package/unbundled/definition64.js +102 -170
- package/unbundled/definition65.cjs +70 -113
- package/unbundled/definition65.js +66 -110
- package/unbundled/definition66.cjs +185 -54
- package/unbundled/definition66.js +182 -51
- package/unbundled/definition67.cjs +110 -77
- package/unbundled/definition67.js +111 -77
- package/unbundled/definition68.cjs +58 -21
- package/unbundled/definition68.js +56 -16
- package/unbundled/definition69.cjs +82 -75
- package/unbundled/definition69.js +81 -75
- package/unbundled/definition7.cjs +2 -2
- package/unbundled/definition7.js +3 -3
- package/unbundled/definition70.cjs +19 -349
- package/unbundled/definition70.js +15 -341
- package/unbundled/definition71.cjs +88 -26
- package/unbundled/definition71.js +86 -23
- package/unbundled/definition72.cjs +309 -119
- package/unbundled/definition72.js +234 -116
- package/unbundled/definition73.cjs +293 -229
- package/unbundled/definition73.js +287 -230
- package/unbundled/definition74.cjs +39 -30
- package/unbundled/definition74.js +29 -28
- package/unbundled/definition75.cjs +106 -121
- package/unbundled/definition75.js +104 -113
- package/unbundled/definition76.cjs +260 -179
- package/unbundled/definition76.js +258 -176
- package/unbundled/definition77.cjs +29 -514
- package/unbundled/definition77.js +27 -503
- package/unbundled/definition78.cjs +171 -0
- package/unbundled/definition78.js +147 -0
- package/unbundled/definition79.cjs +233 -0
- package/unbundled/definition79.js +214 -0
- package/unbundled/definition8.js +1 -1
- package/unbundled/definition80.cjs +533 -0
- package/unbundled/definition80.js +513 -0
- package/unbundled/definition9.cjs +1 -1
- package/unbundled/definition9.js +2 -2
- package/unbundled/delegates-aria.cjs +15 -1
- package/unbundled/delegates-aria.js +17 -3
- package/unbundled/host-semantics.cjs +2 -1
- package/unbundled/host-semantics.js +2 -1
- package/unbundled/kbd-shortcut.cjs +26 -0
- package/unbundled/kbd-shortcut.js +20 -0
- package/unbundled/mixins.cjs +7 -77
- package/unbundled/mixins.js +6 -64
- package/unbundled/platform.cjs +17 -0
- package/unbundled/platform.js +12 -0
- package/unbundled/randomId.cjs +47 -0
- package/unbundled/randomId.js +35 -0
- package/unbundled/time-selection-picker.template.js +1 -1
- package/unbundled/vivid-element.cjs +82 -9
- package/unbundled/vivid-element.js +63 -8
- package/video-player/definition.cjs +1 -1
- package/video-player/definition.js +1 -1
- package/video-player/index.cjs +3 -3
- package/video-player/index.js +5 -5
- package/visually-hidden/definition.cjs +1 -1
- package/visually-hidden/definition.js +1 -1
- package/vivid.api.json +604 -6
- package/bundled/normalize.cjs +0 -1
- package/bundled/normalize.js +0 -7
package/empty-state/index.cjs
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/
|
|
1
|
+
const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cjs`),n=require(`../bundled/when.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/definition2.cjs`),a=require(`../bundled/class-names.cjs`);var o=`:host{display:block}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-empty-state-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-dim:var(--vvd-empty-state-cta-dim,var(--vvd-color-cta-200));--_connotation-color-faint:var(--vvd-empty-state-cta-faint,var(--vvd-color-cta-50));--_connotation-color-primary:var(--vvd-empty-state-cta-primary,var(--vvd-color-cta-500))}.base.connotation-success{--_connotation-color-firm-all:var(--vvd-empty-state-success-firm-all,var(--vvd-color-success-600));--_connotation-color-dim:var(--vvd-empty-state-success-dim,var(--vvd-color-success-200));--_connotation-color-faint:var(--vvd-empty-state-success-faint,var(--vvd-color-success-50));--_connotation-color-primary:var(--vvd-empty-state-success-primary,var(--vvd-color-success-500))}.base.connotation-alert{--_connotation-color-firm-all:var(--vvd-empty-state-alert-firm-all,var(--vvd-color-alert-600));--_connotation-color-dim:var(--vvd-empty-state-alert-dim,var(--vvd-color-alert-200));--_connotation-color-faint:var(--vvd-empty-state-alert-faint,var(--vvd-color-alert-50));--_connotation-color-primary:var(--vvd-empty-state-alert-primary,var(--vvd-color-alert-500))}.base.connotation-warning{--_connotation-color-firm-all:var(--vvd-empty-state-warning-firm-all,var(--vvd-color-warning-600));--_connotation-color-dim:var(--vvd-empty-state-warning-dim,var(--vvd-color-warning-200));--_connotation-color-faint:var(--vvd-empty-state-warning-faint,var(--vvd-color-warning-50));--_connotation-color-primary:var(--vvd-empty-state-warning-primary,var(--vvd-color-warning-300))}.base.connotation-information{--_connotation-color-firm-all:var(--vvd-empty-state-information-firm-all,var(--vvd-color-information-600));--_connotation-color-dim:var(--vvd-empty-state-information-dim,var(--vvd-color-information-200));--_connotation-color-faint:var(--vvd-empty-state-information-faint,var(--vvd-color-information-50));--_connotation-color-primary:var(--vvd-empty-state-information-primary,var(--vvd-color-information-500))}.base.connotation-announcement{--_connotation-color-firm-all:var(--vvd-empty-state-announcement-firm-all,var(--vvd-color-announcement-600));--_connotation-color-dim:var(--vvd-empty-state-announcement-dim,var(--vvd-color-announcement-200));--_connotation-color-faint:var(--vvd-empty-state-announcement-faint,var(--vvd-color-announcement-50));--_connotation-color-primary:var(--vvd-empty-state-announcement-primary,var(--vvd-color-announcement-500))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-firm-all:var(--vvd-empty-state-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-dim:var(--vvd-empty-state-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-faint:var(--vvd-empty-state-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-primary:var(--vvd-empty-state-accent-primary,var(--vvd-color-canvas-text))}.base{--_empty-state-icon-container:120px;--_empty-state-icon-background:var(--_connotation-color-faint);--_empty-state-icon-font-size:52px;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:24px;block-size:100%;display:flex}.icon-container{background-color:var(--_empty-state-icon-background);block-size:var(--_empty-state-icon-container);box-shadow:inset 0 0 0 21px color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container);--_empty-state-icon-background:transparent;--_empty-state-icon-font-size:40px;border-radius:50%;justify-content:center;align-items:center;display:flex}.icon-container .icon{border:1px solid var(--_connotation-color-dim);border-radius:inherit;color:var(--_connotation-color-firm-all);padding:19px}.content{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-align:center;flex-direction:column;gap:8px;display:flex}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.base.no-actions .actions{display:none}`,s=class extends e.t{};r.t([e.m],s.prototype,`connotation`,void 0),r.t([e.m],s.prototype,`headline`,void 0),r.t([e.m],s.prototype,`icon`,void 0),r.t([e.m({attribute:`icon-decoration`})],s.prototype,`iconDecoration`,void 0),r.t([e.A],s.prototype,`slottedActionItems`,void 0);var c=({connotation:e,slottedActionItems:t})=>a.t(`base`,[`connotation-${e}`,!!e],[`no-actions`,t?.length===0]),l=e.u(`empty-state`,s,r=>{let a=r.tagFor(i.r);return e.p` <div
|
|
2
2
|
class="${c}"
|
|
3
3
|
aria-labelledby="${e=>e.headline?`empty-state-headline`:null}"
|
|
4
4
|
>
|
|
5
5
|
<slot name="graphic">
|
|
6
|
-
${
|
|
6
|
+
${n.t(e=>e.icon,e.p`<div class="icon-container">
|
|
7
7
|
<${a} class="icon" name="${e=>e.icon}"></${a}>
|
|
8
8
|
</div>`)}
|
|
9
9
|
</slot>
|
|
10
10
|
<div class="content">
|
|
11
|
-
${
|
|
11
|
+
${n.t(e=>e.headline,e.p`<header id="empty-state-headline">
|
|
12
12
|
${e=>e.headline}
|
|
13
13
|
</header>`)}
|
|
14
14
|
<slot></slot>
|
|
15
15
|
</div>
|
|
16
16
|
<div class="actions">
|
|
17
|
-
<slot name="action-items" ${
|
|
17
|
+
<slot name="action-items" ${t.t(`slottedActionItems`)}></slot>
|
|
18
18
|
</div>
|
|
19
|
-
</div>`},[i.t],{styles:o});e.
|
|
19
|
+
</div>`},[i.t],{styles:o});e.d(l)();
|
package/empty-state/index.js
CHANGED
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { t as o } from "../bundled/
|
|
3
|
-
import { t as s } from "../bundled/
|
|
1
|
+
import { A as e, d as t, m as n, p as r, t as i, u as a } from "../bundled/vivid-element.js";
|
|
2
|
+
import { t as o } from "../bundled/slotted.js";
|
|
3
|
+
import { t as s } from "../bundled/when.js";
|
|
4
4
|
import { t as c } from "../bundled/decorate.js";
|
|
5
5
|
import { r as l, t as u } from "../bundled/definition2.js";
|
|
6
6
|
import { t as d } from "../bundled/class-names.js";
|
|
7
7
|
//#region src/lib/empty-state/empty-state.scss?inline
|
|
8
8
|
var f = ":host{display:block}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-empty-state-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-dim:var(--vvd-empty-state-cta-dim,var(--vvd-color-cta-200));--_connotation-color-faint:var(--vvd-empty-state-cta-faint,var(--vvd-color-cta-50));--_connotation-color-primary:var(--vvd-empty-state-cta-primary,var(--vvd-color-cta-500))}.base.connotation-success{--_connotation-color-firm-all:var(--vvd-empty-state-success-firm-all,var(--vvd-color-success-600));--_connotation-color-dim:var(--vvd-empty-state-success-dim,var(--vvd-color-success-200));--_connotation-color-faint:var(--vvd-empty-state-success-faint,var(--vvd-color-success-50));--_connotation-color-primary:var(--vvd-empty-state-success-primary,var(--vvd-color-success-500))}.base.connotation-alert{--_connotation-color-firm-all:var(--vvd-empty-state-alert-firm-all,var(--vvd-color-alert-600));--_connotation-color-dim:var(--vvd-empty-state-alert-dim,var(--vvd-color-alert-200));--_connotation-color-faint:var(--vvd-empty-state-alert-faint,var(--vvd-color-alert-50));--_connotation-color-primary:var(--vvd-empty-state-alert-primary,var(--vvd-color-alert-500))}.base.connotation-warning{--_connotation-color-firm-all:var(--vvd-empty-state-warning-firm-all,var(--vvd-color-warning-600));--_connotation-color-dim:var(--vvd-empty-state-warning-dim,var(--vvd-color-warning-200));--_connotation-color-faint:var(--vvd-empty-state-warning-faint,var(--vvd-color-warning-50));--_connotation-color-primary:var(--vvd-empty-state-warning-primary,var(--vvd-color-warning-300))}.base.connotation-information{--_connotation-color-firm-all:var(--vvd-empty-state-information-firm-all,var(--vvd-color-information-600));--_connotation-color-dim:var(--vvd-empty-state-information-dim,var(--vvd-color-information-200));--_connotation-color-faint:var(--vvd-empty-state-information-faint,var(--vvd-color-information-50));--_connotation-color-primary:var(--vvd-empty-state-information-primary,var(--vvd-color-information-500))}.base.connotation-announcement{--_connotation-color-firm-all:var(--vvd-empty-state-announcement-firm-all,var(--vvd-color-announcement-600));--_connotation-color-dim:var(--vvd-empty-state-announcement-dim,var(--vvd-color-announcement-200));--_connotation-color-faint:var(--vvd-empty-state-announcement-faint,var(--vvd-color-announcement-50));--_connotation-color-primary:var(--vvd-empty-state-announcement-primary,var(--vvd-color-announcement-500))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-firm-all:var(--vvd-empty-state-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-dim:var(--vvd-empty-state-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-faint:var(--vvd-empty-state-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-primary:var(--vvd-empty-state-accent-primary,var(--vvd-color-canvas-text))}.base{--_empty-state-icon-container:120px;--_empty-state-icon-background:var(--_connotation-color-faint);--_empty-state-icon-font-size:52px;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:24px;block-size:100%;display:flex}.icon-container{background-color:var(--_empty-state-icon-background);block-size:var(--_empty-state-icon-container);box-shadow:inset 0 0 0 21px color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container);--_empty-state-icon-background:transparent;--_empty-state-icon-font-size:40px;border-radius:50%;justify-content:center;align-items:center;display:flex}.icon-container .icon{border:1px solid var(--_connotation-color-dim);border-radius:inherit;color:var(--_connotation-color-firm-all);padding:19px}.content{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-align:center;flex-direction:column;gap:8px;display:flex}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.base.no-actions .actions{display:none}", p = class extends i {};
|
|
9
|
-
c([
|
|
9
|
+
c([n], p.prototype, "connotation", void 0), c([n], p.prototype, "headline", void 0), c([n], p.prototype, "icon", void 0), c([n({ attribute: "icon-decoration" })], p.prototype, "iconDecoration", void 0), c([e], p.prototype, "slottedActionItems", void 0);
|
|
10
10
|
//#endregion
|
|
11
11
|
//#region src/lib/empty-state/empty-state.template.ts
|
|
12
12
|
var m = ({ connotation: e, slottedActionItems: t }) => d("base", [`connotation-${e}`, !!e], ["no-actions", t?.length === 0]);
|
|
13
13
|
//#endregion
|
|
14
14
|
//#region src/lib/empty-state/index.ts
|
|
15
|
-
t(
|
|
15
|
+
t(a("empty-state", p, (e) => {
|
|
16
16
|
let t = e.tagFor(l);
|
|
17
|
-
return
|
|
17
|
+
return r` <div
|
|
18
18
|
class="${m}"
|
|
19
19
|
aria-labelledby="${(e) => e.headline ? "empty-state-headline" : null}"
|
|
20
20
|
>
|
|
21
21
|
<slot name="graphic">
|
|
22
|
-
${
|
|
22
|
+
${s((e) => e.icon, r`<div class="icon-container">
|
|
23
23
|
<${t} class="icon" name="${(e) => e.icon}"></${t}>
|
|
24
24
|
</div>`)}
|
|
25
25
|
</slot>
|
|
26
26
|
<div class="content">
|
|
27
|
-
${
|
|
27
|
+
${s((e) => e.headline, r`<header id="empty-state-headline">
|
|
28
28
|
${(e) => e.headline}
|
|
29
29
|
</header>`)}
|
|
30
30
|
<slot></slot>
|
|
31
31
|
</div>
|
|
32
32
|
<div class="actions">
|
|
33
|
-
<slot name="action-items" ${
|
|
33
|
+
<slot name="action-items" ${o("slottedActionItems")}></slot>
|
|
34
34
|
</div>
|
|
35
35
|
</div>`;
|
|
36
36
|
}, [u], { styles: f }))();
|
package/fab/definition.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
-
const require_definition = require("../unbundled/
|
|
2
|
+
const require_definition = require("../unbundled/definition42.cjs");
|
|
3
3
|
exports.VwcFabElement = require_definition.Fab;
|
|
4
4
|
exports.fabDefinition = require_definition.fabDefinition;
|
|
5
5
|
exports.registerFab = require_definition.registerFab;
|
package/fab/definition.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as registerFab, r as Fab, t as fabDefinition } from "../unbundled/
|
|
1
|
+
import { n as registerFab, r as Fab, t as fabDefinition } from "../unbundled/definition42.js";
|
|
2
2
|
export { Fab as VwcFabElement, fabDefinition, registerFab };
|
package/fab/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/definition2.cjs`),i=require(`../bundled/affix.cjs`),a=require(`../bundled/class-names.cjs`),o=require(`../bundled/delegates-aria.cjs`),s=require(`../bundled/button.cjs`);var c=`.control.connotation-accent{--_connotation-color-primary:var(--vvd-fab-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-fab-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-fab-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-fab-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-fab-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-fab-accent-firm,var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-fab-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-fab-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-fab-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-fab-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-fab-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-fab-cta-firm,var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-fab-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-fab-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-fab-announcement-primary-increment,var(--vvd-color-announcement-600));--_connotation-color-contrast:var(--vvd-fab-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-fierce:var(--vvd-fab-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-fab-announcement-firm,var(--vvd-color-announcement-600))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.control{--_fab-inline-padding:12px;box-sizing:border-box;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill,var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text,var(--vvd-color-canvas-text));align-items:center;column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);vertical-align:middle;border:0;transition:background-color .15s linear,filter .15s linear;display:inline-flex}.control:not(.connotation-accent,.connotation-cta,.connotation-announcement){--focus-stroke-gap-color:transparent}.control:focus-visible{outline:none;position:relative}.control:focus-visible:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}@supports (user-select:none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius:40px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16));--_fab-inline-padding:20px}.control.size-condensed{--_fab-border-radius:20px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius:24px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding:0;border-radius:50%;place-content:center}@supports (aspect-ratio:1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio:1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap:10px}.control.disabled{--_elevation-fill:var(--_vvd-tinted-color-surface-nonedp,var(--vvd-color-surface-nonedp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-nonedp,var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(.disabled){--_elevation-fill:var(--_vvd-tinted-color-surface-4dp,var(--vvd-color-surface-4dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-4dp,var(--vvd-shadow-surface-4dp));cursor:pointer}@media (hover:hover){.control:not(.disabled):hover{--_elevation-fill:var(--_vvd-tinted-color-surface-12dp,var(--vvd-color-surface-12dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-12dp,var(--vvd-shadow-surface-12dp))}}.control:not(.disabled):active{--_elevation-fill:var(--_vvd-tinted-color-surface-24dp,var(--vvd-color-surface-24dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-24dp,var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{order:1;display:inline-block}.control.size-extended slot[name=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16)) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2)}`,l=class extends i.n(s.t){clickHandler(e){if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}}};n.t([e.
|
|
1
|
+
const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/definition2.cjs`),i=require(`../bundled/affix.cjs`),a=require(`../bundled/class-names.cjs`),o=require(`../bundled/delegates-aria.cjs`),s=require(`../bundled/button.cjs`);var c=`.control.connotation-accent{--_connotation-color-primary:var(--vvd-fab-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-fab-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-fab-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-fab-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-fab-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-fab-accent-firm,var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-fab-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-fab-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-fab-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-fab-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-fab-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-fab-cta-firm,var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-fab-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-fab-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-fab-announcement-primary-increment,var(--vvd-color-announcement-600));--_connotation-color-contrast:var(--vvd-fab-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-fierce:var(--vvd-fab-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-fab-announcement-firm,var(--vvd-color-announcement-600))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.control{--_fab-inline-padding:12px;box-sizing:border-box;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill,var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text,var(--vvd-color-canvas-text));align-items:center;column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);vertical-align:middle;border:0;transition:background-color .15s linear,filter .15s linear;display:inline-flex}.control:not(.connotation-accent,.connotation-cta,.connotation-announcement){--focus-stroke-gap-color:transparent}.control:focus-visible{outline:none;position:relative}.control:focus-visible:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}@supports (user-select:none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius:40px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16));--_fab-inline-padding:20px}.control.size-condensed{--_fab-border-radius:20px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius:24px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding:0;border-radius:50%;place-content:center}@supports (aspect-ratio:1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio:1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap:10px}.control.disabled{--_elevation-fill:var(--_vvd-tinted-color-surface-nonedp,var(--vvd-color-surface-nonedp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-nonedp,var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(.disabled){--_elevation-fill:var(--_vvd-tinted-color-surface-4dp,var(--vvd-color-surface-4dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-4dp,var(--vvd-shadow-surface-4dp));cursor:pointer}@media (hover:hover){.control:not(.disabled):hover{--_elevation-fill:var(--_vvd-tinted-color-surface-12dp,var(--vvd-color-surface-12dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-12dp,var(--vvd-shadow-surface-12dp))}}.control:not(.disabled):active{--_elevation-fill:var(--_vvd-tinted-color-surface-24dp,var(--vvd-color-surface-24dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-24dp,var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{order:1;display:inline-block}.control.size-extended slot[name=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16)) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2)}`,l=class extends i.n(s.t){clickHandler(e){if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}}};n.t([e.m],l.prototype,`connotation`,void 0),n.t([e.m],l.prototype,`size`,void 0),n.t([e.m],l.prototype,`label`,void 0);var u=({connotation:e,size:t,icon:n,label:r,iconTrailing:i,disabled:o,iconSlottedContent:s})=>a.t(`control`,[`connotation-${e}`,!!e],[`size-${t}`,!!t],[`icon-only`,!r&&!!(n||s?.length)],[`icon-trailing`,i],[`disabled`,o]),d=e.u(`fab`,l,n=>{let r=i.a(n);return e.p`
|
|
2
2
|
<button
|
|
3
3
|
class="${u} "
|
|
4
4
|
?autofocus="${e=>e.autofocus}"
|
|
@@ -17,4 +17,4 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),
|
|
|
17
17
|
>
|
|
18
18
|
${e=>r(e.icon,i.i.Slot)} ${e=>e.label}
|
|
19
19
|
</button>
|
|
20
|
-
`},[r.t],{styles:c,shadowOptions:{delegatesFocus:!0}});e.
|
|
20
|
+
`},[r.t],{styles:c,shadowOptions:{delegatesFocus:!0}});e.d(d)();
|
package/fab/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { d as e, m as t, p as n, u as r } from "../bundled/vivid-element.js";
|
|
2
2
|
import { t as i } from "../bundled/ref.js";
|
|
3
3
|
import { t as a } from "../bundled/decorate.js";
|
|
4
4
|
import { t as o } from "../bundled/definition2.js";
|
|
@@ -16,15 +16,15 @@ var p = ".control.connotation-accent{--_connotation-color-primary:var(--vvd-fab-
|
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
};
|
|
19
|
-
a([
|
|
19
|
+
a([t], m.prototype, "connotation", void 0), a([t], m.prototype, "size", void 0), a([t], m.prototype, "label", void 0);
|
|
20
20
|
//#endregion
|
|
21
21
|
//#region src/lib/fab/fab.template.ts
|
|
22
22
|
var h = ({ connotation: e, size: t, icon: n, label: r, iconTrailing: i, disabled: a, iconSlottedContent: o }) => u("control", [`connotation-${e}`, !!e], [`size-${t}`, !!t], ["icon-only", !r && !!(n || o?.length)], ["icon-trailing", i], ["disabled", a]);
|
|
23
23
|
//#endregion
|
|
24
24
|
//#region src/lib/fab/index.ts
|
|
25
|
-
e(
|
|
26
|
-
let
|
|
27
|
-
return
|
|
25
|
+
e(r("fab", m, (e) => {
|
|
26
|
+
let t = s(e);
|
|
27
|
+
return n`
|
|
28
28
|
<button
|
|
29
29
|
class="${h} "
|
|
30
30
|
?autofocus="${(e) => e.autofocus}"
|
|
@@ -41,7 +41,7 @@ e(n("fab", m, (e) => {
|
|
|
41
41
|
${i("control")}
|
|
42
42
|
@click="${(e, t) => e.clickHandler(t.event)}"
|
|
43
43
|
>
|
|
44
|
-
${(e) =>
|
|
44
|
+
${(e) => t(e.icon, c.Slot)} ${(e) => e.label}
|
|
45
45
|
</button>
|
|
46
46
|
`;
|
|
47
47
|
}, [o], {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
-
const require_definition = require("../unbundled/
|
|
2
|
+
const require_definition = require("../unbundled/definition43.cjs");
|
|
3
3
|
exports.VwcFilePickerElement = require_definition.FilePicker;
|
|
4
4
|
exports.filePickerDefinition = require_definition.filePickerDefinition;
|
|
5
5
|
exports.registerFilePicker = require_definition.registerFilePicker;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as registerFilePicker, r as FilePicker, t as filePickerDefinition } from "../unbundled/
|
|
1
|
+
import { n as registerFilePicker, r as FilePicker, t as filePickerDefinition } from "../unbundled/definition43.js";
|
|
2
2
|
export { FilePicker as VwcFilePickerElement, filePickerDefinition, registerFilePicker };
|
package/file-picker/index.cjs
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/ref.cjs`),i=require(`../bundled/when.cjs`),a=require(`../bundled/slotted.cjs`),o=require(`../bundled/decorate.cjs`),s=require(`../bundled/definition2.cjs`),c=require(`../bundled/form-element.cjs`),l=require(`../bundled/with-error-text.cjs`),u=require(`../bundled/with-contextual-help.cjs`),d=require(`../bundled/class-names.cjs`),f=require(`../bundled/delegates-aria.cjs`),p=require(`../bundled/form-associated.cjs`),m=require(`../bundled/definition6.cjs`),h=require(`../bundled/mixins.cjs`);var g=`.label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{max-inline-size:400px;display:block}:host([disabled]){cursor:not-allowed}.base{block-size:inherit;max-block-size:inherit;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;display:flex}.control-wrapper{block-size:inherit;max-block-size:inherit;flex-direction:column;gap:4px;display:flex}.control{box-sizing:border-box;border:1px dashed var(--vvd-color-neutral-400);background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);border-radius:8px;outline:none;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-block-size:52px;inline-size:100%;padding:16px;transition:all .3s;display:flex;position:relative}.control .upload-text{color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;justify-content:center;align-items:center;transition:all .3s;display:flex}.control.disabled{border-color:var(--vvd-color-neutral-300);background-color:var(--vvd-color-neutral-100);box-shadow:none;color:var(--vvd-color-neutral-300);pointer-events:none;transform:none}.control.disabled .upload-text{color:var(--vvd-color-neutral-300)}@media (hover:hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--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))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}@media (hover:hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}}.control:active{transform:translateY(0);box-shadow:0 1px 4px #0000001a}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s;animation:2s ease-in-out infinite subtle-pulse}@media (hover:hover){.control:hover .upload-icon{color:var(--vvd-color-cta-700);animation:none;transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{color:var(--vvd-color-neutral-800);animation:none;transform:scale(1.15)}.control.disabled .upload-icon{color:var(--vvd-color-neutral-300);animation:none}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{box-sizing:border-box;border:1px solid var(--vvd-color-neutral-300);background-color:var(--file-picker-list-item-background-color,var(--vvd-color-canvas));border-radius:8px;grid-template-rows:auto auto;grid-template-columns:1fr auto;inline-size:100%;padding:8px;display:grid}.preview .details{min-width:0;flex-direction:column;max-inline-size:100%;display:flex}.preview .details .filename{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);align-items:center;gap:4px;margin-block-start:4px;display:flex}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{grid-area:1/2/-1/-1;align-self:center;display:inline}.preview-list{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.preview-list{flex-direction:column;gap:12px;margin-block-start:12px;display:flex;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{visibility:hidden;width:0;height:0;position:absolute;top:0;left:0}`;async function _(e){return e.items?.[0]?.webkitGetAsEntry==null?Array.from(e.files):await v(e.items)}async function v(e){let t=[];for(let n of e){let e=n.getAsFile();if(e)t.push(Promise.resolve([e]));else{let e=n.webkitGetAsEntry();e&&t.push(y(e,!1))}}return(await Promise.all(t)).flat()}var y=(e,t)=>{let n=e.isFile?(e=>new Promise((n,r)=>{e.file(e=>{t&&e.name.substring(0,1)===`.`?n([]):n([e])},r)}))(e):e.isDirectory?b(e):Promise.resolve([]);return n.catch(()=>null),n},b=async e=>new Promise((t,n)=>{let r=[],i=e.createReader(),a=()=>{i.readEntries(e=>{for(let t of e)r.push(y(t,!0));e.length?a():t(Promise.all(r).then(e=>e.flat()))},n)};a()});function x(e,t){if(!t)return!0;let n=t.split(`,`),r=e=>/\/\*$/.test(e),i=e=>e.replace(/\/.*$/,``);for(let t of n)if(t=t.trim(),t.charAt(0)===`.`){if(e.name.toLowerCase().endsWith(t.toLowerCase()))return!0}else if(r(t)){if(i(e.type)===i(t))return!0}else if(e.type===t)return!0;return!1}var S=class extends u.t(h.t(l.t(c.t(f.t(e.t(p.n(t.t))))))){constructor(...e){super(...e),this.singleFile=!1,this.maxFiles=null,this.maxFileSize=256,this.valueChanged=(e,t)=>{super.valueChanged(e,t),t===``&&this.files.length&&this.removeAllFiles()},this.proxy=document.createElement(`input`),this.setFormValue=(e,t)=>{typeof e!=`string`&&super.setFormValue(e,t)},this._customValidationError=null,this.#r={handleChange:()=>{this._customValidationError=this.#i.observe(this,t.T.default)}},this._dragHover=!1,this._allFiles=[]}nameChanged(e,t){super.nameChanged(e,t),this.#e()}#e(){let e=this.files;if(!this.name)this.setFormValue(null);else{let t=new FormData;for(let n of e)t.append(this.name,n);this.setFormValue(t)}this.#t()}#t(){this.value=this.files.length>0?`C:\\fakepath\\${this.files[0].name}`:``}validate(){super.validate(this.control)}formResetCallback(){this.removeAllFiles(),super.formResetCallback()}#n(){return this.rejectedFiles.length>0?this.locale.filePicker.invalidFilesError:null}_customValidationErrorChanged(){this.proxy&&this.proxy.setCustomValidity(this._customValidationError??``),this.validate()}#r;#i;#a(){this.#i=t.E.binding(()=>this.#n(),this.#r,!0),this.#r.handleChange()}#o(){this.#i.dispose()}connectedCallback(){super.connectedCallback(),this.#a()}disconnectedCallback(){super.disconnectedCallback(),this.#o()}_onDragEnter(){return this.disabled||(this._dragHover=!0),!0}_onDragOver(e){if(this.disabled||!e.dataTransfer)return!0;let t=e.dataTransfer.effectAllowed;return e.dataTransfer.dropEffect=t===`move`||t===`linkMove`?`move`:`copy`,!1}_onDragLeave(e){return this.disabled||e.currentTarget===e.target&&(this._dragHover=!1),!0}_onDrop(e){return this.disabled||(this._dragHover=!1,!e.dataTransfer)?!0:(_(e.dataTransfer).then(e=>this.#s(e)).catch(e=>{console.error(e)}),!1)}_onDragEnd(){return this.disabled||(this._dragHover=!1),!0}_onControlClick(){this.disabled||this._hiddenInput.click()}_onRemoveFileClick(e){this.disabled||(this._allFiles=this._allFiles.filter(t=>t!==e),this.$emit(`change`))}_allFilesChanged(){this.#e()}#s(e){let t=Array.from(e).filter(e=>!this._allFiles.some(t=>t.name===e.name&&t.size===e.size));this.singleFile&&t.length>0?this._allFiles=[t[t.length-1]]:this._allFiles=[...this._allFiles,...t],this.$emit(`change`)}removeAllFiles(){this._allFiles=[]}get _validatedFiles(){let e=(e,t)=>this.maxFileSize&&e.size>this.maxFileSize*1024*1024?(this.fileTooBigError||this.locale.filePicker.fileTooBigError).replace(`{{filesize}}`,this._formatNumber(Math.round(e.size/1024/10.24)/100)).replace(`{{maxFilesize}}`,this._formatNumber(this.maxFileSize)):x(e,this.accept)?typeof this.maxFiles==`number`&&t>=this.maxFiles?(this.maxFilesExceededError||this.locale.filePicker.maxFilesExceededError).replace(`{{maxFiles}}`,String(this.maxFiles)):null:this.invalidFileTypeError||this.locale.filePicker.invalidFileTypeError,t=[],n=0;for(let r of this._allFiles){let i={file:r,validationError:e(r,n)};t.push(i),i.validationError||n++}return t}get files(){return this._validatedFiles.filter(e=>!e.validationError).map(e=>e.file)}get rejectedFiles(){return this._validatedFiles.filter(e=>!!e.validationError).map(e=>e.file)}_onHiddenInputChange(e){this.#s(this._hiddenInput.files),this._hiddenInput.value=``,e.stopPropagation()}_formatNumber(e){let t=String(e);return this.locale.common.useCommaAsDecimalSeparator?t.replace(`.`,`,`):t}};o.t([t.u({attribute:`single-file`,mode:`boolean`})],S.prototype,`singleFile`,void 0),o.t([t.u({attribute:`max-files`,converter:t.d,mode:`fromView`})],S.prototype,`maxFiles`,void 0),o.t([t.u({mode:`fromView`,attribute:`max-file-size`})],S.prototype,`maxFileSize`,void 0),o.t([t.u],S.prototype,`accept`,void 0),o.t([t.u],S.prototype,`size`,void 0),o.t([t.u({attribute:`invalid-file-type-error`})],S.prototype,`invalidFileTypeError`,void 0),o.t([t.u({attribute:`max-files-exceeded-error`})],S.prototype,`maxFilesExceededError`,void 0),o.t([t.u({attribute:`file-too-big-error`})],S.prototype,`fileTooBigError`,void 0),o.t([t.D],S.prototype,`_customValidationError`,void 0),o.t([t.D],S.prototype,`_dragHover`,void 0),o.t([t.D],S.prototype,`_allFiles`,void 0),o.t([t.O],S.prototype,`_validatedFiles`,null);var C=1e3,w={tb:`TB`,gb:`GB`,mb:`MB`,kb:`KB`,b:`b`},T=(e,n)=>{let r=0,i=`b`;if(n>0){let e=[`tb`,`gb`,`mb`,`kb`,`b`];for(let t=0;t<e.length;t++){let a=e[t];if(n>=C**(4-t)/10){r=n/C**(4-t),i=a;break}}r=Math.round(10*r)/10}return t.f`<strong>${e._formatNumber(r)}</strong>
|
|
2
|
-
${w[i]}`},E=({size:e,_dragHover:t,disabled:n})=>d.t(`control`,[`size-${e}`,!!e],[`drag-hover`,t],[`disabled`,n]),D=t.
|
|
1
|
+
const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/slotted.cjs`),i=require(`../bundled/ref.cjs`),a=require(`../bundled/when.cjs`),o=require(`../bundled/decorate.cjs`),s=require(`../bundled/definition2.cjs`),c=require(`../bundled/form-element.cjs`),l=require(`../bundled/with-error-text.cjs`),u=require(`../bundled/with-contextual-help.cjs`),d=require(`../bundled/class-names.cjs`),f=require(`../bundled/delegates-aria.cjs`),p=require(`../bundled/form-associated.cjs`),m=require(`../bundled/definition6.cjs`),h=require(`../bundled/mixins.cjs`);var g=`.label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{max-inline-size:400px;display:block}:host([disabled]){cursor:not-allowed}.base{block-size:inherit;max-block-size:inherit;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;display:flex}.control-wrapper{block-size:inherit;max-block-size:inherit;flex-direction:column;gap:4px;display:flex}.control{box-sizing:border-box;border:1px dashed var(--vvd-color-neutral-400);background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);border-radius:8px;outline:none;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-block-size:52px;inline-size:100%;padding:16px;transition:all .3s;display:flex;position:relative}.control .upload-text{color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;justify-content:center;align-items:center;transition:all .3s;display:flex}.control.disabled{border-color:var(--vvd-color-neutral-300);background-color:var(--vvd-color-neutral-100);box-shadow:none;color:var(--vvd-color-neutral-300);pointer-events:none;transform:none}.control.disabled .upload-text{color:var(--vvd-color-neutral-300)}@media (hover:hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--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))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}@media (hover:hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}}.control:active{transform:translateY(0);box-shadow:0 1px 4px #0000001a}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s;animation:2s ease-in-out infinite subtle-pulse}@media (hover:hover){.control:hover .upload-icon{color:var(--vvd-color-cta-700);animation:none;transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{color:var(--vvd-color-neutral-800);animation:none;transform:scale(1.15)}.control.disabled .upload-icon{color:var(--vvd-color-neutral-300);animation:none}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{box-sizing:border-box;border:1px solid var(--vvd-color-neutral-300);background-color:var(--file-picker-list-item-background-color,var(--vvd-color-canvas));border-radius:8px;grid-template-rows:auto auto;grid-template-columns:1fr auto;inline-size:100%;padding:8px;display:grid}.preview .details{min-width:0;flex-direction:column;max-inline-size:100%;display:flex}.preview .details .filename{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);align-items:center;gap:4px;margin-block-start:4px;display:flex}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{grid-area:1/2/-1/-1;align-self:center;display:inline}.preview-list{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.preview-list{flex-direction:column;gap:12px;margin-block-start:12px;display:flex;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{visibility:hidden;width:0;height:0;position:absolute;top:0;left:0}`;async function _(e){return e.items?.[0]?.webkitGetAsEntry==null?Array.from(e.files):await v(e.items)}async function v(e){let t=[];for(let n of e){let e=n.getAsFile();if(e)t.push(Promise.resolve([e]));else{let e=n.webkitGetAsEntry();e&&t.push(y(e,!1))}}return(await Promise.all(t)).flat()}var y=(e,t)=>{let n=e.isFile?(e=>new Promise((n,r)=>{e.file(e=>{t&&e.name.substring(0,1)===`.`?n([]):n([e])},r)}))(e):e.isDirectory?b(e):Promise.resolve([]);return n.catch(()=>null),n},b=async e=>new Promise((t,n)=>{let r=[],i=e.createReader(),a=()=>{i.readEntries(e=>{for(let t of e)r.push(y(t,!0));e.length?a():t(Promise.all(r).then(e=>e.flat()))},n)};a()});function x(e,t){if(!t)return!0;let n=t.split(`,`),r=e=>/\/\*$/.test(e),i=e=>e.replace(/\/.*$/,``);for(let t of n)if(t=t.trim(),t.charAt(0)===`.`){if(e.name.toLowerCase().endsWith(t.toLowerCase()))return!0}else if(r(t)){if(i(e.type)===i(t))return!0}else if(e.type===t)return!0;return!1}var S=class extends u.t(h.t(l.t(c.t(f.t(e.t(p.n(t.t))))))){constructor(...e){super(...e),this.singleFile=!1,this.maxFiles=null,this.maxFileSize=256,this.valueChanged=(e,t)=>{super.valueChanged(e,t),t===``&&this.files.length&&this.removeAllFiles()},this.proxy=document.createElement(`input`),this.setFormValue=(e,t)=>{typeof e!=`string`&&super.setFormValue(e,t)},this._customValidationError=null,this.#r={handleChange:()=>{this._customValidationError=this.#i.observe(this,t.O.default)}},this._dragHover=!1,this._allFiles=[]}nameChanged(e,t){super.nameChanged(e,t),this.#e()}#e(){let e=this.files;if(!this.name)this.setFormValue(null);else{let t=new FormData;for(let n of e)t.append(this.name,n);this.setFormValue(t)}this.#t()}#t(){this.value=this.files.length>0?`C:\\fakepath\\${this.files[0].name}`:``}validate(){super.validate(this.control)}formResetCallback(){this.removeAllFiles(),super.formResetCallback()}#n(){return this.rejectedFiles.length>0?this.locale.filePicker.invalidFilesError:null}_customValidationErrorChanged(){this.proxy&&this.proxy.setCustomValidity(this._customValidationError??``),this.validate()}#r;#i;#a(){this.#i=t.k.binding(()=>this.#n(),this.#r,!0),this.#r.handleChange()}#o(){this.#i.dispose()}connectedCallback(){super.connectedCallback(),this.#a()}disconnectedCallback(){super.disconnectedCallback(),this.#o()}_onDragEnter(){return this.disabled||(this._dragHover=!0),!0}_onDragOver(e){if(this.disabled||!e.dataTransfer)return!0;let t=e.dataTransfer.effectAllowed;return e.dataTransfer.dropEffect=t===`move`||t===`linkMove`?`move`:`copy`,!1}_onDragLeave(e){return this.disabled||e.currentTarget===e.target&&(this._dragHover=!1),!0}_onDrop(e){return this.disabled||(this._dragHover=!1,!e.dataTransfer)?!0:(_(e.dataTransfer).then(e=>this.#s(e)).catch(e=>{console.error(e)}),!1)}_onDragEnd(){return this.disabled||(this._dragHover=!1),!0}_onControlClick(){this.disabled||this._hiddenInput.click()}_onRemoveFileClick(e){this.disabled||(this._allFiles=this._allFiles.filter(t=>t!==e),this.$emit(`change`))}_allFilesChanged(){this.#e()}#s(e){let t=Array.from(e).filter(e=>!this._allFiles.some(t=>t.name===e.name&&t.size===e.size));this.singleFile&&t.length>0?this._allFiles=[t[t.length-1]]:this._allFiles=[...this._allFiles,...t],this.$emit(`change`)}removeAllFiles(){this._allFiles=[]}get _validatedFiles(){let e=(e,t)=>this.maxFileSize&&e.size>this.maxFileSize*1024*1024?(this.fileTooBigError||this.locale.filePicker.fileTooBigError).replace(`{{filesize}}`,this._formatNumber(Math.round(e.size/1024/10.24)/100)).replace(`{{maxFilesize}}`,this._formatNumber(this.maxFileSize)):x(e,this.accept)?typeof this.maxFiles==`number`&&t>=this.maxFiles?(this.maxFilesExceededError||this.locale.filePicker.maxFilesExceededError).replace(`{{maxFiles}}`,String(this.maxFiles)):null:this.invalidFileTypeError||this.locale.filePicker.invalidFileTypeError,t=[],n=0;for(let r of this._allFiles){let i={file:r,validationError:e(r,n)};t.push(i),i.validationError||n++}return t}get files(){return this._validatedFiles.filter(e=>!e.validationError).map(e=>e.file)}get rejectedFiles(){return this._validatedFiles.filter(e=>!!e.validationError).map(e=>e.file)}_onHiddenInputChange(e){this.#s(this._hiddenInput.files),this._hiddenInput.value=``,e.stopPropagation()}_formatNumber(e){let t=String(e);return this.locale.common.useCommaAsDecimalSeparator?t.replace(`.`,`,`):t}};o.t([t.m({attribute:`single-file`,mode:`boolean`})],S.prototype,`singleFile`,void 0),o.t([t.m({attribute:`max-files`,converter:t.h,mode:`fromView`})],S.prototype,`maxFiles`,void 0),o.t([t.m({mode:`fromView`,attribute:`max-file-size`})],S.prototype,`maxFileSize`,void 0),o.t([t.m],S.prototype,`accept`,void 0),o.t([t.m],S.prototype,`size`,void 0),o.t([t.m({attribute:`invalid-file-type-error`})],S.prototype,`invalidFileTypeError`,void 0),o.t([t.m({attribute:`max-files-exceeded-error`})],S.prototype,`maxFilesExceededError`,void 0),o.t([t.m({attribute:`file-too-big-error`})],S.prototype,`fileTooBigError`,void 0),o.t([t.A],S.prototype,`_customValidationError`,void 0),o.t([t.A],S.prototype,`_dragHover`,void 0),o.t([t.A],S.prototype,`_allFiles`,void 0),o.t([t.j],S.prototype,`_validatedFiles`,null);var C=1e3,w={tb:`TB`,gb:`GB`,mb:`MB`,kb:`KB`,b:`b`},T=(e,n)=>{let r=0,i=`b`;if(n>0){let e=[`tb`,`gb`,`mb`,`kb`,`b`];for(let t=0;t<e.length;t++){let a=e[t];if(n>=C**(4-t)/10){r=n/C**(4-t),i=a;break}}r=Math.round(10*r)/10}return t.p`<strong>${e._formatNumber(r)}</strong>
|
|
2
|
+
${w[i]}`},E=({size:e,_dragHover:t,disabled:n})=>d.t(`control`,[`size-${e}`,!!e],[`drag-hover`,t],[`disabled`,n]),D=t.u(`file-picker`,S,e=>{let o=e.tagFor(s.r),c=e.tagFor(m.i);return t.p`
|
|
3
3
|
<div class="base">
|
|
4
4
|
<div class="label-wrapper" ?hidden=${e=>!e.label&&!e._hasContextualHelp}>
|
|
5
|
-
${
|
|
6
|
-
<slot name="contextual-help" ${
|
|
5
|
+
${a.t(e=>e.label,t.p`<label class="label">${e=>e.label}</label>`)}
|
|
6
|
+
<slot name="contextual-help" ${r.t(`_contextualHelpSlottedContent`)}></slot>
|
|
7
7
|
</div>
|
|
8
8
|
<div class="control-wrapper">
|
|
9
9
|
<button
|
|
10
10
|
type="button"
|
|
11
|
-
${
|
|
11
|
+
${i.t(`control`)}
|
|
12
12
|
class="${E}"
|
|
13
13
|
?disabled="${e=>e.disabled}"
|
|
14
14
|
@click="${e=>e._onControlClick()}"
|
|
@@ -18,8 +18,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
|
|
|
18
18
|
@dragleave="${(e,t)=>e._onDragLeave(t.event)}"
|
|
19
19
|
@drop="${(e,t)=>e._onDrop(t.event)}"
|
|
20
20
|
@dragend="${e=>e._onDragEnd()}"
|
|
21
|
-
|
|
22
|
-
${f.n()}
|
|
21
|
+
${f.n({ariaDescribedBy:e=>e._feedbackDescribedBy})}
|
|
23
22
|
>
|
|
24
23
|
<${o}
|
|
25
24
|
class="upload-icon"
|
|
@@ -32,7 +31,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
|
|
|
32
31
|
${t=>t._getFeedbackTemplate(e)}
|
|
33
32
|
</div>
|
|
34
33
|
<div class="preview-list">
|
|
35
|
-
${n.n(e=>e._validatedFiles,t.
|
|
34
|
+
${n.n(e=>e._validatedFiles,t.p`
|
|
36
35
|
<div class="${e=>d.t(`preview`,[`has-error`,!!e.validationError])}">
|
|
37
36
|
<div class="details">
|
|
38
37
|
<div class="filename">${e=>e.file.name}</div>
|
|
@@ -51,7 +50,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
|
|
|
51
50
|
</div>
|
|
52
51
|
</div>
|
|
53
52
|
<input
|
|
54
|
-
${
|
|
53
|
+
${i.t(`_hiddenInput`)}
|
|
55
54
|
class="hidden-input"
|
|
56
55
|
aria-hidden="true"
|
|
57
56
|
type="file"
|
|
@@ -61,4 +60,4 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
|
|
|
61
60
|
tabindex="-1"
|
|
62
61
|
@change="${(e,t)=>e._onHiddenInputChange(t.event)}"
|
|
63
62
|
/>
|
|
64
|
-
`},[s.t,m.t,h.
|
|
63
|
+
`},[s.t,m.t,h.r],{styles:g,shadowOptions:{delegatesFocus:!0}});t.d(D)();
|
package/file-picker/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { t as e } from "../bundled/localized.js";
|
|
2
|
-
import {
|
|
2
|
+
import { A as t, O as n, d as r, h as i, j as a, k as o, m as s, p as c, t as l, u } from "../bundled/vivid-element.js";
|
|
3
3
|
import { n as d } from "../bundled/repeat.js";
|
|
4
|
-
import { t as f } from "../bundled/
|
|
5
|
-
import { t as p } from "../bundled/
|
|
6
|
-
import { t as m } from "../bundled/
|
|
4
|
+
import { t as f } from "../bundled/slotted.js";
|
|
5
|
+
import { t as p } from "../bundled/ref.js";
|
|
6
|
+
import { t as m } from "../bundled/when.js";
|
|
7
7
|
import { t as h } from "../bundled/decorate.js";
|
|
8
8
|
import { r as g, t as _ } from "../bundled/definition2.js";
|
|
9
9
|
import { t as v } from "../bundled/form-element.js";
|
|
@@ -13,7 +13,7 @@ import { t as x } from "../bundled/class-names.js";
|
|
|
13
13
|
import { n as S, t as C } from "../bundled/delegates-aria.js";
|
|
14
14
|
import { n as w } from "../bundled/form-associated.js";
|
|
15
15
|
import { i as T, t as E } from "../bundled/definition6.js";
|
|
16
|
-
import {
|
|
16
|
+
import { r as D, t as O } from "../bundled/mixins.js";
|
|
17
17
|
//#region src/lib/file-picker/file-picker.scss?inline
|
|
18
18
|
var k = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{max-inline-size:400px;display:block}:host([disabled]){cursor:not-allowed}.base{block-size:inherit;max-block-size:inherit;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;display:flex}.control-wrapper{block-size:inherit;max-block-size:inherit;flex-direction:column;gap:4px;display:flex}.control{box-sizing:border-box;border:1px dashed var(--vvd-color-neutral-400);background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);border-radius:8px;outline:none;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-block-size:52px;inline-size:100%;padding:16px;transition:all .3s;display:flex;position:relative}.control .upload-text{color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;justify-content:center;align-items:center;transition:all .3s;display:flex}.control.disabled{border-color:var(--vvd-color-neutral-300);background-color:var(--vvd-color-neutral-100);box-shadow:none;color:var(--vvd-color-neutral-300);pointer-events:none;transform:none}.control.disabled .upload-text{color:var(--vvd-color-neutral-300)}@media (hover:hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--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))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}@media (hover:hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}}.control:active{transform:translateY(0);box-shadow:0 1px 4px #0000001a}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s;animation:2s ease-in-out infinite subtle-pulse}@media (hover:hover){.control:hover .upload-icon{color:var(--vvd-color-cta-700);animation:none;transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{color:var(--vvd-color-neutral-800);animation:none;transform:scale(1.15)}.control.disabled .upload-icon{color:var(--vvd-color-neutral-300);animation:none}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{box-sizing:border-box;border:1px solid var(--vvd-color-neutral-300);background-color:var(--file-picker-list-item-background-color,var(--vvd-color-canvas));border-radius:8px;grid-template-rows:auto auto;grid-template-columns:1fr auto;inline-size:100%;padding:8px;display:grid}.preview .details{min-width:0;flex-direction:column;max-inline-size:100%;display:flex}.preview .details .filename{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);align-items:center;gap:4px;margin-block-start:4px;display:flex}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{grid-area:1/2/-1/-1;align-self:center;display:inline}.preview-list{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.preview-list{flex-direction:column;gap:12px;margin-block-start:12px;display:flex;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{visibility:hidden;width:0;height:0;position:absolute;top:0;left:0}";
|
|
19
19
|
//#endregion
|
|
@@ -70,7 +70,7 @@ var F = class extends b(O(y(v(C(e(w(l))))))) {
|
|
|
70
70
|
}, this.proxy = document.createElement("input"), this.setFormValue = (e, t) => {
|
|
71
71
|
typeof e != "string" && super.setFormValue(e, t);
|
|
72
72
|
}, this._customValidationError = null, this.#r = { handleChange: () => {
|
|
73
|
-
this._customValidationError = this.#i.observe(this,
|
|
73
|
+
this._customValidationError = this.#i.observe(this, n.default);
|
|
74
74
|
} }, this._dragHover = !1, this._allFiles = [];
|
|
75
75
|
}
|
|
76
76
|
nameChanged(e, t) {
|
|
@@ -104,7 +104,7 @@ var F = class extends b(O(y(v(C(e(w(l))))))) {
|
|
|
104
104
|
#r;
|
|
105
105
|
#i;
|
|
106
106
|
#a() {
|
|
107
|
-
this.#i =
|
|
107
|
+
this.#i = o.binding(() => this.#n(), this.#r, !0), this.#r.handleChange();
|
|
108
108
|
}
|
|
109
109
|
#o() {
|
|
110
110
|
this.#i.dispose();
|
|
@@ -175,17 +175,17 @@ var F = class extends b(O(y(v(C(e(w(l))))))) {
|
|
|
175
175
|
return this.locale.common.useCommaAsDecimalSeparator ? t.replace(".", ",") : t;
|
|
176
176
|
}
|
|
177
177
|
};
|
|
178
|
-
h([
|
|
178
|
+
h([s({
|
|
179
179
|
attribute: "single-file",
|
|
180
180
|
mode: "boolean"
|
|
181
|
-
})], F.prototype, "singleFile", void 0), h([
|
|
181
|
+
})], F.prototype, "singleFile", void 0), h([s({
|
|
182
182
|
attribute: "max-files",
|
|
183
|
-
converter:
|
|
183
|
+
converter: i,
|
|
184
184
|
mode: "fromView"
|
|
185
|
-
})], F.prototype, "maxFiles", void 0), h([
|
|
185
|
+
})], F.prototype, "maxFiles", void 0), h([s({
|
|
186
186
|
mode: "fromView",
|
|
187
187
|
attribute: "max-file-size"
|
|
188
|
-
})], F.prototype, "maxFileSize", void 0), h([
|
|
188
|
+
})], F.prototype, "maxFileSize", void 0), h([s], F.prototype, "accept", void 0), h([s], F.prototype, "size", void 0), h([s({ attribute: "invalid-file-type-error" })], F.prototype, "invalidFileTypeError", void 0), h([s({ attribute: "max-files-exceeded-error" })], F.prototype, "maxFilesExceededError", void 0), h([s({ attribute: "file-too-big-error" })], F.prototype, "fileTooBigError", void 0), h([t], F.prototype, "_customValidationError", void 0), h([t], F.prototype, "_dragHover", void 0), h([t], F.prototype, "_allFiles", void 0), h([a], F.prototype, "_validatedFiles", null);
|
|
189
189
|
//#endregion
|
|
190
190
|
//#region src/lib/file-picker/file-picker.template.ts
|
|
191
191
|
var I = 1e3, L = {
|
|
@@ -214,23 +214,23 @@ var I = 1e3, L = {
|
|
|
214
214
|
}
|
|
215
215
|
n = Math.round(10 * n) / 10;
|
|
216
216
|
}
|
|
217
|
-
return
|
|
217
|
+
return c`<strong>${e._formatNumber(n)}</strong>
|
|
218
218
|
${L[r]}`;
|
|
219
219
|
}, z = ({ size: e, _dragHover: t, disabled: n }) => x("control", [`size-${e}`, !!e], ["drag-hover", t], ["disabled", n]);
|
|
220
220
|
//#endregion
|
|
221
221
|
//#region src/lib/file-picker/index.ts
|
|
222
|
-
|
|
222
|
+
r(u("file-picker", F, (e) => {
|
|
223
223
|
let t = e.tagFor(g), n = e.tagFor(T);
|
|
224
|
-
return
|
|
224
|
+
return c`
|
|
225
225
|
<div class="base">
|
|
226
226
|
<div class="label-wrapper" ?hidden=${(e) => !e.label && !e._hasContextualHelp}>
|
|
227
|
-
${
|
|
228
|
-
<slot name="contextual-help" ${
|
|
227
|
+
${m((e) => e.label, c`<label class="label">${(e) => e.label}</label>`)}
|
|
228
|
+
<slot name="contextual-help" ${f("_contextualHelpSlottedContent")}></slot>
|
|
229
229
|
</div>
|
|
230
230
|
<div class="control-wrapper">
|
|
231
231
|
<button
|
|
232
232
|
type="button"
|
|
233
|
-
${
|
|
233
|
+
${p("control")}
|
|
234
234
|
class="${z}"
|
|
235
235
|
?disabled="${(e) => e.disabled}"
|
|
236
236
|
@click="${(e) => e._onControlClick()}"
|
|
@@ -240,8 +240,7 @@ a(c("file-picker", F, (e) => {
|
|
|
240
240
|
@dragleave="${(e, t) => e._onDragLeave(t.event)}"
|
|
241
241
|
@drop="${(e, t) => e._onDrop(t.event)}"
|
|
242
242
|
@dragend="${(e) => e._onDragEnd()}"
|
|
243
|
-
|
|
244
|
-
${S()}
|
|
243
|
+
${S({ ariaDescribedBy: (e) => e._feedbackDescribedBy })}
|
|
245
244
|
>
|
|
246
245
|
<${t}
|
|
247
246
|
class="upload-icon"
|
|
@@ -254,7 +253,7 @@ a(c("file-picker", F, (e) => {
|
|
|
254
253
|
${(t) => t._getFeedbackTemplate(e)}
|
|
255
254
|
</div>
|
|
256
255
|
<div class="preview-list">
|
|
257
|
-
${d((e) => e._validatedFiles,
|
|
256
|
+
${d((e) => e._validatedFiles, c`
|
|
258
257
|
<div class="${(e) => x("preview", ["has-error", !!e.validationError])}">
|
|
259
258
|
<div class="details">
|
|
260
259
|
<div class="filename">${(e) => e.file.name}</div>
|
|
@@ -273,7 +272,7 @@ a(c("file-picker", F, (e) => {
|
|
|
273
272
|
</div>
|
|
274
273
|
</div>
|
|
275
274
|
<input
|
|
276
|
-
${
|
|
275
|
+
${p("_hiddenInput")}
|
|
277
276
|
class="hidden-input"
|
|
278
277
|
aria-hidden="true"
|
|
279
278
|
type="file"
|
package/flag/index.cjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/definition.cjs`),r=require(`../bundled/numberConverter.cjs`),i=require(`../bundled/decorate.cjs`),a=require(`../bundled/class-names.cjs`),o=require(`../bundled/utils.cjs`);var s=`:host{vertical-align:sub;display:inline-block}.control.size--6{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_flag-block-size:1em}.control{margin:unset;block-size:var(--_flag-block-size);color:currentColor;contain:strict;inline-size:var(--_flag-block-size);display:flex}svg{block-size:inherit;inline-size:inherit;margin:auto}`,c=500,l=2e3,u=class extends e.t{constructor(...e){super(...e),this.flagLoaded=!1,this.#e=0,this.#t=null}#e;#t;async codeChanged(){let e=++this.#e;this.#t&&this.#t.abort(),this.#t=new AbortController;let t=o.t(this.code);if(!t){this._svg=``,this.flagLoaded=!0;return}this._svg=void 0,this.flagLoaded=!1;let n=setTimeout(()=>{this.#e===e&&(this._svg=r.r,n=setTimeout(()=>{this.#e===e&&this._svg===r.r&&(this._svg=void 0)},l))},c);try{let n=await r.n(t,this.#t.signal);this.#e===e&&(this._svg=n)}catch{this.#e===e&&(this._svg=void 0)}finally{this.#e===e&&(clearTimeout(n),this.flagLoaded=!0)}}};i.t([e.
|
|
1
|
+
const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/definition.cjs`),r=require(`../bundled/numberConverter.cjs`),i=require(`../bundled/decorate.cjs`),a=require(`../bundled/class-names.cjs`),o=require(`../bundled/utils.cjs`);var s=`:host{vertical-align:sub;display:inline-block}.control.size--6{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_flag-block-size:1em}.control{margin:unset;block-size:var(--_flag-block-size);color:currentColor;contain:strict;inline-size:var(--_flag-block-size);display:flex}svg{block-size:inherit;inline-size:inherit;margin:auto}`,c=500,l=2e3,u=class extends e.t{constructor(...e){super(...e),this.flagLoaded=!1,this.#e=0,this.#t=null}#e;#t;async codeChanged(){let e=++this.#e;this.#t&&this.#t.abort(),this.#t=new AbortController;let t=o.t(this.code);if(!t){this._svg=``,this.flagLoaded=!0;return}this._svg=void 0,this.flagLoaded=!1;let n=setTimeout(()=>{this.#e===e&&(this._svg=r.r,n=setTimeout(()=>{this.#e===e&&this._svg===r.r&&(this._svg=void 0)},l))},c);try{let n=await r.n(t,this.#t.signal);this.#e===e&&(this._svg=n)}catch{this.#e===e&&(this._svg=void 0)}finally{this.#e===e&&(clearTimeout(n),this.flagLoaded=!0)}}};i.t([e.m],u.prototype,`code`,void 0),i.t([e.m],u.prototype,`label`,void 0),i.t([e.m({converter:r.t})],u.prototype,`size`,void 0),i.t([e.A],u.prototype,`_svg`,void 0),i.t([e.A],u.prototype,`flagLoaded`,void 0);var d=({size:e})=>a.t(`control`,[`size-${e}`,typeof e==`number`]),f=e.u(`flag`,u,r=>{let i=r.tagFor(n.r),a=e=>!e.label||e.label.trim().length===0;return e.p`
|
|
2
2
|
<figure
|
|
3
3
|
class="${d}"
|
|
4
4
|
?aria-hidden="${e=>a(e)}"
|
|
5
5
|
?aria-busy="${e=>!e?.flagLoaded}"
|
|
6
6
|
>
|
|
7
|
-
${t.t(e=>e?.flagLoaded&&e?._svg,t=>e.
|
|
7
|
+
${t.t(e=>e?.flagLoaded&&e?._svg,t=>e.p`${e.p.partial(t._svg)}`)}
|
|
8
8
|
<${i} class="label">${e=>e?.label}</${i}>
|
|
9
9
|
</figure>
|
|
10
|
-
`},[n.n],{styles:s});e.
|
|
10
|
+
`},[n.n],{styles:s});e.d(f)();
|
package/flag/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { A as e, d as t, m as n, p as r, t as i, u as a } from "../bundled/vivid-element.js";
|
|
2
2
|
import { t as o } from "../bundled/when.js";
|
|
3
3
|
import { n as s, r as c } from "../bundled/definition.js";
|
|
4
4
|
import { n as l, r as u, t as d } from "../bundled/numberConverter.js";
|
|
@@ -39,21 +39,21 @@ var h = ":host{vertical-align:sub;display:inline-block}.control.size--6{--_flag-
|
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
};
|
|
42
|
-
f([
|
|
42
|
+
f([n], v.prototype, "code", void 0), f([n], v.prototype, "label", void 0), f([n({ converter: d })], v.prototype, "size", void 0), f([e], v.prototype, "_svg", void 0), f([e], v.prototype, "flagLoaded", void 0);
|
|
43
43
|
//#endregion
|
|
44
44
|
//#region src/lib/flag/flag.template.ts
|
|
45
45
|
var y = ({ size: e }) => p("control", [`size-${e}`, typeof e == "number"]);
|
|
46
46
|
//#endregion
|
|
47
47
|
//#region src/lib/flag/index.ts
|
|
48
|
-
t(
|
|
49
|
-
let t = e.tagFor(c),
|
|
50
|
-
return
|
|
48
|
+
t(a("flag", v, (e) => {
|
|
49
|
+
let t = e.tagFor(c), n = (e) => !e.label || e.label.trim().length === 0;
|
|
50
|
+
return r`
|
|
51
51
|
<figure
|
|
52
52
|
class="${y}"
|
|
53
|
-
?aria-hidden="${(e) =>
|
|
53
|
+
?aria-hidden="${(e) => n(e)}"
|
|
54
54
|
?aria-busy="${(e) => !e?.flagLoaded}"
|
|
55
55
|
>
|
|
56
|
-
${o((e) => e?.flagLoaded && e?._svg, (e) =>
|
|
56
|
+
${o((e) => e?.flagLoaded && e?._svg, (e) => r`${r.partial(e._svg)}`)}
|
|
57
57
|
<${t} class="label">${(e) => e?.label}</${t}>
|
|
58
58
|
</figure>
|
|
59
59
|
`;
|
package/header/definition.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
-
const require_definition = require("../unbundled/
|
|
2
|
+
const require_definition = require("../unbundled/definition44.cjs");
|
|
3
3
|
exports.VwcHeaderElement = require_definition.Header;
|
|
4
4
|
exports.headerDefinition = require_definition.headerDefinition;
|
|
5
5
|
exports.registerHeader = require_definition.registerHeader;
|
package/header/definition.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as registerHeader, r as Header, t as headerDefinition } from "../unbundled/
|
|
1
|
+
import { n as registerHeader, r as Header, t as headerDefinition } from "../unbundled/definition44.js";
|
|
2
2
|
export { Header as VwcHeaderElement, headerDefinition, registerHeader };
|
package/header/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/decorate.cjs`),n=require(`../bundled/class-names.cjs`),r=require(`../bundled/delegates-aria.cjs`),i=require(`../bundled/definition7.cjs`);var a=`.base{z-index:1;block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{align-items:center;column-gap:4px;display:inline-flex}.container{box-sizing:border-box;background-color:var(--header-bg-color,var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);justify-content:space-between;column-gap:12px;padding-block:8px;padding-inline:16px;display:flex}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}`,o=class extends r.t(e.t){constructor(...e){super(...e),this.elevationShadow=!1,this.alternate=!1}};t.t([e.
|
|
1
|
+
const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/decorate.cjs`),n=require(`../bundled/class-names.cjs`),r=require(`../bundled/delegates-aria.cjs`),i=require(`../bundled/definition7.cjs`);var a=`.base{z-index:1;block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{align-items:center;column-gap:4px;display:inline-flex}.container{box-sizing:border-box;background-color:var(--header-bg-color,var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);justify-content:space-between;column-gap:12px;padding-block:8px;padding-inline:16px;display:flex}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}`,o=class extends r.t(e.t){constructor(...e){super(...e),this.elevationShadow=!1,this.alternate=!1}};t.t([e.m({attribute:`elevation-shadow`,mode:`boolean`})],o.prototype,`elevationShadow`,void 0),t.t([e.m({mode:`boolean`})],o.prototype,`alternate`,void 0);var s=({alternate:e})=>n.t([`vvd-theme-alternate`,!!e]),c=e.u(`header`,o,t=>{let n=t.tagFor(i.r);return e.p`
|
|
2
2
|
<${n} dp="4" ?no-shadow=${e=>!e.elevationShadow}>
|
|
3
3
|
<header class="base" part="base" ${r.n()}>
|
|
4
4
|
<!-- a container is needed to distinguish the surface background color of the
|
|
@@ -16,4 +16,4 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/decorate.c
|
|
|
16
16
|
<div class="app-content">
|
|
17
17
|
<slot name="app-content"></slot>
|
|
18
18
|
</div>
|
|
19
|
-
`},[i.t],{styles:a});e.
|
|
19
|
+
`},[i.t],{styles:a});e.d(c)();
|
package/header/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { d as e, m as t, p as n, t as r, u as i } from "../bundled/vivid-element.js";
|
|
2
2
|
import { t as a } from "../bundled/decorate.js";
|
|
3
3
|
import { t as o } from "../bundled/class-names.js";
|
|
4
4
|
import { n as s, t as c } from "../bundled/delegates-aria.js";
|
|
@@ -9,19 +9,19 @@ var d = ".base{z-index:1;block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vv
|
|
|
9
9
|
super(...e), this.elevationShadow = !1, this.alternate = !1;
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
|
-
a([
|
|
12
|
+
a([t({
|
|
13
13
|
attribute: "elevation-shadow",
|
|
14
14
|
mode: "boolean"
|
|
15
|
-
})], f.prototype, "elevationShadow", void 0), a([
|
|
15
|
+
})], f.prototype, "elevationShadow", void 0), a([t({ mode: "boolean" })], f.prototype, "alternate", void 0);
|
|
16
16
|
//#endregion
|
|
17
17
|
//#region src/lib/header/header.template.ts
|
|
18
18
|
var p = ({ alternate: e }) => o(["vvd-theme-alternate", !!e]);
|
|
19
19
|
//#endregion
|
|
20
20
|
//#region src/lib/header/index.ts
|
|
21
|
-
e(
|
|
22
|
-
let
|
|
23
|
-
return
|
|
24
|
-
<${
|
|
21
|
+
e(i("header", f, (e) => {
|
|
22
|
+
let t = e.tagFor(l);
|
|
23
|
+
return n`
|
|
24
|
+
<${t} dp="4" ?no-shadow=${(e) => !e.elevationShadow}>
|
|
25
25
|
<header class="base" part="base" ${s()}>
|
|
26
26
|
<!-- a container is needed to distinguish the surface background color of the
|
|
27
27
|
element from its shadow when applying elevation with alternate -->
|
|
@@ -34,7 +34,7 @@ e(n("header", f, (e) => {
|
|
|
34
34
|
</section>
|
|
35
35
|
</div>
|
|
36
36
|
</header>
|
|
37
|
-
</${
|
|
37
|
+
</${t}>
|
|
38
38
|
<div class="app-content">
|
|
39
39
|
<slot name="app-content"></slot>
|
|
40
40
|
</div>
|
package/icon/definition.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
-
const require_definition = require("../unbundled/
|
|
2
|
+
const require_definition = require("../unbundled/definition.cjs");
|
|
3
3
|
exports.VwcIconElement = require_definition.Icon;
|
|
4
4
|
exports.iconDefinition = require_definition.iconDefinition;
|
|
5
5
|
exports.registerIcon = require_definition.registerIcon;
|
package/icon/definition.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as registerIcon, r as Icon, t as iconDefinition } from "../unbundled/
|
|
1
|
+
import { n as registerIcon, r as Icon, t as iconDefinition } from "../unbundled/definition.js";
|
|
2
2
|
export { Icon as VwcIconElement, iconDefinition, registerIcon };
|