@vonage/vivid 5.16.0 → 5.17.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/index.cjs +1 -1
- package/accordion/index.js +1 -1
- package/accordion-item/index.cjs +1 -1
- package/accordion-item/index.js +1 -1
- package/action-group/index.cjs +3 -3
- package/action-group/index.js +5 -5
- package/alert/index.cjs +3 -3
- package/alert/index.js +17 -17
- package/audio-player/index.cjs +16 -16
- package/audio-player/index.js +27 -27
- package/avatar/index.cjs +2 -2
- package/avatar/index.js +6 -6
- package/badge/index.cjs +2 -2
- package/badge/index.js +6 -6
- package/banner/index.cjs +3 -3
- package/banner/index.js +15 -15
- package/bundled/base-color-picker.cjs +2 -2
- package/bundled/base-color-picker.js +5 -5
- package/bundled/button.cjs +1 -1
- package/bundled/button.js +2 -2
- package/bundled/calendar-picker.template.cjs +2 -2
- package/bundled/calendar-picker.template.js +498 -498
- package/bundled/definition10.cjs +18 -30
- package/bundled/definition10.js +53 -155
- package/bundled/definition11.cjs +10 -19
- package/bundled/definition11.js +25 -74
- package/bundled/definition12.cjs +72 -18
- package/bundled/definition12.js +171 -107
- package/bundled/definition13.cjs +18 -17
- package/bundled/definition13.js +45 -65
- package/bundled/definition14.cjs +5 -10
- package/bundled/definition14.js +9 -27
- package/bundled/definition15.cjs +17 -71
- package/bundled/definition15.js +64 -181
- package/bundled/definition16.cjs +12 -4
- package/bundled/definition16.js +79 -14
- package/bundled/definition17.cjs +19 -13
- package/bundled/definition17.js +119 -70
- package/bundled/definition18.cjs +87 -12
- package/bundled/definition18.js +409 -52
- package/bundled/definition19.cjs +5 -87
- package/bundled/definition19.js +14 -422
- package/bundled/definition2.cjs +3 -3
- package/bundled/definition2.js +27 -27
- package/bundled/definition20.cjs +30 -5
- package/bundled/definition20.js +159 -9
- package/bundled/definition21.cjs +28 -19
- package/bundled/definition21.js +164 -47
- package/bundled/definition22.cjs +38 -23
- package/bundled/definition22.js +64 -82
- package/bundled/definition3.cjs +1 -1
- package/bundled/definition3.js +15 -15
- package/bundled/definition4.cjs +23 -38
- package/bundled/definition4.js +82 -64
- package/bundled/definition5.cjs +2 -2
- package/bundled/definition5.js +5 -5
- package/bundled/definition6.cjs +2 -2
- package/bundled/definition6.js +24 -24
- package/bundled/definition9.cjs +12 -30
- package/bundled/definition9.js +55 -148
- package/bundled/divider.cjs +1 -1
- package/bundled/divider.js +5 -5
- package/bundled/listbox.cjs +1 -1
- package/bundled/listbox.js +1 -1
- package/bundled/mixins.cjs +4 -4
- package/bundled/mixins.js +43 -43
- package/bundled/picker-field.template.cjs +7 -7
- package/bundled/picker-field.template.js +14 -14
- package/bundled/slider.template.cjs +7 -7
- package/bundled/slider.template.js +12 -12
- package/bundled/slottable-request.cjs +1 -1
- package/bundled/slottable-request.js +8 -38
- package/bundled/time-selection-picker.template.cjs +4 -4
- package/bundled/time-selection-picker.template.js +35 -35
- package/bundled/vivid-element.cjs +1 -1
- package/bundled/vivid-element.js +1 -1
- package/calendar/index.cjs +11 -11
- package/calendar/index.js +30 -237
- package/calendar-event/index.cjs +3 -3
- package/calendar-event/index.js +4 -4
- package/card/index.cjs +14 -11
- package/card/index.js +16 -13
- package/checkbox/index.cjs +1 -1
- package/checkbox/index.js +1 -1
- package/color-picker/definition.cjs +1 -1
- package/color-picker/definition.js +1 -1
- package/color-picker/index.cjs +6 -6
- package/color-picker/index.js +24 -24
- package/combobox/definition.cjs +1 -1
- package/combobox/definition.js +1 -1
- package/combobox/index.cjs +9 -8
- package/combobox/index.js +32 -28
- package/contextual-help/definition.cjs +1 -1
- package/contextual-help/definition.js +1 -1
- package/contextual-help/index.cjs +1 -1
- package/contextual-help/index.js +1 -1
- package/custom-elements.json +1027 -615
- package/data-grid/definition.js +1 -1
- package/data-grid/index.cjs +17 -17
- package/data-grid/index.js +261 -264
- package/date-picker/index.cjs +1 -1
- package/date-picker/index.js +12 -12
- package/date-range-picker/index.cjs +1 -1
- package/date-range-picker/index.js +7 -7
- package/date-time-picker/index.cjs +4 -4
- package/date-time-picker/index.js +24 -24
- package/dial-pad/index.cjs +3 -2
- package/dial-pad/index.js +6 -5
- package/dialog/index.cjs +4 -4
- package/dialog/index.js +5 -5
- package/divider/index.cjs +1 -1
- package/divider/index.js +1 -1
- package/fab/index.cjs +3 -3
- package/fab/index.js +8 -8
- package/file-picker/index.cjs +16 -13
- package/file-picker/index.js +31 -28
- package/header/index.cjs +4 -4
- package/header/index.js +5 -5
- package/index.cjs +24 -21
- package/index.js +11 -11
- package/lib/combobox/combobox.d.ts +0 -3
- package/lib/date-time-picker/date-time-picker.d.ts +0 -4
- package/lib/dial-pad/dial-pad.d.ts +6 -2
- package/lib/dialog/dialog.d.ts +0 -1
- package/lib/menu/menu.d.ts +0 -1
- package/lib/option/option.d.ts +0 -1
- package/lib/rich-text-editor/rte/exports.d.ts +1 -0
- package/lib/rich-text-editor/rte/features/alignment.d.ts +1 -1
- package/lib/rich-text-editor/rte/features/character-count.d.ts +21 -0
- package/lib/rich-text-editor/rte/features/font-size-picker.d.ts +1 -1
- package/lib/rich-text-editor/rte/features/internal/basic-text-blocks.d.ts +1 -1
- package/lib/rich-text-editor/rte/features/keyboard-shortcuts.d.ts +1 -1
- package/lib/rich-text-editor/rte/features/text-color-picker.d.ts +1 -1
- package/lib/rich-text-editor/rte/public-interface.d.ts +6 -0
- package/lib/searchable-select/option-tag.d.ts +0 -1
- package/lib/table/definition.d.ts +2 -1
- package/lib/table/table-header-cell.d.ts +3 -0
- package/lib/table/table-sorting-button.d.ts +415 -0
- package/lib/table/table-sorting-button.template.d.ts +3 -0
- package/locales/de-DE.cjs +4 -178
- package/locales/de-DE.js +2 -179
- package/locales/en-GB.cjs +4 -9
- package/locales/en-GB.js +2 -10
- package/locales/en-US.cjs +268 -2
- package/locales/en-US.js +265 -1
- package/locales/ja-JP.cjs +4 -171
- package/locales/ja-JP.js +2 -172
- package/locales/zh-CN.cjs +4 -172
- package/locales/zh-CN.js +2 -173
- package/menu/index.cjs +1 -1
- package/menu/index.js +1 -1
- package/menu-item/index.cjs +1 -1
- package/menu-item/index.js +1 -1
- package/nav-disclosure/index.cjs +3 -3
- package/nav-disclosure/index.js +8 -8
- package/nav-item/index.cjs +1 -1
- package/nav-item/index.js +7 -7
- package/note/index.cjs +2 -2
- package/note/index.js +6 -6
- package/number-field/index.cjs +4 -4
- package/number-field/index.js +31 -31
- package/option/definition.cjs +1 -1
- package/option/definition.js +1 -1
- package/option/index.cjs +1 -1
- package/option/index.js +1 -1
- package/package.json +7 -8
- package/pagination/index.cjs +3 -3
- package/pagination/index.js +15 -15
- package/popover/index.cjs +4 -4
- package/popover/index.js +5 -5
- package/progress/index.cjs +2 -2
- package/progress/index.js +5 -5
- package/radio/index.cjs +1 -1
- package/radio/index.js +1 -1
- package/radio-group/index.cjs +4 -4
- package/radio-group/index.js +10 -10
- package/range-slider/index.cjs +4 -4
- package/range-slider/index.js +17 -17
- package/rich-text-editor/definition.cjs +1 -0
- package/rich-text-editor/definition.js +2 -2
- package/rich-text-editor/index.cjs +13 -13
- package/rich-text-editor/index.js +1886 -1829
- package/rich-text-view/index.cjs +1 -1
- package/rich-text-view/index.js +8 -8
- package/searchable-select/index.cjs +12 -12
- package/searchable-select/index.js +25 -25
- package/select/index.cjs +1 -1
- package/select/index.js +1 -1
- package/selectable-box/index.cjs +7 -7
- package/selectable-box/index.js +11 -11
- package/shared/foundation/test-utilities/fixture.d.ts +1 -1
- package/shared/patterns/linkable.d.ts +1 -1
- package/simple-color-picker/index.cjs +3 -3
- package/simple-color-picker/index.js +10 -10
- package/split-button/index.cjs +5 -5
- package/split-button/index.js +10 -10
- package/status/index.cjs +2 -2
- package/status/index.js +12 -12
- package/switch/index.cjs +3 -3
- package/switch/index.js +5 -5
- package/tab/index.cjs +1 -1
- package/tab/index.js +1 -1
- package/tab-panel/index.cjs +1 -1
- package/tab-panel/index.js +1 -1
- package/table/definition.cjs +17 -14
- package/table/definition.js +3 -2
- package/table/index.cjs +19 -10
- package/table/index.js +69 -21
- package/tabs/index.cjs +2 -2
- package/tabs/index.js +4 -4
- package/tag/index.cjs +7 -7
- package/tag/index.js +9 -9
- package/tag-group/index.cjs +3 -3
- package/tag-group/index.js +5 -5
- package/text-area/index.cjs +2 -2
- package/text-area/index.js +12 -12
- package/text-field/definition.cjs +1 -1
- package/text-field/definition.js +1 -1
- 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 +1 -1
- package/toggletip/definition.cjs +1 -1
- package/toggletip/definition.js +1 -1
- package/toggletip/index.cjs +1 -1
- package/toggletip/index.js +1 -1
- package/tooltip/definition.cjs +1 -1
- package/tooltip/definition.js +1 -1
- package/tooltip/index.cjs +1 -1
- package/tooltip/index.js +1 -1
- package/tree-item/index.cjs +1 -1
- package/tree-item/index.js +1 -1
- package/tree-view/index.cjs +3 -3
- package/tree-view/index.js +17 -17
- package/unbundled/button.cjs +2 -2
- package/unbundled/button.js +2 -2
- package/unbundled/calendar-picker.template.cjs +4347 -9
- package/unbundled/calendar-picker.template.js +4345 -7
- package/unbundled/chunk.cjs +0 -22
- package/unbundled/definition13.cjs +1 -8
- package/unbundled/definition13.js +1 -8
- package/unbundled/definition14.cjs +2 -2
- package/unbundled/definition14.js +2 -2
- package/unbundled/definition2.cjs +1 -1
- package/unbundled/definition2.js +1 -1
- package/unbundled/definition21.cjs +1 -2
- package/unbundled/definition21.js +1 -2
- package/unbundled/definition22.cjs +7 -2
- package/unbundled/definition22.js +7 -2
- package/unbundled/definition24.cjs +98 -979
- package/unbundled/definition24.js +93 -974
- package/unbundled/definition25.cjs +37 -322
- package/unbundled/definition25.js +33 -318
- package/unbundled/definition26.cjs +317 -91
- package/unbundled/definition26.js +313 -87
- package/unbundled/definition27.cjs +94 -192
- package/unbundled/definition27.js +91 -183
- package/unbundled/definition28.cjs +387 -395
- package/unbundled/definition28.js +387 -395
- package/unbundled/definition29.cjs +189 -110
- package/unbundled/definition29.js +180 -107
- package/unbundled/definition30.cjs +520 -36
- package/unbundled/definition30.js +519 -35
- package/unbundled/definition32.cjs +477 -477
- package/unbundled/definition32.js +475 -475
- package/unbundled/definition33.cjs +87 -2
- package/unbundled/definition33.js +77 -4
- package/unbundled/definition35.cjs +2 -2
- package/unbundled/definition35.js +2 -2
- package/unbundled/definition36.cjs +1 -1
- package/unbundled/definition36.js +1 -1
- package/unbundled/definition37.cjs +6 -2
- package/unbundled/definition37.js +6 -2
- package/unbundled/definition38.cjs +7 -5
- package/unbundled/definition38.js +7 -5
- package/unbundled/definition39.cjs +1 -0
- package/unbundled/definition39.js +1 -0
- package/unbundled/definition42.cjs +22 -11
- package/unbundled/definition42.js +22 -11
- package/unbundled/definition49.cjs +3 -3
- package/unbundled/definition49.js +3 -3
- package/unbundled/definition56.cjs +437 -9506
- package/unbundled/definition56.js +340 -9415
- package/unbundled/definition57.cjs +5 -5
- package/unbundled/definition57.js +5 -5
- package/unbundled/definition58.cjs +4 -3
- package/unbundled/definition58.js +2 -1
- package/unbundled/definition59.cjs +4 -3
- package/unbundled/definition59.js +4 -3
- package/unbundled/definition62.cjs +2 -2
- package/unbundled/definition62.js +2 -2
- package/unbundled/definition64.cjs +1 -1
- package/unbundled/definition64.js +1 -1
- package/unbundled/definition71.cjs +2 -2
- package/unbundled/definition71.js +2 -2
- package/unbundled/definition72.cjs +1 -2
- package/unbundled/definition72.js +1 -2
- package/unbundled/definition75.cjs +3 -51711
- package/unbundled/definition75.js +1 -51711
- package/unbundled/listbox.cjs +1 -1
- package/unbundled/listbox.js +1 -1
- package/unbundled/localized.cjs +2 -2
- package/unbundled/localized.js +1 -1
- package/unbundled/picker-field.template.cjs +1 -1
- package/unbundled/picker-field.template.js +1 -1
- package/unbundled/slottable-request.cjs +2 -3168
- package/unbundled/slottable-request.js +3 -3097
- package/unbundled/time-selection-picker.template.cjs +1 -1
- package/unbundled/time-selection-picker.template.js +1 -1
- package/unbundled/vivid-element.cjs +1 -1
- package/unbundled/vivid-element.js +1 -1
- package/video-player/index.cjs +3 -3
- package/video-player/index.js +9 -9
- package/vivid.api.json +220 -282
- package/unbundled/chunk.js +0 -33
- package/unbundled/en-US.cjs +0 -447
- package/unbundled/en-US.js +0 -443
package/radio-group/index.js
CHANGED
|
@@ -3,15 +3,15 @@ import { t as o } from "../bundled/when.js";
|
|
|
3
3
|
import { r as s, t as c } from "../bundled/slotted.js";
|
|
4
4
|
import "../bundled/definition2.js";
|
|
5
5
|
import { t as l } from "../bundled/decorate.js";
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import { n as g } from "../bundled/
|
|
6
|
+
import { n as u } from "../bundled/delegates-aria.js";
|
|
7
|
+
import { t as d } from "../bundled/aria.js";
|
|
8
|
+
import { a as f, i as p, n as m, r as h, t as g } from "../bundled/key-codes.js";
|
|
9
9
|
import { a as _, t as v } from "../bundled/mixins.js";
|
|
10
|
-
import { r as y, t as b } from "../bundled/
|
|
10
|
+
import { r as y, t as b } from "../bundled/definition16.js";
|
|
11
11
|
//#region src/lib/radio-group/radio-group.scss?inline
|
|
12
12
|
var x = ".base{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:8px;display:flex}.positioning-region{flex-wrap:wrap;gap:8px;display:flex}.positioning-region.vertical{flex-direction:column}fieldset{border:none;margin:0;padding:0;display:block}legend{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);margin-block-end:8px;padding:0}", S = class extends v(a) {
|
|
13
13
|
constructor(...e) {
|
|
14
|
-
super(...e), this.errorValidationMessage = "", this.orientation =
|
|
14
|
+
super(...e), this.errorValidationMessage = "", this.orientation = d.horizontal, this.slottedRadioButtons = [], this.radioErrorHandler = (e) => {
|
|
15
15
|
this.errorValidationMessage = e.target.errorValidationMessage || "";
|
|
16
16
|
}, this.radioChangeHandler = (e) => {
|
|
17
17
|
let t = e.target;
|
|
@@ -41,15 +41,15 @@ var x = ".base{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:colu
|
|
|
41
41
|
r = r < 0 ? n.length - 1 : r, this.moveToRadioByIndex(n, r);
|
|
42
42
|
}, this.keydownHandler = (e) => {
|
|
43
43
|
switch (e.key) {
|
|
44
|
-
case
|
|
44
|
+
case f:
|
|
45
45
|
this.checkFocusedRadio(e.target);
|
|
46
46
|
break;
|
|
47
|
-
case m:
|
|
48
47
|
case h:
|
|
48
|
+
case g:
|
|
49
49
|
this.moveRight(e);
|
|
50
50
|
break;
|
|
51
|
+
case m:
|
|
51
52
|
case p:
|
|
52
|
-
case f:
|
|
53
53
|
this.moveLeft(e);
|
|
54
54
|
break;
|
|
55
55
|
default: return !0;
|
|
@@ -148,7 +148,7 @@ l([n], S.prototype, "label", void 0), l([n({
|
|
|
148
148
|
>
|
|
149
149
|
<div class="base">
|
|
150
150
|
<fieldset
|
|
151
|
-
${
|
|
151
|
+
${u({
|
|
152
152
|
role: "radiogroup",
|
|
153
153
|
ariaDisabled: (e) => e.disabled,
|
|
154
154
|
ariaReadOnly: (e) => e.readOnly,
|
|
@@ -157,7 +157,7 @@ l([n], S.prototype, "label", void 0), l([n({
|
|
|
157
157
|
aria-labelledby="label"
|
|
158
158
|
aria-describedby="${(e) => e._feedbackDescribedBy}"
|
|
159
159
|
aria-invalid="${(e) => e.errorText ? "true" : "false"}"
|
|
160
|
-
class="control positioning-region ${(e) => e.orientation ===
|
|
160
|
+
class="control positioning-region ${(e) => e.orientation === d.horizontal ? "horizontal" : "vertical"}"
|
|
161
161
|
>
|
|
162
162
|
${o((e) => e.label, t`<legend id="label">${(e) => e.label}</legend>`)}
|
|
163
163
|
<slot
|
package/range-slider/index.cjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/when.cjs`);require(`../bundled/definition2.cjs`);const i=require(`../bundled/decorate.cjs`),a=require(`../bundled/aria.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/key-codes.cjs`),c=require(`../bundled/numbers.cjs`),l=require(`../bundled/form-associated.cjs`),u=require(`../bundled/form-element.cjs`),d=require(`../bundled/definition8.cjs`),f=require(`../bundled/slider.template.cjs`);var p=`:host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary:var(--vvd-slider-cta-primary,var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-slider-accent-primary,var(--vvd-color-canvas-text))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent;--_thumb-size:12px;--_thumb-interaction-indicator-size:36px;--_track-start-inset-inline-start:0;--_track-start-inset-block-start:0;cursor:pointer;user-select:none;outline:none}.control .positioning-region{position:relative}.control .track{background:var(--_track-background-color);border-radius:4px;position:absolute}.control .track-start{border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;position:absolute;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));min-inline-size:var(--_thumb-size);margin-inline-start:calc(var(--_thumb-size) / 2)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:2px;left:0;right:0}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start:1px;border-top-left-radius:0;border-bottom-left-radius:0}.control.horizontal .track .mark{block-size:6px;inline-size:100%;position:absolute;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:6px;position:absolute;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start:1px;border-radius:0}.control.disabled{--_track-background-color:var(--vvd-color-neutral-100);--_track-start-background-color:var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color:var(--vvd-color-neutral-300);--_track-start-background-color:var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);touch-action:none;border-radius:50%;outline:none;position:absolute}.thumb-container.focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--_thumb-interaction-indicator-alpha:.05;border-radius:50%}.control.horizontal .thumb-container{transform:translateX(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media (hover:hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha:.12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha:.25}.thumb-container:before{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:"";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha,0);transition:opacity .2s ease-out;display:block;position:absolute}.thumb-container:after{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:"";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2);display:block;position:absolute}.popup{pointer-events:none}.tooltip{width:auto;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);padding:8px 12px}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s}:host([internal-part]) .control.horizontal .track{block-size:4px;top:16px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control,:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start:auto;--_track-start-inset-block-start:auto}`,m={Increment:1,Decrement:-1},h=class extends e.t(u.t(l.n(t.t))){constructor(...e){super(...e),this.start=``,this.end=``,this.min=0,this.max=10,this.step=1,this.orientation=a.t.horizontal,this.ariaStartLabel=null,this.ariaEndLabel=null,this.markers=!1,this.pin=!1,this.valueTextFormatter=e=>parseFloat(e).toLocaleString(this.locale.lang),this.proxy=document.createElement(`input`),this._trackEl=null,this._startThumbEl=null,this._endThumbEl=null,this._draggingThumb=!1,this._visiblyFocusedThumb=null,this._hoveredThumb=null,this._startThumbCss=``,this._endThumbCss=``,this._selectedRangeCss=``}#e=!1;startChanged(){this.currentStart=this.start,this.#e||(this.dirtyValue=!0,this.#r()),this.$fastController.isConnected&&this.#c()}initialStartChanged(e,t){t&&!this.dirtyValue&&(this.start=t,this.dirtyValue=!1)}currentStartChanged(){this.start=this.currentStart}get startAsNumber(){return parseFloat(this.start)}set startAsNumber(e){this.start=e.toString()}endChanged(){this.currentEnd=this.end,this.#e||(this.dirtyValue=!0,this.#r()),this.$fastController.isConnected&&this.#c()}initialEndChanged(e,t){t&&!this.dirtyValue&&(this.end=t,this.dirtyValue=!1)}currentEndChanged(){this.end=this.currentEnd}get endAsNumber(){return parseFloat(this.end)}set endAsNumber(e){this.end=e.toString()}#t({start:e,end:t},n=!0){e===this.start&&(e=void 0),t===this.end&&(t=void 0),!(e===void 0&&t===void 0)&&(this.#e=!0,e!==void 0&&(this.start=e),t!==void 0&&(this.end=t),this.#e=!1,n&&(e!==void 0&&this.$emit(`input:start`),t!==void 0&&this.$emit(`input:end`),this.$emit(`input`),this.$emit(`change`),this.dirtyValue=!0),this.#r())}#n(e,t){this.#t({[e]:this.#d(e,Number(this[e])+t*this.step).toString()})}orientationChanged(){this.$fastController.isConnected&&this.#c()}nameChanged(e,t){super.nameChanged(e,t),this.#r()}#r(){if(!this.name)this.setFormValue(null);else{let e=new FormData;e.append(this.name,this.start),e.append(this.name,this.end),this.setFormValue(e)}}formResetCallback(){this.#t({start:this.initialStart??this.min.toString(),end:this.initialEnd??this.max.toString()}),super.formResetCallback()}get#i(){return{start:this._startThumbEl,end:this._endThumbEl}}get#a(){return{start:{min:this.min,max:this.endAsNumber},end:{min:this.startAsNumber,max:this.max}}}#o(e){return e===this._startThumbEl?`start`:`end`}#s(e){return this.#o(e.target)}#c(){let e=this.#l(this.startAsNumber),t=this.#l(this.endAsNumber),[n,r]=this.orientation===a.t.horizontal?[`right`,`width`]:[`bottom`,`height`],i=`transition: ${this._draggingThumb?`none`:`all 0.2s ease`};`;this._startThumbCss=`${n}: ${e}%; ${i}`,this._endThumbCss=`${n}: ${t}%; ${i}`,this._selectedRangeCss=`${n}: ${t}%; ${r}: ${e-t}%; ${i}`}#l(e){return(1-f.r(this.min,this.max,e))*100}#u(e){let t=this._trackEl.getBoundingClientRect(),[n,r,i]=this.orientation===a.t.horizontal?[this._trackEl.clientLeft,this._trackEl.clientWidth,e.pageX-document.documentElement.scrollLeft-this.getBoundingClientRect().left]:[t.top,t.bottom,e.pageY-document.documentElement.scrollTop];return f.i(this.min,this.max,f.r(n,r,i))}#d(e,t){return c.n(this.#a[e].min,this.#a[e].max,f.o(t-this.min,this.step)+this.min)}#f=!1;#p(e){this.#f=!0,e.focus(),this.#f=!1}_isThumbPopupOpen(e){return this._visiblyFocusedThumb===e||this._hoveredThumb===e||this._draggingThumb===e}connectedCallback(){super.connectedCallback(),this.#t({start:this.start||this.initialStart||this.min.toString(),end:this.end||this.initialEnd||this.max.toString()},!1),this.#m(),this.#c()}disconnectedCallback(){super.disconnectedCallback(),this.#h(),this.#C()}#m(){for(let e of[`start`,`end`])this.#i[e].addEventListener(`keydown`,this.#x),this.#i[e].addEventListener(`mousedown`,this.#b,{passive:!0}),this.#i[e].addEventListener(`touchstart`,this.#b,{passive:!0}),this.#i[e].addEventListener(`mouseover`,this.#v,{passive:!0}),this.#i[e].addEventListener(`mouseout`,this.#y,{passive:!0}),this.#i[e].addEventListener(`focus`,this.#g),this.#i[e].addEventListener(`blur`,this.#_)}#h(){for(let e of[`start`,`end`])this.#i[e].removeEventListener(`keydown`,this.#x),this.#i[e].removeEventListener(`mousedown`,this.#b),this.#i[e].removeEventListener(`touchstart`,this.#b),this.#i[e].removeEventListener(`mouseover`,this.#v),this.#i[e].removeEventListener(`mouseout`,this.#y),this.#i[e].removeEventListener(`focus`,this.#g),this.#i[e].removeEventListener(`blur`,this.#_)}_onMouseDown(e){if(this.disabled||this._draggingThumb)return;let t=this.#u(e),n=Math.abs(t-Number(this.start)),r=Math.abs(t-Number(this.end)),i=n<r||n===r&&t<Number(this.start)?`start`:`end`;this.#t({[i]:`${this.#d(i,t)}`}),this._draggingThumb=i,this.#p(this.#i[i]),this.#S()}#g=e=>{this.#f||(this._visiblyFocusedThumb=this.#s(e))};#_=()=>{this._visiblyFocusedThumb=null};#v=e=>{this._hoveredThumb=this.#s(e)};#y=()=>{this._hoveredThumb=null};#b=e=>{if(this.disabled||e.defaultPrevented)return;let t=e.target;t===this._endThumbEl&&this.startAsNumber===this.max&&this.endAsNumber===this.max&&(t=this._startThumbEl),this.#p(t),this._draggingThumb=this.#o(t),this.#S()};#x=e=>{let t=this.#s(e);if(this._visiblyFocusedThumb=t,e.key===`Home`)e.preventDefault(),this.#t({[t]:`${this.#a[t].min}`});else if(e.key===`End`)e.preventDefault(),this.#t({[t]:`${this.#a[t].max}`});else{if(e.shiftKey)return;switch(e.key){case s.r:case s.t:e.preventDefault(),this.#n(t,m.Increment);break;case s.n:case s.i:e.preventDefault(),this.#n(t,m.Decrement);break}}};#S(){window.addEventListener(`mousemove`,this.#w,{passive:!0}),window.addEventListener(`touchmove`,this.#w,{passive:!0}),window.addEventListener(`mouseup`,this.#T),window.addEventListener(`touchend`,this.#T),window.document.addEventListener(`mouseleave`,this.#T)}#C(){window.removeEventListener(`mouseup`,this.#T),window.document.removeEventListener(`mouseleave`,this.#T),window.removeEventListener(`mousemove`,this.#w),window.removeEventListener(`touchmove`,this.#w),window.removeEventListener(`touchend`,this.#T)}#w=e=>{if(this.disabled||e.defaultPrevented||!this._draggingThumb)return;let t=`TouchEvent`in window&&e instanceof TouchEvent?e.touches[0]:e,n=this.#u(t);this.#t({[this._draggingThumb]:`${this.#d(this._draggingThumb,n)}`})};#T=()=>{this._draggingThumb=!1,this.#C()}};i.t([t.T],h.prototype,`start`,void 0),i.t([t.l({mode:`fromView`,attribute:`start`})],h.prototype,`initialStart`,void 0),i.t([t.l({attribute:`current-start`})],h.prototype,`currentStart`,void 0),i.t([t.T],h.prototype,`end`,void 0),i.t([t.l({mode:`fromView`,attribute:`end`})],h.prototype,`initialEnd`,void 0),i.t([t.l({attribute:`current-end`})],h.prototype,`currentEnd`,void 0),i.t([t.l({converter:t.u})],h.prototype,`min`,void 0),i.t([t.l({converter:t.u})],h.prototype,`max`,void 0),i.t([t.l({converter:f.a})],h.prototype,`step`,void 0),i.t([t.l],h.prototype,`orientation`,void 0),i.t([t.l({attribute:`aria-start-label`})],h.prototype,`ariaStartLabel`,void 0),i.t([t.l({attribute:`aria-end-label`})],h.prototype,`ariaEndLabel`,void 0),i.t([t.l({mode:`boolean`})],h.prototype,`markers`,void 0),i.t([t.l],h.prototype,`connotation`,void 0),i.t([t.l({mode:`boolean`})],h.prototype,`pin`,void 0),i.t([t.T],h.prototype,`valueTextFormatter`,void 0),i.t([t.T],h.prototype,`_draggingThumb`,void 0),i.t([t.T],h.prototype,`_visiblyFocusedThumb`,void 0),i.t([t.T],h.prototype,`_hoveredThumb`,void 0),i.t([t.T],h.prototype,`_startThumbCss`,void 0),i.t([t.T],h.prototype,`_endThumbCss`,void 0),i.t([t.T],h.prototype,`_selectedRangeCss`,void 0);var g=({disabled:e,connotation:t})=>o.t(`control`,[`disabled`,!!e],[`connotation-${t}`,!!t]),_=e=>({_visiblyFocusedThumb:t})=>o.t(`thumb-container`,[`focus-visible`,t===e]),v=t.o(`range-slider`,h,e=>{let i=e.tagFor(d.i);return t.d` <template
|
|
1
|
+
const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/when.cjs`);require(`../bundled/definition2.cjs`);const i=require(`../bundled/decorate.cjs`),a=require(`../bundled/form-element.cjs`),o=require(`../bundled/aria.cjs`),s=require(`../bundled/class-names.cjs`),c=require(`../bundled/key-codes.cjs`),l=require(`../bundled/numbers.cjs`),u=require(`../bundled/form-associated.cjs`),d=require(`../bundled/definition8.cjs`),f=require(`../bundled/slider.template.cjs`);var p=`:host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary:var(--vvd-slider-cta-primary,var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-slider-accent-primary,var(--vvd-color-canvas-text))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent;--_thumb-size:12px;--_thumb-interaction-indicator-size:36px;--_track-start-inset-inline-start:0;--_track-start-inset-block-start:0;cursor:pointer;user-select:none;outline:none}.control .positioning-region{position:relative}.control .track{background:var(--_track-background-color);border-radius:4px;position:absolute}.control .track-start{border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;position:absolute;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));min-inline-size:var(--_thumb-size);margin-inline-start:calc(var(--_thumb-size) / 2)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:2px;left:0;right:0}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start:1px;border-top-left-radius:0;border-bottom-left-radius:0}.control.horizontal .track .mark{block-size:6px;inline-size:100%;position:absolute;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:6px;position:absolute;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start:1px;border-radius:0}.control.disabled{--_track-background-color:var(--vvd-color-neutral-100);--_track-start-background-color:var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color:var(--vvd-color-neutral-300);--_track-start-background-color:var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);touch-action:none;border-radius:50%;outline:none;position:absolute}.thumb-container.focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--_thumb-interaction-indicator-alpha:.05;border-radius:50%}.control.horizontal .thumb-container{transform:translateX(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media (hover:hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha:.12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha:.25}.thumb-container:before{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:"";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha,0);transition:opacity .2s ease-out;display:block;position:absolute}.thumb-container:after{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:"";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2);display:block;position:absolute}.popup{pointer-events:none}.tooltip{width:auto;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);padding:8px 12px}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s}:host([internal-part]) .control.horizontal .track{block-size:4px;top:16px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control,:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start:auto;--_track-start-inset-block-start:auto}`,m={Increment:1,Decrement:-1},h=class extends e.t(a.t(u.n(t.t))){constructor(...e){super(...e),this.start=``,this.end=``,this.min=0,this.max=10,this.step=1,this.orientation=o.t.horizontal,this.ariaStartLabel=null,this.ariaEndLabel=null,this.markers=!1,this.pin=!1,this.valueTextFormatter=e=>parseFloat(e).toLocaleString(this.locale.lang),this.proxy=document.createElement(`input`),this._trackEl=null,this._startThumbEl=null,this._endThumbEl=null,this._draggingThumb=!1,this._visiblyFocusedThumb=null,this._hoveredThumb=null,this._startThumbCss=``,this._endThumbCss=``,this._selectedRangeCss=``}#e=!1;startChanged(){this.currentStart=this.start,this.#e||(this.dirtyValue=!0,this.#r()),this.$fastController.isConnected&&this.#c()}initialStartChanged(e,t){t&&!this.dirtyValue&&(this.start=t,this.dirtyValue=!1)}currentStartChanged(){this.start=this.currentStart}get startAsNumber(){return parseFloat(this.start)}set startAsNumber(e){this.start=e.toString()}endChanged(){this.currentEnd=this.end,this.#e||(this.dirtyValue=!0,this.#r()),this.$fastController.isConnected&&this.#c()}initialEndChanged(e,t){t&&!this.dirtyValue&&(this.end=t,this.dirtyValue=!1)}currentEndChanged(){this.end=this.currentEnd}get endAsNumber(){return parseFloat(this.end)}set endAsNumber(e){this.end=e.toString()}#t({start:e,end:t},n=!0){e===this.start&&(e=void 0),t===this.end&&(t=void 0),!(e===void 0&&t===void 0)&&(this.#e=!0,e!==void 0&&(this.start=e),t!==void 0&&(this.end=t),this.#e=!1,n&&(e!==void 0&&this.$emit(`input:start`),t!==void 0&&this.$emit(`input:end`),this.$emit(`input`),this.$emit(`change`),this.dirtyValue=!0),this.#r())}#n(e,t){this.#t({[e]:this.#d(e,Number(this[e])+t*this.step).toString()})}orientationChanged(){this.$fastController.isConnected&&this.#c()}nameChanged(e,t){super.nameChanged(e,t),this.#r()}#r(){if(!this.name)this.setFormValue(null);else{let e=new FormData;e.append(this.name,this.start),e.append(this.name,this.end),this.setFormValue(e)}}formResetCallback(){this.#t({start:this.initialStart??this.min.toString(),end:this.initialEnd??this.max.toString()}),super.formResetCallback()}get#i(){return{start:this._startThumbEl,end:this._endThumbEl}}get#a(){return{start:{min:this.min,max:this.endAsNumber},end:{min:this.startAsNumber,max:this.max}}}#o(e){return e===this._startThumbEl?`start`:`end`}#s(e){return this.#o(e.target)}#c(){let e=this.#l(this.startAsNumber),t=this.#l(this.endAsNumber),[n,r]=this.orientation===o.t.horizontal?[`right`,`width`]:[`bottom`,`height`],i=`transition: ${this._draggingThumb?`none`:`all 0.2s ease`};`;this._startThumbCss=`${n}: ${e}%; ${i}`,this._endThumbCss=`${n}: ${t}%; ${i}`,this._selectedRangeCss=`${n}: ${t}%; ${r}: ${e-t}%; ${i}`}#l(e){return(1-f.r(this.min,this.max,e))*100}#u(e){let t=this._trackEl.getBoundingClientRect(),[n,r,i]=this.orientation===o.t.horizontal?[this._trackEl.clientLeft,this._trackEl.clientWidth,e.pageX-document.documentElement.scrollLeft-this.getBoundingClientRect().left]:[t.top,t.bottom,e.pageY-document.documentElement.scrollTop];return f.i(this.min,this.max,f.r(n,r,i))}#d(e,t){return l.n(this.#a[e].min,this.#a[e].max,f.o(t-this.min,this.step)+this.min)}#f=!1;#p(e){this.#f=!0,e.focus(),this.#f=!1}_isThumbPopupOpen(e){return this._visiblyFocusedThumb===e||this._hoveredThumb===e||this._draggingThumb===e}connectedCallback(){super.connectedCallback(),this.#t({start:this.start||this.initialStart||this.min.toString(),end:this.end||this.initialEnd||this.max.toString()},!1),this.#m(),this.#c()}disconnectedCallback(){super.disconnectedCallback(),this.#h(),this.#C()}#m(){for(let e of[`start`,`end`])this.#i[e].addEventListener(`keydown`,this.#x),this.#i[e].addEventListener(`mousedown`,this.#b,{passive:!0}),this.#i[e].addEventListener(`touchstart`,this.#b,{passive:!0}),this.#i[e].addEventListener(`mouseover`,this.#v,{passive:!0}),this.#i[e].addEventListener(`mouseout`,this.#y,{passive:!0}),this.#i[e].addEventListener(`focus`,this.#g),this.#i[e].addEventListener(`blur`,this.#_)}#h(){for(let e of[`start`,`end`])this.#i[e].removeEventListener(`keydown`,this.#x),this.#i[e].removeEventListener(`mousedown`,this.#b),this.#i[e].removeEventListener(`touchstart`,this.#b),this.#i[e].removeEventListener(`mouseover`,this.#v),this.#i[e].removeEventListener(`mouseout`,this.#y),this.#i[e].removeEventListener(`focus`,this.#g),this.#i[e].removeEventListener(`blur`,this.#_)}_onMouseDown(e){if(this.disabled||this._draggingThumb)return;let t=this.#u(e),n=Math.abs(t-Number(this.start)),r=Math.abs(t-Number(this.end)),i=n<r||n===r&&t<Number(this.start)?`start`:`end`;this.#t({[i]:`${this.#d(i,t)}`}),this._draggingThumb=i,this.#p(this.#i[i]),this.#S()}#g=e=>{this.#f||(this._visiblyFocusedThumb=this.#s(e))};#_=()=>{this._visiblyFocusedThumb=null};#v=e=>{this._hoveredThumb=this.#s(e)};#y=()=>{this._hoveredThumb=null};#b=e=>{if(this.disabled||e.defaultPrevented)return;let t=e.target;t===this._endThumbEl&&this.startAsNumber===this.max&&this.endAsNumber===this.max&&(t=this._startThumbEl),this.#p(t),this._draggingThumb=this.#o(t),this.#S()};#x=e=>{let t=this.#s(e);if(this._visiblyFocusedThumb=t,e.key===`Home`)e.preventDefault(),this.#t({[t]:`${this.#a[t].min}`});else if(e.key===`End`)e.preventDefault(),this.#t({[t]:`${this.#a[t].max}`});else{if(e.shiftKey)return;switch(e.key){case c.r:case c.t:e.preventDefault(),this.#n(t,m.Increment);break;case c.n:case c.i:e.preventDefault(),this.#n(t,m.Decrement);break}}};#S(){window.addEventListener(`mousemove`,this.#w,{passive:!0}),window.addEventListener(`touchmove`,this.#w,{passive:!0}),window.addEventListener(`mouseup`,this.#T),window.addEventListener(`touchend`,this.#T),window.document.addEventListener(`mouseleave`,this.#T)}#C(){window.removeEventListener(`mouseup`,this.#T),window.document.removeEventListener(`mouseleave`,this.#T),window.removeEventListener(`mousemove`,this.#w),window.removeEventListener(`touchmove`,this.#w),window.removeEventListener(`touchend`,this.#T)}#w=e=>{if(this.disabled||e.defaultPrevented||!this._draggingThumb)return;let t=`TouchEvent`in window&&e instanceof TouchEvent?e.touches[0]:e,n=this.#u(t);this.#t({[this._draggingThumb]:`${this.#d(this._draggingThumb,n)}`})};#T=()=>{this._draggingThumb=!1,this.#C()}};i.t([t.T],h.prototype,`start`,void 0),i.t([t.l({mode:`fromView`,attribute:`start`})],h.prototype,`initialStart`,void 0),i.t([t.l({attribute:`current-start`})],h.prototype,`currentStart`,void 0),i.t([t.T],h.prototype,`end`,void 0),i.t([t.l({mode:`fromView`,attribute:`end`})],h.prototype,`initialEnd`,void 0),i.t([t.l({attribute:`current-end`})],h.prototype,`currentEnd`,void 0),i.t([t.l({converter:t.u})],h.prototype,`min`,void 0),i.t([t.l({converter:t.u})],h.prototype,`max`,void 0),i.t([t.l({converter:f.a})],h.prototype,`step`,void 0),i.t([t.l],h.prototype,`orientation`,void 0),i.t([t.l({attribute:`aria-start-label`})],h.prototype,`ariaStartLabel`,void 0),i.t([t.l({attribute:`aria-end-label`})],h.prototype,`ariaEndLabel`,void 0),i.t([t.l({mode:`boolean`})],h.prototype,`markers`,void 0),i.t([t.l],h.prototype,`connotation`,void 0),i.t([t.l({mode:`boolean`})],h.prototype,`pin`,void 0),i.t([t.T],h.prototype,`valueTextFormatter`,void 0),i.t([t.T],h.prototype,`_draggingThumb`,void 0),i.t([t.T],h.prototype,`_visiblyFocusedThumb`,void 0),i.t([t.T],h.prototype,`_hoveredThumb`,void 0),i.t([t.T],h.prototype,`_startThumbCss`,void 0),i.t([t.T],h.prototype,`_endThumbCss`,void 0),i.t([t.T],h.prototype,`_selectedRangeCss`,void 0);var g=({disabled:e,connotation:t})=>s.t(`control`,[`disabled`,!!e],[`connotation-${t}`,!!t]),_=e=>({_visiblyFocusedThumb:t})=>s.t(`thumb-container`,[`focus-visible`,t===e]),v=t.o(`range-slider`,h,e=>{let i=e.tagFor(d.i);return t.d` <template
|
|
2
2
|
@mousedown="${(e,t)=>e._onMouseDown(t.event)}"
|
|
3
3
|
>
|
|
4
4
|
<div class="${g} ${e=>e.orientation}">
|
|
5
5
|
<div class="positioning-region">
|
|
6
6
|
<div ${n.t(`_trackEl`)} class="track">
|
|
7
7
|
<div class="track-start" style="${e=>e._selectedRangeCss}"></div>
|
|
8
|
-
${r.t(e=>e.markers,t.d`${e=>f.n(e.orientation===
|
|
8
|
+
${r.t(e=>e.markers,t.d`${e=>f.n(e.orientation===o.t.horizontal,Math.floor((e.max-e.min)/e.step))}`)}
|
|
9
9
|
</div>
|
|
10
10
|
<div
|
|
11
11
|
id="start-thumb"
|
|
@@ -28,7 +28,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
|
|
|
28
28
|
alternate
|
|
29
29
|
:anchor="${e=>e._startThumbEl}"
|
|
30
30
|
:open=${e=>e._isThumbPopupOpen(`start`)}
|
|
31
|
-
:placementStrategy=${e=>e.orientation===
|
|
31
|
+
:placementStrategy=${e=>e.orientation===o.t.horizontal?d.r.AutoPlacementHorizontal:d.r.AutoPlacementVertical}
|
|
32
32
|
animation-frame
|
|
33
33
|
exportparts="vvd-theme-alternate"
|
|
34
34
|
aria-hidden="true"
|
|
@@ -56,7 +56,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
|
|
|
56
56
|
alternate
|
|
57
57
|
:anchor="${e=>e._endThumbEl}"
|
|
58
58
|
:open=${e=>e._isThumbPopupOpen(`end`)}
|
|
59
|
-
:placementStrategy=${e=>e.orientation===
|
|
59
|
+
:placementStrategy=${e=>e.orientation===o.t.horizontal?d.r.AutoPlacementHorizontal:d.r.AutoPlacementVertical}
|
|
60
60
|
animation-frame
|
|
61
61
|
exportparts="vvd-theme-alternate"
|
|
62
62
|
aria-hidden="true"
|
package/range-slider/index.js
CHANGED
|
@@ -4,21 +4,21 @@ import { t as c } from "../bundled/ref.js";
|
|
|
4
4
|
import { t as l } from "../bundled/when.js";
|
|
5
5
|
import "../bundled/definition2.js";
|
|
6
6
|
import { t as u } from "../bundled/decorate.js";
|
|
7
|
-
import { t as d } from "../bundled/
|
|
8
|
-
import { t as f } from "../bundled/
|
|
9
|
-
import {
|
|
10
|
-
import { n as _ } from "../bundled/
|
|
11
|
-
import { n as v } from "../bundled/
|
|
12
|
-
import {
|
|
7
|
+
import { t as d } from "../bundled/form-element.js";
|
|
8
|
+
import { t as f } from "../bundled/aria.js";
|
|
9
|
+
import { t as p } from "../bundled/class-names.js";
|
|
10
|
+
import { i as m, n as h, r as g, t as _ } from "../bundled/key-codes.js";
|
|
11
|
+
import { n as v } from "../bundled/numbers.js";
|
|
12
|
+
import { n as y } from "../bundled/form-associated.js";
|
|
13
13
|
import { i as b, r as x, t as S } from "../bundled/definition8.js";
|
|
14
14
|
import { a as C, i as w, n as T, o as E, r as D } from "../bundled/slider.template.js";
|
|
15
15
|
//#region src/lib/range-slider/range-slider.scss?inline
|
|
16
16
|
var O = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary:var(--vvd-slider-cta-primary,var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-slider-accent-primary,var(--vvd-color-canvas-text))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent;--_thumb-size:12px;--_thumb-interaction-indicator-size:36px;--_track-start-inset-inline-start:0;--_track-start-inset-block-start:0;cursor:pointer;user-select:none;outline:none}.control .positioning-region{position:relative}.control .track{background:var(--_track-background-color);border-radius:4px;position:absolute}.control .track-start{border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;position:absolute;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));min-inline-size:var(--_thumb-size);margin-inline-start:calc(var(--_thumb-size) / 2)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:2px;left:0;right:0}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start:1px;border-top-left-radius:0;border-bottom-left-radius:0}.control.horizontal .track .mark{block-size:6px;inline-size:100%;position:absolute;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:6px;position:absolute;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start:1px;border-radius:0}.control.disabled{--_track-background-color:var(--vvd-color-neutral-100);--_track-start-background-color:var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color:var(--vvd-color-neutral-300);--_track-start-background-color:var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);touch-action:none;border-radius:50%;outline:none;position:absolute}.thumb-container.focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--_thumb-interaction-indicator-alpha:.05;border-radius:50%}.control.horizontal .thumb-container{transform:translateX(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media (hover:hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha:.12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha:.25}.thumb-container:before{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha,0);transition:opacity .2s ease-out;display:block;position:absolute}.thumb-container:after{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2);display:block;position:absolute}.popup{pointer-events:none}.tooltip{width:auto;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);padding:8px 12px}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s}:host([internal-part]) .control.horizontal .track{block-size:4px;top:16px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control,:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start:auto;--_track-start-inset-block-start:auto}", k = {
|
|
17
17
|
Increment: 1,
|
|
18
18
|
Decrement: -1
|
|
19
|
-
}, A = class extends e(y(
|
|
19
|
+
}, A = class extends e(d(y(o))) {
|
|
20
20
|
constructor(...e) {
|
|
21
|
-
super(...e), this.start = "", this.end = "", this.min = 0, this.max = 10, this.step = 1, this.orientation =
|
|
21
|
+
super(...e), this.start = "", this.end = "", this.min = 0, this.max = 10, this.step = 1, this.orientation = f.horizontal, this.ariaStartLabel = null, this.ariaEndLabel = null, this.markers = !1, this.pin = !1, this.valueTextFormatter = (e) => parseFloat(e).toLocaleString(this.locale.lang), this.proxy = document.createElement("input"), this._trackEl = null, this._startThumbEl = null, this._endThumbEl = null, this._draggingThumb = !1, this._visiblyFocusedThumb = null, this._hoveredThumb = null, this._startThumbCss = "", this._endThumbCss = "", this._selectedRangeCss = "";
|
|
22
22
|
}
|
|
23
23
|
#e = !1;
|
|
24
24
|
startChanged() {
|
|
@@ -101,14 +101,14 @@ var O = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-s
|
|
|
101
101
|
return this.#o(e.target);
|
|
102
102
|
}
|
|
103
103
|
#c() {
|
|
104
|
-
let e = this.#l(this.startAsNumber), t = this.#l(this.endAsNumber), [n, r] = this.orientation ===
|
|
104
|
+
let e = this.#l(this.startAsNumber), t = this.#l(this.endAsNumber), [n, r] = this.orientation === f.horizontal ? ["right", "width"] : ["bottom", "height"], i = `transition: ${this._draggingThumb ? "none" : "all 0.2s ease"};`;
|
|
105
105
|
this._startThumbCss = `${n}: ${e}%; ${i}`, this._endThumbCss = `${n}: ${t}%; ${i}`, this._selectedRangeCss = `${n}: ${t}%; ${r}: ${e - t}%; ${i}`;
|
|
106
106
|
}
|
|
107
107
|
#l(e) {
|
|
108
108
|
return (1 - D(this.min, this.max, e)) * 100;
|
|
109
109
|
}
|
|
110
110
|
#u(e) {
|
|
111
|
-
let t = this._trackEl.getBoundingClientRect(), [n, r, i] = this.orientation ===
|
|
111
|
+
let t = this._trackEl.getBoundingClientRect(), [n, r, i] = this.orientation === f.horizontal ? [
|
|
112
112
|
this._trackEl.clientLeft,
|
|
113
113
|
this._trackEl.clientWidth,
|
|
114
114
|
e.pageX - document.documentElement.scrollLeft - this.getBoundingClientRect().left
|
|
@@ -120,7 +120,7 @@ var O = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-s
|
|
|
120
120
|
return w(this.min, this.max, D(n, r, i));
|
|
121
121
|
}
|
|
122
122
|
#d(e, t) {
|
|
123
|
-
return
|
|
123
|
+
return v(this.#a[e].min, this.#a[e].max, E(t - this.min, this.step) + this.min);
|
|
124
124
|
}
|
|
125
125
|
#f = !1;
|
|
126
126
|
#p(e) {
|
|
@@ -173,12 +173,12 @@ var O = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-s
|
|
|
173
173
|
else {
|
|
174
174
|
if (e.shiftKey) return;
|
|
175
175
|
switch (e.key) {
|
|
176
|
-
case h:
|
|
177
176
|
case g:
|
|
177
|
+
case _:
|
|
178
178
|
e.preventDefault(), this.#n(t, k.Increment);
|
|
179
179
|
break;
|
|
180
|
+
case h:
|
|
180
181
|
case m:
|
|
181
|
-
case p:
|
|
182
182
|
e.preventDefault(), this.#n(t, k.Decrement);
|
|
183
183
|
break;
|
|
184
184
|
}
|
|
@@ -208,7 +208,7 @@ u([t], A.prototype, "start", void 0), u([r({
|
|
|
208
208
|
})], A.prototype, "initialEnd", void 0), u([r({ attribute: "current-end" })], A.prototype, "currentEnd", void 0), u([r({ converter: s })], A.prototype, "min", void 0), u([r({ converter: s })], A.prototype, "max", void 0), u([r({ converter: C })], A.prototype, "step", void 0), u([r], A.prototype, "orientation", void 0), u([r({ attribute: "aria-start-label" })], A.prototype, "ariaStartLabel", void 0), u([r({ attribute: "aria-end-label" })], A.prototype, "ariaEndLabel", void 0), u([r({ mode: "boolean" })], A.prototype, "markers", void 0), u([r], A.prototype, "connotation", void 0), u([r({ mode: "boolean" })], A.prototype, "pin", void 0), u([t], A.prototype, "valueTextFormatter", void 0), u([t], A.prototype, "_draggingThumb", void 0), u([t], A.prototype, "_visiblyFocusedThumb", void 0), u([t], A.prototype, "_hoveredThumb", void 0), u([t], A.prototype, "_startThumbCss", void 0), u([t], A.prototype, "_endThumbCss", void 0), u([t], A.prototype, "_selectedRangeCss", void 0);
|
|
209
209
|
//#endregion
|
|
210
210
|
//#region src/lib/range-slider/range-slider.template.ts
|
|
211
|
-
var j = ({ disabled: e, connotation: t }) =>
|
|
211
|
+
var j = ({ disabled: e, connotation: t }) => p("control", ["disabled", !!e], [`connotation-${t}`, !!t]), M = (e) => ({ _visiblyFocusedThumb: t }) => p("thumb-container", ["focus-visible", t === e]);
|
|
212
212
|
//#endregion
|
|
213
213
|
//#region src/lib/range-slider/index.ts
|
|
214
214
|
a(i("range-slider", A, (e) => {
|
|
@@ -220,7 +220,7 @@ a(i("range-slider", A, (e) => {
|
|
|
220
220
|
<div class="positioning-region">
|
|
221
221
|
<div ${c("_trackEl")} class="track">
|
|
222
222
|
<div class="track-start" style="${(e) => e._selectedRangeCss}"></div>
|
|
223
|
-
${l((e) => e.markers, n`${(e) => T(e.orientation ===
|
|
223
|
+
${l((e) => e.markers, n`${(e) => T(e.orientation === f.horizontal, Math.floor((e.max - e.min) / e.step))}`)}
|
|
224
224
|
</div>
|
|
225
225
|
<div
|
|
226
226
|
id="start-thumb"
|
|
@@ -243,7 +243,7 @@ a(i("range-slider", A, (e) => {
|
|
|
243
243
|
alternate
|
|
244
244
|
:anchor="${(e) => e._startThumbEl}"
|
|
245
245
|
:open=${(e) => e._isThumbPopupOpen("start")}
|
|
246
|
-
:placementStrategy=${(e) => e.orientation ===
|
|
246
|
+
:placementStrategy=${(e) => e.orientation === f.horizontal ? x.AutoPlacementHorizontal : x.AutoPlacementVertical}
|
|
247
247
|
animation-frame
|
|
248
248
|
exportparts="vvd-theme-alternate"
|
|
249
249
|
aria-hidden="true"
|
|
@@ -271,7 +271,7 @@ a(i("range-slider", A, (e) => {
|
|
|
271
271
|
alternate
|
|
272
272
|
:anchor="${(e) => e._endThumbEl}"
|
|
273
273
|
:open=${(e) => e._isThumbPopupOpen("end")}
|
|
274
|
-
:placementStrategy=${(e) => e.orientation ===
|
|
274
|
+
:placementStrategy=${(e) => e.orientation === f.horizontal ? x.AutoPlacementHorizontal : x.AutoPlacementVertical}
|
|
275
275
|
animation-frame
|
|
276
276
|
exportparts="vvd-theme-alternate"
|
|
277
277
|
aria-hidden="true"
|
|
@@ -5,6 +5,7 @@ exports.RteAlignmentFeature = require_definition$1.RteAlignmentFeature;
|
|
|
5
5
|
exports.RteAtomFeature = require_definition$1.RteAtomFeature;
|
|
6
6
|
exports.RteBase = require_definition$1.RteBase;
|
|
7
7
|
exports.RteBoldFeature = require_definition$1.RteBoldFeature;
|
|
8
|
+
exports.RteCharacterCountFeature = require_definition$1.RteCharacterCountFeature;
|
|
8
9
|
exports.RteConfig = require_definition$1.RteConfig;
|
|
9
10
|
exports.RteDropHandlerFeature = require_definition$1.RteDropHandlerFeature;
|
|
10
11
|
exports.RteFileHandlerFeature = require_definition$1.RteFileHandlerFeature;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import "../unbundled/definition2.js";
|
|
2
|
-
import { C as
|
|
3
|
-
export { RteAlignmentFeature, RteAtomFeature, RteBase, RteBoldFeature, RteConfig, RteDropHandlerFeature, RteFileHandlerFeature, RteFontSizePickerFeature, RteHardBreakFeature, RteHtmlParser, RteHtmlSerializer, RteInlineImageFeature, RteInputRuleFeature, RteItalicFeature, RteKeyboardShortcutsFeature, RteLinkFeature, RteListFeature, RteMonospaceFeature, RtePlaceholderFeature, RteStrikethroughFeature, RteSuggestFeature, RteTextBlockPickerFeature, RteTextColorPickerFeature, RteToolbarButtonFeature, RteToolbarFeature, RteUnderlineFeature, RichTextEditor as VwcRichTextEditorElement, registerRichTextEditor, richTextEditorDefinition };
|
|
2
|
+
import { A as RichTextEditor, C as RtePlaceholderFeature, D as RteConfig, E as RteBase, O as RteHtmlSerializer, S as RteHardBreakFeature, T as RteTextBlockPickerFeature, _ as RteStrikethroughFeature, a as RteKeyboardShortcutsFeature, b as RteBoldFeature, c as RteToolbarButtonFeature, d as RteInlineImageFeature, f as RteLinkFeature, g as RteMonospaceFeature, h as RteTextColorPickerFeature, i as RteSuggestFeature, k as RteHtmlParser, l as RteDropHandlerFeature, m as RteListFeature, n as richTextEditorDefinition, o as RteInputRuleFeature, p as RteAlignmentFeature, r as RteCharacterCountFeature, s as RteAtomFeature, t as registerRichTextEditor, u as RteFileHandlerFeature, v as RteUnderlineFeature, w as RteToolbarFeature, x as RteFontSizePickerFeature, y as RteItalicFeature } from "../unbundled/definition56.js";
|
|
3
|
+
export { RteAlignmentFeature, RteAtomFeature, RteBase, RteBoldFeature, RteCharacterCountFeature, RteConfig, RteDropHandlerFeature, RteFileHandlerFeature, RteFontSizePickerFeature, RteHardBreakFeature, RteHtmlParser, RteHtmlSerializer, RteInlineImageFeature, RteInputRuleFeature, RteItalicFeature, RteKeyboardShortcutsFeature, RteLinkFeature, RteListFeature, RteMonospaceFeature, RtePlaceholderFeature, RteStrikethroughFeature, RteSuggestFeature, RteTextBlockPickerFeature, RteTextColorPickerFeature, RteToolbarButtonFeature, RteToolbarFeature, RteUnderlineFeature, RichTextEditor as VwcRichTextEditorElement, registerRichTextEditor, richTextEditorDefinition };
|