@vonage/vivid 5.21.0 → 5.23.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 +2 -2
- package/alert/index.cjs +1 -1
- package/alert/index.js +1 -1
- package/audio-player/index.cjs +3 -5
- package/audio-player/index.js +30 -32
- package/avatar/index.cjs +1 -1
- package/avatar/index.js +1 -1
- package/banner/index.cjs +1 -1
- package/banner/index.js +1 -1
- package/bundled/affix.cjs +4 -4
- package/bundled/affix.js +4 -4
- package/bundled/base-color-picker.cjs +2 -2
- package/bundled/base-color-picker.js +2 -2
- package/bundled/button.cjs +1 -1
- package/bundled/button.js +1 -1
- package/bundled/definition10.cjs +1 -1
- package/bundled/definition10.js +1 -1
- package/bundled/definition13.cjs +1 -1
- package/bundled/definition13.js +1 -1
- package/bundled/definition15.cjs +1 -1
- package/bundled/definition15.js +2 -2
- package/bundled/definition16.cjs +2 -2
- package/bundled/definition16.js +2 -2
- package/bundled/definition17.cjs +1 -1
- package/bundled/definition17.js +1 -1
- package/bundled/definition18.cjs +2 -2
- package/bundled/definition18.js +14 -5
- package/bundled/definition19.cjs +1 -1
- package/bundled/definition19.js +1 -1
- package/bundled/definition20.cjs +1 -1
- package/bundled/definition20.js +1 -1
- package/bundled/definition21.cjs +1 -1
- package/bundled/definition21.js +2 -2
- package/bundled/definition24.cjs +1 -1
- package/bundled/definition24.js +1 -1
- package/bundled/definition3.cjs +1 -1
- package/bundled/definition3.js +3 -3
- package/bundled/definition4.cjs +1 -1
- package/bundled/definition4.js +1 -1
- package/bundled/definition5.cjs +1 -1
- package/bundled/definition5.js +1 -1
- package/bundled/definition6.cjs +1 -1
- package/bundled/definition6.js +2 -1
- package/bundled/definition8.cjs +1 -1
- package/bundled/definition8.js +12 -6
- package/bundled/definition9.cjs +1 -1
- package/bundled/definition9.js +1 -1
- package/bundled/form-associated.cjs +1 -1
- package/bundled/form-associated.js +2 -2
- package/bundled/listbox.cjs +1 -1
- package/bundled/listbox.js +5 -5
- package/bundled/numberConverter.cjs +1 -1
- package/bundled/numberConverter.js +2 -2
- package/bundled/slider.template.cjs +1 -1
- package/bundled/slider.template.js +1 -1
- package/bundled/vivid-element.cjs +1 -1
- package/bundled/vivid-element.js +1 -1
- package/bundled/with-contextual-help.cjs +1 -1
- package/bundled/with-contextual-help.js +1 -1
- package/calendar/index.cjs +1 -1
- package/calendar/index.js +3 -3
- package/color-picker/index.cjs +20 -20
- package/color-picker/index.js +22 -22
- package/combobox/index.cjs +1 -1
- package/combobox/index.js +6 -6
- package/country-group/index.cjs +1 -1
- package/country-group/index.js +1 -1
- package/custom-elements.json +1270 -1228
- package/data-grid/index.cjs +2 -2
- package/data-grid/index.js +12 -10
- package/dial-pad/index.cjs +1 -1
- package/dial-pad/index.js +2 -2
- package/dialog/index.cjs +1 -1
- package/dialog/index.js +1 -1
- package/fab/index.cjs +1 -1
- package/fab/index.js +1 -0
- package/header/index.cjs +1 -1
- package/header/index.js +1 -1
- package/lib/audio-player/audio-player.d.ts +0 -1
- package/lib/calendar/helpers/calendar.keyboard-interactions.d.ts +1 -1
- package/lib/checkbox/checkbox.d.ts +16 -16
- package/lib/color-picker/color-picker.d.ts +16 -16
- package/lib/combobox/combobox.d.ts +21 -21
- package/lib/date-picker/date-picker.d.ts +26 -26
- package/lib/date-range-picker/date-range-picker.d.ts +14 -14
- package/lib/date-time-picker/date-time-picker.d.ts +24 -24
- package/lib/dial-pad/dial-pad.d.ts +1 -1
- package/lib/file-picker/file-picker.d.ts +21 -21
- package/lib/menu/menu.d.ts +1 -1
- package/lib/number-field/number-field.d.ts +22 -22
- package/lib/popup/popup.d.ts +2 -1
- package/lib/radio/radio.d.ts +16 -16
- package/lib/range-slider/range-slider.d.ts +10 -10
- package/lib/rich-text-editor/popover.d.ts +1 -1
- package/lib/rich-text-editor/rte/exports.d.ts +1 -0
- package/lib/rich-text-editor/rte/feature.d.ts +5 -5
- package/lib/rich-text-editor/rte/features/drop-handler.d.ts +1 -2
- package/lib/rich-text-editor/rte/features/internal/core.d.ts +8 -0
- 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/instance.d.ts +1 -0
- package/lib/rich-text-editor/rte/public-interface.d.ts +3 -0
- package/lib/rich-text-editor/rte/utils/ui.d.ts +1 -1
- package/lib/searchable-select/searchable-select.d.ts +21 -21
- package/lib/select/select.d.ts +22 -22
- package/lib/simple-color-picker/simple-color-picker.d.ts +5 -5
- package/lib/slider/slider.d.ts +5 -5
- package/lib/switch/switch.d.ts +5 -5
- package/lib/table/table-body.template.d.ts +1 -2
- package/lib/table/table-cell.template.d.ts +1 -2
- package/lib/table/table-head.template.d.ts +1 -2
- package/lib/table/table-row.template.d.ts +1 -2
- package/lib/table/table.template.d.ts +1 -2
- package/lib/text-area/text-area.d.ts +21 -21
- package/lib/text-field/text-field.d.ts +22 -22
- package/lib/time-picker/time-picker.d.ts +12 -12
- package/nav-disclosure/index.cjs +1 -1
- package/nav-disclosure/index.js +1 -1
- package/nav-item/index.cjs +1 -1
- package/nav-item/index.js +1 -1
- package/package.json +9 -7
- package/pagination/index.cjs +1 -1
- package/pagination/index.js +9 -2
- package/popover/index.cjs +1 -1
- package/popover/index.js +1 -1
- package/progress/index.cjs +1 -1
- package/progress/index.js +1 -1
- package/radio-group/index.cjs +1 -1
- package/radio-group/index.js +21 -19
- package/range-slider/index.cjs +1 -1
- package/range-slider/index.js +1 -1
- package/rich-text-editor/index.cjs +4 -3
- package/rich-text-editor/index.js +55 -27
- package/selectable-box/index.cjs +1 -1
- package/selectable-box/index.js +6 -1
- package/shared/color-picker/base-color-picker.d.ts +5 -5
- package/shared/feedback/mixins.d.ts +1 -1
- package/shared/foundation/button/button.d.ts +5 -5
- package/shared/foundation/form-associated/form-associated.d.ts +10 -10
- package/shared/foundation/listbox/listbox.d.ts +1 -1
- package/shared/patterns/form-elements/form-element.d.ts +5 -5
- package/shared/patterns/form-elements/with-contextual-help.d.ts +5 -5
- package/shared/patterns/form-elements/with-error-text.d.ts +6 -6
- package/shared/picker-field/mixins/calendar-picker.d.ts +6 -6
- package/shared/picker-field/mixins/calendar-picker.template.d.ts +6 -6
- package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +8 -8
- package/shared/picker-field/mixins/single-date-picker.d.ts +6 -6
- package/shared/picker-field/mixins/single-value-picker.d.ts +6 -6
- package/shared/picker-field/mixins/time-selection-picker.d.ts +6 -6
- package/shared/picker-field/mixins/time-selection-picker.template.d.ts +12 -12
- package/shared/picker-field/picker-field.d.ts +21 -21
- package/shared/utils/slottable-request.d.ts +1 -1
- package/split-button/index.cjs +1 -1
- package/split-button/index.js +2 -0
- package/switch/index.cjs +1 -1
- package/switch/index.js +1 -1
- package/table/index.cjs +5 -5
- package/table/index.js +5 -5
- package/tabs/index.cjs +1 -1
- package/tabs/index.js +2 -2
- package/tag/index.cjs +1 -1
- package/tag/index.js +1 -1
- package/tree-view/index.cjs +1 -1
- package/tree-view/index.js +0 -2
- package/unbundled/affix.cjs +4 -4
- package/unbundled/affix.js +4 -4
- package/unbundled/base-color-picker.cjs +3 -3
- package/unbundled/base-color-picker.js +3 -3
- package/unbundled/button.cjs +5 -5
- package/unbundled/button.js +5 -5
- package/unbundled/definition10.cjs +15 -4
- package/unbundled/definition10.js +15 -4
- package/unbundled/definition11.cjs +3 -3
- package/unbundled/definition11.js +3 -3
- package/unbundled/definition12.cjs +1 -1
- package/unbundled/definition12.js +1 -1
- package/unbundled/definition13.cjs +2 -2
- package/unbundled/definition13.js +2 -2
- package/unbundled/definition14.cjs +73 -76
- package/unbundled/definition14.js +73 -76
- package/unbundled/definition15.cjs +1 -1
- package/unbundled/definition15.js +1 -1
- package/unbundled/definition17.cjs +1 -1
- package/unbundled/definition17.js +1 -1
- package/unbundled/definition19.cjs +2 -1
- package/unbundled/definition19.js +2 -1
- package/unbundled/definition2.cjs +1 -1
- package/unbundled/definition2.js +1 -1
- package/unbundled/definition21.cjs +3 -3
- package/unbundled/definition21.js +3 -3
- package/unbundled/definition23.cjs +2 -2
- package/unbundled/definition23.js +2 -2
- package/unbundled/definition24.cjs +1 -1
- package/unbundled/definition24.js +1 -1
- package/unbundled/definition27.cjs +1 -1
- package/unbundled/definition27.js +1 -1
- package/unbundled/definition28.cjs +23 -23
- package/unbundled/definition28.js +23 -23
- package/unbundled/definition29.cjs +1 -1
- package/unbundled/definition29.js +1 -1
- package/unbundled/definition3.cjs +2 -2
- package/unbundled/definition3.js +2 -2
- package/unbundled/definition30.cjs +7 -7
- package/unbundled/definition30.js +7 -7
- package/unbundled/definition32.cjs +1 -1
- package/unbundled/definition32.js +1 -1
- package/unbundled/definition34.cjs +9 -8
- package/unbundled/definition34.js +9 -8
- package/unbundled/definition35.cjs +1 -1
- package/unbundled/definition35.js +1 -1
- package/unbundled/definition39.cjs +2 -2
- package/unbundled/definition39.js +2 -2
- package/unbundled/definition40.cjs +1 -1
- package/unbundled/definition40.js +1 -1
- package/unbundled/definition42.cjs +1 -0
- package/unbundled/definition42.js +1 -0
- package/unbundled/definition44.cjs +1 -1
- package/unbundled/definition44.js +1 -1
- package/unbundled/definition48.cjs +1 -1
- package/unbundled/definition48.js +1 -1
- package/unbundled/definition49.cjs +1 -1
- package/unbundled/definition49.js +1 -1
- package/unbundled/definition5.cjs +1 -1
- package/unbundled/definition5.js +1 -1
- package/unbundled/definition53.cjs +10 -3
- package/unbundled/definition53.js +10 -3
- package/unbundled/definition55.cjs +1 -1
- package/unbundled/definition55.js +1 -1
- package/unbundled/definition56.cjs +1 -1
- package/unbundled/definition56.js +1 -1
- package/unbundled/definition57.cjs +4 -5
- package/unbundled/definition57.js +4 -5
- package/unbundled/definition58.cjs +20 -19
- package/unbundled/definition58.js +20 -19
- package/unbundled/definition59.cjs +1 -1
- package/unbundled/definition59.js +1 -1
- package/unbundled/definition60.cjs +47 -9
- package/unbundled/definition60.js +47 -9
- package/unbundled/definition61.cjs +12 -6
- package/unbundled/definition61.js +12 -6
- package/unbundled/definition64.cjs +4 -1
- package/unbundled/definition64.js +4 -1
- package/unbundled/definition65.cjs +2 -1
- package/unbundled/definition65.js +2 -1
- package/unbundled/definition67.cjs +2 -0
- package/unbundled/definition67.js +2 -0
- package/unbundled/definition69.cjs +3 -2
- package/unbundled/definition69.js +3 -2
- package/unbundled/definition7.cjs +2 -1
- package/unbundled/definition7.js +2 -1
- package/unbundled/definition71.cjs +1 -1
- package/unbundled/definition71.js +1 -1
- package/unbundled/definition72.cjs +5 -5
- package/unbundled/definition72.js +5 -5
- package/unbundled/definition73.cjs +2 -2
- package/unbundled/definition73.js +2 -2
- package/unbundled/definition75.cjs +1 -1
- package/unbundled/definition75.js +1 -1
- package/unbundled/definition78.cjs +1 -1
- package/unbundled/definition78.js +1 -1
- package/unbundled/definition79.cjs +0 -2
- package/unbundled/definition79.js +0 -2
- package/unbundled/definition80.cjs +1 -1
- package/unbundled/definition80.js +1 -1
- package/unbundled/definition9.cjs +1 -1
- package/unbundled/definition9.js +1 -1
- package/unbundled/form-associated.cjs +2 -2
- package/unbundled/form-associated.js +2 -2
- package/unbundled/listbox.cjs +7 -7
- package/unbundled/listbox.js +7 -7
- package/unbundled/numberConverter.cjs +2 -2
- package/unbundled/numberConverter.js +2 -2
- package/unbundled/slider.template.cjs +1 -1
- package/unbundled/slider.template.js +1 -1
- package/unbundled/slottable-request.cjs +5 -5
- package/unbundled/slottable-request.js +5 -5
- package/unbundled/vivid-element.cjs +1 -1
- package/unbundled/vivid-element.js +1 -1
- package/unbundled/with-contextual-help.cjs +4 -1
- package/unbundled/with-contextual-help.js +4 -1
- package/video-player/index.cjs +1 -1
- package/video-player/index.js +1 -1
- package/vivid.api.json +60 -18
package/radio-group/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cjs`),n=require(`../bundled/when.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/aria.cjs`),a=require(`../bundled/key-codes.cjs`),o=require(`../bundled/delegates-aria.cjs`),s=require(`../bundled/mixins.cjs`),c=require(`../bundled/definition16.cjs`);var l=`.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}`,u=class extends s.t(e.t){constructor(...e){super(...e),this.errorValidationMessage=``,this.orientation=i.t.horizontal,this.slottedRadioButtons=[],this.radioErrorHandler=e=>{let t=e.target;this.errorValidationMessage=t.errorValidationMessage||``},this.radioChangeHandler=e=>{let t=e.target;t.checked&&(this.slottedRadioButtons
|
|
1
|
+
const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cjs`),n=require(`../bundled/when.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/aria.cjs`),a=require(`../bundled/key-codes.cjs`),o=require(`../bundled/delegates-aria.cjs`),s=require(`../bundled/mixins.cjs`),c=require(`../bundled/definition16.cjs`);var l=`.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}`,u=class extends s.t(e.t){constructor(...e){super(...e),this.errorValidationMessage=``,this.orientation=i.t.horizontal,this.slottedRadioButtons=[],this.radioErrorHandler=e=>{let t=e.target;this.errorValidationMessage=t.errorValidationMessage||``},this.radioChangeHandler=e=>{let t=e.target;t.checked&&(this.slottedRadioButtons.forEach(e=>{e!==t&&(e.checked=!1)}),this.value=t.value,this.#t(t)),e.stopPropagation()},this.moveToRadioByIndex=(e,t)=>{let n=e[t];!this.isInsideToolbar&&!n.readOnly&&(n.checked=!0),n.focus()},this.moveRightOffGroup=()=>{let e=this.nextElementSibling;e instanceof HTMLElement&&e.focus()},this.moveLeftOffGroup=()=>{let e=this.previousElementSibling;e instanceof HTMLElement&&e.focus()},this.moveRight=e=>{let t=e.target,n=this.#e,r=n.indexOf(t)+1;if(r===n.length&&this.isInsideToolbar&&e.key===`ArrowRight`){this.moveRightOffGroup();return}r===n.length&&(r=0),this.moveToRadioByIndex(n,r)},this.moveLeft=e=>{let t=e.target,n=this.#e,r=n.indexOf(t)-1;if(this.isInsideToolbar&&e.key===`ArrowLeft`&&r<0){this.moveLeftOffGroup();return}r=r<0?n.length-1:r,this.moveToRadioByIndex(n,r)},this.keydownHandler=e=>{switch(e.key){case a.a:this.checkFocusedRadio(e.target);return;case a.r:case a.t:this.moveRight(e);return;case a.n:case a.i:this.moveLeft(e);return;default:return!0}}}requiredChanged(){this.slottedRadioButtons.forEach(e=>{this.required?e.required=!0:e.required=!1})}readOnlyChanged(){this.slottedRadioButtons.forEach(e=>{this.readOnly?e.readOnly=!0:e.readOnly=!1})}disabledChanged(){this.slottedRadioButtons.forEach(e=>{this.disabled?e.disabled=!0:e.disabled=!1})}nameChanged(){this.slottedRadioButtons.forEach(e=>{e.setAttribute(`name`,this.name)})}valueChanged(){this.slottedRadioButtons.forEach(e=>{e.value===this.value&&(e.checked=!0)}),this.$emit(`change`)}handleSlotChange(){this.errorText&&this.slottedRadioButtons.forEach(e=>{e.errorText=this.errorText})}errorTextChanged(e,t){t?this.errorValidationMessage=t:this.errorValidationMessage=``}get#e(){return this.slottedRadioButtons.filter(e=>!e.disabled)}slottedRadioButtonsChanged(){this.slottedRadioButtons.length>0&&this.setupRadioButtons()}get isInsideToolbar(){return!!this.closest(`[role="toolbar"]`)}connectedCallback(){super.connectedCallback(),this.setupRadioButtons()}disconnectedCallback(){this.slottedRadioButtons.forEach(e=>{e.removeEventListener(`change`,this.radioChangeHandler),e.removeEventListener(`invalid`,this.radioErrorHandler)})}setupRadioButtons(){let e=!1;for(let t of this.slottedRadioButtons)this.name!==void 0&&t.setAttribute(`name`,this.name),this.disabled&&(t.disabled=!0),this.readOnly&&(t.readOnly=!0),this.required&&(t.required=!0),this.value&&this.value===t.value?(t.checked=!0,this.#t(t),e=!0):t.checked=!1,t.addEventListener(`change`,this.radioChangeHandler),t.addEventListener(`invalid`,this.radioErrorHandler);if(this.value===void 0&&this.slottedRadioButtons.length>0){let t=this.slottedRadioButtons.filter(e=>e.hasAttribute(`checked`));if(t.length>0&&!e){let e=t[t.length-1];e.checked=!0,this.#t(e)}else this.#t(this.slottedRadioButtons[0])}}focusInHandler(e){this.#t(e.target)}#t(e){e.setAttribute(`tabindex`,`0`);for(let t of this.slottedRadioButtons)t!==e&&t.setAttribute(`tabindex`,`-1`)}checkFocusedRadio(e){e.readOnly||(e.checked=!0)}};r.t([e.m],u.prototype,`label`,void 0),r.t([e.m({attribute:`required`,mode:`boolean`})],u.prototype,`required`,void 0),r.t([e.m({attribute:`readonly`,mode:`boolean`})],u.prototype,`readOnly`,void 0),r.t([e.m({attribute:`disabled`,mode:`boolean`})],u.prototype,`disabled`,void 0),r.t([e.m],u.prototype,`name`,void 0),r.t([e.m],u.prototype,`value`,void 0),r.t([e.A],u.prototype,`errorValidationMessage`,void 0),r.t([e.m({attribute:`error-text`})],u.prototype,`errorText`,void 0),r.t([e.m],u.prototype,`orientation`,void 0),r.t([e.A],u.prototype,`slottedRadioButtons`,void 0);var d=e.u(`radio-group`,u,r=>{let a=r.tagFor(c.r,!0);return e.p`
|
|
2
2
|
<template
|
|
3
3
|
@keydown="${(e,t)=>e.keydownHandler(t.event)}"
|
|
4
4
|
@focusin="${(e,t)=>e.focusInHandler(t.event)}"
|
package/radio-group/index.js
CHANGED
|
@@ -15,19 +15,21 @@ var x = ".base{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:colu
|
|
|
15
15
|
this.errorValidationMessage = t.errorValidationMessage || "";
|
|
16
16
|
}, this.radioChangeHandler = (e) => {
|
|
17
17
|
let t = e.target;
|
|
18
|
-
t.checked && (this.slottedRadioButtons
|
|
18
|
+
t.checked && (this.slottedRadioButtons.forEach((e) => {
|
|
19
19
|
e !== t && (e.checked = !1);
|
|
20
20
|
}), this.value = t.value, this.#t(t)), e.stopPropagation();
|
|
21
21
|
}, this.moveToRadioByIndex = (e, t) => {
|
|
22
22
|
let n = e[t];
|
|
23
23
|
!this.isInsideToolbar && !n.readOnly && (n.checked = !0), n.focus();
|
|
24
24
|
}, this.moveRightOffGroup = () => {
|
|
25
|
-
this.nextElementSibling
|
|
25
|
+
let e = this.nextElementSibling;
|
|
26
|
+
e instanceof HTMLElement && e.focus();
|
|
26
27
|
}, this.moveLeftOffGroup = () => {
|
|
27
|
-
this.previousElementSibling
|
|
28
|
+
let e = this.previousElementSibling;
|
|
29
|
+
e instanceof HTMLElement && e.focus();
|
|
28
30
|
}, this.moveRight = (e) => {
|
|
29
|
-
let t = e.target, n = this.#e, r =
|
|
30
|
-
if (r
|
|
31
|
+
let t = e.target, n = this.#e, r = n.indexOf(t) + 1;
|
|
32
|
+
if (r === n.length && this.isInsideToolbar && e.key === "ArrowRight") {
|
|
31
33
|
this.moveRightOffGroup();
|
|
32
34
|
return;
|
|
33
35
|
}
|
|
@@ -43,46 +45,46 @@ var x = ".base{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:colu
|
|
|
43
45
|
switch (e.key) {
|
|
44
46
|
case d:
|
|
45
47
|
this.checkFocusedRadio(e.target);
|
|
46
|
-
|
|
48
|
+
return;
|
|
47
49
|
case m:
|
|
48
50
|
case h:
|
|
49
51
|
this.moveRight(e);
|
|
50
|
-
|
|
52
|
+
return;
|
|
51
53
|
case p:
|
|
52
54
|
case f:
|
|
53
55
|
this.moveLeft(e);
|
|
54
|
-
|
|
56
|
+
return;
|
|
55
57
|
default: return !0;
|
|
56
58
|
}
|
|
57
59
|
};
|
|
58
60
|
}
|
|
59
61
|
requiredChanged() {
|
|
60
|
-
this.slottedRadioButtons
|
|
62
|
+
this.slottedRadioButtons.forEach((e) => {
|
|
61
63
|
this.required ? e.required = !0 : e.required = !1;
|
|
62
64
|
});
|
|
63
65
|
}
|
|
64
66
|
readOnlyChanged() {
|
|
65
|
-
this.slottedRadioButtons
|
|
67
|
+
this.slottedRadioButtons.forEach((e) => {
|
|
66
68
|
this.readOnly ? e.readOnly = !0 : e.readOnly = !1;
|
|
67
69
|
});
|
|
68
70
|
}
|
|
69
71
|
disabledChanged() {
|
|
70
|
-
this.slottedRadioButtons
|
|
72
|
+
this.slottedRadioButtons.forEach((e) => {
|
|
71
73
|
this.disabled ? e.disabled = !0 : e.disabled = !1;
|
|
72
74
|
});
|
|
73
75
|
}
|
|
74
76
|
nameChanged() {
|
|
75
|
-
this.slottedRadioButtons
|
|
77
|
+
this.slottedRadioButtons.forEach((e) => {
|
|
76
78
|
e.setAttribute("name", this.name);
|
|
77
79
|
});
|
|
78
80
|
}
|
|
79
81
|
valueChanged() {
|
|
80
|
-
this.slottedRadioButtons
|
|
82
|
+
this.slottedRadioButtons.forEach((e) => {
|
|
81
83
|
e.value === this.value && (e.checked = !0);
|
|
82
84
|
}), this.$emit("change");
|
|
83
85
|
}
|
|
84
86
|
handleSlotChange() {
|
|
85
|
-
this.errorText && this.slottedRadioButtons
|
|
87
|
+
this.errorText && this.slottedRadioButtons.forEach((e) => {
|
|
86
88
|
e.errorText = this.errorText;
|
|
87
89
|
});
|
|
88
90
|
}
|
|
@@ -90,10 +92,10 @@ var x = ".base{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:colu
|
|
|
90
92
|
t ? this.errorValidationMessage = t : this.errorValidationMessage = "";
|
|
91
93
|
}
|
|
92
94
|
get #e() {
|
|
93
|
-
return this.slottedRadioButtons
|
|
95
|
+
return this.slottedRadioButtons.filter((e) => !e.disabled);
|
|
94
96
|
}
|
|
95
97
|
slottedRadioButtonsChanged() {
|
|
96
|
-
this.slottedRadioButtons
|
|
98
|
+
this.slottedRadioButtons.length > 0 && this.setupRadioButtons();
|
|
97
99
|
}
|
|
98
100
|
get isInsideToolbar() {
|
|
99
101
|
return !!this.closest("[role=\"toolbar\"]");
|
|
@@ -102,15 +104,15 @@ var x = ".base{--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:colu
|
|
|
102
104
|
super.connectedCallback(), this.setupRadioButtons();
|
|
103
105
|
}
|
|
104
106
|
disconnectedCallback() {
|
|
105
|
-
this.slottedRadioButtons
|
|
107
|
+
this.slottedRadioButtons.forEach((e) => {
|
|
106
108
|
e.removeEventListener("change", this.radioChangeHandler), e.removeEventListener("invalid", this.radioErrorHandler);
|
|
107
109
|
});
|
|
108
110
|
}
|
|
109
111
|
setupRadioButtons() {
|
|
110
112
|
let e = !1;
|
|
111
113
|
for (let t of this.slottedRadioButtons) this.name !== void 0 && t.setAttribute("name", this.name), this.disabled && (t.disabled = !0), this.readOnly && (t.readOnly = !0), this.required && (t.required = !0), this.value && this.value === t.value ? (t.checked = !0, this.#t(t), e = !0) : t.checked = !1, t.addEventListener("change", this.radioChangeHandler), t.addEventListener("invalid", this.radioErrorHandler);
|
|
112
|
-
if (this.value === void 0 && this.slottedRadioButtons
|
|
113
|
-
let t = this.slottedRadioButtons
|
|
114
|
+
if (this.value === void 0 && this.slottedRadioButtons.length > 0) {
|
|
115
|
+
let t = this.slottedRadioButtons.filter((e) => e.hasAttribute("checked"));
|
|
114
116
|
if (t.length > 0 && !e) {
|
|
115
117
|
let e = t[t.length - 1];
|
|
116
118
|
e.checked = !0, this.#t(e);
|
package/range-slider/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/when.cjs`),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.#e=!1,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=``,this.#f=!1,this.#g=e=>{this.#f||(this._visiblyFocusedThumb=this.#s(e)),this.#f=!1},this.#_=()=>{this._visiblyFocusedThumb=null},this.#v=()=>{document.hidden&&(this.shadowRoot.activeElement===this._startThumbEl||this.shadowRoot.activeElement===this._endThumbEl)&&(this.#f=!0)},this.#y=e=>{this._hoveredThumb=this.#s(e)},this.#b=()=>{this._hoveredThumb=null},this.#x=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.#C()},this.#S=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}}},this.#T=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)}`})},this.#E=()=>{this._draggingThumb=!1,this.#w()}}#e;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;#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(),document.addEventListener(`visibilitychange`,this.#v)}disconnectedCallback(){super.disconnectedCallback(),this.#h(),this.#w(),document.removeEventListener(`visibilitychange`,this.#v)}#m(){for(let e of[`start`,`end`])this.#i[e].addEventListener(`keydown`,this.#S),this.#i[e].addEventListener(`mousedown`,this.#x,{passive:!0}),this.#i[e].addEventListener(`touchstart`,this.#x,{passive:!0}),this.#i[e].addEventListener(`mouseover`,this.#y,{passive:!0}),this.#i[e].addEventListener(`mouseout`,this.#b,{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.#S),this.#i[e].removeEventListener(`mousedown`,this.#x),this.#i[e].removeEventListener(`touchstart`,this.#x),this.#i[e].removeEventListener(`mouseover`,this.#y),this.#i[e].removeEventListener(`mouseout`,this.#b),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.#C()}#g;#_;#v;#y;#b;#x;#S;#C(){window.addEventListener(`mousemove`,this.#T,{passive:!0}),window.addEventListener(`touchmove`,this.#T,{passive:!0}),window.addEventListener(`mouseup`,this.#E),window.addEventListener(`touchend`,this.#E),window.document.addEventListener(`mouseleave`,this.#E)}#w(){window.removeEventListener(`mouseup`,this.#E),window.document.removeEventListener(`mouseleave`,this.#E),window.removeEventListener(`mousemove`,this.#T),window.removeEventListener(`touchmove`,this.#T),window.removeEventListener(`touchend`,this.#E)}#T;#E};i.t([t.A],h.prototype,`start`,void 0),i.t([t.m({mode:`fromView`,attribute:`start`})],h.prototype,`initialStart`,void 0),i.t([t.m({attribute:`current-start`})],h.prototype,`currentStart`,void 0),i.t([t.A],h.prototype,`end`,void 0),i.t([t.m({mode:`fromView`,attribute:`end`})],h.prototype,`initialEnd`,void 0),i.t([t.m({attribute:`current-end`})],h.prototype,`currentEnd`,void 0),i.t([t.m({converter:t.h})],h.prototype,`min`,void 0),i.t([t.m({converter:t.h})],h.prototype,`max`,void 0),i.t([t.m({converter:f.a})],h.prototype,`step`,void 0),i.t([t.m],h.prototype,`orientation`,void 0),i.t([t.m({attribute:`aria-start-label`})],h.prototype,`ariaStartLabel`,void 0),i.t([t.m({attribute:`aria-end-label`})],h.prototype,`ariaEndLabel`,void 0),i.t([t.m({mode:`boolean`})],h.prototype,`markers`,void 0),i.t([t.m],h.prototype,`connotation`,void 0),i.t([t.m({mode:`boolean`})],h.prototype,`pin`,void 0),i.t([t.A],h.prototype,`valueTextFormatter`,void 0),i.t([t.A],h.prototype,`_draggingThumb`,void 0),i.t([t.A],h.prototype,`_visiblyFocusedThumb`,void 0),i.t([t.A],h.prototype,`_hoveredThumb`,void 0),i.t([t.A],h.prototype,`_startThumbCss`,void 0),i.t([t.A],h.prototype,`_endThumbCss`,void 0),i.t([t.A],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.u(`range-slider`,h,e=>{let i=e.tagFor(d.i);return t.p` <template
|
|
1
|
+
const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/when.cjs`),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.#e=!1,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=``,this.#f=!1,this.#g=e=>{this.#f||(this._visiblyFocusedThumb=this.#s(e)),this.#f=!1},this.#_=()=>{this._visiblyFocusedThumb=null},this.#v=()=>{document.hidden&&(this.shadowRoot.activeElement===this._startThumbEl||this.shadowRoot.activeElement===this._endThumbEl)&&(this.#f=!0)},this.#y=e=>{this._hoveredThumb=this.#s(e)},this.#b=()=>{this._hoveredThumb=null},this.#x=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.#C()},this.#S=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}}},this.#T=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)}`})},this.#E=()=>{this._draggingThumb=!1,this.#w()}}#e;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;#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(),document.addEventListener(`visibilitychange`,this.#v)}disconnectedCallback(){super.disconnectedCallback(),this.#h(),this.#w(),document.removeEventListener(`visibilitychange`,this.#v)}#m(){for(let e of[`start`,`end`])this.#i[e].addEventListener(`keydown`,this.#S),this.#i[e].addEventListener(`mousedown`,this.#x,{passive:!0}),this.#i[e].addEventListener(`touchstart`,this.#x,{passive:!0}),this.#i[e].addEventListener(`mouseover`,this.#y,{passive:!0}),this.#i[e].addEventListener(`mouseout`,this.#b,{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.#S),this.#i[e].removeEventListener(`mousedown`,this.#x),this.#i[e].removeEventListener(`touchstart`,this.#x),this.#i[e].removeEventListener(`mouseover`,this.#y),this.#i[e].removeEventListener(`mouseout`,this.#b),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.#C()}#g;#_;#v;#y;#b;#x;#S;#C(){window.addEventListener(`mousemove`,this.#T,{passive:!0}),window.addEventListener(`touchmove`,this.#T,{passive:!0}),window.addEventListener(`mouseup`,this.#E),window.addEventListener(`touchend`,this.#E),window.document.addEventListener(`mouseleave`,this.#E)}#w(){window.removeEventListener(`mouseup`,this.#E),window.document.removeEventListener(`mouseleave`,this.#E),window.removeEventListener(`mousemove`,this.#T),window.removeEventListener(`touchmove`,this.#T),window.removeEventListener(`touchend`,this.#E)}#T;#E};i.t([t.A],h.prototype,`start`,void 0),i.t([t.m({mode:`fromView`,attribute:`start`})],h.prototype,`initialStart`,void 0),i.t([t.m({attribute:`current-start`})],h.prototype,`currentStart`,void 0),i.t([t.A],h.prototype,`end`,void 0),i.t([t.m({mode:`fromView`,attribute:`end`})],h.prototype,`initialEnd`,void 0),i.t([t.m({attribute:`current-end`})],h.prototype,`currentEnd`,void 0),i.t([t.m({converter:t.h})],h.prototype,`min`,void 0),i.t([t.m({converter:t.h})],h.prototype,`max`,void 0),i.t([t.m({converter:f.a})],h.prototype,`step`,void 0),i.t([t.m],h.prototype,`orientation`,void 0),i.t([t.m({attribute:`aria-start-label`})],h.prototype,`ariaStartLabel`,void 0),i.t([t.m({attribute:`aria-end-label`})],h.prototype,`ariaEndLabel`,void 0),i.t([t.m({mode:`boolean`})],h.prototype,`markers`,void 0),i.t([t.m],h.prototype,`connotation`,void 0),i.t([t.m({mode:`boolean`})],h.prototype,`pin`,void 0),i.t([t.A],h.prototype,`valueTextFormatter`,void 0),i.t([t.A],h.prototype,`_draggingThumb`,void 0),i.t([t.A],h.prototype,`_visiblyFocusedThumb`,void 0),i.t([t.A],h.prototype,`_hoveredThumb`,void 0),i.t([t.A],h.prototype,`_startThumbCss`,void 0),i.t([t.A],h.prototype,`_endThumbCss`,void 0),i.t([t.A],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.u(`range-slider`,h,e=>{let i=e.tagFor(d.i);return t.p` <template
|
|
2
2
|
@mousedown="${(e,t)=>e._onMouseDown(t.event)}"
|
|
3
3
|
>
|
|
4
4
|
<div class="${g} ${e=>e.orientation}">
|
package/range-slider/index.js
CHANGED
|
@@ -210,7 +210,7 @@ u([t], A.prototype, "start", void 0), u([i({
|
|
|
210
210
|
})], A.prototype, "initialEnd", void 0), u([i({ attribute: "current-end" })], A.prototype, "currentEnd", void 0), u([i({ converter: r })], A.prototype, "min", void 0), u([i({ converter: r })], A.prototype, "max", void 0), u([i({ converter: C })], A.prototype, "step", void 0), u([i], A.prototype, "orientation", void 0), u([i({ attribute: "aria-start-label" })], A.prototype, "ariaStartLabel", void 0), u([i({ attribute: "aria-end-label" })], A.prototype, "ariaEndLabel", void 0), u([i({ mode: "boolean" })], A.prototype, "markers", void 0), u([i], A.prototype, "connotation", void 0), u([i({ 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);
|
|
211
211
|
//#endregion
|
|
212
212
|
//#region src/lib/range-slider/range-slider.template.ts
|
|
213
|
-
var j = ({ disabled: e, connotation: t }) => p("control", ["disabled",
|
|
213
|
+
var j = ({ disabled: e, connotation: t }) => p("control", ["disabled", e], [`connotation-${t}`, !!t]), M = (e) => ({ _visiblyFocusedThumb: t }) => p("thumb-container", ["focus-visible", t === e]);
|
|
214
214
|
//#endregion
|
|
215
215
|
//#region src/lib/range-slider/index.ts
|
|
216
216
|
n(s("range-slider", A, (e) => {
|