@spectrum-web-components/slider 0.11.0 → 0.12.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.
Files changed (18) hide show
  1. package/custom-elements.json +106 -49
  2. package/package.json +8 -8
  3. package/src/HandleController.d.ts +19 -9
  4. package/src/HandleController.js +56 -40
  5. package/src/HandleController.js.map +1 -1
  6. package/src/Slider.d.ts +4 -6
  7. package/src/Slider.js +23 -15
  8. package/src/Slider.js.map +1 -1
  9. package/src/SliderHandle.d.ts +4 -1
  10. package/src/SliderHandle.js +4 -1
  11. package/src/SliderHandle.js.map +1 -1
  12. package/src/slider.css.js +6 -6
  13. package/src/slider.css.js.map +1 -1
  14. package/src/spectrum-config.js +1 -1
  15. package/src/spectrum-slider.css.js +3 -3
  16. package/src/spectrum-slider.css.js.map +1 -1
  17. package/stories/slider.stories.js +1 -1
  18. package/stories/slider.stories.js.map +1 -1
package/src/SliderHandle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SliderHandle.js","sourceRoot":"","sources":["SliderHandle.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2021 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 { property, PropertyValues } from '@spectrum-web-components/base';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport { ProvideLang } from '@spectrum-web-components/theme';\nimport {\n NumberFormatter,\n NumberFormatOptions,\n} from '@internationalized/number';\n\nexport type HandleMin = number | 'previous';\nexport type HandleMax = number | 'next';\n\nexport type HandleValues = {\n name: string;\n value: number;\n}[];\n\nexport interface Controller {\n inputForHandle(handle: SliderHandle): HTMLInputElement | undefined;\n requestUpdate(): void;\n setValueFromHandle(handle: SliderHandle): void;\n handleHasChanged(handle: SliderHandle): void;\n}\n\nexport type SliderNormalization = {\n toNormalized: (value: number, min: number, max: number) => number;\n fromNormalized: (value: number, min: number, max: number) => number;\n};\n\nexport const defaultNormalization: SliderNormalization = {\n toNormalized(value: number, min: number, max: number) {\n return (value - min) / (max - min);\n },\n fromNormalized(value: number, min: number, max: number) {\n return value * (max - min) + min;\n },\n};\n\nconst MinConverter = {\n fromAttribute: (value: string): number | 'previous' => {\n if (value === 'previous') return value;\n return parseFloat(value);\n },\n toAttribute: (value: 'previous' | number): string => {\n return value.toString();\n },\n};\n\nconst MaxConverter = {\n fromAttribute: (value: string): number | 'next' => {\n if (value === 'next') return value;\n return parseFloat(value);\n },\n toAttribute: (value: 'next' | number): string => {\n return value.toString();\n },\n};\n\n/**\n * @element sp-slider-handle\n */\nexport class SliderHandle extends Focusable {\n public handleController?: Controller;\n\n public get handleName(): string {\n return this.name;\n }\n\n public get focusElement(): HTMLElement {\n /* c8 ignore next */\n return this.handleController?.inputForHandle(this) ?? this;\n }\n\n _forcedUnit = '';\n\n @property({ type: Number })\n value = 10;\n\n @property({ type: Boolean, reflect: true })\n public dragging = false;\n\n @property({ type: Boolean })\n public highlight = false;\n\n @property({ type: String })\n public name = '';\n\n @property({ reflect: true, converter: MinConverter })\n public min?: number | 'previous';\n\n @property({ reflect: true, converter: MaxConverter })\n public max?: number | 'next';\n\n @property({ attribute: false })\n private resolvedLanguage =\n document.documentElement.lang || navigator.language;\n\n @property({ type: Number, reflect: true })\n public step?: number;\n\n @property({ type: Object, attribute: 'format-options' })\n public formatOptions?: NumberFormatOptions;\n\n @property({ type: String })\n public label = '';\n\n @property({ attribute: false })\n public getAriaHandleText: (\n value: number,\n numberFormat: NumberFormatter\n ) => string = (value, numberFormat) => {\n return numberFormat.format(value);\n };\n\n protected update(changes: PropertyValues): void {\n if (changes.has('formatOptions') || changes.has('resolvedLanguage')) {\n delete this._numberFormatCache;\n }\n super.update(changes);\n }\n\n protected updated(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has('value')) {\n const oldValue = changedProperties.get('value');\n if (oldValue != null) {\n this.handleController /* c8 ignore next */\n ?.setValueFromHandle(this);\n }\n }\n this.handleController?.handleHasChanged(this);\n super.updated(changedProperties);\n }\n\n @property({ attribute: false })\n public normalization: SliderNormalization = defaultNormalization;\n\n public dispatchInputEvent(): void {\n const inputEvent = new Event('input', {\n bubbles: true,\n composed: true,\n });\n\n this.dispatchEvent(inputEvent);\n }\n\n protected _numberFormatCache:\n | { numberFormat: NumberFormatter; language: string }\n | undefined;\n protected getNumberFormat(): Intl.NumberFormat {\n /* c8 ignore next */\n if (\n !this._numberFormatCache ||\n this.resolvedLanguage !== this._numberFormatCache.language\n ) {\n let numberFormatter: NumberFormatter;\n try {\n numberFormatter = new NumberFormatter(\n this.resolvedLanguage,\n this.formatOptions\n );\n this._forcedUnit = '';\n // numberFormatter.format(1);\n } catch (error) {\n const {\n style,\n unit,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n unitDisplay,\n ...formatOptionsNoUnit\n } = this.formatOptions || {};\n if (style === 'unit') {\n this._forcedUnit = unit as string;\n }\n numberFormatter = new NumberFormatter(\n this.resolvedLanguage,\n formatOptionsNoUnit\n );\n }\n this._numberFormatCache = {\n language: this.resolvedLanguage,\n numberFormat: numberFormatter,\n };\n }\n /* c8 ignore next */\n return this._numberFormatCache?.numberFormat;\n }\n\n public get numberFormat(): NumberFormatter | undefined {\n if (!this.formatOptions) return;\n return this.getNumberFormat();\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n this.resolveLanguage();\n }\n\n public disconnectedCallback(): void {\n this.resolveLanguage();\n super.disconnectedCallback();\n }\n\n private resolveLanguage(): void {\n const queryThemeEvent = new CustomEvent<ProvideLang>(\n 'sp-language-context',\n {\n bubbles: true,\n composed: true,\n detail: {\n callback: (lang: string) => {\n this.resolvedLanguage = lang;\n },\n },\n cancelable: true,\n }\n );\n this.dispatchEvent(queryThemeEvent);\n }\n}\n"]}
1
+ {"version":3,"file":"SliderHandle.js","sourceRoot":"","sources":["SliderHandle.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2021 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 { PropertyValues } from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport { ProvideLang } from '@spectrum-web-components/theme';\nimport {\n NumberFormatOptions,\n NumberFormatter,\n} from '@internationalized/number';\n\nexport type HandleMin = number | 'previous';\nexport type HandleMax = number | 'next';\n\nexport type HandleValues = {\n name: string;\n value: number;\n}[];\n\nexport interface Controller {\n inputForHandle(handle: SliderHandle): HTMLInputElement | undefined;\n requestUpdate(): void;\n setValueFromHandle(handle: SliderHandle): void;\n handleHasChanged(handle: SliderHandle): void;\n}\n\nexport type SliderNormalization = {\n toNormalized: (value: number, min: number, max: number) => number;\n fromNormalized: (value: number, min: number, max: number) => number;\n};\n\nexport const defaultNormalization: SliderNormalization = {\n toNormalized(value: number, min: number, max: number) {\n return (value - min) / (max - min);\n },\n fromNormalized(value: number, min: number, max: number) {\n return value * (max - min) + min;\n },\n};\n\nconst MinConverter = {\n fromAttribute: (value: string): number | 'previous' => {\n if (value === 'previous') return value;\n return parseFloat(value);\n },\n toAttribute: (value: 'previous' | number): string => {\n return value.toString();\n },\n};\n\nconst MaxConverter = {\n fromAttribute: (value: string): number | 'next' => {\n if (value === 'next') return value;\n return parseFloat(value);\n },\n toAttribute: (value: 'next' | number): string => {\n return value.toString();\n },\n};\n\n/**\n * @element sp-slider-handle\n *\n * @fires input - The value of the element has changed.\n * @fires change - An alteration to the value of the element has been committed by the user.\n */\nexport class SliderHandle extends Focusable {\n public handleController?: Controller;\n\n public get handleName(): string {\n return this.name;\n }\n\n public get focusElement(): HTMLElement {\n /* c8 ignore next */\n return this.handleController?.inputForHandle(this) ?? this;\n }\n\n _forcedUnit = '';\n\n @property({ type: Number })\n value = 10;\n\n @property({ type: Boolean, reflect: true })\n public dragging = false;\n\n @property({ type: Boolean })\n public highlight = false;\n\n @property({ type: String })\n public name = '';\n\n @property({ reflect: true, converter: MinConverter })\n public min?: number | 'previous';\n\n @property({ reflect: true, converter: MaxConverter })\n public max?: number | 'next';\n\n @property({ attribute: false })\n private resolvedLanguage =\n document.documentElement.lang || navigator.language;\n\n @property({ type: Number, reflect: true })\n public step?: number;\n\n @property({ type: Object, attribute: 'format-options' })\n public formatOptions?: NumberFormatOptions;\n\n @property({ type: String })\n public label = '';\n\n @property({ attribute: false })\n public getAriaHandleText: (\n value: number,\n numberFormat: NumberFormatter\n ) => string = (value, numberFormat) => {\n return numberFormat.format(value);\n };\n\n protected update(changes: PropertyValues): void {\n if (changes.has('formatOptions') || changes.has('resolvedLanguage')) {\n delete this._numberFormatCache;\n }\n super.update(changes);\n }\n\n protected updated(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has('value')) {\n const oldValue = changedProperties.get('value');\n if (oldValue != null) {\n this.handleController /* c8 ignore next */\n ?.setValueFromHandle(this);\n }\n }\n this.handleController?.handleHasChanged(this);\n super.updated(changedProperties);\n }\n\n @property({ attribute: false })\n public normalization: SliderNormalization = defaultNormalization;\n\n public dispatchInputEvent(): void {\n const inputEvent = new Event('input', {\n bubbles: true,\n composed: true,\n });\n\n this.dispatchEvent(inputEvent);\n }\n\n protected _numberFormatCache:\n | { numberFormat: NumberFormatter; language: string }\n | undefined;\n protected getNumberFormat(): Intl.NumberFormat {\n /* c8 ignore next */\n if (\n !this._numberFormatCache ||\n this.resolvedLanguage !== this._numberFormatCache.language\n ) {\n let numberFormatter: NumberFormatter;\n try {\n numberFormatter = new NumberFormatter(\n this.resolvedLanguage,\n this.formatOptions\n );\n this._forcedUnit = '';\n // numberFormatter.format(1);\n } catch (error) {\n const {\n style,\n unit,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n unitDisplay,\n ...formatOptionsNoUnit\n } = this.formatOptions || {};\n if (style === 'unit') {\n this._forcedUnit = unit as string;\n }\n numberFormatter = new NumberFormatter(\n this.resolvedLanguage,\n formatOptionsNoUnit\n );\n }\n this._numberFormatCache = {\n language: this.resolvedLanguage,\n numberFormat: numberFormatter,\n };\n }\n /* c8 ignore next */\n return this._numberFormatCache?.numberFormat;\n }\n\n public get numberFormat(): NumberFormatter | undefined {\n if (!this.formatOptions) return;\n return this.getNumberFormat();\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n this.resolveLanguage();\n }\n\n public disconnectedCallback(): void {\n this.resolveLanguage();\n super.disconnectedCallback();\n }\n\n private resolveLanguage(): void {\n const queryThemeEvent = new CustomEvent<ProvideLang>(\n 'sp-language-context',\n {\n bubbles: true,\n composed: true,\n detail: {\n callback: (lang: string) => {\n this.resolvedLanguage = lang;\n },\n },\n cancelable: true,\n }\n );\n this.dispatchEvent(queryThemeEvent);\n }\n}\n"]}
package/src/slider.css.js CHANGED
@@ -115,7 +115,7 @@ var(--spectrum-global-dimension-static-size-25)
115
115
  --spectrum-slider-input-left
116
116
  )}:host([dir=rtl]) .input{right:var(
117
117
  --spectrum-slider-input-left
118
- )}.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}#labelContainer{display:flex;font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height);margin-bottom:var(--spectrum-slide-label-margin-bottom);padding-top:var(
118
+ )}.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(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height);margin-bottom:var(--spectrum-slide-label-margin-bottom);padding-top:var(
119
119
  --spectrum-fieldlabel-m-padding-top,var(--spectrum-global-dimension-size-50)
120
120
  );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(
121
121
  --spectrum-slider-label-gap-x
@@ -133,7 +133,7 @@ var(--spectrum-global-dimension-static-size-25)
133
133
  --spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500)
