@spectrum-web-components/slider 0.12.13 → 0.12.15-devmode.7

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.
Files changed (54) hide show
  1. package/README.md +16 -0
  2. package/custom-elements.json +40 -0
  3. package/package.json +41 -16
  4. package/sp-slider-handle.dev.js +3 -0
  5. package/sp-slider-handle.dev.js.map +7 -0
  6. package/sp-slider-handle.js +3 -14
  7. package/sp-slider-handle.js.map +7 -1
  8. package/sp-slider.dev.js +4 -0
  9. package/sp-slider.dev.js.map +7 -0
  10. package/sp-slider.js +4 -15
  11. package/sp-slider.js.map +7 -1
  12. package/src/HandleController.dev.js +434 -0
  13. package/src/HandleController.dev.js.map +7 -0
  14. package/src/HandleController.js +402 -451
  15. package/src/HandleController.js.map +7 -1
  16. package/src/Slider.d.ts +8 -0
  17. package/src/Slider.dev.js +367 -0
  18. package/src/Slider.dev.js.map +7 -0
  19. package/src/Slider.js +282 -289
  20. package/src/Slider.js.map +7 -1
  21. package/src/SliderHandle.dev.js +184 -0
  22. package/src/SliderHandle.dev.js.map +7 -0
  23. package/src/SliderHandle.js +171 -179
  24. package/src/SliderHandle.js.map +7 -1
  25. package/src/index.dev.js +4 -0
  26. package/src/index.dev.js.map +7 -0
  27. package/src/index.js +4 -15
  28. package/src/index.js.map +7 -1
  29. package/src/slider.css.dev.js +234 -0
  30. package/src/slider.css.dev.js.map +7 -0
  31. package/src/slider.css.js +3 -14
  32. package/src/slider.css.js.map +7 -1
  33. package/src/spectrum-slider.css.dev.js +216 -0
  34. package/src/spectrum-slider.css.dev.js.map +7 -0
  35. package/src/spectrum-slider.css.js +3 -14
  36. package/src/spectrum-slider.css.js.map +7 -1
  37. package/stories/slider.stories.js +257 -267
  38. package/stories/slider.stories.js.map +7 -1
  39. package/sync/sp-slider.dev.js +3 -0
  40. package/sync/sp-slider.dev.js.map +7 -0
  41. package/sync/sp-slider.js +3 -14
  42. package/sync/sp-slider.js.map +7 -1
  43. package/test/benchmark/test-basic.js +5 -16
  44. package/test/benchmark/test-basic.js.map +7 -1
  45. package/test/slider-editable-sync.test.js +132 -144
  46. package/test/slider-editable-sync.test.js.map +7 -1
  47. package/test/slider-editable.test.js +151 -144
  48. package/test/slider-editable.test.js.map +7 -1
  49. package/test/slider-handle-upgrade.test.js +10 -21
  50. package/test/slider-handle-upgrade.test.js.map +7 -1
  51. package/test/slider.test-vrt.js +4 -15
  52. package/test/slider.test-vrt.js.map +7 -1
  53. package/test/slider.test.js +686 -700
  54. package/test/slider.test.js.map +7 -1
