@vonage/vivid 5.2.0 → 5.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/accordion-item/definition.cjs +2 -1
- package/accordion-item/definition.js +3 -2
- package/alert/definition.cjs +1 -1
- package/alert/definition.js +2 -2
- package/alert/index.cjs +1 -1
- package/alert/index.js +1 -1
- package/audio-player/definition.cjs +4 -2
- package/audio-player/definition.js +4 -2
- package/audio-player/index.cjs +5 -3
- package/audio-player/index.js +5 -3
- package/badge/definition.js +1 -1
- package/badge/index.cjs +2 -2
- package/badge/index.js +4 -4
- package/banner/definition.js +1 -1
- package/banner/index.cjs +3 -3
- package/banner/index.js +6 -6
- package/breadcrumb-item/index.cjs +1 -1
- package/breadcrumb-item/index.js +1 -1
- package/bundled/affix.cjs +7 -7
- package/bundled/affix.js +5 -5
- package/bundled/anchored.cjs +1 -1
- package/bundled/anchored.js +6 -6
- package/bundled/attribute-binding-behaviour.cjs +1 -1
- package/bundled/attribute-binding-behaviour.js +15 -13
- package/bundled/base-color-picker.cjs +13 -0
- package/bundled/base-color-picker.js +194 -0
- package/bundled/button.cjs +1 -1
- package/bundled/button.js +2 -2
- package/bundled/calendar-picker.template.cjs +7 -7
- package/bundled/calendar-picker.template.js +118 -118
- package/bundled/char-count.cjs +1 -1
- package/bundled/char-count.js +1 -1
- package/bundled/children.cjs +1 -1
- package/bundled/children.js +28 -20
- package/bundled/definition.cjs +3 -3
- package/bundled/definition.js +38 -38
- package/bundled/definition10.cjs +72 -18
- package/bundled/definition10.js +351 -65
- package/bundled/definition11.cjs +19 -10
- package/bundled/definition11.js +217 -36
- package/bundled/definition12.cjs +10 -1
- package/bundled/definition12.js +38 -14
- package/bundled/definition13.cjs +1 -73
- package/bundled/definition13.js +15 -354
- package/bundled/definition15.cjs +1 -1
- package/bundled/definition15.js +1 -1
- package/bundled/definition16.cjs +2 -2
- package/bundled/definition16.js +8 -8
- package/bundled/definition17.cjs +7 -7
- package/bundled/definition17.js +17 -17
- package/bundled/definition19.cjs +23 -24
- package/bundled/definition19.js +151 -163
- package/bundled/definition2.cjs +9 -5
- package/bundled/definition2.js +21 -17
- package/bundled/definition22.cjs +9 -9
- package/bundled/definition22.js +31 -31
- package/bundled/definition3.cjs +1 -1
- package/bundled/definition3.js +1 -1
- package/bundled/definition6.cjs +3 -3
- package/bundled/definition6.js +28 -28
- package/bundled/definition7.cjs +1 -1
- package/bundled/definition7.js +6 -6
- package/bundled/definition8.cjs +2 -2
- package/bundled/definition8.js +4 -4
- package/bundled/definition9.cjs +5 -5
- package/bundled/definition9.js +394 -392
- package/bundled/delegates-aria.cjs +1 -1
- package/bundled/delegates-aria.js +59 -46
- package/bundled/form-associated.cjs +1 -1
- package/bundled/form-associated.js +3 -3
- package/bundled/host-semantics.cjs +1 -1
- package/bundled/host-semantics.js +48 -34
- package/bundled/listbox.cjs +1 -1
- package/bundled/listbox.js +82 -102
- package/bundled/localized.cjs +1 -1
- package/bundled/localized.js +51 -36
- package/bundled/mixins.cjs +18 -18
- package/bundled/mixins.js +99 -93
- package/bundled/normalize.cjs +1 -0
- package/bundled/normalize.js +7 -0
- package/bundled/picker-field.template.cjs +1 -1
- package/bundled/picker-field.template.js +4 -4
- package/bundled/ref.cjs +1 -1
- package/bundled/ref.js +8 -25
- package/bundled/repeat.cjs +1 -1
- package/bundled/repeat.js +459 -233
- package/bundled/slider.template.cjs +1 -1
- package/bundled/slider.template.js +2 -2
- package/bundled/slotted.cjs +1 -1
- package/bundled/slotted.js +62 -45
- package/bundled/time-selection-picker.template.cjs +1 -1
- package/bundled/time-selection-picker.template.js +5 -5
- package/bundled/vivid-element.cjs +5 -1
- package/bundled/vivid-element.js +2159 -1162
- package/bundled/when.cjs +1 -1
- package/bundled/when.js +8 -7
- package/calendar/definition.cjs +1 -1
- package/calendar/definition.js +2 -2
- package/calendar/index.cjs +1 -1
- package/calendar/index.js +15 -15
- package/calendar-event/index.cjs +1 -1
- package/calendar-event/index.js +1 -1
- package/card/definition.cjs +11 -3
- package/card/definition.js +11 -3
- package/card/index.cjs +19 -11
- package/card/index.js +35 -27
- package/color-picker/definition.cjs +1079 -0
- package/color-picker/definition.js +1073 -0
- package/color-picker/index.cjs +127 -0
- package/color-picker/index.js +726 -0
- package/combobox/definition.cjs +8 -28
- package/combobox/definition.js +10 -30
- package/combobox/index.cjs +7 -7
- package/combobox/index.js +60 -74
- package/contextual-help/index.cjs +1 -1
- package/contextual-help/index.js +1 -1
- package/custom-elements.json +1670 -163
- package/data-grid/definition.cjs +862 -27
- package/data-grid/definition.js +863 -28
- package/data-grid/index.cjs +25 -25
- package/data-grid/index.js +175 -168
- package/date-picker/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 +2 -2
- package/date-time-picker/definition.cjs +1 -1
- package/date-time-picker/definition.js +1 -1
- package/date-time-picker/index.cjs +1 -1
- package/date-time-picker/index.js +2 -2
- package/dial-pad/definition.cjs +4 -0
- package/dial-pad/definition.js +4 -0
- package/dial-pad/index.cjs +3 -3
- package/dial-pad/index.js +42 -39
- package/dialog/definition.cjs +6 -3
- package/dialog/definition.js +6 -3
- package/dialog/index.cjs +22 -19
- package/dialog/index.js +48 -45
- package/elevation/definition.cjs +1 -1
- package/elevation/definition.js +1 -1
- package/empty-state/definition.cjs +7 -2
- package/empty-state/definition.js +7 -2
- package/empty-state/index.cjs +10 -5
- package/empty-state/index.js +18 -13
- package/fab/definition.js +1 -1
- package/fab/index.cjs +2 -2
- package/fab/index.js +4 -4
- package/file-picker/definition.cjs +2 -2
- package/file-picker/definition.js +3 -3
- package/file-picker/index.cjs +1 -1
- package/file-picker/index.js +4 -4
- package/header/definition.cjs +1 -1
- package/header/definition.js +1 -1
- package/icon/definition.cjs +10 -6
- package/icon/definition.js +10 -6
- package/index.cjs +7 -4
- package/index.js +3 -3
- package/lib/accordion/accordion.d.ts +1 -1
- package/lib/accordion/definition.d.ts +1 -1
- package/lib/accordion-item/accordion-item.d.ts +2 -2
- package/lib/action-group/action-group.d.ts +2 -2
- package/lib/alert/alert.d.ts +4 -4
- package/lib/audio-player/audio-player.d.ts +3 -3
- package/lib/avatar/avatar.d.ts +2 -2
- package/lib/badge/badge.d.ts +2 -2
- package/lib/banner/banner.d.ts +6 -6
- package/lib/breadcrumb/breadcrumb.d.ts +2 -2
- package/lib/breadcrumb-item/breadcrumb-item.d.ts +2 -2
- package/lib/button/button.d.ts +6 -6
- package/lib/button/button.template.d.ts +2 -1
- package/lib/calendar/calendar.d.ts +1 -1
- package/lib/calendar-event/calendar-event.d.ts +2 -2
- package/lib/card/card.d.ts +2 -2
- package/lib/checkbox/checkbox.d.ts +12 -12
- package/lib/color-picker/color-picker.d.ts +2420 -0
- package/lib/color-picker/color-picker.template.d.ts +3 -0
- package/lib/color-picker/definition.d.ts +4 -0
- package/lib/color-picker/locale.d.ts +9 -0
- package/lib/combobox/combobox.d.ts +15 -14
- package/lib/combobox/combobox.options.d.ts +1 -1
- package/lib/components.d.ts +1 -0
- package/lib/data-grid/data-grid-cell.d.ts +4 -4
- package/lib/data-grid/data-grid-row.d.ts +3 -4
- package/lib/data-grid/data-grid.d.ts +1 -2
- package/lib/date-picker/date-picker.d.ts +54 -54
- package/lib/date-range-picker/date-range-picker.d.ts +28 -28
- package/lib/date-time-picker/date-time-picker.d.ts +56 -56
- package/lib/dial-pad/dial-pad.d.ts +3 -2
- package/lib/dialog/dialog.d.ts +4 -4
- package/lib/divider/divider.d.ts +3 -3
- package/lib/fab/fab.d.ts +2 -2
- package/lib/file-picker/file-picker.d.ts +14 -14
- package/lib/header/header.d.ts +2 -2
- package/lib/menu/menu.d.ts +4 -4
- package/lib/menu-item/menu-item-role.d.ts +1 -1
- package/lib/menu-item/menu-item.d.ts +4 -4
- package/lib/nav/nav.d.ts +2 -2
- package/lib/nav-disclosure/nav-disclosure.d.ts +4 -4
- package/lib/nav-item/nav-item.d.ts +4 -4
- package/lib/note/note.d.ts +2 -2
- package/lib/number-field/number-field.d.ts +18 -18
- package/lib/option/option.d.ts +4 -4
- package/lib/pagination/pagination.d.ts +2 -2
- package/lib/popup/popup.d.ts +1 -1
- package/lib/progress/progress.d.ts +2 -2
- package/lib/progress-ring/progress-ring.d.ts +2 -2
- package/lib/radio/radio.d.ts +6 -6
- package/lib/radio-group/radio-group.d.ts +2 -2
- package/lib/range-slider/range-slider.d.ts +6 -6
- package/lib/rich-text-editor/menubar/menubar.d.ts +2 -2
- package/lib/rich-text-editor/rich-text-editor.d.ts +2 -2
- package/lib/searchable-select/locale.d.ts +4 -0
- package/lib/searchable-select/option-tag.d.ts +2 -2
- package/lib/searchable-select/searchable-select.d.ts +21 -18
- package/lib/select/select.d.ts +19 -17
- package/lib/selectable-box/selectable-box.d.ts +2 -2
- package/lib/simple-color-picker/locale.d.ts +0 -1
- package/lib/simple-color-picker/simple-color-picker.d.ts +47 -821
- package/lib/slider/slider.d.ts +7 -7
- package/lib/split-button/split-button.d.ts +6 -6
- package/lib/switch/switch.d.ts +4 -4
- package/lib/tab/tab.d.ts +6 -6
- package/lib/tab-panel/tab-panel.d.ts +2 -2
- package/lib/tabs/tabs.d.ts +2 -2
- package/lib/tag/tag.d.ts +6 -6
- package/lib/tag-group/tag-group.d.ts +2 -2
- package/lib/tag-name-map.d.ts +2 -1
- package/lib/text-area/text-area.d.ts +17 -17
- package/lib/text-field/text-field.d.ts +19 -19
- package/lib/time-picker/time-picker.d.ts +28 -28
- package/lib/toggletip/toggletip.d.ts +4 -4
- package/lib/tooltip/tooltip.d.ts +2 -2
- package/lib/tree-item/tree-item.d.ts +4 -4
- package/lib/tree-view/tree-view.d.ts +2 -2
- package/lib/video-player/video-player.d.ts +2 -2
- package/locales/de-DE.cjs +17 -2
- package/locales/de-DE.js +17 -2
- package/locales/en-GB.cjs +17 -2
- package/locales/en-GB.js +17 -2
- package/locales/en-US.cjs +17 -2
- package/locales/en-US.js +17 -2
- package/locales/ja-JP.cjs +17 -2
- package/locales/ja-JP.js +17 -2
- package/locales/zh-CN.cjs +17 -2
- package/locales/zh-CN.js +17 -2
- package/menu/definition.cjs +6 -6
- package/menu/definition.js +7 -7
- package/nav-disclosure/definition.js +1 -1
- package/nav-item/definition.js +1 -1
- package/note/definition.js +1 -1
- package/note/index.cjs +2 -2
- package/note/index.js +4 -4
- package/number-field/definition.cjs +1 -1
- package/number-field/definition.js +3 -3
- package/number-field/index.cjs +5 -5
- package/number-field/index.js +21 -21
- package/option/definition.cjs +6 -77
- package/option/definition.js +3 -78
- package/option/index.cjs +1 -1
- package/option/index.js +1 -1
- package/package.json +34 -8
- package/pagination/definition.cjs +2 -1
- package/pagination/definition.js +2 -1
- package/pagination/index.cjs +12 -12
- package/pagination/index.js +59 -59
- package/popup/definition.cjs +2 -2
- package/popup/definition.js +2 -2
- package/progress/index.cjs +1 -1
- package/progress/index.js +1 -1
- package/radio/definition.cjs +9 -9
- package/radio/definition.js +10 -10
- package/radio-group/definition.cjs +2 -1
- package/radio-group/definition.js +2 -1
- package/radio-group/index.cjs +5 -5
- package/radio-group/index.js +80 -77
- package/range-slider/definition.cjs +1 -1
- package/range-slider/definition.js +1 -1
- package/range-slider/index.cjs +1 -1
- package/range-slider/index.js +1 -1
- package/rich-text-editor/definition.cjs +3 -4
- package/rich-text-editor/definition.js +3 -4
- package/rich-text-editor/index.cjs +27 -27
- package/rich-text-editor/index.js +1208 -1198
- package/searchable-select/definition.cjs +106 -14
- package/searchable-select/definition.js +107 -15
- package/searchable-select/index.cjs +81 -69
- package/searchable-select/index.js +362 -276
- package/select/definition.cjs +25 -42
- package/select/definition.js +26 -43
- package/selectable-box/definition.cjs +1 -1
- package/selectable-box/definition.js +1 -1
- package/selectable-box/index.cjs +3 -3
- package/selectable-box/index.js +20 -20
- package/shared/aria/aria-change-subscription.d.ts +0 -1
- package/shared/aria/aria-mixin.d.ts +3 -3
- package/shared/aria/delegate-aria-behavior.d.ts +5 -10
- package/shared/aria/delegates-aria.d.ts +3 -3
- package/shared/aria/host-semantics-behavior.d.ts +5 -8
- package/shared/aria/host-semantics.d.ts +3 -3
- package/shared/color-picker/base-color-picker.d.ts +436 -0
- package/shared/color-picker/index.d.ts +1 -0
- package/shared/color-picker/locale.d.ts +3 -0
- package/shared/color-picker/utils.d.ts +1 -0
- package/shared/deprecation/replaced-props.d.ts +317 -2
- package/shared/design-system/defineVividComponent.d.ts +2 -2
- package/shared/feedback/feedback-message.d.ts +2 -2
- package/shared/feedback/mixins.d.ts +4 -4
- package/shared/foundation/button/button.d.ts +4 -4
- package/shared/foundation/form-associated/form-associated.d.ts +4 -4
- package/shared/foundation/listbox/listbox.d.ts +4 -0
- package/shared/foundation/vivid-element/vivid-element.d.ts +335 -8
- package/shared/localization/Locale.d.ts +4 -0
- package/shared/patterns/affix.d.ts +4 -4
- package/shared/patterns/anchored.d.ts +4 -4
- package/shared/patterns/char-count/char-count.d.ts +2 -2
- package/shared/patterns/form-elements/form-element.d.ts +4 -4
- package/shared/patterns/form-elements/with-contextual-help.d.ts +6 -6
- package/shared/patterns/form-elements/with-error-text.d.ts +6 -6
- package/shared/patterns/form-elements/with-success-text.d.ts +2 -2
- package/shared/patterns/linkable.d.ts +2 -2
- package/shared/patterns/localized.d.ts +2 -2
- package/shared/patterns/trapped-focus.d.ts +2 -2
- package/shared/picker-field/mixins/calendar-picker.d.ts +14 -14
- package/shared/picker-field/mixins/calendar-picker.template.d.ts +14 -14
- package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.d.ts +2 -2
- package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +28 -28
- package/shared/picker-field/mixins/single-date-picker.d.ts +40 -40
- package/shared/picker-field/mixins/single-value-picker.d.ts +12 -12
- package/shared/picker-field/mixins/time-selection-picker.d.ts +29 -29
- package/shared/picker-field/mixins/time-selection-picker.template.d.ts +28 -28
- package/shared/picker-field/picker-field.d.ts +14 -14
- package/shared/templating/attribute-binding-behaviour.d.ts +3 -4
- package/shared/templating/render-in-light-dom.d.ts +13 -12
- package/side-drawer/index.cjs +1 -1
- package/side-drawer/index.js +1 -1
- package/simple-color-picker/definition.cjs +29 -216
- package/simple-color-picker/definition.js +30 -217
- package/simple-color-picker/index.cjs +9 -21
- package/simple-color-picker/index.js +71 -185
- package/slider/definition.cjs +1 -1
- package/slider/definition.js +1 -1
- package/split-button/definition.js +1 -1
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/styles/tokens/vivid-2-compat.css +1 -1
- package/switch/index.cjs +2 -2
- package/switch/index.js +4 -4
- package/tab/definition.js +1 -1
- package/tabs/definition.cjs +1 -1
- package/tabs/definition.js +2 -2
- package/tabs/index.cjs +2 -2
- package/tabs/index.js +16 -16
- package/tag/definition.js +1 -1
- package/tag/index.cjs +1 -1
- package/tag/index.js +1 -1
- package/text-area/index.cjs +3 -3
- package/text-area/index.js +8 -8
- package/text-field/definition.cjs +2 -2
- package/text-field/definition.js +4 -4
- package/text-field/index.cjs +1 -1
- package/text-field/index.js +1 -1
- 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 +2 -2
- package/toggletip/definition.cjs +2 -2
- package/toggletip/definition.js +3 -3
- package/tooltip/definition.cjs +1 -1
- package/tooltip/definition.js +1 -1
- package/tree-item/definition.cjs +1 -1
- package/tree-item/definition.js +1 -1
- package/tree-view/definition.cjs +2 -2
- package/tree-view/definition.js +3 -3
- package/tree-view/index.cjs +2 -2
- package/tree-view/index.js +6 -6
- package/unbundled/_commonjsHelpers.cjs +36 -0
- package/unbundled/_commonjsHelpers.js +32 -0
- package/unbundled/affix.cjs +1 -1
- package/unbundled/affix.js +2 -2
- package/unbundled/attribute-binding-behaviour.cjs +11 -10
- package/unbundled/attribute-binding-behaviour.js +11 -10
- package/unbundled/base-color-picker.cjs +278 -0
- package/unbundled/base-color-picker.js +275 -0
- package/unbundled/button.cjs +1 -1
- package/unbundled/button.js +2 -2
- package/unbundled/calendar-picker.template.cjs +4 -4
- package/unbundled/calendar-picker.template.js +5 -5
- package/unbundled/definition.js +1 -1
- package/unbundled/definition2.cjs +1 -1
- package/unbundled/definition2.js +3 -3
- package/unbundled/definition3.cjs +222 -140
- package/unbundled/definition3.js +220 -138
- package/unbundled/definition4.cjs +145 -235
- package/unbundled/definition4.js +143 -233
- package/unbundled/definition5.cjs +269 -27
- package/unbundled/definition5.js +267 -26
- package/unbundled/definition6.cjs +56 -0
- package/unbundled/definition6.js +52 -0
- package/unbundled/delegates-aria.cjs +67 -33
- package/unbundled/delegates-aria.js +69 -35
- package/unbundled/form-associated.cjs +2 -2
- package/unbundled/form-associated.js +3 -3
- package/unbundled/host-semantics.cjs +47 -22
- package/unbundled/host-semantics.js +48 -23
- package/unbundled/listbox.cjs +41 -63
- package/unbundled/listbox.js +39 -61
- package/unbundled/mixins.cjs +34 -27
- package/unbundled/mixins.js +35 -28
- package/unbundled/picker-field.template.cjs +3 -3
- package/unbundled/picker-field.template.js +4 -4
- package/unbundled/slider.template.cjs +1 -1
- package/unbundled/slider.template.js +1 -1
- package/unbundled/time-selection-picker.template.cjs +4 -4
- package/unbundled/time-selection-picker.template.js +5 -5
- package/unbundled/vivid-element.cjs +22 -15
- package/unbundled/vivid-element.js +23 -15
- package/video-player/definition.cjs +69047 -1
- package/video-player/definition.js +69047 -1
- package/video-player/index.cjs +36 -36
- package/video-player/index.js +1895 -1905
- package/visually-hidden/index.cjs +1 -1
- package/visually-hidden/index.js +1 -1
- package/vivid.api.json +719 -224
- package/bundled/option.cjs +0 -1
- package/bundled/option.js +0 -158
- package/unbundled/option.cjs +0 -217
- package/unbundled/option.js +0 -214
package/bundled/definition19.cjs
CHANGED
|
@@ -1,31 +1,30 @@
|
|
|
1
|
-
"use strict";const y=require("./definition9.cjs"),I=require("./definition2.cjs"),w=require("./definition10.cjs"),i=require("./vivid-element.cjs"),_=require("./mixins.cjs"),x=require("./listbox.cjs"),k=require("./host-semantics.cjs"),S=require("./form-associated.cjs"),h=require("./numbers.cjs"),$=require("./with-contextual-help.cjs"),C=require("./with-error-text.cjs"),A=require("./with-success-text.cjs"),E=require("./form-element.cjs"),b=require("./affix.cjs"),D=require("./strings.cjs"),l=require("./key-codes.cjs"),H=require("./option.cjs"),V=require("./definition3.cjs"),q=require("./index.cjs"),u=require("./ref.cjs"),f=require("./when.cjs"),g=require("./slotted.cjs"),F=require("./class-names.cjs"),z=".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control{border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline)}.control{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_select-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;transition:box-shadow .2s,background-color .2s}.control.size-condensed{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_select-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.control.size-condensed:not(.shape-pill){--_select-control-border-radius: 4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));border-radius:8px}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}";var T=Object.defineProperty,L=Object.getOwnPropertyDescriptor,s=(a,e,t,o)=>{for(var n=o>1?void 0:o?L(e,t):e,c=a.length-1,d;c>=0;c--)(d=a[c])&&(n=(o?d(e,t,n):d(n))||n);return o&&n&&T(e,t,n),n};class r extends _.WithLightDOMFeedback($.WithContextualHelp(C.WithErrorText(A.WithSuccessText(E.FormElement(k.HostSemantics(b.AffixIconWithTrailing(S.FormAssociated(x.Listbox)))))))){constructor(){super(...arguments),this.proxy=document.createElement("select"),this.activeIndex=-1,this.rangeStartIndex=-1,this.open=!1,this.listboxId=D.uniqueId("listbox-"),this.maxHeight=0,this.fixedDropdown=!1,this.placeholderOption=null,this._feedbackWrapper=null}get activeOption(){return this.options[this.activeIndex]}get checkedOptions(){return this.options.filter(e=>e.checked)}get firstSelectedOptionIndex(){return this.options.indexOf(this.firstSelectedOption)}activeIndexChanged(e,t){this._activeDescendant=this.options[t]?.id??"",this.focusAndScrollOptionIntoView()}checkActiveIndex(){const e=this.activeOption;e&&(e.checked=!0)}checkFirstOption(e){e?(this.rangeStartIndex===-1&&(this.rangeStartIndex=this.activeIndex+1),this.options.forEach((t,o)=>{t.checked=h.inRange(o,this.rangeStartIndex)})):this.uncheckAllOptions(),this.activeIndex=0,this.checkActiveIndex()}checkLastOption(e){e?(this.rangeStartIndex===-1&&(this.rangeStartIndex=this.activeIndex),this.options.forEach((t,o)=>{t.checked=h.inRange(o,this.rangeStartIndex,this.length)})):this.uncheckAllOptions(),this.activeIndex=this.length-1,this.checkActiveIndex()}checkNextOption(e){e?(this.rangeStartIndex===-1&&(this.rangeStartIndex=this.activeIndex),this.options.forEach((t,o)=>{t.checked=h.inRange(o,this.rangeStartIndex,this.activeIndex+1)})):this.uncheckAllOptions(),this.activeIndex+=this.activeIndex<this.length-1?1:0,this.checkActiveIndex()}checkPreviousOption(e){e?(this.rangeStartIndex===-1&&(this.rangeStartIndex=this.activeIndex),this.checkedOptions.length===1&&(this.rangeStartIndex+=1),this.options.forEach((t,o)=>{t.checked=h.inRange(o,this.activeIndex,this.rangeStartIndex)})):this.uncheckAllOptions(),this.activeIndex-=this.activeIndex>0?1:0,this.checkActiveIndex()}focusAndScrollOptionIntoView(){super.focusAndScrollOptionIntoView(this.activeOption)}focusinHandler(e){if(!this.multiple)return super.focusinHandler(e);!this.shouldSkipFocus&&e.target===e.currentTarget&&(this.uncheckAllOptions(),this.activeIndex===-1&&(this.activeIndex=this.firstSelectedOptionIndex!==-1?this.firstSelectedOptionIndex:0),this.checkActiveIndex(),this.setSelectedOptions(),this.focusAndScrollOptionIntoView()),this.shouldSkipFocus=!1}setSelectedOptions(){if(!this.multiple){super.setSelectedOptions();return}this.$fastController.isConnected&&this.options&&(this.selectedOptions=this.options.filter(e=>e.selected),this.focusAndScrollOptionIntoView())}toggleSelectedForAllCheckedOptions(){const e=this.checkedOptions.filter(o=>!o.disabled),t=!e.every(o=>o.selected);e.forEach(o=>o.selected=t),this.selectedIndex=this.options.indexOf(e[e.length-1]),this.setSelectedOptions(),this.updateValue(!0)}typeaheadBufferChanged(e,t){if(!this.multiple){super.typeaheadBufferChanged(e,t);return}if(this.$fastController.isConnected){const o=this.getTypeaheadMatches(),n=this.options.indexOf(o[0]);n>-1&&(this.activeIndex=n,this.uncheckAllOptions(),this.checkActiveIndex()),this.typeaheadExpired=!1}}uncheckAllOptions(e=!1){this.options.forEach(t=>t.checked=!1),e||(this.rangeStartIndex=-1)}openChanged(e,t){if(!this.collapsible)return;if(this.open){this.focusAndScrollOptionIntoView(),this.indexWhenOpened=this.selectedIndex,i.DOM.queueUpdate(()=>this.focus());return}const o=e===!0&&t===!1,n=this.indexWhenOpened!==this.selectedIndex;o&&n&&this.updateValue(!0)}get collapsible(){return!this.multiple}valueChanged(e,t){let o=t;if(this.length){const n=this._options.findIndex(v=>v.value===t),c=this._options[this.selectedIndex]?.value??null,d=this._options[n]?.value??null;(n===-1||c!==d)&&(o="",this.selectedIndex=n),o=this.firstSelectedOption?.value??o}if(t!==o){this.value=o;return}super.valueChanged(e,t),this.updateDisplayValue()}updateValue(e){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.value??""),e&&(this.$emit("input"),this.$emit("change",this,{bubbles:!0,composed:void 0}))}selectedIndexChanged(e,t){super.selectedIndexChanged(e,t),this.updateValue()}clickHandler(e){if(this.disabled||this._isFromContextualHelp(e))return;const t=e.target.closest("option,[role=option],[data-vvd-component=option]");if(!(t&&t.disabled))return this.multiple?(this.uncheckAllOptions(),this.activeIndex=this.options.indexOf(t),this.checkActiveIndex(),this.toggleSelectedForAllCheckedOptions()):super.clickHandler(e),this.collapsible&&(this.open=!this.open),!0}focusoutHandler(e){if(this.multiple&&this.uncheckAllOptions(),!this.open)return!0;const t=e.relatedTarget;if(this.isSameNode(t)){this.focus();return}this.options.includes(t)||(this.open=!1,this.indexWhenOpened!==this.selectedIndex&&this.updateValue(!0))}handleChange(e,t){super.handleChange(e,t),t==="value"&&this.updateValue()}mousedownHandler(e){return e.offsetX>=0&&e.offsetX<=this.listbox.scrollWidth?super.mousedownHandler(e):this.collapsible}multipleChanged(e,t){this.options.forEach(o=>{o.checked=t?!1:void 0}),this.setSelectedOptions(),this.proxy&&(this.proxy.multiple=t)}selectedOptionsChanged(e,t){super.selectedOptionsChanged(e,t),this.options.forEach((o,n)=>{const c=this.proxy.options.item(n);c&&(c.selected=o.selected)})}setProxyOptions(){this.proxy instanceof HTMLSelectElement&&this.options&&(this.proxy.length=0,this.options.forEach(e=>{const t=e.proxy||(e instanceof HTMLOptionElement?e.cloneNode():null);t&&this.proxy.options.add(t)}))}multipleKeydownHandler(e){if(this.disabled)return;const{key:t,shiftKey:o}=e;switch(this.shouldSkipFocus=!1,t){case l.keyHome:{this.checkFirstOption(o);return}case l.keyArrowDown:{this.checkNextOption(o);return}case l.keyArrowUp:{this.checkPreviousOption(o);return}case l.keyEnd:{this.checkLastOption(o);return}case l.keyTab:{this.focusAndScrollOptionIntoView();return}case l.keyEscape:{this.uncheckAllOptions(),this.checkActiveIndex();return}case l.keySpace:if(e.preventDefault(),this.typeaheadExpired){this.toggleSelectedForAllCheckedOptions();return}default:{t.length===1&&this.handleTypeAhead(`${t}`);return}}}keydownHandler(e){const t=this.selectedIndex;switch(this.multiple?this.multipleKeydownHandler(e):super.keydownHandler(e),e.key){case l.keySpace:{e.preventDefault(),this.collapsible&&this.typeaheadExpired&&(this.open=!this.open);break}case l.keyHome:case l.keyEnd:{e.preventDefault();break}case l.keyEnter:{e.preventDefault(),this.open=!this.open;break}case l.keyEscape:{this.collapsible&&this.open&&(e.preventDefault(),this.open=!1);break}case l.keyTab:return this.collapsible&&this.open&&(e.preventDefault(),this.open=!1),!0}return this.collapsible&&!this.open&&this.selectedIndex!==t&&this.updateValue(!0),!(e.key===l.keyArrowDown||e.key===l.keyArrowUp)}connectedCallback(){super.connectedCallback(),this.addEventListener("focusout",this.focusoutHandler),this.addEventListener("contentchange",this.updateDisplayValue)}disconnectedCallback(){this.removeEventListener("focusout",this.focusoutHandler),this.removeEventListener("contentchange",this.updateDisplayValue),super.disconnectedCallback()}updateDisplayValue(){this.collapsible&&i.Observable.notify(this,"displayValue")}get displayValue(){return i.Observable.track(this,"displayValue"),this.firstSelectedOption?.getAttribute("label")??this.firstSelectedOption?.text??this.placeholder??""}setDefaultSelectedOption(){const t=Array.from(this.children).filter(x.Listbox.slottedOptionFilter).findIndex(o=>o.hasAttribute("selected")||o.selected||o.value===this.value);if(t===-1&&!this.placeholderOption){this.selectedIndex=0;return}if(t!==-1||this.placeholder!==""){this.selectedIndex=t;return}}slottedOptionsChanged(e,t){this.options.forEach(n=>{i.Observable.getNotifier(n).unsubscribe(this,"value")}),super.slottedOptionsChanged(e,t),this.options.forEach(n=>{i.Observable.getNotifier(n).subscribe(this,"value")}),this.setProxyOptions(),this.updateValue();const o=this.getAttribute("scale")||this.scale;t.forEach(n=>{o&&(n.setAttribute("scale",o),n.scale=o)}),this.proxy.value=this.value,this.validate()}formResetCallback(){this.setProxyOptions(),super.setDefaultSelectedOption(),this.selectedIndex===-1&&(this.selectedIndex=0),this.placeholder&&(this.selectedIndex=-1)}}s([i.observable],r.prototype,"activeIndex",2);s([i.attr({mode:"boolean"})],r.prototype,"multiple",2);s([i.attr({attribute:"open",mode:"boolean"})],r.prototype,"open",2);s([i.volatile],r.prototype,"collapsible",1);s([i.observable],r.prototype,"control",2);s([i.observable],r.prototype,"maxHeight",2);s([i.observable],r.prototype,"_anchor",2);s([i.attr()],r.prototype,"scale",2);s([i.attr],r.prototype,"appearance",2);s([i.attr],r.prototype,"shape",2);s([i.attr({mode:"boolean",attribute:"fixed-dropdown"})],r.prototype,"fixedDropdown",2);s([i.attr],r.prototype,"placeholder",2);s([i.observable],r.prototype,"placeholderOption",2);s([i.observable],r.prototype,"_feedbackWrapper",2);s([i.observable],r.prototype,"metaSlottedContent",2);const W=({shape:a,disabled:e,appearance:t,metaSlottedContent:o,errorValidationMessage:n,successText:c,placeholder:d,value:v,scale:m})=>F.classNames(["disabled",e],[`appearance-${t}`,!!t],[`shape-${a}`,!!a],["has-meta",!!o?.length],["error",!!n],["success",!!c],["shows-placeholder",!!d&&!v],[`size-${m}`,!!m]);function P(){return i.html` <label
|
|
2
|
-
for="${
|
|
1
|
+
"use strict";const g=require("./definition9.cjs"),O=require("./definition2.cjs"),m=require("./definition11.cjs"),r=require("./vivid-element.cjs"),y=require("./mixins.cjs"),_=require("./listbox.cjs"),k=require("./host-semantics.cjs"),S=require("./form-associated.cjs"),h=require("./numbers.cjs"),$=require("./with-contextual-help.cjs"),C=require("./with-error-text.cjs"),A=require("./with-success-text.cjs"),D=require("./form-element.cjs"),v=require("./affix.cjs"),E=require("./strings.cjs"),s=require("./key-codes.cjs"),H=require("./definition3.cjs"),V=require("./index.cjs"),x=require("./ref.cjs"),u=require("./when.cjs"),f=require("./slotted.cjs"),q=require("./class-names.cjs"),z=".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control{border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline)}.control{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_select-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;transition:box-shadow .2s,background-color .2s}.control.size-condensed{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_select-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.control.size-condensed:not(.shape-pill){--_select-control-border-radius: 4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));border-radius:8px}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}";var F=Object.defineProperty,T=Object.getOwnPropertyDescriptor,c=(n,e,t,o)=>{for(var a=o>1?void 0:o?T(e,t):e,l=n.length-1,d;l>=0;l--)(d=n[l])&&(a=(o?d(e,t,a):d(a))||a);return o&&a&&F(e,t,a),a};class i extends y.WithLightDOMFeedback($.WithContextualHelp(C.WithErrorText(A.WithSuccessText(D.FormElement(k.HostSemantics(v.AffixIconWithTrailing(S.FormAssociated(_.Listbox)))))))){constructor(){super(...arguments),this.proxy=document.createElement("select"),this.activeIndex=-1,this.rangeStartIndex=-1,this.open=!1,this.listboxId=E.uniqueId("listbox-"),this.maxHeight=0,this.fixedDropdown=!1,this._feedbackWrapper=null}get activeOption(){return this.options[this.activeIndex]}get checkedOptions(){return this.options.filter(e=>e.checked)}get firstSelectedOptionIndex(){return this.options.indexOf(this.firstSelectedOption)}activeIndexChanged(e,t){this._activeDescendant=this.options[t]?.id??"",this.focusAndScrollOptionIntoView()}checkActiveIndex(){const e=this.activeOption;e&&(e.checked=!0)}checkFirstOption(e){e?(this.rangeStartIndex===-1&&(this.rangeStartIndex=this.activeIndex+1),this.options.forEach((t,o)=>{t.checked=h.inRange(o,this.rangeStartIndex)})):this.uncheckAllOptions(),this.activeIndex=0,this.checkActiveIndex()}checkLastOption(e){e?(this.rangeStartIndex===-1&&(this.rangeStartIndex=this.activeIndex),this.options.forEach((t,o)=>{t.checked=h.inRange(o,this.rangeStartIndex,this.length)})):this.uncheckAllOptions(),this.activeIndex=this.length-1,this.checkActiveIndex()}checkNextOption(e){e?(this.rangeStartIndex===-1&&(this.rangeStartIndex=this.activeIndex),this.options.forEach((t,o)=>{t.checked=h.inRange(o,this.rangeStartIndex,this.activeIndex+1)})):this.uncheckAllOptions(),this.activeIndex+=this.activeIndex<this.length-1?1:0,this.checkActiveIndex()}checkPreviousOption(e){e?(this.rangeStartIndex===-1&&(this.rangeStartIndex=this.activeIndex),this.checkedOptions.length===1&&(this.rangeStartIndex+=1),this.options.forEach((t,o)=>{t.checked=h.inRange(o,this.activeIndex,this.rangeStartIndex)})):this.uncheckAllOptions(),this.activeIndex-=this.activeIndex>0?1:0,this.checkActiveIndex()}focusAndScrollOptionIntoView(){super.focusAndScrollOptionIntoView(this.activeOption)}focusinHandler(e){if(!this.multiple)return super.focusinHandler(e);!this.shouldSkipFocus&&e.target===e.currentTarget&&(this.uncheckAllOptions(),this.activeIndex===-1&&(this.activeIndex=this.firstSelectedOptionIndex!==-1?this.firstSelectedOptionIndex:0),this.checkActiveIndex(),this.setSelectedOptions(),this.focusAndScrollOptionIntoView()),this.shouldSkipFocus=!1}setSelectedOptions(){if(!this.multiple){super.setSelectedOptions();return}this.$fastController.isConnected&&this.options&&(this.selectedOptions=this.options.filter(e=>e.selected),this.focusAndScrollOptionIntoView())}toggleSelectedForAllCheckedOptions(){const e=this.checkedOptions.filter(o=>!o.disabled),t=!e.every(o=>o.selected);e.forEach(o=>o.selected=t),this.selectedIndex=this.options.indexOf(e[e.length-1]),this.setSelectedOptions(),this.updateValue(!0)}typeaheadBufferChanged(e,t){if(!this.multiple){super.typeaheadBufferChanged(e,t);return}if(this.$fastController.isConnected){const o=this.getTypeaheadMatches(),a=this.options.indexOf(o[0]);a>-1&&(this.activeIndex=a,this.uncheckAllOptions(),this.checkActiveIndex()),this.typeaheadExpired=!1}}uncheckAllOptions(e=!1){this.options.forEach(t=>t.checked=!1),e||(this.rangeStartIndex=-1)}openChanged(e,t){if(!this.collapsible)return;if(this.open){this.focusAndScrollOptionIntoView(),this.indexWhenOpened=this.selectedIndex,r.Updates.enqueue(()=>this.focus());return}const o=e===!0&&t===!1,a=this.indexWhenOpened!==this.selectedIndex;o&&a&&this.updateValue(!0)}get collapsible(){return!this.multiple}valueChanged(e,t){const o=this.options.findIndex(d=>d.value===t),a=this._validSelectedIndex(o),l=this.options[a]?.value??"";this.selectedIndex!==a&&(this.selectedIndex=a),t===l&&(super.valueChanged(e,t),this.updateDisplayValue())}updateValue(e){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.value??""),e&&(this.$emit("input"),this.$emit("change",this,{bubbles:!0,composed:void 0}))}selectedIndexChanged(e,t){super.selectedIndexChanged(e,t),this.updateValue()}clickHandler(e){if(this.disabled||this._isFromContextualHelp(e))return;const t=e.target.closest("option,[role=option],[data-vvd-component=option]");if(!(t&&t.disabled))return this.multiple?(this.uncheckAllOptions(),this.activeIndex=this.options.indexOf(t),this.checkActiveIndex(),this.toggleSelectedForAllCheckedOptions()):super.clickHandler(e),this.collapsible&&(this.open=!this.open),!0}focusoutHandler(e){if(this.multiple&&this.uncheckAllOptions(),!this.open)return!0;const t=e.relatedTarget;if(this.isSameNode(t)){this.focus();return}this.options.includes(t)||(this.open=!1,this.indexWhenOpened!==this.selectedIndex&&this.updateValue(!0))}handleChange(e,t){super.handleChange(e,t),t==="value"&&this.updateValue()}mousedownHandler(e){return e.offsetX>=0&&e.offsetX<=this.listbox.scrollWidth?super.mousedownHandler(e):this.collapsible}multipleChanged(e,t){this.options.forEach(o=>{o.checked=t?!1:void 0}),this.setSelectedOptions(),this.proxy&&(this.proxy.multiple=t)}selectedOptionsChanged(e,t){super.selectedOptionsChanged(e,t),this.options.forEach((o,a)=>{const l=this.proxy.options.item(a);l&&(l.selected=o.selected)})}setProxyOptions(){this.proxy instanceof HTMLSelectElement&&this.options&&(this.proxy.length=0,this.options.forEach(e=>{const t=e.proxy||(e instanceof HTMLOptionElement?e.cloneNode():null);t&&this.proxy.options.add(t)}))}multipleKeydownHandler(e){if(this.disabled)return;const{key:t,shiftKey:o}=e;switch(this.shouldSkipFocus=!1,t){case s.keyHome:{this.checkFirstOption(o);return}case s.keyArrowDown:{this.checkNextOption(o);return}case s.keyArrowUp:{this.checkPreviousOption(o);return}case s.keyEnd:{this.checkLastOption(o);return}case s.keyTab:{this.focusAndScrollOptionIntoView();return}case s.keyEscape:{this.uncheckAllOptions(),this.checkActiveIndex();return}case s.keySpace:if(e.preventDefault(),this.typeaheadExpired){this.toggleSelectedForAllCheckedOptions();return}default:{t.length===1&&this.handleTypeAhead(`${t}`);return}}}keydownHandler(e){const t=this.selectedIndex;switch(this.multiple?this.multipleKeydownHandler(e):super.keydownHandler(e),e.key){case s.keySpace:{e.preventDefault(),this.collapsible&&this.typeaheadExpired&&(this.open=!this.open);break}case s.keyHome:case s.keyEnd:{e.preventDefault();break}case s.keyEnter:{e.preventDefault(),this.open=!this.open;break}case s.keyEscape:{this.collapsible&&this.open&&(e.preventDefault(),this.open=!1);break}case s.keyTab:return this.collapsible&&this.open&&(e.preventDefault(),this.open=!1),!0}return this.collapsible&&!this.open&&this.selectedIndex!==t&&this.updateValue(!0),!(e.key===s.keyArrowDown||e.key===s.keyArrowUp)}connectedCallback(){super.connectedCallback(),this.addEventListener("focusout",this.focusoutHandler),this.addEventListener("contentchange",this.updateDisplayValue)}disconnectedCallback(){this.removeEventListener("focusout",this.focusoutHandler),this.removeEventListener("contentchange",this.updateDisplayValue),super.disconnectedCallback()}updateDisplayValue(){this.collapsible&&r.Observable.notify(this,"displayValue")}get displayValue(){return r.Observable.track(this,"displayValue"),this.firstSelectedOption?.getAttribute("label")??this.firstSelectedOption?.text??this.placeholder??""}_newDefaultSelectedIndex(e,t,o){const a=super._newDefaultSelectedIndex(e,t,o);if(a===null&&o===-1&&!this.placeholder){const l=this.getNextSelectableIndex(0);if(l!==-1)return l}return a}_isDefaultSelected(e){return super._isDefaultSelected(e)||e.value===this.initialValue}slottedOptionsChanged(e,t){this.options.forEach(a=>{r.Observable.getNotifier(a).unsubscribe(this,"value")}),super.slottedOptionsChanged(e,t),this.options.forEach(a=>{r.Observable.getNotifier(a).subscribe(this,"value")}),this.setProxyOptions(),this.updateValue();const o=this.getAttribute("scale")||this.scale;t.forEach(a=>{o&&(a.setAttribute("scale",o),a.scale=o)}),this.proxy.value=this.value,this.validate()}formResetCallback(){this.setProxyOptions(),this.selectedIndex=this._newDefaultSelectedIndex([],this.options,-1)??-1}}c([r.observable],i.prototype,"activeIndex",2);c([r.attr({mode:"boolean"})],i.prototype,"multiple",2);c([r.attr({attribute:"open",mode:"boolean"})],i.prototype,"open",2);c([r.volatile],i.prototype,"collapsible",1);c([r.observable],i.prototype,"control",2);c([r.observable],i.prototype,"maxHeight",2);c([r.observable],i.prototype,"_anchor",2);c([r.attr()],i.prototype,"scale",2);c([r.attr],i.prototype,"appearance",2);c([r.attr],i.prototype,"shape",2);c([r.attr({mode:"boolean",attribute:"fixed-dropdown"})],i.prototype,"fixedDropdown",2);c([r.attr],i.prototype,"placeholder",2);c([r.observable],i.prototype,"_feedbackWrapper",2);c([r.observable],i.prototype,"metaSlottedContent",2);const L=({shape:n,disabled:e,appearance:t,metaSlottedContent:o,errorValidationMessage:a,successText:l,placeholder:d,value:I,scale:b})=>q.classNames(["disabled",e],[`appearance-${t}`,!!t],[`shape-${n}`,!!n],["has-meta",!!o?.length],["error",!!a],["success",!!l],["shows-placeholder",!!d&&!I],[`size-${b}`,!!b]);function W(){return r.html` <label
|
|
2
|
+
for="${n=>n.multiple?null:"control"}"
|
|
3
3
|
class="label"
|
|
4
4
|
id="label"
|
|
5
5
|
>
|
|
6
|
-
${
|
|
7
|
-
</label>`}function
|
|
8
|
-
<${e} ${
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
${u.ref("_anchor")}
|
|
6
|
+
${n=>n.label}
|
|
7
|
+
</label>`}function P(n){const e=n.tagFor(m.ListboxOption);return r.html`
|
|
8
|
+
<${e} text="${t=>t.placeholder}" hidden disabled>
|
|
9
|
+
</${e}>`}function B(n){const e=v.affixIconTemplateFactory(n),t=H.chevronTemplateFactory(n);return r.html` <div
|
|
10
|
+
class="control ${L}"
|
|
11
|
+
${x.ref("_anchor")}
|
|
13
12
|
id="control"
|
|
14
13
|
?disabled="${o=>o.disabled}"
|
|
15
14
|
>
|
|
16
15
|
<div class="selected-value">
|
|
17
|
-
${o=>e(o.icon,
|
|
16
|
+
${o=>e(o.icon,v.IconWrapper.Slot)}
|
|
18
17
|
<span class="text">${o=>o.displayValue}</span>
|
|
19
|
-
<slot name="meta" ${
|
|
18
|
+
<slot name="meta" ${f.slotted("metaSlottedContent")}></slot>
|
|
20
19
|
</div>
|
|
21
20
|
${t}
|
|
22
|
-
</div>`}function N(
|
|
21
|
+
</div>`}function N(n){return n.open&&n.fixedDropdown?`--_select-fixed-width: ${Math.round(n.getBoundingClientRect().width)}px`:null}function M(n){const e=n.tagFor(g.Popup);return r.html`
|
|
23
22
|
<div class="label-wrapper" ?hidden=${t=>!t.label&&!t._hasContextualHelp}>
|
|
24
|
-
${
|
|
25
|
-
<slot name="contextual-help" ${
|
|
23
|
+
${u.when(t=>t.label,W())}
|
|
24
|
+
<slot name="contextual-help" ${f.slotted("_contextualHelpSlottedContent")}></slot>
|
|
26
25
|
</div>
|
|
27
26
|
<div class="control-wrapper">
|
|
28
|
-
${
|
|
27
|
+
${u.when(t=>!t.multiple,B(n))}
|
|
29
28
|
<${e} class="popup"
|
|
30
29
|
style="${N}"
|
|
31
30
|
?open="${t=>t.collapsible?t.open:!0}"
|
|
@@ -40,15 +39,15 @@
|
|
|
40
39
|
aria-labelledby="${t=>t.multiple&&t.label?"label":null}"
|
|
41
40
|
?disabled="${t=>t.disabled}"
|
|
42
41
|
?hidden="${t=>t.collapsible?!t.open:!1}"
|
|
43
|
-
${
|
|
44
|
-
${
|
|
42
|
+
${x.ref("listbox")}>
|
|
43
|
+
${u.when(t=>t.placeholder,P(n))}
|
|
45
44
|
<slot
|
|
46
|
-
${
|
|
45
|
+
${f.slotted({filter:_.Listbox.slottedOptionFilter,flatten:!0,property:"slottedOptions"})}>
|
|
47
46
|
</slot>
|
|
48
47
|
</div>
|
|
49
48
|
</${e}>
|
|
50
49
|
</div>
|
|
51
|
-
`}function p(
|
|
50
|
+
`}function p(n){return(e,t)=>t.event.composedPath().includes(e._feedbackWrapper)?!0:n(e,t.event)}const R=n=>r.html`
|
|
52
51
|
<template
|
|
53
52
|
class="base"
|
|
54
53
|
${k.applyHostSemantics({role:"combobox",ariaLabel:e=>e.ariaLabel??e.label,ariaHasPopup:e=>e.collapsible?"listbox":"false",ariaExpanded:e=>e.open,ariaDisabled:e=>e.disabled})}
|
|
@@ -59,12 +58,12 @@
|
|
|
59
58
|
@click="${p((e,t)=>e.clickHandler(t))}"
|
|
60
59
|
@focusin="${p((e,t)=>e.focusinHandler(t))}"
|
|
61
60
|
@focusout="${p((e,t)=>e.focusoutHandler(t))}"
|
|
62
|
-
@keydown="${p((e,t)=>(e.open&&
|
|
61
|
+
@keydown="${p((e,t)=>(e.open&&V.handleEscapeKeyAndStopPropogation(t),e.keydownHandler(t)))}"
|
|
63
62
|
@mousedown="${p((e,t)=>e.mousedownHandler(t))}"
|
|
64
63
|
>
|
|
65
|
-
${
|
|
66
|
-
<div class="feedback-wrapper" ${
|
|
67
|
-
${e=>e._getFeedbackTemplate(
|
|
64
|
+
${M(n)}
|
|
65
|
+
<div class="feedback-wrapper" ${x.ref("_feedbackWrapper")}>
|
|
66
|
+
${e=>e._getFeedbackTemplate(n)}
|
|
68
67
|
</div>
|
|
69
68
|
</template>
|
|
70
|
-
`,
|
|
69
|
+
`,w=r.defineVividComponent("select",i,R,[g.popupDefinition,O.iconDefinition,m.listboxOptionDefinition,y.feedbackMessageDefinition],{styles:z}),j=r.createRegisterFunction(w);exports.Select=i;exports.registerSelect=j;exports.selectDefinition=w;
|