@spectrum-web-components/slider 0.13.1-devmode2.0 → 0.14.1
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/package.json +7 -7
- package/sp-slider-handle.dev.js +1 -0
- package/sp-slider-handle.dev.js.map +1 -1
- package/sp-slider-handle.js +1 -2
- package/sp-slider-handle.js.map +2 -2
- package/sp-slider.dev.js +1 -0
- package/sp-slider.dev.js.map +1 -1
- package/sp-slider.js +1 -3
- package/sp-slider.js.map +2 -2
- package/src/HandleController.dev.js +71 -17
- package/src/HandleController.dev.js.map +1 -1
- package/src/HandleController.js +16 -421
- package/src/HandleController.js.map +2 -2
- package/src/Slider.dev.js +16 -5
- package/src/Slider.dev.js.map +1 -1
- package/src/Slider.js +23 -306
- package/src/Slider.js.map +2 -2
- package/src/SliderHandle.dev.js +22 -12
- package/src/SliderHandle.dev.js.map +2 -2
- package/src/SliderHandle.js +1 -183
- package/src/SliderHandle.js.map +2 -2
- package/src/index.dev.js +1 -0
- package/src/index.dev.js.map +1 -1
- package/src/index.js +1 -3
- package/src/index.js.map +1 -1
- package/src/slider.css.dev.js +1 -0
- package/src/slider.css.dev.js.map +1 -1
- package/src/slider.css.js +2 -4
- package/src/slider.css.js.map +2 -2
- package/src/spectrum-slider.css.dev.js +1 -0
- package/src/spectrum-slider.css.dev.js.map +1 -1
- package/src/spectrum-slider.css.js +2 -4
- package/src/spectrum-slider.css.js.map +2 -2
- package/stories/slider.stories.js +8 -2
- package/stories/slider.stories.js.map +2 -2
- package/sync/sp-slider.dev.js +1 -0
- package/sync/sp-slider.dev.js.map +1 -1
- package/sync/sp-slider.js +1 -2
- package/sync/sp-slider.js.map +1 -1
- package/test/benchmark/test-basic.js +1 -0
- package/test/benchmark/test-basic.js.map +1 -1
- package/test/slider-editable-sync.test.js +47 -34
- package/test/slider-editable-sync.test.js.map +1 -1
- package/test/slider-editable.test.js +47 -34
- package/test/slider-editable.test.js.map +1 -1
- package/test/slider-handle-upgrade.test.js +1 -0
- package/test/slider-handle-upgrade.test.js.map +1 -1
- package/test/slider.test-vrt.js +1 -0
- package/test/slider.test-vrt.js.map +1 -1
- package/test/slider.test.js +374 -226
- package/test/slider.test.js.map +2 -2
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-slider.css.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-slider-tick-mark-width:var(\n--spectrum-slider-m-tick-mark-width,var(--spectrum-alias-border-size-thick)\n);--spectrum-slider-tick-mark-height:var(\n--spectrum-slider-m-tick-mark-height,var(--spectrum-global-dimension-size-125)\n);--spectrum-slider-tick-mark-border-radius:var(\n--spectrum-slider-m-tick-mark-border-radius,var(--spectrum-alias-border-radius-xsmall)\n);--spectrum-slider-track-border-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-slider-track-height:var(\n--spectrum-slider-m-track-height,var(--spectrum-alias-border-size-thick)\n);--spectrum-slider-handle-width:var(\n--spectrum-slider-m-handle-width,var(--spectrum-alias-control-two-size-l)\n);--spectrum-slider-handle-height:var(\n--spectrum-slider-m-handle-height,var(--spectrum-alias-control-two-size-l)\n);--spectrum-slider-handle-gap:var(\n--spectrum-slider-m-handle-gap,var(--spectrum-alias-border-size-thicker)\n);--spectrum-slider-handle-border-size:var(\n--spectrum-slider-m-handle-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-slider-handle-border-radius:var(\n--spectrum-slider-m-handle-border-radius,var(--spectrum-global-dimension-size-100)\n);--spectrum-slider-height:var(\n--spectrum-slider-m-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-slider-min-width:var(\n--spectrum-slider-m-min-width,var(--spectrum-global-dimension-size-1250)\n);--spectrum-slider-animation-duration:var(\n--spectrum-slider-m-animation-duration,var(--spectrum-global-animation-duration-100)\n);--spectrum-slider-ramp-track-color-disabled:var(\n--spectrum-slider-m-ramp-track-color-disabled,var(--spectrum-global-color-gray-300)\n);--spectrum-slider-ramp-track-height:var(\n--spectrum-slider-m-ramp-track-height,var(--spectrum-global-dimension-size-200)\n);--spectrum-slider-label-gap-y:var(--spectrum-global-dimension-size-85);--spectrum-slider-controls-margin:calc(var(--spectrum-slider-handle-width)/2);--spectrum-slider-track-margin-offset:calc(var(--spectrum-slider-controls-margin)*-1);--spectrum-slider-handle-margin-top:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-handle-margin-left:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-track-handleoffset:var(--spectrum-slider-handle-gap);--spectrum-slider-track-middle-handleoffset:calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-width)/2);--spectrum-slider-input-top:calc(var(--spectrum-slider-handle-margin-top)/4);--spectrum-slider-input-left:calc(var(--spectrum-slider-handle-margin-left)/4);--spectrum-slider-ramp-margin-top:0;--spectrum-slider-range-track-reset:0;--spectrum-slider-label-margin-bottom:-3px;--spectrum-slider-label-gap-x:var(\n--spectrum-alias-item-control-gap-m,var(--spectrum-global-dimension-size-125)\n);--spectrum-slider-label-text-line-height:var(\n--spectrum-global-font-line-height-small,1.3\n)}:host{display:block;min-height:var(--spectrum-slider-height);min-width:var(--spectrum-slider-min-width);position:relative;-webkit-user-select:none;user-select:none;z-index:1}:host([dir=ltr]) #controls{margin-left:var(\n--spectrum-slider-controls-margin\n)}:host([dir=rtl]) #controls{margin-right:var(\n--spectrum-slider-controls-margin\n)}#controls{box-sizing:border-box;display:inline-block;min-height:var(--spectrum-slider-height);position:relative;vertical-align:top;width:calc(100% - var(--spectrum-slider-controls-margin)*2);z-index:auto}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{left:0}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{right:0}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{right:auto}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{left:auto}#fill,.track{box-sizing:border-box;height:var(\n--spectrum-slider-track-height\n);margin-top:calc(var(--spectrum-slider-track-height)/-2);pointer-events:none;position:absolute;top:calc(var(--spectrum-slider-height)/2);z-index:1}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}#fill,.track{padding-bottom:0;padding-top:0}:host([dir=ltr]) #fill:before,:host([dir=ltr]) .track:before{border-top-left-radius:0}:host([dir=rtl]) #fill:before,:host([dir=rtl]) .track:before{border-top-right-radius:0}:host([dir=ltr]) #fill:before,:host([dir=ltr]) .track:before{border-bottom-left-radius:0}:host([dir=rtl]) #fill:before,:host([dir=rtl]) .track:before{border-bottom-right-radius:0}:host([dir=ltr]) #fill:before,:host([dir=ltr]) .track:before{border-top-right-radius:0}:host([dir=rtl]) #fill:before,:host([dir=rtl]) .track:before{border-top-left-radius:0}:host([dir=ltr]) #fill:before,:host([dir=ltr]) .track:before{border-bottom-right-radius:0}:host([dir=rtl]) #fill:before,:host([dir=rtl]) .track:before{border-bottom-left-radius:0}#fill:before,.track:before{content:\"\";display:block;height:100%}:host([dir=ltr]) .track:first-of-type:before{border-top-left-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=rtl]) .track:first-of-type:before{border-top-right-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=ltr]) .track:first-of-type:before{border-bottom-left-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=rtl]) .track:first-of-type:before{border-bottom-right-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=ltr]) .track:first-of-type:before{border-top-right-radius:0}:host([dir=rtl]) .track:first-of-type:before{border-top-left-radius:0}:host([dir=ltr]) .track:first-of-type:before{border-bottom-right-radius:0}:host([dir=rtl]) .track:first-of-type:before{border-bottom-left-radius:0}:host([dir=ltr]) .track:last-of-type:before{border-top-left-radius:0}:host([dir=rtl]) .track:last-of-type:before{border-top-right-radius:0}:host([dir=ltr]) .track:last-of-type:before{border-bottom-left-radius:0}:host([dir=rtl]) .track:last-of-type:before{border-bottom-right-radius:0}:host([dir=ltr]) .track:last-of-type:before{border-top-right-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=rtl]) .track:last-of-type:before{border-top-left-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=ltr]) .track:last-of-type:before{border-bottom-right-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=rtl]) .track:last-of-type:before{border-bottom-left-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=ltr]) .track~.track{left:auto}:host([dir=rtl]) .track~.track{right:auto}:host([dir=ltr]) .track~.track{right:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl]) .track~.track{left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr]) .track~.track{padding-left:var(\n--spectrum-slider-track-handleoffset\n);padding-right:0}:host([dir=rtl]) .track~.track{padding-left:0;padding-right:var(\n--spectrum-slider-track-handleoffset\n)}:host([dir=ltr]) .track~.track{margin-left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl]) .track~.track{margin-right:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr]) .track~.track{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) .track~.track{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}.track~.track{padding-bottom:0;padding-top:0}:host([dir=ltr]) #fill{margin-left:0}:host([dir=rtl]) #fill{margin-right:0}:host([dir=ltr]) #fill{padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-right:0}:host([dir=rtl]) #fill{padding-left:0;padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}#fill{padding-bottom:0;padding-top:0}:host([dir=ltr]) .spectrum-Slider-fill--right{padding-left:0;padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}:host([dir=rtl]) .spectrum-Slider-fill--right{padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-right:0}.spectrum-Slider-fill--right{padding-bottom:0;padding-top:0}:host([variant=range]) #value{-webkit-user-select:text;user-select:text}:host([dir=ltr][variant=range]) .track:before{border-top-left-radius:0}:host([dir=rtl][variant=range]) .track:before{border-top-right-radius:0}:host([dir=ltr][variant=range]) .track:before{border-bottom-left-radius:0}:host([dir=rtl][variant=range]) .track:before{border-bottom-right-radius:0}:host([dir=ltr][variant=range]) .track:before{border-top-right-radius:0}:host([dir=rtl][variant=range]) .track:before{border-top-left-radius:0}:host([dir=ltr][variant=range]) .track:before{border-bottom-right-radius:0}:host([dir=rtl][variant=range]) .track:before{border-bottom-left-radius:0}:host([dir=ltr][variant=range]) .track:first-of-type{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl][variant=range]) .track:first-of-type{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=ltr][variant=range]) .track:first-of-type{left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl][variant=range]) .track:first-of-type{right:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr][variant=range]) .track:first-of-type{right:auto}:host([dir=rtl][variant=range]) .track:first-of-type{left:auto}:host([dir=ltr][variant=range]) .track:first-of-type{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl][variant=range]) .track:first-of-type{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=ltr][variant=range]) .track:first-of-type:before{border-top-left-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=rtl][variant=range]) .track:first-of-type:before{border-top-right-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=ltr][variant=range]) .track:first-of-type:before{border-bottom-left-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=rtl][variant=range]) .track:first-of-type:before{border-bottom-right-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=ltr][variant=range]) .track:first-of-type:before{border-top-right-radius:0}:host([dir=rtl][variant=range]) .track:first-of-type:before{border-top-left-radius:0}:host([dir=ltr][variant=range]) .track:first-of-type:before{border-bottom-right-radius:0}:host([dir=rtl][variant=range]) .track:first-of-type:before{border-bottom-left-radius:0}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{right:auto}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track{right:auto}:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) .track,:host([dir=rtl][variant=range]) .track{margin-left:var(--spectrum-slider-range-track-reset);margin-right:var(--spectrum-slider-range-track-reset);padding-left:var(\n--spectrum-slider-track-middle-handleoffset\n);padding-right:var(--spectrum-slider-track-middle-handleoffset)}:host([dir=ltr][variant=range]) .track:last-of-type{padding-left:var(\n--spectrum-slider-track-handleoffset\n);padding-right:0}:host([dir=rtl][variant=range]) .track:last-of-type{padding-left:0;padding-right:var(\n--spectrum-slider-track-handleoffset\n)}:host([dir=ltr][variant=range]) .track:last-of-type{left:auto}:host([dir=rtl][variant=range]) .track:last-of-type{right:auto}:host([dir=ltr][variant=range]) .track:last-of-type{right:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl][variant=range]) .track:last-of-type{left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr][variant=range]) .track:last-of-type{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl][variant=range]) .track:last-of-type{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=ltr][variant=range]) .track:last-of-type:before{border-top-right-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=rtl][variant=range]) .track:last-of-type:before{border-top-left-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=ltr][variant=range]) .track:last-of-type:before{border-bottom-right-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=rtl][variant=range]) .track:last-of-type:before{border-bottom-left-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=ltr][variant=range]) .track:last-of-type:before{border-top-left-radius:0}:host([dir=rtl][variant=range]) .track:last-of-type:before{border-top-right-radius:0}:host([dir=ltr][variant=range]) .track:last-of-type:before{border-bottom-left-radius:0}:host([dir=rtl][variant=range]) .track:last-of-type:before{border-bottom-right-radius:0}:host([dir=ltr]) #ramp{left:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) #ramp{right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=ltr]) #ramp{right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) #ramp{left:var(\n--spectrum-slider-track-margin-offset\n)}#ramp{height:var(--spectrum-slider-ramp-track-height);margin-top:var(\n--spectrum-slider-ramp-margin-top\n);position:absolute;top:calc(var(--spectrum-slider-ramp-track-height)/2)}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{height:100%;width:100%}:host([dir=ltr]) .handle{left:0}:host([dir=rtl]) .handle{right:0}:host([dir=ltr]) .handle{margin-left:calc(var(--spectrum-slider-handle-width)/-2);margin-right:0}:host([dir=rtl]) .handle{margin-left:0;margin-right:calc(var(--spectrum-slider-handle-width)/-2)}.handle{border-radius:var(--spectrum-slider-handle-border-radius);border-style:solid;border-width:var(--spectrum-slider-handle-border-size);box-sizing:border-box;display:inline-block;height:var(--spectrum-slider-handle-height);margin-bottom:0;margin-top:var(--spectrum-slider-handle-margin-top);outline:none;position:absolute;top:calc(var(--spectrum-slider-height)/2);transition:border-width var(--spectrum-slider-animation-duration) ease-in-out;width:var(--spectrum-slider-handle-width);z-index:2}.handle.dragging,.handle.handle-highlight,.handle:active{border-width:var(\n--spectrum-slider-handle-border-size\n)}.handle.dragging,.handle.handle-highlight,.handle.is-tophandle,.handle:active{z-index:3}.handle:before{border-radius:100%;content:\" \";display:block;height:var(--spectrum-slider-handle-height);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,width var(--spectrum-global-animation-duration-100,.13s) ease-out,height var(--spectrum-global-animation-duration-100,.13s) ease-out;width:var(--spectrum-slider-handle-width)}.handle.handle-highlight:before{height:calc(var(--spectrum-slider-handle-height) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*2);width:calc(var(--spectrum-slider-handle-width) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*2)}:host([dir=ltr]) .input{left:var(\n--spectrum-slider-input-left\n)}:host([dir=rtl]) .input{right:var(\n--spectrum-slider-input-left\n)}.input{-webkit-appearance:none;border:0;cursor:default;height:var(--spectrum-slider-handle-height);margin:0;opacity:.000001;overflow:hidden;padding:0;pointer-events:none;position:absolute;top:var(--spectrum-slider-input-top);width:var(--spectrum-slider-handle-width)}.input:focus{outline:none}#label-container{display:flex;font-size:var(\n--spectrum-slider-label-text-size,var(--spectrum-global-dimension-font-size-75)\n);line-height:var(--spectrum-slider-label-text-line-height);margin-bottom:var(--spectrum-slider-label-margin-bottom);padding-top:var(\n--spectrum-fieldlabel-m-padding-top,var(--spectrum-global-dimension-size-50)\n);position:relative;width:auto}:host([dir=ltr]) #label{padding-left:0}:host([dir=rtl]) #label{padding-right:0}#label{flex-grow:1}:host([dir=ltr]) #value{padding-right:0}:host([dir=rtl]) #value{padding-left:0}:host([dir=ltr]) #value{text-align:right}:host([dir=rtl]) #value{text-align:left}#value{font-feature-settings:\"tnum\";cursor:default;flex-grow:0}:host([dir=ltr]) #value{margin-left:var(\n--spectrum-slider-label-gap-x\n)}:host([dir=rtl]) #value{margin-right:var(\n--spectrum-slider-label-gap-x\n)}.ticks{display:flex;justify-content:space-between;margin:0 var(--spectrum-slider-track-margin-offset);margin-top:calc(var(--spectrum-slider-tick-mark-height) + 1px);z-index:0}.tick{position:relative;width:var(--spectrum-slider-tick-mark-width)}:host([dir=ltr]) .tick:after{left:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}:host([dir=rtl]) .tick:after{right:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}.tick:after{border-radius:var(--spectrum-slider-tick-mark-border-radius);content:\"\";display:block;height:var(--spectrum-slider-tick-mark-height);position:absolute;top:0;width:var(--spectrum-slider-tick-mark-width)}.tick .tickLabel{align-items:center;display:flex;font-size:var(\n--spectrum-slider-label-text-size,var(--spectrum-global-dimension-font-size-75)\n);justify-content:center;line-height:var(--spectrum-slider-label-text-line-height);margin-bottom:0;margin-left:calc(var(--spectrum-slider-label-gap-x)*-1);margin-right:calc(var(--spectrum-slider-label-gap-x)*-1);margin-top:calc(var(--spectrum-slider-label-gap-y) + var(--spectrum-slider-tick-mark-height))}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;margin-left:0;margin-right:0;position:absolute}:host([dir=ltr]) .tick:first-of-type{left:calc(var(--spectrum-slider-tick-mark-width)/-2)}:host([dir=rtl]) .tick:first-of-type{right:calc(var(--spectrum-slider-tick-mark-width)/-2)}:host([dir=ltr]) .tick:first-of-type .tickLabel{left:0}:host([dir=rtl]) .tick:first-of-type .tickLabel{right:0}:host([dir=ltr]) .tick:last-of-type{right:calc(var(--spectrum-slider-tick-mark-width)/-2)}:host([dir=rtl]) .tick:last-of-type{left:calc(var(--spectrum-slider-tick-mark-width)/-2)}:host([dir=ltr]) .tick:last-of-type .tickLabel{right:0}:host([dir=rtl]) .tick:last-of-type .tickLabel{left:0}:host([disabled]){cursor:default}:host([disabled]) .handle{cursor:default;pointer-events:none}.spectrum-Slider-handleContainer,.spectrum-Slider-trackContainer{margin-left:calc(var(--spectrum-slider-handle-width)/2*-1);position:absolute;top:calc(var(--spectrum-slider-track-height)/2 - 1px);width:calc(100% + var(--spectrum-slider-handle-width))}.spectrum-Slider-trackContainer{height:var(--spectrum-slider-height);overflow:hidden}:host{--spectrum-slider-m-focus-ring-size:var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-slider-m-handle-border-color-key-focus:var(\n--spectrum-global-color-gray-800\n);--spectrum-slider-m-handle-focus-ring-color-key-focus:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);--spectrum-slider-m-label-text-color:var(\n--spectrum-alias-label-text-color,var(--spectrum-global-color-gray-700)\n);--spectrum-slider-m-label-text-color-disabled:var(\n--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}.track:before{background:var(\n--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400)\n)}#label-container{color:var(\n--spectrum-slider-m-label-text-color\n)}:host([variant=filled]) .track:first-child:before{background:var(\n--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)\n)}#fill:before{background:var(\n--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)\n)}#ramp path{fill:var(\n--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400)\n)}.handle{background:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-slider-m-handle-border-color,var(--spectrum-global-color-gray-700)\n)}.handle:hover{border-color:var(\n--spectrum-slider-m-handle-border-color-hover,var(--spectrum-global-color-gray-800)\n)}.handle.handle-highlight{border-color:var(\n--spectrum-slider-m-handle-border-color-key-focus,var(--spectrum-global-color-gray-800)\n)}.handle.handle-highlight:before{box-shadow:0 0 0 var(\n--spectrum-slider-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(--spectrum-slider-m-handle-focus-ring-color-key-focus)}.handle.dragging,.handle:active{border-color:var(\n--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800)\n)}:host([variant=ramp]) .handle{box-shadow:0 0 0 var(\n--spectrum-slider-m-handle-gap,var(--spectrum-alias-border-size-thicker)\n) var(\n--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100)\n)}.input{background:transparent}.tick:after{background-color:var(\n--spectrum-slider-m-tick-mark-color,var(--spectrum-global-color-gray-400)\n)}.handle.dragging{background:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800)\n)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)\n)}:host([disabled]) #label-container{color:var(\n--spectrum-slider-m-label-text-color-disabled\n)}:host([disabled]) .handle{background:var(\n--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100)\n);border-color:var(\n--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([disabled]) .handle:active,:host([disabled]) .handle:hover{background:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([disabled]) .track:before{background:var(\n--spectrum-slider-m-track-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled][variant=filled]) .track:first-child:before{background:var(\n--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) #fill:before{background:var(\n--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) #ramp path{fill:var(\n--spectrum-slider-ramp-track-color-disabled\n)}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}@media (forced-colors:active){:host{--spectrum-alias-background-color-default:ButtonFace;--spectrum-alias-focus-color:ButtonText;--spectrum-alias-label-text-color:CanvasText;--spectrum-alias-text-color-disabled:GrayText;--spectrum-slider-m-handle-background-color:ButtonFace;--spectrum-slider-m-handle-border-color:ButtonText;--spectrum-slider-m-handle-border-color-disabled:GrayText;--spectrum-slider-m-handle-border-color-down:Highlight;--spectrum-slider-m-handle-border-color-hover:Highlight;--spectrum-slider-m-handle-border-color-key-focus:Highlight;--spectrum-slider-m-handle-focus-ring-color-key-focus:ButtonText;--spectrum-slider-m-label-text-color:CanvasText;--spectrum-slider-m-label-text-color-disabled:GrayText;--spectrum-slider-m-tick-mark-color:ButtonText;--spectrum-slider-m-track-color:ButtonText;--spectrum-slider-m-track-color-disabled:GrayText;--spectrum-slider-m-track-fill-color:ButtonText;--spectrum-slider-m-track-fill-color-disabled:GrayText;--spectrum-slider-ramp-track-color-disabled:GrayText}.handle:before{forced-color-adjust:none}:host([variant=ramp]) .handle{forced-color-adjust:none}}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": "AAWA;
|
|
5
|
+
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqNf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
const styles = css`
|
|
1
|
+
"use strict";import{css as r}from"@spectrum-web-components/base";const t=r`
|
|
3
2
|
:host{--spectrum-slider-tick-mark-width:var(
|
|
4
3
|
--spectrum-slider-m-tick-mark-width,var(--spectrum-alias-border-size-thick)
|
|
5
4
|
);--spectrum-slider-tick-mark-height:var(
|
|
@@ -211,6 +210,5 @@ var(--spectrum-global-dimension-static-size-25)
|
|
|
211
210
|
)}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(
|
|
212
211
|
--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300)
|
|
213
212
|
)}@media (forced-colors:active){:host{--spectrum-alias-background-color-default:ButtonFace;--spectrum-alias-focus-color:ButtonText;--spectrum-alias-label-text-color:CanvasText;--spectrum-alias-text-color-disabled:GrayText;--spectrum-slider-m-handle-background-color:ButtonFace;--spectrum-slider-m-handle-border-color:ButtonText;--spectrum-slider-m-handle-border-color-disabled:GrayText;--spectrum-slider-m-handle-border-color-down:Highlight;--spectrum-slider-m-handle-border-color-hover:Highlight;--spectrum-slider-m-handle-border-color-key-focus:Highlight;--spectrum-slider-m-handle-focus-ring-color-key-focus:ButtonText;--spectrum-slider-m-label-text-color:CanvasText;--spectrum-slider-m-label-text-color-disabled:GrayText;--spectrum-slider-m-tick-mark-color:ButtonText;--spectrum-slider-m-track-color:ButtonText;--spectrum-slider-m-track-color-disabled:GrayText;--spectrum-slider-m-track-fill-color:ButtonText;--spectrum-slider-m-track-fill-color-disabled:GrayText;--spectrum-slider-ramp-track-color-disabled:GrayText}.handle:before{forced-color-adjust:none}:host([variant=ramp]) .handle{forced-color-adjust:none}}
|
|
214
|
-
`;
|
|
215
|
-
export default styles;
|
|
213
|
+
`;export default t;
|
|
216
214
|
//# sourceMappingURL=spectrum-slider.css.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-slider.css.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-slider-tick-mark-width:var(\n--spectrum-slider-m-tick-mark-width,var(--spectrum-alias-border-size-thick)\n);--spectrum-slider-tick-mark-height:var(\n--spectrum-slider-m-tick-mark-height,var(--spectrum-global-dimension-size-125)\n);--spectrum-slider-tick-mark-border-radius:var(\n--spectrum-slider-m-tick-mark-border-radius,var(--spectrum-alias-border-radius-xsmall)\n);--spectrum-slider-track-border-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-slider-track-height:var(\n--spectrum-slider-m-track-height,var(--spectrum-alias-border-size-thick)\n);--spectrum-slider-handle-width:var(\n--spectrum-slider-m-handle-width,var(--spectrum-alias-control-two-size-l)\n);--spectrum-slider-handle-height:var(\n--spectrum-slider-m-handle-height,var(--spectrum-alias-control-two-size-l)\n);--spectrum-slider-handle-gap:var(\n--spectrum-slider-m-handle-gap,var(--spectrum-alias-border-size-thicker)\n);--spectrum-slider-handle-border-size:var(\n--spectrum-slider-m-handle-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-slider-handle-border-radius:var(\n--spectrum-slider-m-handle-border-radius,var(--spectrum-global-dimension-size-100)\n);--spectrum-slider-height:var(\n--spectrum-slider-m-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-slider-min-width:var(\n--spectrum-slider-m-min-width,var(--spectrum-global-dimension-size-1250)\n);--spectrum-slider-animation-duration:var(\n--spectrum-slider-m-animation-duration,var(--spectrum-global-animation-duration-100)\n);--spectrum-slider-ramp-track-color-disabled:var(\n--spectrum-slider-m-ramp-track-color-disabled,var(--spectrum-global-color-gray-300)\n);--spectrum-slider-ramp-track-height:var(\n--spectrum-slider-m-ramp-track-height,var(--spectrum-global-dimension-size-200)\n);--spectrum-slider-label-gap-y:var(--spectrum-global-dimension-size-85);--spectrum-slider-controls-margin:calc(var(--spectrum-slider-handle-width)/2);--spectrum-slider-track-margin-offset:calc(var(--spectrum-slider-controls-margin)*-1);--spectrum-slider-handle-margin-top:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-handle-margin-left:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-track-handleoffset:var(--spectrum-slider-handle-gap);--spectrum-slider-track-middle-handleoffset:calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-width)/2);--spectrum-slider-input-top:calc(var(--spectrum-slider-handle-margin-top)/4);--spectrum-slider-input-left:calc(var(--spectrum-slider-handle-margin-left)/4);--spectrum-slider-ramp-margin-top:0;--spectrum-slider-range-track-reset:0;--spectrum-slider-label-margin-bottom:-3px;--spectrum-slider-label-gap-x:var(\n--spectrum-alias-item-control-gap-m,var(--spectrum-global-dimension-size-125)\n);--spectrum-slider-label-text-line-height:var(\n--spectrum-global-font-line-height-small,1.3\n)}:host{display:block;min-height:var(--spectrum-slider-height);min-width:var(--spectrum-slider-min-width);position:relative;-webkit-user-select:none;user-select:none;z-index:1}:host([dir=ltr]) #controls{margin-left:var(\n--spectrum-slider-controls-margin\n)}:host([dir=rtl]) #controls{margin-right:var(\n--spectrum-slider-controls-margin\n)}#controls{box-sizing:border-box;display:inline-block;min-height:var(--spectrum-slider-height);position:relative;vertical-align:top;width:calc(100% - var(--spectrum-slider-controls-margin)*2);z-index:auto}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{left:0}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{right:0}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{right:auto}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{left:auto}#fill,.track{box-sizing:border-box;height:var(\n--spectrum-slider-track-height\n);margin-top:calc(var(--spectrum-slider-track-height)/-2);pointer-events:none;position:absolute;top:calc(var(--spectrum-slider-height)/2);z-index:1}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}#fill,.track{padding-bottom:0;padding-top:0}:host([dir=ltr]) #fill:before,:host([dir=ltr]) .track:before{border-top-left-radius:0}:host([dir=rtl]) #fill:before,:host([dir=rtl]) .track:before{border-top-right-radius:0}:host([dir=ltr]) #fill:before,:host([dir=ltr]) .track:before{border-bottom-left-radius:0}:host([dir=rtl]) #fill:before,:host([dir=rtl]) .track:before{border-bottom-right-radius:0}:host([dir=ltr]) #fill:before,:host([dir=ltr]) .track:before{border-top-right-radius:0}:host([dir=rtl]) #fill:before,:host([dir=rtl]) .track:before{border-top-left-radius:0}:host([dir=ltr]) #fill:before,:host([dir=ltr]) .track:before{border-bottom-right-radius:0}:host([dir=rtl]) #fill:before,:host([dir=rtl]) .track:before{border-bottom-left-radius:0}#fill:before,.track:before{content:\"\";display:block;height:100%}:host([dir=ltr]) .track:first-of-type:before{border-top-left-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=rtl]) .track:first-of-type:before{border-top-right-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=ltr]) .track:first-of-type:before{border-bottom-left-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=rtl]) .track:first-of-type:before{border-bottom-right-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=ltr]) .track:first-of-type:before{border-top-right-radius:0}:host([dir=rtl]) .track:first-of-type:before{border-top-left-radius:0}:host([dir=ltr]) .track:first-of-type:before{border-bottom-right-radius:0}:host([dir=rtl]) .track:first-of-type:before{border-bottom-left-radius:0}:host([dir=ltr]) .track:last-of-type:before{border-top-left-radius:0}:host([dir=rtl]) .track:last-of-type:before{border-top-right-radius:0}:host([dir=ltr]) .track:last-of-type:before{border-bottom-left-radius:0}:host([dir=rtl]) .track:last-of-type:before{border-bottom-right-radius:0}:host([dir=ltr]) .track:last-of-type:before{border-top-right-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=rtl]) .track:last-of-type:before{border-top-left-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=ltr]) .track:last-of-type:before{border-bottom-right-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=rtl]) .track:last-of-type:before{border-bottom-left-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=ltr]) .track~.track{left:auto}:host([dir=rtl]) .track~.track{right:auto}:host([dir=ltr]) .track~.track{right:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl]) .track~.track{left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr]) .track~.track{padding-left:var(\n--spectrum-slider-track-handleoffset\n);padding-right:0}:host([dir=rtl]) .track~.track{padding-left:0;padding-right:var(\n--spectrum-slider-track-handleoffset\n)}:host([dir=ltr]) .track~.track{margin-left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl]) .track~.track{margin-right:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr]) .track~.track{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) .track~.track{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}.track~.track{padding-bottom:0;padding-top:0}:host([dir=ltr]) #fill{margin-left:0}:host([dir=rtl]) #fill{margin-right:0}:host([dir=ltr]) #fill{padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-right:0}:host([dir=rtl]) #fill{padding-left:0;padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}#fill{padding-bottom:0;padding-top:0}:host([dir=ltr]) .spectrum-Slider-fill--right{padding-left:0;padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}:host([dir=rtl]) .spectrum-Slider-fill--right{padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-right:0}.spectrum-Slider-fill--right{padding-bottom:0;padding-top:0}:host([variant=range]) #value{-webkit-user-select:text;user-select:text}:host([dir=ltr][variant=range]) .track:before{border-top-left-radius:0}:host([dir=rtl][variant=range]) .track:before{border-top-right-radius:0}:host([dir=ltr][variant=range]) .track:before{border-bottom-left-radius:0}:host([dir=rtl][variant=range]) .track:before{border-bottom-right-radius:0}:host([dir=ltr][variant=range]) .track:before{border-top-right-radius:0}:host([dir=rtl][variant=range]) .track:before{border-top-left-radius:0}:host([dir=ltr][variant=range]) .track:before{border-bottom-right-radius:0}:host([dir=rtl][variant=range]) .track:before{border-bottom-left-radius:0}:host([dir=ltr][variant=range]) .track:first-of-type{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl][variant=range]) .track:first-of-type{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=ltr][variant=range]) .track:first-of-type{left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl][variant=range]) .track:first-of-type{right:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr][variant=range]) .track:first-of-type{right:auto}:host([dir=rtl][variant=range]) .track:first-of-type{left:auto}:host([dir=ltr][variant=range]) .track:first-of-type{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl][variant=range]) .track:first-of-type{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=ltr][variant=range]) .track:first-of-type:before{border-top-left-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=rtl][variant=range]) .track:first-of-type:before{border-top-right-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=ltr][variant=range]) .track:first-of-type:before{border-bottom-left-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=rtl][variant=range]) .track:first-of-type:before{border-bottom-right-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=ltr][variant=range]) .track:first-of-type:before{border-top-right-radius:0}:host([dir=rtl][variant=range]) .track:first-of-type:before{border-top-left-radius:0}:host([dir=ltr][variant=range]) .track:first-of-type:before{border-bottom-right-radius:0}:host([dir=rtl][variant=range]) .track:first-of-type:before{border-bottom-left-radius:0}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{right:auto}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track{right:auto}:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) .track,:host([dir=rtl][variant=range]) .track{margin-left:var(--spectrum-slider-range-track-reset);margin-right:var(--spectrum-slider-range-track-reset);padding-left:var(\n--spectrum-slider-track-middle-handleoffset\n);padding-right:var(--spectrum-slider-track-middle-handleoffset)}:host([dir=ltr][variant=range]) .track:last-of-type{padding-left:var(\n--spectrum-slider-track-handleoffset\n);padding-right:0}:host([dir=rtl][variant=range]) .track:last-of-type{padding-left:0;padding-right:var(\n--spectrum-slider-track-handleoffset\n)}:host([dir=ltr][variant=range]) .track:last-of-type{left:auto}:host([dir=rtl][variant=range]) .track:last-of-type{right:auto}:host([dir=ltr][variant=range]) .track:last-of-type{right:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl][variant=range]) .track:last-of-type{left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr][variant=range]) .track:last-of-type{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl][variant=range]) .track:last-of-type{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=ltr][variant=range]) .track:last-of-type:before{border-top-right-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=rtl][variant=range]) .track:last-of-type:before{border-top-left-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=ltr][variant=range]) .track:last-of-type:before{border-bottom-right-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=rtl][variant=range]) .track:last-of-type:before{border-bottom-left-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=ltr][variant=range]) .track:last-of-type:before{border-top-left-radius:0}:host([dir=rtl][variant=range]) .track:last-of-type:before{border-top-right-radius:0}:host([dir=ltr][variant=range]) .track:last-of-type:before{border-bottom-left-radius:0}:host([dir=rtl][variant=range]) .track:last-of-type:before{border-bottom-right-radius:0}:host([dir=ltr]) #ramp{left:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) #ramp{right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=ltr]) #ramp{right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) #ramp{left:var(\n--spectrum-slider-track-margin-offset\n)}#ramp{height:var(--spectrum-slider-ramp-track-height);margin-top:var(\n--spectrum-slider-ramp-margin-top\n);position:absolute;top:calc(var(--spectrum-slider-ramp-track-height)/2)}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{height:100%;width:100%}:host([dir=ltr]) .handle{left:0}:host([dir=rtl]) .handle{right:0}:host([dir=ltr]) .handle{margin-left:calc(var(--spectrum-slider-handle-width)/-2);margin-right:0}:host([dir=rtl]) .handle{margin-left:0;margin-right:calc(var(--spectrum-slider-handle-width)/-2)}.handle{border-radius:var(--spectrum-slider-handle-border-radius);border-style:solid;border-width:var(--spectrum-slider-handle-border-size);box-sizing:border-box;display:inline-block;height:var(--spectrum-slider-handle-height);margin-bottom:0;margin-top:var(--spectrum-slider-handle-margin-top);outline:none;position:absolute;top:calc(var(--spectrum-slider-height)/2);transition:border-width var(--spectrum-slider-animation-duration) ease-in-out;width:var(--spectrum-slider-handle-width);z-index:2}.handle.dragging,.handle.handle-highlight,.handle:active{border-width:var(\n--spectrum-slider-handle-border-size\n)}.handle.dragging,.handle.handle-highlight,.handle.is-tophandle,.handle:active{z-index:3}.handle:before{border-radius:100%;content:\" \";display:block;height:var(--spectrum-slider-handle-height);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,width var(--spectrum-global-animation-duration-100,.13s) ease-out,height var(--spectrum-global-animation-duration-100,.13s) ease-out;width:var(--spectrum-slider-handle-width)}.handle.handle-highlight:before{height:calc(var(--spectrum-slider-handle-height) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*2);width:calc(var(--spectrum-slider-handle-width) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*2)}:host([dir=ltr]) .input{left:var(\n--spectrum-slider-input-left\n)}:host([dir=rtl]) .input{right:var(\n--spectrum-slider-input-left\n)}.input{-webkit-appearance:none;border:0;cursor:default;height:var(--spectrum-slider-handle-height);margin:0;opacity:.000001;overflow:hidden;padding:0;pointer-events:none;position:absolute;top:var(--spectrum-slider-input-top);width:var(--spectrum-slider-handle-width)}.input:focus{outline:none}#label-container{display:flex;font-size:var(\n--spectrum-slider-label-text-size,var(--spectrum-global-dimension-font-size-75)\n);line-height:var(--spectrum-slider-label-text-line-height);margin-bottom:var(--spectrum-slider-label-margin-bottom);padding-top:var(\n--spectrum-fieldlabel-m-padding-top,var(--spectrum-global-dimension-size-50)\n);position:relative;width:auto}:host([dir=ltr]) #label{padding-left:0}:host([dir=rtl]) #label{padding-right:0}#label{flex-grow:1}:host([dir=ltr]) #value{padding-right:0}:host([dir=rtl]) #value{padding-left:0}:host([dir=ltr]) #value{text-align:right}:host([dir=rtl]) #value{text-align:left}#value{font-feature-settings:\"tnum\";cursor:default;flex-grow:0}:host([dir=ltr]) #value{margin-left:var(\n--spectrum-slider-label-gap-x\n)}:host([dir=rtl]) #value{margin-right:var(\n--spectrum-slider-label-gap-x\n)}.ticks{display:flex;justify-content:space-between;margin:0 var(--spectrum-slider-track-margin-offset);margin-top:calc(var(--spectrum-slider-tick-mark-height) + 1px);z-index:0}.tick{position:relative;width:var(--spectrum-slider-tick-mark-width)}:host([dir=ltr]) .tick:after{left:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}:host([dir=rtl]) .tick:after{right:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}.tick:after{border-radius:var(--spectrum-slider-tick-mark-border-radius);content:\"\";display:block;height:var(--spectrum-slider-tick-mark-height);position:absolute;top:0;width:var(--spectrum-slider-tick-mark-width)}.tick .tickLabel{align-items:center;display:flex;font-size:var(\n--spectrum-slider-label-text-size,var(--spectrum-global-dimension-font-size-75)\n);justify-content:center;line-height:var(--spectrum-slider-label-text-line-height);margin-bottom:0;margin-left:calc(var(--spectrum-slider-label-gap-x)*-1);margin-right:calc(var(--spectrum-slider-label-gap-x)*-1);margin-top:calc(var(--spectrum-slider-label-gap-y) + var(--spectrum-slider-tick-mark-height))}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;margin-left:0;margin-right:0;position:absolute}:host([dir=ltr]) .tick:first-of-type{left:calc(var(--spectrum-slider-tick-mark-width)/-2)}:host([dir=rtl]) .tick:first-of-type{right:calc(var(--spectrum-slider-tick-mark-width)/-2)}:host([dir=ltr]) .tick:first-of-type .tickLabel{left:0}:host([dir=rtl]) .tick:first-of-type .tickLabel{right:0}:host([dir=ltr]) .tick:last-of-type{right:calc(var(--spectrum-slider-tick-mark-width)/-2)}:host([dir=rtl]) .tick:last-of-type{left:calc(var(--spectrum-slider-tick-mark-width)/-2)}:host([dir=ltr]) .tick:last-of-type .tickLabel{right:0}:host([dir=rtl]) .tick:last-of-type .tickLabel{left:0}:host([disabled]){cursor:default}:host([disabled]) .handle{cursor:default;pointer-events:none}.spectrum-Slider-handleContainer,.spectrum-Slider-trackContainer{margin-left:calc(var(--spectrum-slider-handle-width)/2*-1);position:absolute;top:calc(var(--spectrum-slider-track-height)/2 - 1px);width:calc(100% + var(--spectrum-slider-handle-width))}.spectrum-Slider-trackContainer{height:var(--spectrum-slider-height);overflow:hidden}:host{--spectrum-slider-m-focus-ring-size:var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-slider-m-handle-border-color-key-focus:var(\n--spectrum-global-color-gray-800\n);--spectrum-slider-m-handle-focus-ring-color-key-focus:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);--spectrum-slider-m-label-text-color:var(\n--spectrum-alias-label-text-color,var(--spectrum-global-color-gray-700)\n);--spectrum-slider-m-label-text-color-disabled:var(\n--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}.track:before{background:var(\n--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400)\n)}#label-container{color:var(\n--spectrum-slider-m-label-text-color\n)}:host([variant=filled]) .track:first-child:before{background:var(\n--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)\n)}#fill:before{background:var(\n--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)\n)}#ramp path{fill:var(\n--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400)\n)}.handle{background:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-slider-m-handle-border-color,var(--spectrum-global-color-gray-700)\n)}.handle:hover{border-color:var(\n--spectrum-slider-m-handle-border-color-hover,var(--spectrum-global-color-gray-800)\n)}.handle.handle-highlight{border-color:var(\n--spectrum-slider-m-handle-border-color-key-focus,var(--spectrum-global-color-gray-800)\n)}.handle.handle-highlight:before{box-shadow:0 0 0 var(\n--spectrum-slider-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(--spectrum-slider-m-handle-focus-ring-color-key-focus)}.handle.dragging,.handle:active{border-color:var(\n--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800)\n)}:host([variant=ramp]) .handle{box-shadow:0 0 0 var(\n--spectrum-slider-m-handle-gap,var(--spectrum-alias-border-size-thicker)\n) var(\n--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100)\n)}.input{background:transparent}.tick:after{background-color:var(\n--spectrum-slider-m-tick-mark-color,var(--spectrum-global-color-gray-400)\n)}.handle.dragging{background:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800)\n)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)\n)}:host([disabled]) #label-container{color:var(\n--spectrum-slider-m-label-text-color-disabled\n)}:host([disabled]) .handle{background:var(\n--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100)\n);border-color:var(\n--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([disabled]) .handle:active,:host([disabled]) .handle:hover{background:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([disabled]) .track:before{background:var(\n--spectrum-slider-m-track-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled][variant=filled]) .track:first-child:before{background:var(\n--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) #fill:before{background:var(\n--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) #ramp path{fill:var(\n--spectrum-slider-ramp-track-color-disabled\n)}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}@media (forced-colors:active){:host{--spectrum-alias-background-color-default:ButtonFace;--spectrum-alias-focus-color:ButtonText;--spectrum-alias-label-text-color:CanvasText;--spectrum-alias-text-color-disabled:GrayText;--spectrum-slider-m-handle-background-color:ButtonFace;--spectrum-slider-m-handle-border-color:ButtonText;--spectrum-slider-m-handle-border-color-disabled:GrayText;--spectrum-slider-m-handle-border-color-down:Highlight;--spectrum-slider-m-handle-border-color-hover:Highlight;--spectrum-slider-m-handle-border-color-key-focus:Highlight;--spectrum-slider-m-handle-focus-ring-color-key-focus:ButtonText;--spectrum-slider-m-label-text-color:CanvasText;--spectrum-slider-m-label-text-color-disabled:GrayText;--spectrum-slider-m-tick-mark-color:ButtonText;--spectrum-slider-m-track-color:ButtonText;--spectrum-slider-m-track-color-disabled:GrayText;--spectrum-slider-m-track-fill-color:ButtonText;--spectrum-slider-m-track-fill-color-disabled:GrayText;--spectrum-slider-ramp-track-color-disabled:GrayText}.handle:before{forced-color-adjust:none}:host([variant=ramp]) .handle{forced-color-adjust:none}}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqNf,eAAeC",
|
|
6
|
+
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
import { html } from "@spectrum-web-components/base";
|
|
2
3
|
import "@spectrum-web-components/slider/sp-slider.js";
|
|
3
4
|
import "@spectrum-web-components/slider/sp-slider-handle.js";
|
|
@@ -584,7 +585,10 @@ export const ThreeHandlesComplex = (args = {}) => {
|
|
|
584
585
|
fromNormalized(value) {
|
|
585
586
|
const normalizedBlack = values.black / 255;
|
|
586
587
|
const normalizedWhite = values.white / 255;
|
|
587
|
-
const clamped = Math.max(
|
|
588
|
+
const clamped = Math.max(
|
|
589
|
+
Math.min(value, normalizedWhite),
|
|
590
|
+
normalizedBlack
|
|
591
|
+
);
|
|
588
592
|
return (clamped - normalizedBlack) / (normalizedWhite - normalizedBlack);
|
|
589
593
|
}
|
|
590
594
|
};
|
|
@@ -619,7 +623,9 @@ export const ThreeHandlesComplex = (args = {}) => {
|
|
|
619
623
|
maximumFractionDigits: 2,
|
|
620
624
|
minimumFractionDigits: 2
|
|
621
625
|
};
|
|
622
|
-
return new Intl.NumberFormat(navigator.language, formatOptions).format(
|
|
626
|
+
return new Intl.NumberFormat(navigator.language, formatOptions).format(
|
|
627
|
+
result
|
|
628
|
+
);
|
|
623
629
|
};
|
|
624
630
|
return html`
|
|
625
631
|
<div style="width: 500px; margin: 12px 20px;">
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["slider.stories.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/slider/sp-slider-handle.js';\nimport {\n Slider,\n SliderHandle,\n variants,\n} from '@spectrum-web-components/slider';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nexport default {\n component: 'sp-slider',\n title: 'Slider',\n argTypes: {\n onInput: { action: 'input' },\n onChange: { action: 'change' },\n variant: {\n name: 'Variant',\n description: 'Determines the style of slider.',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: undefined },\n },\n control: {\n type: 'inline-radio',\n options: [undefined, ...variants],\n },\n },\n tickStep: {\n name: 'Tick Step',\n description: 'Tick spacing on slider.',\n table: {\n type: { summary: 'number' },\n defaultValue: { summary: 0.1 },\n },\n control: {\n type: 'number',\n },\n },\n labelVisibility: {\n name: 'Label Visibility',\n description: 'The labels visibily available in the UI',\n table: {\n type: { summary: '\"text\" | \"value\" | \"none\" | undefined' },\n defaultValue: { summary: undefined },\n },\n control: {\n type: 'text',\n },\n },\n },\n args: {\n variant: undefined,\n tickStep: 0.1,\n labelVisibility: undefined,\n },\n};\n\nexport interface StoryArgs {\n variant?: string;\n tickStep?: number;\n labelVisibility?: string;\n onInput?: (val: string) => void;\n onChange?: (val: string) => void;\n [prop: string]: unknown;\n}\n\nconst handleEvent =\n ({ onInput, onChange }: StoryArgs) =>\n (event: Event): void => {\n const { value } = event.target as Slider;\n if (onInput && event.type === 'input') {\n onInput(value.toString());\n } else if (onChange && event.type === 'change') {\n onChange(value.toString());\n }\n };\n\nconst handleHandleEvent =\n ({ onInput, onChange }: StoryArgs) =>\n (event: Event): void => {\n const target = event.target as SliderHandle;\n if (target.value != null) {\n if (typeof target.value === 'object') {\n const value = JSON.stringify(target.value, null, 2);\n if (onInput && event.type === 'input') {\n onInput(value);\n } else if (onChange && event.type === 'change') {\n onChange(value);\n }\n } else {\n const value = `${target.name}: ${target.value}`;\n if (onInput && event.type === 'input') {\n onInput(value);\n } else if (onChange && event.type === 'change') {\n onChange(value);\n }\n }\n }\n };\n\nexport const Default = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n max=\"1\"\n min=\"0\"\n value=\".5\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Opacity\n </sp-slider>\n </div>\n `;\n};\n\nexport const noVisibleTextLabel = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n max=\"1\"\n min=\"0\"\n value=\".5\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Opacity\n </sp-slider>\n </div>\n `;\n};\nnoVisibleTextLabel.args = {\n labelVisibility: 'value',\n};\n\nexport const noVisibleValueLabel = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n max=\"1\"\n min=\"0\"\n value=\".5\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Opacity\n </sp-slider>\n </div>\n `;\n};\nnoVisibleValueLabel.args = {\n labelVisibility: 'text',\n};\n\nexport const noVisibleLabels = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n max=\"1\"\n min=\"0\"\n value=\".5\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Opacity\n </sp-slider>\n </div>\n `;\n};\nnoVisibleLabels.args = {\n labelVisibility: 'none',\n};\n\nexport const px = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n max=\"360\"\n min=\"0\"\n value=\"90\"\n step=\"1\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{\n style: 'unit',\n unit: 'px',\n }}\n ...=${spreadProps(args)}\n >\n Angle\n </sp-slider>\n </div>\n `;\n};\n\nclass NumberFieldDefined extends HTMLElement {\n constructor() {\n super();\n this.numberFieldLoaderPromise = new Promise((res) => {\n customElements.whenDefined('sp-number-field').then(() => {\n res(true);\n });\n });\n }\n\n private numberFieldLoaderPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.numberFieldLoaderPromise;\n }\n}\n\ncustomElements.define('number-field-defined', NumberFieldDefined);\n\nconst editableDecorator = (story: () => TemplateResult): TemplateResult => {\n return html`\n ${story()}\n <number-field-defined></number-field-defined>\n `;\n};\n\nexport const editable = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n editable\n max=\"360\"\n min=\"0\"\n value=\"90\"\n step=\"1\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{\n style: 'unit',\n unit: 'degree',\n unitDisplay: 'narrow',\n }}\n ...=${spreadProps(args)}\n >\n Angle\n </sp-slider>\n </div>\n `;\n};\n\neditable.decorators = [editableDecorator];\n\nexport const editableDisabled = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n editable\n disabled\n max=\"360\"\n min=\"0\"\n value=\"90\"\n step=\"1\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{\n style: 'unit',\n unit: 'degree',\n unitDisplay: 'narrow',\n }}\n ...=${spreadProps(args)}\n >\n Angle\n </sp-slider>\n </div>\n `;\n};\n\neditable.decorators = [editableDecorator];\n\nexport const editableCustom = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div\n style=\"width: 500px; margin: 12px 20px; --spectrum-slider-editable-number-field-width: 150px;\"\n >\n <sp-slider\n editable\n max=\"24\"\n min=\"0\"\n value=\"12.75\"\n step=\"0.25\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'unit', unit: 'hour' }}\n ...=${spreadProps(args)}\n >\n Hours\n </sp-slider>\n </div>\n `;\n};\n\neditableCustom.decorators = [editableDecorator];\n\nexport const hideStepper = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n editable\n hide-stepper\n max=\"1\"\n min=\"0\"\n value=\".5\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Opacity\n </sp-slider>\n </div>\n `;\n};\n\nhideStepper.decorators = [editableDecorator];\n\nexport const Gradient = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div\n style=\"\n width: 500px;\n margin: 12px 20px;\n --spectrum-slider-track-color:linear-gradient(to right, red, green 100%);\n --spectrum-slider-track-color-rtl:linear-gradient(to left, red, green 100%);\n \"\n >\n <sp-slider\n label=\"Opacity\"\n max=\"100\"\n min=\"0\"\n value=\"50\"\n id=\"opacity-slider\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n `;\n};\nGradient.args = {\n variant: undefined,\n};\n\nexport const tick = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <sp-slider\n label=\"Slider Label\"\n variant=\"tick\"\n min=\"0\"\n max=\"92\"\n ...=${spreadProps(args)}\n ></sp-slider>\n `;\n};\ntick.args = {\n variant: 'tick',\n tickStep: 5,\n};\n\nexport const tickLabels = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <sp-slider\n label=\"Slider Label\"\n tick-labels\n variant=\"tick\"\n min=\"50\"\n max=\"75\"\n ...=${spreadProps(args)}\n ></sp-slider>\n `;\n};\ntickLabels.args = {\n variant: 'tick',\n tickStep: 5,\n};\n\nexport const Disabled = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n disabled\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Intensity\"\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n `;\n};\n\nexport const Quiet = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n editable\n hide-stepper\n quiet\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Intensity\"\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n `;\n};\n\nexport const Indeterminate = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n editable\n indeterminate\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Intensity\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n `;\n};\n\nexport const ExplicitHandle = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n @input=${handleHandleEvent(args)}\n @change=${handleHandleEvent(args)}\n ...=${spreadProps(args)}\n >\n Intensity\n <sp-slider-handle slot=\"handle\" value=\"5\"></sp-slider-handle>\n </sp-slider>\n </div>\n `;\n};\n\nexport const TwoHandles = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n value=\"5\"\n step=\"1\"\n min=\"0\"\n max=\"255\"\n @input=${handleHandleEvent(args)}\n @change=${handleHandleEvent(args)}\n ...=${spreadProps(args)}\n >\n Output Levels\n <sp-slider-handle\n slot=\"handle\"\n name=\"min\"\n value=\"5\"\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"max\"\n value=\"250\"\n ></sp-slider-handle>\n </sp-slider>\n </div>\n `;\n};\nTwoHandles.args = {\n variant: 'range',\n tickStep: 10,\n};\n\nexport const TwoHandlesPt = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n value=\"5\"\n step=\"1\"\n min=\"0\"\n max=\"255\"\n @input=${handleHandleEvent(args)}\n @change=${handleHandleEvent(args)}\n .formatOptions=${{\n style: 'unit',\n unit: 'pt',\n }}\n ...=${spreadProps(args)}\n >\n Output Levels\n <sp-slider-handle\n slot=\"handle\"\n name=\"min\"\n value=\"5\"\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"max\"\n value=\"250\"\n ></sp-slider-handle>\n </sp-slider>\n </div>\n `;\n};\nTwoHandlesPt.args = {\n variant: 'range',\n tickStep: 10,\n};\n\nexport const ThreeHandlesPc = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n value=\"5\"\n step=\"1\"\n min=\"0\"\n max=\"255\"\n @input=${handleHandleEvent(args)}\n @change=${handleHandleEvent(args)}\n .formatOptions=${{\n style: 'unit',\n unit: 'pc',\n }}\n ...=${spreadProps(args)}\n >\n Output Levels\n <sp-slider-handle slot=\"handle\" value=\"5\"></sp-slider-handle>\n <sp-slider-handle slot=\"handle\" value=\"133\"></sp-slider-handle>\n <sp-slider-handle slot=\"handle\" value=\"250\"></sp-slider-handle>\n </sp-slider>\n </div>\n `;\n};\n\nexport const ThreeHandlesOrdered = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n step=\"1\"\n min=\"0\"\n max=\"255\"\n @input=${handleHandleEvent(args)}\n @change=${handleHandleEvent(args)}\n ...=${spreadProps(args)}\n >\n Output Levels\n <sp-slider-handle\n slot=\"handle\"\n name=\"low\"\n value=\"5\"\n max=\"next\"\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"mid\"\n value=\"100\"\n min=\"previous\"\n max=\"next\"\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"high\"\n value=\"250\"\n min=\"previous\"\n ></sp-slider-handle>\n </sp-slider>\n </div>\n `;\n};\nThreeHandlesOrdered.args = {\n tickStep: 10,\n};\n\n// This is a very complex example from an actual application.\n//\n// The first and last handles go from 0 to 255 in a linear fashion.\n// The last and first handles are ordered so that the last handle\n// must be greater than or equal to the first handle.\n//\n// The middle handle's range goes from 9.99 to 0.01, counting down.\n// the middle handle's limits are set by the outer handles such that\n// the position of the left handle is the staring value (9.99) for the\n// middle handle. And the position of the right handle is the end\n// value (0.01). That means that the middle handle will move\n// proportionally as you move the outer handles.\n//\n// The two other interesting features of the middle handle are that\n// it counts down, and that it does so exponentially for the first\n// half of its range.\n//\n// Because the specification for the <input> tag in HTML says that the\n// min should be less than the max, we do a double normalization to make\n// this work. The middle handle is considered to go between 0 and 1,\n// where 0 is the left handle's position and 1 is the right handle's\n// position. We then do the appropriate calculation to convert that\n// value into one between 9.99 and 0.01 for display to the user.\n//\n// One iteresting thing to note is that the normalization function\n// can also be used to enforce clamping.\n//\nexport const ThreeHandlesComplex = (args: StoryArgs = {}): TemplateResult => {\n const values: { [key: string]: number } = {\n black: 50,\n gray: 4.98,\n white: 225,\n };\n const handleEvent =\n ({ onInput, onChange }: StoryArgs) =>\n (event: Event): void => {\n const target = event.target as SliderHandle;\n if (target.value != null) {\n if (typeof target.value === 'object') {\n const value = JSON.stringify(target.value, null, 2);\n if (onInput && event.type === 'input') {\n onInput(value);\n } else if (onChange && event.type === 'change') {\n onChange(value);\n }\n } else {\n const value = `${target.name}: ${target.value}`;\n if (onInput && event.type === 'input') {\n onInput(value);\n } else if (onChange && event.type === 'change') {\n onChange(value);\n }\n }\n values[target.name] = target.value;\n }\n };\n const grayNormalization = {\n toNormalized(value: number) {\n const normalizedBlack = values.black / 255;\n const normalizedWhite = values.white / 255;\n const clamped = Math.max(Math.min(value, 1), 0);\n return (\n clamped * (normalizedWhite - normalizedBlack) + normalizedBlack\n );\n },\n fromNormalized(value: number) {\n const normalizedBlack = values.black / 255;\n const normalizedWhite = values.white / 255;\n const clamped = Math.max(\n Math.min(value, normalizedWhite),\n normalizedBlack\n );\n\n return (\n (clamped - normalizedBlack) /\n (normalizedWhite - normalizedBlack)\n );\n },\n };\n const blackNormalization = {\n toNormalized(value: number) {\n const clamped = Math.min(value, values.white);\n return clamped / 255;\n },\n fromNormalized(value: number) {\n const denormalized = value * 255;\n return Math.min(denormalized, values.white);\n },\n };\n const whiteNormalization = {\n toNormalized(value: number) {\n const clamped = Math.max(value, values.black);\n return clamped / 255;\n },\n fromNormalized(value: number) {\n const denormalized = value * 255;\n return Math.max(denormalized, values.black);\n },\n };\n const computeGray = (value: number): string => {\n let result = 1.0;\n if (value > 0.5) {\n result = Math.max(2 * (1 - value), 0.01);\n } else if (value < 0.5) {\n result = ((1 - 2 * value) * (Math.sqrt(9.99) - 1) + 1) ** 2;\n }\n const formatOptions = {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n };\n return new Intl.NumberFormat(navigator.language, formatOptions).format(\n result\n );\n };\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n step=\"1\"\n min=\"0\"\n max=\"255\"\n @input=${handleEvent}\n @change=${handleEvent}\n ...=${spreadProps(args)}\n >\n Output Levels\n <sp-slider-handle\n slot=\"handle\"\n name=\"black\"\n value=${values.black}\n .normalization=${blackNormalization}\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"gray\"\n value=\"0.215\"\n min=\"0\"\n max=\"1\"\n step=\"0.005\"\n .normalization=${grayNormalization}\n .getAriaHandleText=${computeGray}\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"white\"\n value=${values.white}\n .normalization=${whiteNormalization}\n ></sp-slider-handle>\n </sp-slider>\n </div>\n `;\n};\nThreeHandlesOrdered.args = {\n tickStep: 10,\n};\n\nexport const focusTabDemo = (args: StoryArgs = {}): TemplateResult => {\n const value = 50;\n const min = 0;\n const max = 100;\n const step = 1;\n return html`\n <div style=\"width: 500px; margin: 12px 20px 20px;\">\n <sp-slider\n value=\"${value}\"\n step=\"${step}\"\n min=\"${min}\"\n max=\"${max}\"\n label=\"Opacity\"\n id=\"opacity-slider-opacity\"\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n <div style=\"width: 500px; margin: 20px;\">\n <sp-slider\n value=\"${value}\"\n step=\"${step}\"\n min=\"${min}\"\n max=\"${max}\"\n label=\"Lightness\"\n id=\"opacity-slider-lightness\"\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n <div style=\"width: 500px; margin: 20px 20px 12px;\">\n <sp-slider\n value=\"${value}\"\n step=\"${step}\"\n min=\"${min}\"\n max=\"${max}\"\n label=\"Saturation\"\n id=\"opacity-slider-saturation\"\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n `;\n};\n"],
|
|
5
|
-
"mappings": "AAWA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["handleEvent"]
|
|
7
7
|
}
|
package/sync/sp-slider.dev.js
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-slider.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport '@spectrum-web-components/number-field/sp-number-field.js';\nimport '../sp-slider.dev.js'\n"],
|
|
5
|
-
"mappings": "AAYA;
|
|
5
|
+
"mappings": ";AAYA,OAAO;AACP,OAAO;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/sync/sp-slider.js
CHANGED
package/sync/sp-slider.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-slider.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport '@spectrum-web-components/number-field/sp-number-field.js';\nimport '../sp-slider.js';\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "aAYA,MAAO,2DACP,MAAO",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["test-basic.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport { html } from 'lit';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n <sp-slider\n value=\"50\"\n step=\"1\"\n min=\"0\"\n max=\"100\"\n label=\"Opacity\"\n id=\"opacity-slider\"\n ></sp-slider>\n`);\n"],
|
|
5
|
-
"mappings": "AAYA;
|
|
5
|
+
"mappings": ";AAYA,OAAO;AACP,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEvC,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAStB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
import "@spectrum-web-components/slider/sync/sp-slider.js";
|
|
2
3
|
import { editable, hideStepper } from "../stories/slider.stories.js";
|
|
3
4
|
import { elementUpdated, expect, fixture } from "@open-wc/testing";
|
|
@@ -82,56 +83,68 @@ describe("Slider - editable, sync", () => {
|
|
|
82
83
|
const handle = el.shadowRoot.querySelector(".handle");
|
|
83
84
|
el.track.setPointerCapture = (id) => pointerId = id;
|
|
84
85
|
el.track.releasePointerCapture = (id) => pointerId = id;
|
|
85
|
-
handle.dispatchEvent(
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
86
|
+
handle.dispatchEvent(
|
|
87
|
+
new PointerEvent("pointerdown", {
|
|
88
|
+
button: 1,
|
|
89
|
+
pointerId: 1,
|
|
90
|
+
cancelable: true,
|
|
91
|
+
bubbles: true,
|
|
92
|
+
composed: true
|
|
93
|
+
})
|
|
94
|
+
);
|
|
92
95
|
await elementUpdated(el);
|
|
93
96
|
expect(el.dragging).to.be.false;
|
|
94
97
|
expect(pointerId, "1").to.equal(-1);
|
|
95
|
-
handle.dispatchEvent(
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
98
|
+
handle.dispatchEvent(
|
|
99
|
+
new PointerEvent("pointerdown", {
|
|
100
|
+
button: 0,
|
|
101
|
+
pointerId: 1,
|
|
102
|
+
cancelable: true,
|
|
103
|
+
bubbles: true,
|
|
104
|
+
composed: true
|
|
105
|
+
})
|
|
106
|
+
);
|
|
102
107
|
await elementUpdated(el);
|
|
103
108
|
expect(el.dragging, "it is dragging 1").to.be.true;
|
|
104
109
|
expect(pointerId, "2").to.equal(1);
|
|
105
|
-
handle.dispatchEvent(
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
110
|
+
handle.dispatchEvent(
|
|
111
|
+
new PointerEvent("pointerup", {
|
|
112
|
+
pointerId: 2,
|
|
113
|
+
cancelable: true,
|
|
114
|
+
bubbles: true,
|
|
115
|
+
composed: true
|
|
116
|
+
})
|
|
117
|
+
);
|
|
111
118
|
await elementUpdated(el);
|
|
112
119
|
expect(el.dragging).to.be.false;
|
|
113
120
|
expect(el.highlight).to.be.false;
|
|
114
121
|
expect(pointerId, "3").to.equal(2);
|
|
115
|
-
handle.dispatchEvent(
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
+
handle.dispatchEvent(
|
|
123
|
+
new PointerEvent("pointerdown", {
|
|
124
|
+
button: 0,
|
|
125
|
+
pointerId: 1,
|
|
126
|
+
cancelable: true,
|
|
127
|
+
bubbles: true,
|
|
128
|
+
composed: true
|
|
129
|
+
})
|
|
130
|
+
);
|
|
122
131
|
await elementUpdated(el);
|
|
123
132
|
expect(el.dragging, "it is dragging 2").to.be.true;
|
|
124
133
|
expect(pointerId, "4").to.equal(1);
|
|
125
|
-
handle.dispatchEvent(
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
134
|
+
handle.dispatchEvent(
|
|
135
|
+
new PointerEvent("pointercancel", {
|
|
136
|
+
pointerId: 3,
|
|
137
|
+
cancelable: true,
|
|
138
|
+
bubbles: true,
|
|
139
|
+
composed: true
|
|
140
|
+
})
|
|
141
|
+
);
|
|
131
142
|
await elementUpdated(el);
|
|
132
143
|
expect(el.dragging).to.be.false;
|
|
133
144
|
expect(pointerId, "5").to.equal(3);
|
|
134
|
-
expect(el.shadowRoot.activeElement).to.equal(
|
|
145
|
+
expect(el.shadowRoot.activeElement).to.equal(
|
|
146
|
+
el.handleController.inputForHandle(el)
|
|
147
|
+
);
|
|
135
148
|
});
|
|
136
149
|
});
|
|
137
150
|
//# sourceMappingURL=slider-editable-sync.test.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["slider-editable-sync.test.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport '@spectrum-web-components/slider/sync/sp-slider.js';\nimport { Slider } from '@spectrum-web-components/slider';\nimport { editable, hideStepper } from '../stories/slider.stories.js';\nimport { elementUpdated, expect, fixture } from '@open-wc/testing';\nimport { TemplateResult } from '@spectrum-web-components/base';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { spy } from 'sinon';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\nasync function sliderFromFixture(\n sliderFixture: () => TemplateResult\n): Promise<Slider> {\n const el = await fixture<Slider>(sliderFixture());\n const slider = el.querySelector('sp-slider') as Slider;\n return slider;\n}\n\ndescribe('Slider - editable, sync', () => {\n testForLitDevWarnings(async () => await sliderFromFixture(editable));\n it('loads', async () => {\n const el = await sliderFromFixture(editable);\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n\n it('loads - [hide-stepper]', async () => {\n const el = await sliderFromFixture(hideStepper);\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n\n it('loads - [disabled]', async () => {\n const el = document.createElement('sp-slider');\n el.editable = true;\n el.disabled = true;\n el.label = 'Disabled, editable, slider';\n\n try {\n document.body.append(el);\n } catch (error) {\n expect(true).to.be.false;\n }\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n el.remove();\n });\n\n it('focuses `<sp-number-field>` directly', async () => {\n const el = await sliderFromFixture(editable);\n\n await elementUpdated(el);\n\n el.focus();\n\n await elementUpdated(el);\n\n expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n });\n\n it('edits via the `<sp-number-field>`', async () => {\n const inputSpy = spy();\n const changeSpy = spy();\n const el = await sliderFromFixture(editable);\n el.addEventListener('input', () => inputSpy());\n el.addEventListener('change', () => changeSpy());\n\n await elementUpdated(el);\n\n el.focus();\n\n await elementUpdated(el);\n\n expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n expect(el.value).to.equal(90);\n\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ type: '45' });\n await sendKeys({ press: 'Enter' });\n\n await elementUpdated(el);\n\n expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n expect(el.value).to.equal(45);\n expect(inputSpy.callCount, 'one input').to.equal(1);\n expect(changeSpy.callCount, 'one change').to.equal(1);\n\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ press: 'Backspace' });\n await sendKeys({ press: 'Enter' });\n\n expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n expect(el.value).to.equal(45);\n expect(inputSpy.callCount, 'still one input').to.equal(1);\n expect(changeSpy.callCount, 'still one change').to.equal(1);\n });\n\n it('focuses `<input>` after pointer interactions', async () => {\n let pointerId = -1;\n const el = await sliderFromFixture(editable);\n\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(el.highlight).to.be.false;\n expect(pointerId).to.equal(-1);\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n el.track.setPointerCapture = (id: number) => (pointerId = id);\n el.track.releasePointerCapture = (id: number) => (pointerId = id);\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 1,\n pointerId: 1,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(pointerId, '1').to.equal(-1);\n\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 0,\n pointerId: 1,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging, 'it is dragging 1').to.be.true;\n expect(pointerId, '2').to.equal(1);\n\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n pointerId: 2,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(el.highlight).to.be.false;\n expect(pointerId, '3').to.equal(2);\n\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 0,\n pointerId: 1,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging, 'it is dragging 2').to.be.true;\n expect(pointerId, '4').to.equal(1);\n\n handle.dispatchEvent(\n new PointerEvent('pointercancel', {\n pointerId: 3,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(pointerId, '5').to.equal(3);\n expect(el.shadowRoot.activeElement).to.equal(\n el.handleController.inputForHandle(el)\n );\n });\n});\n"],
|
|
5
|
-
"mappings": "AAYA;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
import "@spectrum-web-components/slider/sp-slider.js";
|
|
2
3
|
import {
|
|
3
4
|
editable,
|
|
@@ -101,56 +102,68 @@ describe("Slider - editable", () => {
|
|
|
101
102
|
const handle = el.shadowRoot.querySelector(".handle");
|
|
102
103
|
el.track.setPointerCapture = (id) => pointerId = id;
|
|
103
104
|
el.track.releasePointerCapture = (id) => pointerId = id;
|
|
104
|
-
handle.dispatchEvent(
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
105
|
+
handle.dispatchEvent(
|
|
106
|
+
new PointerEvent("pointerdown", {
|
|
107
|
+
button: 1,
|
|
108
|
+
pointerId: 1,
|
|
109
|
+
cancelable: true,
|
|
110
|
+
bubbles: true,
|
|
111
|
+
composed: true
|
|
112
|
+
})
|
|
113
|
+
);
|
|
111
114
|
await elementUpdated(el);
|
|
112
115
|
expect(el.dragging).to.be.false;
|
|
113
116
|
expect(pointerId, "1").to.equal(-1);
|
|
114
|
-
handle.dispatchEvent(
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
117
|
+
handle.dispatchEvent(
|
|
118
|
+
new PointerEvent("pointerdown", {
|
|
119
|
+
button: 0,
|
|
120
|
+
pointerId: 1,
|
|
121
|
+
cancelable: true,
|
|
122
|
+
bubbles: true,
|
|
123
|
+
composed: true
|
|
124
|
+
})
|
|
125
|
+
);
|
|
121
126
|
await elementUpdated(el);
|
|
122
127
|
expect(el.dragging, "it is dragging 1").to.be.true;
|
|
123
128
|
expect(pointerId, "2").to.equal(1);
|
|
124
|
-
handle.dispatchEvent(
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
129
|
+
handle.dispatchEvent(
|
|
130
|
+
new PointerEvent("pointerup", {
|
|
131
|
+
pointerId: 2,
|
|
132
|
+
cancelable: true,
|
|
133
|
+
bubbles: true,
|
|
134
|
+
composed: true
|
|
135
|
+
})
|
|
136
|
+
);
|
|
130
137
|
await elementUpdated(el);
|
|
131
138
|
expect(el.dragging).to.be.false;
|
|
132
139
|
expect(el.highlight).to.be.false;
|
|
133
140
|
expect(pointerId, "3").to.equal(2);
|
|
134
|
-
handle.dispatchEvent(
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
+
handle.dispatchEvent(
|
|
142
|
+
new PointerEvent("pointerdown", {
|
|
143
|
+
button: 0,
|
|
144
|
+
pointerId: 1,
|
|
145
|
+
cancelable: true,
|
|
146
|
+
bubbles: true,
|
|
147
|
+
composed: true
|
|
148
|
+
})
|
|
149
|
+
);
|
|
141
150
|
await elementUpdated(el);
|
|
142
151
|
expect(el.dragging, "it is dragging 2").to.be.true;
|
|
143
152
|
expect(pointerId, "4").to.equal(1);
|
|
144
|
-
handle.dispatchEvent(
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
153
|
+
handle.dispatchEvent(
|
|
154
|
+
new PointerEvent("pointercancel", {
|
|
155
|
+
pointerId: 3,
|
|
156
|
+
cancelable: true,
|
|
157
|
+
bubbles: true,
|
|
158
|
+
composed: true
|
|
159
|
+
})
|
|
160
|
+
);
|
|
150
161
|
await elementUpdated(el);
|
|
151
162
|
expect(el.dragging).to.be.false;
|
|
152
163
|
expect(pointerId, "5").to.equal(3);
|
|
153
|
-
expect(el.shadowRoot.activeElement).to.equal(
|
|
164
|
+
expect(el.shadowRoot.activeElement).to.equal(
|
|
165
|
+
el.handleController.inputForHandle(el)
|
|
166
|
+
);
|
|
154
167
|
});
|
|
155
168
|
});
|
|
156
169
|
//# sourceMappingURL=slider-editable.test.js.map
|