134
134
  )}.track:before{background:var(
135
135
  --spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400)
136
- )}#labelContainer{color:var(
136
+ )}#label-container{color:var(
137
137
  --spectrum-slider-m-label-text-color
138
138
  )}:host([variant=filled]) .track:first-child:before{background:var(
139
139
  --spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)
@@ -163,7 +163,7 @@ var(--spectrum-global-dimension-static-size-25)
163
163
  --spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800)
164
164
  )}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(
165
165
  --spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)
166
- )}:host([disabled]) #labelContainer{color:var(
166
+ )}:host([disabled]) #label-container{color:var(
167
167
  --spectrum-slider-m-label-text-color-disabled
168
168
  )}:host([disabled]) .handle{background:var(
169
169
  --spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100)
@@ -187,17 +187,17 @@ var(--spectrum-global-dimension-static-size-25)
187
187
  --spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)
188
188
  );--spectrum-slider-handle-default-border-color:var(
189
189
  --spectrum-slider-m-handle-border-color,var(--spectrum-global-color-gray-700)
190
- )}sp-field-label{padding-bottom:0;padding-top:0}:host(:focus){outline:0}:host([editable]){display:grid;grid-template-areas:"label ." "slider number";grid-template-columns:1fr auto}:host([editable]) #labelContainer{grid-area:label}:host([editable]) #labelContainer+div{grid-area:slider}:host([editable]) sp-number-field{--spectrum-stepper-width:var(
190
+ )}sp-field-label{padding-bottom:0;padding-top:0}:host(:focus){outline:0}:host([editable]){display:grid;grid-template-areas:"label ." "slider number";grid-template-columns:1fr auto}:host([editable]) #label-container{grid-area:label}:host([editable]) #label-container+div{grid-area:slider}:host([editable]) sp-number-field{--spectrum-stepper-width:var(
191
191
  --spectrum-slider-editable-number-field-width,var(--spectrum-global-dimension-size-1000)
