@spectrum-web-components/slider 0.40.4 → 0.40.5

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 (15) hide show
  1. package/package.json +9 -9
  2. package/src/Slider.dev.js +4 -6
  3. package/src/Slider.dev.js.map +2 -2
  4. package/src/Slider.js +2 -2
  5. package/src/Slider.js.map +2 -2
  6. package/src/slider.css.dev.js +19 -11
  7. package/src/slider.css.dev.js.map +2 -2
  8. package/src/slider.css.js +19 -11
  9. package/src/slider.css.js.map +2 -2
  10. package/src/spectrum-slider.css.dev.js +18 -10
  11. package/src/spectrum-slider.css.dev.js.map +2 -2
  12. package/src/spectrum-slider.css.js +18 -10
  13. package/src/spectrum-slider.css.js.map +2 -2
  14. package/stories/slider.stories.js +16 -4
  15. package/stories/slider.stories.js.map +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/slider",
3
- "version": "0.40.4",
3
+ "version": "0.40.5",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -75,15 +75,15 @@
75
75
  "dependencies": {
76
76
  "@internationalized/number": "^3.1.0",
77
77
  "@lit-labs/observers": "^2.0.0",
78
- "@spectrum-web-components/base": "^0.40.4",
79
- "@spectrum-web-components/field-label": "^0.40.4",
80
- "@spectrum-web-components/number-field": "^0.40.4",
81
- "@spectrum-web-components/reactive-controllers": "^0.40.4",
82
- "@spectrum-web-components/shared": "^0.40.4",
83
- "@spectrum-web-components/theme": "^0.40.4"
78
+ "@spectrum-web-components/base": "^0.40.5",
79
+ "@spectrum-web-components/field-label": "^0.40.5",
80
+ "@spectrum-web-components/number-field": "^0.40.5",
81
+ "@spectrum-web-components/reactive-controllers": "^0.40.5",
82
+ "@spectrum-web-components/shared": "^0.40.5",
83
+ "@spectrum-web-components/theme": "^0.40.5"
84
84
  },
85
85
  "devDependencies": {
86
- "@spectrum-css/slider": "^4.2.0"
86
+ "@spectrum-css/slider": "^4.3.0"
87
87
  },
88
88
  "types": "./src/index.d.ts",
89
89
  "customElements": "custom-elements.json",
@@ -92,5 +92,5 @@
92
92
  "./**/*.dev.js",
93
93
  "./sync/sp-*.js"
94
94
  ],
95
- "gitHead": "e7bca020d0da71c4d92e95044bf58780d2e8e603"
95
+ "gitHead": "2e0006478841b07af63c19a0167a136bf724d064"
96
96
  }
package/src/Slider.dev.js CHANGED
@@ -301,12 +301,12 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ""), {
301
301
  ];
302
302
  const trackItems = [
303
303
  { id: "track0", html: this.renderTrackSegment(...segments[0]) },
304
+ { id: "fill", html: this.renderFillOffset() },
304
305
  { id: "ramp", html: this.renderRamp() },
305
306
  ...segments.slice(1).map(([start, end], index) => ({
306
307
  id: `track${index + 1}`,
307
308
  html: this.renderTrackSegment(start, end)
308
- })),
309
- { id: "fill", html: this.renderFillOffset() }
309
+ }))
310
310
  ];