@@ -1 +1,7 @@
1
- {"version":3,"file":"slider.stories.js","sourceRoot":"","sources":["slider.stories.ts"],"names":[],"mappings":"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","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 '../sp-slider.js';\nimport '../sp-slider-handle.js';\nimport { Slider, SliderHandle, variants } from '../';\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 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"]}
1
+ {
2
+ "version": 3,
3
+ "sources": ["slider.stories.ts"],
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;AAEA;AACA;AACA;AAAA;AAAA;AAKA;AAEA,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,IACN,SAAS,EAAE,QAAQ,QAAQ;AAAA,IAC3B,UAAU,EAAE,QAAQ,SAAS;AAAA,IAC7B,SAAS;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,SAAS;AAAA,QAC1B,cAAc,EAAE,SAAS,OAAU;AAAA,MACvC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,QAAW,GAAG,QAAQ;AAAA,MACpC;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,SAAS;AAAA,QAC1B,cAAc,EAAE,SAAS,IAAI;AAAA,MACjC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,IACA,iBAAiB;AAAA,MACb,MAAM;AAAA,MACN,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,wCAAwC;AAAA,QACzD,cAAc,EAAE,SAAS,OAAU;AAAA,MACvC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,EACJ;AAAA,EACA,MAAM;AAAA,IACF,SAAS;AAAA,IACT,UAAU;AAAA,IACV,iBAAiB;AAAA,EACrB;AACJ;AAWA,MAAM,cACF,CAAC,EAAE,SAAS,eACZ,CAAC,UAAuB;AACpB,QAAM,EAAE,UAAU,MAAM;AACxB,MAAI,WAAW,MAAM,SAAS,SAAS;AACnC,YAAQ,MAAM,SAAS,CAAC;AAAA,EAC5B,WAAW,YAAY,MAAM,SAAS,UAAU;AAC5C,aAAS,MAAM,SAAS,CAAC;AAAA,EAC7B;AACJ;AAEJ,MAAM,oBACF,CAAC,EAAE,SAAS,eACZ,CAAC,UAAuB;AACpB,QAAM,SAAS,MAAM;AACrB,MAAI,OAAO,SAAS,MAAM;AACtB,QAAI,OAAO,OAAO,UAAU,UAAU;AAClC,YAAM,QAAQ,KAAK,UAAU,OAAO,OAAO,MAAM,CAAC;AAClD,UAAI,WAAW,MAAM,SAAS,SAAS;AACnC,gBAAQ,KAAK;AAAA,MACjB,WAAW,YAAY,MAAM,SAAS,UAAU;AAC5C,iBAAS,KAAK;AAAA,MAClB;AAAA,IACJ,OAAO;AACH,YAAM,QAAQ,GAAG,OAAO,SAAS,OAAO;AACxC,UAAI,WAAW,MAAM,SAAS,SAAS;AACnC,gBAAQ,KAAK;AAAA,MACjB,WAAW,YAAY,MAAM,SAAS,UAAU;AAC5C,iBAAS,KAAK;AAAA,MAClB;AAAA,IACJ;AAAA,EACJ;AACJ;AAEG,aAAM,UAAU,CAAC,OAAkB,CAAC,MAAsB;AAC7D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAOc,YAAY,IAAI;AAAA,0BACf,YAAY,IAAI;AAAA,iCACT,EAAE,OAAO,UAAU;AAAA,sBAC9B,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMtC;AAEO,aAAM,qBAAqB,CAAC,OAAkB,CAAC,MAAsB;AACxE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAOc,YAAY,IAAI;AAAA,0BACf,YAAY,IAAI;AAAA,iCACT,EAAE,OAAO,UAAU;AAAA,sBAC9B,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMtC;AACA,mBAAmB,OAAO;AAAA,EACtB,iBAAiB;AACrB;AAEO,aAAM,sBAAsB,CAAC,OAAkB,CAAC,MAAsB;AACzE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAOc,YAAY,IAAI;AAAA,0BACf,YAAY,IAAI;AAAA,iCACT,EAAE,OAAO,UAAU;AAAA,sBAC9B,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMtC;AACA,oBAAoB,OAAO;AAAA,EACvB,iBAAiB;AACrB;AAEO,aAAM,kBAAkB,CAAC,OAAkB,CAAC,MAAsB;AACrE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAOc,YAAY,IAAI;AAAA,0BACf,YAAY,IAAI;AAAA,iCACT,EAAE,OAAO,UAAU;AAAA,sBAC9B,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMtC;AACA,gBAAgB,OAAO;AAAA,EACnB,iBAAiB;AACrB;AAEO,aAAM,KAAK,CAAC,OAAkB,CAAC,MAAsB;AACxD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAOc,YAAY,IAAI;AAAA,0BACf,YAAY,IAAI;AAAA,iCACT;AAAA,IACb,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,sBACM,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMtC;AAEA,MAAM,2BAA2B,YAAY;AAAA,EACzC,cAAc;AACV,UAAM;AAQF,oCAA6C,QAAQ,QAAQ,KAAK;AAPtE,SAAK,2BAA2B,IAAI,QAAQ,CAAC,QAAQ;AACjD,qBAAe,YAAY,iBAAiB,EAAE,KAAK,MAAM;AACrD,YAAI,IAAI;AAAA,MACZ,CAAC;AAAA,IACL,CAAC;AAAA,EACL;AAAA,MAII,iBAAmC;AACnC,WAAO,KAAK;AAAA,EAChB;AACJ;AAEA,eAAe,OAAO,wBAAwB,kBAAkB;AAEhE,MAAM,oBAAoB,CAAC,UAAgD;AACvE,SAAO;AAAA,UACD,MAAM;AAAA;AAAA;AAGhB;AAEO,aAAM,WAAW,CAAC,OAAkB,CAAC,MAAsB;AAC9D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAQc,YAAY,IAAI;AAAA,0BACf,YAAY,IAAI;AAAA,iCACT;AAAA,IACb,OAAO;AAAA,IACP,MAAM;AAAA,IACN,aAAa;AAAA,EACjB;AAAA,sBACM,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMtC;AAEA,SAAS,aAAa,CAAC,iBAAiB;AAEjC,aAAM,mBAAmB,CAAC,OAAkB,CAAC,MAAsB;AACtE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBASc,YAAY,IAAI;AAAA,0BACf,YAAY,IAAI;AAAA,iCACT;AAAA,IACb,OAAO;AAAA,IACP,MAAM;AAAA,IACN,aAAa;AAAA,EACjB;AAAA,sBACM,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMtC;AAEA,SAAS,aAAa,CAAC,iBAAiB;AAEjC,aAAM,iBAAiB,CAAC,OAAkB,CAAC,MAAsB;AACpE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAUc,YAAY,IAAI;AAAA,0BACf,YAAY,IAAI;AAAA,iCACT,EAAE,OAAO,QAAQ,MAAM,OAAO;AAAA,sBACzC,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMtC;AAEA,eAAe,aAAa,CAAC,iBAAiB;AAEvC,aAAM,cAAc,CAAC,OAAkB,CAAC,MAAsB;AACjE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBASc,YAAY,IAAI;AAAA,0BACf,YAAY,IAAI;AAAA,iCACT,EAAE,OAAO,UAAU;AAAA,sBAC9B,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMtC;AAEA,YAAY,aAAa,CAAC,iBAAiB;AAEpC,aAAM,WAAW,CAAC,OAAkB,CAAC,MAAsB;AAC9D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAec,YAAY,IAAI;AAAA,0BACf,YAAY,IAAI;AAAA,sBACpB,YAAY,IAAI;AAAA;AAAA;AAAA;AAItC;AACA,SAAS,OAAO;AAAA,EACZ,SAAS;AACb;AAEO,aAAM,OAAO,CAAC,OAAkB,CAAC,MAAsB;AAC1D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMO,YAAY,IAAI;AAAA;AAAA;AAGlC;AACA,KAAK,OAAO;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AACd;AAEO,aAAM,aAAa,CAAC,OAAkB,CAAC,MAAsB;AAChE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOO,YAAY,IAAI;AAAA;AAAA;AAGlC;AACA,WAAW,OAAO;AAAA,EACd,SAAS;AAAA,EACT,UAAU;AACd;AAEO,aAAM,WAAW,CAAC,OAAkB,CAAC,MAAsB;AAC9D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBASW,YAAY,IAAI;AAAA;AAAA;AAAA;AAItC;AAEO,aAAM,QAAQ,CAAC,OAAkB,CAAC,MAAsB;AAC3D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAWW,YAAY,IAAI;AAAA;AAAA;AAAA;AAItC;AAEO,aAAM,gBAAgB,CAAC,OAAkB,CAAC,MAAsB;AACnE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAUc,YAAY,IAAI;AAAA,0BACf,YAAY,IAAI;AAAA,sBACpB,YAAY,IAAI;AAAA;AAAA;AAAA;AAItC;AAEO,aAAM,iBAAiB,CAAC,OAAkB,CAAC,MAAsB;AACpE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMc,kBAAkB,IAAI;AAAA,0BACrB,kBAAkB,IAAI;AAAA,sBAC1B,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC;AAEO,aAAM,aAAa,CAAC,OAAkB,CAAC,MAAsB;AAChE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAOc,kBAAkB,IAAI;AAAA,0BACrB,kBAAkB,IAAI;AAAA,sBAC1B,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBtC;AACA,WAAW,OAAO;AAAA,EACd,SAAS;AAAA,EACT,UAAU;AACd;AAEO,aAAM,eAAe,CAAC,OAAkB,CAAC,MAAsB;AAClE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAOc,kBAAkB,IAAI;AAAA,0BACrB,kBAAkB,IAAI;AAAA,iCACf;AAAA,IACb,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,sBACM,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBtC;AACA,aAAa,OAAO;AAAA,EAChB,SAAS;AAAA,EACT,UAAU;AACd;AAEO,aAAM,iBAAiB,CAAC,OAAkB,CAAC,MAAsB;AACpE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAOc,kBAAkB,IAAI;AAAA,0BACrB,kBAAkB,IAAI;AAAA,iCACf;AAAA,IACb,OAAO;AAAA,IACP,MAAM;AAAA,EACV;AAAA,sBACM,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAStC;AAEO,aAAM,sBAAsB,CAAC,OAAkB,CAAC,MAAsB;AACzE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMc,kBAAkB,IAAI;AAAA,0BACrB,kBAAkB,IAAI;AAAA,sBAC1B,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBtC;AACA,oBAAoB,OAAO;AAAA,EACvB,UAAU;AACd;AA6BO,aAAM,sBAAsB,CAAC,OAAkB,CAAC,MAAsB;AACzE,QAAM,SAAoC;AAAA,IACtC,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,EACX;AACA,QAAM,eACF,CAAC,EAAE,SAAS,eACZ,CAAC,UAAuB;AACpB,UAAM,SAAS,MAAM;AACrB,QAAI,OAAO,SAAS,MAAM;AACtB,UAAI,OAAO,OAAO,UAAU,UAAU;AAClC,cAAM,QAAQ,KAAK,UAAU,OAAO,OAAO,MAAM,CAAC;AAClD,YAAI,WAAW,MAAM,SAAS,SAAS;AACnC,kBAAQ,KAAK;AAAA,QACjB,WAAW,YAAY,MAAM,SAAS,UAAU;AAC5C,mBAAS,KAAK;AAAA,QAClB;AAAA,MACJ,OAAO;AACH,cAAM,QAAQ,GAAG,OAAO,SAAS,OAAO;AACxC,YAAI,WAAW,MAAM,SAAS,SAAS;AACnC,kBAAQ,KAAK;AAAA,QACjB,WAAW,YAAY,MAAM,SAAS,UAAU;AAC5C,mBAAS,KAAK;AAAA,QAClB;AAAA,MACJ;AACA,aAAO,OAAO,QAAQ,OAAO;AAAA,IACjC;AAAA,EACJ;AACJ,QAAM,oBAAoB;AAAA,IACtB,aAAa,OAAe;AACxB,YAAM,kBAAkB,OAAO,QAAQ;AACvC,YAAM,kBAAkB,OAAO,QAAQ;AACvC,YAAM,UAAU,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC;AAC9C,aACI,UAAW,mBAAkB,mBAAmB;AAAA,IAExD;AAAA,IACA,eAAe,OAAe;AAC1B,YAAM,kBAAkB,OAAO,QAAQ;AACvC,YAAM,kBAAkB,OAAO,QAAQ;AACvC,YAAM,UAAU,KAAK,IACjB,KAAK,IAAI,OAAO,eAAe,GAC/B,eACJ;AAEA,aACK,WAAU,mBACV,mBAAkB;AAAA,IAE3B;AAAA,EACJ;AACA,QAAM,qBAAqB;AAAA,IACvB,aAAa,OAAe;AACxB,YAAM,UAAU,KAAK,IAAI,OAAO,OAAO,KAAK;AAC5C,aAAO,UAAU;AAAA,IACrB;AAAA,IACA,eAAe,OAAe;AAC1B,YAAM,eAAe,QAAQ;AAC7B,aAAO,KAAK,IAAI,cAAc,OAAO,KAAK;AAAA,IAC9C;AAAA,EACJ;AACA,QAAM,qBAAqB;AAAA,IACvB,aAAa,OAAe;AACxB,YAAM,UAAU,KAAK,IAAI,OAAO,OAAO,KAAK;AAC5C,aAAO,UAAU;AAAA,IACrB;AAAA,IACA,eAAe,OAAe;AAC1B,YAAM,eAAe,QAAQ;AAC7B,aAAO,KAAK,IAAI,cAAc,OAAO,KAAK;AAAA,IAC9C;AAAA,EACJ;AACA,QAAM,cAAc,CAAC,UAA0B;AAC3C,QAAI,SAAS;AACb,QAAI,QAAQ,KAAK;AACb,eAAS,KAAK,IAAI,IAAK,KAAI,QAAQ,IAAI;AAAA,IAC3C,WAAW,QAAQ,KAAK;AACpB,eAAW,MAAI,IAAI,SAAU,MAAK,KAAK,IAAI,IAAI,KAAK,MAAM;AAAA,IAC9D;AACA,UAAM,gBAAgB;AAAA,MAClB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,IAC3B;AACA,WAAO,IAAI,KAAK,aAAa,UAAU,UAAU,aAAa,EAAE,OAC5D,MACJ;AAAA,EACJ;AACA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMc;AAAA,0BACC;AAAA,sBACJ,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAMV,OAAO;AAAA,qCACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCASA;AAAA,yCACI;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKb,OAAO;AAAA,qCACE;AAAA;AAAA;AAAA;AAAA;AAKrC;AACA,oBAAoB,OAAO;AAAA,EACvB,UAAU;AACd;AAEO,aAAM,eAAe,CAAC,OAAkB,CAAC,MAAsB;AAClE,QAAM,QAAQ;AACd,QAAM,MAAM;AACZ,QAAM,MAAM;AACZ,QAAM,OAAO;AACb,SAAO;AAAA;AAAA;AAAA,yBAGc;AAAA,wBACD;AAAA,uBACD;AAAA,uBACA;AAAA;AAAA;AAAA,sBAGD,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKb;AAAA,wBACD;AAAA,uBACD;AAAA,uBACA;AAAA;AAAA;AAAA,sBAGD,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKb;AAAA,wBACD;AAAA,uBACD;AAAA,uBACA;AAAA;AAAA;AAAA,sBAGD,YAAY,IAAI;AAAA;AAAA;AAAA;AAItC;",
6
+ "names": []
7
+ }
@@ -0,0 +1,3 @@
1
+ import "@spectrum-web-components/number-field/sp-number-field.js";
2
+ import "../sp-slider.dev.js";
3
+ //# sourceMappingURL=sp-slider.dev.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["sp-slider.ts"],
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;AACA;",
6
+ "names": []
7
+ }
package/sync/sp-slider.js CHANGED
@@ -1,14 +1,3 @@
1
- /*
2
- Copyright 2020 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import '@spectrum-web-components/number-field/sp-number-field.js';
13
- import '../sp-slider.js';
14
- //# sourceMappingURL=sp-slider.js.map
1
+ import "@spectrum-web-components/number-field/sp-number-field.js";
2
+ import "../sp-slider.js";
3
+ //# sourceMappingURL=sp-slider.js.map
@@ -1 +1,7 @@
1
- {"version":3,"file":"sp-slider.js","sourceRoot":"","sources":["sp-slider.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,0DAA0D,CAAC;AAClE,OAAO,iBAAiB,CAAC","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"]}
1
+ {
2
+ "version": 3,
3
+ "sources": ["sp-slider.ts"],
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": "AAYA;AACA;",
6
+ "names": []
7
+ }
@@ -1,18 +1,7 @@
1
- /*
2
- Copyright 2020 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import '@spectrum-web-components/slider/sp-slider.js';
13
- import { html } from 'lit';
14
- import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
15
- measureFixtureCreation(html `
1
+ import "@spectrum-web-components/slider/sp-slider.js";
2
+ import { html } from "lit";
3
+ import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
4
+ measureFixtureCreation(html`
16
5
  <sp-slider
17
6
  value="50"
18
7
  step="1"
@@ -22,4 +11,4 @@ measureFixtureCreation(html `
22
11
  id="opacity-slider"
23
12
  ></sp-slider>
24
13
  `);
25
- //# sourceMappingURL=test-basic.js.map
14
+ //# sourceMappingURL=test-basic.js.map
@@ -1 +1,7 @@
1
- {"version":3,"file":"test-basic.js","sourceRoot":"","sources":["test-basic.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,8CAA8C,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAE/E,sBAAsB,CAAC,IAAI,CAAA;;;;;;;;;CAS1B,CAAC,CAAC","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"]}
1
+ {
2
+ "version": 3,
3
+ "sources": ["test-basic.ts"],
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;AACA;AACA;AAEA,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAStB;",
6
+ "names": []
7
+ }
@@ -1,147 +1,135 @@
1
- /*
2
- Copyright 2020 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import '../sync/sp-slider.js';
13
- import { editable, hideStepper } from '../stories/slider.stories.js';
14
- import { elementUpdated, expect, fixture } from '@open-wc/testing';
15
- import { sendKeys } from '@web/test-runner-commands';
16
- import { spy } from 'sinon';
1
+ import "@spectrum-web-components/slider/sync/sp-slider.js";
2
+ import { editable, hideStepper } from "../stories/slider.stories.js";
3
+ import { elementUpdated, expect, fixture } from "@open-wc/testing";
4
+ import { sendKeys } from "@web/test-runner-commands";
5
+ import { spy } from "sinon";
17
6
  async function sliderFromFixture(sliderFixture) {
18
- const el = await fixture(sliderFixture());
19
- const slider = el.querySelector('sp-slider');
20
- return slider;
7
+ const el = await fixture(sliderFixture());
8
+ const slider = el.querySelector("sp-slider");
9
+ return slider;
21
10
  }
22
- describe('Slider - editable, sync', () => {
23
- it('loads', async () => {
24
- const el = await sliderFromFixture(editable);
25
- await elementUpdated(el);
26
- await expect(el).to.be.accessible();
27
- });
28
- it('loads - [hide-stepper]', async () => {
29
- const el = await sliderFromFixture(hideStepper);
30
- await elementUpdated(el);
31
- await expect(el).to.be.accessible();
32
- });
33
- it('loads - [disabled]', async () => {
34
- const el = document.createElement('sp-slider');
35
- el.editable = true;
36
- el.disabled = true;
37
- el.label = 'Disabled, editable, slider';
38
- try {
39
- document.body.append(el);
40
- }
41
- catch (error) {
42
- expect(true).to.be.false;
43
- }
44
- await elementUpdated(el);
45
- await expect(el).to.be.accessible();
46
- el.remove();
47
- });
48
- it('focuses `<sp-number-field>` directly', async () => {
49
- const el = await sliderFromFixture(editable);
50
- await elementUpdated(el);
51
- el.focus();
52
- await elementUpdated(el);
53
- expect(el.shadowRoot.activeElement).to.equal(el.numberField);
54
- });
55
- it('edits via the `<sp-number-field>`', async () => {
56
- const inputSpy = spy();
57
- const changeSpy = spy();
58
- const el = await sliderFromFixture(editable);
59
- el.addEventListener('input', () => inputSpy());
60
- el.addEventListener('change', () => changeSpy());
61
- await elementUpdated(el);
62
- el.focus();
63
- await elementUpdated(el);
64
- expect(el.shadowRoot.activeElement).to.equal(el.numberField);
65
- expect(el.value).to.equal(90);
66
- await sendKeys({ press: 'Backspace' });
67
- await sendKeys({ press: 'Backspace' });
68
- await sendKeys({ press: 'Backspace' });
69
- await sendKeys({ type: '45' });
70
- await sendKeys({ press: 'Enter' });
71
- await elementUpdated(el);
72
- expect(el.shadowRoot.activeElement).to.equal(el.numberField);
73
- expect(el.value).to.equal(45);
74
- expect(inputSpy.callCount, 'one input').to.equal(1);
75
- expect(changeSpy.callCount, 'one change').to.equal(1);
76
- await sendKeys({ press: 'Backspace' });
77
- await sendKeys({ press: 'Backspace' });
78
- await sendKeys({ press: 'Backspace' });
79
- await sendKeys({ press: 'Enter' });
80
- expect(el.shadowRoot.activeElement).to.equal(el.numberField);
81
- expect(el.value).to.equal(45);
82
- expect(inputSpy.callCount, 'still one input').to.equal(1);
83
- expect(changeSpy.callCount, 'still one change').to.equal(1);
84
- });
85
- it('focuses `<input>` after pointer interactions', async () => {
86
- let pointerId = -1;
87
- const el = await sliderFromFixture(editable);
88
- await elementUpdated(el);
89
- expect(el.dragging).to.be.false;
90
- expect(el.highlight).to.be.false;
91
- expect(pointerId).to.equal(-1);
92
- const handle = el.shadowRoot.querySelector('.handle');
93
- el.track.setPointerCapture = (id) => (pointerId = id);
94
- el.track.releasePointerCapture = (id) => (pointerId = id);
95
- handle.dispatchEvent(new PointerEvent('pointerdown', {
96
- button: 1,
97
- pointerId: 1,
98
- cancelable: true,
99
- bubbles: true,
100
- composed: true,
101
- }));
102
- await elementUpdated(el);
103
- expect(el.dragging).to.be.false;
104
- expect(pointerId, '1').to.equal(-1);
105
- handle.dispatchEvent(new PointerEvent('pointerdown', {
106
- button: 0,
107
- pointerId: 1,
108
- cancelable: true,
109
- bubbles: true,
110
- composed: true,
111
- }));
112
- await elementUpdated(el);
113
- expect(el.dragging, 'it is dragging 1').to.be.true;
114
- expect(pointerId, '2').to.equal(1);
115
- handle.dispatchEvent(new PointerEvent('pointerup', {
116
- pointerId: 2,
117
- cancelable: true,
118
- bubbles: true,
119
- composed: true,
120
- }));
121
- await elementUpdated(el);
122
- expect(el.dragging).to.be.false;
123
- expect(el.highlight).to.be.false;
124
- expect(pointerId, '3').to.equal(2);
125
- handle.dispatchEvent(new PointerEvent('pointerdown', {
126
- button: 0,
127
- pointerId: 1,
128
- cancelable: true,
129
- bubbles: true,
130
- composed: true,
131
- }));
132
- await elementUpdated(el);
133
- expect(el.dragging, 'it is dragging 2').to.be.true;
134
- expect(pointerId, '4').to.equal(1);
135
- handle.dispatchEvent(new PointerEvent('pointercancel', {
136
- pointerId: 3,
137
- cancelable: true,
138
- bubbles: true,
139
- composed: true,
140
- }));
141
- await elementUpdated(el);
142
- expect(el.dragging).to.be.false;
143
- expect(pointerId, '5').to.equal(3);
144
- expect(el.shadowRoot.activeElement).to.equal(el.handleController.inputForHandle(el));
145
- });
11
+ describe("Slider - editable, sync", () => {
12
+ it("loads", async () => {
13
+ const el = await sliderFromFixture(editable);
14
+ await elementUpdated(el);
15
+ await expect(el).to.be.accessible();
16
+ });
17
+ it("loads - [hide-stepper]", async () => {
18
+ const el = await sliderFromFixture(hideStepper);
19
+ await elementUpdated(el);
20
+ await expect(el).to.be.accessible();
21
+ });
22
+ it("loads - [disabled]", async () => {
23
+ const el = document.createElement("sp-slider");
24
+ el.editable = true;
25
+ el.disabled = true;
26
+ el.label = "Disabled, editable, slider";
27
+ try {
28
+ document.body.append(el);
29
+ } catch (error) {
30
+ expect(true).to.be.false;
31
+ }
32
+ await elementUpdated(el);
33
+ await expect(el).to.be.accessible();
34
+ el.remove();
35
+ });
36
+ it("focuses `<sp-number-field>` directly", async () => {
37
+ const el = await sliderFromFixture(editable);
38
+ await elementUpdated(el);
39
+ el.focus();
40
+ await elementUpdated(el);
41
+ expect(el.shadowRoot.activeElement).to.equal(el.numberField);
42
+ });
43
+ it("edits via the `<sp-number-field>`", async () => {
44
+ const inputSpy = spy();
45
+ const changeSpy = spy();
46
+ const el = await sliderFromFixture(editable);
47
+ el.addEventListener("input", () => inputSpy());
48
+ el.addEventListener("change", () => changeSpy());
49
+ await elementUpdated(el);
50
+ el.focus();
51
+ await elementUpdated(el);
52
+ expect(el.shadowRoot.activeElement).to.equal(el.numberField);
53
+ expect(el.value).to.equal(90);
54
+ await sendKeys({ press: "Backspace" });
55
+ await sendKeys({ press: "Backspace" });
56
+ await sendKeys({ press: "Backspace" });
57
+ await sendKeys({ type: "45" });
58
+ await sendKeys({ press: "Enter" });
59
+ await elementUpdated(el);
60
+ expect(el.shadowRoot.activeElement).to.equal(el.numberField);
61
+ expect(el.value).to.equal(45);
62
+ expect(inputSpy.callCount, "one input").to.equal(1);
63
+ expect(changeSpy.callCount, "one change").to.equal(1);
64
+ await sendKeys({ press: "Backspace" });
65
+ await sendKeys({ press: "Backspace" });
66
+ await sendKeys({ press: "Backspace" });
67
+ await sendKeys({ press: "Enter" });
68
+ expect(el.shadowRoot.activeElement).to.equal(el.numberField);
69
+ expect(el.value).to.equal(45);
70
+ expect(inputSpy.callCount, "still one input").to.equal(1);
71
+ expect(changeSpy.callCount, "still one change").to.equal(1);
72
+ });
73
+ it("focuses `<input>` after pointer interactions", async () => {
74
+ let pointerId = -1;
75
+ const el = await sliderFromFixture(editable);
76
+ await elementUpdated(el);
77
+ expect(el.dragging).to.be.false;
78
+ expect(el.highlight).to.be.false;
79
+ expect(pointerId).to.equal(-1);
80
+ const handle = el.shadowRoot.querySelector(".handle");
81
+ el.track.setPointerCapture = (id) => pointerId = id;
82
+ el.track.releasePointerCapture = (id) => pointerId = id;
83
+ handle.dispatchEvent(new PointerEvent("pointerdown", {
84
+ button: 1,
85
+ pointerId: 1,
86
+ cancelable: true,
87
+ bubbles: true,
88
+ composed: true
89
+ }));
90
+ await elementUpdated(el);
91
+ expect(el.dragging).to.be.false;
92
+ expect(pointerId, "1").to.equal(-1);
93
+ handle.dispatchEvent(new PointerEvent("pointerdown", {
94
+ button: 0,
95
+ pointerId: 1,
96
+ cancelable: true,
97
+ bubbles: true,
98
+ composed: true
99
+ }));
100
+ await elementUpdated(el);
101
+ expect(el.dragging, "it is dragging 1").to.be.true;
102
+ expect(pointerId, "2").to.equal(1);
103
+ handle.dispatchEvent(new PointerEvent("pointerup", {
104
+ pointerId: 2,
105
+ cancelable: true,
106
+ bubbles: true,
107
+ composed: true
108
+ }));
109
+ await elementUpdated(el);
110
+ expect(el.dragging).to.be.false;
111
+ expect(el.highlight).to.be.false;
112
+ expect(pointerId, "3").to.equal(2);
113
+ handle.dispatchEvent(new PointerEvent("pointerdown", {
114
+ button: 0,
115
+ pointerId: 1,
116
+ cancelable: true,
117
+ bubbles: true,
118
+ composed: true
119
+ }));
120
+ await elementUpdated(el);
121
+ expect(el.dragging, "it is dragging 2").to.be.true;
122
+ expect(pointerId, "4").to.equal(1);
123
+ handle.dispatchEvent(new PointerEvent("pointercancel", {
124
+ pointerId: 3,
125
+ cancelable: true,
126
+ bubbles: true,
127
+ composed: true
128
+ }));
129
+ await elementUpdated(el);
130
+ expect(el.dragging).to.be.false;
131
+ expect(pointerId, "5").to.equal(3);
132
+ expect(el.shadowRoot.activeElement).to.equal(el.handleController.inputForHandle(el));
133
+ });
146
134
  });
147
- //# sourceMappingURL=slider-editable-sync.test.js.map
135
+ //# sourceMappingURL=slider-editable-sync.test.js.map