192
192
  );grid-area:number}:host([hide-stepper]) sp-number-field{--spectrum-stepper-width:var(
193
193
  --spectrum-slider-editable-number-field-width,var(--spectrum-global-dimension-size-900)
194
- )}:host([editable][dir=ltr]) sp-number-field{margin-left:var(--spectrum-global-dimension-size-200)}:host([editable][dir=rtl]) sp-number-field{margin-right:var(--spectrum-global-dimension-size-200)}:host([editable]) output{opacity:0}:host([disabled]){pointer-events:none}.track{touch-action:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) .track:before{background:var(
194
+ )}:host([editable][dir=ltr]) sp-number-field{margin-left:var(--spectrum-global-dimension-size-200)}:host([editable][dir=rtl]) sp-number-field{margin-right:var(--spectrum-global-dimension-size-200)}:host([editable]) output{opacity:0}:host([disabled]){pointer-events:none}#track,:host([dragging]){touch-action:pan-x;-webkit-user-select:none;user-select:none}.handle{pointer-events:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) .track:before{background:var(
195
195
  --spectrum-slider-track-color,var(--spectrum-global-color-gray-300)
196
196
  )}:host([dir=rtl]) .track:before{background:var(
197
197
  --spectrum-slider-track-color-rtl,var(
198
198
  --spectrum-slider-track-color,var(--spectrum-global-color-gray-300)
199
199
  )
200
- )}:host([dir=ltr]) .track:last-of-type:before{background-position:100%}:host([dir=rtl]) .track:first-of-type:before{background-position:100%}.track:not(:first-of-type):not(:last-of-type){padding-left:calc(var(--spectrum-slider-handle-width)/2 + var(--spectrum-slider-track-handleoffset))!important;padding-right:calc(var(--spectrum-slider-handle-width)/2 + var(--spectrum-slider-track-handleoffset))!important}:host([dir=ltr][variant=range]) .track,:host([dir=rtl][variant=range]) .track{margin:var(--spectrum-slider-range-track-reset);margin-top:calc(var(--spectrum-slider-track-height)/-2)}:host([dir=ltr]) .track:not(:first-of-type):not(:last-of-type){left:var(--spectrum-slider-track-segment-position)}:host([dir=rtl]) .track:not(:first-of-type):not(:last-of-type){right:var(--spectrum-slider-track-segment-position)}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([label-visibility=value][dir=ltr]) #value{margin-left:auto}:host([label-visibility=value][dir=rtl]) #value{margin-right:auto}:host([label-visibility=none]) #labelContainer{margin:0;padding:0}
200
+ )}:host([dir=ltr]) .track:last-of-type:before{background-position:100%}:host([dir=rtl]) .track:first-of-type:before{background-position:100%}.track:not(:first-of-type):not(:last-of-type){padding-left:calc(var(--spectrum-slider-handle-width)/2 + var(--spectrum-slider-track-handleoffset))!important;padding-right:calc(var(--spectrum-slider-handle-width)/2 + var(--spectrum-slider-track-handleoffset))!important}:host([dir=ltr][variant=range]) .track,:host([dir=rtl][variant=range]) .track{margin:var(--spectrum-slider-range-track-reset);margin-top:calc(var(--spectrum-slider-track-height)/-2)}:host([dir=ltr]) .track:not(:first-of-type):not(:last-of-type){left:var(--spectrum-slider-track-segment-position)}:host([dir=rtl]) .track:not(:first-of-type):not(:last-of-type){right:var(--spectrum-slider-track-segment-position)}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([label-visibility=value][dir=ltr]) #value{margin-left:auto}:host([label-visibility=value][dir=rtl]) #value{margin-right:auto}:host([label-visibility=none]) #label-container{margin:0;padding:0}
201
201
  `;
202
202
  export default styles;
203
203
  //# sourceMappingURL=slider.css.js.map
package/src/slider.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"slider.css.js","sourceRoot":"","sources":["slider.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4LjB,CAAC;AACF,eAAe,MAAM,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*/\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-slide-label-text-size:var(\n--spectrum-global-dimension-font-size-75\n);--spectrum-slide-label-text-line-height:var(\n--spectrum-global-font-line-height-small,1.3\n);--spectrum-slide-label-margin-bottom:-3px;--spectrum-slider-label-gap-x:var(\n--spectrum-alias-item-control-gap-m,var(--spectrum-global-dimension-size-125)\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}#fill:before,.track:before{border-radius:var(--spectrum-slider-track-border-radius);content:\"\";display:block;height:100%}: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([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([variant=range]) #value{-webkit-user-select:text;user-select:text}: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([variant=range]) .track:first-of-type{padding-bottom:0;padding-top: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{padding-bottom:0;padding-left:var(--spectrum-slider-track-middle-handleoffset);padding-right:var(--spectrum-slider-track-middle-handleoffset);padding-top:0}: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([variant=range]) .track:last-of-type{padding-bottom:0;padding-top: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}#labelContainer{display:flex;font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height);margin-bottom:var(--spectrum-slide-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) + var(--spectrum-slider-track-height)/2);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(--spectrum-slide-label-text-size);justify-content:center;line-height:var(--spectrum-slide-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)}#labelContainer{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 4px 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]) #labelContainer{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)}:host{--spectrum-slider-handle-default-background-color:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);--spectrum-slider-handle-default-border-color:var(\n--spectrum-slider-m-handle-border-color,var(--spectrum-global-color-gray-700)\n)}sp-field-label{padding-bottom:0;padding-top:0}:host(:focus){outline:0}:host([editable]){display:grid;grid-template-areas:\"label .\" \"slider number\";grid-template-columns:1fr auto}:host([editable]) #labelContainer{grid-area:label}:host([editable]) #labelContainer+div{grid-area:slider}:host([editable]) sp-number-field{--spectrum-stepper-width:var(\n--spectrum-slider-editable-number-field-width,var(--spectrum-global-dimension-size-1000)\n);grid-area:number}:host([hide-stepper]) sp-number-field{--spectrum-stepper-width:var(\n--spectrum-slider-editable-number-field-width,var(--spectrum-global-dimension-size-900)\n)}:host([editable][dir=ltr]) sp-number-field{margin-left:var(--spectrum-global-dimension-size-200)}:host([editable][dir=rtl]) sp-number-field{margin-right:var(--spectrum-global-dimension-size-200)}:host([editable]) output{opacity:0}:host([disabled]){pointer-events:none}.track{touch-action:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) .track:before{background:var(\n--spectrum-slider-track-color,var(--spectrum-global-color-gray-300)\n)}:host([dir=rtl]) .track:before{background:var(\n--spectrum-slider-track-color-rtl,var(\n--spectrum-slider-track-color,var(--spectrum-global-color-gray-300)\n)\n)}:host([dir=ltr]) .track:last-of-type:before{background-position:100%}:host([dir=rtl]) .track:first-of-type:before{background-position:100%}.track:not(:first-of-type):not(:last-of-type){padding-left:calc(var(--spectrum-slider-handle-width)/2 + var(--spectrum-slider-track-handleoffset))!important;padding-right:calc(var(--spectrum-slider-handle-width)/2 + var(--spectrum-slider-track-handleoffset))!important}:host([dir=ltr][variant=range]) .track,:host([dir=rtl][variant=range]) .track{margin:var(--spectrum-slider-range-track-reset);margin-top:calc(var(--spectrum-slider-track-height)/-2)}:host([dir=ltr]) .track:not(:first-of-type):not(:last-of-type){left:var(--spectrum-slider-track-segment-position)}:host([dir=rtl]) .track:not(:first-of-type):not(:last-of-type){right:var(--spectrum-slider-track-segment-position)}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([label-visibility=value][dir=ltr]) #value{margin-left:auto}:host([label-visibility=value][dir=rtl]) #value{margin-right:auto}:host([label-visibility=none]) #labelContainer{margin:0;padding:0}\n`;\nexport default styles;"]}
1
+ {"version":3,"file":"slider.css.js","sourceRoot":"","sources":["slider.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4LjB,CAAC;AACF,eAAe,MAAM,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*/\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-slide-label-text-size:var(\n--spectrum-global-dimension-font-size-75\n);--spectrum-slide-label-text-line-height:var(\n--spectrum-global-font-line-height-small,1.3\n);--spectrum-slide-label-margin-bottom:-3px;--spectrum-slider-label-gap-x:var(\n--spectrum-alias-item-control-gap-m,var(--spectrum-global-dimension-size-125)\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}#fill:before,.track:before{border-radius:var(--spectrum-slider-track-border-radius);content:\"\";display:block;height:100%}: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([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([variant=range]) #value{-webkit-user-select:text;user-select:text}: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([variant=range]) .track:first-of-type{padding-bottom:0;padding-top: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{padding-bottom:0;padding-left:var(--spectrum-slider-track-middle-handleoffset);padding-right:var(--spectrum-slider-track-middle-handleoffset);padding-top:0}: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([variant=range]) .track:last-of-type{padding-bottom:0;padding-top: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(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height);margin-bottom:var(--spectrum-slide-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) + var(--spectrum-slider-track-height)/2);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(--spectrum-slide-label-text-size);justify-content:center;line-height:var(--spectrum-slide-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 4px 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)}:host{--spectrum-slider-handle-default-background-color:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);--spectrum-slider-handle-default-border-color:var(\n--spectrum-slider-m-handle-border-color,var(--spectrum-global-color-gray-700)\n)}sp-field-label{padding-bottom:0;padding-top:0}:host(:focus){outline:0}:host([editable]){display:grid;grid-template-areas:\"label .\" \"slider number\";grid-template-columns:1fr auto}:host([editable]) #label-container{grid-area:label}:host([editable]) #label-container+div{grid-area:slider}:host([editable]) sp-number-field{--spectrum-stepper-width:var(\n--spectrum-slider-editable-number-field-width,var(--spectrum-global-dimension-size-1000)\n);grid-area:number}:host([hide-stepper]) sp-number-field{--spectrum-stepper-width:var(\n--spectrum-slider-editable-number-field-width,var(--spectrum-global-dimension-size-900)\n)}:host([editable][dir=ltr]) sp-number-field{margin-left:var(--spectrum-global-dimension-size-200)}:host([editable][dir=rtl]) sp-number-field{margin-right:var(--spectrum-global-dimension-size-200)}:host([editable]) output{opacity:0}:host([disabled]){pointer-events:none}#track,:host([dragging]){touch-action:pan-x;-webkit-user-select:none;user-select:none}.handle{pointer-events:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) .track:before{background:var(\n--spectrum-slider-track-color,var(--spectrum-global-color-gray-300)\n)}:host([dir=rtl]) .track:before{background:var(\n--spectrum-slider-track-color-rtl,var(\n--spectrum-slider-track-color,var(--spectrum-global-color-gray-300)\n)\n)}:host([dir=ltr]) .track:last-of-type:before{background-position:100%}:host([dir=rtl]) .track:first-of-type:before{background-position:100%}.track:not(:first-of-type):not(:last-of-type){padding-left:calc(var(--spectrum-slider-handle-width)/2 + var(--spectrum-slider-track-handleoffset))!important;padding-right:calc(var(--spectrum-slider-handle-width)/2 + var(--spectrum-slider-track-handleoffset))!important}:host([dir=ltr][variant=range]) .track,:host([dir=rtl][variant=range]) .track{margin:var(--spectrum-slider-range-track-reset);margin-top:calc(var(--spectrum-slider-track-height)/-2)}:host([dir=ltr]) .track:not(:first-of-type):not(:last-of-type){left:var(--spectrum-slider-track-segment-position)}:host([dir=rtl]) .track:not(:first-of-type):not(:last-of-type){right:var(--spectrum-slider-track-segment-position)}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([label-visibility=value][dir=ltr]) #value{margin-left:auto}:host([label-visibility=value][dir=rtl]) #value{margin-right:auto}:host([label-visibility=none]) #label-container{margin:0;padding:0}\n`;\nexport default styles;"]}
package/src/spectrum-config.js CHANGED
@@ -53,7 +53,7 @@ const config = {
53
53
  },