311
311
  return html`
312
312
  <div
@@ -376,10 +376,8 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ""), {
376
376
  const size = end - start;
377
377
  const styles = {
378
378
  width: `${size * 100}%`,
379
- ...this.handleController.size > 1 && {
380
- "--spectrum-slider-track-background-size": `${1 / size * 100}%`,
381
- "--spectrum-slider-track-segment-position": `${start * 100}%`
382
- }
379
+ "--spectrum-slider-track-background-size": `${1 / size * 100}%`,
380
+ "--spectrum-slider-track-segment-position": `${start * 100}%`
383
381
  };
384
382
  return styles;
385
383
  }
package/src/Slider.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["Slider.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport {\n classMap,\n ifDefined,\n repeat,\n styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\n\nimport sliderStyles from './slider.css.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport { StyleInfo } from 'lit-html/directives/style-map';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport type { NumberField } from '@spectrum-web-components/number-field';\nimport { HandleController, HandleValueDictionary } from './HandleController.dev.js'\nimport { SliderHandle } from './SliderHandle.dev.js'\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\nimport type { NumberFormatter } from '@internationalized/number';\n\nexport const variants = ['filled', 'ramp', 'range', 'tick'];\n\n/**\n * @element sp-slider\n *\n * @slot - text label for the Slider\n * @slot handle - optionally accepts two or more sp-slider-handle elements\n */\nexport class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {\n noDefaultSize: true,\n validSizes: ['s', 'm', 'l', 'xl'],\n}) {\n public static override get styles(): CSSResultArray {\n return [sliderStyles];\n }\n\n public override handleController: HandleController = new HandleController(\n this\n );\n\n /**\n * Whether to display a Number Field along side the slider UI\n */\n @property({ type: Boolean, reflect: true })\n public get editable(): boolean {\n return this._editable;\n }\n\n public set editable(editable: boolean) {\n if (editable === this.editable) return;\n const oldValue = this.editable;\n this._editable = this.handleController.size < 2 ? editable : false;\n if (this.editable) {\n this._numberFieldInput = import(\n '@spectrum-web-components/number-field/sp-number-field.js'\n );\n }\n if (oldValue !== this.editable) {\n this.requestUpdate('editable', oldValue);\n }\n }\n\n private _editable = false;\n\n /**\n * Whether the stepper UI of the Number Field is hidden or not\n */\n @property({ type: Boolean, reflect: true, attribute: 'hide-stepper' })\n public hideStepper = false;\n\n @property()\n public type = '';\n\n @property({ reflect: true })\n public override dir!: 'ltr' | 'rtl';\n\n @property({ type: String })\n public set variant(variant: string) {\n const oldVariant = this.variant;\n if (variant === this.variant) {\n return;\n }\n if (variants.includes(variant)) {\n this.setAttribute('variant', variant);\n this._variant = variant;\n } else {\n this.removeAttribute('variant');\n this._variant = '';\n }\n this.requestUpdate('variant', oldVariant);\n }\n\n public get variant(): string {\n return this._variant;\n }\n\n public get values(): HandleValueDictionary {\n return this.handleController.values;\n }\n\n public override get handleName(): string {\n return 'value';\n }\n\n /* Ensure that a '' value for `variant` removes the attribute instead of a blank value */\n private _variant = '';\n\n @property({ attribute: false })\n public getAriaValueText: (values: Map<string, string>) => string = (\n values\n ) => {\n const valueArray = [...values.values()];\n if (valueArray.length === 2)\n return `${valueArray[0]} - ${valueArray[1]}`;\n return valueArray.join(', ');\n };\n\n public override get ariaValueText(): string {\n if (!this.getAriaValueText) {\n return `${this.value}${this._forcedUnit}`;\n }\n return this.getAriaValueText(this.handleController.formattedValues);\n }\n\n @property({ type: String, reflect: true, attribute: 'label-visibility' })\n public labelVisibility?: 'text' | 'value' | 'none';\n\n @property({ type: Number, reflect: true })\n public override min = 0;\n\n @property({ type: Number, reflect: true })\n public override max = 100;\n\n @property({ type: Number })\n public override step = 1;\n\n @property({ type: Number, attribute: 'tick-step' })\n public tickStep = 0;\n\n @property({ type: Boolean, attribute: 'tick-labels' })\n public tickLabels = false;\n\n @property({ type: Boolean, reflect: true })\n public override disabled = false;\n\n @property({ type: Number, reflect: true, attribute: 'fill-start' })\n public fillStart?: number | boolean;\n\n /**\n * Applies `quiet` to the underlying `sp-number-field` when `editable === true`.\n */\n @property({ type: Boolean })\n public quiet = false;\n\n /**\n * Applies `indeterminate` to the underlying `sp-number-field` when `editable === true`. Is removed on the next `change` event.\n */\n @property({ type: Boolean })\n public indeterminate = false;\n\n @query('#label')\n public labelEl!: HTMLLabelElement;\n\n @query('#number-field')\n public numberField!: NumberField;\n\n @query('#track')\n public track!: HTMLDivElement;\n\n public override get numberFormat(): NumberFormatter {\n return this.getNumberFormat();\n }\n\n public override get focusElement(): HTMLElement {\n return this.handleController.focusElement;\n }\n\n protected handleLabelClick(event: Event): void {\n if (this.editable) {\n event.preventDefault();\n this.focus();\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n ${this.renderLabel()} ${this.renderTrack()}\n ${this.editable\n ? html`\n <sp-number-field\n .formatOptions=${this.formatOptions || {}}\n id=\"number-field\"\n min=${this.min}\n max=${this.max}\n step=${this.step}\n size=${this.size}\n value=${this.value}\n ?hide-stepper=${this.hideStepper}\n ?disabled=${this.disabled}\n ?quiet=${this.quiet}\n ?indeterminate=${this.indeterminate}\n @input=${this.handleNumberInput}\n @change=${this.handleNumberChange}\n ></sp-number-field>\n `\n : nothing}\n `;\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.handleController.hostConnected();\n }\n\n public override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.handleController.hostDisconnected();\n }\n\n public override update(changedProperties: Map<string, boolean>): void {\n this.handleController.hostUpdate();\n if (changedProperties.has('disabled') && this.disabled) {\n this.handleController.cancelDrag();\n }\n super.update(changedProperties);\n }\n\n private renderLabel(): TemplateResult {\n const textLabelVisible =\n this.labelVisibility === 'none' || this.labelVisibility === 'value';\n const valueLabelVisible =\n this.labelVisibility === 'none' || this.labelVisibility === 'text';\n return html`\n <div id=\"label-container\">\n <sp-field-label\n class=${classMap({\n 'visually-hidden': textLabelVisible,\n })}\n ?disabled=${this.disabled}\n id=\"label\"\n for=${this.editable\n ? 'number-field'\n : this.handleController.activeHandleInputId}\n @click=${this.handleLabelClick}\n size=${this.size}\n >\n ${this.slotHasContent ? nothing : this.label}\n <slot>${this.label}</slot>\n </sp-field-label>\n <sp-field-label\n class=${classMap({\n 'visually-hidden': valueLabelVisible,\n })}\n ?disabled=${this.disabled}\n for=${this.editable\n ? 'number-field'\n : this.handleController.activeHandleInputId}\n size=${this.size}\n >\n <output id=\"value\" aria-live=\"off\" for=\"input\">\n ${this.ariaValueText}\n </output>\n </sp-field-label>\n </div>\n `;\n }\n\n private renderRamp(): TemplateResult {\n if (this.variant !== 'ramp') {\n return html``;\n }\n return html`\n <div id=\"ramp\">\n <svg\n viewBox=\"0 0 240 16\"\n preserveAspectRatio=\"none\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path\n d=\"M240,4v8c0,2.3-1.9,4.1-4.2,4L1,9C0.4,9,0,8.5,0,8c0-0.5,0.4-1,1-1l234.8-7C238.1-0.1,240,1.7,240,4z\"\n ></path>\n </svg>\n </div>\n `;\n }\n\n private renderTicks(): TemplateResult {\n if (this.variant !== 'tick') {\n return html``;\n }\n const tickStep = this.tickStep || this.step;\n const tickCount =\n ((this.max as number) - (this.min as number)) / tickStep;\n const partialFit = tickCount % 1 !== 0;\n const ticks = new Array(Math.floor(tickCount + 1));\n ticks.fill(0, 0, tickCount + 1);\n return html`\n <div\n class=\"${partialFit ? 'not-exact ' : ''}ticks\"\n style=${ifDefined(\n partialFit\n ? `--sp-slider-tick-offset: calc(100% / ${this.max} * ${this.tickStep}`\n : undefined\n )}\n >\n ${ticks.map(\n (_tick, i) => html`\n <div class=\"tick\">\n ${this.tickLabels\n ? html`\n <div class=\"tickLabel\">\n ${i * tickStep + this.min}\n </div>\n `\n : nothing}\n </div>\n `\n )}\n </div>\n `;\n }\n\n private renderTrackSegment(start: number, end: number): TemplateResult {\n if (this.variant === 'ramp') {\n return html``;\n }\n return html`\n <div\n class=\"track\"\n style=${styleMap(this.trackSegmentStyles(start, end))}\n role=\"presentation\"\n ></div>\n `;\n }\n\n private _cachedValue: number | undefined;\n private centerPoint: number | undefined;\n\n /**\n * @description calculates the fill width\n * @param fillStartValue\n * @param currentValue\n * @param cachedValue\n * @returns\n */\n private getOffsetWidth(\n fillStartValue: number,\n currentValue: number\n ): number {\n const distance = Math.abs(currentValue - fillStartValue);\n return (distance / (this.max - this.min)) * 100;\n }\n\n /**\n * @description calculates the fill width starting point to fill width\n * @param value\n */\n private getOffsetPosition(value: number): number {\n return ((value - this.min) / (this.max - this.min)) * 100;\n }\n\n private fillStyles(centerPoint: number): StyleInfo {\n const position = this.dir === 'rtl' ? 'right' : 'left';\n const offsetPosition =\n this.value > centerPoint\n ? this.getOffsetPosition(centerPoint)\n : this.getOffsetPosition(this.value);\n const offsetWidth = this.getOffsetWidth(centerPoint, this.value);\n const styles: StyleInfo = {\n [position]: `${offsetPosition}%`,\n width: `${offsetWidth}%`,\n };\n return styles;\n }\n\n private renderFillOffset(): TemplateResult {\n if (!this._cachedValue || !this.centerPoint) {\n return html``;\n }\n return html`\n <div\n class=${classMap({\n fill: true,\n offset: this.value > this.centerPoint,\n })}\n style=${styleMap(this.fillStyles(this.centerPoint))}\n ></div>\n `;\n }\n\n private renderTrack(): TemplateResult {\n const segments = this.handleController.trackSegments();\n const handleItems = [\n { id: 'handles', html: this.handleController.render() },\n ];\n const trackItems = [\n { id: 'track0', html: this.renderTrackSegment(...segments[0]) },\n { id: 'ramp', html: this.renderRamp() },\n ...segments.slice(1).map(([start, end], index) => ({\n id: `track${index + 1}`,\n html: this.renderTrackSegment(start, end),\n })),\n { id: 'fill', html: this.renderFillOffset() },\n ];\n\n return html`\n <div\n id=\"track\"\n ${streamingListener({\n start: ['pointerdown', this.handlePointerdown],\n streamInside: ['pointermove', this.handlePointermove],\n end: [\n ['pointerup', 'pointercancel', 'pointerleave'],\n this.handlePointerup,\n ],\n })}\n >\n <div id=\"controls\">\n ${this.renderTicks()}\n <div class=\"trackContainer\">\n ${repeat(\n trackItems,\n (item) => item.id,\n (item) => item.html\n )}\n </div>\n <div class=\"handleContainer\">\n ${repeat(\n handleItems,\n (item) => item.id,\n (item) => item.html\n )}\n </div>\n </div>\n </div>\n `;\n }\n\n protected handlePointerdown(event: PointerEvent): void {\n this.handleController.handlePointerdown(event);\n }\n\n protected handlePointermove(event: PointerEvent): void {\n this.handleController.handlePointermove(event);\n }\n\n protected handlePointerup(event: PointerEvent): void {\n this.handleController.handlePointerup(event);\n }\n\n private handleNumberInput(event: Event & { target: NumberField }): void {\n const { value } = event.target;\n if (event.target?.managedInput && !isNaN(value)) {\n this.value = value;\n return;\n }\n // Do not apply uncommited values to the parent element unless interacting with the stepper UI.\n // Stop uncommitted input from being announced to the parent application.\n event.stopPropagation();\n }\n\n private handleNumberChange(event: Event & { target: NumberField }): void {\n const { value } = event.target;\n if (isNaN(value)) {\n event.target.value = this.value;\n event.stopPropagation();\n } else {\n this.value = value;\n if (!event.target?.managedInput) {\n // When stepper is not active, sythesize an `input` event so that the\n // `change` event isn't surprising.\n this.dispatchInputEvent();\n }\n }\n this.indeterminate = false;\n }\n\n private trackSegmentStyles(start: number, end: number): StyleInfo {\n const size = end - start;\n const styles: StyleInfo = {\n width: `${size * 100}%`,\n ...(this.handleController.size > 1 && {\n '--spectrum-slider-track-background-size': `${\n (1 / size) * 100\n }%`,\n '--spectrum-slider-track-segment-position': `${start * 100}%`,\n }),\n };\n return styles;\n }\n\n private _numberFieldInput: Promise<unknown> = Promise.resolve();\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n if (this.editable) {\n await this._numberFieldInput;\n await this.numberField.updateComplete;\n }\n await this.handleController.handleUpdatesComplete();\n return complete;\n }\n\n protected override willUpdate(changed: PropertyValues): void {\n if (changed.has('value') && changed.has('fillStart')) {\n this._cachedValue = Number(this.value);\n if (this.fillStart) {\n this.centerPoint = Number(this.fillStart);\n } else {\n this.centerPoint =\n (Number(this.max) - Number(this.min)) / 2 +\n Number(this.min);\n }\n }\n }\n}\n"],
5
- "mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,EAEA;AAAA,OAEG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAEP,OAAO,kBAAkB;AACzB,SAAS,uBAAuB;AAEhC,OAAO;AAEP,SAAS,wBAA+C;AACxD,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAG3B,aAAM,WAAW,CAAC,UAAU,QAAQ,SAAS,MAAM;AAQnD,aAAM,eAAe,WAAW,gBAAgB,cAAc,EAAE,GAAG;AAAA,EACtE,eAAe;AAAA,EACf,YAAY,CAAC,KAAK,KAAK,KAAK,IAAI;AACpC,CAAC,EAAE;AAAA,EAHI;AAAA;AAQH,SAAgB,mBAAqC,IAAI;AAAA,MACrD;AAAA,IACJ;AAwBA,SAAQ,YAAY;AAMpB,SAAO,cAAc;AAGrB,SAAO,OAAO;AAkCd;AAAA,SAAQ,WAAW;AAGnB,SAAO,mBAA4D,CAC/D,WACC;AACD,YAAM,aAAa,CAAC,GAAG,OAAO,OAAO,CAAC;AACtC,UAAI,WAAW,WAAW;AACtB,eAAO,GAAG,WAAW,CAAC,CAAC,MAAM,WAAW,CAAC,CAAC;AAC9C,aAAO,WAAW,KAAK,IAAI;AAAA,IAC/B;AAaA,SAAgB,MAAM;AAGtB,SAAgB,MAAM;AAGtB,SAAgB,OAAO;AAGvB,SAAO,WAAW;AAGlB,SAAO,aAAa;AAGpB,SAAgB,WAAW;AAS3B,SAAO,QAAQ;AAMf,SAAO,gBAAgB;AA8UvB,SAAQ,oBAAsC,QAAQ,QAAQ;AAAA;AAAA,EA5c9D,WAA2B,SAAyB;AAChD,WAAO,CAAC,YAAY;AAAA,EACxB;AAAA,EAUA,IAAW,WAAoB;AAC3B,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAW,SAAS,UAAmB;AACnC,QAAI,aAAa,KAAK;AAAU;AAChC,UAAM,WAAW,KAAK;AACtB,SAAK,YAAY,KAAK,iBAAiB,OAAO,IAAI,WAAW;AAC7D,QAAI,KAAK,UAAU;AACf,WAAK,oBAAoB,OACrB,0DACJ;AAAA,IACJ;AACA,QAAI,aAAa,KAAK,UAAU;AAC5B,WAAK,cAAc,YAAY,QAAQ;AAAA,IAC3C;AAAA,EACJ;AAAA,EAiBA,IAAW,QAAQ,SAAiB;AAChC,UAAM,aAAa,KAAK;AACxB,QAAI,YAAY,KAAK,SAAS;AAC1B;AAAA,IACJ;AACA,QAAI,SAAS,SAAS,OAAO,GAAG;AAC5B,WAAK,aAAa,WAAW,OAAO;AACpC,WAAK,WAAW;AAAA,IACpB,OAAO;AACH,WAAK,gBAAgB,SAAS;AAC9B,WAAK,WAAW;AAAA,IACpB;AACA,SAAK,cAAc,WAAW,UAAU;AAAA,EAC5C;AAAA,EAEA,IAAW,UAAkB;AACzB,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAW,SAAgC;AACvC,WAAO,KAAK,iBAAiB;AAAA,EACjC;AAAA,EAEA,IAAoB,aAAqB;AACrC,WAAO;AAAA,EACX;AAAA,EAeA,IAAoB,gBAAwB;AACxC,QAAI,CAAC,KAAK,kBAAkB;AACxB,aAAO,GAAG,KAAK,KAAK,GAAG,KAAK,WAAW;AAAA,IAC3C;AACA,WAAO,KAAK,iBAAiB,KAAK,iBAAiB,eAAe;AAAA,EACtE;AAAA,EA+CA,IAAoB,eAAgC;AAChD,WAAO,KAAK,gBAAgB;AAAA,EAChC;AAAA,EAEA,IAAoB,eAA4B;AAC5C,WAAO,KAAK,iBAAiB;AAAA,EACjC;AAAA,EAEU,iBAAiB,OAAoB;AAC3C,QAAI,KAAK,UAAU;AACf,YAAM,eAAe;AACrB,WAAK,MAAM;AAAA,IACf;AAAA,EACJ;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA,cACD,KAAK,YAAY,CAAC,IAAI,KAAK,YAAY,CAAC;AAAA,cACxC,KAAK,WACD;AAAA;AAAA,2CAEyB,KAAK,iBAAiB,CAAC,CAAC;AAAA;AAAA,gCAEnC,KAAK,GAAG;AAAA,gCACR,KAAK,GAAG;AAAA,iCACP,KAAK,IAAI;AAAA,iCACT,KAAK,IAAI;AAAA,kCACR,KAAK,KAAK;AAAA,0CACF,KAAK,WAAW;AAAA,sCACpB,KAAK,QAAQ;AAAA,mCAChB,KAAK,KAAK;AAAA,2CACF,KAAK,aAAa;AAAA,mCAC1B,KAAK,iBAAiB;AAAA,oCACrB,KAAK,kBAAkB;AAAA;AAAA,sBAGzC,OAAO;AAAA;AAAA,EAErB;AAAA,EAEgB,oBAA0B;AACtC,UAAM,kBAAkB;AACxB,SAAK,iBAAiB,cAAc;AAAA,EACxC;AAAA,EAEgB,uBAA6B;AACzC,UAAM,qBAAqB;AAC3B,SAAK,iBAAiB,iBAAiB;AAAA,EAC3C;AAAA,EAEgB,OAAO,mBAA+C;AAClE,SAAK,iBAAiB,WAAW;AACjC,QAAI,kBAAkB,IAAI,UAAU,KAAK,KAAK,UAAU;AACpD,WAAK,iBAAiB,WAAW;AAAA,IACrC;AACA,UAAM,OAAO,iBAAiB;AAAA,EAClC;AAAA,EAEQ,cAA8B;AAClC,UAAM,mBACF,KAAK,oBAAoB,UAAU,KAAK,oBAAoB;AAChE,UAAM,oBACF,KAAK,oBAAoB,UAAU,KAAK,oBAAoB;AAChE,WAAO;AAAA;AAAA;AAAA,4BAGa,SAAS;AAAA,MACb,mBAAmB;AAAA,IACvB,CAAC,CAAC;AAAA,gCACU,KAAK,QAAQ;AAAA;AAAA,0BAEnB,KAAK,WACL,iBACA,KAAK,iBAAiB,mBAAmB;AAAA,6BACtC,KAAK,gBAAgB;AAAA,2BACvB,KAAK,IAAI;AAAA;AAAA,sBAEd,KAAK,iBAAiB,UAAU,KAAK,KAAK;AAAA,4BACpC,KAAK,KAAK;AAAA;AAAA;AAAA,4BAGV,SAAS;AAAA,MACb,mBAAmB;AAAA,IACvB,CAAC,CAAC;AAAA,gCACU,KAAK,QAAQ;AAAA,0BACnB,KAAK,WACL,iBACA,KAAK,iBAAiB,mBAAmB;AAAA,2BACxC,KAAK,IAAI;AAAA;AAAA;AAAA,0BAGV,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,EAKxC;AAAA,EAEQ,aAA6B;AACjC,QAAI,KAAK,YAAY,QAAQ;AACzB,aAAO;AAAA,IACX;AACA,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcX;AAAA,EAEQ,cAA8B;AAClC,QAAI,KAAK,YAAY,QAAQ;AACzB,aAAO;AAAA,IACX;AACA,UAAM,WAAW,KAAK,YAAY,KAAK;AACvC,UAAM,aACA,KAAK,MAAkB,KAAK,OAAkB;AACpD,UAAM,aAAa,YAAY,MAAM;AACrC,UAAM,QAAQ,IAAI,MAAM,KAAK,MAAM,YAAY,CAAC,CAAC;AACjD,UAAM,KAAK,GAAG,GAAG,YAAY,CAAC;AAC9B,WAAO;AAAA;AAAA,yBAEU,aAAa,eAAe,EAAE;AAAA,wBAC/B;AAAA,MACJ,aACM,wCAAwC,KAAK,GAAG,MAAM,KAAK,QAAQ,KACnE;AAAA,IACV,CAAC;AAAA;AAAA,kBAEC,MAAM;AAAA,MACJ,CAAC,OAAO,MAAM;AAAA;AAAA,8BAEJ,KAAK,aACD;AAAA;AAAA,4CAEU,IAAI,WAAW,KAAK,GAAG;AAAA;AAAA,sCAGjC,OAAO;AAAA;AAAA;AAAA,IAGzB,CAAC;AAAA;AAAA;AAAA,EAGb;AAAA,EAEQ,mBAAmB,OAAe,KAA6B;AACnE,QAAI,KAAK,YAAY,QAAQ;AACzB,aAAO;AAAA,IACX;AACA,WAAO;AAAA;AAAA;AAAA,wBAGS,SAAS,KAAK,mBAAmB,OAAO,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,EAIjE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYQ,eACJ,gBACA,cACM;AACN,UAAM,WAAW,KAAK,IAAI,eAAe,cAAc;AACvD,WAAQ,YAAY,KAAK,MAAM,KAAK,OAAQ;AAAA,EAChD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,kBAAkB,OAAuB;AAC7C,YAAS,QAAQ,KAAK,QAAQ,KAAK,MAAM,KAAK,OAAQ;AAAA,EAC1D;AAAA,EAEQ,WAAW,aAAgC;AAC/C,UAAM,WAAW,KAAK,QAAQ,QAAQ,UAAU;AAChD,UAAM,iBACF,KAAK,QAAQ,cACP,KAAK,kBAAkB,WAAW,IAClC,KAAK,kBAAkB,KAAK,KAAK;AAC3C,UAAM,cAAc,KAAK,eAAe,aAAa,KAAK,KAAK;AAC/D,UAAM,SAAoB;AAAA,MACtB,CAAC,QAAQ,GAAG,GAAG,cAAc;AAAA,MAC7B,OAAO,GAAG,WAAW;AAAA,IACzB;AACA,WAAO;AAAA,EACX;AAAA,EAEQ,mBAAmC;AACvC,QAAI,CAAC,KAAK,gBAAgB,CAAC,KAAK,aAAa;AACzC,aAAO;AAAA,IACX;AACA,WAAO;AAAA;AAAA,wBAES,SAAS;AAAA,MACb,MAAM;AAAA,MACN,QAAQ,KAAK,QAAQ,KAAK;AAAA,IAC9B,CAAC,CAAC;AAAA,wBACM,SAAS,KAAK,WAAW,KAAK,WAAW,CAAC,CAAC;AAAA;AAAA;AAAA,EAG/D;AAAA,EAEQ,cAA8B;AAClC,UAAM,WAAW,KAAK,iBAAiB,cAAc;AACrD,UAAM,cAAc;AAAA,MAChB,EAAE,IAAI,WAAW,MAAM,KAAK,iBAAiB,OAAO,EAAE;AAAA,IAC1D;AACA,UAAM,aAAa;AAAA,MACf,EAAE,IAAI,UAAU,MAAM,KAAK,mBAAmB,GAAG,SAAS,CAAC,CAAC,EAAE;AAAA,MAC9D,EAAE,IAAI,QAAQ,MAAM,KAAK,WAAW,EAAE;AAAA,MACtC,GAAG,SAAS,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,OAAO,GAAG,GAAG,WAAW;AAAA,QAC/C,IAAI,QAAQ,QAAQ,CAAC;AAAA,QACrB,MAAM,KAAK,mBAAmB,OAAO,GAAG;AAAA,MAC5C,EAAE;AAAA,MACF,EAAE,IAAI,QAAQ,MAAM,KAAK,iBAAiB,EAAE;AAAA,IAChD;AAEA,WAAO;AAAA;AAAA;AAAA,kBAGG,kBAAkB;AAAA,MAChB,OAAO,CAAC,eAAe,KAAK,iBAAiB;AAAA,MAC7C,cAAc,CAAC,eAAe,KAAK,iBAAiB;AAAA,MACpD,KAAK;AAAA,QACD,CAAC,aAAa,iBAAiB,cAAc;AAAA,QAC7C,KAAK;AAAA,MACT;AAAA,IACJ,CAAC,CAAC;AAAA;AAAA;AAAA,sBAGI,KAAK,YAAY,CAAC;AAAA;AAAA,0BAEd;AAAA,MACE;AAAA,MACA,CAAC,SAAS,KAAK;AAAA,MACf,CAAC,SAAS,KAAK;AAAA,IACnB,CAAC;AAAA;AAAA;AAAA,0BAGC;AAAA,MACE;AAAA,MACA,CAAC,SAAS,KAAK;AAAA,MACf,CAAC,SAAS,KAAK;AAAA,IACnB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrB;AAAA,EAEU,kBAAkB,OAA2B;AACnD,SAAK,iBAAiB,kBAAkB,KAAK;AAAA,EACjD;AAAA,EAEU,kBAAkB,OAA2B;AACnD,SAAK,iBAAiB,kBAAkB,KAAK;AAAA,EACjD;AAAA,EAEU,gBAAgB,OAA2B;AACjD,SAAK,iBAAiB,gBAAgB,KAAK;AAAA,EAC/C;AAAA,EAEQ,kBAAkB,OAA8C;AAxd5E;AAydQ,UAAM,EAAE,MAAM,IAAI,MAAM;AACxB,UAAI,WAAM,WAAN,mBAAc,iBAAgB,CAAC,MAAM,KAAK,GAAG;AAC7C,WAAK,QAAQ;AACb;AAAA,IACJ;AAGA,UAAM,gBAAgB;AAAA,EAC1B;AAAA,EAEQ,mBAAmB,OAA8C;AAne7E;AAoeQ,UAAM,EAAE,MAAM,IAAI,MAAM;AACxB,QAAI,MAAM,KAAK,GAAG;AACd,YAAM,OAAO,QAAQ,KAAK;AAC1B,YAAM,gBAAgB;AAAA,IAC1B,OAAO;AACH,WAAK,QAAQ;AACb,UAAI,GAAC,WAAM,WAAN,mBAAc,eAAc;AAG7B,aAAK,mBAAmB;AAAA,MAC5B;AAAA,IACJ;AACA,SAAK,gBAAgB;AAAA,EACzB;AAAA,EAEQ,mBAAmB,OAAe,KAAwB;AAC9D,UAAM,OAAO,MAAM;AACnB,UAAM,SAAoB;AAAA,MACtB,OAAO,GAAG,OAAO,GAAG;AAAA,MACpB,GAAI,KAAK,iBAAiB,OAAO,KAAK;AAAA,QAClC,2CAA2C,GACtC,IAAI,OAAQ,GACjB;AAAA,QACA,4CAA4C,GAAG,QAAQ,GAAG;AAAA,MAC9D;AAAA,IACJ;AACA,WAAO;AAAA,EACX;AAAA,EAIA,MAAyB,oBAAsC;AAC3D,UAAM,WAAY,MAAM,MAAM,kBAAkB;AAChD,QAAI,KAAK,UAAU;AACf,YAAM,KAAK;AACX,YAAM,KAAK,YAAY;AAAA,IAC3B;AACA,UAAM,KAAK,iBAAiB,sBAAsB;AAClD,WAAO;AAAA,EACX;AAAA,EAEmB,WAAW,SAA+B;AACzD,QAAI,QAAQ,IAAI,OAAO,KAAK,QAAQ,IAAI,WAAW,GAAG;AAClD,WAAK,eAAe,OAAO,KAAK,KAAK;AACrC,UAAI,KAAK,WAAW;AAChB,aAAK,cAAc,OAAO,KAAK,SAAS;AAAA,MAC5C,OAAO;AACH,aAAK,eACA,OAAO,KAAK,GAAG,IAAI,OAAO,KAAK,GAAG,KAAK,IACxC,OAAO,KAAK,GAAG;AAAA,MACvB;AAAA,IACJ;AAAA,EACJ;AACJ;AAxde;AAAA,EADV,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAfjC,OAgBE;AAwBJ;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,eAAe,CAAC;AAAA,GAvC5D,OAwCF;AAGA;AAAA,EADN,SAAS;AAAA,GA1CD,OA2CF;AAGS;AAAA,EADf,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GA7ClB,OA8CO;AAGL;AAAA,EADV,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAhDjB,OAiDE;AA+BJ;AAAA,EADN,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GA/ErB,OAgFF;AAiBA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,mBAAmB,CAAC;AAAA,GAhG/D,OAiGF;AAGS;AAAA,EADf,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAnGhC,OAoGO;AAGA;AAAA,EADf,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAtGhC,OAuGO;AAGA;AAAA,EADf,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAzGjB,OA0GO;AAGT;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GA5GzC,OA6GF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,WAAW,cAAc,CAAC;AAAA,GA/G5C,OAgHF;AAGS;AAAA,EADf,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlHjC,OAmHO;AAGT;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,aAAa,CAAC;AAAA,GArHzD,OAsHF;AAMA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GA3HlB,OA4HF;AAMA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAjIlB,OAkIF;AAGA;AAAA,EADN,MAAM,QAAQ;AAAA,GApIN,OAqIF;AAGA;AAAA,EADN,MAAM,eAAe;AAAA,GAvIb,OAwIF;AAGA;AAAA,EADN,MAAM,QAAQ;AAAA,GA1IN,OA2IF;",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport {\n classMap,\n ifDefined,\n repeat,\n styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\n\nimport sliderStyles from './slider.css.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport { StyleInfo } from 'lit-html/directives/style-map';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport type { NumberField } from '@spectrum-web-components/number-field';\nimport { HandleController, HandleValueDictionary } from './HandleController.dev.js'\nimport { SliderHandle } from './SliderHandle.dev.js'\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\nimport type { NumberFormatter } from '@internationalized/number';\n\nexport const variants = ['filled', 'ramp', 'range', 'tick'];\n\n/**\n * @element sp-slider\n *\n * @slot - text label for the Slider\n * @slot handle - optionally accepts two or more sp-slider-handle elements\n */\nexport class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {\n noDefaultSize: true,\n validSizes: ['s', 'm', 'l', 'xl'],\n}) {\n public static override get styles(): CSSResultArray {\n return [sliderStyles];\n }\n\n public override handleController: HandleController = new HandleController(\n this\n );\n\n /**\n * Whether to display a Number Field along side the slider UI\n */\n @property({ type: Boolean, reflect: true })\n public get editable(): boolean {\n return this._editable;\n }\n\n public set editable(editable: boolean) {\n if (editable === this.editable) return;\n const oldValue = this.editable;\n this._editable = this.handleController.size < 2 ? editable : false;\n if (this.editable) {\n this._numberFieldInput = import(\n '@spectrum-web-components/number-field/sp-number-field.js'\n );\n }\n if (oldValue !== this.editable) {\n this.requestUpdate('editable', oldValue);\n }\n }\n\n private _editable = false;\n\n /**\n * Whether the stepper UI of the Number Field is hidden or not\n */\n @property({ type: Boolean, reflect: true, attribute: 'hide-stepper' })\n public hideStepper = false;\n\n @property()\n public type = '';\n\n @property({ reflect: true })\n public override dir!: 'ltr' | 'rtl';\n\n @property({ type: String })\n public set variant(variant: string) {\n const oldVariant = this.variant;\n if (variant === this.variant) {\n return;\n }\n if (variants.includes(variant)) {\n this.setAttribute('variant', variant);\n this._variant = variant;\n } else {\n this.removeAttribute('variant');\n this._variant = '';\n }\n this.requestUpdate('variant', oldVariant);\n }\n\n public get variant(): string {\n return this._variant;\n }\n\n public get values(): HandleValueDictionary {\n return this.handleController.values;\n }\n\n public override get handleName(): string {\n return 'value';\n }\n\n /* Ensure that a '' value for `variant` removes the attribute instead of a blank value */\n private _variant = '';\n\n @property({ attribute: false })\n public getAriaValueText: (values: Map<string, string>) => string = (\n values\n ) => {\n const valueArray = [...values.values()];\n if (valueArray.length === 2)\n return `${valueArray[0]} - ${valueArray[1]}`;\n return valueArray.join(', ');\n };\n\n public override get ariaValueText(): string {\n if (!this.getAriaValueText) {\n return `${this.value}${this._forcedUnit}`;\n }\n return this.getAriaValueText(this.handleController.formattedValues);\n }\n\n @property({ type: String, reflect: true, attribute: 'label-visibility' })\n public labelVisibility?: 'text' | 'value' | 'none';\n\n @property({ type: Number, reflect: true })\n public override min = 0;\n\n @property({ type: Number, reflect: true })\n public override max = 100;\n\n @property({ type: Number })\n public override step = 1;\n\n @property({ type: Number, attribute: 'tick-step' })\n public tickStep = 0;\n\n @property({ type: Boolean, attribute: 'tick-labels' })\n public tickLabels = false;\n\n @property({ type: Boolean, reflect: true })\n public override disabled = false;\n\n @property({ type: Number, reflect: true, attribute: 'fill-start' })\n public fillStart?: number | boolean;\n\n /**\n * Applies `quiet` to the underlying `sp-number-field` when `editable === true`.\n */\n @property({ type: Boolean })\n public quiet = false;\n\n /**\n * Applies `indeterminate` to the underlying `sp-number-field` when `editable === true`. Is removed on the next `change` event.\n */\n @property({ type: Boolean })\n public indeterminate = false;\n\n @query('#label')\n public labelEl!: HTMLLabelElement;\n\n @query('#number-field')\n public numberField!: NumberField;\n\n @query('#track')\n public track!: HTMLDivElement;\n\n public override get numberFormat(): NumberFormatter {\n return this.getNumberFormat();\n }\n\n public override get focusElement(): HTMLElement {\n return this.handleController.focusElement;\n }\n\n protected handleLabelClick(event: Event): void {\n if (this.editable) {\n event.preventDefault();\n this.focus();\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n ${this.renderLabel()} ${this.renderTrack()}\n ${this.editable\n ? html`\n <sp-number-field\n .formatOptions=${this.formatOptions || {}}\n id=\"number-field\"\n min=${this.min}\n max=${this.max}\n step=${this.step}\n size=${this.size}\n value=${this.value}\n ?hide-stepper=${this.hideStepper}\n ?disabled=${this.disabled}\n ?quiet=${this.quiet}\n ?indeterminate=${this.indeterminate}\n @input=${this.handleNumberInput}\n @change=${this.handleNumberChange}\n ></sp-number-field>\n `\n : nothing}\n `;\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.handleController.hostConnected();\n }\n\n public override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.handleController.hostDisconnected();\n }\n\n public override update(changedProperties: Map<string, boolean>): void {\n this.handleController.hostUpdate();\n if (changedProperties.has('disabled') && this.disabled) {\n this.handleController.cancelDrag();\n }\n super.update(changedProperties);\n }\n\n private renderLabel(): TemplateResult {\n const textLabelVisible =\n this.labelVisibility === 'none' || this.labelVisibility === 'value';\n const valueLabelVisible =\n this.labelVisibility === 'none' || this.labelVisibility === 'text';\n return html`\n <div id=\"label-container\">\n <sp-field-label\n class=${classMap({\n 'visually-hidden': textLabelVisible,\n })}\n ?disabled=${this.disabled}\n id=\"label\"\n for=${this.editable\n ? 'number-field'\n : this.handleController.activeHandleInputId}\n @click=${this.handleLabelClick}\n size=${this.size}\n >\n ${this.slotHasContent ? nothing : this.label}\n <slot>${this.label}</slot>\n </sp-field-label>\n <sp-field-label\n class=${classMap({\n 'visually-hidden': valueLabelVisible,\n })}\n ?disabled=${this.disabled}\n for=${this.editable\n ? 'number-field'\n : this.handleController.activeHandleInputId}\n size=${this.size}\n >\n <output id=\"value\" aria-live=\"off\" for=\"input\">\n ${this.ariaValueText}\n </output>\n </sp-field-label>\n </div>\n `;\n }\n\n private renderRamp(): TemplateResult {\n if (this.variant !== 'ramp') {\n return html``;\n }\n return html`\n <div id=\"ramp\">\n <svg\n viewBox=\"0 0 240 16\"\n preserveAspectRatio=\"none\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path\n d=\"M240,4v8c0,2.3-1.9,4.1-4.2,4L1,9C0.4,9,0,8.5,0,8c0-0.5,0.4-1,1-1l234.8-7C238.1-0.1,240,1.7,240,4z\"\n ></path>\n </svg>\n </div>\n `;\n }\n\n private renderTicks(): TemplateResult {\n if (this.variant !== 'tick') {\n return html``;\n }\n const tickStep = this.tickStep || this.step;\n const tickCount =\n ((this.max as number) - (this.min as number)) / tickStep;\n const partialFit = tickCount % 1 !== 0;\n const ticks = new Array(Math.floor(tickCount + 1));\n ticks.fill(0, 0, tickCount + 1);\n return html`\n <div\n class=\"${partialFit ? 'not-exact ' : ''}ticks\"\n style=${ifDefined(\n partialFit\n ? `--sp-slider-tick-offset: calc(100% / ${this.max} * ${this.tickStep}`\n : undefined\n )}\n >\n ${ticks.map(\n (_tick, i) => html`\n <div class=\"tick\">\n ${this.tickLabels\n ? html`\n <div class=\"tickLabel\">\n ${i * tickStep + this.min}\n </div>\n `\n : nothing}\n </div>\n `\n )}\n </div>\n `;\n }\n\n private renderTrackSegment(start: number, end: number): TemplateResult {\n if (this.variant === 'ramp') {\n return html``;\n }\n return html`\n <div\n class=\"track\"\n style=${styleMap(this.trackSegmentStyles(start, end))}\n role=\"presentation\"\n ></div>\n `;\n }\n\n private _cachedValue: number | undefined;\n private centerPoint: number | undefined;\n\n /**\n * @description calculates the fill width\n * @param fillStartValue\n * @param currentValue\n * @param cachedValue\n * @returns\n */\n private getOffsetWidth(\n fillStartValue: number,\n currentValue: number\n ): number {\n const distance = Math.abs(currentValue - fillStartValue);\n return (distance / (this.max - this.min)) * 100;\n }\n\n /**\n * @description calculates the fill width starting point to fill width\n * @param value\n */\n private getOffsetPosition(value: number): number {\n return ((value - this.min) / (this.max - this.min)) * 100;\n }\n\n private fillStyles(centerPoint: number): StyleInfo {\n const position = this.dir === 'rtl' ? 'right' : 'left';\n const offsetPosition =\n this.value > centerPoint\n ? this.getOffsetPosition(centerPoint)\n : this.getOffsetPosition(this.value);\n const offsetWidth = this.getOffsetWidth(centerPoint, this.value);\n const styles: StyleInfo = {\n [position]: `${offsetPosition}%`,\n width: `${offsetWidth}%`,\n };\n return styles;\n }\n\n private renderFillOffset(): TemplateResult {\n if (!this._cachedValue || !this.centerPoint) {\n return html``;\n }\n return html`\n <div\n class=${classMap({\n fill: true,\n offset: this.value > this.centerPoint,\n })}\n style=${styleMap(this.fillStyles(this.centerPoint))}\n ></div>\n `;\n }\n\n private renderTrack(): TemplateResult {\n const segments = this.handleController.trackSegments();\n const handleItems = [\n { id: 'handles', html: this.handleController.render() },\n ];\n const trackItems = [\n { id: 'track0', html: this.renderTrackSegment(...segments[0]) },\n { id: 'fill', html: this.renderFillOffset() },\n { id: 'ramp', html: this.renderRamp() },\n ...segments.slice(1).map(([start, end], index) => ({\n id: `track${index + 1}`,\n html: this.renderTrackSegment(start, end),\n })),\n ];\n\n return html`\n <div\n id=\"track\"\n ${streamingListener({\n start: ['pointerdown', this.handlePointerdown],\n streamInside: ['pointermove', this.handlePointermove],\n end: [\n ['pointerup', 'pointercancel', 'pointerleave'],\n this.handlePointerup,\n ],\n })}\n >\n <div id=\"controls\">\n ${this.renderTicks()}\n <div class=\"trackContainer\">\n ${repeat(\n trackItems,\n (item) => item.id,\n (item) => item.html\n )}\n </div>\n <div class=\"handleContainer\">\n ${repeat(\n handleItems,\n (item) => item.id,\n (item) => item.html\n )}\n </div>\n </div>\n </div>\n `;\n }\n\n protected handlePointerdown(event: PointerEvent): void {\n this.handleController.handlePointerdown(event);\n }\n\n protected handlePointermove(event: PointerEvent): void {\n this.handleController.handlePointermove(event);\n }\n\n protected handlePointerup(event: PointerEvent): void {\n this.handleController.handlePointerup(event);\n }\n\n private handleNumberInput(event: Event & { target: NumberField }): void {\n const { value } = event.target;\n if (event.target?.managedInput && !isNaN(value)) {\n this.value = value;\n return;\n }\n // Do not apply uncommited values to the parent element unless interacting with the stepper UI.\n // Stop uncommitted input from being announced to the parent application.\n event.stopPropagation();\n }\n\n private handleNumberChange(event: Event & { target: NumberField }): void {\n const { value } = event.target;\n if (isNaN(value)) {\n event.target.value = this.value;\n event.stopPropagation();\n } else {\n this.value = value;\n if (!event.target?.managedInput) {\n // When stepper is not active, sythesize an `input` event so that the\n // `change` event isn't surprising.\n this.dispatchInputEvent();\n }\n }\n this.indeterminate = false;\n }\n\n private trackSegmentStyles(start: number, end: number): StyleInfo {\n const size = end - start;\n const styles: StyleInfo = {\n width: `${size * 100}%`,\n '--spectrum-slider-track-background-size': `${(1 / size) * 100}%`,\n '--spectrum-slider-track-segment-position': `${start * 100}%`,\n };\n return styles;\n }\n\n private _numberFieldInput: Promise<unknown> = Promise.resolve();\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n if (this.editable) {\n await this._numberFieldInput;\n await this.numberField.updateComplete;\n }\n await this.handleController.handleUpdatesComplete();\n return complete;\n }\n\n protected override willUpdate(changed: PropertyValues): void {\n if (changed.has('value') && changed.has('fillStart')) {\n this._cachedValue = Number(this.value);\n if (this.fillStart) {\n this.centerPoint = Number(this.fillStart);\n } else {\n this.centerPoint =\n (Number(this.max) - Number(this.min)) / 2 +\n Number(this.min);\n }\n }\n }\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/src/Slider.js CHANGED
@@ -80,7 +80,7 @@
80
80
  class=${c({fill:!0,offset:this.value>this.centerPoint})}
81
81
  style=${b(this.fillStyles(this.centerPoint))}
82
82
  ></div>
83
- `}renderTrack(){const e=this.handleController.trackSegments(),t=[{id:"handles",html:this.handleController.render()}],i=[{id:"track0",html:this.renderTrackSegment(...e[0])},{id:"ramp",html:this.renderRamp()},...e.slice(1).map(([l,n],u)=>({id:`track${u+1}`,html:this.renderTrackSegment(l,n)})),{id:"fill",html:this.renderFillOffset()}];return s`
83
+ `}renderTrack(){const e=this.handleController.trackSegments(),t=[{id:"handles",html:this.handleController.render()}],i=[{id:"track0",html:this.renderTrackSegment(...e[0])},{id:"fill",html:this.renderFillOffset()},{id:"ramp",html:this.renderRamp()},...e.slice(1).map(([l,n],u)=>({id:`track${u+1}`,html:this.renderTrackSegment(l,n)}))];return s`
84
84
  <div
85
85
  id="track"
86
86
  ${P({start:["pointerdown",this.handlePointerdown],streamInside:["pointermove",this.handlePointermove],end:[["pointerup","pointercancel","pointerleave"],this.handlePointerup]})}
@@ -95,5 +95,5 @@
95
95
  </div>
96
96
  </div>
97
97
  </div>
98
- `}handlePointerdown(e){this.handleController.handlePointerdown(e)}handlePointermove(e){this.handleController.handlePointermove(e)}handlePointerup(e){this.handleController.handlePointerup(e)}handleNumberInput(e){var i;const{value:t}=e.target;if((i=e.target)!=null&&i.managedInput&&!isNaN(t)){this.value=t;return}e.stopPropagation()}handleNumberChange(e){var i;const{value:t}=e.target;isNaN(t)?(e.target.value=this.value,e.stopPropagation()):(this.value=t,(i=e.target)!=null&&i.managedInput||this.dispatchInputEvent()),this.indeterminate=!1}trackSegmentStyles(e,t){const i=t-e;return{width:`${i*100}%`,...this.handleController.size>1&&{"--spectrum-slider-track-background-size":`${1/i*100}%`,"--spectrum-slider-track-segment-position":`${e*100}%`}}}async getUpdateComplete(){const e=await super.getUpdateComplete();return this.editable&&(await this._numberFieldInput,await this.numberField.updateComplete),await this.handleController.handleUpdatesComplete(),e}willUpdate(e){e.has("value")&&e.has("fillStart")&&(this._cachedValue=Number(this.value),this.fillStart?this.centerPoint=Number(this.fillStart):this.centerPoint=(Number(this.max)-Number(this.min))/2+Number(this.min))}}r([a({type:Boolean,reflect:!0})],Slider.prototype,"editable",1),r([a({type:Boolean,reflect:!0,attribute:"hide-stepper"})],Slider.prototype,"hideStepper",2),r([a()],Slider.prototype,"type",2),r([a({reflect:!0})],Slider.prototype,"dir",2),r([a({type:String})],Slider.prototype,"variant",1),r([a({attribute:!1})],Slider.prototype,"getAriaValueText",2),r([a({type:String,reflect:!0,attribute:"label-visibility"})],Slider.prototype,"labelVisibility",2),r([a({type:Number,reflect:!0})],Slider.prototype,"min",2),r([a({type:Number,reflect:!0})],Slider.prototype,"max",2),r([a({type:Number})],Slider.prototype,"step",2),r([a({type:Number,attribute:"tick-step"})],Slider.prototype,"tickStep",2),r([a({type:Boolean,attribute:"tick-labels"})],Slider.prototype,"tickLabels",2),r([a({type:Boolean,reflect:!0})],Slider.prototype,"disabled",2),r([a({type:Number,reflect:!0,attribute:"fill-start"})],Slider.prototype,"fillStart",2),r([a({type:Boolean})],Slider.prototype,"quiet",2),r([a({type:Boolean})],Slider.prototype,"indeterminate",2),r([p("#label")],Slider.prototype,"labelEl",2),r([p("#number-field")],Slider.prototype,"numberField",2),r([p("#track")],Slider.prototype,"track",2);
98
+ `}handlePointerdown(e){this.handleController.handlePointerdown(e)}handlePointermove(e){this.handleController.handlePointermove(e)}handlePointerup(e){this.handleController.handlePointerup(e)}handleNumberInput(e){var i;const{value:t}=e.target;if((i=e.target)!=null&&i.managedInput&&!isNaN(t)){this.value=t;return}e.stopPropagation()}handleNumberChange(e){var i;const{value:t}=e.target;isNaN(t)?(e.target.value=this.value,e.stopPropagation()):(this.value=t,(i=e.target)!=null&&i.managedInput||this.dispatchInputEvent()),this.indeterminate=!1}trackSegmentStyles(e,t){const i=t-e;return{width:`${i*100}%`,"--spectrum-slider-track-background-size":`${1/i*100}%`,"--spectrum-slider-track-segment-position":`${e*100}%`}}async getUpdateComplete(){const e=await super.getUpdateComplete();return this.editable&&(await this._numberFieldInput,await this.numberField.updateComplete),await this.handleController.handleUpdatesComplete(),e}willUpdate(e){e.has("value")&&e.has("fillStart")&&(this._cachedValue=Number(this.value),this.fillStart?this.centerPoint=Number(this.fillStart):this.centerPoint=(Number(this.max)-Number(this.min))/2+Number(this.min))}}r([a({type:Boolean,reflect:!0})],Slider.prototype,"editable",1),r([a({type:Boolean,reflect:!0,attribute:"hide-stepper"})],Slider.prototype,"hideStepper",2),r([a()],Slider.prototype,"type",2),r([a({reflect:!0})],Slider.prototype,"dir",2),r([a({type:String})],Slider.prototype,"variant",1),r([a({attribute:!1})],Slider.prototype,"getAriaValueText",2),r([a({type:String,reflect:!0,attribute:"label-visibility"})],Slider.prototype,"labelVisibility",2),r([a({type:Number,reflect:!0})],Slider.prototype,"min",2),r([a({type:Number,reflect:!0})],Slider.prototype,"max",2),r([a({type:Number})],Slider.prototype,"step",2),r([a({type:Number,attribute:"tick-step"})],Slider.prototype,"tickStep",2),r([a({type:Boolean,attribute:"tick-labels"})],Slider.prototype,"tickLabels",2),r([a({type:Boolean,reflect:!0})],Slider.prototype,"disabled",2),r([a({type:Number,reflect:!0,attribute:"fill-start"})],Slider.prototype,"fillStart",2),r([a({type:Boolean})],Slider.prototype,"quiet",2),r([a({type:Boolean})],Slider.prototype,"indeterminate",2),r([p("#label")],Slider.prototype,"labelEl",2),r([p("#number-field")],Slider.prototype,"numberField",2),r([p("#track")],Slider.prototype,"track",2);
99
99
  //# sourceMappingURL=Slider.js.map
