@vonage/vivid 5.1.0 → 5.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/accordion-item/definition.cjs +2 -1
- package/accordion-item/definition.js +2 -1
- package/alert/index.cjs +1 -1
- package/alert/index.js +1 -1
- package/audio-player/definition.cjs +41 -6
- package/audio-player/definition.js +41 -6
- package/audio-player/index.cjs +27 -25
- package/audio-player/index.js +88 -62
- package/badge/index.cjs +2 -2
- package/badge/index.js +4 -4
- package/banner/index.cjs +3 -3
- package/banner/index.js +6 -6
- package/breadcrumb-item/index.cjs +1 -1
- package/breadcrumb-item/index.js +1 -1
- package/bundled/affix.cjs +7 -7
- package/bundled/affix.js +5 -5
- package/bundled/anchored.cjs +1 -1
- package/bundled/anchored.js +6 -6
- package/bundled/attribute-binding-behaviour.cjs +1 -1
- package/bundled/attribute-binding-behaviour.js +15 -13
- package/bundled/base-color-picker.cjs +13 -0
- package/bundled/base-color-picker.js +194 -0
- package/bundled/button.cjs +1 -1
- package/bundled/button.js +2 -2
- package/bundled/calendar-picker.template.cjs +1 -1
- package/bundled/calendar-picker.template.js +21 -21
- package/bundled/char-count.cjs +1 -1
- package/bundled/char-count.js +1 -1
- package/bundled/children.cjs +1 -1
- package/bundled/children.js +28 -20
- package/bundled/definition.cjs +3 -3
- package/bundled/definition.js +38 -38
- package/bundled/definition10.cjs +72 -18
- package/bundled/definition10.js +351 -65
- package/bundled/definition11.cjs +19 -10
- package/bundled/definition11.js +66 -37
- package/bundled/definition12.cjs +10 -1
- package/bundled/definition12.js +38 -14
- package/bundled/definition13.cjs +1 -73
- package/bundled/definition13.js +15 -354
- package/bundled/definition15.cjs +1 -1
- package/bundled/definition15.js +1 -1
- package/bundled/definition16.cjs +2 -2
- package/bundled/definition16.js +8 -8
- package/bundled/definition17.cjs +7 -7
- package/bundled/definition17.js +17 -17
- package/bundled/definition19.cjs +17 -14
- package/bundled/definition19.js +85 -77
- package/bundled/definition2.cjs +9 -5
- package/bundled/definition2.js +21 -17
- package/bundled/definition22.cjs +9 -9
- package/bundled/definition22.js +31 -31
- package/bundled/definition3.cjs +1 -1
- package/bundled/definition3.js +1 -1
- package/bundled/definition6.cjs +6 -6
- package/bundled/definition6.js +34 -31
- package/bundled/definition7.cjs +1 -1
- package/bundled/definition7.js +6 -6
- package/bundled/definition8.cjs +2 -2
- package/bundled/definition8.js +4 -4
- package/bundled/definition9.cjs +1 -1
- package/bundled/definition9.js +1 -1
- package/bundled/delegates-aria.cjs +1 -1
- package/bundled/delegates-aria.js +59 -46
- package/bundled/form-associated.cjs +1 -1
- package/bundled/form-associated.js +3 -3
- package/bundled/host-semantics.cjs +1 -1
- package/bundled/host-semantics.js +48 -34
- package/bundled/localized.cjs +1 -1
- package/bundled/localized.js +43 -31
- package/bundled/mixins.cjs +18 -18
- package/bundled/mixins.js +99 -93
- package/bundled/normalize.cjs +1 -0
- package/bundled/normalize.js +7 -0
- package/bundled/picker-field.template.cjs +18 -13
- package/bundled/picker-field.template.js +45 -37
- package/bundled/ref.cjs +1 -1
- package/bundled/ref.js +8 -25
- package/bundled/repeat.cjs +1 -1
- package/bundled/repeat.js +459 -233
- package/bundled/slider.template.cjs +1 -1
- package/bundled/slider.template.js +2 -2
- package/bundled/slotted.cjs +1 -1
- package/bundled/slotted.js +62 -45
- package/bundled/text-field.cjs +1 -1
- package/bundled/text-field.js +1 -1
- package/bundled/time-selection-picker.template.cjs +1 -1
- package/bundled/time-selection-picker.template.js +5 -5
- package/bundled/vivid-element.cjs +1 -1
- package/bundled/vivid-element.js +2126 -1172
- package/bundled/when.cjs +1 -1
- package/bundled/when.js +8 -7
- package/bundled/with-contextual-help.cjs +1 -1
- package/bundled/with-contextual-help.js +17 -7
- package/calendar/definition.cjs +1 -1
- package/calendar/definition.js +2 -2
- package/calendar/index.cjs +1 -1
- package/calendar/index.js +6 -6
- package/calendar-event/index.cjs +1 -1
- package/calendar-event/index.js +1 -1
- package/card/definition.cjs +10 -2
- package/card/definition.js +10 -2
- package/card/index.cjs +19 -11
- package/card/index.js +35 -27
- package/color-picker/definition.cjs +1079 -0
- package/color-picker/definition.js +1073 -0
- package/color-picker/index.cjs +127 -0
- package/color-picker/index.js +726 -0
- package/combobox/definition.cjs +13 -6
- package/combobox/definition.js +14 -7
- package/combobox/index.cjs +15 -11
- package/combobox/index.js +82 -75
- package/contextual-help/index.cjs +1 -1
- package/contextual-help/index.js +1 -1
- package/custom-elements.json +1621 -325
- package/data-grid/definition.cjs +862 -27
- package/data-grid/definition.js +863 -28
- package/data-grid/index.cjs +25 -25
- package/data-grid/index.js +175 -168
- package/date-picker/index.cjs +1 -1
- package/date-picker/index.js +2 -2
- package/date-range-picker/index.cjs +1 -1
- package/date-range-picker/index.js +2 -2
- package/date-time-picker/index.cjs +1 -1
- package/date-time-picker/index.js +2 -2
- package/dial-pad/definition.cjs +55 -1
- package/dial-pad/definition.js +56 -2
- package/dial-pad/index.cjs +21 -18
- package/dial-pad/index.js +138 -104
- package/dialog/definition.cjs +4 -1
- package/dialog/definition.js +4 -1
- package/dialog/index.cjs +21 -18
- package/dialog/index.js +43 -40
- package/empty-state/definition.cjs +7 -2
- package/empty-state/definition.js +7 -2
- package/empty-state/index.cjs +10 -5
- package/empty-state/index.js +18 -13
- package/fab/index.cjs +2 -2
- package/fab/index.js +4 -4
- package/file-picker/definition.cjs +16 -7
- package/file-picker/definition.js +17 -8
- package/file-picker/index.cjs +12 -9
- package/file-picker/index.js +103 -93
- package/icon/definition.cjs +10 -6
- package/icon/definition.js +10 -6
- package/index.cjs +4 -0
- package/index.js +1 -0
- package/lib/accordion-item/accordion-item.d.ts +2 -2
- package/lib/action-group/action-group.d.ts +2 -2
- package/lib/alert/alert.d.ts +4 -4
- package/lib/audio-player/audio-player.d.ts +6 -2
- package/lib/avatar/avatar.d.ts +2 -2
- package/lib/badge/badge.d.ts +2 -2
- package/lib/banner/banner.d.ts +6 -6
- package/lib/breadcrumb/breadcrumb.d.ts +2 -2
- package/lib/breadcrumb-item/breadcrumb-item.d.ts +2 -2
- package/lib/button/button.d.ts +6 -6
- package/lib/button/button.template.d.ts +2 -1
- package/lib/calendar/calendar.d.ts +1 -1
- package/lib/calendar-event/calendar-event.d.ts +2 -2
- package/lib/card/card.d.ts +2 -2
- package/lib/checkbox/checkbox.d.ts +12 -12
- package/lib/color-picker/color-picker.d.ts +2420 -0
- package/lib/color-picker/color-picker.template.d.ts +3 -0
- package/lib/color-picker/definition.d.ts +4 -0
- package/lib/color-picker/locale.d.ts +9 -0
- package/lib/combobox/combobox.d.ts +495 -78
- package/lib/components.d.ts +1 -0
- package/lib/data-grid/data-grid-cell.d.ts +4 -4
- package/lib/data-grid/data-grid-row.d.ts +3 -4
- package/lib/data-grid/data-grid.d.ts +1 -2
- package/lib/date-picker/date-picker.d.ts +906 -894
- package/lib/date-range-picker/date-range-picker.d.ts +596 -590
- package/lib/date-time-picker/date-time-picker.d.ts +907 -895
- package/lib/dial-pad/dial-pad.d.ts +3 -2
- package/lib/dial-pad/dial-pad.template.d.ts +1 -1
- package/lib/dial-pad/locale.d.ts +1 -0
- package/lib/dialog/dialog.d.ts +4 -4
- package/lib/divider/divider.d.ts +2 -2
- package/lib/fab/fab.d.ts +2 -2
- package/lib/file-picker/file-picker.d.ts +495 -78
- package/lib/header/header.d.ts +2 -2
- package/lib/menu/menu.d.ts +5 -4
- package/lib/menu-item/menu-item.d.ts +4 -4
- package/lib/nav/nav.d.ts +2 -2
- package/lib/nav-disclosure/nav-disclosure.d.ts +4 -4
- package/lib/nav-item/nav-item.d.ts +4 -4
- package/lib/note/note.d.ts +2 -2
- package/lib/number-field/number-field.d.ts +19 -18
- package/lib/option/option.d.ts +4 -4
- package/lib/pagination/pagination.d.ts +2 -2
- package/lib/progress/progress.d.ts +2 -2
- package/lib/progress-ring/progress-ring.d.ts +2 -2
- package/lib/radio/radio.d.ts +6 -6
- package/lib/radio-group/radio-group.d.ts +2 -2
- package/lib/range-slider/range-slider.d.ts +6 -6
- package/lib/rich-text-editor/menubar/menubar.d.ts +2 -2
- package/lib/rich-text-editor/rich-text-editor.d.ts +2 -2
- package/lib/searchable-select/option-tag.d.ts +2 -2
- package/lib/searchable-select/searchable-select.d.ts +521 -104
- package/lib/select/select.d.ts +484 -67
- package/lib/selectable-box/selectable-box.d.ts +2 -2
- package/lib/simple-color-picker/locale.d.ts +0 -1
- package/lib/simple-color-picker/simple-color-picker.d.ts +47 -821
- package/lib/slider/slider.d.ts +6 -6
- package/lib/split-button/split-button.d.ts +6 -6
- package/lib/switch/switch.d.ts +4 -4
- package/lib/tab/tab.d.ts +6 -6
- package/lib/tab-panel/tab-panel.d.ts +2 -2
- package/lib/tag/tag.d.ts +6 -6
- package/lib/tag-group/tag-group.d.ts +2 -2
- package/lib/tag-name-map.d.ts +2 -1
- package/lib/text-area/text-area.d.ts +17 -16
- package/lib/text-field/text-field.d.ts +19 -18
- package/lib/time-picker/time-picker.d.ts +579 -573
- package/lib/toggletip/toggletip.d.ts +4 -4
- package/lib/tooltip/tooltip.d.ts +2 -2
- package/lib/tree-item/tree-item.d.ts +4 -4
- package/lib/tree-view/tree-view.d.ts +2 -2
- package/lib/video-player/video-player.d.ts +2 -2
- package/locales/de-DE.cjs +15 -3
- package/locales/de-DE.js +15 -3
- package/locales/en-GB.cjs +15 -3
- package/locales/en-GB.js +15 -3
- package/locales/en-US.cjs +15 -3
- package/locales/en-US.js +15 -3
- package/locales/ja-JP.cjs +15 -3
- package/locales/ja-JP.js +15 -3
- package/locales/zh-CN.cjs +15 -3
- package/locales/zh-CN.js +15 -3
- package/menu/definition.cjs +8 -4
- package/menu/definition.js +9 -5
- package/note/index.cjs +2 -2
- package/note/index.js +4 -4
- package/number-field/definition.cjs +3 -3
- package/number-field/definition.js +4 -4
- package/number-field/index.cjs +8 -8
- package/number-field/index.js +41 -40
- package/option/index.cjs +1 -1
- package/option/index.js +1 -1
- package/package.json +5 -5
- package/pagination/definition.cjs +2 -1
- package/pagination/definition.js +2 -1
- package/pagination/index.cjs +12 -12
- package/pagination/index.js +59 -59
- package/progress/index.cjs +1 -1
- package/progress/index.js +1 -1
- package/radio/definition.cjs +9 -9
- package/radio/definition.js +10 -10
- package/radio-group/definition.cjs +2 -1
- package/radio-group/definition.js +2 -1
- package/radio-group/index.cjs +5 -5
- package/radio-group/index.js +80 -77
- package/range-slider/index.cjs +1 -1
- package/range-slider/index.js +1 -1
- package/rich-text-editor/definition.cjs +1 -1
- package/rich-text-editor/definition.js +2 -2
- package/rich-text-editor/index.cjs +2 -2
- package/rich-text-editor/index.js +3 -3
- package/searchable-select/definition.cjs +30 -21
- package/searchable-select/definition.js +31 -22
- package/searchable-select/index.cjs +28 -25
- package/searchable-select/index.js +149 -140
- package/select/definition.cjs +15 -7
- package/select/definition.js +16 -8
- package/selectable-box/definition.cjs +1 -1
- package/selectable-box/definition.js +1 -1
- package/selectable-box/index.cjs +3 -3
- package/selectable-box/index.js +20 -20
- package/shared/aria/aria-change-subscription.d.ts +0 -1
- package/shared/aria/aria-mixin.d.ts +2 -2
- package/shared/aria/delegate-aria-behavior.d.ts +5 -10
- package/shared/aria/delegates-aria.d.ts +3 -3
- package/shared/aria/host-semantics-behavior.d.ts +5 -8
- package/shared/aria/host-semantics.d.ts +3 -3
- package/shared/color-picker/base-color-picker.d.ts +436 -0
- package/shared/color-picker/index.d.ts +1 -0
- package/shared/color-picker/locale.d.ts +3 -0
- package/shared/color-picker/utils.d.ts +1 -0
- package/shared/deprecation/replaced-props.d.ts +317 -2
- package/shared/design-system/defineVividComponent.d.ts +2 -2
- package/shared/feedback/feedback-message.d.ts +2 -2
- package/shared/feedback/mixins.d.ts +4 -4
- package/shared/foundation/button/button.d.ts +4 -4
- package/shared/foundation/form-associated/form-associated.d.ts +4 -4
- package/shared/foundation/vivid-element/vivid-element.d.ts +335 -8
- package/shared/localization/Locale.d.ts +4 -0
- package/shared/patterns/affix.d.ts +4 -4
- package/shared/patterns/anchored.d.ts +4 -4
- package/shared/patterns/char-count/char-count.d.ts +2 -2
- package/shared/patterns/form-elements/form-element.d.ts +4 -4
- package/shared/patterns/form-elements/index.d.ts +1 -0
- package/shared/patterns/form-elements/with-contextual-help.d.ts +7 -6
- package/shared/patterns/form-elements/with-error-text.d.ts +6 -6
- package/shared/patterns/form-elements/with-success-text.d.ts +2 -2
- package/shared/patterns/linkable.d.ts +2 -2
- package/shared/patterns/localized.d.ts +2 -2
- package/shared/patterns/trapped-focus.d.ts +2 -2
- package/shared/picker-field/mixins/calendar-picker.d.ts +454 -451
- package/shared/picker-field/mixins/calendar-picker.template.d.ts +454 -451
- package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.d.ts +2 -2
- package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +600 -594
- package/shared/picker-field/mixins/single-date-picker.d.ts +746 -737
- package/shared/picker-field/mixins/single-value-picker.d.ts +451 -448
- package/shared/picker-field/mixins/time-selection-picker.d.ts +580 -574
- package/shared/picker-field/mixins/time-selection-picker.template.d.ts +579 -573
- package/shared/picker-field/picker-field.d.ts +495 -78
- package/shared/templating/attribute-binding-behaviour.d.ts +3 -4
- package/shared/templating/render-in-light-dom.d.ts +13 -12
- package/side-drawer/index.cjs +1 -1
- package/side-drawer/index.js +1 -1
- package/simple-color-picker/definition.cjs +28 -215
- package/simple-color-picker/definition.js +29 -216
- package/simple-color-picker/index.cjs +9 -21
- package/simple-color-picker/index.js +71 -185
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/styles/tokens/vivid-2-compat.css +1 -1
- package/switch/index.cjs +2 -2
- package/switch/index.js +4 -4
- package/tabs/definition.cjs +1 -1
- package/tabs/definition.js +2 -2
- package/tabs/index.cjs +2 -2
- package/tabs/index.js +16 -16
- package/tag/index.cjs +1 -1
- package/tag/index.js +1 -1
- package/text-area/definition.cjs +1 -1
- package/text-area/definition.js +1 -1
- package/text-area/index.cjs +3 -3
- package/text-area/index.js +9 -9
- package/text-field/definition.cjs +3 -3
- package/text-field/definition.js +4 -4
- package/text-field/index.cjs +1 -1
- package/text-field/index.js +1 -1
- package/time-picker/index.cjs +1 -1
- package/time-picker/index.js +2 -2
- package/toggletip/definition.cjs +1 -1
- package/toggletip/definition.js +2 -2
- package/tree-view/definition.cjs +1 -1
- package/tree-view/definition.js +2 -2
- package/tree-view/index.cjs +2 -2
- package/tree-view/index.js +6 -6
- package/unbundled/_commonjsHelpers.cjs +36 -0
- package/unbundled/_commonjsHelpers.js +32 -0
- package/unbundled/affix.cjs +1 -1
- package/unbundled/affix.js +1 -1
- package/unbundled/attribute-binding-behaviour.cjs +11 -10
- package/unbundled/attribute-binding-behaviour.js +11 -10
- package/unbundled/base-color-picker.cjs +278 -0
- package/unbundled/base-color-picker.js +275 -0
- package/unbundled/button.cjs +1 -1
- package/unbundled/button.js +2 -2
- package/unbundled/calendar-picker.template.cjs +3 -3
- package/unbundled/calendar-picker.template.js +4 -4
- package/unbundled/definition2.cjs +1 -1
- package/unbundled/definition2.js +2 -2
- package/unbundled/definition3.cjs +2 -1
- package/unbundled/definition3.js +2 -1
- package/unbundled/delegates-aria.cjs +67 -33
- package/unbundled/delegates-aria.js +69 -35
- package/unbundled/form-associated.cjs +2 -2
- package/unbundled/form-associated.js +3 -3
- package/unbundled/host-semantics.cjs +47 -22
- package/unbundled/host-semantics.js +48 -23
- package/unbundled/mixins.cjs +34 -27
- package/unbundled/mixins.js +35 -28
- package/unbundled/picker-field.template.cjs +13 -5
- package/unbundled/picker-field.template.js +14 -6
- package/unbundled/text-field.cjs +1 -1
- package/unbundled/text-field.js +1 -1
- package/unbundled/time-selection-picker.template.cjs +4 -4
- package/unbundled/time-selection-picker.template.js +5 -5
- package/unbundled/vivid-element.cjs +22 -15
- package/unbundled/vivid-element.js +23 -15
- package/unbundled/with-contextual-help.cjs +11 -0
- package/unbundled/with-contextual-help.js +11 -0
- package/video-player/definition.cjs +69007 -1
- package/video-player/definition.js +69007 -1
- package/video-player/index.cjs +35 -35
- package/video-player/index.js +1358 -1384
- package/visually-hidden/index.cjs +1 -1
- package/visually-hidden/index.js +1 -1
- package/vivid.api.json +347 -69
package/note/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { i as s } from "../bundled/definition2.js";
|
|
2
2
|
import { V as d, a as c, h as v, c as f, d as m } from "../bundled/vivid-element.js";
|
|
3
3
|
import { b as p, a as u, I as _ } from "../bundled/affix.js";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { w as g } from "../bundled/when.js";
|
|
5
|
+
import { c as x } from "../bundled/class-names.js";
|
|
6
6
|
const b = ".base.connotation-success{--_connotation-color-intermediate: var(--vvd-note-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-note-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-note-success-fierce, var(--vvd-color-success-700))}.base.connotation-information{--_connotation-color-intermediate: var(--vvd-note-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-note-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-note-information-fierce, var(--vvd-color-information-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-note-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-note-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-note-alert-fierce, var(--vvd-color-alert-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-note-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-note-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-note-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-announcement{--_connotation-color-intermediate: var(--vvd-note-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-faint: var(--vvd-note-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce: var(--vvd-note-announcement-fierce, var(--vvd-color-announcement-700))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-intermediate: var(--vvd-note-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-note-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-note-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:flex;align-items:flex-start;padding:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--vvd-color-canvas-text);column-gap:16px}@supports (contain: content){.base{contain:content}}@supports not (contain: content){.base{overflow:hidden}}slot[name=icon]{color:var(--_appearance-color-outline);font-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.text{display:flex;min-height:24px;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.text .headline{font:var(--vvd-typography-base-bold)}.text .message{font:var(--vvd-typography-base)}";
|
|
7
7
|
var h = Object.defineProperty, l = (o, a, n, T) => {
|
|
8
8
|
for (var t = void 0, e = o.length - 1, i; e >= 0; e--)
|
|
@@ -17,7 +17,7 @@ l([
|
|
|
17
17
|
l([
|
|
18
18
|
c
|
|
19
19
|
], r.prototype, "connotation");
|
|
20
|
-
const w = ({ connotation: o }) =>
|
|
20
|
+
const w = ({ connotation: o }) => x("base", `connotation-${o}`);
|
|
21
21
|
function y() {
|
|
22
22
|
return v`<div class="headline">${(o) => o.headline}</div>`;
|
|
23
23
|
}
|
|
@@ -27,7 +27,7 @@ const I = (o) => {
|
|
|
27
27
|
<div class="${w}">
|
|
28
28
|
${(n) => a(n.icon, _.Slot)}
|
|
29
29
|
<div class="text">
|
|
30
|
-
${
|
|
30
|
+
${g((n) => n.headline, y())}
|
|
31
31
|
<slot class="message"></slot>
|
|
32
32
|
</div>
|
|
33
33
|
</div>
|
|
@@ -22,7 +22,7 @@ const localized = require('../unbundled/localized.cjs');
|
|
|
22
22
|
const enums = require('../unbundled/enums.cjs');
|
|
23
23
|
const divider = require('../unbundled/divider.cjs');
|
|
24
24
|
|
|
25
|
-
const styles = "
|
|
25
|
+
const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base: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}}.base.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)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{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));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}";
|
|
26
26
|
|
|
27
27
|
var __defProp = Object.defineProperty;
|
|
28
28
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -193,7 +193,7 @@ class NumberField extends withContextualHelp.WithContextualHelp(
|
|
|
193
193
|
this.validate();
|
|
194
194
|
this._presentationValue = this.#valueToPresentationValue(this.value);
|
|
195
195
|
if (this.autofocus) {
|
|
196
|
-
fastElement.
|
|
196
|
+
fastElement.Updates.enqueue(() => {
|
|
197
197
|
this.focus();
|
|
198
198
|
});
|
|
199
199
|
}
|
|
@@ -373,7 +373,7 @@ const NumberFieldTemplate = (context) => {
|
|
|
373
373
|
return fastElement.html`
|
|
374
374
|
<div class="base ${getStateClasses}">
|
|
375
375
|
${fastElement.when((x) => x.label, renderLabel())}
|
|
376
|
-
<slot name="contextual-help"></slot>
|
|
376
|
+
<slot name="contextual-help" ${fastElement.slotted("_contextualHelpSlottedContent")}></slot>
|
|
377
377
|
<div class="fieldset">
|
|
378
378
|
<div class="wrapper">
|
|
379
379
|
<input
|
|
@@ -5,7 +5,7 @@ import { iconDefinition } from '../icon/definition.js';
|
|
|
5
5
|
import { a as WithFeedback, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
|
|
6
6
|
import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
|
|
7
7
|
import { contextualHelpDefinition } from '../contextual-help/definition.js';
|
|
8
|
-
import {
|
|
8
|
+
import { Updates, attr, nullableNumberConverter, observable, when, slotted, ref, html } from '@microsoft/fast-element';
|
|
9
9
|
import { keyArrowDown, keyArrowUp, classNames } from '@microsoft/fast-web-utilities';
|
|
10
10
|
import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
|
|
11
11
|
import { F as FormAssociated } from '../unbundled/form-associated.js';
|
|
@@ -18,7 +18,7 @@ import { L as Localized } from '../unbundled/localized.js';
|
|
|
18
18
|
import { S as Shape } from '../unbundled/enums.js';
|
|
19
19
|
import { D as Divider } from '../unbundled/divider.js';
|
|
20
20
|
|
|
21
|
-
const styles = "
|
|
21
|
+
const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base: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}}.base.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)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{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));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}";
|
|
22
22
|
|
|
23
23
|
var __defProp = Object.defineProperty;
|
|
24
24
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -189,7 +189,7 @@ class NumberField extends WithContextualHelp(
|
|
|
189
189
|
this.validate();
|
|
190
190
|
this._presentationValue = this.#valueToPresentationValue(this.value);
|
|
191
191
|
if (this.autofocus) {
|
|
192
|
-
|
|
192
|
+
Updates.enqueue(() => {
|
|
193
193
|
this.focus();
|
|
194
194
|
});
|
|
195
195
|
}
|
|
@@ -369,7 +369,7 @@ const NumberFieldTemplate = (context) => {
|
|
|
369
369
|
return html`
|
|
370
370
|
<div class="base ${getStateClasses}">
|
|
371
371
|
${when((x) => x.label, renderLabel())}
|
|
372
|
-
<slot name="contextual-help"></slot>
|
|
372
|
+
<slot name="contextual-help" ${slotted("_contextualHelpSlottedContent")}></slot>
|
|
373
373
|
<div class="fieldset">
|
|
374
374
|
<div class="wrapper">
|
|
375
375
|
<input
|
package/number-field/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";const x=require("../bundled/definition3.cjs"),z=require("../bundled/definition14.cjs"),_=require("../bundled/definition12.cjs"),C=require("../bundled/definition2.cjs"),g=require("../bundled/mixins.cjs"),r=require("../bundled/vivid-element.cjs"),A=require("../bundled/definition11.cjs"),y=require("../bundled/delegates-aria.cjs"),q=require("../bundled/form-associated.cjs"),D=require("../bundled/with-contextual-help.cjs"),S=require("../bundled/with-error-text.cjs"),V=require("../bundled/with-success-text.cjs"),N=require("../bundled/form-element.cjs"),F=require("../bundled/affix.cjs"),B=require("../bundled/localized.cjs"),p=require("../bundled/key-codes.cjs"),u=require("../bundled/enums.cjs"),T=require("../bundled/divider.cjs"),P=require("../bundled/class-names.cjs"),E=require("../bundled/when.cjs"),I=require("../bundled/ref.cjs"),O='.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}:host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base: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}}.base.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)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{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));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}';var U=Object.defineProperty,i=(a,t,e,o)=>{for(var l=void 0,s=a.length-1,c;s>=0;s--)(c=a[s])&&(l=c(t,e,l)||l);return l&&U(t,e,l),l};const v={up:1,down:-1};function b(a,t){const e=parseFloat(a.value),o=isNaN(e)?a.min>0?a.min:a.max<0?a.max:a.min?0:t*a.step:e+t*a.step;a.value=Number(o.toFixed(12)).toString(),a._updatedValueAnnouncement=a.locale.numberField.updatedValueAnnouncement(a._presentationValue)}const w=a=>{const t=a.source;return{invalidCharacters:new RegExp(`[^0-9\\-+e${t}]`,"g"),additionalDecimalSeparators:new RegExp(`(?<=${t}.*)${t}`,"g"),trailingDecimalSeparator:new RegExp(`${t}$`),decimalSeparator:a}},L=w(/\./),H=w(/,/),h=/^-?((\d*\.\d+)|(\d+))$/;class n extends D.WithContextualHelp(g.WithFeedback(S.WithErrorText(V.WithSuccessText(N.FormElement(F.AffixIcon(B.Localized(y.DelegatesAria(q.FormAssociated(r.VividElement))))))))){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.readOnly=!1,this.autofocus=!1,this.step=1,this.isUserInput=!1,this._presentationValue="",this._updatedValueAnnouncement="",this.incrementButtonAriaLabel=null,this.decrementButtonAriaLabel=null}stepChanged(t,e){this.proxy.setAttribute("step",Number.isFinite(e)?e.toString():"")}maxChanged(t,e){this.max=Math.max(e,this.min??e),this.proxy.max=this.max.toString(),this.validate()}minChanged(t,e){this.min=Math.min(e,this.max??e),this.proxy.min=this.min.toString(),this.validate()}get valueAsNumber(){return parseFloat(this.value)}set valueAsNumber(t){this.value=t.toString()}valueChanged(t,e){this.value=h.test(e)?e:"",e===this.value&&(this.control&&!this.isUserInput&&(this._presentationValue=this.#e(this.value)),super.valueChanged(t,this.value),t!==void 0&&!this.isUserInput&&(this.$emit("input"),this.$emit("change")))}get _numberPatterns(){return this.locale.common.useCommaAsDecimalSeparator?H:L}#e(t){return t.replace(".",this.locale.common.useCommaAsDecimalSeparator?",":".")}#t(t){return t.replace(this._numberPatterns.invalidCharacters,"").replace(this._numberPatterns.additionalDecimalSeparators,"")}#a(t){const e=t.replace(this._numberPatterns.trailingDecimalSeparator,"").replace(this._numberPatterns.decimalSeparator,".");return h.test(e)?e:""}validate(){super.validate(this.control)}stepUp(){b(this,v.up)}stepDown(){b(this,v.down)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute("type","number"),this.validate(),this._presentationValue=this.#e(this.value),this.autofocus&&r.DOM.queueUpdate(()=>{this.focus()})}select(){this.control.select(),this.$emit("select")}handleTextInput(){this._presentationValue=this.#t(this.control.value),this.control.value!==this._presentationValue&&(this.control.value=this._presentationValue),this.isUserInput=!0,this.value=this.#a(this._presentationValue),this.isUserInput=!1}handleChange(){this.$emit("change")}handleKeyDown(t){switch(t.key){case p.keyArrowUp:return this.stepUp(),!1;case p.keyArrowDown:return this.stepDown(),!1}return!0}}i([r.attr({attribute:"readonly",mode:"boolean"})],n.prototype,"readOnly");i([r.attr({mode:"boolean"})],n.prototype,"autofocus");i([r.attr],n.prototype,"placeholder");i([r.attr],n.prototype,"list");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"maxlength");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"minlength");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"size");i([r.attr()],n.prototype,"scale");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"step");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"max");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"min");i([r.observable],n.prototype,"defaultSlottedNodes");i([r.observable],n.prototype,"_presentationValue");i([r.observable],n.prototype,"_updatedValueAnnouncement");i([r.attr({attribute:"increment-button-aria-label"})],n.prototype,"incrementButtonAriaLabel");i([r.attr({attribute:"decrement-button-aria-label"})],n.prototype,"decrementButtonAriaLabel");i([r.attr],n.prototype,"appearance");i([r.attr],n.prototype,"shape");i([r.attr],n.prototype,"autoComplete");const W=({errorValidationMessage:a,disabled:t,value:e,readOnly:o,placeholder:l,appearance:s,shape:c,label:$,successText:k,scale:d})=>P.classNames(["error",!!a],["disabled",t],["has-value",!!e],["readonly",o],["placeholder",!!l],[`appearance-${s}`,!!s],[`shape-${c}`,!!c],["no-label",!$],["success",!!k],[`size-${d}`,!!d]);function R(){return r.html` <label for="control" class="label">
|
|
1
|
+
"use strict";const x=require("../bundled/definition3.cjs"),z=require("../bundled/definition14.cjs"),_=require("../bundled/definition13.cjs"),C=require("../bundled/definition2.cjs"),g=require("../bundled/mixins.cjs"),r=require("../bundled/vivid-element.cjs"),q=require("../bundled/definition12.cjs"),y=require("../bundled/delegates-aria.cjs"),A=require("../bundled/form-associated.cjs"),S=require("../bundled/with-contextual-help.cjs"),D=require("../bundled/with-error-text.cjs"),V=require("../bundled/with-success-text.cjs"),N=require("../bundled/form-element.cjs"),F=require("../bundled/affix.cjs"),B=require("../bundled/localized.cjs"),p=require("../bundled/key-codes.cjs"),u=require("../bundled/enums.cjs"),T=require("../bundled/divider.cjs"),P=require("../bundled/when.cjs"),E=require("../bundled/slotted.cjs"),I=require("../bundled/ref.cjs"),U=require("../bundled/class-names.cjs"),L=':host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base: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}}.base.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)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{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));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}';var O=Object.defineProperty,i=(a,t,e,o)=>{for(var l=void 0,s=a.length-1,c;s>=0;s--)(c=a[s])&&(l=c(t,e,l)||l);return l&&O(t,e,l),l};const v={up:1,down:-1};function b(a,t){const e=parseFloat(a.value),o=isNaN(e)?a.min>0?a.min:a.max<0?a.max:a.min?0:t*a.step:e+t*a.step;a.value=Number(o.toFixed(12)).toString(),a._updatedValueAnnouncement=a.locale.numberField.updatedValueAnnouncement(a._presentationValue)}const w=a=>{const t=a.source;return{invalidCharacters:new RegExp(`[^0-9\\-+e${t}]`,"g"),additionalDecimalSeparators:new RegExp(`(?<=${t}.*)${t}`,"g"),trailingDecimalSeparator:new RegExp(`${t}$`),decimalSeparator:a}},H=w(/\./),W=w(/,/),h=/^-?((\d*\.\d+)|(\d+))$/;class n extends S.WithContextualHelp(g.WithFeedback(D.WithErrorText(V.WithSuccessText(N.FormElement(F.AffixIcon(B.Localized(y.DelegatesAria(A.FormAssociated(r.VividElement))))))))){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.readOnly=!1,this.autofocus=!1,this.step=1,this.isUserInput=!1,this._presentationValue="",this._updatedValueAnnouncement="",this.incrementButtonAriaLabel=null,this.decrementButtonAriaLabel=null}stepChanged(t,e){this.proxy.setAttribute("step",Number.isFinite(e)?e.toString():"")}maxChanged(t,e){this.max=Math.max(e,this.min??e),this.proxy.max=this.max.toString(),this.validate()}minChanged(t,e){this.min=Math.min(e,this.max??e),this.proxy.min=this.min.toString(),this.validate()}get valueAsNumber(){return parseFloat(this.value)}set valueAsNumber(t){this.value=t.toString()}valueChanged(t,e){this.value=h.test(e)?e:"",e===this.value&&(this.control&&!this.isUserInput&&(this._presentationValue=this.#e(this.value)),super.valueChanged(t,this.value),t!==void 0&&!this.isUserInput&&(this.$emit("input"),this.$emit("change")))}get _numberPatterns(){return this.locale.common.useCommaAsDecimalSeparator?W:H}#e(t){return t.replace(".",this.locale.common.useCommaAsDecimalSeparator?",":".")}#t(t){return t.replace(this._numberPatterns.invalidCharacters,"").replace(this._numberPatterns.additionalDecimalSeparators,"")}#a(t){const e=t.replace(this._numberPatterns.trailingDecimalSeparator,"").replace(this._numberPatterns.decimalSeparator,".");return h.test(e)?e:""}validate(){super.validate(this.control)}stepUp(){b(this,v.up)}stepDown(){b(this,v.down)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute("type","number"),this.validate(),this._presentationValue=this.#e(this.value),this.autofocus&&r.Updates.enqueue(()=>{this.focus()})}select(){this.control.select(),this.$emit("select")}handleTextInput(){this._presentationValue=this.#t(this.control.value),this.control.value!==this._presentationValue&&(this.control.value=this._presentationValue),this.isUserInput=!0,this.value=this.#a(this._presentationValue),this.isUserInput=!1}handleChange(){this.$emit("change")}handleKeyDown(t){switch(t.key){case p.keyArrowUp:return this.stepUp(),!1;case p.keyArrowDown:return this.stepDown(),!1}return!0}}i([r.attr({attribute:"readonly",mode:"boolean"})],n.prototype,"readOnly");i([r.attr({mode:"boolean"})],n.prototype,"autofocus");i([r.attr],n.prototype,"placeholder");i([r.attr],n.prototype,"list");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"maxlength");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"minlength");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"size");i([r.attr()],n.prototype,"scale");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"step");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"max");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"min");i([r.observable],n.prototype,"defaultSlottedNodes");i([r.observable],n.prototype,"_presentationValue");i([r.observable],n.prototype,"_updatedValueAnnouncement");i([r.attr({attribute:"increment-button-aria-label"})],n.prototype,"incrementButtonAriaLabel");i([r.attr({attribute:"decrement-button-aria-label"})],n.prototype,"decrementButtonAriaLabel");i([r.attr],n.prototype,"appearance");i([r.attr],n.prototype,"shape");i([r.attr],n.prototype,"autoComplete");const R=({errorValidationMessage:a,disabled:t,value:e,readOnly:o,placeholder:l,appearance:s,shape:c,label:$,successText:k,scale:d})=>U.classNames(["error",!!a],["disabled",t],["has-value",!!e],["readonly",o],["placeholder",!!l],[`appearance-${s}`,!!s],[`shape-${c}`,!!c],["no-label",!$],["success",!!k],[`size-${d}`,!!d]);function M(){return r.html` <label for="control" class="label">
|
|
2
2
|
${a=>a.label}
|
|
3
|
-
</label>`}function m(a){return a.shape===u.Shape.Pill?u.Shape.Pill:null}function f(a){return a.disabled||a.readOnly?"-1":null}function
|
|
3
|
+
</label>`}function m(a){return a.shape===u.Shape.Pill?u.Shape.Pill:null}function f(a){return a.disabled||a.readOnly?"-1":null}function K(a){const t=a.tagFor(x.Button),e=a.tagFor(T.Divider);return r.html`
|
|
4
4
|
<div class="control-buttons" ?inert="${o=>o.disabled||o.readOnly}">
|
|
5
5
|
<${t} id="subtract" icon="minus-line"
|
|
6
6
|
?disabled="${o=>o.disabled||o.readOnly}"
|
|
@@ -20,10 +20,10 @@
|
|
|
20
20
|
tabindex="${f}"
|
|
21
21
|
@click="${o=>o.stepUp()}"></${t}>
|
|
22
22
|
</div>
|
|
23
|
-
`}const
|
|
24
|
-
<div class="base ${
|
|
25
|
-
${
|
|
26
|
-
<slot name="contextual-help"></slot>
|
|
23
|
+
`}const j=a=>{const t=a.tagFor(_.VisuallyHidden);return r.html`
|
|
24
|
+
<div class="base ${R}">
|
|
25
|
+
${P.when(e=>e.label,M())}
|
|
26
|
+
<slot name="contextual-help" ${E.slotted("_contextualHelpSlottedContent")}></slot>
|
|
27
27
|
<div class="fieldset">
|
|
28
28
|
<div class="wrapper">
|
|
29
29
|
<input
|
|
@@ -51,10 +51,10 @@
|
|
|
51
51
|
${I.ref("control")}
|
|
52
52
|
/>
|
|
53
53
|
</div>
|
|
54
|
-
${()=>
|
|
54
|
+
${()=>K(a)}
|
|
55
55
|
</div>
|
|
56
56
|
${e=>e._getFeedbackTemplate(a)}
|
|
57
57
|
<${t} id="value-announcement" role="status" aria-atomic="true">
|
|
58
58
|
${e=>e._updatedValueAnnouncement}</${t}>
|
|
59
59
|
</div>
|
|
60
|
-
`},
|
|
60
|
+
`},Y=r.defineVividComponent("number-field",n,j,[x.buttonDefinition,z.dividerDefinition,C.iconDefinition,g.feedbackMessageDefinition,_.visuallyHiddenDefinition,q.contextualHelpDefinition],{styles:L,shadowOptions:{delegatesFocus:!0}}),G=r.createRegisterFunction(Y);G();
|
package/number-field/index.js
CHANGED
|
@@ -1,29 +1,30 @@
|
|
|
1
|
-
import { B as
|
|
1
|
+
import { B as $, b as k } from "../bundled/definition3.js";
|
|
2
2
|
import { d as z } from "../bundled/definition14.js";
|
|
3
|
-
import { V as
|
|
3
|
+
import { V as C, v as D } from "../bundled/definition13.js";
|
|
4
4
|
import { i as V } from "../bundled/definition2.js";
|
|
5
5
|
import { W as A, f as S } from "../bundled/mixins.js";
|
|
6
|
-
import { V as F,
|
|
7
|
-
import { c as T } from "../bundled/
|
|
8
|
-
import { D as
|
|
9
|
-
import { F as
|
|
10
|
-
import { W as
|
|
6
|
+
import { V as F, U as B, a as i, n as c, o as d, h as u, c as P, d as N } from "../bundled/vivid-element.js";
|
|
7
|
+
import { c as T } from "../bundled/definition12.js";
|
|
8
|
+
import { D as U, d as I } from "../bundled/delegates-aria.js";
|
|
9
|
+
import { F as L } from "../bundled/form-associated.js";
|
|
10
|
+
import { W as O } from "../bundled/with-contextual-help.js";
|
|
11
11
|
import { W } from "../bundled/with-error-text.js";
|
|
12
12
|
import { W as E } from "../bundled/with-success-text.js";
|
|
13
13
|
import { F as H } from "../bundled/form-element.js";
|
|
14
14
|
import { b as R } from "../bundled/affix.js";
|
|
15
|
-
import { L as
|
|
16
|
-
import { b as
|
|
15
|
+
import { L as q } from "../bundled/localized.js";
|
|
16
|
+
import { b as M, c as K } from "../bundled/key-codes.js";
|
|
17
17
|
import { b } from "../bundled/enums.js";
|
|
18
18
|
import { D as j } from "../bundled/divider.js";
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
19
|
+
import { w as Y } from "../bundled/when.js";
|
|
20
|
+
import { s as G } from "../bundled/slotted.js";
|
|
21
21
|
import { r as J } from "../bundled/ref.js";
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
import { c as Q } from "../bundled/class-names.js";
|
|
23
|
+
const X = ':host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base: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}}.base.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)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{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));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}';
|
|
24
|
+
var Z = Object.defineProperty, n = (a, t, e, o) => {
|
|
24
25
|
for (var l = void 0, s = a.length - 1, p; s >= 0; s--)
|
|
25
26
|
(p = a[s]) && (l = p(t, e, l) || l);
|
|
26
|
-
return l &&
|
|
27
|
+
return l && Z(t, e, l), l;
|
|
27
28
|
};
|
|
28
29
|
const m = {
|
|
29
30
|
up: 1,
|
|
@@ -43,13 +44,13 @@ const g = (a) => {
|
|
|
43
44
|
trailingDecimalSeparator: new RegExp(`${t}$`),
|
|
44
45
|
decimalSeparator: a
|
|
45
46
|
};
|
|
46
|
-
},
|
|
47
|
-
class r extends
|
|
47
|
+
}, ee = g(/\./), te = g(/,/), f = /^-?((\d*\.\d+)|(\d+))$/;
|
|
48
|
+
class r extends O(
|
|
48
49
|
A(
|
|
49
50
|
W(
|
|
50
51
|
E(
|
|
51
52
|
H(
|
|
52
|
-
R(
|
|
53
|
+
R(q(U(L(F))))
|
|
53
54
|
)
|
|
54
55
|
)
|
|
55
56
|
)
|
|
@@ -103,7 +104,7 @@ class r extends U(
|
|
|
103
104
|
* @internal
|
|
104
105
|
*/
|
|
105
106
|
get _numberPatterns() {
|
|
106
|
-
return this.locale.common.useCommaAsDecimalSeparator ?
|
|
107
|
+
return this.locale.common.useCommaAsDecimalSeparator ? te : ee;
|
|
107
108
|
}
|
|
108
109
|
#e(t) {
|
|
109
110
|
return t.replace(
|
|
@@ -143,7 +144,7 @@ class r extends U(
|
|
|
143
144
|
* @internal
|
|
144
145
|
*/
|
|
145
146
|
connectedCallback() {
|
|
146
|
-
super.connectedCallback(), this.proxy.setAttribute("type", "number"), this.validate(), this._presentationValue = this.#e(this.value), this.autofocus && B.
|
|
147
|
+
super.connectedCallback(), this.proxy.setAttribute("type", "number"), this.validate(), this._presentationValue = this.#e(this.value), this.autofocus && B.enqueue(() => {
|
|
147
148
|
this.focus();
|
|
148
149
|
});
|
|
149
150
|
}
|
|
@@ -184,7 +185,7 @@ class r extends U(
|
|
|
184
185
|
switch (t.key) {
|
|
185
186
|
case K:
|
|
186
187
|
return this.stepUp(), !1;
|
|
187
|
-
case
|
|
188
|
+
case M:
|
|
188
189
|
return this.stepDown(), !1;
|
|
189
190
|
}
|
|
190
191
|
return !0;
|
|
@@ -247,7 +248,7 @@ n([
|
|
|
247
248
|
n([
|
|
248
249
|
i
|
|
249
250
|
], r.prototype, "autoComplete");
|
|
250
|
-
const
|
|
251
|
+
const ae = ({
|
|
251
252
|
errorValidationMessage: a,
|
|
252
253
|
disabled: t,
|
|
253
254
|
value: e,
|
|
@@ -258,7 +259,7 @@ const te = ({
|
|
|
258
259
|
label: y,
|
|
259
260
|
successText: w,
|
|
260
261
|
scale: v
|
|
261
|
-
}) =>
|
|
262
|
+
}) => Q(
|
|
262
263
|
["error", !!a],
|
|
263
264
|
["disabled", t],
|
|
264
265
|
["has-value", !!e],
|
|
@@ -270,7 +271,7 @@ const te = ({
|
|
|
270
271
|
["success", !!w],
|
|
271
272
|
[`size-${v}`, !!v]
|
|
272
273
|
);
|
|
273
|
-
function
|
|
274
|
+
function oe() {
|
|
274
275
|
return u` <label for="control" class="label">
|
|
275
276
|
${(a) => a.label}
|
|
276
277
|
</label>`;
|
|
@@ -281,8 +282,8 @@ function x(a) {
|
|
|
281
282
|
function _(a) {
|
|
282
283
|
return a.disabled || a.readOnly ? "-1" : null;
|
|
283
284
|
}
|
|
284
|
-
function
|
|
285
|
-
const t = a.tagFor(
|
|
285
|
+
function re(a) {
|
|
286
|
+
const t = a.tagFor($), e = a.tagFor(j);
|
|
286
287
|
return u`
|
|
287
288
|
<div class="control-buttons" ?inert="${(o) => o.disabled || o.readOnly}">
|
|
288
289
|
<${t} id="subtract" icon="minus-line"
|
|
@@ -305,12 +306,12 @@ function oe(a) {
|
|
|
305
306
|
</div>
|
|
306
307
|
`;
|
|
307
308
|
}
|
|
308
|
-
const
|
|
309
|
-
const t = a.tagFor(
|
|
309
|
+
const ne = (a) => {
|
|
310
|
+
const t = a.tagFor(C);
|
|
310
311
|
return u`
|
|
311
|
-
<div class="base ${
|
|
312
|
-
${
|
|
313
|
-
<slot name="contextual-help"></slot>
|
|
312
|
+
<div class="base ${ae}">
|
|
313
|
+
${Y((e) => e.label, oe())}
|
|
314
|
+
<slot name="contextual-help" ${G("_contextualHelpSlottedContent")}></slot>
|
|
314
315
|
<div class="fieldset">
|
|
315
316
|
<div class="wrapper">
|
|
316
317
|
<input
|
|
@@ -334,36 +335,36 @@ const re = (a) => {
|
|
|
334
335
|
:value="${(e) => e._presentationValue}"
|
|
335
336
|
type="text"
|
|
336
337
|
aria-describedby="${(e) => e._feedbackDescribedBy}"
|
|
337
|
-
${
|
|
338
|
+
${I()}
|
|
338
339
|
${J("control")}
|
|
339
340
|
/>
|
|
340
341
|
</div>
|
|
341
|
-
${() =>
|
|
342
|
+
${() => re(a)}
|
|
342
343
|
</div>
|
|
343
344
|
${(e) => e._getFeedbackTemplate(a)}
|
|
344
345
|
<${t} id="value-announcement" role="status" aria-atomic="true">
|
|
345
346
|
${(e) => e._updatedValueAnnouncement}</${t}>
|
|
346
347
|
</div>
|
|
347
348
|
`;
|
|
348
|
-
},
|
|
349
|
+
}, ie = N(
|
|
349
350
|
"number-field",
|
|
350
351
|
r,
|
|
351
|
-
|
|
352
|
+
ne,
|
|
352
353
|
[
|
|
353
|
-
|
|
354
|
+
k,
|
|
354
355
|
z,
|
|
355
356
|
V,
|
|
356
357
|
S,
|
|
357
|
-
|
|
358
|
+
D,
|
|
358
359
|
T
|
|
359
360
|
],
|
|
360
361
|
{
|
|
361
|
-
styles:
|
|
362
|
+
styles: X,
|
|
362
363
|
shadowOptions: {
|
|
363
364
|
delegatesFocus: !0
|
|
364
365
|
}
|
|
365
366
|
}
|
|
366
|
-
),
|
|
367
|
-
|
|
367
|
+
), le = P(
|
|
368
|
+
ie
|
|
368
369
|
);
|
|
369
|
-
|
|
370
|
+
le();
|
package/option/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const i=require("../bundled/
|
|
1
|
+
"use strict";const i=require("../bundled/definition11.cjs");i.registerOption();
|
package/option/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { r } from "../bundled/
|
|
1
|
+
import { r } from "../bundled/definition11.js";
|
|
2
2
|
r();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vonage/vivid",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.3.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"module": "./index.js",
|
|
6
6
|
"main": "./index.cjs",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
},
|
|
60
60
|
"dependencies": {
|
|
61
61
|
"@floating-ui/dom": "^1.6.13",
|
|
62
|
-
"@microsoft/fast-element": "^
|
|
62
|
+
"@microsoft/fast-element": "^2.7.0",
|
|
63
63
|
"@microsoft/fast-web-utilities": "^6.0.0",
|
|
64
64
|
"date-fns": "^3.0.0",
|
|
65
65
|
"prosemirror-commands": "^1.7.1",
|
|
@@ -69,8 +69,7 @@
|
|
|
69
69
|
"prosemirror-state": "^1.4.3",
|
|
70
70
|
"prosemirror-view": "^1.40.1",
|
|
71
71
|
"ramda": "^0.30.0",
|
|
72
|
-
"uuid": "^11.1.0"
|
|
73
|
-
"video.js": "^8.23.3"
|
|
72
|
+
"uuid": "^11.1.0"
|
|
74
73
|
},
|
|
75
74
|
"devDependencies": {
|
|
76
75
|
"@repo/cem-analyzer-plugins": "*",
|
|
@@ -81,6 +80,7 @@
|
|
|
81
80
|
"@repo/stylelint-config": "*",
|
|
82
81
|
"@repo/styles": "*",
|
|
83
82
|
"@repo/typescript-config": "*",
|
|
84
|
-
"@repo/vitest-config": "*"
|
|
83
|
+
"@repo/vitest-config": "*",
|
|
84
|
+
"video.js": "^8.23.3"
|
|
85
85
|
}
|
|
86
86
|
}
|
|
@@ -207,6 +207,7 @@ const getPaginationButtonWidth = (value) => {
|
|
|
207
207
|
};
|
|
208
208
|
const PaginationTemplate = (context) => {
|
|
209
209
|
const buttonTag = context.tagFor(button_definition.Button);
|
|
210
|
+
const buttonTagName = context.tagFor(button_definition.Button, true);
|
|
210
211
|
const paginationButtonTemplate = paginationButtonRenderer(buttonTag);
|
|
211
212
|
return fastElement.html`
|
|
212
213
|
<div class="${getClasses}">
|
|
@@ -221,7 +222,7 @@ const PaginationTemplate = (context) => {
|
|
|
221
222
|
></${buttonTag}>
|
|
222
223
|
<div id="buttons-wrapper" class="buttons-wrapper" ${fastElement.children({
|
|
223
224
|
property: "paginationButtons",
|
|
224
|
-
filter: fastElement.elements(
|
|
225
|
+
filter: fastElement.elements(buttonTagName)
|
|
225
226
|
})}>
|
|
226
227
|
${fastElement.repeat((x) => x.pagesList, paginationButtonTemplate, { positioning: true })}
|
|
227
228
|
</div>
|
package/pagination/definition.js
CHANGED
|
@@ -203,6 +203,7 @@ const getPaginationButtonWidth = (value) => {
|
|
|
203
203
|
};
|
|
204
204
|
const PaginationTemplate = (context) => {
|
|
205
205
|
const buttonTag = context.tagFor(Button);
|
|
206
|
+
const buttonTagName = context.tagFor(Button, true);
|
|
206
207
|
const paginationButtonTemplate = paginationButtonRenderer(buttonTag);
|
|
207
208
|
return html`
|
|
208
209
|
<div class="${getClasses}">
|
|
@@ -217,7 +218,7 @@ const PaginationTemplate = (context) => {
|
|
|
217
218
|
></${buttonTag}>
|
|
218
219
|
<div id="buttons-wrapper" class="buttons-wrapper" ${children({
|
|
219
220
|
property: "paginationButtons",
|
|
220
|
-
filter: elements(
|
|
221
|
+
filter: elements(buttonTagName)
|
|
221
222
|
})}>
|
|
222
223
|
${repeat((x) => x.pagesList, paginationButtonTemplate, { positioning: true })}
|
|
223
224
|
</div>
|