54
54
  {
55
55
  selector: '.spectrum-Slider-labelContainer',
56
- name: 'labelContainer',
56
+ name: 'label-container',
57
57
  },
58
58
  {
59
59
  selector: '.spectrum-Slider-value',
package/src/spectrum-slider.css.js CHANGED
@@ -115,7 +115,7 @@ var(--spectrum-global-dimension-static-size-25)
115
115
  --spectrum-slider-input-left
116
116
  )}:host([dir=rtl]) .input{right:var(
117
117
  --spectrum-slider-input-left
118
- )}.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}#labelContainer{display:flex;font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height);margin-bottom:var(--spectrum-slide-label-margin-bottom);padding-top:var(
118
+ )}.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(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height);margin-bottom:var(--spectrum-slide-label-margin-bottom);padding-top:var(
119
119
  --spectrum-fieldlabel-m-padding-top,var(--spectrum-global-dimension-size-50)
120
120
  );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(
121
121
  --spectrum-slider-label-gap-x
@@ -133,7 +133,7 @@ var(--spectrum-global-dimension-static-size-25)
133
133
  --spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500)
134
134
  )}.track:before{background:var(
135
135
  --spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400)
136
- )}#labelContainer{color:var(
136
+ )}#label-container{color:var(
137
137
  --spectrum-slider-m-label-text-color