package/src/Slider.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["Slider.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport {\n classMap,\n ifDefined,\n repeat,\n styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\n\nimport sliderStyles from './slider.css.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport { StyleInfo } from 'lit-html/directives/style-map';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport type { NumberField } from '@spectrum-web-components/number-field';\nimport { HandleController, HandleValueDictionary } from './HandleController.js';\nimport { SliderHandle } from './SliderHandle.js';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\nimport type { NumberFormatter } from '@internationalized/number';\n\nexport const variants = ['filled', 'ramp', 'range', 'tick'];\n\n/**\n * @element sp-slider\n *\n * @slot - text label for the Slider\n * @slot handle - optionally accepts two or more sp-slider-handle elements\n */\nexport class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {\n noDefaultSize: true,\n validSizes: ['s', 'm', 'l', 'xl'],\n}) {\n public static override get styles(): CSSResultArray {\n return [sliderStyles];\n }\n\n public override handleController: HandleController = new HandleController(\n this\n );\n\n /**\n * Whether to display a Number Field along side the slider UI\n */\n @property({ type: Boolean, reflect: true })\n public get editable(): boolean {\n return this._editable;\n }\n\n public set editable(editable: boolean) {\n if (editable === this.editable) return;\n const oldValue = this.editable;\n this._editable = this.handleController.size < 2 ? editable : false;\n if (this.editable) {\n this._numberFieldInput = import(\n '@spectrum-web-components/number-field/sp-number-field.js'\n );\n }\n if (oldValue !== this.editable) {\n this.requestUpdate('editable', oldValue);\n }\n }\n\n private _editable = false;\n\n /**\n * Whether the stepper UI of the Number Field is hidden or not\n */\n @property({ type: Boolean, reflect: true, attribute: 'hide-stepper' })\n public hideStepper = false;\n\n @property()\n public type = '';\n\n @property({ reflect: true })\n public override dir!: 'ltr' | 'rtl';\n\n @property({ type: String })\n public set variant(variant: string) {\n const oldVariant = this.variant;\n if (variant === this.variant) {\n return;\n }\n if (variants.includes(variant)) {\n this.setAttribute('variant', variant);\n this._variant = variant;\n } else {\n this.removeAttribute('variant');\n this._variant = '';\n }\n this.requestUpdate('variant', oldVariant);\n }\n\n public get variant(): string {\n return this._variant;\n }\n\n public get values(): HandleValueDictionary {\n return this.handleController.values;\n }\n\n public override get handleName(): string {\n return 'value';\n }\n\n /* Ensure that a '' value for `variant` removes the attribute instead of a blank value */\n private _variant = '';\n\n @property({ attribute: false })\n public getAriaValueText: (values: Map<string, string>) => string = (\n values\n ) => {\n const valueArray = [...values.values()];\n if (valueArray.length === 2)\n return `${valueArray[0]} - ${valueArray[1]}`;\n return valueArray.join(', ');\n };\n\n public override get ariaValueText(): string {\n if (!this.getAriaValueText) {\n return `${this.value}${this._forcedUnit}`;\n }\n return this.getAriaValueText(this.handleController.formattedValues);\n }\n\n @property({ type: String, reflect: true, attribute: 'label-visibility' })\n public labelVisibility?: 'text' | 'value' | 'none';\n\n @property({ type: Number, reflect: true })\n public override min = 0;\n\n @property({ type: Number, reflect: true })\n public override max = 100;\n\n @property({ type: Number })\n public override step = 1;\n\n @property({ type: Number, attribute: 'tick-step' })\n public tickStep = 0;\n\n @property({ type: Boolean, attribute: 'tick-labels' })\n public tickLabels = false;\n\n @property({ type: Boolean, reflect: true })\n public override disabled = false;\n\n @property({ type: Number, reflect: true, attribute: 'fill-start' })\n public fillStart?: number | boolean;\n\n /**\n * Applies `quiet` to the underlying `sp-number-field` when `editable === true`.\n */\n @property({ type: Boolean })\n public quiet = false;\n\n /**\n * Applies `indeterminate` to the underlying `sp-number-field` when `editable === true`. Is removed on the next `change` event.\n */\n @property({ type: Boolean })\n public indeterminate = false;\n\n @query('#label')\n public labelEl!: HTMLLabelElement;\n\n @query('#number-field')\n public numberField!: NumberField;\n\n @query('#track')\n public track!: HTMLDivElement;\n\n public override get numberFormat(): NumberFormatter {\n return this.getNumberFormat();\n }\n\n public override get focusElement(): HTMLElement {\n return this.handleController.focusElement;\n }\n\n protected handleLabelClick(event: Event): void {\n if (this.editable) {\n event.preventDefault();\n this.focus();\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n ${this.renderLabel()} ${this.renderTrack()}\n ${this.editable\n ? html`\n <sp-number-field\n .formatOptions=${this.formatOptions || {}}\n id=\"number-field\"\n min=${this.min}\n max=${this.max}\n step=${this.step}\n size=${this.size}\n value=${this.value}\n ?hide-stepper=${this.hideStepper}\n ?disabled=${this.disabled}\n ?quiet=${this.quiet}\n ?indeterminate=${this.indeterminate}\n @input=${this.handleNumberInput}\n @change=${this.handleNumberChange}\n ></sp-number-field>\n `\n : nothing}\n `;\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.handleController.hostConnected();\n }\n\n public override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.handleController.hostDisconnected();\n }\n\n public override update(changedProperties: Map<string, boolean>): void {\n this.handleController.hostUpdate();\n if (changedProperties.has('disabled') && this.disabled) {\n this.handleController.cancelDrag();\n }\n super.update(changedProperties);\n }\n\n private renderLabel(): TemplateResult {\n const textLabelVisible =\n this.labelVisibility === 'none' || this.labelVisibility === 'value';\n const valueLabelVisible =\n this.labelVisibility === 'none' || this.labelVisibility === 'text';\n return html`\n <div id=\"label-container\">\n <sp-field-label\n class=${classMap({\n 'visually-hidden': textLabelVisible,\n })}\n ?disabled=${this.disabled}\n id=\"label\"\n for=${this.editable\n ? 'number-field'\n : this.handleController.activeHandleInputId}\n @click=${this.handleLabelClick}\n size=${this.size}\n >\n ${this.slotHasContent ? nothing : this.label}\n <slot>${this.label}</slot>\n </sp-field-label>\n <sp-field-label\n class=${classMap({\n 'visually-hidden': valueLabelVisible,\n })}\n ?disabled=${this.disabled}\n for=${this.editable\n ? 'number-field'\n : this.handleController.activeHandleInputId}\n size=${this.size}\n >\n <output id=\"value\" aria-live=\"off\" for=\"input\">\n ${this.ariaValueText}\n </output>\n </sp-field-label>\n </div>\n `;\n }\n\n private renderRamp(): TemplateResult {\n if (this.variant !== 'ramp') {\n return html``;\n }\n return html`\n <div id=\"ramp\">\n <svg\n viewBox=\"0 0 240 16\"\n preserveAspectRatio=\"none\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path\n d=\"M240,4v8c0,2.3-1.9,4.1-4.2,4L1,9C0.4,9,0,8.5,0,8c0-0.5,0.4-1,1-1l234.8-7C238.1-0.1,240,1.7,240,4z\"\n ></path>\n </svg>\n </div>\n `;\n }\n\n private renderTicks(): TemplateResult {\n if (this.variant !== 'tick') {\n return html``;\n }\n const tickStep = this.tickStep || this.step;\n const tickCount =\n ((this.max as number) - (this.min as number)) / tickStep;\n const partialFit = tickCount % 1 !== 0;\n const ticks = new Array(Math.floor(tickCount + 1));\n ticks.fill(0, 0, tickCount + 1);\n return html`\n <div\n class=\"${partialFit ? 'not-exact ' : ''}ticks\"\n style=${ifDefined(\n partialFit\n ? `--sp-slider-tick-offset: calc(100% / ${this.max} * ${this.tickStep}`\n : undefined\n )}\n >\n ${ticks.map(\n (_tick, i) => html`\n <div class=\"tick\">\n ${this.tickLabels\n ? html`\n <div class=\"tickLabel\">\n ${i * tickStep + this.min}\n </div>\n `\n : nothing}\n </div>\n `\n )}\n </div>\n `;\n }\n\n private renderTrackSegment(start: number, end: number): TemplateResult {\n if (this.variant === 'ramp') {\n return html``;\n }\n return html`\n <div\n class=\"track\"\n style=${styleMap(this.trackSegmentStyles(start, end))}\n role=\"presentation\"\n ></div>\n `;\n }\n\n private _cachedValue: number | undefined;\n private centerPoint: number | undefined;\n\n /**\n * @description calculates the fill width\n * @param fillStartValue\n * @param currentValue\n * @param cachedValue\n * @returns\n */\n private getOffsetWidth(\n fillStartValue: number,\n currentValue: number\n ): number {\n const distance = Math.abs(currentValue - fillStartValue);\n return (distance / (this.max - this.min)) * 100;\n }\n\n /**\n * @description calculates the fill width starting point to fill width\n * @param value\n */\n private getOffsetPosition(value: number): number {\n return ((value - this.min) / (this.max - this.min)) * 100;\n }\n\n private fillStyles(centerPoint: number): StyleInfo {\n const position = this.dir === 'rtl' ? 'right' : 'left';\n const offsetPosition =\n this.value > centerPoint\n ? this.getOffsetPosition(centerPoint)\n : this.getOffsetPosition(this.value);\n const offsetWidth = this.getOffsetWidth(centerPoint, this.value);\n const styles: StyleInfo = {\n [position]: `${offsetPosition}%`,\n width: `${offsetWidth}%`,\n };\n return styles;\n }\n\n private renderFillOffset(): TemplateResult {\n if (!this._cachedValue || !this.centerPoint) {\n return html``;\n }\n return html`\n <div\n class=${classMap({\n fill: true,\n offset: this.value > this.centerPoint,\n })}\n style=${styleMap(this.fillStyles(this.centerPoint))}\n ></div>\n `;\n }\n\n private renderTrack(): TemplateResult {\n const segments = this.handleController.trackSegments();\n const handleItems = [\n { id: 'handles', html: this.handleController.render() },\n ];\n const trackItems = [\n { id: 'track0', html: this.renderTrackSegment(...segments[0]) },\n { id: 'ramp', html: this.renderRamp() },\n ...segments.slice(1).map(([start, end], index) => ({\n id: `track${index + 1}`,\n html: this.renderTrackSegment(start, end),\n })),\n { id: 'fill', html: this.renderFillOffset() },\n ];\n\n return html`\n <div\n id=\"track\"\n ${streamingListener({\n start: ['pointerdown', this.handlePointerdown],\n streamInside: ['pointermove', this.handlePointermove],\n end: [\n ['pointerup', 'pointercancel', 'pointerleave'],\n this.handlePointerup,\n ],\n })}\n >\n <div id=\"controls\">\n ${this.renderTicks()}\n <div class=\"trackContainer\">\n ${repeat(\n trackItems,\n (item) => item.id,\n (item) => item.html\n )}\n </div>\n <div class=\"handleContainer\">\n ${repeat(\n handleItems,\n (item) => item.id,\n (item) => item.html\n )}\n </div>\n </div>\n </div>\n `;\n }\n\n protected handlePointerdown(event: PointerEvent): void {\n this.handleController.handlePointerdown(event);\n }\n\n protected handlePointermove(event: PointerEvent): void {\n this.handleController.handlePointermove(event);\n }\n\n protected handlePointerup(event: PointerEvent): void {\n this.handleController.handlePointerup(event);\n }\n\n private handleNumberInput(event: Event & { target: NumberField }): void {\n const { value } = event.target;\n if (event.target?.managedInput && !isNaN(value)) {\n this.value = value;\n return;\n }\n // Do not apply uncommited values to the parent element unless interacting with the stepper UI.\n // Stop uncommitted input from being announced to the parent application.\n event.stopPropagation();\n }\n\n private handleNumberChange(event: Event & { target: NumberField }): void {\n const { value } = event.target;\n if (isNaN(value)) {\n event.target.value = this.value;\n event.stopPropagation();\n } else {\n this.value = value;\n if (!event.target?.managedInput) {\n // When stepper is not active, sythesize an `input` event so that the\n // `change` event isn't surprising.\n this.dispatchInputEvent();\n }\n }\n this.indeterminate = false;\n }\n\n private trackSegmentStyles(start: number, end: number): StyleInfo {\n const size = end - start;\n const styles: StyleInfo = {\n width: `${size * 100}%`,\n ...(this.handleController.size > 1 && {\n '--spectrum-slider-track-background-size': `${\n (1 / size) * 100\n }%`,\n '--spectrum-slider-track-segment-position': `${start * 100}%`,\n }),\n };\n return styles;\n }\n\n private _numberFieldInput: Promise<unknown> = Promise.resolve();\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n if (this.editable) {\n await this._numberFieldInput;\n await this.numberField.updateComplete;\n }\n await this.handleController.handleUpdatesComplete();\n return complete;\n }\n\n protected override willUpdate(changed: PropertyValues): void {\n if (changed.has('value') && changed.has('fillStart')) {\n this._cachedValue = Number(this.value);\n if (this.fillStart) {\n this.centerPoint = Number(this.fillStart);\n } else {\n this.centerPoint =\n (Number(this.max) - Number(this.min)) / 2 +\n Number(this.min);\n }\n }\n }\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport {\n classMap,\n ifDefined,\n repeat,\n styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\n\nimport sliderStyles from './slider.css.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport { StyleInfo } from 'lit-html/directives/style-map';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport type { NumberField } from '@spectrum-web-components/number-field';\nimport { HandleController, HandleValueDictionary } from './HandleController.js';\nimport { SliderHandle } from './SliderHandle.js';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\nimport type { NumberFormatter } from '@internationalized/number';\n\nexport const variants = ['filled', 'ramp', 'range', 'tick'];\n\n/**\n * @element sp-slider\n *\n * @slot - text label for the Slider\n * @slot handle - optionally accepts two or more sp-slider-handle elements\n */\nexport class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {\n noDefaultSize: true,\n validSizes: ['s', 'm', 'l', 'xl'],\n}) {\n public static override get styles(): CSSResultArray {\n return [sliderStyles];\n }\n\n public override handleController: HandleController = new HandleController(\n this\n );\n\n /**\n * Whether to display a Number Field along side the slider UI\n */\n @property({ type: Boolean, reflect: true })\n public get editable(): boolean {\n return this._editable;\n }\n\n public set editable(editable: boolean) {\n if (editable === this.editable) return;\n const oldValue = this.editable;\n this._editable = this.handleController.size < 2 ? editable : false;\n if (this.editable) {\n this._numberFieldInput = import(\n '@spectrum-web-components/number-field/sp-number-field.js'\n );\n }\n if (oldValue !== this.editable) {\n this.requestUpdate('editable', oldValue);\n }\n }\n\n private _editable = false;\n\n /**\n * Whether the stepper UI of the Number Field is hidden or not\n */\n @property({ type: Boolean, reflect: true, attribute: 'hide-stepper' })\n public hideStepper = false;\n\n @property()\n public type = '';\n\n @property({ reflect: true })\n public override dir!: 'ltr' | 'rtl';\n\n @property({ type: String })\n public set variant(variant: string) {\n const oldVariant = this.variant;\n if (variant === this.variant) {\n return;\n }\n if (variants.includes(variant)) {\n this.setAttribute('variant', variant);\n this._variant = variant;\n } else {\n this.removeAttribute('variant');\n this._variant = '';\n }\n this.requestUpdate('variant', oldVariant);\n }\n\n public get variant(): string {\n return this._variant;\n }\n\n public get values(): HandleValueDictionary {\n return this.handleController.values;\n }\n\n public override get handleName(): string {\n return 'value';\n }\n\n /* Ensure that a '' value for `variant` removes the attribute instead of a blank value */\n private _variant = '';\n\n @property({ attribute: false })\n public getAriaValueText: (values: Map<string, string>) => string = (\n values\n ) => {\n const valueArray = [...values.values()];\n if (valueArray.length === 2)\n return `${valueArray[0]} - ${valueArray[1]}`;\n return valueArray.join(', ');\n };\n\n public override get ariaValueText(): string {\n if (!this.getAriaValueText) {\n return `${this.value}${this._forcedUnit}`;\n }\n return this.getAriaValueText(this.handleController.formattedValues);\n }\n\n @property({ type: String, reflect: true, attribute: 'label-visibility' })\n public labelVisibility?: 'text' | 'value' | 'none';\n\n @property({ type: Number, reflect: true })\n public override min = 0;\n\n @property({ type: Number, reflect: true })\n public override max = 100;\n\n @property({ type: Number })\n public override step = 1;\n\n @property({ type: Number, attribute: 'tick-step' })\n public tickStep = 0;\n\n @property({ type: Boolean, attribute: 'tick-labels' })\n public tickLabels = false;\n\n @property({ type: Boolean, reflect: true })\n public override disabled = false;\n\n @property({ type: Number, reflect: true, attribute: 'fill-start' })\n public fillStart?: number | boolean;\n\n /**\n * Applies `quiet` to the underlying `sp-number-field` when `editable === true`.\n */\n @property({ type: Boolean })\n public quiet = false;\n\n /**\n * Applies `indeterminate` to the underlying `sp-number-field` when `editable === true`. Is removed on the next `change` event.\n */\n @property({ type: Boolean })\n public indeterminate = false;\n\n @query('#label')\n public labelEl!: HTMLLabelElement;\n\n @query('#number-field')\n public numberField!: NumberField;\n\n @query('#track')\n public track!: HTMLDivElement;\n\n public override get numberFormat(): NumberFormatter {\n return this.getNumberFormat();\n }\n\n public override get focusElement(): HTMLElement {\n return this.handleController.focusElement;\n }\n\n protected handleLabelClick(event: Event): void {\n if (this.editable) {\n event.preventDefault();\n this.focus();\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n ${this.renderLabel()} ${this.renderTrack()}\n ${this.editable\n ? html`\n <sp-number-field\n .formatOptions=${this.formatOptions || {}}\n id=\"number-field\"\n min=${this.min}\n max=${this.max}\n step=${this.step}\n size=${this.size}\n value=${this.value}\n ?hide-stepper=${this.hideStepper}\n ?disabled=${this.disabled}\n ?quiet=${this.quiet}\n ?indeterminate=${this.indeterminate}\n @input=${this.handleNumberInput}\n @change=${this.handleNumberChange}\n ></sp-number-field>\n `\n : nothing}\n `;\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.handleController.hostConnected();\n }\n\n public override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.handleController.hostDisconnected();\n }\n\n public override update(changedProperties: Map<string, boolean>): void {\n this.handleController.hostUpdate();\n if (changedProperties.has('disabled') && this.disabled) {\n this.handleController.cancelDrag();\n }\n super.update(changedProperties);\n }\n\n private renderLabel(): TemplateResult {\n const textLabelVisible =\n this.labelVisibility === 'none' || this.labelVisibility === 'value';\n const valueLabelVisible =\n this.labelVisibility === 'none' || this.labelVisibility === 'text';\n return html`\n <div id=\"label-container\">\n <sp-field-label\n class=${classMap({\n 'visually-hidden': textLabelVisible,\n })}\n ?disabled=${this.disabled}\n id=\"label\"\n for=${this.editable\n ? 'number-field'\n : this.handleController.activeHandleInputId}\n @click=${this.handleLabelClick}\n size=${this.size}\n >\n ${this.slotHasContent ? nothing : this.label}\n <slot>${this.label}</slot>\n </sp-field-label>\n <sp-field-label\n class=${classMap({\n 'visually-hidden': valueLabelVisible,\n })}\n ?disabled=${this.disabled}\n for=${this.editable\n ? 'number-field'\n : this.handleController.activeHandleInputId}\n size=${this.size}\n >\n <output id=\"value\" aria-live=\"off\" for=\"input\">\n ${this.ariaValueText}\n </output>\n </sp-field-label>\n </div>\n `;\n }\n\n private renderRamp(): TemplateResult {\n if (this.variant !== 'ramp') {\n return html``;\n }\n return html`\n <div id=\"ramp\">\n <svg\n viewBox=\"0 0 240 16\"\n preserveAspectRatio=\"none\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path\n d=\"M240,4v8c0,2.3-1.9,4.1-4.2,4L1,9C0.4,9,0,8.5,0,8c0-0.5,0.4-1,1-1l234.8-7C238.1-0.1,240,1.7,240,4z\"\n ></path>\n </svg>\n </div>\n `;\n }\n\n private renderTicks(): TemplateResult {\n if (this.variant !== 'tick') {\n return html``;\n }\n const tickStep = this.tickStep || this.step;\n const tickCount =\n ((this.max as number) - (this.min as number)) / tickStep;\n const partialFit = tickCount % 1 !== 0;\n const ticks = new Array(Math.floor(tickCount + 1));\n ticks.fill(0, 0, tickCount + 1);\n return html`\n <div\n class=\"${partialFit ? 'not-exact ' : ''}ticks\"\n style=${ifDefined(\n partialFit\n ? `--sp-slider-tick-offset: calc(100% / ${this.max} * ${this.tickStep}`\n : undefined\n )}\n >\n ${ticks.map(\n (_tick, i) => html`\n <div class=\"tick\">\n ${this.tickLabels\n ? html`\n <div class=\"tickLabel\">\n ${i * tickStep + this.min}\n </div>\n `\n : nothing}\n </div>\n `\n )}\n </div>\n `;\n }\n\n private renderTrackSegment(start: number, end: number): TemplateResult {\n if (this.variant === 'ramp') {\n return html``;\n }\n return html`\n <div\n class=\"track\"\n style=${styleMap(this.trackSegmentStyles(start, end))}\n role=\"presentation\"\n ></div>\n `;\n }\n\n private _cachedValue: number | undefined;\n private centerPoint: number | undefined;\n\n /**\n * @description calculates the fill width\n * @param fillStartValue\n * @param currentValue\n * @param cachedValue\n * @returns\n */\n private getOffsetWidth(\n fillStartValue: number,\n currentValue: number\n ): number {\n const distance = Math.abs(currentValue - fillStartValue);\n return (distance / (this.max - this.min)) * 100;\n }\n\n /**\n * @description calculates the fill width starting point to fill width\n * @param value\n */\n private getOffsetPosition(value: number): number {\n return ((value - this.min) / (this.max - this.min)) * 100;\n }\n\n private fillStyles(centerPoint: number): StyleInfo {\n const position = this.dir === 'rtl' ? 'right' : 'left';\n const offsetPosition =\n this.value > centerPoint\n ? this.getOffsetPosition(centerPoint)\n : this.getOffsetPosition(this.value);\n const offsetWidth = this.getOffsetWidth(centerPoint, this.value);\n const styles: StyleInfo = {\n [position]: `${offsetPosition}%`,\n width: `${offsetWidth}%`,\n };\n return styles;\n }\n\n private renderFillOffset(): TemplateResult {\n if (!this._cachedValue || !this.centerPoint) {\n return html``;\n }\n return html`\n <div\n class=${classMap({\n fill: true,\n offset: this.value > this.centerPoint,\n })}\n style=${styleMap(this.fillStyles(this.centerPoint))}\n ></div>\n `;\n }\n\n private renderTrack(): TemplateResult {\n const segments = this.handleController.trackSegments();\n const handleItems = [\n { id: 'handles', html: this.handleController.render() },\n ];\n const trackItems = [\n { id: 'track0', html: this.renderTrackSegment(...segments[0]) },\n { id: 'fill', html: this.renderFillOffset() },\n { id: 'ramp', html: this.renderRamp() },\n ...segments.slice(1).map(([start, end], index) => ({\n id: `track${index + 1}`,\n html: this.renderTrackSegment(start, end),\n })),\n ];\n\n return html`\n <div\n id=\"track\"\n ${streamingListener({\n start: ['pointerdown', this.handlePointerdown],\n streamInside: ['pointermove', this.handlePointermove],\n end: [\n ['pointerup', 'pointercancel', 'pointerleave'],\n this.handlePointerup,\n ],\n })}\n >\n <div id=\"controls\">\n ${this.renderTicks()}\n <div class=\"trackContainer\">\n ${repeat(\n trackItems,\n (item) => item.id,\n (item) => item.html\n )}\n </div>\n <div class=\"handleContainer\">\n ${repeat(\n handleItems,\n (item) => item.id,\n (item) => item.html\n )}\n </div>\n </div>\n </div>\n `;\n }\n\n protected handlePointerdown(event: PointerEvent): void {\n this.handleController.handlePointerdown(event);\n }\n\n protected handlePointermove(event: PointerEvent): void {\n this.handleController.handlePointermove(event);\n }\n\n protected handlePointerup(event: PointerEvent): void {\n this.handleController.handlePointerup(event);\n }\n\n private handleNumberInput(event: Event & { target: NumberField }): void {\n const { value } = event.target;\n if (event.target?.managedInput && !isNaN(value)) {\n this.value = value;\n return;\n }\n // Do not apply uncommited values to the parent element unless interacting with the stepper UI.\n // Stop uncommitted input from being announced to the parent application.\n event.stopPropagation();\n }\n\n private handleNumberChange(event: Event & { target: NumberField }): void {\n const { value } = event.target;\n if (isNaN(value)) {\n event.target.value = this.value;\n event.stopPropagation();\n } else {\n this.value = value;\n if (!event.target?.managedInput) {\n // When stepper is not active, sythesize an `input` event so that the\n // `change` event isn't surprising.\n this.dispatchInputEvent();\n }\n }\n this.indeterminate = false;\n }\n\n private trackSegmentStyles(start: number, end: number): StyleInfo {\n const size = end - start;\n const styles: StyleInfo = {\n width: `${size * 100}%`,\n '--spectrum-slider-track-background-size': `${(1 / size) * 100}%`,\n '--spectrum-slider-track-segment-position': `${start * 100}%`,\n };\n return styles;\n }\n\n private _numberFieldInput: Promise<unknown> = Promise.resolve();\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const complete = (await super.getUpdateComplete()) as boolean;\n if (this.editable) {\n await this._numberFieldInput;\n await this.numberField.updateComplete;\n }\n await this.handleController.handleUpdatesComplete();\n return complete;\n }\n\n protected override willUpdate(changed: PropertyValues): void {\n if (changed.has('value') && changed.has('fillStart')) {\n this._cachedValue = Number(this.value);\n if (this.fillStart) {\n this.centerPoint = Number(this.fillStart);\n } else {\n this.centerPoint =\n (Number(this.max) - Number(this.min)) / 2 +\n Number(this.min);\n }\n }\n }\n}\n"],
5
+ "mappings": "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",
6
6
  "names": ["html", "nothing", "SizedMixin", "property", "query", "classMap", "ifDefined", "repeat", "styleMap", "sliderStyles", "ObserveSlotText", "HandleController", "SliderHandle", "streamingListener", "values", "valueArray", "editable", "oldValue", "variant", "oldVariant", "event", "changedProperties", "textLabelVisible", "valueLabelVisible", "tickStep", "tickCount", "partialFit", "ticks", "_tick", "i", "start", "end", "fillStartValue", "currentValue", "value", "centerPoint", "position", "offsetPosition", "offsetWidth", "segments", "handleItems", "trackItems", "index", "item", "_a", "size", "complete", "changed", "__decorateClass"]
7
7
  }
package/src/slider.css.dev.js CHANGED
@@ -7,7 +7,7 @@ const styles = css`
7
7
  --spectrum-component-top-to-text-75
8
8
  );--spectrum-slider-control-to-field-label:var(
9
9
  --spectrum-slider-control-to-field-label-medium
10
- );--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([size=s]){--spectrum-slider-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-small);--spectrum-slider-control-height:var(--spectrum-component-height-75);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var(
10
+ );--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([dir=rtl]),[dir=rtl] :host{--spectrum-logical-rotation:matrix(-1,0,0,1,0,0)}:host([size=s]){--spectrum-slider-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-small);--spectrum-slider-control-height:var(--spectrum-component-height-75);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var(
11
11
  --spectrum-slider-handle-border-width-down-small
12
12
  );--spectrum-slider-label-top-to-text:var(
13
13
  --spectrum-component-top-to-text-75
@@ -122,7 +122,7 @@ var(--spectrum-slider-controls-margin)
122
122
  );margin-block-start:calc(var(
123
123
  --mod-slider-ramp-track-height,
124
124
  var(--spectrum-slider-ramp-track-height)
125
- )/2);position:absolute}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{block-size:100%;inline-size:100%}.handle{block-size:var(
125
+ )/2);position:absolute}#ramp svg{block-size:100%;inline-size:100%;transform:var(--spectrum-logical-rotation)}.handle{block-size:var(
126
126
  --mod-slider-handle-size,var(--spectrum-slider-handle-size)
127
127
  );border-radius:var(
128
128
  --mod-slider-handle-border-radius,var(--spectrum-slider-handle-border-radius)
@@ -223,10 +223,6 @@ var(--spectrum-slider-tick-mark-width)
223
223
  --highcontrast-slider-handle-border-color,var(
224
224
  --mod-slider-handle-border-color,var(--spectrum-slider-handle-border-color)
225
225
  )
226
- )}.handle:hover{border-color:var(
227
- --highcontrast-slider-handle-border-color-hover,var(
228
- --mod-slider-handle-border-color-hover,var(--spectrum-slider-handle-border-color-hover)
229
- )
230
226
  )}.handle.handle-highlight{border-color:var(
231
227
  --highcontrast-slider-handle-border-color-key-focus,var(
232
228
  --mod-slider-handle-border-color-key-focus,var(--spectrum-slider-handle-border-color-key-focus)
@@ -260,7 +256,7 @@ var(--spectrum-slider-tick-mark-width)
260
256
  --mod-slider-handle-border-color-down,var(--spectrum-slider-handle-border-color-down)
261
257
  )
262
258
  )}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(
263
- --highcontrast-slider-track-fill-color,var(
259
+ --highcontrast-slider-track-fill-icolor,var(
264
260
  --mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)
265
261
  )
266
262
  )}:host([disabled]){cursor:default}:host([disabled]) #controls{cursor:default}:host([disabled]) #label-container,:host([disabled]) .tickLabel{color:var(
@@ -275,13 +271,25 @@ var(--spectrum-slider-tick-mark-width)
275
271
  --highcontrast-slider-handle-border-color-disabled,var(
276
272
  --mod-slider-handle-border-color-disabled,var(--spectrum-slider-handle-border-color-disabled)
277
273
  )
278
- );cursor:default;pointer-events:none}:host([disabled]) .handle:active,:host([disabled]) .handle:hover{background:var(
274
+ );cursor:default;pointer-events:none}:host([disabled]) .handle:active{background:var(
279
275
  --highcontrast-slider-handle-background-color-disabled,var(
280
276
  --mod-slider-handle-background-color-disabled,var(--spectrum-slider-handle-background-color-disabled)
281
277
  )
282
278
  );border-color:var(
283
279
  --highcontrast-disabled-border-color,var(--mod-disabled-border-color,var(--spectrum-disabled-border-color))
284
- )}:host([disabled]) .track:before{background:var(
280
+ )}@media (hover:hover){.handle:hover{border-color:var(
281
+ --highcontrast-slider-handle-border-color-hover,var(
282
+ --mod-slider-handle-border-color-hover,var(--spectrum-slider-handle-border-color-hover)
283
+ )
284
+ )}:host([disabled]) .handle:hover{background:var(
285
+ --highcontrast-slider-handle-background-color-disabled,var(
286
+ --mod-slider-handle-background-color-disabled,var(--spectrum-slider-handle-background-color-disabled)
287
+ )
288
+ );border-color:var(
289
+ --highcontrast-disabled-border-color,var(
290
+ --mod-disabled-border-color,var(--spectrum-disabled-border-color)
291
+ )
292
+ )}}:host([disabled]) .track:before{background:var(
285
293
  --highcontrast-slider-track-color-disabled,var(
286
294
  --mod-slider-track-color-disabled,var(--spectrum-slider-track-color-disabled)
287
295
  )
@@ -305,7 +313,7 @@ var(--spectrum-slider-tick-mark-width)
305
313
  --highcontrast-slider-track-color-disabled,var(
306
314
  --mod-slider-track-color-disabled,var(--spectrum-slider-track-color-disabled)
307
315
  )
308
- )}@media (forced-colors:active){:host{--highcontrast-slider-track-color:ButtonText;--highcontrast-slider-track-fill-color:ButtonText;--highcontrast-slider-ramp-track-color:ButtonText;--highcontrast-slider-ramp-track-color-disabled:GrayText;--highcontrast-slider-tick-mark-color:ButtonText;--highcontrast-slider-handle-border-color:ButtonText;--highcontrast-slider-handle-border-color-hover:Highlight;--highcontrast-slider-handle-border-color-down:Highlight;--highcontrast-slider-handle-border-color-key-focus:Highlight;--highcontrast-slider-handle-focus-ring-color-key-focus:CanvasText;--highcontrast-slider-handle-background-color:ButtonFace;--highcontrast-slider-ramp-handle-border-color-active:ButtonFace;--highcontrast-slider-ramp-handle-background-color:ButtonFace;--spectrum-slider-track-color:ButtonText;--spectrum-slider-track-fill-color:ButtonText;--spectrum-slider-ramp-track-color:ButtonText;--spectrum-slider-ramp-track-color-disabled:GrayText;--spectrum-slider-handle-background-color:ButtonFace;--spectrum-slider-handle-background-color-disabled:GrayText;--spectrum-slider-handle-border-color:ButtonText;--spectrum-slider-handle-disabled-background-color:GrayText;--spectrum-slider-tick-mark-color:ButtonText;--spectrum-slider-tick-mark-color-disabled:GrayText;--spectrum-slider-handle-border-color-hover:Highlight;--spectrum-slider-handle-border-color-down:Highlight;--spectrum-slider-handle-border-color-key-focus:Highlight;--spectrum-slider-handle-focus-ring-color-key-focus:Highlight;--spectrum-slider-track-color-disabled:GrayText;--spectrum-slider-track-fill-color-disabled:GrayText;--spectrum-slider-handle-border-color-disabled:GrayText;--spectrum-slider-label-text-color:CanvasText;--spectrum-slider-label-text-color-disabled:GrayText;--spectrum-slider-ramp-handle-border-color-active:ButtonText}.handle.handle-highlight:before{forced-color-adjust:none}:host([variant=ramp]) .handle{forced-color-adjust:none}:host:not(.is-disabled) #controls.handle-highlight,:host:not(.is-disabled) #controls:active,:host:not(.is-disabled) #controls:focus-within,:host:not(.is-disabled) #controls:hover{--highcontrast-slider-track-fill-color:Highlight;--highcontrast-slider-track-color:Highlight;--highcontrast-slider-handle-border-color:Highlight;--highcontrast-slider-ramp-track-color:Highlight;--highcontrast-slider-tick-mark-color:Highlight}:host([disabled]) #ramp+.handle{fill:ButtonFace;background-color:ButtonFace}}:host{--spectrum-slider-track-color:var(--system-spectrum-slider-track-color);--spectrum-slider-track-fill-color:var(
316
+ )}@media (forced-colors:active){:host{--highcontrast-slider-track-color:ButtonText;--highcontrast-slider-track-fill-color:ButtonText;--highcontrast-slider-ramp-track-color:ButtonText;--highcontrast-slider-ramp-track-color-disabled:GrayText;--highcontrast-slider-tick-mark-color:ButtonText;--highcontrast-slider-handle-border-color:ButtonText;--highcontrast-slider-handle-border-color-hover:Highlight;--highcontrast-slider-handle-border-color-down:Highlight;--highcontrast-slider-handle-border-color-key-focus:Highlight;--highcontrast-slider-handle-focus-ring-color-key-focus:CanvasText;--highcontrast-slider-handle-background-color:ButtonFace;--highcontrast-slider-ramp-handle-border-color-active:ButtonFace;--highcontrast-slider-ramp-handle-background-color:ButtonFace;--spectrum-slider-track-color:ButtonText;--spectrum-slider-track-fill-color:ButtonText;--spectrum-slider-ramp-track-color:ButtonText;--spectrum-slider-ramp-track-color-disabled:GrayText;--spectrum-slider-handle-background-color:ButtonFace;--spectrum-slider-handle-background-color-disabled:GrayText;--spectrum-slider-handle-border-color:ButtonText;--spectrum-slider-handle-disabled-background-color:GrayText;--spectrum-slider-tick-mark-color:ButtonText;--spectrum-slider-tick-mark-color-disabled:GrayText;--spectrum-slider-handle-border-color-hover:Highlight;--spectrum-slider-handle-border-color-down:Highlight;--spectrum-slider-handle-border-color-key-focus:Highlight;--spectrum-slider-handle-focus-ring-color-key-focus:Highlight;--spectrum-slider-track-color-disabled:GrayText;--spectrum-slider-track-fill-color-disabled:GrayText;--spectrum-slider-handle-border-color-disabled:GrayText;--spectrum-slider-label-text-color:CanvasText;--spectrum-slider-label-text-color-disabled:GrayText;--spectrum-slider-ramp-handle-border-color-active:ButtonText}.handle.handle-highlight:before{forced-color-adjust:none}:host([variant=ramp]) .handle{forced-color-adjust:none}:host:not(.is-disabled) #controls.handle-highlight,:host:not(.is-disabled) #controls:active,:host:not(.is-disabled) #controls:focus-within{--highcontrast-slider-track-fill-color:Highlight;--highcontrast-slider-track-color:Highlight;--highcontrast-slider-handle-border-color:Highlight;--highcontrast-slider-ramp-track-color:Highlight;--highcontrast-slider-tick-mark-color:Highlight}@media (hover:hover){:host:not(.is-disabled) #controls:hover{--highcontrast-slider-track-fill-color:Highlight;--highcontrast-slider-track-color:Highlight;--highcontrast-slider-handle-border-color:Highlight;--highcontrast-slider-ramp-track-color:Highlight;--highcontrast-slider-tick-mark-color:Highlight}}:host([disabled]) #ramp+.handle{fill:ButtonFace;background-color:ButtonFace}}:host{--spectrum-slider-track-color:var(--system-spectrum-slider-track-color);--spectrum-slider-track-fill-color:var(
309
317
  --system-spectrum-slider-track-fill-color
310
318
  );--spectrum-slider-ramp-track-color:var(
311
319
  --system-spectrum-slider-ramp-track-color
@@ -333,7 +341,7 @@ var(--spectrum-slider-tick-mark-width)
333
341
  --system-spectrum-slider-handle-border-color-key-focus
334
342
  );--spectrum-slider-handle-focus-ring-color-key-focus:var(
335
343
  --system-spectrum-slider-handle-focus-ring-color-key-focus
336
- )}:host(:focus){outline:0}:host([editable]){display:grid;grid-template-areas:"label number" "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{align-self:flex-end;grid-area:number;margin-inline-start:var(--spectrum-global-dimension-size-200)}:host([editable]) output{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([disabled]){pointer-events:none}#track,:host([dragging]){touch-action:none;-webkit-user-select:none;user-select: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%)}:host([dir=rtl]) .handle:before{transform:translate(50%,-50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) .track:last-of-type:before{background-position:100%}:host([dir=rtl]) .track:first-of-type:before{background-position:100%}:host([dir=ltr]) .track:not(:first-of-type,:last-of-type){left:var(--spectrum-slider-track-segment-position)}:host([dir=rtl]) .track:not(:first-of-type,:last-of-type){right:var(--spectrum-slider-track-segment-position)}.visually-hidden{clip:rect(0 0 0 0);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}:host([label-visibility=none]) #track{align-self:flex-end}
344
+ )}:host(:focus){outline:0}:host([editable]){display:grid;grid-template-areas:"label number" "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{align-self:flex-end;grid-area:number;margin-inline-start:var(--spectrum-global-dimension-size-200)}:host([editable]) output{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([disabled]){pointer-events:none}#track,:host([dragging]){touch-action:none;-webkit-user-select:none;user-select: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%)}:host([dir=rtl]) .handle:before{transform:translate(50%,-50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) .track:last-of-type:before{background-position:100%}:host([dir=rtl]) .track:first-of-type:before{background-position:100%}:host([dir=ltr]) .track:not(:first-of-type,:last-of-type){left:var(--spectrum-slider-track-segment-position)}:host([dir=rtl]) .track:not(:first-of-type,:last-of-type){right:var(--spectrum-slider-track-segment-position)}.visually-hidden{clip:rect(0 0 0 0);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}:host([label-visibility=none]) #track{align-self:flex-end}.fill{z-index:2}
337
345
  `;
338
346
  export default styles;
339
347
  //# sourceMappingURL=slider.css.dev.js.map