138
138
  )}:host([variant=filled]) .track:first-child:before{background:var(
139
139
  --spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)
@@ -163,7 +163,7 @@ var(--spectrum-global-dimension-static-size-25)
163
163
  --spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800)
164
164
  )}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(
165
165
  --spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)
166
- )}:host([disabled]) #labelContainer{color:var(
166
+ )}:host([disabled]) #label-container{color:var(
167
167
  --spectrum-slider-m-label-text-color-disabled
168
168
  )}:host([disabled]) .handle{background:var(
169
169
  --spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100)
package/src/spectrum-slider.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"spectrum-slider.css.js","sourceRoot":"","sources":["spectrum-slider.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8KjB,CAAC;AACF,eAAe,MAAM,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*/\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-slide-label-text-size:var(\n--spectrum-global-dimension-font-size-75\n);--spectrum-slide-label-text-line-height:var(\n--spectrum-global-font-line-height-small,1.3\n);--spectrum-slide-label-margin-bottom:-3px;--spectrum-slider-label-gap-x:var(\n--spectrum-alias-item-control-gap-m,var(--spectrum-global-dimension-size-125)\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}#fill:before,.track:before{border-radius:var(--spectrum-slider-track-border-radius);content:\"\";display:block;height:100%}: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([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([variant=range]) #value{-webkit-user-select:text;user-select:text}: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([variant=range]) .track:first-of-type{padding-bottom:0;padding-top: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:var(--spectrum-slider-range-track-reset);padding-bottom:0;padding-left:var(--spectrum-slider-track-middle-handleoffset);padding-right:var(--spectrum-slider-track-middle-handleoffset);padding-top:0}: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([variant=range]) .track:last-of-type{padding-bottom:0;padding-top: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}#labelContainer{display:flex;font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height);margin-bottom:var(--spectrum-slide-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) + var(--spectrum-slider-track-height)/2);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(--spectrum-slide-label-text-size);justify-content:center;line-height:var(--spectrum-slide-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)}#labelContainer{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 4px 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]) #labelContainer{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)}\n`;\nexport default styles;"]}
1
+ {"version":3,"file":"spectrum-slider.css.js","sourceRoot":"","sources":["spectrum-slider.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8KjB,CAAC;AACF,eAAe,MAAM,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*/\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-slide-label-text-size:var(\n--spectrum-global-dimension-font-size-75\n);--spectrum-slide-label-text-line-height:var(\n--spectrum-global-font-line-height-small,1.3\n);--spectrum-slide-label-margin-bottom:-3px;--spectrum-slider-label-gap-x:var(\n--spectrum-alias-item-control-gap-m,var(--spectrum-global-dimension-size-125)\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}#fill:before,.track:before{border-radius:var(--spectrum-slider-track-border-radius);content:\"\";display:block;height:100%}: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([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([variant=range]) #value{-webkit-user-select:text;user-select:text}: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([variant=range]) .track:first-of-type{padding-bottom:0;padding-top: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:var(--spectrum-slider-range-track-reset);padding-bottom:0;padding-left:var(--spectrum-slider-track-middle-handleoffset);padding-right:var(--spectrum-slider-track-middle-handleoffset);padding-top:0}: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([variant=range]) .track:last-of-type{padding-bottom:0;padding-top: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(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height);margin-bottom:var(--spectrum-slide-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) + var(--spectrum-slider-track-height)/2);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(--spectrum-slide-label-text-size);justify-content:center;line-height:var(--spectrum-slide-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 4px 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)}\n`;\nexport default styles;"]}
package/stories/slider.stories.js CHANGED
@@ -13,7 +13,7 @@ import { html } from '@spectrum-web-components/base';
13
13
  import '../sp-slider.js';
14
14
  import '../sp-slider-handle.js';
15
15
  import { variants } from '../';
16
- import { spreadProps } from '@open-wc/lit-helpers';
16
+ import { spreadProps } from '../../../test/lit-helpers.js';
17
17
  export default {
18
18
  component: 'sp-slider',
19
19
  title: 'Slider',
package/stories/slider.stories.js.map CHANGED
@@ -1 +1 @@
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 '@open-wc/lit-helpers';\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}\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 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
+ {"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 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"]}